@archie/devtools 0.0.13 → 0.0.16

package/dist/client/client.d.mts

@@ -26,7 +26,8 @@ type InjectOptions = {
     /**
      * Where to load the inspector script from.
      * - "remote" (default): load from REMOTE_INSPECTOR_SCRIPT_URL with a dynamic hash to avoid cache.
-     * - "local": load from the bundled module (import('./inspector.js')).
+     * - "local": load from `localScriptUrl` (default `/_archie/inspector.js`), served by `archieDevTools()`
+     *   when `VITE_ARCHIE_LOCAL_INSPECTOR=true` in the host Vite app. You can also pass `localScriptUrl` directly.
      */
     scriptSource?: 'remote' | 'local';
     /**
@@ -35,6 +36,12 @@ type InjectOptions = {
      * Example: 'https://my-cdn.com/inspector.standalone.js'
      */
     scriptUrl?: string;
+    /**
+     * URL for the inspector script when `scriptSource` is `"local"`.
+     * Defaults to `/_archie/inspector.js` (middleware from `archieDevTools()` in dev).
+     * Override if you host the file elsewhere, e.g. `'http://localhost:4000/inspector.js'`.
+     */
+    localScriptUrl?: string;
 };
 
 interface ArchieRouteObjectLike {

package/dist/client/client.d.ts

@@ -26,7 +26,8 @@ type InjectOptions = {
     /**
      * Where to load the inspector script from.
      * - "remote" (default): load from REMOTE_INSPECTOR_SCRIPT_URL with a dynamic hash to avoid cache.
-     * - "local": load from the bundled module (import('./inspector.js')).
+     * - "local": load from `localScriptUrl` (default `/_archie/inspector.js`), served by `archieDevTools()`
+     *   when `VITE_ARCHIE_LOCAL_INSPECTOR=true` in the host Vite app. You can also pass `localScriptUrl` directly.
      */
     scriptSource?: 'remote' | 'local';
     /**
@@ -35,6 +36,12 @@ type InjectOptions = {
      * Example: 'https://my-cdn.com/inspector.standalone.js'
      */
     scriptUrl?: string;
+    /**
+     * URL for the inspector script when `scriptSource` is `"local"`.
+     * Defaults to `/_archie/inspector.js` (middleware from `archieDevTools()` in dev).
+     * Override if you host the file elsewhere, e.g. `'http://localhost:4000/inspector.js'`.
+     */
+    localScriptUrl?: string;
 };
 
 interface ArchieRouteObjectLike {

package/dist/client/client.js

@@ -5783,7 +5783,7 @@ function applyInsertCommand(command, direction, resolveNodeElement) {
 var DEFAULT_LIMIT = 300;
 var DndCommandHistory = class {
   constructor(limit = DEFAULT_LIMIT) {
-    this.limit = limit;
+    __publicField(this, "limit", limit);
     __publicField(this, "undoStack", []);
     __publicField(this, "redoStack", []);
   }
@@ -9114,6 +9114,16 @@ function DndProvider({ children }) {
 // src/client/useArchieDevToolsRuntime.ts
 var import_react21 = require("react");
 
+// src/client/archieLocalInspectorEnv.ts
+var import_meta = {};
+function readArchieLocalInspectorFlag() {
+  try {
+    return import_meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/client/inject-inspector/archieOrigins.ts
 var ARCHIE_HOST_ORIGINS = [
   "https://app.dev.archie-platform.com",
@@ -9169,10 +9179,10 @@ function isLocalDev(referrer) {
   }
 }
 function injectInspector(opts = {}) {
-  if (typeof document === "undefined") return null;
+  if (typeof document === "undefined") return;
   const id = opts.id ?? DEFAULT_SCRIPT_ID;
   const existing = document.getElementById(id);
-  if (existing) return Promise.resolve(existing);
+  if (existing) return;
   const win = typeof window !== "undefined" ? window : null;
   if (win) {
     const referrer = typeof document.referrer === "string" ? document.referrer : "";
@@ -9210,36 +9220,23 @@ function injectInspector(opts = {}) {
       win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
     }
   }
-  const useRemote = opts.scriptSource !== "local";
-  if (useRemote) {
-    const script = document.createElement("script");
-    script.id = id;
-    script.src = getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
-    document.head.appendChild(script);
-    return null;
-  }
-  return import(
-    /* @vite-ignore */
-    "./inspector.js"
-  ).then((m) => {
-    try {
-      m.default();
-    } catch (err) {
+  const useLocal = opts.scriptSource === "local";
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const script = document.createElement("script");
+  script.id = id;
+  script.src = scriptUrl;
+  if (useLocal) {
+    script.onerror = () => {
       if (typeof console !== "undefined" && console.error) {
-        console.error("[Archie DevTools] Inspector failed to run:", err);
+        console.error(
+          "[Archie DevTools] Failed to load local inspector from",
+          scriptUrl,
+          "\u2014 is archieDevTools() registered in your vite.config?"
+        );
       }
-      throw err;
-    }
-    const script = document.createElement("script");
-    script.id = id;
-    document.head.appendChild(script);
-    return script;
-  }).catch((err) => {
-    if (typeof console !== "undefined" && console.error) {
-      console.error("[Archie DevTools] Failed to load inspector:", err);
-    }
-    throw err;
-  });
+    };
+  }
+  document.head.appendChild(script);
 }
 
 // src/client/route-listener/routeListener.ts
@@ -9348,9 +9345,9 @@ function useArchieDevToolsRuntime({
     }
     const unsubscribe = setupArchieRouteListener(router);
     if (inspector !== false) {
-      const isLocalHost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+      const useLocalInspector = readArchieLocalInspectorFlag();
       injectInspector({
-        scriptSource: isLocalHost ? "local" : "remote",
+        ...useLocalInspector ? { scriptSource: "local" } : { scriptSource: "remote" },
         ...inspectorOptionsRef.current
       });
     }

package/dist/client/client.mjs

@@ -1,6 +1,6 @@
-import {
-  __publicField
-} from "../chunk-QZ7TP4HQ.mjs";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
+var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
 
 // src/client/dnd/DndProvider.tsx
 import { useCallback as useCallback9, useEffect as useEffect13 } from "react";
@@ -5749,7 +5749,7 @@ function applyInsertCommand(command, direction, resolveNodeElement) {
 var DEFAULT_LIMIT = 300;
 var DndCommandHistory = class {
   constructor(limit = DEFAULT_LIMIT) {
-    this.limit = limit;
+    __publicField(this, "limit", limit);
     __publicField(this, "undoStack", []);
     __publicField(this, "redoStack", []);
   }
@@ -9080,6 +9080,15 @@ function DndProvider({ children }) {
 // src/client/useArchieDevToolsRuntime.ts
 import { useEffect as useEffect14, useRef as useRef11 } from "react";
 
+// src/client/archieLocalInspectorEnv.ts
+function readArchieLocalInspectorFlag() {
+  try {
+    return import.meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+  } catch {
+    return false;
+  }
+}
+
 // src/client/inject-inspector/archieOrigins.ts
 var ARCHIE_HOST_ORIGINS = [
   "https://app.dev.archie-platform.com",
@@ -9135,10 +9144,10 @@ function isLocalDev(referrer) {
   }
 }
 function injectInspector(opts = {}) {
-  if (typeof document === "undefined") return null;
+  if (typeof document === "undefined") return;
   const id = opts.id ?? DEFAULT_SCRIPT_ID;
   const existing = document.getElementById(id);
-  if (existing) return Promise.resolve(existing);
+  if (existing) return;
   const win = typeof window !== "undefined" ? window : null;
   if (win) {
     const referrer = typeof document.referrer === "string" ? document.referrer : "";
@@ -9176,36 +9185,23 @@ function injectInspector(opts = {}) {
       win["__ARCHIE_INSPECTOR_TARGET_ORIGIN__"] = target;
     }
   }
-  const useRemote = opts.scriptSource !== "local";
-  if (useRemote) {
-    const script = document.createElement("script");
-    script.id = id;
-    script.src = getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
-    document.head.appendChild(script);
-    return null;
-  }
-  return import(
-    /* @vite-ignore */
-    "./inspector.js"
-  ).then((m) => {
-    try {
-      m.default();
-    } catch (err) {
+  const useLocal = opts.scriptSource === "local";
+  const scriptUrl = useLocal ? opts.localScriptUrl ?? "/_archie/inspector.js" : getInspectorScriptUrl(opts.scriptUrl ?? REMOTE_INSPECTOR_SCRIPT_URL, true);
+  const script = document.createElement("script");
+  script.id = id;
+  script.src = scriptUrl;
+  if (useLocal) {
+    script.onerror = () => {
       if (typeof console !== "undefined" && console.error) {
-        console.error("[Archie DevTools] Inspector failed to run:", err);
+        console.error(
+          "[Archie DevTools] Failed to load local inspector from",
+          scriptUrl,
+          "\u2014 is archieDevTools() registered in your vite.config?"
+        );
       }
-      throw err;
-    }
-    const script = document.createElement("script");
-    script.id = id;
-    document.head.appendChild(script);
-    return script;
-  }).catch((err) => {
-    if (typeof console !== "undefined" && console.error) {
-      console.error("[Archie DevTools] Failed to load inspector:", err);
-    }
-    throw err;
-  });
+    };
+  }
+  document.head.appendChild(script);
 }
 
 // src/client/route-listener/routeListener.ts
@@ -9314,9 +9310,9 @@ function useArchieDevToolsRuntime({
     }
     const unsubscribe = setupArchieRouteListener(router);
     if (inspector !== false) {
-      const isLocalHost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+      const useLocalInspector = readArchieLocalInspectorFlag();
       injectInspector({
-        scriptSource: isLocalHost ? "local" : "remote",
+        ...useLocalInspector ? { scriptSource: "local" } : { scriptSource: "remote" },
         ...inspectorOptionsRef.current
       });
     }

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { ResolvedConfig } from 'vite';
+import { ResolvedConfig, ViteDevServer } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
@@ -15,12 +15,13 @@ interface ArchieDevToolsOptions {
 interface ArchieDevToolsPlugin {
     name: string;
     enforce?: 'pre' | 'post';
-    config?: () => {
-        resolve: {
-            dedupe: string[];
-        };
-    };
+    config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    configureServer?: (server: ViteDevServer) => void;
+    transform?: (code: string, id: string) => Promise<{
+        code: string;
+        map?: object | null;
+    } | null | undefined>;
     resolveId?: (id: string) => string | null;
     load?: (id: string) => string | null;
     api?: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedConfig } from 'vite';
+import { ResolvedConfig, ViteDevServer } from 'vite';
 
 interface ArchieDevToolsOptions {
     /**
@@ -15,12 +15,13 @@ interface ArchieDevToolsOptions {
 interface ArchieDevToolsPlugin {
     name: string;
     enforce?: 'pre' | 'post';
-    config?: () => {
-        resolve: {
-            dedupe: string[];
-        };
-    };
+    config?: () => object;
     configResolved?: (config: ResolvedConfig) => void;
+    configureServer?: (server: ViteDevServer) => void;
+    transform?: (code: string, id: string) => Promise<{
+        code: string;
+        map?: object | null;
+    } | null | undefined>;
     resolveId?: (id: string) => string | null;
     load?: (id: string) => string | null;
     api?: {

package/dist/index.js

@@ -28,11 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   archieDevTools: () => archieDevTools
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
+var import_node_fs = require("fs");
+var import_node_path = require("path");
 
 // src/client/dnd/virtual/dndScopeVirtualModule.ts
 var INTERNAL_DND_SCOPE_IMPORT_SOURCE = "virtual:archie-devtools/dnd-scope";
@@ -483,6 +485,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
 }
 
 // src/index.ts
+var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
@@ -491,7 +494,9 @@ function archieDevTools(options = {}) {
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
   };
+  let babelCore = null;
   let includeHostSourceRef = false;
+  const transformedByHook = /* @__PURE__ */ new Set();
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -499,12 +504,56 @@ function archieDevTools(options = {}) {
       return {
         resolve: {
           dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          exclude: ["@archie/devtools/client"]
         }
       };
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    configureServer(server) {
+      server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
+        const standaloneFile = (0, import_node_path.join)(__dirname, "../src/client/inject-inspector/inspector.standalone.js");
+        try {
+          const content = (0, import_node_fs.readFileSync)(standaloneFile, "utf-8");
+          res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(content);
+        } catch {
+          res.statusCode = 404;
+          res.end("Not found");
+        }
+      });
+    },
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
+      try {
+        const babel = babelCore ?? (babelCore = await import("@babel/core"));
+        const isTS = /\.tsx$/.test(id);
+        const result = await babel.transformAsync(code, {
+          filename: id,
+          plugins: [
+            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
+          ],
+          parserOpts: {
+            plugins: isTS ? ["jsx", "typescript"] : ["jsx"],
+            sourceType: "module"
+          },
+          sourceMaps: true,
+          configFile: false,
+          babelrc: false
+        });
+        if (!result?.code) return null;
+        transformedByHook.add(id);
+        return { code: result.code, map: result.map };
+      } catch (err) {
+        log("Babel transform failed for:", id, err);
+        return null;
+      }
+    },
     resolveId(id) {
       if (id === INTERNAL_DND_SCOPE_IMPORT_SOURCE) {
         return RESOLVED_DND_SCOPE_MODULE_ID;
@@ -519,14 +568,14 @@ function archieDevTools(options = {}) {
     },
     api: {
       reactBabel(babelOptions, context) {
-        if (!/node_modules/.test(context.id)) {
+        if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
               includeHostSourceRef
             })
           );
         }
-        if (dndPages.test(context.id)) {
+        if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);
           babelOptions.plugins.push(
             (babel) => babelPluginDndAuto(babel, {

package/dist/index.mjs

@@ -1,4 +1,13 @@
-import "./chunk-QZ7TP4HQ.mjs";
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import { readFileSync } from "fs";
+import { join } from "path";
 
 // src/client/dnd/virtual/dndScopeVirtualModule.ts
 var INTERNAL_DND_SCOPE_IMPORT_SOURCE = "virtual:archie-devtools/dnd-scope";
@@ -129,16 +138,16 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
   return {
     name: "babel-plugin-dnd-auto",
     visitor: {
-      ExportDefaultDeclaration(path, state) {
+      ExportDefaultDeclaration(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
         if (fileMatch && !fileMatch.test(filename)) return;
-        const { declaration } = path.node;
+        const { declaration } = path2.node;
         if (!t.isFunctionDeclaration(declaration)) return;
         const componentName = declaration.id?.name ?? "Component";
         const scopeCounter = { n: 0 };
         let didTransform = false;
-        path.traverse({
+        path2.traverse({
           ReturnStatement(retPath) {
             const fnParent = retPath.getFunctionParent();
             if (fnParent?.node !== declaration) return;
@@ -208,8 +217,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
-  function isMovable(path) {
-    const elPath = path.parentPath;
+  function isMovable(path2) {
+    const elPath = path2.parentPath;
     if (!elPath) return false;
     const parentEl = elPath.parentPath;
     if (!parentEl || !parentEl.isJSXElement()) return false;
@@ -218,8 +227,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     );
     return siblings.length >= 2;
   }
-  function getParentNodeId(path, file) {
-    const elPath = path.parentPath;
+  function getParentNodeId(path2, file) {
+    const elPath = path2.parentPath;
     if (!elPath) return null;
     let ancestor = elPath.parentPath;
     while (ancestor) {
@@ -323,10 +332,10 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   return {
     name: "babel-plugin-editor-meta",
     visitor: {
-      CallExpression(path, state) {
+      CallExpression(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
-        const callee = path.node.callee;
+        const callee = path2.node.callee;
         let isCreateElement = false;
         let isCloneElement = false;
         if (t.isIdentifier(callee, { name: "createElement" })) {
@@ -339,7 +348,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           isCloneElement = true;
         }
         if (!isCreateElement && !isCloneElement) return;
-        const args = path.node.arguments;
+        const args = path2.node.arguments;
         if (args.length < 2) return;
         if (isCreateElement && !t.isStringLiteral(args[0])) return;
         const propsArg = args[1];
@@ -364,37 +373,37 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           [t.objectExpression([t.spreadElement(propsArg)])]
         );
       },
-      JSXOpeningElement(path, state) {
+      JSXOpeningElement(path2, state) {
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
-        const existing = path.node.attributes.find(
+        const existing = path2.node.attributes.find(
           (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "__editorMeta" })
         );
         if (existing) return;
-        const loc = path.node.loc?.start;
+        const loc = path2.node.loc?.start;
         if (!loc) return;
         const root = state.file.opts.root ?? "";
         const file = root ? nodePath.relative(root, filename) : filename;
         const line = loc.line;
         const col = loc.column + 1;
-        const componentName = getJSXTagName(path.node);
+        const componentName = getJSXTagName(path2.node);
         if (!componentName) return;
-        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path.node.name);
+        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path2.node.name);
         const isHostElement = componentName[0] === componentName[0].toLowerCase();
-        sanitizeSpreadAttributes(path.node.attributes);
-        if (hasTruthyAsChildProp(path.node.attributes)) {
+        sanitizeSpreadAttributes(path2.node.attributes);
+        if (hasTruthyAsChildProp(path2.node.attributes)) {
           return;
         }
         let rootName = null;
-        if (t.isJSXIdentifier(path.node.name)) {
-          rootName = path.node.name.name;
-        } else if (t.isJSXMemberExpression(path.node.name)) {
-          let cur = path.node.name;
+        if (t.isJSXIdentifier(path2.node.name)) {
+          rootName = path2.node.name.name;
+        } else if (t.isJSXMemberExpression(path2.node.name)) {
+          let cur = path2.node.name;
           while (t.isJSXMemberExpression(cur)) cur = cur.object;
           if (t.isJSXIdentifier(cur)) rootName = cur.name;
         }
         if (rootName) {
-          const binding = path.scope.getBinding(rootName);
+          const binding = path2.scope.getBinding(rootName);
           if (binding) {
             const bp = binding.path;
             if (bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier()) {
@@ -405,14 +414,14 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
                 if (isPackageImport(src) && !isHostLikeMemberExpression) return;
               }
             }
-            const programScope = path.scope.getProgramParent();
+            const programScope = path2.scope.getProgramParent();
             if (binding.scope !== programScope) return;
           }
         }
         const nodeId = computeNodeId(file, line, col, componentName);
-        const movable = isMovable(path);
-        const parentNodeId = getParentNodeId(path, file);
-        const staticPropsObj = extractStaticProps(path.node.attributes);
+        const movable = isMovable(path2);
+        const parentNodeId = getParentNodeId(path2, file);
+        const staticPropsObj = extractStaticProps(path2.node.attributes);
         const metaObj = t.objectExpression([
           t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
           t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
@@ -430,14 +439,14 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           )
         ]);
         if (isHostElement && includeHostSourceRef) {
-          path.node.attributes.push(
+          path2.node.attributes.push(
             t.jsxAttribute(
               t.jsxIdentifier("data-archie-source-ref"),
               t.stringLiteral(`${file}::${line}::${col}`)
             )
           );
         }
-        path.node.attributes.push(
+        path2.node.attributes.push(
           t.jsxAttribute(
             t.jsxIdentifier("__editorMeta"),
             t.jsxExpressionContainer(metaObj)
@@ -449,6 +458,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
 }
 
 // src/index.ts
+var LOCAL_INSPECTOR_SERVE_PATH = "/_archie/inspector.js";
 function archieDevTools(options = {}) {
   const {
     debug = false,
@@ -457,7 +467,9 @@ function archieDevTools(options = {}) {
   const log = (...args) => {
     if (debug) console.log("[Archie DevTools]", ...args);
   };
+  let babelCore = null;
   let includeHostSourceRef = false;
+  const transformedByHook = /* @__PURE__ */ new Set();
   const plugin = {
     name: "vite-plugin-archie-devtools",
     enforce: "pre",
@@ -465,12 +477,56 @@ function archieDevTools(options = {}) {
       return {
         resolve: {
           dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          exclude: ["@archie/devtools/client"]
         }
       };
     },
     configResolved(config) {
       includeHostSourceRef = !config.isProduction;
     },
+    configureServer(server) {
+      server.middlewares.use(LOCAL_INSPECTOR_SERVE_PATH, (_req, res) => {
+        const standaloneFile = join(__dirname, "../src/client/inject-inspector/inspector.standalone.js");
+        try {
+          const content = readFileSync(standaloneFile, "utf-8");
+          res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+          res.setHeader("Cache-Control", "no-store");
+          res.end(content);
+        } catch {
+          res.statusCode = 404;
+          res.end("Not found");
+        }
+      });
+    },
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id) || /node_modules/.test(id)) return null;
+      try {
+        const babel = babelCore ?? (babelCore = await import("@babel/core"));
+        const isTS = /\.tsx$/.test(id);
+        const result = await babel.transformAsync(code, {
+          filename: id,
+          plugins: [
+            (b) => babelPluginEditorMeta(b, { includeHostSourceRef }),
+            ...dndPages.test(id) ? [(b) => babelPluginDndAuto(b, { importSource: INTERNAL_DND_SCOPE_IMPORT_SOURCE })] : []
+          ],
+          parserOpts: {
+            plugins: isTS ? ["jsx", "typescript"] : ["jsx"],
+            sourceType: "module"
+          },
+          sourceMaps: true,
+          configFile: false,
+          babelrc: false
+        });
+        if (!result?.code) return null;
+        transformedByHook.add(id);
+        return { code: result.code, map: result.map };
+      } catch (err) {
+        log("Babel transform failed for:", id, err);
+        return null;
+      }
+    },
     resolveId(id) {
       if (id === INTERNAL_DND_SCOPE_IMPORT_SOURCE) {
         return RESOLVED_DND_SCOPE_MODULE_ID;
@@ -485,14 +541,14 @@ function archieDevTools(options = {}) {
     },
     api: {
       reactBabel(babelOptions, context) {
-        if (!/node_modules/.test(context.id)) {
+        if (!/node_modules/.test(context.id) && !transformedByHook.has(context.id)) {
           babelOptions.plugins.push(
             (babel) => babelPluginEditorMeta(babel, {
               includeHostSourceRef
             })
           );
         }
-        if (dndPages.test(context.id)) {
+        if (dndPages.test(context.id) && !transformedByHook.has(context.id)) {
           log("Applying DnD transform to:", context.id);
           babelOptions.plugins.push(
             (babel) => babelPluginDndAuto(babel, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -47,25 +47,25 @@
   "author": "8base",
   "license": "UNLICENSED",
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/types": "^7.29.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@remix-run/router": "^1.0.0",
-    "@types/babel__core": "^7.20.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "happy-dom": "^20.5.0",
-    "lucide-react": "^0.577.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "vitest": "^2.1.9",
-    "zustand": "^5.0.11"
+    "@babel/core": "7.29.0",
+    "@babel/types": "7.29.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@remix-run/router": "1.23.2",
+    "@types/babel__core": "7.20.5",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "happy-dom": "20.8.9",
+    "lucide-react": "0.577.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-router-dom": "7.14.0",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vite": "7.3.2",
+    "vitest": "4.1.3",
+    "zustand": "5.0.12"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/dist/chunk-QZ7TP4HQ.mjs

@@ -1,7 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-export {
-  __publicField
-};