@designtools/next-plugin 0.1.6 → 0.1.8

package/README.md

@@ -0,0 +1,58 @@
+# @designtools/next-plugin
+
+Next.js config wrapper for [@designtools/codesurface](../codesurface). Adds source location annotations and mounts the selection overlay — development only.
+
+## Installation
+
+```bash
+npm install -D @designtools/next-plugin
+```
+
+## Peer dependencies
+
+- `next` >= 14
+- `react` >= 18
+
+## Usage
+
+Wrap your Next.js config with `withDesigntools`:
+
+```ts
+// next.config.ts
+import { withDesigntools } from "@designtools/next-plugin";
+
+const nextConfig = {
+  // your existing config
+};
+
+export default withDesigntools(nextConfig);
+```
+
+If you already have a `webpack` customization, it will still be called — `withDesigntools` chains onto it.
+
+## What it does
+
+In development (`next dev`), the plugin adds two webpack loaders:
+
+### 1. Source annotation loader
+
+Runs a Babel pass over every `.tsx` / `.jsx` file (excluding `node_modules`) that adds a `data-source="file:line:col"` attribute to each JSX element. This maps rendered DOM elements back to their source location so the editor can open the right file when you select an element.
+
+SWC stays enabled as the primary compiler — Babel is only used for this annotation pass.
+
+### 2. CodeSurface mount loader
+
+Transforms your root layout file (`app/layout.tsx` or `src/app/layout.tsx`) to auto-mount the `<CodeSurface />` selection overlay component. This component handles element selection, hover highlighting, inline style previews, and postMessage communication with the editor UI.
+
+Both loaders are skipped entirely in production builds.
+
+## Exports
+
+| Export | Description |
+|--------|-------------|
+| `@designtools/next-plugin` | `withDesigntools()` config wrapper |
+| `@designtools/next-plugin/codesurface` | `<CodeSurface />` React component (mounted automatically — you shouldn't need to import this directly) |
+
+## License
+
+CC-BY-NC-4.0

package/dist/chunk-6DZX6EAA.mjs

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __require,
+  __commonJS,
+  __toESM
+};

package/dist/codesurface-mount-loader.js

@@ -33,14 +33,16 @@ function codesurfaceMountLoader(source) {
     callback(null, source);
     return;
   }
-  const importStatement = `import { CodeSurface } from "@designtools/next-plugin/codesurface";
-`;
+  const importStatements = [
+    `import { CodeSurface } from "@designtools/next-plugin/codesurface";`,
+    `import "./designtools-registry";`
+  ].join("\n") + "\n";
   let modified = source;
   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;
   }
   modified = modified.replace(
     /(\{children\})/,

package/dist/codesurface-mount-loader.mjs

@@ -11,14 +11,16 @@ function codesurfaceMountLoader(source) {
     callback(null, source);
     return;
   }
-  const importStatement = `import { CodeSurface } from "@designtools/next-plugin/codesurface";
-`;
+  const importStatements = [
+    `import { CodeSurface } from "@designtools/next-plugin/codesurface";`,
+    `import "./designtools-registry";`
+  ].join("\n") + "\n";
   let modified = source;
   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;
   }
   modified = modified.replace(
     /(\{children\})/,

package/dist/codesurface.d.mts

@@ -1,3 +1,5 @@
-declare function CodeSurface(): null;
+import * as react from 'react';
+
+declare function CodeSurface(): react.ReactPortal | null;
 
 export { CodeSurface };

package/dist/codesurface.d.ts

@@ -1,3 +1,5 @@
-declare function CodeSurface(): null;
+import * as react from 'react';
+
+declare function CodeSurface(): react.ReactPortal | null;
 
 export { CodeSurface };

package/dist/codesurface.js

@@ -25,6 +25,8 @@ __export(codesurface_exports, {
 });
 module.exports = __toCommonJS(codesurface_exports);
 var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
 function CodeSurface() {
   const stateRef = (0, import_react.useRef)({
     selectionMode: false,
@@ -40,6 +42,25 @@ function CodeSurface() {
     tooltip: null,
     selectedOverlay: null
   });
+  const [previewComponent, setPreviewComponent] = (0, import_react.useState)(null);
+  const [previewCombinations, setPreviewCombinations] = (0, import_react.useState)([]);
+  const [previewDefaultChildren, setPreviewDefaultChildren] = (0, import_react.useState)("");
+  const [previewError, setPreviewError] = (0, import_react.useState)(null);
+  const [showPreview, setShowPreview] = (0, import_react.useState)(false);
+  const setPreviewRef = (0, import_react.useRef)({
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview
+  });
+  setPreviewRef.current = {
+    setPreviewComponent,
+    setPreviewCombinations,
+    setPreviewDefaultChildren,
+    setPreviewError,
+    setShowPreview
+  };
   (0, import_react.useEffect)(() => {
     const s = stateRef.current;
     s.highlightOverlay = document.createElement("div");
@@ -523,6 +544,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();
@@ -561,8 +612,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) {
@@ -570,8 +622,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(),
@@ -588,7 +646,8 @@ function CodeSurface() {
         instanceSourceFile,
         instanceSourceLine,
         instanceSourceCol,
-        componentName
+        componentName,
+        fiberProps
       };
     }
     function selectElement(el) {
@@ -640,6 +699,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);
@@ -675,15 +751,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) {
@@ -781,6 +852,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() {
@@ -809,7 +929,67 @@ function CodeSurface() {
       s.selectedOverlay?.remove();
     };
   }, []);
-  return null;
+  if (!showPreview) return null;
+  if (previewError) {
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--destructive, #ef4444)", fontFamily: "monospace", fontSize: 14 }, children: previewError }) }),
+      document.body
+    );
+  }
+  if (!previewComponent) {
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "var(--background, white)",
+        overflow: "auto",
+        padding: 32
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "var(--muted-foreground, #888)", fontFamily: "inherit", fontSize: 14 }, children: "Loading component..." }) }),
+      document.body
+    );
+  }
+  const Component = previewComponent;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 999999,
+      background: "var(--background, white)",
+      overflow: "auto",
+      padding: 32
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+      gap: 24
+    }, children: previewCombinations.map((combo, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+        fontSize: 11,
+        fontWeight: 600,
+        color: "var(--muted-foreground, #888)",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+      }, children: combo.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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: (0, import_react.createElement)(Component, combo.props, previewDefaultChildren) })
+    ] }, i)) }) }),
+    document.body
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {