@designtools/next-plugin 0.1.6 → 0.1.7

package/src/codesurface-mount-loader.ts

@@ -28,17 +28,21 @@ export default function codesurfaceMountLoader(this: LoaderContext, source: stri
     return;
   }
 
-  // Add import at the top (after "use client" or first import)
-  // CodeSurface is a "use client" component — importing it from an RSC is fine in Next.js
-  const importStatement = `import { CodeSurface } from "@designtools/next-plugin/codesurface";\n`;
+  // Add imports at the top (after "use client" or first import)
+  // The registry import is a side-effect — it self-registers on window.
+  const importStatements = [
+    `import { CodeSurface } from "@designtools/next-plugin/codesurface";`,
+    `import "./designtools-registry";`,
+  ].join("\n") + "\n";
+
   let modified = source;
 
-  // Find a good insertion point for the import
+  // Find a good insertion point for the imports
   const firstImportIndex = source.indexOf("import ");
   if (firstImportIndex !== -1) {
-    modified = source.slice(0, firstImportIndex) + importStatement + source.slice(firstImportIndex);
+    modified = source.slice(0, firstImportIndex) + importStatements + source.slice(firstImportIndex);
   } else {
-    modified = importStatement + source;
+    modified = importStatements + source;
   }
 
   // Add <CodeSurface /> just before {children}

package/src/codesurface.tsx

@@ -9,12 +9,18 @@
  * with proper lifecycle management.
  */
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, createElement } from "react";
+import { createPortal } from "react-dom";
 
 // Overlay elements are created imperatively (not React-rendered)
 // because they need to be fixed-position overlays that don't interfere
 // with the app's React tree.
 
