@archie/devtools 0.0.20 → 0.0.22

package/dist/index.js

@@ -517,16 +517,28 @@ function archieDevTools(options = {}) {
     },
     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");
+        const candidates = [
+          (0, import_node_path.join)(__dirname, "client/inject-inspector/inspector.standalone.js"),
+          (0, import_node_path.join)(__dirname, "../src/client/inject-inspector/inspector.standalone.js")
+        ];
+        for (const candidate of candidates) {
+          try {
+            const content = (0, import_node_fs.readFileSync)(candidate, "utf-8");
+            res.setHeader(
+              "Content-Type",
+              "application/javascript; charset=utf-8"
+            );
+            res.setHeader("Cache-Control", "no-store");
+            res.end(content);
+            return;
+          } catch {
+          }
         }
+        server.config.logger.warn(
+          `[archie-devtools] inspector.standalone.js not found at ${LOCAL_INSPECTOR_SERVE_PATH}. Tried: ${candidates.join(", ")}. Did you build with \`pnpm build:local\`?`
+        );
+        res.statusCode = 404;
+        res.end("Not found");
       });
     },
     async transform(code, id) {

package/dist/index.mjs

@@ -489,16 +489,28 @@ function archieDevTools(options = {}) {
     },
     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");
+        const candidates = [
+          join(__dirname, "client/inject-inspector/inspector.standalone.js"),
+          join(__dirname, "../src/client/inject-inspector/inspector.standalone.js")
+        ];
+        for (const candidate of candidates) {
+          try {
+            const content = readFileSync(candidate, "utf-8");
+            res.setHeader(
+              "Content-Type",
+              "application/javascript; charset=utf-8"
+            );
+            res.setHeader("Cache-Control", "no-store");
+            res.end(content);
+            return;
+          } catch {
+          }
         }
+        server.config.logger.warn(
+          `[archie-devtools] inspector.standalone.js not found at ${LOCAL_INSPECTOR_SERVE_PATH}. Tried: ${candidates.join(", ")}. Did you build with \`pnpm build:local\`?`
+        );
+        res.statusCode = 404;
+        res.end("Not found");
       });
     },
     async transform(code, id) {

package/dist/inspector.standalone.js

@@ -400,6 +400,12 @@
           return normalizedTarget
         }
 
+        // Palette-inserted elements have no React fiber and no source ref, so
+        // the source-signature walk below would skip past them and select the
+        // nearest ancestor with a source ref (the original <section>/<main>).
+        // We tag them with `data-dnd-force-allow` precisely to claim their
+        // own identity for selection/arrange; honor that tag here so a click
+        // on an inserted Card / Hero / Table targets the insert itself.
         var current = normalizedTarget
         while (
           current &&
@@ -407,6 +413,9 @@
           current !== document.documentElement &&
           !isInspectorElement(current)
         ) {
+          if (current.hasAttribute && current.hasAttribute("data-dnd-force-allow")) {
+            return current
+          }
           if (getExactSourceSignatureFromElement(current)) {
             return current
           }
@@ -855,7 +864,7 @@
       postMessageToParent({
         type: "INSPECTOR_SCRIPT_LOADED",
         timestamp: Date.now(),
-        version: "2.0.3",
+        version: "2.1.0",
         protocolVersion: 1,
         capabilities: {
           inspect: true,
@@ -865,6 +874,11 @@
           hostControlledHistory: true,
           arrangeStructuredHistory: true,
           arrangeStrongNodeIdentity: true,
+          // Unified mode: SET_EDITOR_MODE "inspect" also enables the arrange
+          // (design) runtime — selection and drag/resize coexist. Hosts MUST
+          // feature-detect on this flag: a frozen 2.0.x inspector disables
+          // design mode on "inspect" and needs the legacy "design" mode.
+          unifiedInspectArrange: true,
         },
       })
 
@@ -902,6 +916,35 @@
       var inspectorCleanupMap = new WeakMap()
       var BADGE_UPDATE_DELAY_MS = 50
 
+      /**
+       * Bridge to design-mode store: publish current inspector selection as
+       * DND nodeIds so arrange overlay knows when to show resize handles +
+       * enable drag (single-select only). If the design-mode bundle hasn't
+       * mounted yet, buffer the latest selection for it to drain on mount.
+       */
+      function publishSelectionToDesignMode() {
+        var ids = []
+        for (var i = 0; i < selectedElements.length; i += 1) {
+          var el = selectedElements[i]
+          if (!el || typeof el.getAttribute !== "function") continue
+          var nodeId = el.getAttribute("data-dnd-node-id")
+          if (nodeId) ids.push(nodeId)
+        }
+        var bridge = window.__ARCHIE_DESIGN_MODE__
+        if (bridge && typeof bridge.setInspectorSelection === "function") {
+          try {
+            bridge.setInspectorSelection(ids)
+          } catch (err) {
+            // Defensive: never let a bridge error break inspector selection.
+            if (window._inspectorDebug) {
+              console.warn("[archie-inspector] design-mode bridge error", err)
+            }
+          }
+        } else {
+          window.__ARCHIE_DESIGN_MODE_PENDING__ = ids
+        }
+      }
+
       if (!window._inspectorSelectedElement) {
         window._inspectorSelectedElement = null
       }
@@ -925,7 +968,12 @@
           element === overlay ||
           element === selectedElementBadge ||
           element.id === "inspector-ping-effect" ||
-          (element.closest && element.closest("[data-inspector-badge]"))
+          (element.closest && element.closest("[data-inspector-badge]")) ||
+          // Design-mode (arrange) overlay elements: HitArea, resize handles,
+          // drop-line, etc. These belong to the unified visual editor and must
+          // pass mousedown/click events through to React (dnd-kit) instead of
+          // being treated as inspect targets.
+          (element.closest && element.closest("[data-design-mode-ui]"))
         )
       }
 
