@designtools/next-plugin 0.1.3 → 0.1.7

package/dist/codesurface.mjs

@@ -2,7 +2,9 @@
 import "./chunk-Y6FXYEAI.mjs";
 
 // src/codesurface.tsx
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, createElement } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 function CodeSurface() {
   const stateRef = useRef({
     selectionMode: false,
@@ -18,6 +20,25 @@ function CodeSurface() {
     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");
@@ -501,6 +522,36 @@ function CodeSurface() {
       "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();
@@ -539,8 +590,9 @@ function CodeSurface() {
       let instanceSourceLine = null;
       let instanceSourceCol = null;
       let componentName = 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) {
@@ -548,8 +600,14 @@ function CodeSurface() {
           instanceSourceLine = parseInt(instanceSource.slice(slc + 1, lc), 10);
           instanceSourceCol = parseInt(instanceSource.slice(lc + 1), 10);
         }
-        const slot = el.getAttribute("data-slot") || "";
-        componentName = slot.split("-").map((s2) => s2.charAt(0).toUpperCase() + s2.slice(1)).join("");
+        componentName = dataSlot.split("-").map((s2) => s2.charAt(0).toUpperCase() + s2.slice(1)).join("");
+      }
+      let fiberProps = null;
+      if (dataSlot) {
+        const compFiber = findComponentFiberAbove(el);
+        if (compFiber) {
+          fiberProps = extractFiberProps(compFiber);
+        }
       }
       return {
         tag: el.tagName.toLowerCase(),
@@ -566,7 +624,8 @@ function CodeSurface() {
         instanceSourceFile,
         instanceSourceLine,
         instanceSourceCol,
-        componentName
+        componentName,
+        fiberProps
       };
     }
     function selectElement(el) {
@@ -618,6 +677,23 @@ function CodeSurface() {
       }
       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 onMouseMove(e) {
       if (!s.selectionMode || !s.highlightOverlay || !s.tooltip) return;
       const el = document.elementFromPoint(e.clientX, e.clientY);
@@ -653,15 +729,10 @@ function CodeSurface() {
       if (!msg || !msg.type || !msg.type.startsWith("tool:")) return;
       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) {
@@ -759,6 +830,55 @@ function CodeSurface() {
           }
           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() {
@@ -787,7 +907,67 @@ function CodeSurface() {
       s.selectedOverlay?.remove();
     };
   }, []);
-  return null;
+  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 {
   CodeSurface

package/dist/index.js

@@ -38,27 +38,30 @@ 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) {
+var REGISTRY_FILE = "designtools-registry.ts";
+function generateComponentRegistry(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"
-  );
+  const registryEntries = componentPaths.map((p) => `  "${p}": () => import("@/${p}"),`).join("\n");
+  const content = `"use client";
+// Auto-generated by @designtools/next-plugin \u2014 do not edit
+
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
+
+// 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;
+}
+`;
+  import_fs.default.writeFileSync(import_path.default.join(appDir, REGISTRY_FILE), content, "utf-8");
   ensureGitignore(projectRoot);
 }
 function ensureGitignore(projectRoot) {
   const gitignorePath = import_path.default.join(projectRoot, ".gitignore");
-  const entry = "app/designtools-preview";
+  const entry = "app/designtools-registry.ts";
   try {
     const existing = import_fs.default.existsSync(gitignorePath) ? import_fs.default.readFileSync(gitignorePath, "utf-8") : "";
     if (!existing.includes(entry)) {
@@ -81,145 +84,6 @@ function discoverComponentFiles(projectRoot) {
   }
   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 = {}) {
@@ -253,7 +117,7 @@ function withDesigntools(nextConfig = {}) {
         });
         const appDir = import_path2.default.resolve(context.dir, "app");
         try {
-          generatePreviewRoute(appDir);
+          generateComponentRegistry(appDir);
         } catch {
         }
       }

package/dist/index.mjs

@@ -6,27 +6,30 @@ import path2 from "path";
 // src/preview-route.ts
 import fs from "fs";
 import path from "path";
-var PREVIEW_DIR = "designtools-preview";
-function generatePreviewRoute(appDir) {
+var REGISTRY_FILE = "designtools-registry.ts";
+function generateComponentRegistry(appDir) {
   const projectRoot = path.dirname(appDir);
-  const previewDir = path.join(appDir, PREVIEW_DIR);
   const componentPaths = discoverComponentFiles(projectRoot);
-  fs.mkdirSync(previewDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(previewDir, "layout.tsx"),
-    getLayoutTemplate(),
-    "utf-8"
-  );
-  fs.writeFileSync(
-    path.join(previewDir, "page.tsx"),
-    getPageTemplate(componentPaths),
-    "utf-8"
-  );
+  const registryEntries = componentPaths.map((p) => `  "${p}": () => import("@/${p}"),`).join("\n");
+  const content = `"use client";
+// Auto-generated by @designtools/next-plugin \u2014 do not edit
+
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
+
+// 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;
+}
+`;
+  fs.writeFileSync(path.join(appDir, REGISTRY_FILE), content, "utf-8");
   ensureGitignore(projectRoot);
 }
 function ensureGitignore(projectRoot) {
   const gitignorePath = path.join(projectRoot, ".gitignore");
-  const entry = "app/designtools-preview";
+  const entry = "app/designtools-registry.ts";
   try {
     const existing = fs.existsSync(gitignorePath) ? fs.readFileSync(gitignorePath, "utf-8") : "";
     if (!existing.includes(entry)) {
@@ -49,145 +52,6 @@ function discoverComponentFiles(projectRoot) {
   }
   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 = {}) {
@@ -221,7 +85,7 @@ function withDesigntools(nextConfig = {}) {
         });
         const appDir = path2.resolve(context.dir, "app");
         try {
-          generatePreviewRoute(appDir);
+          generateComponentRegistry(appDir);
         } catch {
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/next-plugin",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts src/loader.ts src/codesurface.tsx src/codesurface-mount-loader.ts --format cjs,esm --dts --external @babel/core --external react --external react/jsx-runtime"
+    "build": "tsup src/index.ts src/loader.ts src/codesurface.tsx src/codesurface-mount-loader.ts --format cjs,esm --dts --external @babel/core --external react --external react/jsx-runtime --external react-dom"
   },
   "peerDependencies": {
     "next": ">=14.0.0",