+interface PreviewCombination {
+  label: string;
+  props: Record<string, string>;
+}
+
 export function CodeSurface() {
   const stateRef = useRef({
     selectionMode: false,
@@ -31,6 +37,29 @@ export function CodeSurface() {
     selectedOverlay: null as HTMLDivElement | null,
   });
 
+  // Preview overlay state
+  const [previewComponent, setPreviewComponent] = useState<React.ComponentType<any> | null>(null);
+  const [previewCombinations, setPreviewCombinations] = useState<PreviewCombination[]>([]);
+  const [previewDefaultChildren, setPreviewDefaultChildren] = useState("");
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+
+  // Ref so the imperative useEffect can trigger state updates
+  const setPreviewRef = useRef({
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview,
+  });
+  setPreviewRef.current = {
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview,
+  };
+
   useEffect(() => {
     const s = stateRef.current;
 
@@ -593,6 +622,49 @@ export function CodeSurface() {
       "letter-spacing", "text-align", "text-transform", "white-space",
     ];
 
+    /**
+     * Walk UP the fiber tree from a DOM element's fiber to find the
+     * component that renders this element as its root host element.
+     * Checks tags 0 (Function), 1 (Class), 11 (ForwardRef),
+     * 14 (Memo), 15 (SimpleMemo) as component boundaries.
+     */
+    function findComponentFiberAbove(el: Element): any | null {
+      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) {
+          // Check if this component's root host element is our element
+          if (findOwnHostElement(candidate) === el) return candidate;
+        }
+        candidate = candidate.return;
+      }
+      return null;
+    }
+
+    /**
+     * Read memoizedProps from a fiber, filtering to simple values only.
+     * Skips children, ref, key, className, style, and data-* props.
+     */
+    function extractFiberProps(fiber: any): Record<string, string | number | boolean> | null {
+      const props = fiber?.memoizedProps;
+      if (!props || typeof props !== "object") return null;
+      const skipKeys = new Set(["children", "ref", "key", "className", "style"]);
+      const result: Record<string, string | number | boolean> = {};
+      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: Element) {
       const computed = getComputedStyle(el);
       const rect = el.getBoundingClientRect();
@@ -635,16 +707,14 @@ export function CodeSurface() {
       }
 
       // For component instances: read data-instance-source directly from the DOM element.
-      // The Babel transform adds this attribute to component JSX (<Button>, <Card>)
-      // and it propagates via {...props} to the rendered DOM element, carrying exact
-      // page-level coordinates of each component usage site.
       let instanceSourceFile: string | null = null;
       let instanceSourceLine: number | null = null;
       let instanceSourceCol: number | null = null;
       let componentName: string | null = null;
 
+      const dataSlot = el.getAttribute("data-slot");
       const instanceSource = el.getAttribute("data-instance-source");
-      if (instanceSource && el.getAttribute("data-slot")) {
+      if (instanceSource && dataSlot) {
         const lc = instanceSource.lastIndexOf(":");
         const slc = instanceSource.lastIndexOf(":", lc - 1);
         if (slc > 0) {
@@ -654,13 +724,21 @@ export function CodeSurface() {
         }
 
         // Derive component name from data-slot (e.g. "card-title" -> "CardTitle")
-        const slot = el.getAttribute("data-slot") || "";
-        componentName = slot
+        componentName = dataSlot
           .split("-")
           .map((s: string) => s.charAt(0).toUpperCase() + s.slice(1))
           .join("");
       }
 
+      // Extract runtime props from React fiber for component instances
+      let fiberProps: Record<string, string | number | boolean> | null = null;
+      if (dataSlot) {
+        const compFiber = findComponentFiberAbove(el);
+        if (compFiber) {
+          fiberProps = extractFiberProps(compFiber);
+        }
+      }
+
       return {
         tag: el.tagName.toLowerCase(),
         className: (el.getAttribute("class") || "").trim(),
@@ -677,6 +755,7 @@ export function CodeSurface() {
         instanceSourceLine,
         instanceSourceCol,
         componentName,
+        fiberProps,
       };
     }
 
@@ -732,6 +811,27 @@ export function CodeSurface() {
       tick();
     }
 
+    // --- Helper to hide/show selection overlays ---
+    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;
+    }
+
     // --- Event handlers ---
     function onMouseMove(e: MouseEvent) {
       if (!s.selectionMode || !s.highlightOverlay || !s.tooltip) return;
@@ -772,15 +872,10 @@ export function CodeSurface() {
 
       switch (msg.type) {
         case "tool:enterSelectionMode":
-          s.selectionMode = true;
-          document.body.style.cursor = "crosshair";
+          enterSelectionMode();
           break;
         case "tool: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;
+          exitSelectionMode();
           break;
         case "tool:previewInlineStyle": {
           if (s.selectedElement && s.selectedElement instanceof HTMLElement) {
@@ -809,12 +904,7 @@ export function CodeSurface() {
         case "tool:previewTokenValue": {
           const prop = msg.property as string;
           const value = msg.value as string;
-          // Track current preview value
           s.tokenPreviewValues.set(prop, value);
-          // Inject a <style> tag override.
-          // Tailwind v4 resolves @theme variables at build time and inlines
-          // them into utility classes, so setting CSS custom properties on
-          // :root has no effect. Instead we target utility classes directly.
           if (!s.tokenPreviewStyle) {
             s.tokenPreviewStyle = document.createElement("style");
             s.tokenPreviewStyle.id = "codesurface-token-preview";
@@ -822,13 +912,10 @@ export function CodeSurface() {
           }
           const cssRules: string[] = [];
           for (const [k, v] of s.tokenPreviewValues) {
-            // Derive Tailwind utility class from CSS variable name:
-            // --shadow-sm → .shadow-sm, --shadow → .shadow
             if (k.startsWith("--shadow")) {
-              const cls = k.slice(2); // "--shadow-sm" → "shadow-sm"
+              const cls = k.slice(2);
               cssRules.push(`.${cls}, [class*="${cls}"] { box-shadow: ${v} !important; }`);
             } else {
-              // For other tokens (colors, spacing, etc.) override the custom property
               cssRules.push(`*, *::before, *::after { ${k}: ${v} !important; }`);
             }
           }
@@ -886,6 +973,66 @@ export function CodeSurface() {
           }
           break;
         }
+        case "tool:renderPreview": {
+          const { componentPath, exportName, combinations: combos, defaultChildren: children } = msg;
+          const currentRegistry = (window as any).__DESIGNTOOLS_REGISTRY__ as Record<string, () => Promise<any>> | undefined;
+
+          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;
+          }
+
+          // Disable selection mode and hide overlays
+          exitSelectionMode();
+          hideSelectionOverlays();
+
+          // Load the component
+          loader().then((mod: any) => {
+            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);
+
+            // Notify editor that preview is ready
+            window.parent.postMessage(
+              { type: "tool:previewReady", cellCount: (combos || []).length },
+              "*"
+            );
+          }).catch((err: any) => {
+            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);
+
+          // Restore selection mode
+          enterSelectionMode();
+          break;
+        }
       }
     }
 
@@ -923,6 +1070,88 @@ export function CodeSurface() {
     };
   }, []);
 
-  // This component renders nothing — overlays are created imperatively
-  return null;
+  // --- Preview overlay rendered via portal ---
+  if (!showPreview) return null;
+
+  if (previewError) {
+    return createPortal(
+      <div style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32,
+      }}>
+        <div style={{ color: "var(--destructive, #ef4444)", fontFamily: "monospace", fontSize: 14 }}>
+          {previewError}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  if (!previewComponent) {
+    return createPortal(
+      <div style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32,
+      }}>
+        <div style={{ color: "var(--muted-foreground, #888)", fontFamily: "inherit", fontSize: 14 }}>
+          Loading component...
+        </div>
+      </div>,
+      document.body
+    );
+  }
+
+  const Component = previewComponent;
+
+  return createPortal(
+    <div style={{
+      position: "fixed",
+      inset: 0,
+      zIndex: 999999,
+      background: "var(--background, white)",
+      overflow: "auto",
+      padding: 32,
+    }}>
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+        gap: 24,
+      }}>
+        {previewCombinations.map((combo, i) => (
+          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <div style={{
+              fontSize: 11,
+              fontWeight: 600,
+              color: "var(--muted-foreground, #888)",
+              textTransform: "uppercase" as const,
+              letterSpacing: "0.05em",
+            }}>
+              {combo.label}
+            </div>
+            <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))",
+            }}>
+              {createElement(Component, combo.props, previewDefaultChildren)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>,
+    document.body
+  );
 }

package/src/index.ts

@@ -8,7 +8,7 @@
  */
 
 import path from "path";
-import { generatePreviewRoute } from "./preview-route.js";
+import { generateComponentRegistry } from "./preview-route.js";
 
 export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {} as T): T {
   return {
@@ -43,12 +43,10 @@ export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {
           ],
         });
 
