(() => { 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 }; } 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; 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, 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

Sample coloring book