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

Shop what everyone'salready buying.

Trending right now

Aurora Wireless Earbuds

Pulse Fitness Tracker Band

GlowCube LED Desk Lamp

Cast Iron Sizzle Skillet

Vortex Milk Frother

Shop by category

Shop what everyone's
already buying.