(() => { if (window.__pandaCanvasBridge) return; window.__pandaCanvasBridge = true; let enabled = false; let selectedEl = null; // source tag → { snaps: [{el, css, text}], clones: [node] } var pvRegistry = {}; function getRect(el) { var r = el.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height }; } function getSelector(el) { if (el.id) return '#' + el.id; var path = []; var cur = el; while (cur && cur !== document.body && cur !== document.documentElement) { var tag = cur.tagName.toLowerCase(); if (cur.id) { path.unshift('#' + cur.id); break; } var parent = cur.parentElement; if (parent) { var siblings = Array.from(parent.children).filter(function(c) { return c.tagName === cur.tagName; }); if (siblings.length > 1) { tag += ':nth-child(' + (Array.from(parent.children).indexOf(cur) + 1) + ')'; } } path.unshift(tag); cur = parent; } return path.join(' > '); } function getXPath(el) { var parts = []; var cur = el; while (cur && cur.nodeType === 1) { var idx = 1; var sib = cur.previousSibling; while (sib) { if (sib.nodeType === 1 && sib.tagName === cur.tagName) idx++; sib = sib.previousSibling; } parts.unshift(cur.tagName.toLowerCase() + '[' + idx + ']'); cur = cur.parentNode; } return '/' + parts.join('/'); } function getStyles(el) { var cs = window.getComputedStyle(el); return { backgroundImage: cs.backgroundImage, fontSize: cs.fontSize, fontWeight: cs.fontWeight, color: cs.color, backgroundColor: cs.backgroundColor, textAlign: cs.textAlign, opacity: cs.opacity, borderColor: cs.borderColor, borderWidth: cs.borderWidth, borderRadius: cs.borderRadius, paddingTop: cs.paddingTop, paddingRight: cs.paddingRight, paddingBottom: cs.paddingBottom, paddingLeft: cs.paddingLeft, marginTop: cs.marginTop, marginRight: cs.marginRight, marginBottom: cs.marginBottom, marginLeft: cs.marginLeft, display: cs.display, objectFit: cs.objectFit, lineHeight: cs.lineHeight, borderStyle: cs.borderTopStyle, backgroundClip: cs.backgroundClip || cs.webkitBackgroundClip }; } // What text the element ITSELF renders (SelectedElement.textKind). Read off // the page, not the source: a JSX child expression can be a word or a whole // menu, and only the DOM knows which. textContent cannot answer it either — // it is every descendant's words, so a header "has text" by that measure. var TEXTLESS_INPUT_TYPES = { hidden: 1, checkbox: 1, radio: 1, range: 1, color: 1, file: 1, image: 1 }; function textKindOf(el) { var t = el.tagName; if (t === 'TEXTAREA' || t === 'SELECT') return 'field'; if (t === 'INPUT') { var type = (el.getAttribute('type') || 'text').toLowerCase(); return TEXTLESS_INPUT_TYPES[type] ? 'none' : 'field'; } var nodes = el.childNodes; for (var i = 0; i < nodes.length; i++) { if (nodes[i].nodeType === 3 && (nodes[i].textContent || '').trim() !== '') return 'own'; } return 'none'; } // What each of the element's own classes DECLARES, read from the compiled // stylesheets. A size preset sets more than a size — Tailwind's text-sm is a // line-height too, and a project's config can add letter-spacing — so a save // that strips one needs to know what to keep, per breakpoint. Only exact // single-class rules count; custom properties are plumbing and are skipped. // A class WITHOUT a variant that also has rules inside @media/@supports means // different things at different widths, which one map can't say — it is // left out, and the parent falls back to the computed value (as it does for // a cross-origin sheet it can't read). A variant class (md:text-lg) lives in // its own media rule by design, so that one counts. Such a class's property // NAMES are still reported (classConditionalProperties): the save needs to // know it declares a property even when it can't know one value for it. The // same goes for a condition NESTED inside the class's own rule (CSS nesting). // Every declaration is read — an @apply class easily passes a dozen once its // shorthands expand into longhands. Null-prototype maps: a class literally // named __proto__ must stay a key. function escapeClassName(name) { if (window.CSS && typeof window.CSS.escape === 'function') return window.CSS.escape(name); return name.replace(/([^a-zA-Z0-9_-])/g, '\\$1'); } function isConditionRule(rule) { // @media/@supports/@container carry a condition; @layer does not. return typeof rule.conditionText === 'string' || !!rule.media; } function addNames(style, names) { for (var c = 0; c < style.length && c < 120; c++) { if (style[c].indexOf('--') !== 0) names[style[c]] = true; } } // Declarations nested under a condition inside a class's own rule. function nestedConditionalNames(rules, names, underCondition, depth) { var found = false; if (!rules || depth > 4) return found; for (var r = 0; r < rules.length; r++) { var rule = rules[r]; var inner = underCondition || isConditionRule(rule); // A nested '&:hover' style rule is a state, not a resting value. if (rule.selectorText && rule.selectorText.indexOf(':') !== -1) continue; if (inner && rule.style) { addNames(rule.style, names); found = true; } if (rule.cssRules && nestedConditionalNames(rule.cssRules, names, inner, depth + 1)) found = true; } return found; } function collectClassRules(rules, wanted, out, conditionalTokens, conditional, depth) { if (!rules || depth > 4) return; for (var r = 0; r < rules.length; r++) { var rule = rules[r]; if (!rule.selectorText) { var inner = conditional || isConditionRule(rule); if (rule.cssRules) collectClassRules(rule.cssRules, wanted, out, conditionalTokens, inner, depth + 1); continue; } var token = wanted[rule.selectorText]; if (!token || !rule.style) continue; var names = conditionalTokens[token] || Object.create(null); var nested = nestedConditionalNames(rule.cssRules, names, false, 0); if ((conditional || nested) && token.indexOf(':') === -1) { addNames(rule.style, names); conditionalTokens[token] = names; continue; } var decls = out[token] || (out[token] = Object.create(null)); for (var d = 0; d < rule.style.length && d < 120; d++) { var name = rule.style[d]; if (name.indexOf('--') === 0) continue; decls[name] = rule.style.getPropertyValue(name); } } } function classDeclarationsOf(el) { var out = Object.create(null); var list = el.classList; if (!list || !list.length) return out; var wanted = Object.create(null); for (var i = 0; i < list.length && i < 60; i++) wanted['.' + escapeClassName(list[i])] = list[i]; var conditionalTokens = Object.create(null); var sheets = document.styleSheets; for (var s = 0; s < sheets.length; s++) { var rules = null; try { rules = sheets[s].cssRules; } catch (err) { rules = null; } collectClassRules(rules, wanted, out, conditionalTokens, false, 0); } var conditional = Object.create(null); for (var t in conditionalTokens) { delete out[t]; conditional[t] = Object.keys(conditionalTokens[t]); } return { declarations: out, conditional: conditional }; } // True when the glyphs are NOT painted with the element's colour: an inline // fill, or a computed fill that differs from it (gradient text from a // stylesheet, a fill inherited from an ancestor). Read-only on purpose — // setting a probe colour to see what follows would start any colour // transition the element has, a visible flash on every selection. // A computed colour with no opacity: 'transparent', rgba(r, g, b, 0), or the // slash form rgb(r g b / 0). An opaque colour whose last channel is 0 is not. function alphaIsZero(value) { var f = String(value).replace(/ /g, '').toLowerCase(); if (f === 'transparent') return true; var open = f.indexOf('('); if (open === -1 || f.charAt(f.length - 1) !== ')') return false; var body = f.slice(open + 1, -1); var slash = body.indexOf('/'); if (slash !== -1) return parseFloat(body.slice(slash + 1)) === 0; var parts = body.split(','); return parts.length === 4 && parseFloat(parts[3]) === 0; } function textFillOverridden(el) { if (el.style && el.style.webkitTextFillColor) return true; var cs = window.getComputedStyle(el); var fill = cs.webkitTextFillColor; if (!fill || fill.toLowerCase() === 'currentcolor') return false; // Transparent glyphs never follow a colour pick, even when the colour // happens to be transparent too (gradient-text CSS often sets both). if (alphaIsZero(fill)) return true; return fill !== cs.color; } function isClone(el) { return !!(el && el.closest && el.closest('[data-panda-clone]')); } function isIgnored(el) { if (!el || el === document.body || el === document.documentElement) return true; if (el.id && el.id.startsWith('__panda')) return true; if (el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.tagName === 'LINK' || el.tagName === 'META') return true; if (el.closest && el.closest('[data-nextjs-dialog-overlay]')) return true; return false; } // All non-clone DOM instances of a source tag (a .map()-rendered element // has several — edits to the JSX affect them all, so previews must too). function instancesOf(source) { var out = []; var all = document.querySelectorAll('[data-panda-src]'); for (var i = 0; i < all.length; i++) { var el = all[i]; if (el.getAttribute('data-panda-src') === source && !isClone(el)) out.push(el); } return out; } function registryFor(source) { if (!pvRegistry[source]) pvRegistry[source] = { snaps: [], clones: [] }; return pvRegistry[source]; } // Snapshot an element's inline style + text ONCE per session so any number // of preview tweaks reverts in one step. function snapshot(source, el) { var reg = registryFor(source); for (var i = 0; i < reg.snaps.length; i++) { if (reg.snaps[i].el === el) return reg.snaps[i]; } var s = { el: el, css: el.style.cssText, text: null, src: null, srcset: null, srcEl: null }; reg.snaps.push(s); return s; } function sendRect() { if (!selectedEl || !document.contains(selectedEl)) return; window.parent.postMessage({ type: 'panda:rect-update', rect: getRect(selectedEl) }, '*'); } function crumbLabel(el) { var t = (el.textContent || '').trim().replace(/\s+/g, ' '); return t.length > 24 ? t.substring(0, 24) : t; } // ── Structure roles ─────────────────────────────────────────────────── // "Change the background of this section" needs the editor to know which // element IS the section. A raw tag name does not say it (generated sites // build sections out of plain divs), so the role is read from the semantic // tag when there is one and from GEOMETRY when there is not: an element that // spans the page and is tall enough to hold a band of content is a section, // whatever it is called. function roleOf(el) { var t = el.tagName.toLowerCase(); if (t === 'header') return 'Header'; if (t === 'footer') return 'Footer'; if (t === 'nav') return 'Nav'; if (t === 'main') return 'Main'; if (t === 'aside') return 'Sidebar'; if (t === 'form') return 'Form'; if (t === 'section' || t === 'article') return 'Section'; if (t === 'button') return 'Button'; if (t === 'a') return 'Link'; if (t === 'img' || t === 'picture' || t === 'video') return 'Media'; if (t === 'ul' || t === 'ol') return 'List'; if (t === 'h1' || t === 'h2' || t === 'h3') return 'Heading'; var r = el.getBoundingClientRect(); var docWidth = document.documentElement.clientWidth || window.innerWidth || 0; if (docWidth > 0 && r.width >= docWidth * 0.9 && r.height >= 80) return 'Section'; var cs = window.getComputedStyle(el); var boxed = (cs.borderTopWidth && parseFloat(cs.borderTopWidth) > 0) || (cs.boxShadow && cs.boxShadow !== 'none') || (cs.borderRadius && parseFloat(cs.borderRadius) > 0); if (boxed && r.height >= 60 && r.width >= 120) return 'Card'; return t; } // Does this element PAINT a background of its own? An element with no fill // shows whatever is behind it, so pointing the background control at it is // how a user ends up recolouring a transparent wrapper and seeing nothing // change. function paintsBackground(el) { var cs = window.getComputedStyle(el); var bg = cs.backgroundColor || ''; var img = cs.backgroundImage || ''; var opaque = !!bg && bg !== 'transparent' && bg.indexOf('rgba(0, 0, 0, 0)') === -1; return opaque || (!!img && img !== 'none'); } function taggedAncestor(el) { return el && el.parentElement ? el.parentElement.closest('[data-panda-src]') : null; } function crumbOf(el) { return { source: el.getAttribute('data-panda-src'), tag: el.tagName.toLowerCase(), role: roleOf(el), label: crumbLabel(el) }; } // Nearest tagged ANCESTOR that paints a background — the element a // "change this section's background" edit has to land on. Null when the // selection already owns its background (nothing to hop to). function backgroundHost(srcHost) { var cur = taggedAncestor(srcHost); var hops = 0; while (cur && hops < 12) { if (paintsBackground(cur)) return cur; cur = taggedAncestor(cur); hops++; } return null; } // Nearest tagged ANCESTOR that reads as a page section / major block. function sectionHost(srcHost) { var cur = taggedAncestor(srcHost); var hops = 0; while (cur && hops < 12) { var role = roleOf(cur); if ( role === 'Section' || role === 'Header' || role === 'Footer' || role === 'Nav' || role === 'Main' || role === 'Sidebar' ) { return cur; } cur = taggedAncestor(cur); hops++; } return null; } function buildSelectPayload(el) { var text = (el.textContent || '').trim(); // Cap generously, not at 200: the properties panel edits this string // verbatim, so a tight cap both truncated the match (the fragment ends // mid-node, so the deterministic patch can't fire) AND would silently cut // the element's text on save. 8000 covers any realistic single text // element (paragraph, testimonial, FAQ answer) with room to spare. if (text.length > 8000) text = text.substring(0, 8000); // Compile-time source tag (data-panda-src="path:line:col") stamped on // DOM elements at mount. Walk up via closest(): the clicked node itself // is tagged in the common case; untagged nodes (portals, injected DOM) // inherit the nearest tagged ancestor, which is still the right edit // site. Null when nothing up the chain is tagged. var srcHost = el.closest ? el.closest('[data-panda-src]') : null; // Tagged-ancestor breadcrumb (nearest first) so the panel can hop from // a clicked title to its enclosing card/section. var ancestors = []; var cur = taggedAncestor(srcHost); while (cur && ancestors.length < 8) { ancestors.push(crumbOf(cur)); cur = taggedAncestor(cur); } var anchor = el.closest ? el.closest('a') : null; // Current media src for the selection overlay's Replace field: the element // itself when it's an img/video, else the single media node it wraps. var mediaEl = (el.tagName === 'IMG' || el.tagName === 'VIDEO' || el.tagName === 'SOURCE') ? el : (el.querySelector ? el.querySelector('img, video, source') : null); // Instance identity for .map()-rendered elements: every instance shares // ONE source tag (path:line:col), so the tag alone can't say WHICH card // the user clicked. DOM order matches render order, so the index among // this source's instances IS the data-array index — the parent forwards // it (plus the current src) so an AI edit targets the right entry // instead of defaulting to the first. var instanceIndex = 0; var instanceCount = 1; if (srcHost) { var inst = instancesOf(srcHost.getAttribute('data-panda-src')); instanceCount = inst.length; var foundIdx = inst.indexOf(srcHost); if (foundIdx >= 0) instanceIndex = foundIdx; } // Colour targets. The element the user clicked is rarely the element that // OWNS the colour they mean: they click a headline and mean the band behind // it, or a label inside a card and mean the card. Both hops are computed // here (the parent has no DOM) so the panel can offer them as one tap // instead of making the user reverse-engineer the markup from a breadcrumb. var bgHostEl = srcHost && !paintsBackground(srcHost) ? backgroundHost(srcHost) : null; var sectionEl = srcHost ? sectionHost(srcHost) : null; var classDecls = classDeclarationsOf(el); return { tag: el.tagName.toLowerCase(), textContent: text, selector: getSelector(el), xpath: getXPath(el), rect: getRect(el), styles: getStyles(el), role: srcHost ? roleOf(srcHost) : roleOf(el), paintsBg: srcHost ? paintsBackground(srcHost) : paintsBackground(el), bgHost: bgHostEl ? crumbOf(bgHostEl) : null, section: sectionEl ? crumbOf(sectionEl) : null, // Measured on the same element as tag/textContent/styles, so every fact // the panel gates on describes one element. textKind: textKindOf(el), textFillOverride: textFillOverridden(el), classDeclarations: classDecls.declarations, classConditionalProperties: classDecls.conditional, source: srcHost ? srcHost.getAttribute('data-panda-src') : null, href: anchor ? anchor.getAttribute('href') : null, src: mediaEl ? mediaEl.getAttribute('src') : null, instanceIndex: instanceIndex, instanceCount: instanceCount, ancestors: ancestors }; } function onMouseMove(e) { if (!enabled) return; var el = document.elementFromPoint(e.clientX, e.clientY); if (!el || isIgnored(el) || isClone(el)) { window.parent.postMessage({ type: 'panda:hover', rect: null, tag: null }, '*'); return; } window.parent.postMessage({ type: 'panda:hover', rect: getRect(el), tag: el.tagName.toLowerCase() }, '*'); } function onClick(e) { if (!enabled) return; var el = document.elementFromPoint(e.clientX, e.clientY); if (!el || isIgnored(el)) return; e.preventDefault(); e.stopPropagation(); // A preview clone is not editable until saved — the source has only one // JSX element so far. Tell the parent so it can explain, not dead-click. if (isClone(el)) { window.parent.postMessage({ type: 'panda:clone-click' }, '*'); return; } selectedEl = el; window.parent.postMessage({ type: 'panda:select', data: buildSelectPayload(el) }, '*'); } function selectBySource(source) { var els = instancesOf(source); if (els.length === 0) return; selectedEl = els[0]; window.parent.postMessage({ type: 'panda:select', data: buildSelectPayload(els[0]) }, '*'); } // ── Source-addressed live previews (all reversible via snapshots) ────── function previewStyle(source, styles) { var els = instancesOf(source); for (var i = 0; i < els.length; i++) { snapshot(source, els[i]); for (var k in styles) els[i].style[k] = styles[k]; } sendRect(); } function previewText(source, text) { var els = instancesOf(source); for (var i = 0; i < els.length; i++) { var s = snapshot(source, els[i]); if (s.text === null) s.text = els[i].textContent; els[i].textContent = text; } sendRect(); } // Media node for a tagged element: the element itself when it IS the // img/video/source, else the single media descendant (a tagged figure or // link wrapping the image) — mirrors the save-time findSingleMedia. function mediaNodeOf(el) { var t = el.tagName; if (t === 'IMG' || t === 'VIDEO' || t === 'SOURCE') return el; return el.querySelector ? el.querySelector('img, video, source') : null; } function previewSrc(source, src) { var els = instancesOf(source); for (var i = 0; i < els.length; i++) { var media = mediaNodeOf(els[i]); if (!media) continue; var s = snapshot(source, els[i]); // Capture ONCE (srcEl is the sentinel). Store null for an absent attr — // revert must remove it, not write src="" (which forces attribute mode // and breaks

Browse every species

Red Fox

Giant Panda

Grey Wolf