-        // Generate the component isolation preview route
-        // This creates app/__designtools/preview/page.tsx which Next.js
-        // picks up as a route automatically via file-system routing.
+        // Generate the component registry for isolation overlay
         const appDir = path.resolve(context.dir, "app");
         try {
-          generatePreviewRoute(appDir);
+          generateComponentRegistry(appDir);
         } catch {
           // Non-fatal — isolation feature just won't work
         }

package/src/preview-route.ts

@@ -1,51 +1,52 @@
 /**
- * Preview route generator for component isolation.
+ * Component registry generator for component isolation.
  *
- * Writes a catch-all preview page into the target app's app directory
- * that can render any component with arbitrary props via postMessage.
- * Uses Next.js file-system routing — no custom server needed.
+ * Writes a static import map file into the target app's app directory.
+ * The <CodeSurface /> component uses this registry to dynamically load
+ * components for the isolation overlay — no route change needed.
  */
 
 import fs from "fs";
 import path from "path";
 
-const PREVIEW_DIR = "designtools-preview";
+const REGISTRY_FILE = "designtools-registry.ts";
 
-/** Generate the preview route files in the target app's app directory. */
-export function generatePreviewRoute(appDir: string): void {
+/** Generate the component registry file in the target app's app directory. */
+export function generateComponentRegistry(appDir: string): void {
   const projectRoot = path.dirname(appDir);
-  const previewDir = path.join(appDir, PREVIEW_DIR);
 
   // Discover component files so we can generate static imports
   const componentPaths = discoverComponentFiles(projectRoot);
 
-  // Create directory
-  fs.mkdirSync(previewDir, { recursive: true });
+  const registryEntries = componentPaths
+    .map((p) => `  "${p}": () => import("@/${p}"),`)
+    .join("\n");
+
+  const content = `"use client";
+// Auto-generated by @designtools/next-plugin — do not edit
+
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
 
-  // Write layout — minimal shell, no app chrome
-  fs.writeFileSync(
-    path.join(previewDir, "layout.tsx"),
-    getLayoutTemplate(),
-    "utf-8"
-  );
+// Self-register on window so CodeSurface can access it without
+// passing functions through the RSC serialization boundary.
+if (typeof window !== "undefined") {
+  (window as any).__DESIGNTOOLS_REGISTRY__ = COMPONENT_REGISTRY;
+}
+`;
 
-  // Write page — client component that renders previews via postMessage
-  fs.writeFileSync(
-    path.join(previewDir, "page.tsx"),
-    getPageTemplate(componentPaths),
-    "utf-8"
-  );
+  fs.writeFileSync(path.join(appDir, REGISTRY_FILE), content, "utf-8");
 
-  // Ensure designtools-preview is gitignored
+  // Ensure registry file is gitignored
   ensureGitignore(projectRoot);
 }
 
-/** Clean up generated preview files. */
-export function cleanupPreviewRoute(appDir: string): void {
-  const previewDir = path.join(appDir, PREVIEW_DIR);
+/** Clean up generated registry file. */
+export function cleanupComponentRegistry(appDir: string): void {
+  const registryPath = path.join(appDir, REGISTRY_FILE);
   try {
-    fs.rmSync(previewDir, { recursive: true, force: true });
-    // Directory itself is removed by rmSync above
+    fs.unlinkSync(registryPath);
   } catch {
     // ignore
   }
@@ -53,7 +54,7 @@ export function cleanupPreviewRoute(appDir: string): void {
 
 function ensureGitignore(projectRoot: string): void {
   const gitignorePath = path.join(projectRoot, ".gitignore");
-  const entry = "app/designtools-preview";
+  const entry = "app/designtools-registry.ts";
 
   try {
     const existing = fs.existsSync(gitignorePath)
@@ -84,148 +85,3 @@ function discoverComponentFiles(projectRoot: string): string[] {
   }
   return [];
 }
-
-function getLayoutTemplate(): string {
-  return `// Auto-generated by @designtools/next-plugin — 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: string[]): string {
-  // Generate static import map entries — webpack can analyze these
-  const registryEntries = componentPaths
-    .map((p) => `  "${p}": () => import("@/${p}"),`)
-    .join("\n");
-
-  return `// Auto-generated by @designtools/next-plugin — do not edit
-"use client";
-
-import { useState, useEffect, useCallback, createElement } from "react";
-
-/* Static import registry — 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…
-      </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>
-  );
-}
-`;
-}