@designtools/next-plugin 0.1.2 → 0.1.3

package/dist/codesurface.mjs

@@ -99,6 +99,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",
@@ -404,6 +727,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() {
@@ -423,6 +778,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();

package/dist/index.js

@@ -33,7 +33,195 @@ __export(index_exports, {
   withDesigntools: () => withDesigntools
 });
 module.exports = __toCommonJS(index_exports);
+var import_path2 = __toESM(require("path"));
+
+// src/preview-route.ts
+var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
+var PREVIEW_DIR = "designtools-preview";
+function generatePreviewRoute(appDir) {
+  const projectRoot = import_path.default.dirname(appDir);
+  const previewDir = import_path.default.join(appDir, PREVIEW_DIR);
+  const componentPaths = discoverComponentFiles(projectRoot);
+  import_fs.default.mkdirSync(previewDir, { recursive: true });
+  import_fs.default.writeFileSync(
+    import_path.default.join(previewDir, "layout.tsx"),
+    getLayoutTemplate(),
+    "utf-8"
+  );
+  import_fs.default.writeFileSync(
+    import_path.default.join(previewDir, "page.tsx"),
+    getPageTemplate(componentPaths),
+    "utf-8"
+  );
+  ensureGitignore(projectRoot);
+}
+function ensureGitignore(projectRoot) {
+  const gitignorePath = import_path.default.join(projectRoot, ".gitignore");
+  const entry = "app/designtools-preview";
+  try {
+    const existing = import_fs.default.existsSync(gitignorePath) ? import_fs.default.readFileSync(gitignorePath, "utf-8") : "";
+    if (!existing.includes(entry)) {
+      import_fs.default.appendFileSync(gitignorePath, `
+# Generated by @designtools/next-plugin
+${entry}
+`);
+    }
+  } catch {
+  }
+}
+function discoverComponentFiles(projectRoot) {
+  const dirs = ["components/ui", "src/components/ui"];
+  for (const dir of dirs) {
+    const fullDir = import_path.default.join(projectRoot, dir);
+    if (import_fs.default.existsSync(fullDir)) {
+      const files = import_fs.default.readdirSync(fullDir);
+      return files.filter((f) => f.endsWith(".tsx") || f.endsWith(".ts") || f.endsWith(".jsx")).map((f) => `${dir}/${f.replace(/\.(tsx|ts|jsx|js)$/, "")}`);
+    }
+  }
+  return [];
+}
+function getLayoutTemplate() {
+  return `// Auto-generated by @designtools/next-plugin \u2014 do not edit
+export default function PreviewLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ padding: 32, background: "var(--background, #fff)", minHeight: "100vh" }}>
+      {children}
+    </div>
+  );
+}
+`;
+}
+function getPageTemplate(componentPaths) {
+  const registryEntries = componentPaths.map((p) => `  "${p}": () => import("@/${p}"),`).join("\n");
+  return `// Auto-generated by @designtools/next-plugin \u2014 do not edit
+"use client";
+
+import { useState, useEffect, useCallback, createElement } from "react";
+
+/* Static import registry \u2014 webpack can analyze these imports */
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
+
+interface Combination {
+  label: string;
+  props: Record<string, string>;
+}
+
+interface RenderMsg {
+  type: "tool:renderPreview";
+  componentPath: string;
+  exportName: string;
+  combinations: Combination[];
+  defaultChildren: string;
+}
+
+export default function PreviewPage() {
+  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
+  const [combinations, setCombinations] = useState<Combination[]>([]);
+  const [defaultChildren, setDefaultChildren] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleMessage = useCallback(async (e: MessageEvent) => {
+    const msg = e.data;
+    if (msg?.type !== "tool:renderPreview") return;
+
+    const { componentPath, exportName, combinations: combos, defaultChildren: children } = msg as RenderMsg;
+
+    try {
+      setError(null);
+      setCombinations(combos);
+      setDefaultChildren(children || exportName);
+
+      const loader = COMPONENT_REGISTRY[componentPath];
+      if (!loader) {
+        setError(\`Component "\${componentPath}" not found in registry. Available: \${Object.keys(COMPONENT_REGISTRY).join(", ")}\`);
+        return;
+      }
+
+      const mod = await loader();
+      const Comp = mod[exportName] || mod.default;
+      if (!Comp) {
+        setError(\`Export "\${exportName}" not found in \${componentPath}\`);
+        return;
+      }
+
+      setComponent(() => Comp);
+
+      // Notify editor that preview is ready
+      window.parent.postMessage(
+        { type: "tool:previewReady", cellCount: combos.length },
+        "*"
+      );
+    } catch (err: any) {
+      setError(\`Failed to load component: \${err.message}\`);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    // Signal readiness to the editor
+    window.parent.postMessage({ type: "tool:injectedReady" }, "*");
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 32, color: "#ef4444", fontFamily: "monospace", fontSize: 14 }}>
+        {error}
+      </div>
+    );
+  }
+
+  if (!Component) {
+    return (
+      <div style={{ padding: 32, color: "#888", fontFamily: "system-ui", fontSize: 14 }}>
+        Waiting for component\u2026
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ fontFamily: "system-ui" }}>
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+        gap: 24,
+      }}>
+        {combinations.map((combo, i) => (
+          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <div style={{
+              fontSize: 11,
+              fontWeight: 600,
+              color: "#888",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+            }}>
+              {combo.label}
+            </div>
+            <div style={{
+              padding: 16,
+              border: "1px solid #e5e7eb",
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 64,
+              background: "#fff",
+            }}>
+              {createElement(Component, combo.props, defaultChildren)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+// src/index.ts
 function withDesigntools(nextConfig = {}) {
   return {
     ...nextConfig,
@@ -44,7 +232,7 @@ function withDesigntools(nextConfig = {}) {
           exclude: /node_modules/,
           use: [
             {
-              loader: import_path.default.resolve(__dirname, "loader.js"),
+              loader: import_path2.default.resolve(__dirname, "loader.js"),
               options: {
                 cwd: context.dir
               }
@@ -54,15 +242,20 @@ function withDesigntools(nextConfig = {}) {
         config.module.rules.push({
           test: /layout\.(tsx|jsx)$/,
           include: [
-            import_path.default.resolve(context.dir, "app"),
-            import_path.default.resolve(context.dir, "src/app")
+            import_path2.default.resolve(context.dir, "app"),
+            import_path2.default.resolve(context.dir, "src/app")
           ],
           use: [
             {
-              loader: import_path.default.resolve(__dirname, "codesurface-mount-loader.js")
+              loader: import_path2.default.resolve(__dirname, "codesurface-mount-loader.js")
             }
           ]
         });
+        const appDir = import_path2.default.resolve(context.dir, "app");
+        try {
+          generatePreviewRoute(appDir);
+        } catch {
+        }
       }
       if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, context);