@designtools/next-plugin 0.1.9 → 0.1.10

package/dist/surface.mjs

@@ -0,0 +1,1027 @@
+"use client";
+import "./chunk-Y6FXYEAI.mjs";
+
+// src/surface.tsx
+import { useEffect, useRef, useState, createElement } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Surface() {
+  const stateRef = useRef({
+    selectionMode: false,
+    hoveredElement: null,
+    selectedElement: null,
+    selectedDomPath: null,
+    overlayRafId: null,
+    inlineStyleBackups: /* @__PURE__ */ new Map(),
+    tokenValueBackups: /* @__PURE__ */ new Map(),
+    tokenPreviewValues: /* @__PURE__ */ new Map(),
+    tokenPreviewStyle: null,
+    highlightOverlay: null,
+    tooltip: null,
+    selectedOverlay: null
+  });
+  const [previewComponent, setPreviewComponent] = useState(null);
+  const [previewCombinations, setPreviewCombinations] = useState([]);
+  const [previewDefaultChildren, setPreviewDefaultChildren] = useState("");
+  const [previewError, setPreviewError] = useState(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const setPreviewRef = useRef({
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview
+  });
+  setPreviewRef.current = {
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview
+  };
+  useEffect(() => {
+    const s = stateRef.current;
+    s.highlightOverlay = document.createElement("div");
+    s.highlightOverlay.id = "tool-highlight";
+    Object.assign(s.highlightOverlay.style, {
+      position: "fixed",
+      pointerEvents: "none",
+      border: "2px solid #3b82f6",
+      backgroundColor: "rgba(59, 130, 246, 0.08)",
+      borderRadius: "2px",
+      zIndex: "99999",
+      display: "none",
+      transition: "all 0.1s ease"
+    });
+    document.body.appendChild(s.highlightOverlay);
+    s.tooltip = document.createElement("div");
+    s.tooltip.id = "tool-tooltip";
+    Object.assign(s.tooltip.style, {
+      position: "fixed",
+      pointerEvents: "none",
+      backgroundColor: "#1e1e2e",
+      color: "#cdd6f4",
+      padding: "3px 8px",
+      borderRadius: "4px",
+      fontSize: "11px",
+      fontFamily: "ui-monospace, monospace",
+      zIndex: "100000",
+      display: "none",
+      whiteSpace: "nowrap",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+    });
+    document.body.appendChild(s.tooltip);
+    s.selectedOverlay = document.createElement("div");
+    s.selectedOverlay.id = "tool-selected";
+    Object.assign(s.selectedOverlay.style, {
+      position: "fixed",
+      pointerEvents: "none",
+      border: "2px solid #f59e0b",
+      backgroundColor: "rgba(245, 158, 11, 0.06)",
+      borderRadius: "2px",
+      zIndex: "99998",
+      display: "none"
+    });
+    document.body.appendChild(s.selectedOverlay);
+    function getElementName(el) {
+      const slot = el.getAttribute("data-slot");
+      if (slot) return slot.charAt(0).toUpperCase() + slot.slice(1);
+      return `<${el.tagName.toLowerCase()}>`;
+    }
+    function getDomPath(el) {
+      const parts = [];
+      let current = el;
+      while (current && current !== document.body) {
+        const parent = current.parentElement;
+        if (parent) {
+          const idx = Array.from(parent.children).indexOf(current) + 1;
+          parts.unshift(`${current.tagName.toLowerCase()}:nth-child(${idx})`);
+        } else {
+          parts.unshift(current.tagName.toLowerCase());
+        }
+        current = current.parentElement;
+      }
+      return parts.join(" > ");
+    }
+    function positionOverlay(overlay, rect) {
+      Object.assign(overlay.style, {
+        left: `${rect.left}px`,
+        top: `${rect.top}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        display: "block"
+      });
+    }
+    function findSelectableElement(target) {
+      let el = target;
+      while (el && el !== document.body) {
+        if (el.getAttribute("data-slot")) return el;
+        el = el.parentElement;
+      }
+      return target;
+    }
+    const overlayIds = /* @__PURE__ */ new Set(["tool-highlight", "tool-tooltip", "tool-selected", "surface-token-preview"]);
+    const semanticTags = /* @__PURE__ */ new Set(["header", "main", "nav", "section", "article", "footer", "aside"]);
+    const skipTags = /* @__PURE__ */ new Set([
+      "html",
+      "body",
+      "head",
+      // document structure
+      "br",
+      "hr",
+      "wbr",
+      // void/formatting
+      "template",
+      "slot"
+      // shadow DOM
+    ]);
+    const frameworkPatterns = [
+      /^Fragment$/,
+      /^Suspense$/,
+      /^ErrorBoundary$/,
+      /^Provider$/,
+      /^Consumer$/,
+      /Context$/,
+      /^ForwardRef$/,
+      /^Memo$/,
+      /^Lazy$/,
+      // Next.js routing internals
+      /^InnerLayoutRouter$/,
+      /^OuterLayoutRouter$/,
+      /^LayoutRouter$/,
+      /^RenderFromTemplateContext$/,
+      /^TemplateContext$/,
+      /^RedirectBoundary$/,
+      /^RedirectErrorBoundary$/,
+      /^NotFoundBoundary$/,
+      /^LoadingBoundary$/,
+      /^HTTPAccessFallbackBoundary$/,
+      /^HTTPAccessFallbackErrorBoundary$/,
+      /^ClientPageRoot$/,
+      /^HotReload$/,
+      /^ReactDevOverlay$/,
+      /^PathnameContextProviderAdapter$/,
+      // Next.js App Router internals (segment tree)
+      /^SegmentViewNode$/,
+      /^SegmentTrieNode$/,
+      /^SegmentViewStateNode$/,
+      /^SegmentBoundaryTriggerNode$/,
+      /^SegmentStateProvider$/,
+      /^ScrollAndFocusHandler$/,
+      /^InnerScrollAndFocusHandler$/,
+      /^AppRouter$/,
+      /^Router$/,
+      /^Root$/,
+      /^ServerRoot$/,
+      /^RootErrorBoundary$/,
+      /^ErrorBoundaryHandler$/,
+      /^AppRouterAnnouncer$/,
+      /^HistoryUpdater$/,
+      /^RuntimeStyles$/,
+      /^DevRootHTTPAccessFallbackBoundary$/,
+      /^AppDevOverlayErrorBoundary$/,
+      /^ReplaySsrOnlyErrors$/,
+      /^HeadManagerContext$/,
+      /^Head$/,
+      /^MetadataOutlet$/,
+      /^AsyncMetadataOutlet$/,
+      /^__next_/
+      // All __next_ prefixed components
+    ];
+    function isFrameworkComponent(name) {
+      return frameworkPatterns.some((p) => p.test(name));
+    }
+    function getFiber(el) {
+      const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+      return key ? el[key] : null;
+    }
+    function getDirectText(el) {
+      let text = "";
+      for (const node of Array.from(el.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          text += (node.textContent || "").trim();
+        }
+      }
+      return text.slice(0, 40);
+    }
+    function inferScope(sourcePath) {
+      if (!sourcePath) return null;
+      const colonIdx = sourcePath.indexOf(":");
+      const file = colonIdx > 0 ? sourcePath.slice(0, colonIdx) : sourcePath;
+      if (/\/layout\.[tjsx]+$/i.test(file) || /^layout\.[tjsx]+$/i.test(file)) return "layout";
+      if (/\/page\.[tjsx]+$/i.test(file) || /^page\.[tjsx]+$/i.test(file)) return "page";
+      return null;
+    }
+    function getScopeForElement(el, parentScope) {
+      if (!el) return parentScope;
+      const instanceSource = el.getAttribute("data-instance-source");
+      const fromInstance = inferScope(instanceSource);
+      if (fromInstance) return fromInstance;
+      const source = el.getAttribute("data-source");
+      const fromSource = inferScope(source);
+      if (fromSource) return fromSource;
+      return parentScope;
+    }
+    function buildComponentTree(rootEl) {
+      const fiber = getFiber(rootEl);
+      if (!fiber) {
+        return buildDataSlotTree(rootEl);
+      }
+      let fiberRoot = fiber;
+      while (fiberRoot.return) fiberRoot = fiberRoot.return;
+      const results = [];
+      walkFiber(fiberRoot.child, results, null);
+      return results;
+    }
+    function walkFiber(fiber, siblings, parentScope) {
+      while (fiber) {
+        const node = processFiber(fiber, parentScope);
+        if (node) {
+          siblings.push(node);
+        } else {
+          if (fiber.child) {
+            let childScope = parentScope;
+            if (typeof fiber.type === "string" && fiber.stateNode instanceof Element) {
+              childScope = getScopeForElement(fiber.stateNode, parentScope);
+            } else if (typeof fiber.type === "function" || typeof fiber.type === "object") {
+              const hostEl = findOwnHostElement(fiber);
+              if (hostEl) {
+                childScope = getScopeForElement(hostEl, parentScope);
+              }
+            }
+            walkFiber(fiber.child, siblings, childScope);
+          }
+        }
+        fiber = fiber.sibling;
+      }
+    }
+    function processFiber(fiber, parentScope) {
+      if (typeof fiber.type === "string") {
+        return processHostFiber(fiber, parentScope);
+      }
+      if (typeof fiber.type === "function" || typeof fiber.type === "object") {
+        return processComponentFiber(fiber, parentScope);
+      }
+      return null;
+    }
+    function processHostFiber(fiber, parentScope) {
+      const tag = fiber.type;
+      const el = fiber.stateNode;
+      if (el && el.id && overlayIds.has(el.id)) return null;
+      if (["script", "style", "link", "noscript"].includes(tag)) return null;
+      const scope = getScopeForElement(el, parentScope);
+      const dataSlot = el?.getAttribute("data-slot") || null;
+      if (dataSlot) {
+        const name = dataSlot.split("-").map((s2) => s2.charAt(0).toUpperCase() + s2.slice(1)).join("");
+        const children = [];
+        if (fiber.child) walkFiber(fiber.child, children, scope);
+        return {
+          id: el ? getDomPath(el) : "",
+          name,
+          type: "component",
+          dataSlot,
+          source: el?.getAttribute("data-source") || null,
+          scope,
+          textContent: el ? getDirectText(el) : "",
+          children
+        };
+      }
+      if (semanticTags.has(tag)) {
+        const children = [];
+        if (fiber.child) walkFiber(fiber.child, children, scope);
+        const text = el ? getDirectText(el) : "";
+        return {
+          id: el ? getDomPath(el) : "",
+          name: `<${tag}>`,
+          type: "element",
+          dataSlot: null,
+          source: el?.getAttribute("data-source") || null,
+          scope,
+          textContent: text,
+          children
+        };
+      }
+      if (currentTreeMode === "dom" && el?.hasAttribute("data-source") && !skipTags.has(tag)) {
+        const children = [];
+        if (fiber.child) walkFiber(fiber.child, children, scope);
+        const text = el ? getDirectText(el) : "";
+        return {
+          id: getDomPath(el),
+          name: `<${tag}>`,
+          type: "element",
+          dataSlot: null,
+          source: el.getAttribute("data-source"),
+          scope,
+          textContent: text,
+          children
+        };
+      }
+      return null;
+    }
+    function processComponentFiber(fiber, parentScope) {
+      const type = fiber.type;
+      const name = type?.displayName || type?.name || null;
+      if (!name) return null;
+      if (isFrameworkComponent(name)) return null;
+      if (name === "Surface") return null;
+      const hostEl = findOwnHostElement(fiber);
+      const hasInstanceSource = hostEl?.getAttribute("data-instance-source");
+      const hasDataSlot = hostEl?.getAttribute("data-slot");
+      if (!hasInstanceSource && !hasDataSlot) return null;
+      const scope = getScopeForElement(hostEl, parentScope);
+      const dataSlot = hasDataSlot || null;
+      const children = [];
+      const hostFiber = dataSlot ? findHostFiber(fiber) : null;
+      const childFiber = hostFiber ? hostFiber.child : fiber.child;
+      if (childFiber) walkFiber(childFiber, children, scope);
+      if (children.length === 1 && !dataSlot && !(hostEl && getDirectText(hostEl))) {
+        const child = children[0];
+        if (child.type === "component") {
+          return child;
+        }
+      }
+      return {
+        id: hostEl ? getDomPath(hostEl) : "",
+        name,
+        type: "component",
+        dataSlot,
+        source: hostEl?.getAttribute("data-source") || null,
+        scope,
+        textContent: hostEl ? getDirectText(hostEl) : "",
+        children
+      };
+    }
+    function findHostFiber(fiber) {
+      let child = fiber.child;
+      while (child) {
+        if (child.stateNode instanceof Element) return child;
+        const tag = child.tag;
+        const isComponentBoundary = tag === 0 || tag === 1 || tag === 11 || tag === 14 || tag === 15;
+        if (!isComponentBoundary && child.child) {
+          const found = findHostFiber(child);
+          if (found) return found;
+        }
+        child = child.sibling;
+      }
+      return null;
+    }
+    function findOwnHostElement(fiber) {
+      let child = fiber.child;
+      while (child) {
+        if (child.stateNode instanceof Element) return child.stateNode;
+        const tag = child.tag;
+        const isComponentBoundary = tag === 0 || tag === 1 || tag === 11 || tag === 14 || tag === 15;
+        if (!isComponentBoundary && child.child) {
+          const found = findOwnHostElement(child);
+          if (found) return found;
+        }
+        child = child.sibling;
+      }
+      return null;
+    }
+    function buildDataSlotTree(root) {
+      const results = [];
+      for (const child of Array.from(root.children)) {
+        walkDomForSlots(child, results, null);
+      }
+      return results;
+    }
+    function walkDomForSlots(el, siblings, parentScope) {
+      if (el.id && overlayIds.has(el.id)) return;
+      const dataSlot = el.getAttribute("data-slot");
+      const tag = el.tagName.toLowerCase();
+      const scope = getScopeForElement(el, parentScope);
+      if (dataSlot) {
+        const name = dataSlot.split("-").map((s2) => s2.charAt(0).toUpperCase() + s2.slice(1)).join("");
+        const children = [];
+        for (const child of Array.from(el.children)) {
+          walkDomForSlots(child, children, scope);
+        }
+        siblings.push({
+          id: getDomPath(el),
+          name,
+          type: "component",
+          dataSlot,
+          source: el.getAttribute("data-source") || null,
+          scope,
+          textContent: getDirectText(el),
+          children
+        });
+      } else if (semanticTags.has(tag)) {
+        const children = [];
+        for (const child of Array.from(el.children)) {
+          walkDomForSlots(child, children, scope);
+        }
+        if (children.length > 0 || getDirectText(el)) {
+          siblings.push({
+            id: getDomPath(el),
+            name: `<${tag}>`,
+            type: "element",
+            dataSlot: null,
+            source: el.getAttribute("data-source") || null,
+            scope,
+            textContent: getDirectText(el),
+            children
+          });
+        }
+      } else {
+        for (const child of Array.from(el.children)) {
+          walkDomForSlots(child, siblings, scope);
+        }
+      }
+    }
+    let currentTreeMode = "components";
+    function sendComponentTree(mode) {
+      if (mode) currentTreeMode = mode;
+      const tree = buildComponentTree(document.body);
+      window.parent.postMessage({ type: "tool:componentTree", tree }, "*");
+    }
+    let debounceTimer = null;
+    function debouncedSendTree() {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => sendComponentTree(), 300);
+    }
+    const treeObserver = new MutationObserver(debouncedSendTree);
+    treeObserver.observe(document.body, { childList: true, subtree: true });
+    const relevantProps = [
+      "display",
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "flex-direction",
+      "flex-wrap",
+      "justify-content",
+      "align-items",
+      "align-self",
+      "flex-grow",
+      "flex-shrink",
+      "flex-basis",
+      "order",
+      "grid-template-columns",
+      "grid-template-rows",
+      "gap",
+      "row-gap",
+      "column-gap",
+      "width",
+      "height",
+      "min-width",
+      "min-height",
+      "max-width",
+      "max-height",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "text-align",
+      "text-decoration",
+      "text-transform",
+      "color",
+      "white-space",
+      "background-color",
+      "background-image",
+      "background-size",
+      "background-position",
+      "border-top-width",
+      "border-right-width",
+      "border-bottom-width",
+      "border-left-width",
+      "border-style",
+      "border-color",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "opacity",
+      "box-shadow",
+      "transform",
+      "transition"
+    ];
+    const inheritableProps = [
+      "color",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "text-align",
+      "text-transform",
+      "white-space"
+    ];
+    function findComponentFiberAbove(el) {
+      const fiber = getFiber(el);
+      if (!fiber) return null;
+      let candidate = fiber.return;
+      while (candidate) {
+        const tag = candidate.tag;
+        if (tag === 0 || tag === 1 || tag === 11 || tag === 14 || tag === 15) {
+          if (findOwnHostElement(candidate) === el) return candidate;
+        }
+        candidate = candidate.return;
+      }
+      return null;
+    }
+    function extractFiberProps(fiber) {
+      const props = fiber?.memoizedProps;
+      if (!props || typeof props !== "object") return null;
+      const skipKeys = /* @__PURE__ */ new Set(["children", "ref", "key", "className", "style"]);
+      const result = {};
+      let count = 0;
+      for (const k of Object.keys(props)) {
+        if (skipKeys.has(k)) continue;
+        if (k.startsWith("data-")) continue;
+        const v = props[k];
+        if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+          result[k] = v;
+          count++;
+        }
+      }
+      return count > 0 ? result : null;
+    }
+    function extractElementData(el) {
+      const computed = getComputedStyle(el);
+      const rect = el.getBoundingClientRect();
+      const computedStyles = {};
+      for (const prop of relevantProps) {
+        computedStyles[prop] = computed.getPropertyValue(prop);
+      }
+      const parentComputedStyles = {};
+      const parentEl = el.parentElement;
+      if (parentEl) {
+        const parentComputed = getComputedStyle(parentEl);
+        for (const prop of inheritableProps) {
+          parentComputedStyles[prop] = parentComputed.getPropertyValue(prop);
+        }
+      }
+      const attributes = {};
+      for (const attr of Array.from(el.attributes)) {
+        if (attr.name.startsWith("data-")) {
+          attributes[attr.name] = attr.value;
+        }
+      }
+      let sourceFile = null;
+      let sourceLine = null;
+      let sourceCol = null;
+      const dataSource = el.getAttribute("data-source");
+      if (dataSource) {
+        const lastColon = dataSource.lastIndexOf(":");
+        const secondLastColon = dataSource.lastIndexOf(":", lastColon - 1);
+        if (secondLastColon > 0) {
+          sourceFile = dataSource.slice(0, secondLastColon);
+          sourceLine = parseInt(dataSource.slice(secondLastColon + 1, lastColon), 10);
+          sourceCol = parseInt(dataSource.slice(lastColon + 1), 10);
+        }
+      }
+      let instanceSourceFile = null;
+      let instanceSourceLine = null;
+      let instanceSourceCol = null;
+      let componentName = null;
+      let packageName = null;
+      const dataSlot = el.getAttribute("data-slot");
+      const instanceSource = el.getAttribute("data-instance-source");
+      if (instanceSource) {
+        const lc = instanceSource.lastIndexOf(":");
+        const slc = instanceSource.lastIndexOf(":", lc - 1);
+        if (slc > 0) {
+          instanceSourceFile = instanceSource.slice(0, slc);
+          instanceSourceLine = parseInt(instanceSource.slice(slc + 1, lc), 10);
+          instanceSourceCol = parseInt(instanceSource.slice(lc + 1), 10);
+        }
+        if (dataSlot) {
+          componentName = dataSlot.split("-").map((s2) => s2.charAt(0).toUpperCase() + s2.slice(1)).join("");
+        }
+      }
+      const compFiber = dataSlot || instanceSource ? findComponentFiberAbove(el) : null;
+      let fiberProps = null;
+      if (compFiber) {
+        fiberProps = extractFiberProps(compFiber);
+        if (!componentName && instanceSource) {
+          const name = compFiber.type?.displayName || compFiber.type?.name;
+          if (name) componentName = name;
+        }
+        const debugFile = compFiber._debugSource?.fileName;
+        if (debugFile) {
+          packageName = extractPackageName(debugFile);
+        }
+      }
+      if (!packageName && !sourceFile) {
+        const anyFiber = findComponentFiberAbove(el);
+        if (anyFiber) {
+          const debugFile = anyFiber._debugSource?.fileName;
+          if (debugFile) {
+            packageName = extractPackageName(debugFile);
+          }
+        }
+      }
+      return {
+        tag: el.tagName.toLowerCase(),
+        className: (el.getAttribute("class") || "").trim(),
+        computedStyles,
+        parentComputedStyles,
+        boundingRect: rect,
+        domPath: getDomPath(el),
+        textContent: (el.textContent || "").trim().slice(0, 100),
+        attributes,
+        sourceFile,
+        sourceLine,
+        sourceCol,
+        instanceSourceFile,
+        instanceSourceLine,
+        instanceSourceCol,
+        componentName,
+        packageName,
+        fiberProps
+      };
+    }
+    function extractPackageName(filePath) {
+      const nmIdx = filePath.lastIndexOf("node_modules/");
+      if (nmIdx === -1) return null;
+      const rest = filePath.slice(nmIdx + "node_modules/".length);
+      if (rest.startsWith("@")) {
+        const parts = rest.split("/");
+        return parts.length >= 2 ? `${parts[0]}/${parts[1]}` : null;
+      }
+      return rest.split("/")[0] || null;
+    }
+    function selectElement(el) {
+      s.selectedElement = el;
+      s.selectedDomPath = getDomPath(el);
+      const data = extractElementData(el);
+      if (s.selectedOverlay) {
+        positionOverlay(s.selectedOverlay, data.boundingRect);
+      }
+      startOverlayTracking();
+      window.parent.postMessage({ type: "tool:elementSelected", data }, "*");
+    }
+    function reselectCurrentElement() {
+      if (!s.selectedDomPath) return;
+      const el = document.querySelector(s.selectedDomPath);
+      if (el) {
+        s.selectedElement = el;
+        const data = extractElementData(el);
+        if (s.selectedOverlay) {
+          positionOverlay(s.selectedOverlay, data.boundingRect);
+        }
+        window.parent.postMessage({ type: "tool:elementSelected", data }, "*");
+      }
+    }
+    function startOverlayTracking() {
+      if (s.overlayRafId) cancelAnimationFrame(s.overlayRafId);
+      let lastRect = "";
+      function tick() {
+        if (s.selectedElement && s.selectedOverlay) {
+          if (!document.contains(s.selectedElement)) {
+            if (s.selectedDomPath) {
+              const newEl = document.querySelector(s.selectedDomPath);
+              if (newEl) {
+                s.selectedElement = newEl;
+                reselectCurrentElement();
+              }
+            }
+          }
+          if (s.selectedElement && document.contains(s.selectedElement)) {
+            const rect = s.selectedElement.getBoundingClientRect();
+            const key = `${rect.left},${rect.top},${rect.width},${rect.height}`;
+            if (key !== lastRect) {
+              lastRect = key;
+              positionOverlay(s.selectedOverlay, rect);
+            }
+          }
+        }
+        s.overlayRafId = requestAnimationFrame(tick);
+      }
+      tick();
+    }
+    function hideSelectionOverlays() {
+      if (s.highlightOverlay) s.highlightOverlay.style.display = "none";
+      if (s.tooltip) s.tooltip.style.display = "none";
+      if (s.selectedOverlay) s.selectedOverlay.style.display = "none";
+      s.hoveredElement = null;
+    }
+    function enterSelectionMode() {
+      s.selectionMode = true;
+      document.body.style.cursor = "crosshair";
+    }
+    function exitSelectionMode() {
+      s.selectionMode = false;
+      document.body.style.cursor = "";
+      if (s.highlightOverlay) s.highlightOverlay.style.display = "none";
+      if (s.tooltip) s.tooltip.style.display = "none";
+      s.hoveredElement = null;
+    }
+    function clearSelection() {
+      s.selectedElement = null;
+      s.selectedDomPath = null;
+      if (s.selectedOverlay) s.selectedOverlay.style.display = "none";
+      if (s.overlayRafId) {
+        cancelAnimationFrame(s.overlayRafId);
+        s.overlayRafId = null;
+      }
+    }
+    function onMouseMove(e) {
+      if (!s.selectionMode || !s.highlightOverlay || !s.tooltip) return;
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || el === s.highlightOverlay || el === s.tooltip || el === s.selectedOverlay) return;
+      const selectable = findSelectableElement(el);
+      if (selectable === s.hoveredElement) return;
+      s.hoveredElement = selectable;
+      const rect = selectable.getBoundingClientRect();
+      positionOverlay(s.highlightOverlay, rect);
+      const name = getElementName(selectable);
+      s.tooltip.textContent = name;
+      s.tooltip.style.display = "block";
+      s.tooltip.style.left = `${rect.left}px`;
+      s.tooltip.style.top = `${Math.max(0, rect.top - 24)}px`;
+    }
+    function onMouseLeave() {
+      if (!s.highlightOverlay || !s.tooltip) return;
+      s.highlightOverlay.style.display = "none";
+      s.tooltip.style.display = "none";
+      s.hoveredElement = null;
+    }
+    function onClick(e) {
+      if (!s.selectionMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || el === s.highlightOverlay || el === s.tooltip || el === s.selectedOverlay) return;
+      const selectable = findSelectableElement(el);
+      selectElement(selectable);
+    }
+    function onMessage(e) {
+      const msg = e.data;
+      if (!msg || !msg.type || !msg.type.startsWith("tool:")) return;
+      switch (msg.type) {
+        case "tool:enterSelectionMode":
+          enterSelectionMode();
+          break;
+        case "tool:exitSelectionMode":
+          exitSelectionMode();
+          break;
+        case "tool:clearSelection":
+          clearSelection();
+          break;
+        case "tool:previewInlineStyle": {
+          if (s.selectedElement && s.selectedElement instanceof HTMLElement) {
+            const prop = msg.property;
+            const value = msg.value;
+            if (!s.inlineStyleBackups.has(prop)) {
+              s.inlineStyleBackups.set(prop, s.selectedElement.style.getPropertyValue(prop));
+            }
+            s.selectedElement.style.setProperty(prop, value, "important");
+          }
+          break;
+        }
+        case "tool:revertInlineStyles": {
+          if (s.selectedElement && s.selectedElement instanceof HTMLElement) {
+            for (const [prop, original] of s.inlineStyleBackups) {
+              if (original) {
+                s.selectedElement.style.setProperty(prop, original);
+              } else {
+                s.selectedElement.style.removeProperty(prop);
+              }
+            }
+            s.inlineStyleBackups.clear();
+          }
+          break;
+        }
+        case "tool:previewTokenValue": {
+          const prop = msg.property;
+          const value = msg.value;
+          s.tokenPreviewValues.set(prop, value);
+          if (!s.tokenPreviewStyle) {
+            s.tokenPreviewStyle = document.createElement("style");
+            s.tokenPreviewStyle.id = "surface-token-preview";
+            document.head.appendChild(s.tokenPreviewStyle);
+          }
+          const cssRules = [];
+          for (const [k, v] of s.tokenPreviewValues) {
+            if (k.startsWith("--shadow")) {
+              const cls = k.slice(2);
+              cssRules.push(`.${cls}, [class*="${cls}"] { box-shadow: ${v} !important; }`);
+            } else {
+              cssRules.push(`*, *::before, *::after { ${k}: ${v} !important; }`);
+            }
+          }
+          s.tokenPreviewStyle.textContent = cssRules.join("\n");
+          break;
+        }
+        case "tool:revertTokenValues": {
+          if (s.tokenPreviewStyle) {
+            s.tokenPreviewStyle.remove();
+            s.tokenPreviewStyle = null;
+          }
+          s.tokenPreviewValues.clear();
+          s.tokenValueBackups.clear();
+          break;
+        }
+        case "tool:reselectElement":
+          reselectCurrentElement();
+          break;
+        case "tool:setTheme":
+          if (msg.theme === "dark") {
+            document.documentElement.classList.add("dark");
+          } else {
+            document.documentElement.classList.remove("dark");
+          }
+          break;
+        case "tool:requestComponentTree":
+          sendComponentTree(msg.mode || "components");
+          break;
+        case "tool:highlightByTreeId": {
+          const id = msg.id;
+          if (!id || !s.highlightOverlay || !s.tooltip) break;
+          const target = document.querySelector(id);
+          if (target) {
+            const rect = target.getBoundingClientRect();
+            positionOverlay(s.highlightOverlay, rect);
+            const name = getElementName(target);
+            s.tooltip.textContent = name;
+            s.tooltip.style.display = "block";
+            s.tooltip.style.left = `${rect.left}px`;
+            s.tooltip.style.top = `${Math.max(0, rect.top - 24)}px`;
+          }
+          break;
+        }
+        case "tool:clearHighlight":
+          if (s.highlightOverlay) s.highlightOverlay.style.display = "none";
+          if (s.tooltip) s.tooltip.style.display = "none";
+          break;
+        case "tool:selectByTreeId": {
+          const id = msg.id;
+          if (!id) break;
+          const target = document.querySelector(id);
+          if (target) {
+            const selectable = findSelectableElement(target);
+            selectElement(selectable);
+          }
+          break;
+        }
+        case "tool:selectParentInstance": {
+          if (!s.selectedElement) break;
+          let el = s.selectedElement.parentElement;
+          while (el && el !== document.body) {
+            if (el.getAttribute("data-instance-source")) {
+              selectElement(el);
+              break;
+            }
+            el = el.parentElement;
+          }
+          break;
+        }
+        case "tool:renderPreview": {
+          const { componentPath, exportName, combinations: combos, defaultChildren: children } = msg;
+          const currentRegistry = window.__DESIGNTOOLS_REGISTRY__;
+          if (!currentRegistry) {
+            setPreviewRef.current.setPreviewError("No component registry available. Ensure designtools-registry.ts is imported.");
+            setPreviewRef.current.setShowPreview(true);
+            return;
+          }
+          const loader = currentRegistry[componentPath];
+          if (!loader) {
+            setPreviewRef.current.setPreviewError(
+              `Component "${componentPath}" not found in registry. Available: ${Object.keys(currentRegistry).join(", ")}`
+            );
+            setPreviewRef.current.setShowPreview(true);
+            return;
+          }
+          exitSelectionMode();
+          hideSelectionOverlays();
+          loader().then((mod) => {
+            const Comp = mod[exportName] || mod.default;
+            if (!Comp) {
+              setPreviewRef.current.setPreviewError(`Export "${exportName}" not found in ${componentPath}`);
+              setPreviewRef.current.setShowPreview(true);
+              return;
+            }
+            setPreviewRef.current.setPreviewError(null);
+            setPreviewRef.current.setPreviewComponent(() => Comp);
+            setPreviewRef.current.setPreviewCombinations(combos || []);
+            setPreviewRef.current.setPreviewDefaultChildren(children || exportName);
+            setPreviewRef.current.setShowPreview(true);
+            window.parent.postMessage(
+              { type: "tool:previewReady", cellCount: (combos || []).length },
+              "*"
+            );
+          }).catch((err) => {
+            setPreviewRef.current.setPreviewError(`Failed to load component: ${err.message}`);
+            setPreviewRef.current.setShowPreview(true);
+          });
+          break;
+        }
+        case "tool:exitPreview": {
+          setPreviewRef.current.setShowPreview(false);
+          setPreviewRef.current.setPreviewComponent(null);
+          setPreviewRef.current.setPreviewCombinations([]);
+          setPreviewRef.current.setPreviewDefaultChildren("");
+          setPreviewRef.current.setPreviewError(null);
+          enterSelectionMode();
+          break;
+        }
+      }
+    }
+    function notifyPathChanged() {
+      const fullPath = window.location.pathname + window.location.search + window.location.hash;
+      window.parent.postMessage({ type: "tool:pathChanged", path: fullPath }, "*");
+    }
+    document.addEventListener("mousemove", onMouseMove, true);
+    document.addEventListener("mouseleave", onMouseLeave);
+    document.addEventListener("click", onClick, true);
+    window.addEventListener("message", onMessage);
+    window.addEventListener("popstate", notifyPathChanged);
+    window.parent.postMessage({ type: "tool:injectedReady" }, "*");
+    notifyPathChanged();
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove, true);
+      document.removeEventListener("mouseleave", onMouseLeave);
+      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("message", onMessage);
+      window.removeEventListener("popstate", notifyPathChanged);
+      treeObserver.disconnect();
+      if (debounceTimer) clearTimeout(debounceTimer);
+      if (s.overlayRafId) cancelAnimationFrame(s.overlayRafId);
+      s.tokenPreviewStyle?.remove();
+      s.highlightOverlay?.remove();
+      s.tooltip?.remove();
+      s.selectedOverlay?.remove();
+    };
+  }, []);
+  if (!showPreview) return null;
+  if (previewError) {
+    return createPortal(
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32
+      }, children: /* @__PURE__ */ jsx("div", { style: { color: "var(--destructive, #ef4444)", fontFamily: "monospace", fontSize: 14 }, children: previewError }) }),
+      document.body
+    );
+  }
+  if (!previewComponent) {
+    return createPortal(
+      /* @__PURE__ */ jsx("div", { style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32
+      }, children: /* @__PURE__ */ jsx("div", { style: { color: "var(--muted-foreground, #888)", fontFamily: "inherit", fontSize: 14 }, children: "Loading component..." }) }),
+      document.body
+    );
+  }
+  const Component = previewComponent;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 999999,
+      background: "var(--background, white)",
+      overflow: "auto",
+      padding: 32
+    }, children: /* @__PURE__ */ jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+      gap: 24
+    }, children: previewCombinations.map((combo, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("div", { style: {
+        fontSize: 11,
+        fontWeight: 600,
+        color: "var(--muted-foreground, #888)",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+      }, children: combo.label }),
+      /* @__PURE__ */ jsx("div", { style: {
+        padding: 16,
+        border: "1px solid var(--border, #e5e7eb)",
+        borderRadius: 8,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 64,
+        background: "var(--card, var(--background, #fff))"
+      }, children: createElement(Component, combo.props, previewDefaultChildren) })
+    ] }, i)) }) }),
+    document.body
+  );
+}
+export {
+  Surface
+};