@designtools/next-plugin 0.1.2 → 0.1.3

package/dist/codesurface.js

@@ -121,6 +121,329 @@ function CodeSurface() {
       }
       return target;
     }
+    const overlayIds = /* @__PURE__ */ new Set(["tool-highlight", "tool-tooltip", "tool-selected", "codesurface-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) : "";
+        if (children.length > 0 || text) {
+          return {
+            id: el ? getDomPath(el) : "",
+            name: `<${tag}>`,
+            type: "element",
+            dataSlot: null,
+            source: el?.getAttribute("data-source") || null,
+            scope,
+            textContent: text,
+            children
+          };
+        }
+      }
+      if (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 === "CodeSurface") 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);
+        }
+      }
+    }
+    function sendComponentTree() {
+      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",
@@ -426,6 +749,38 @@ function CodeSurface() {
             document.documentElement.classList.remove("dark");
           }
           break;
+        case "tool:requestComponentTree":
+          sendComponentTree();
+          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;
+        }
       }
     }
     function notifyPathChanged() {
@@ -445,6 +800,8 @@ function CodeSurface() {
       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();