(() => { 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 { 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; } 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 = srcHost && srcHost.parentElement ? srcHost.parentElement.closest('[data-panda-src]') : null; while (cur && ancestors.length < 8) { ancestors.push({ tag: cur.tagName.toLowerCase(), source: cur.getAttribute('data-panda-src'), label: crumbLabel(cur) }); cur = cur.parentElement ? cur.parentElement.closest('[data-panda-src]') : null; } 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; } return { tag: el.tagName.toLowerCase(), textContent: text, selector: getSelector(el), xpath: getXPath(el), rect: getRect(el), styles: getStyles(el), 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 the animal kingdom

Contribute an animal