@archie/devtools 0.0.21 → 0.0.23

package/dist/inspector.standalone.js

@@ -95,6 +95,28 @@
       var FIBER_KEY_PREFIX = "__reactFiber$"
       var PROPS_KEY_PREFIX = "__reactProps$"
 
+      // ARCH-883 P0-1: babel-plugin-editor-meta.ts (TypeScript context) now
+      // emits __editorMeta as a zero-arg function, not the object literal
+      // directly, so React never writes it into the DOM. Every extraction
+      // site below must invoke the value when it is a function. Mirrors
+      // readEditorMetaValue in fiber-bridge.ts — if this changes, update
+      // that copy to maintain parity.
+      function resolveEditorMetaValue(value) {
+        if (typeof value === "function") {
+          // Each call re-evaluates the plugin-emitted `() => ({...})`
+          // closure and returns a FRESH object literal — never rely on
+          // meta object identity (`===`) across two separate reads, even
+          // within the same render (mirrors readEditorMetaValue in
+          // fiber-bridge.ts).
+          return value()
+        }
+        // Twin parity with fiber-bridge.ts's readEditorMetaValue: only
+        // undefined/null is a miss, not "any falsy value" — __editorMeta is
+        // always an object or a function in practice, so this is a no-op
+        // today, but keeps the two implementations provably equivalent.
+        return value === undefined || value === null ? null : value
+      }
+
       function hasEditorMetaInFiberChain(fiber) {
         var current = fiber
         while (current) {
@@ -195,7 +217,7 @@
         var fiber = getFiberFromElement(el)
         while (fiber) {
           if (fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
-            return fiber.memoizedProps.__editorMeta
+            return resolveEditorMetaValue(fiber.memoizedProps.__editorMeta)
           }
           fiber = fiber["return"]
         }
@@ -205,7 +227,7 @@
       function getDirectEditorMetaFromElement(el) {
         var fiber = getFiberFromElement(el)
         if (fiber && fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
-          return fiber.memoizedProps.__editorMeta
+          return resolveEditorMetaValue(fiber.memoizedProps.__editorMeta)
         }
         return null
       }
@@ -231,7 +253,7 @@
             break
           }
           if (current.memoizedProps && current.memoizedProps.__editorMeta) {
-            return current.memoizedProps.__editorMeta
+            return resolveEditorMetaValue(current.memoizedProps.__editorMeta)
           }
           current = current["return"]
         }
@@ -400,6 +422,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 +435,9 @@
           current !== document.documentElement &&
           !isInspectorElement(current)
         ) {
+          if (current.hasAttribute && current.hasAttribute("data-dnd-force-allow")) {
+            return current
+          }
           if (getExactSourceSignatureFromElement(current)) {
             return current
           }
@@ -855,9 +886,14 @@
       postMessageToParent({
         type: "INSPECTOR_SCRIPT_LOADED",
         timestamp: Date.now(),
-        version: "2.0.3",
+        version: "2.1.1",
         protocolVersion: 1,
         capabilities: {
+          // 2.1.1: function-valued __editorMeta props are invoked before any
+          // postMessage, so meta payloads stay structured-cloneable. Hosts can
+          // gate on this bit to confirm the deployed CDN artifact carries the
+          // fix (the 2.1.0 URL is overwritten in place on publish).
+          functionValuedEditorMeta: true,
           inspect: true,
           dndMove: true,
           dndResize: true,
@@ -865,6 +901,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 +943,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 +995,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 +1441,7 @@
         window._inspectorSelectedElement = null
         lastMultiSelectIntent = false
         isInspecting = true
+        publishSelectionToDesignMode()
 
         const applyCursorStyles = () => {
           if (document.body) {
@@ -1396,6 +1472,7 @@
           window.__ARCHIE_INSPECTOR__.selectedElement = null
         }
         lastMultiSelectIntent = false
+        publishSelectionToDesignMode()
         try {
           safeQuerySelectorAll('[data-inspector-editing="true"]').forEach(
             function (el) {
@@ -1422,6 +1499,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 +1522,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" })
@@ -1948,6 +2047,19 @@
             : null,
           attributes: attributes,
           inspectorSource: inspectorInfo,
+          // ARCH-883 F1 — FORWARD THE META WHOLE. The plugin now also emits
+          // `slot`, `propBindings` and `propOwner` (SDD §2.3/§2.6) and the editor
+          // host routes edits off them; field-picking here would silently strip
+          // them and turn every kit-internal edit into a gap. `inspectorSource`
+          // above is the deliberately narrow structure — this one is not.
+          //
+          // Unlike P0-1 this needs no deploy ordering: the extra keys are plain
+          // data, so an already-published standalone.js forwards them unchanged
+          // through `postMessage`'s structured clone. Whether a given PAGE has
+          // them depends on the plugin that built it, which the host resolves via
+          // `deriveEditorCapabilities(kitRuntimeVersion)` (SDD §2.5) — never from
+          // this script's version. The slot string is opaque here; validating it
+          // against kit-runtime's `slot-vocabulary` is the host's job.
           editorMeta: editorMeta ? editorMeta.meta : null,
           computedStyles: {
             display: computed.display,
@@ -2399,6 +2511,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 +3212,7 @@
           }
 
           updateSharedHighlights()
+          publishSelectionToDesignMode()
           postMessageToParent({
             type: "ELEMENT_REMOVED",
             requestId: event.data.requestId,
@@ -3344,6 +3467,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 +3606,7 @@
             type: "ELEMENT_SELECTED",
             metadata: metadataPayload,
           })
+          publishSelectionToDesignMode()
           // Keep inspector active - don't set isInspecting = false
           // User can continue navigating between elements
         }
@@ -3515,6 +3653,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.21",
+  "version": "0.0.23",
   "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"
   },