adaptar-vite-plugin 1.0.0

package/dist/hmr-interceptor.d.ts

@@ -0,0 +1,19 @@
+import type { ViteDevServer } from "vite";
+export interface AdaptarErrorPayload {
+    message: string;
+    stack: string;
+    filename: string | undefined;
+    lineno: number | undefined;
+    colno: number | undefined;
+    source: string;
+    plugin: string | undefined;
+}
+/**
+ * Intercepts Vite's internal WebSocket `send` to catch build/HMR errors
+ * at the source and forward them as structured `adaptar:error` custom events.
+ *
+ * Also suppresses the `full-reload` message that Vite fires immediately after
+ * a fatal error — without this the iframe reloads and clears the error overlay
+ * before the user has a chance to act on it.
+ */
+export declare function interceptHmrErrors(server: ViteDevServer): void;

package/dist/hmr-interceptor.js

@@ -0,0 +1,52 @@
+// How long (ms) to suppress a full-reload after a fatal error so the
+// error overlay stays visible before the iframe clears it.
+const RELOAD_SUPPRESSION_MS = 5_000;
+/**
+ * Intercepts Vite's internal WebSocket `send` to catch build/HMR errors
+ * at the source and forward them as structured `adaptar:error` custom events.
+ *
+ * Also suppresses the `full-reload` message that Vite fires immediately after
+ * a fatal error — without this the iframe reloads and clears the error overlay
+ * before the user has a chance to act on it.
+ */
+export function interceptHmrErrors(server) {
+    const originalSend = server.ws.send.bind(server.ws);
+    // Tracks whether a fatal error was recently sent so we can suppress the
+    // follow-up full-reload for a short window.
+    let suppressReloadUntil = 0;
+    // Cast to any to override — Vite 7 exposes an overloaded signature that
+    // TypeScript cannot directly assign to. We restore full type safety inside
+    // the function body by narrowing against HotPayload ourselves.
+    server.ws.send = function (payload) {
+        if (payload && typeof payload === "object") {
+            // ── Fatal build / HMR error ──────────────────────────────────────────
+            if (payload.type === "error") {
+                const { err } = payload;
+                const formatted = {
+                    message: `[vite] ${err.message || "Internal server error"}`,
+                    stack: [err.stack, err.frame].filter(Boolean).join("\n\n"),
+                    filename: err.id ?? err.loc?.file,
+                    lineno: err.loc?.line,
+                    colno: err.loc?.column,
+                    source: "vite-hmr",
+                    plugin: err.plugin,
+                };
+                originalSend({
+                    type: "custom",
+                    event: "adaptar:error",
+                    data: formatted,
+                });
+                // Start suppression window so the follow-up full-reload is blocked.
+                suppressReloadUntil = Date.now() + RELOAD_SUPPRESSION_MS;
+                originalSend(payload);
+                return;
+            }
+            // ── Suppress full-reload that follows a fatal error ──────────────────
+            if (payload.type === "full-reload" && Date.now() < suppressReloadUntil) {
+                suppressReloadUntil = 0; // reset — only suppress once
+                return;
+            }
+        }
+        originalSend(payload);
+    };
+}

package/dist/html-tags.d.ts

@@ -0,0 +1,2 @@
+import type { HtmlTagDescriptor } from "vite";
+export declare function buildHtmlTags(): HtmlTagDescriptor[];

package/dist/html-tags.js