@@ -1366,6 +1414,7 @@
         window._inspectorSelectedElement = null
         lastMultiSelectIntent = false
         isInspecting = true
+        publishSelectionToDesignMode()
 
         const applyCursorStyles = () => {
           if (document.body) {
@@ -1396,6 +1445,7 @@
           window.__ARCHIE_INSPECTOR__.selectedElement = null
         }
         lastMultiSelectIntent = false
+        publishSelectionToDesignMode()
         try {
           safeQuerySelectorAll('[data-inspector-editing="true"]').forEach(
             function (el) {
@@ -1422,6 +1472,12 @@
         )
       }
 
+      // Last mode explicitly commanded by the host via SET_EDITOR_MODE. Used
+      // to (a) make repeated "inspect" commands selection-preserving no-ops
+      // and (b) suppress design-mode runtime echoes that would otherwise be
+      // misread by the host as a stale mode (see runtimeBridgeHandler).
+      var hostCommandedEditorMode = "off"
+
       function setEditorModeFromHost(mode, options) {
         var historyMode =
           options && options.hostControlledHistory ? "host" : "local"
@@ -1439,14 +1495,30 @@
           historyMode: historyMode,
         })
 
+        hostCommandedEditorMode = mode === "inspect" || mode === "design" ? mode : "off"
+
         if (mode === "inspect") {
-          dispatchHostCommand({ type: "set-design-mode", enabled: false })
+          // Unified mode: visual editor (inspect) + arrange (design) coexist.
+          // The arrange overlay stays passive until the inspector publishes a
+          // single-element selection (via publishSelectionToDesignMode), at
+          // which point it lights up the resize/drag controls on that element.
+          dispatchHostCommand({ type: "set-design-mode", enabled: true })
+          if (isInspecting) {
+            // Recovery re-send (focus/visibility/online): the session is
+            // already live. Activating again would wipe the user's current
+            // selection and retract the arrange handles mid-session — echo
+            // confirmation only.
+            postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "inspect" })
+            return
+          }
           activateInspectionMode()
           postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "inspect" })
           return
         }
 
         if (mode === "design") {
+          // Legacy "design-only" mode kept for backwards compatibility with
+          // hosts that haven't migrated to the unified flow.
           deactivateInspectionMode({ notifyParent: false })
           dispatchHostCommand({ type: "set-design-mode", enabled: true })
           postMessageToParent({ type: "EDITOR_MODE_CHANGED", mode: "design" })
@@ -2399,6 +2471,16 @@
         }
 
         if (detail.type === "design-mode-changed") {
+          // In unified inspect the arrange overlay flips its internal
+          // design-mode store as a side effect ("design" on mount, "off" on
+          // teardown). Forwarding those flips while the host commanded
+          // "inspect" makes the host see a stale mode and re-send
+          // SET_EDITOR_MODE, which wipes the in-iframe selection. The host
+          // only needs runtime-originated mode changes in the legacy
+          // design-only flow.
+          if (hostCommandedEditorMode === "inspect") {
+            return
+          }
           postMessageToParent({
             type: "EDITOR_MODE_CHANGED",
             mode: detail.mode || "off",
@@ -3090,6 +3172,7 @@
           }
 
           updateSharedHighlights()
+          publishSelectionToDesignMode()
           postMessageToParent({
             type: "ELEMENT_REMOVED",
             requestId: event.data.requestId,
@@ -3344,6 +3427,20 @@
       const inspectorClickHandler = function (e) {
         if (!isInspecting) return
 
+        // If the event originated on a design-mode (arrange) overlay element —
+        // HitArea, resize handle, drop-line — let it propagate untouched so
+        // dnd-kit can pick it up. Without this early-return, getElementFromPoint
+        // below would resolve to the real element underneath the overlay and
+        // the inspector would swallow the pointerdown via stopImmediatePropagation,
+        // breaking arrange drag/resize on the selected element.
+        if (
+          e.target &&
+          typeof e.target.closest === "function" &&
+          e.target.closest("[data-design-mode-ui]")
+        ) {
+          return
+        }
+
         // Prefer e.target: browser already set it to the element under the pointer (e.g. input).
         // getElementFromPoint is fallback when overlay or stacking returns something else.
         let target = null
@@ -3469,6 +3566,7 @@
             type: "ELEMENT_SELECTED",
             metadata: metadataPayload,
           })
+          publishSelectionToDesignMode()
           // Keep inspector active - don't set isInspecting = false
           // User can continue navigating between elements
         }
@@ -3515,6 +3613,7 @@
           if (window.__ARCHIE_INSPECTOR__)
             window.__ARCHIE_INSPECTOR__.selectedElement = null
           updateSharedHighlights()
+          publishSelectionToDesignMode()
           postMessageToParent({ type: "INSPECTION_CANCELLED" })
         }
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -29,9 +29,8 @@
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
-    "inspector:local": "node scripts/generate-inspector-local.js",
     "build": "tsup",
-    "dev": "tsup --watch",
+    "build:local": "ARCHIE_INSPECTOR_INCLUDE_STANDALONE=1 tsup",
     "typecheck": "tsc --noEmit",
     "release": "node publish.js"
   },