(() => { if (window.__klego) return; window.__klego = 1; const PREVIEW_SOURCE = "klego-preview"; const HOST_SOURCE = "klego-host"; const ID_ATTR = "data-klego-element-id"; const HOVER_ATTR = "data-klego-hover"; const SELECTED_ATTR = "data-klego-selected"; const TRANSIENT_COPY_ATTR = "data-klego-transient-copy-for"; const GUIDE_ROOT_ID = "klego-alignment-guides"; const SNAP_THRESHOLD = 6; let inspectorEnabled = false; let dragEnabled = false; let hoveredElement = null; let selectedElement = null; let nextElementId = 1; let dragState = null; let dragFrame = 0; let suppressClick = false; function p(type, payload) { try { parent.postMessage({ source: PREVIEW_SOURCE, type, payload }, "*"); } catch (error) {} } ["log", "info", "warn", "error", "debug"].forEach((level) => { const original = console[level]; console[level] = (...args) => { try { p("console", { level, message: args .map((value) => value instanceof Error ? value.stack || value.message : typeof value === "object" ? JSON.stringify(value) : String(value) ) .join(" "), source: "", }); } catch (error) {} return original.apply(console, args); }; }); addEventListener("error", (event) => p("console", { level: "error", message: event.message + " @ " + event.filename + ":" + event.lineno, source: event.filename || "", }) ); addEventListener("unhandledrejection", (event) => { const reason = event.reason; p("console", { level: "error", message: "Unhandled rejection: " + ((reason && (reason.stack || reason.message)) || String(reason)), source: "", }); }); const originalFetch = window.fetch; window.fetch = function () { const startedAt = Date.now(); const url = typeof arguments[0] === "string" ? arguments[0] : arguments[0]?.url || ""; const method = arguments[1]?.method || arguments[0]?.method || "GET"; return originalFetch .apply(this, arguments) .then((response) => { p("network", { method, url, status: response.status, durationMs: Date.now() - startedAt, failed: !response.ok, }); return response; }) .catch((error) => { p("network", { method, url, status: 0, durationMs: Date.now() - startedAt, failed: true, }); throw error; }); }; function esc(value) { if (window.CSS && typeof window.CSS.escape === "function") { return window.CSS.escape(value); } return String(value).replace(/[^a-zA-Z0-9_-]/g, (char) => "\\" + char); } function ensureInspectorStyle() { if (document.getElementById("klego-inspector-style")) return; const style = document.createElement("style"); style.id = "klego-inspector-style"; style.textContent = "[" + HOVER_ATTR + "]{outline:2px dashed #0d99ff!important;outline-offset:3px!important;cursor:crosshair!important}[" + SELECTED_ATTR + "]{outline:2px solid #0d99ff!important;outline-offset:3px!important;box-shadow:0 0 0 4px rgba(13,153,255,.18)!important}[" + TRANSIENT_COPY_ATTR + "]{outline:1px dashed rgba(13,153,255,.5)!important;outline-offset:2px!important}html[data-klego-inspecting='true'] *{cursor:crosshair!important}html[data-klego-dragging='true'] *{cursor:grab!important}html[data-klego-dragging='true'] [" + SELECTED_ATTR + "]{cursor:grabbing!important}#" + GUIDE_ROOT_ID + "{position:fixed;inset:0;pointer-events:none;z-index:2147483647}#" + GUIDE_ROOT_ID + " [data-klego-guide]{position:absolute;display:none;background:#0d99ff;box-shadow:0 0 0 1px rgba(255,255,255,.65),0 0 14px rgba(13,153,255,.45)}#" + GUIDE_ROOT_ID + " [data-klego-guide='x']{top:0;bottom:0;width:1px}#" + GUIDE_ROOT_ID + " [data-klego-guide='y']{left:0;right:0;height:1px}"; document.head.appendChild(style); } function ensureGuideLayer() { ensureInspectorStyle(); let layer = document.getElementById(GUIDE_ROOT_ID); if (!layer) { layer = document.createElement("div"); layer.id = GUIDE_ROOT_ID; layer.setAttribute("aria-hidden", "true"); layer.innerHTML = ""; document.body.appendChild(layer); } return layer; } function setGuide(axis, value) { const layer = ensureGuideLayer(); const guide = layer.querySelector("[data-klego-guide='" + axis + "']"); if (!guide) return; if (typeof value !== "number" || !Number.isFinite(value)) { guide.style.display = "none"; return; } guide.style.display = "block"; if (axis === "x") { guide.style.left = Math.round(value) + "px"; return; } guide.style.top = Math.round(value) + "px"; } function hideGuides() { const layer = document.getElementById(GUIDE_ROOT_ID); if (!layer) return; layer .querySelectorAll("[data-klego-guide]") .forEach((guide) => (guide.style.display = "none")); } function isElement(value) { return value instanceof Element; } function inspectable(value) { if (!isElement(value)) return null; const tag = value.tagName.toUpperCase(); if ( [ "HTML", "HEAD", "BODY", "SCRIPT", "STYLE", "META", "LINK", "TITLE", "NOSCRIPT", ].includes(tag) ) { return null; } return value; } function ensureId(element) { let id = element.getAttribute(ID_ATTR); if (!id) { id = "klego-" + nextElementId++; element.setAttribute(ID_ATTR, id); } return id; } function textOf(element) { const text = (("innerText" in element ? element.innerText : element.textContent || "") || "") + ""; return text.replace(/\s+/g, " ").trim().slice(0, 500); } function attrSelector(name, value) { return ( "[" + name + '="' + String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"') + '"]' ); } function unique(selector) { try { return document.querySelectorAll(selector).length === 1; } catch (error) { return false; } } function nthOfType(element) { let index = 1; let sibling = element.previousElementSibling; while (sibling) { if (sibling.tagName === element.tagName) index++; sibling = sibling.previousElementSibling; } return element.tagName.toLowerCase() + ":nth-of-type(" + index + ")"; } function smartSelector(element) { if (element.id) { const selector = "#" + esc(element.id); if (unique(selector)) return selector; } for (const attr of [ "data-testid", "data-test", "data-id", "aria-label", "name", ]) { const value = element.getAttribute(attr); if (value && value.length < 80) { const selector = element.tagName.toLowerCase() + attrSelector(attr, value); if (unique(selector)) return selector; } } const classes = Array.from(element.classList).filter( (className) => className && !className.startsWith("klego-") && className.length < 80 ); for (let size = Math.min(3, classes.length); size > 0; size--) { const selector = element.tagName.toLowerCase() + classes .slice(0, size) .map((className) => "." + esc(className)) .join(""); if (unique(selector)) return selector; } const path = []; let node = element; while ( node && node.nodeType === 1 && node !== document.body && path.length < 6 ) { path.unshift(nthOfType(node)); const partial = "body > " + path.join(" > "); if (unique(partial)) return partial; node = node.parentElement; } return "body > " + path.join(" > "); } function snapshot(element) { ensureInspectorStyle(); const id = ensureId(element); const computed = getComputedStyle(element); const rect = element.getBoundingClientRect(); return { id, tagName: element.tagName.toLowerCase(), selector: smartSelector(element), textContent: textOf(element), attributes: { id: element.id || "", className: element.getAttribute("class") || "", role: element.getAttribute("role") || "", ariaLabel: element.getAttribute("aria-label") || "", alt: element.getAttribute("alt") || "", href: element.getAttribute("href") || "", src: element.getAttribute("src") || "", currentSrc: element.tagName === "IMG" && "currentSrc" in element ? element.currentSrc || "" : "", }, rect: { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height), }, styles: { color: computed.color, backgroundColor: computed.backgroundColor, fontSize: computed.fontSize, fontWeight: computed.fontWeight, textAlign: computed.textAlign, opacity: computed.opacity, marginTop: computed.marginTop, marginRight: computed.marginRight, marginBottom: computed.marginBottom, marginLeft: computed.marginLeft, paddingTop: computed.paddingTop, paddingRight: computed.paddingRight, paddingBottom: computed.paddingBottom, paddingLeft: computed.paddingLeft, borderColor: computed.borderColor, borderWidth: computed.borderWidth, borderRadius: computed.borderRadius, transform: computed.transform, }, }; } function treeNode(element, state, depth) { if (!inspectable(element) || state.count > 220 || depth > 7) return null; state.count++; const children = []; for (const child of Array.from(element.children)) { const node = treeNode(child, state, depth + 1); if (node) children.push(node); if (state.count > 220) break; } return { id: ensureId(element), tagName: element.tagName.toLowerCase(), selector: smartSelector(element), textContent: textOf(element).slice(0, 120), attributes: { id: element.id || "", className: element.getAttribute("class") || "", role: element.getAttribute("role") || "", ariaLabel: element.getAttribute("aria-label") || "", alt: element.getAttribute("alt") || "", href: element.getAttribute("href") || "", src: element.getAttribute("src") || "", currentSrc: element.tagName === "IMG" && "currentSrc" in element ? element.currentSrc || "" : "", }, children, }; } function collectTree() { const state = { count: 0 }; const roots = []; for (const child of Array.from(document.body.children)) { const node = treeNode(child, state, 0); if (node) roots.push(node); if (state.count > 220) break; } return roots; } function postTree() { p("inspector:tree", collectTree()); } function setHover(element) { if (hoveredElement === element) return; if (hoveredElement) hoveredElement.removeAttribute(HOVER_ATTR); hoveredElement = element; if (hoveredElement) hoveredElement.setAttribute(HOVER_ATTR, "true"); } function setSelected(element) { if (selectedElement) selectedElement.removeAttribute(SELECTED_ATTR); selectedElement = element; if (selectedElement) selectedElement.setAttribute(SELECTED_ATTR, "true"); } function findElement(payload) { if (payload && payload.id) { const byId = document.querySelector( "[" + ID_ATTR + '="' + payload.id + '"]' ); if (byId) return byId; } if (payload && payload.selector) { try { return document.querySelector(payload.selector); } catch (error) { return null; } } return null; } function setElementText(element, text) { if (typeof text !== "string") return; if ( "value" in element && (element.tagName === "INPUT" || element.tagName === "TEXTAREA") ) { element.value = text; element.dispatchEvent(new Event("input", { bubbles: true })); return; } const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, { acceptNode(node) { return node.nodeValue && node.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; }, }); const first = walker.nextNode(); if (first) { first.nodeValue = text; } else if (element.children.length === 0) { element.textContent = text; } } function applyStyle(element, styles) { if (!styles || typeof styles !== "object") return; for (const [key, value] of Object.entries(styles)) { if (!(key in element.style)) continue; element.style[key] = value === null || value === undefined || value === "" ? "" : String(value); } } function cleanupClone(root) { if (!root || root.nodeType !== 1) return; for (const attr of [ ID_ATTR, HOVER_ATTR, SELECTED_ATTR, TRANSIENT_COPY_ATTR, ]) { root.removeAttribute(attr); } root .querySelectorAll( [ID_ATTR, HOVER_ATTR, SELECTED_ATTR, TRANSIENT_COPY_ATTR] .map((attr) => "[" + attr + "]") .join(",") ) .forEach((node) => { for (const attr of [ID_ATTR, HOVER_ATTR, SELECTED_ATTR]) { node.removeAttribute(attr); } }); } function roundedRect(rect) { return { left: Math.round(rect.left), top: Math.round(rect.top), right: Math.round(rect.right), bottom: Math.round(rect.bottom), width: Math.round(rect.width), height: Math.round(rect.height), }; } function guideRect(element) { if (!element || element.nodeType !== 1) return null; const rect = element.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) return null; const style = getComputedStyle(element); if ( style.display === "none" || style.visibility === "hidden" || Number(style.opacity) === 0 ) { return null; } if ( rect.right < 0 || rect.bottom < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight ) { return null; } return roundedRect(rect); } function addGuideRect(guides, rect) { if (!rect) return; guides.x.push(rect.left, Math.round(rect.left + rect.width / 2), rect.right); guides.y.push(rect.top, Math.round(rect.top + rect.height / 2), rect.bottom); } function collectGuideCandidates(element) { const guides = { x: [], y: [] }; const viewport = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight, }; addGuideRect(guides, viewport); addGuideRect(guides, guideRect(element.parentElement)); let count = 0; for (const node of document.body.querySelectorAll("*")) { if (count > 500) break; count++; if (!inspectable(node)) continue; if (node.id === GUIDE_ROOT_ID || node.closest("#" + GUIDE_ROOT_ID)) { continue; } if (node === element || node.contains(element) || element.contains(node)) { continue; } if (node.closest("[" + TRANSIENT_COPY_ATTR + "]")) continue; addGuideRect(guides, guideRect(node)); } guides.x = Array.from(new Set(guides.x)).sort((a, b) => a - b); guides.y = Array.from(new Set(guides.y)).sort((a, b) => a - b); return guides; } function closestGuide(anchorValues, guides) { let match = null; for (const anchor of anchorValues) { for (const guide of guides) { const delta = guide - anchor; const distance = Math.abs(delta); if ( distance <= SNAP_THRESHOLD && (!match || distance < match.distance) ) { match = { guide, delta, distance }; } } } return match; } function alignDrag(rect, x, y, guides) { const xMatch = closestGuide( [ rect.left + x, rect.left + rect.width / 2 + x, rect.left + rect.width + x, ], guides.x ); const yMatch = closestGuide( [ rect.top + y, rect.top + rect.height / 2 + y, rect.top + rect.height + y, ], guides.y ); return { x: x + (xMatch ? xMatch.delta : 0), y: y + (yMatch ? yMatch.delta : 0), guideX: xMatch ? xMatch.guide : null, guideY: yMatch ? yMatch.guide : null, }; } function setDocumentFlag(attr, enabled) { if (enabled) { document.documentElement.setAttribute(attr, "true"); return; } document.documentElement.removeAttribute(attr); } function enableInspector(enabled) { inspectorEnabled = Boolean(enabled); ensureInspectorStyle(); setDocumentFlag("data-klego-inspecting", inspectorEnabled); if (!inspectorEnabled) setHover(null); p("inspector:state", { enabled: inspectorEnabled }); if (inspectorEnabled) postTree(); } function enableDrag(enabled) { dragEnabled = Boolean(enabled); ensureInspectorStyle(); if (!dragEnabled) hideGuides(); setDocumentFlag("data-klego-dragging", dragEnabled); p("inspector:drag-state", { enabled: dragEnabled }); } function duplicateElement(payload) { const element = inspectable(findElement(payload)); if (!element || !element.parentNode) return; const clone = element.cloneNode(true); cleanupClone(clone); clone.setAttribute(TRANSIENT_COPY_ATTR, ensureId(element)); element.parentNode.insertBefore(clone, element.nextSibling); p("inspector:operation", { operation: "duplicate", snapshot: snapshot(element) }); } function deleteElement(payload) { const element = inspectable(findElement(payload)); if (!element) return; setSelected(element); const deletedSnapshot = snapshot(element); element.style.display = "none"; setHover(null); p("inspector:operation", { operation: "delete", snapshot: deletedSnapshot }); } function resetElement(payload) { const element = inspectable(findElement(payload)); const id = payload && payload.id; if (id) { document .querySelectorAll("[" + TRANSIENT_COPY_ATTR + '="' + id + '"]') .forEach((node) => node.remove()); } if (!element) return; applyStyle(element, payload && payload.styles); setSelected(element); p("inspector:changed", snapshot(element)); } function beginDrag(event) { if (!dragEnabled || !selectedElement || !selectedElement.contains(event.target)) { return; } event.preventDefault(); event.stopPropagation(); const startTransform = selectedElement.style.transform && selectedElement.style.transform !== "none" ? selectedElement.style.transform : getComputedStyle(selectedElement).transform !== "none" ? getComputedStyle(selectedElement).transform : ""; const rect = roundedRect(selectedElement.getBoundingClientRect()); dragState = { element: selectedElement, startX: event.clientX, startY: event.clientY, transform: "", rawX: 0, rawY: 0, baseRect: rect, guides: collectGuideCandidates(selectedElement), startTransform, moved: false, }; ensureGuideLayer(); hideGuides(); selectedElement.style.willChange = "transform"; try { selectedElement.setPointerCapture(event.pointerId); } catch (error) {} } function applyDragFrame() { dragFrame = 0; if (!dragState) return; const aligned = alignDrag( dragState.baseRect, dragState.rawX, dragState.rawY, dragState.guides ); dragState.transform = "translate(" + aligned.x + "px, " + aligned.y + "px)"; dragState.element.style.transform = [dragState.startTransform, dragState.transform] .filter(Boolean) .join(" "); setGuide("x", aligned.guideX); setGuide("y", aligned.guideY); } function moveDrag(event) { if (!dragState) return; event.preventDefault(); const x = Math.round(event.clientX - dragState.startX); const y = Math.round(event.clientY - dragState.startY); dragState.moved = dragState.moved || Math.abs(x) + Math.abs(y) > 2; dragState.rawX = x; dragState.rawY = y; if (!dragFrame) { dragFrame = requestAnimationFrame(applyDragFrame); } } function endDrag(event) { if (!dragState) return; event.preventDefault(); if (dragFrame) { cancelAnimationFrame(dragFrame); applyDragFrame(); } const element = dragState.element; element.style.willChange = ""; suppressClick = dragState.moved; dragState = null; hideGuides(); p("inspector:dragged", { id: ensureId(element), selector: smartSelector(element), transform: element.style.transform || getComputedStyle(element).transform, snapshot: snapshot(element), }); window.setTimeout(() => { suppressClick = false; }, 0); } document.addEventListener( "mouseover", (event) => { if (!inspectorEnabled) return; const element = inspectable(event.target); if (!element) return; setHover(element); p("inspector:hover", snapshot(element)); }, true ); document.addEventListener( "mouseout", () => { if (!inspectorEnabled) return; setHover(null); }, true ); document.addEventListener( "click", (event) => { if (!inspectorEnabled) return; const element = inspectable(event.target); if (!element) return; event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); if (suppressClick) return; setSelected(element); p("inspector:selected", snapshot(element)); postTree(); }, true ); document.addEventListener("pointerdown", beginDrag, true); document.addEventListener("pointermove", moveDrag, true); document.addEventListener("pointerup", endDrag, true); document.addEventListener("pointercancel", endDrag, true); addEventListener("message", (event) => { const data = event.data; if (!data || data.source !== HOST_SOURCE) return; if (data.type === "inspector:set-enabled") { enableInspector(data.payload && data.payload.enabled); return; } if (data.type === "inspector:get-tree") { postTree(); return; } if (data.type === "inspector:select-element") { const element = inspectable(findElement(data.payload)); if (!element) return; setSelected(element); p("inspector:selected", snapshot(element)); return; } if (data.type === "inspector:set-drag-enabled") { enableDrag(data.payload && data.payload.enabled); return; } if (data.type === "inspector:clear") { setHover(null); if (selectedElement) selectedElement.removeAttribute(SELECTED_ATTR); selectedElement = null; enableDrag(false); p("inspector:cleared", {}); return; } if (data.type === "inspector:apply-style") { const element = inspectable(findElement(data.payload)); if (!element) return; applyStyle(element, data.payload && data.payload.styles); if ( data.payload && Object.prototype.hasOwnProperty.call(data.payload, "textContent") ) { setElementText(element, data.payload.textContent); } setSelected(element); p("inspector:changed", snapshot(element)); postTree(); return; } if (data.type === "inspector:set-attribute") { const element = inspectable(findElement(data.payload)); if (!element || !data.payload) return; const attribute = data.payload.attribute; const value = data.payload.value; if (typeof attribute !== "string" || typeof value !== "string") return; element.setAttribute(attribute, value); if (attribute === "src" && "src" in element) { element.src = value; } setSelected(element); p("inspector:changed", snapshot(element)); postTree(); return; } if (data.type === "inspector:duplicate-element") { duplicateElement(data.payload); postTree(); return; } if (data.type === "inspector:delete-element") { deleteElement(data.payload); postTree(); return; } if (data.type === "inspector:reset-element") { resetElement(data.payload || {}); } }); })();