@@ -0,0 +1,36 @@
+import { ERROR_BRIDGE_SCRIPT } from "./scripts/error-bridge.js";
+import { SELECTION_BRIDGE_SCRIPT } from "./scripts/selection-bridge.js";
+/**
+ * The inline module that subscribes to the `adaptar:error` custom HMR event
+ * and forwards it to the parent window via postMessage.
+ */
+const HMR_LISTENER_SCRIPT = /* js */ `
+  if (import.meta.hot) {
+    import.meta.hot.on('adaptar:error', (data) => {
+      try {
+        window.parent.postMessage({ source: 'adaptar-preview', type: 'error', error: data }, '*');
+      } catch (_) {}
+    });
+  }
+`.trim();
+export function buildHtmlTags() {
+    return [
+        {
+            tag: "script",
+            injectTo: "head-prepend",
+            attrs: { "data-adaptar": "error-bridge" },
+            children: ERROR_BRIDGE_SCRIPT,
+        },
+        {
+            tag: "script",
+            injectTo: "head-prepend",
+            attrs: { "data-adaptar": "selection-bridge" },
+            children: SELECTION_BRIDGE_SCRIPT,
+        },
+        {
+            tag: "script",
+            attrs: { type: "module" },
+            children: HMR_LISTENER_SCRIPT,
+        },
+    ];
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from "vite";
+/**
+ * Adaptar Vite Plugin
+ *
+ * Provides three layers of error and selection bridging between the
+ * sandboxed preview iframe and the Adaptar host editor:
+ *
+ * 1. `error-bridge`     — catches runtime JS errors, resource failures,
+ *                          unhandled rejections, and blank-screen scenarios.
+ * 2. `selection-bridge` — powers element inspect / edit mode in the preview.
+ * 3. `hmr-interceptor`  — intercepts Vite's internal WebSocket to surface
+ *                          build/HMR errors as structured `adaptar:error` events.
+ */
+export declare function adaptar(): Plugin;

package/dist/index.js

@@ -0,0 +1,36 @@
+import { interceptHmrErrors } from "./hmr-interceptor.js";
+import { buildHtmlTags } from "./html-tags.js";
+/**
+ * Adaptar Vite Plugin
+ *
+ * Provides three layers of error and selection bridging between the
+ * sandboxed preview iframe and the Adaptar host editor:
+ *
+ * 1. `error-bridge`     — catches runtime JS errors, resource failures,
+ *                          unhandled rejections, and blank-screen scenarios.
+ * 2. `selection-bridge` — powers element inspect / edit mode in the preview.
+ * 3. `hmr-interceptor`  — intercepts Vite's internal WebSocket to surface
+ *                          build/HMR errors as structured `adaptar:error` events.
+ */
+export function adaptar() {
+    return {
+        name: "adaptar-vite-bridge",
+        enforce: "pre",
+        config() {
+            return {
+                server: {
+                    hmr: {
+                        // Disable Vite's default error overlay — Adaptar renders its own.
+                        overlay: false,
+                    },
+                },
+            };
+        },
+        transformIndexHtml() {
+            return buildHtmlTags();
+        },
+        configureServer(server) {
+            interceptHmrErrors(server);
+        },
+    };
+}

package/dist/scripts/error-bridge.d.ts

@@ -0,0 +1 @@
+export declare const ERROR_BRIDGE_SCRIPT = "(function(){\n  if (window.__ADAPTAR_ERROR_BRIDGE__) return;\n  window.__ADAPTAR_ERROR_BRIDGE__ = true;\n\n  function send(message, stack, filename, lineno, colno, source, plugin) {\n    try {\n      window.parent.postMessage({\n        source: 'adaptar-preview',\n        type: 'error',\n        error: {\n          message: message || 'Unknown error',\n          stack: stack || '',\n          filename: filename,\n          lineno: lineno,\n          colno: colno,\n          source: source,\n          plugin: plugin\n        }\n      }, '*');\n    } catch (_) {}\n  }\n\n  // Resource load errors (scripts, stylesheets)\n  window.addEventListener('error', function(e) {\n    var target = e.target || e.srcElement;\n    if (target && target !== window && target.tagName) {\n      var tag = String(target.tagName).toLowerCase();\n      var url = target.src || target.href;\n      if (url && (tag === 'script' || tag === 'link')) {\n        send(\n          (tag === 'link' ? 'Failed to load stylesheet: ' : 'Failed to load module: ') + url,\n          '', url, undefined, undefined, 'resource-load'\n        );\n        return;\n      }\n    }\n    send(\n      e.message || (e.error && e.error.message) || 'Runtime error occurred',\n      e.error ? e.error.stack : '',\n      e.filename, e.lineno, e.colno, 'runtime'\n    );\n  });\n\n  // Unhandled promise rejections\n  window.addEventListener('unhandledrejection', function(e) {\n    var r = e.reason;\n    send(\n      r && r.message ? r.message : String(r || 'Unhandled Promise Rejection'),\n      r && r.stack,\n      r && r.fileName,\n      r && r.lineNumber,\n      r && r.columnNumber,\n      'unhandledrejection'\n    );\n  });\n\n  // Console error interception for silent Vite/Syntax errors\n  var nativeConsoleError = console.error;\n  console.error = function() {\n    var args = Array.prototype.slice.call(arguments);\n    var msg = args.map(function(a) {\n      return typeof a === 'string' ? a : (a && a.message ? a.message : String(a));\n    }).join(' ');\n    if (/Failed to load module|Internal Server Error|Syntax Error/i.test(msg)) {\n      send(msg, '', undefined, undefined, undefined, 'console.error');\n    }\n    return nativeConsoleError.apply(console, args);\n  };\n\n  // Blank screen detector\n  window.addEventListener('load', function() {\n    setTimeout(function() {\n      var root = document.getElementById('root');\n      if (root && root.children.length === 0 && !(root.textContent || '').trim()) {\n        send(\n          'Runtime error: Preview failed to render; a component or import may have failed silently.',\n          '', location.href, undefined, undefined, 'blank-screen'\n        );\n      }\n    }, 3000);\n  });\n})();";

package/dist/scripts/error-bridge.js

@@ -0,0 +1,82 @@
+export const ERROR_BRIDGE_SCRIPT = /* js */ `(function(){
+  if (window.__ADAPTAR_ERROR_BRIDGE__) return;
+  window.__ADAPTAR_ERROR_BRIDGE__ = true;
+
+  function send(message, stack, filename, lineno, colno, source, plugin) {
+    try {
+      window.parent.postMessage({
+        source: 'adaptar-preview',
+        type: 'error',
+        error: {
+          message: message || 'Unknown error',
+          stack: stack || '',
+          filename: filename,
+          lineno: lineno,
+          colno: colno,
+          source: source,
+          plugin: plugin
+        }
+      }, '*');
+    } catch (_) {}
+  }
+
+  // Resource load errors (scripts, stylesheets)
+  window.addEventListener('error', function(e) {
+    var target = e.target || e.srcElement;
+    if (target && target !== window && target.tagName) {
+      var tag = String(target.tagName).toLowerCase();
+      var url = target.src || target.href;
+      if (url && (tag === 'script' || tag === 'link')) {
+        send(
+          (tag === 'link' ? 'Failed to load stylesheet: ' : 'Failed to load module: ') + url,
+          '', url, undefined, undefined, 'resource-load'
+        );
+        return;
+      }
+    }
+    send(
+      e.message || (e.error && e.error.message) || 'Runtime error occurred',
+      e.error ? e.error.stack : '',
+      e.filename, e.lineno, e.colno, 'runtime'
+    );
+  });
+
+  // Unhandled promise rejections
+  window.addEventListener('unhandledrejection', function(e) {
+    var r = e.reason;
+    send(
+      r && r.message ? r.message : String(r || 'Unhandled Promise Rejection'),
+      r && r.stack,
+      r && r.fileName,
+      r && r.lineNumber,
+      r && r.columnNumber,
+      'unhandledrejection'
+    );
+  });
+
+  // Console error interception for silent Vite/Syntax errors
+  var nativeConsoleError = console.error;
+  console.error = function() {
+    var args = Array.prototype.slice.call(arguments);
+    var msg = args.map(function(a) {
+      return typeof a === 'string' ? a : (a && a.message ? a.message : String(a));
+    }).join(' ');
+    if (/Failed to load module|Internal Server Error|Syntax Error/i.test(msg)) {
+      send(msg, '', undefined, undefined, undefined, 'console.error');
+    }
+    return nativeConsoleError.apply(console, args);
+  };
+
+  // Blank screen detector
+  window.addEventListener('load', function() {
+    setTimeout(function() {
+      var root = document.getElementById('root');
+      if (root && root.children.length === 0 && !(root.textContent || '').trim()) {
+        send(
+          'Runtime error: Preview failed to render; a component or import may have failed silently.',
+          '', location.href, undefined, undefined, 'blank-screen'
+        );
+      }
+    }, 3000);
+  });
+})();`;

package/dist/scripts/selection-bridge.d.ts

@@ -0,0 +1 @@
+export declare const SELECTION_BRIDGE_SCRIPT = "(function(){\n  if (window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__) return;\n  window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__ = true;\n\n  function send(type, selection) {\n    try {\n      window.parent.postMessage({ source: 'adaptar-preview', type: type, selection: selection || null }, '*');\n    } catch (_) {}\n  }\n\n  function isEditableElement(el) {\n    return !!el && (\n      el.matches('input,textarea,select,[contenteditable=\"true\"],[data-adaptar-editable=\"true\"]') ||\n      el.closest('[contenteditable=\"true\"]')\n    );\n  }\n\n  function cssEscape(value) {\n    return String(value || '').replace(/([ #;?%&,.+*~\\':\"!^$[]()=>|\\/@])/g, '\\\\$1');\n  }\n\n  function getText(el) {\n    return String((el.innerText || el.textContent || '').replace(/\\s+/g, ' ').trim()).slice(0, 160);\n  }\n\n  function buildSelector(el) {\n    if (!el || !el.getAttribute) return '';\n    var explicit = el.getAttribute('data-adaptar-selector') || el.getAttribute('data-adaptar-ref');\n    if (explicit) return explicit;\n    var file = el.getAttribute('data-adaptar-file');\n    if (file) return '[data-adaptar-file=\"' + cssEscape(file) + '\"]';\n    var symbol = el.getAttribute('data-adaptar-symbol');\n    if (symbol) return '[data-adaptar-symbol=\"' + cssEscape(symbol) + '\"]';\n    if (el.id) return '#' + cssEscape(el.id);\n    var parts = []; var current = el; var depth = 0;\n    while (current && current !== document.body && current !== document.documentElement && depth < 5) {\n      var part = current.tagName.toLowerCase();\n      if (current.classList && current.classList.length) {\n        part += '.' + Array.prototype.slice.call(current.classList, 0, 2).map(cssEscape).join('.');\n      }\n      if (current.parentElement) {\n        var siblings = Array.prototype.filter.call(\n          current.parentElement.children,\n          function(child) { return child.tagName === current.tagName; }\n        );\n        if (siblings.length > 1) { part += ':nth-of-type(' + (siblings.indexOf(current) + 1) + ')'; }\n      }\n      parts.unshift(part); current = current.parentElement; depth += 1;\n    }\n    return parts.join(' > ');\n  }\n\n  var INSPECTABLE = 'button,a,input,textarea,select,[role=\"button\"],[role=\"link\"],[contenteditable=\"true\"],img,svg,h1,h2,h3,h4,h5,h6,p,span,div,section,article,main,nav,aside,header,footer,li,ul,ol,figure,picture,video';\n\n  function findInspectableTarget(node) {\n    var current = node && node.nodeType === 1 ? node : null;\n    while (current) {\n      if (current.hasAttribute && (\n        current.hasAttribute('data-adaptar-file') ||\n        current.hasAttribute('data-adaptar-symbol') ||\n        current.hasAttribute('data-adaptar-selector') ||\n        current.hasAttribute('data-adaptar-ref') ||\n        current.hasAttribute('data-adaptar-editable') ||\n        current.matches(INSPECTABLE)\n      )) { return current; }\n      current = current.parentElement;\n    }\n    return null;\n  }\n\n  function describeTarget(target, kind) {\n    if (!target) return null;\n    var rect = target.getBoundingClientRect();\n    var filePath = target.getAttribute && target.getAttribute('data-adaptar-file');\n    var symbolName = target.getAttribute && target.getAttribute('data-adaptar-symbol');\n    var selector = buildSelector(target);\n    var text = getText(target);\n    var label = filePath || symbolName || (target.tagName.toLowerCase() + (text ? ' \u2014 ' + text : ''));\n    return {\n      source: 'preview', kind: kind, label: label,\n      tagName: target.tagName.toLowerCase(),\n      text: text || undefined,\n      className: target.className && typeof target.className === 'string' ? target.className : undefined,\n      selector: selector || undefined,\n      filePath: filePath || undefined,\n      symbolName: symbolName || undefined,\n      bounds: { x: rect.left, y: rect.top, width: rect.width, height: rect.height },\n      confidence: filePath || symbolName || selector ? 'high' : (text ? 'medium' : 'low'),\n      isEditable: isEditableElement(target),\n    };\n  }\n\n  var STYLE_ID = 'adaptar-edit-highlight';\n  var HOVER_CLASS = '__adaptar_hover__';\n  var editModeActive = false;\n  var currentHoverTarget = null;\n  var labelEl = null;\n\n  var HIGHLIGHT_CSS = [\n    'body.__adaptar_edit__{cursor:crosshair!important;}',\n    'body.__adaptar_edit__ *{outline:1px solid rgba(99,179,237,0.18)!important;outline-offset:-1px;}',\n    'body.__adaptar_edit__ .__adaptar_hover__{',\n    '  outline:2px solid rgba(99,179,237,0.85)!important;',\n    '  outline-offset:0px;',\n    '  background-color:rgba(99,179,237,0.07)!important;',\n    '  position:relative;',\n    '}',\n    '#adaptar-hover-label{',\n    '  position:fixed;z-index:2147483647;pointer-events:none;',\n    '  padding:2px 7px;border-radius:4px;',\n    '  background:rgba(99,179,237,0.92);color:#fff;',\n    '  font:600 10px/18px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;',\n    '  white-space:nowrap;letter-spacing:0.03em;',\n    '  box-shadow:0 2px 8px rgba(0,0,0,0.22);',\n    '  transform:translateY(-110%);',\n    '}',\n  ].join('');\n\n  function injectHighlightStyles() {\n    if (document.getElementById(STYLE_ID)) return;\n    var s = document.createElement('style');\n    s.id = STYLE_ID; s.textContent = HIGHLIGHT_CSS;\n    document.head.appendChild(s);\n  }\n\n  function removeHighlightStyles() {\n    var s = document.getElementById(STYLE_ID);\n    if (s) s.parentNode.removeChild(s);\n  }\n\n  function createLabel() {\n    if (labelEl) return;\n    labelEl = document.createElement('div');\n    labelEl.id = 'adaptar-hover-label';\n    document.body.appendChild(labelEl);\n  }\n\n  function removeLabel() {\n    if (labelEl) { labelEl.parentNode && labelEl.parentNode.removeChild(labelEl); labelEl = null; }\n  }\n\n  function updateLabel(target, rect) {\n    if (!labelEl || !target) return;\n    var tag = target.tagName.toLowerCase();\n    var id = target.id ? ' #' + target.id : '';\n    var cls = target.classList && target.classList.length ? ' .' + Array.prototype.slice.call(target.classList, 0, 2).join('.') : '';\n    var file = target.getAttribute && target.getAttribute('data-adaptar-file');\n    labelEl.textContent = file || ('<' + tag + id + cls + '>');\n    labelEl.style.top = (rect.top + window.scrollY) + 'px';\n    labelEl.style.left = (rect.left + window.scrollX) + 'px';\n  }\n\n  function setHoverTarget(el) {\n    if (currentHoverTarget === el) return;\n    if (currentHoverTarget) currentHoverTarget.classList.remove(HOVER_CLASS);\n    currentHoverTarget = el;\n    if (el) {\n      el.classList.add(HOVER_CLASS);\n      if (labelEl) { var rect = el.getBoundingClientRect(); updateLabel(el, rect); }\n    } else {\n      if (labelEl) labelEl.textContent = '';\n    }\n  }\n\n  function enterEditMode() {\n    if (editModeActive) return;\n    editModeActive = true;\n    injectHighlightStyles();\n    document.body.classList.add('__adaptar_edit__');\n    createLabel();\n  }\n\n  function exitEditMode() {\n    if (!editModeActive) return;\n    editModeActive = false;\n    setHoverTarget(null);\n    document.body.classList.remove('__adaptar_edit__');\n    removeLabel();\n    removeHighlightStyles();\n    lastSignature = '';\n    send('preview-element-clear', null);\n  }\n\n  var lastSignature = '';\n  var lastSentAt = 0;\n  var clearTimer = null;\n\n  function sendHover(target) {\n    var selection = describeTarget(target, 'hover');\n    if (!selection) return;\n    var signature = [selection.selector, selection.filePath, selection.symbolName, selection.text, selection.tagName].filter(Boolean).join('|');\n    var now = Date.now();\n    if (signature === lastSignature && now - lastSentAt < 80) return;\n    lastSignature = signature; lastSentAt = now;\n    send('preview-element-hover', selection);\n  }\n\n  function sendSelect(target) {\n    var selection = describeTarget(target, 'selection');\n    if (!selection) return;\n    send('preview-element-select', selection);\n  }\n\n  function scheduleClear() {\n    if (clearTimer) clearTimeout(clearTimer);\n    clearTimer = setTimeout(function() {\n      lastSignature = '';\n      setHoverTarget(null);\n      send('preview-element-clear', null);\n    }, 40);\n  }\n\n  window.addEventListener('pointerover', function(event) {\n    var target = findInspectableTarget(event.target);\n    if (!editModeActive) { if (target) sendHover(target); return; }\n    if (clearTimer) { clearTimeout(clearTimer); clearTimer = null; }\n    if (!target) { setHoverTarget(null); return; }\n    setHoverTarget(target);\n    sendHover(target);\n  }, true);\n\n  window.addEventListener('click', function(event) {\n    var target = findInspectableTarget(event.target);\n    if (!target) return;\n    if (editModeActive) event.preventDefault();\n    sendSelect(target);\n  }, true);\n\n  window.addEventListener('mouseout', function(event) {\n    if (event.relatedTarget) return;\n    scheduleClear();\n  }, true);\n\n  window.addEventListener('blur', function() { scheduleClear(); });\n\n  document.addEventListener('visibilitychange', function() {\n    if (document.visibilityState !== 'visible') { scheduleClear(); }\n  });\n\n  window.addEventListener('message', function(event) {\n    var d = event.data;\n    if (!d || d.source !== 'adaptar-host') return;\n    if (d.type === 'adaptar-edit-mode-enter') { enterEditMode(); }\n    else if (d.type === 'adaptar-edit-mode-exit') { exitEditMode(); }\n  });\n})();";

package/dist/scripts/selection-bridge.js

@@ -0,0 +1,246 @@
+export const SELECTION_BRIDGE_SCRIPT = /* js */ `(function(){
+  if (window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__) return;
+  window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__ = true;
+
+  function send(type, selection) {
+    try {
+      window.parent.postMessage({ source: 'adaptar-preview', type: type, selection: selection || null }, '*');
+    } catch (_) {}
+  }
+
+  function isEditableElement(el) {
+    return !!el && (
+      el.matches('input,textarea,select,[contenteditable="true"],[data-adaptar-editable="true"]') ||
+      el.closest('[contenteditable="true"]')
+    );
+  }
+
+  function cssEscape(value) {
+    return String(value || '').replace(/([ #;?%&,.+*~\\':"!^$[]()=>|\\/@])/g, '\\\\$1');
+  }
+
+  function getText(el) {
+    return String((el.innerText || el.textContent || '').replace(/\\s+/g, ' ').trim()).slice(0, 160);
+  }
+
+  function buildSelector(el) {
+    if (!el || !el.getAttribute) return '';
+    var explicit = el.getAttribute('data-adaptar-selector') || el.getAttribute('data-adaptar-ref');
+    if (explicit) return explicit;
+    var file = el.getAttribute('data-adaptar-file');
+    if (file) return '[data-adaptar-file="' + cssEscape(file) + '"]';
+    var symbol = el.getAttribute('data-adaptar-symbol');
+    if (symbol) return '[data-adaptar-symbol="' + cssEscape(symbol) + '"]';
+    if (el.id) return '#' + cssEscape(el.id);
+    var parts = []; var current = el; var depth = 0;
+    while (current && current !== document.body && current !== document.documentElement && depth < 5) {
+      var part = current.tagName.toLowerCase();
+      if (current.classList && current.classList.length) {
+        part += '.' + Array.prototype.slice.call(current.classList, 0, 2).map(cssEscape).join('.');
+      }
+      if (current.parentElement) {
+        var siblings = Array.prototype.filter.call(
+          current.parentElement.children,
+          function(child) { return child.tagName === current.tagName; }
+        );
+        if (siblings.length > 1) { part += ':nth-of-type(' + (siblings.indexOf(current) + 1) + ')'; }
+      }
+      parts.unshift(part); current = current.parentElement; depth += 1;
+    }
+    return parts.join(' > ');
+  }
+
+  var INSPECTABLE = 'button,a,input,textarea,select,[role="button"],[role="link"],[contenteditable="true"],img,svg,h1,h2,h3,h4,h5,h6,p,span,div,section,article,main,nav,aside,header,footer,li,ul,ol,figure,picture,video';
+
+  function findInspectableTarget(node) {
+    var current = node && node.nodeType === 1 ? node : null;
+    while (current) {
+      if (current.hasAttribute && (
+        current.hasAttribute('data-adaptar-file') ||
+        current.hasAttribute('data-adaptar-symbol') ||
+        current.hasAttribute('data-adaptar-selector') ||
+        current.hasAttribute('data-adaptar-ref') ||
+        current.hasAttribute('data-adaptar-editable') ||
+        current.matches(INSPECTABLE)
+      )) { return current; }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  function describeTarget(target, kind) {
+    if (!target) return null;
+    var rect = target.getBoundingClientRect();
+    var filePath = target.getAttribute && target.getAttribute('data-adaptar-file');
+    var symbolName = target.getAttribute && target.getAttribute('data-adaptar-symbol');
+    var selector = buildSelector(target);
+    var text = getText(target);
+    var label = filePath || symbolName || (target.tagName.toLowerCase() + (text ? ' — ' + text : ''));
+    return {
+      source: 'preview', kind: kind, label: label,
+      tagName: target.tagName.toLowerCase(),
+      text: text || undefined,
+      className: target.className && typeof target.className === 'string' ? target.className : undefined,
+      selector: selector || undefined,
+      filePath: filePath || undefined,
+      symbolName: symbolName || undefined,
+      bounds: { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+      confidence: filePath || symbolName || selector ? 'high' : (text ? 'medium' : 'low'),
+      isEditable: isEditableElement(target),
+    };
+  }
+
+  var STYLE_ID = 'adaptar-edit-highlight';
+  var HOVER_CLASS = '__adaptar_hover__';
+  var editModeActive = false;
+  var currentHoverTarget = null;
+  var labelEl = null;
+
+  var HIGHLIGHT_CSS = [
+    'body.__adaptar_edit__{cursor:crosshair!important;}',
+    'body.__adaptar_edit__ *{outline:1px solid rgba(99,179,237,0.18)!important;outline-offset:-1px;}',
+    'body.__adaptar_edit__ .__adaptar_hover__{',
+    '  outline:2px solid rgba(99,179,237,0.85)!important;',
+    '  outline-offset:0px;',
+    '  background-color:rgba(99,179,237,0.07)!important;',
+    '  position:relative;',
+    '}',
+    '#adaptar-hover-label{',
+    '  position:fixed;z-index:2147483647;pointer-events:none;',
+    '  padding:2px 7px;border-radius:4px;',
+    '  background:rgba(99,179,237,0.92);color:#fff;',
+    '  font:600 10px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;',
+    '  white-space:nowrap;letter-spacing:0.03em;',
+    '  box-shadow:0 2px 8px rgba(0,0,0,0.22);',
+    '  transform:translateY(-110%);',
+    '}',
+  ].join('');
+
+  function injectHighlightStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    var s = document.createElement('style');
+    s.id = STYLE_ID; s.textContent = HIGHLIGHT_CSS;
+    document.head.appendChild(s);
+  }
+
+  function removeHighlightStyles() {
+    var s = document.getElementById(STYLE_ID);
+    if (s) s.parentNode.removeChild(s);
+  }
+
+  function createLabel() {
+    if (labelEl) return;
+    labelEl = document.createElement('div');
+    labelEl.id = 'adaptar-hover-label';
+    document.body.appendChild(labelEl);
+  }
+
+  function removeLabel() {
+    if (labelEl) { labelEl.parentNode && labelEl.parentNode.removeChild(labelEl); labelEl = null; }
+  }
+
+  function updateLabel(target, rect) {
+    if (!labelEl || !target) return;
+    var tag = target.tagName.toLowerCase();
+    var id = target.id ? ' #' + target.id : '';
+    var cls = target.classList && target.classList.length ? ' .' + Array.prototype.slice.call(target.classList, 0, 2).join('.') : '';
+    var file = target.getAttribute && target.getAttribute('data-adaptar-file');
+    labelEl.textContent = file || ('<' + tag + id + cls + '>');
+    labelEl.style.top = (rect.top + window.scrollY) + 'px';
+    labelEl.style.left = (rect.left + window.scrollX) + 'px';
+  }
+
+  function setHoverTarget(el) {
+    if (currentHoverTarget === el) return;
+    if (currentHoverTarget) currentHoverTarget.classList.remove(HOVER_CLASS);
+    currentHoverTarget = el;
+    if (el) {
+      el.classList.add(HOVER_CLASS);
+      if (labelEl) { var rect = el.getBoundingClientRect(); updateLabel(el, rect); }
+    } else {
+      if (labelEl) labelEl.textContent = '';
+    }
+  }
+
+  function enterEditMode() {
+    if (editModeActive) return;
+    editModeActive = true;
+    injectHighlightStyles();
+    document.body.classList.add('__adaptar_edit__');
+    createLabel();
+  }
+
+  function exitEditMode() {
+    if (!editModeActive) return;
+    editModeActive = false;
+    setHoverTarget(null);
+    document.body.classList.remove('__adaptar_edit__');
+    removeLabel();
+    removeHighlightStyles();
+    lastSignature = '';
+    send('preview-element-clear', null);
+  }
+
+  var lastSignature = '';
+  var lastSentAt = 0;
+  var clearTimer = null;
+
+  function sendHover(target) {
+    var selection = describeTarget(target, 'hover');
+    if (!selection) return;
+    var signature = [selection.selector, selection.filePath, selection.symbolName, selection.text, selection.tagName].filter(Boolean).join('|');
+    var now = Date.now();
+    if (signature === lastSignature && now - lastSentAt < 80) return;
+    lastSignature = signature; lastSentAt = now;
+    send('preview-element-hover', selection);
+  }
+
+  function sendSelect(target) {
+    var selection = describeTarget(target, 'selection');
+    if (!selection) return;
+    send('preview-element-select', selection);
+  }
+
+  function scheduleClear() {
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = setTimeout(function() {
+      lastSignature = '';
+      setHoverTarget(null);
+      send('preview-element-clear', null);
+    }, 40);
+  }
+
+  window.addEventListener('pointerover', function(event) {
+    var target = findInspectableTarget(event.target);
+    if (!editModeActive) { if (target) sendHover(target); return; }
+    if (clearTimer) { clearTimeout(clearTimer); clearTimer = null; }
+    if (!target) { setHoverTarget(null); return; }
+    setHoverTarget(target);
+    sendHover(target);
+  }, true);
+
+  window.addEventListener('click', function(event) {
+    var target = findInspectableTarget(event.target);
+    if (!target) return;
+    if (editModeActive) event.preventDefault();
+    sendSelect(target);
+  }, true);
+
+  window.addEventListener('mouseout', function(event) {
+    if (event.relatedTarget) return;
+    scheduleClear();
+  }, true);
+
+  window.addEventListener('blur', function() { scheduleClear(); });
+
+  document.addEventListener('visibilitychange', function() {
+    if (document.visibilityState !== 'visible') { scheduleClear(); }
+  });
+
+  window.addEventListener('message', function(event) {
+    var d = event.data;
+    if (!d || d.source !== 'adaptar-host') return;
+    if (d.type === 'adaptar-edit-mode-enter') { enterEditMode(); }
+    else if (d.type === 'adaptar-edit-mode-exit') { exitEditMode(); }
+  });
+})();`;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "adaptar-vite-plugin",
+  "version": "1.0.0",
+  "description": "Vite plugin for Adaptar preview error and selection bridging",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/src/hmr-interceptor.ts

@@ -0,0 +1,72 @@
+import type { ViteDevServer, HotPayload } from "vite";
+
+export interface AdaptarErrorPayload {
+  message: string;
+  stack: string;
+  filename: string | undefined;
+  lineno: number | undefined;
+  colno: number | undefined;
+  source: string;
+  plugin: string | undefined;
+}
+
+// How long (ms) to suppress a full-reload after a fatal error so the
+// error overlay stays visible before the iframe clears it.
+const RELOAD_SUPPRESSION_MS = 5_000;
+
+/**
+ * Intercepts Vite's internal WebSocket `send` to catch build/HMR errors
+ * at the source and forward them as structured `adaptar:error` custom events.
+ *
+ * Also suppresses the `full-reload` message that Vite fires immediately after
+ * a fatal error — without this the iframe reloads and clears the error overlay
+ * before the user has a chance to act on it.
+ */
+export function interceptHmrErrors(server: ViteDevServer): void {
+  const originalSend = server.ws.send.bind(server.ws);
+
+  // Tracks whether a fatal error was recently sent so we can suppress the
+  // follow-up full-reload for a short window.
+  let suppressReloadUntil = 0;
+
+  // Cast to any to override — Vite 7 exposes an overloaded signature that
+  // TypeScript cannot directly assign to. We restore full type safety inside
+  // the function body by narrowing against HotPayload ourselves.
+  (server.ws as any).send = function (payload: HotPayload): void {
+    if (payload && typeof payload === "object") {
+      // ── Fatal build / HMR error ──────────────────────────────────────────
+      if (payload.type === "error") {
+        const { err } = payload;
+
+        const formatted: AdaptarErrorPayload = {
+          message: `[vite] ${err.message || "Internal server error"}`,
+          stack: [err.stack, err.frame].filter(Boolean).join("\n\n"),
+          filename: err.id ?? err.loc?.file,
+          lineno: err.loc?.line,
+          colno: err.loc?.column,
+          source: "vite-hmr",
+          plugin: err.plugin,
+        };
+
+        originalSend({
+          type: "custom",
+          event: "adaptar:error",
+          data: formatted,
+        });
+
+        // Start suppression window so the follow-up full-reload is blocked.
+        suppressReloadUntil = Date.now() + RELOAD_SUPPRESSION_MS;
+        originalSend(payload);
+        return;
+      }
+
+      // ── Suppress full-reload that follows a fatal error ──────────────────
+      if (payload.type === "full-reload" && Date.now() < suppressReloadUntil) {
+        suppressReloadUntil = 0; // reset — only suppress once
+        return;
+      }
+    }
+
+    originalSend(payload);
+  };
+}

package/src/html-tags.ts

@@ -0,0 +1,39 @@
+import type { HtmlTagDescriptor } from "vite";
+import { ERROR_BRIDGE_SCRIPT } from "./scripts/error-bridge.js";
+import { SELECTION_BRIDGE_SCRIPT } from "./scripts/selection-bridge.js";
+
+/**
+ * The inline module that subscribes to the `adaptar:error` custom HMR event
+ * and forwards it to the parent window via postMessage.
+ */
+const HMR_LISTENER_SCRIPT = /* js */ `
+  if (import.meta.hot) {
+    import.meta.hot.on('adaptar:error', (data) => {
+      try {
+        window.parent.postMessage({ source: 'adaptar-preview', type: 'error', error: data }, '*');
+      } catch (_) {}
+    });
+  }
+`.trim();
+
+export function buildHtmlTags(): HtmlTagDescriptor[] {
+  return [
+    {
+      tag: "script",
+      injectTo: "head-prepend",
+      attrs: { "data-adaptar": "error-bridge" },
+      children: ERROR_BRIDGE_SCRIPT,
+    },
+    {
+      tag: "script",
+      injectTo: "head-prepend",
+      attrs: { "data-adaptar": "selection-bridge" },
+      children: SELECTION_BRIDGE_SCRIPT,
+    },
+    {
+      tag: "script",
+      attrs: { type: "module" },
+      children: HMR_LISTENER_SCRIPT,
+    },
+  ];
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+import type { Plugin } from "vite";
+import { interceptHmrErrors } from "./hmr-interceptor.js";
+import { buildHtmlTags } from "./html-tags.js";
+
+/**
+ * Adaptar Vite Plugin
+ *
+ * Provides three layers of error and selection bridging between the
+ * sandboxed preview iframe and the Adaptar host editor:
+ *
+ * 1. `error-bridge`     — catches runtime JS errors, resource failures,
+ *                          unhandled rejections, and blank-screen scenarios.
+ * 2. `selection-bridge` — powers element inspect / edit mode in the preview.
+ * 3. `hmr-interceptor`  — intercepts Vite's internal WebSocket to surface
+ *                          build/HMR errors as structured `adaptar:error` events.
+ */
+export function adaptar(): Plugin {
+  return {
+    name: "adaptar-vite-bridge",
+    enforce: "pre",
+
+    config() {
+      return {
+        server: {
+          hmr: {
+            // Disable Vite's default error overlay — Adaptar renders its own.
+            overlay: false,
+          },
+        },
+      };
+    },
+
+    transformIndexHtml() {
+      return buildHtmlTags();
+    },
+
+    configureServer(server) {
+      interceptHmrErrors(server);
+    },
+  };
+}

package/src/scripts/error-bridge.ts

@@ -0,0 +1,82 @@
+export const ERROR_BRIDGE_SCRIPT = /* js */ `(function(){
+  if (window.__ADAPTAR_ERROR_BRIDGE__) return;
+  window.__ADAPTAR_ERROR_BRIDGE__ = true;
+
+  function send(message, stack, filename, lineno, colno, source, plugin) {
+    try {
+      window.parent.postMessage({
+        source: 'adaptar-preview',
+        type: 'error',
+        error: {
+          message: message || 'Unknown error',
+          stack: stack || '',
+          filename: filename,
+          lineno: lineno,
+          colno: colno,
+          source: source,
+          plugin: plugin
+        }
+      }, '*');
+    } catch (_) {}
+  }
+
+  // Resource load errors (scripts, stylesheets)
+  window.addEventListener('error', function(e) {
+    var target = e.target || e.srcElement;
+    if (target && target !== window && target.tagName) {
+      var tag = String(target.tagName).toLowerCase();
+      var url = target.src || target.href;
+      if (url && (tag === 'script' || tag === 'link')) {
+        send(
+          (tag === 'link' ? 'Failed to load stylesheet: ' : 'Failed to load module: ') + url,
+          '', url, undefined, undefined, 'resource-load'
+        );
+        return;
+      }
+    }
+    send(
+      e.message || (e.error && e.error.message) || 'Runtime error occurred',
+      e.error ? e.error.stack : '',
+      e.filename, e.lineno, e.colno, 'runtime'
+    );
+  });
+
+  // Unhandled promise rejections
+  window.addEventListener('unhandledrejection', function(e) {
+    var r = e.reason;
+    send(
+      r && r.message ? r.message : String(r || 'Unhandled Promise Rejection'),
+      r && r.stack,
+      r && r.fileName,
+      r && r.lineNumber,
+      r && r.columnNumber,
+      'unhandledrejection'
+    );
+  });
+
+  // Console error interception for silent Vite/Syntax errors
+  var nativeConsoleError = console.error;
+  console.error = function() {
+    var args = Array.prototype.slice.call(arguments);
+    var msg = args.map(function(a) {
+      return typeof a === 'string' ? a : (a && a.message ? a.message : String(a));
+    }).join(' ');
+    if (/Failed to load module|Internal Server Error|Syntax Error/i.test(msg)) {
+      send(msg, '', undefined, undefined, undefined, 'console.error');
+    }
+    return nativeConsoleError.apply(console, args);
+  };
+
+  // Blank screen detector
+  window.addEventListener('load', function() {
+    setTimeout(function() {
+      var root = document.getElementById('root');
+      if (root && root.children.length === 0 && !(root.textContent || '').trim()) {
+        send(
+          'Runtime error: Preview failed to render; a component or import may have failed silently.',
+          '', location.href, undefined, undefined, 'blank-screen'
+        );
+      }
+    }, 3000);
+  });
+})();`;

package/src/scripts/selection-bridge.ts

@@ -0,0 +1,246 @@
+export const SELECTION_BRIDGE_SCRIPT = /* js */ `(function(){
+  if (window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__) return;
+  window.__ADAPTAR_PREVIEW_SELECTION_BRIDGE__ = true;
+
+  function send(type, selection) {
+    try {
+      window.parent.postMessage({ source: 'adaptar-preview', type: type, selection: selection || null }, '*');
+    } catch (_) {}
+  }
+
+  function isEditableElement(el) {
+    return !!el && (
+      el.matches('input,textarea,select,[contenteditable="true"],[data-adaptar-editable="true"]') ||
+      el.closest('[contenteditable="true"]')
+    );
+  }
+
+  function cssEscape(value) {
+    return String(value || '').replace(/([ #;?%&,.+*~\\':"!^$[]()=>|\\/@])/g, '\\\\$1');
+  }
+
+  function getText(el) {
+    return String((el.innerText || el.textContent || '').replace(/\\s+/g, ' ').trim()).slice(0, 160);
+  }
+
+  function buildSelector(el) {
+    if (!el || !el.getAttribute) return '';
+    var explicit = el.getAttribute('data-adaptar-selector') || el.getAttribute('data-adaptar-ref');
+    if (explicit) return explicit;
+    var file = el.getAttribute('data-adaptar-file');
+    if (file) return '[data-adaptar-file="' + cssEscape(file) + '"]';
+    var symbol = el.getAttribute('data-adaptar-symbol');
+    if (symbol) return '[data-adaptar-symbol="' + cssEscape(symbol) + '"]';
+    if (el.id) return '#' + cssEscape(el.id);
+    var parts = []; var current = el; var depth = 0;
+    while (current && current !== document.body && current !== document.documentElement && depth < 5) {
+      var part = current.tagName.toLowerCase();
+      if (current.classList && current.classList.length) {
+        part += '.' + Array.prototype.slice.call(current.classList, 0, 2).map(cssEscape).join('.');
+      }
+      if (current.parentElement) {
+        var siblings = Array.prototype.filter.call(
+          current.parentElement.children,
+          function(child) { return child.tagName === current.tagName; }
+        );
+        if (siblings.length > 1) { part += ':nth-of-type(' + (siblings.indexOf(current) + 1) + ')'; }
+      }
+      parts.unshift(part); current = current.parentElement; depth += 1;
+    }
+    return parts.join(' > ');
+  }
+
+  var INSPECTABLE = 'button,a,input,textarea,select,[role="button"],[role="link"],[contenteditable="true"],img,svg,h1,h2,h3,h4,h5,h6,p,span,div,section,article,main,nav,aside,header,footer,li,ul,ol,figure,picture,video';
+
+  function findInspectableTarget(node) {
+    var current = node && node.nodeType === 1 ? node : null;
+    while (current) {
+      if (current.hasAttribute && (
+        current.hasAttribute('data-adaptar-file') ||
+        current.hasAttribute('data-adaptar-symbol') ||
+        current.hasAttribute('data-adaptar-selector') ||
+        current.hasAttribute('data-adaptar-ref') ||
+        current.hasAttribute('data-adaptar-editable') ||
+        current.matches(INSPECTABLE)
+      )) { return current; }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  function describeTarget(target, kind) {
+    if (!target) return null;
+    var rect = target.getBoundingClientRect();
+    var filePath = target.getAttribute && target.getAttribute('data-adaptar-file');
+    var symbolName = target.getAttribute && target.getAttribute('data-adaptar-symbol');
+    var selector = buildSelector(target);
+    var text = getText(target);
+    var label = filePath || symbolName || (target.tagName.toLowerCase() + (text ? ' — ' + text : ''));
+    return {
+      source: 'preview', kind: kind, label: label,
+      tagName: target.tagName.toLowerCase(),
+      text: text || undefined,
+      className: target.className && typeof target.className === 'string' ? target.className : undefined,
+      selector: selector || undefined,
+      filePath: filePath || undefined,
+      symbolName: symbolName || undefined,
+      bounds: { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+      confidence: filePath || symbolName || selector ? 'high' : (text ? 'medium' : 'low'),
+      isEditable: isEditableElement(target),
+    };
+  }
+
+  var STYLE_ID = 'adaptar-edit-highlight';
+  var HOVER_CLASS = '__adaptar_hover__';
+  var editModeActive = false;
+  var currentHoverTarget = null;
+  var labelEl = null;
+
+  var HIGHLIGHT_CSS = [
+    'body.__adaptar_edit__{cursor:crosshair!important;}',
+    'body.__adaptar_edit__ *{outline:1px solid rgba(99,179,237,0.18)!important;outline-offset:-1px;}',
+    'body.__adaptar_edit__ .__adaptar_hover__{',
+    '  outline:2px solid rgba(99,179,237,0.85)!important;',
+    '  outline-offset:0px;',
+    '  background-color:rgba(99,179,237,0.07)!important;',
+    '  position:relative;',
+    '}',
+    '#adaptar-hover-label{',
+    '  position:fixed;z-index:2147483647;pointer-events:none;',
+    '  padding:2px 7px;border-radius:4px;',
+    '  background:rgba(99,179,237,0.92);color:#fff;',
+    '  font:600 10px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;',
+    '  white-space:nowrap;letter-spacing:0.03em;',
+    '  box-shadow:0 2px 8px rgba(0,0,0,0.22);',
+    '  transform:translateY(-110%);',
+    '}',
+  ].join('');
+
+  function injectHighlightStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    var s = document.createElement('style');
+    s.id = STYLE_ID; s.textContent = HIGHLIGHT_CSS;
+    document.head.appendChild(s);
+  }
+
+  function removeHighlightStyles() {
+    var s = document.getElementById(STYLE_ID);
+    if (s) s.parentNode.removeChild(s);
+  }
+
+  function createLabel() {
+    if (labelEl) return;
+    labelEl = document.createElement('div');
+    labelEl.id = 'adaptar-hover-label';
+    document.body.appendChild(labelEl);
+  }
+
+  function removeLabel() {
+    if (labelEl) { labelEl.parentNode && labelEl.parentNode.removeChild(labelEl); labelEl = null; }
+  }
+
+  function updateLabel(target, rect) {
+    if (!labelEl || !target) return;
+    var tag = target.tagName.toLowerCase();
+    var id = target.id ? ' #' + target.id : '';
+    var cls = target.classList && target.classList.length ? ' .' + Array.prototype.slice.call(target.classList, 0, 2).join('.') : '';
+    var file = target.getAttribute && target.getAttribute('data-adaptar-file');
+    labelEl.textContent = file || ('<' + tag + id + cls + '>');
+    labelEl.style.top = (rect.top + window.scrollY) + 'px';
+    labelEl.style.left = (rect.left + window.scrollX) + 'px';
+  }
+
+  function setHoverTarget(el) {
+    if (currentHoverTarget === el) return;
+    if (currentHoverTarget) currentHoverTarget.classList.remove(HOVER_CLASS);
+    currentHoverTarget = el;
+    if (el) {
+      el.classList.add(HOVER_CLASS);
+      if (labelEl) { var rect = el.getBoundingClientRect(); updateLabel(el, rect); }
+    } else {
+      if (labelEl) labelEl.textContent = '';
+    }
+  }
+
+  function enterEditMode() {
+    if (editModeActive) return;
+    editModeActive = true;
+    injectHighlightStyles();
+    document.body.classList.add('__adaptar_edit__');
+    createLabel();
+  }
+
+  function exitEditMode() {
+    if (!editModeActive) return;
+    editModeActive = false;
+    setHoverTarget(null);
+    document.body.classList.remove('__adaptar_edit__');
+    removeLabel();
+    removeHighlightStyles();
+    lastSignature = '';
+    send('preview-element-clear', null);
+  }
+
+  var lastSignature = '';
+  var lastSentAt = 0;
+  var clearTimer = null;
+
+  function sendHover(target) {
+    var selection = describeTarget(target, 'hover');
+    if (!selection) return;
+    var signature = [selection.selector, selection.filePath, selection.symbolName, selection.text, selection.tagName].filter(Boolean).join('|');
+    var now = Date.now();
+    if (signature === lastSignature && now - lastSentAt < 80) return;
+    lastSignature = signature; lastSentAt = now;
+    send('preview-element-hover', selection);
+  }
+
+  function sendSelect(target) {
+    var selection = describeTarget(target, 'selection');
+    if (!selection) return;
+    send('preview-element-select', selection);
+  }
+
+  function scheduleClear() {
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = setTimeout(function() {
+      lastSignature = '';
+      setHoverTarget(null);
+      send('preview-element-clear', null);
+    }, 40);
+  }
+
+  window.addEventListener('pointerover', function(event) {
+    var target = findInspectableTarget(event.target);
+    if (!editModeActive) { if (target) sendHover(target); return; }
+    if (clearTimer) { clearTimeout(clearTimer); clearTimer = null; }
+    if (!target) { setHoverTarget(null); return; }
+    setHoverTarget(target);
+    sendHover(target);
+  }, true);
+
+  window.addEventListener('click', function(event) {
+    var target = findInspectableTarget(event.target);
+    if (!target) return;
+    if (editModeActive) event.preventDefault();
+    sendSelect(target);
+  }, true);
+
+  window.addEventListener('mouseout', function(event) {
+    if (event.relatedTarget) return;
+    scheduleClear();
+  }, true);
+
+  window.addEventListener('blur', function() { scheduleClear(); });
+
+  document.addEventListener('visibilitychange', function() {
+    if (document.visibilityState !== 'visible') { scheduleClear(); }
+  });
+
+  window.addEventListener('message', function(event) {
+    var d = event.data;
+    if (!d || d.source !== 'adaptar-host') return;
+    if (d.type === 'adaptar-edit-mode-enter') { enterEditMode(); }
+    else if (d.type === 'adaptar-edit-mode-exit') { exitEditMode(); }
+  });
+})();`;

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}