@archie/devtools 0.0.35 → 0.0.36

package/dist/client/client.js

@@ -4085,6 +4085,46 @@ function DragOverlay2() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragOverlay, { dropAnimation: null, children: renderContent() });
 }
 
+// src/client/dnd/design-mode/debug-trace.ts
+var MAX_ENTRIES = 800;
+function traceWindow() {
+  return typeof window === "undefined" ? null : window;
+}
+function isVeDebugEnabled() {
+  const w = traceWindow();
+  if (!w) return false;
+  if (w.__ARCHIE_VE_DEBUG__ === true || w._inspectorDebug === true) return true;
+  try {
+    return w.localStorage?.getItem("ARCHIE_VE_DEBUG") === "1";
+  } catch {
+    return false;
+  }
+}
+function veTrace(layer, event, data) {
+  const w = traceWindow();
+  if (!w) return;
+  let resolved;
+  if (typeof data === "function") {
+    try {
+      resolved = data();
+    } catch (error) {
+      resolved = { __traceDataError: String(error) };
+    }
+  } else {
+    resolved = data;
+  }
+  const entry = { t: Date.now(), layer, event, ...resolved === void 0 ? {} : { data: resolved } };
+  const buffer = w.__ARCHIE_VE_TRACE__ ?? (w.__ARCHIE_VE_TRACE__ = []);
+  buffer.push(entry);
+  if (buffer.length > MAX_ENTRIES) buffer.splice(0, buffer.length - MAX_ENTRIES);
+  if (!w.__ARCHIE_VE_TRACE_DUMP__) {
+    w.__ARCHIE_VE_TRACE_DUMP__ = () => JSON.stringify(w.__ARCHIE_VE_TRACE__ ?? []);
+  }
+  if (isVeDebugEnabled()) {
+    console.log(`[archie-ve:${layer}]`, event, resolved ?? "");
+  }
+}
+
 // src/client/dnd/design-mode/host-bridge.ts
 var DEFAULT_INSPECTOR_THEME = {
   accent: "#8b5cf6",
@@ -4094,8 +4134,80 @@ var DEFAULT_INSPECTOR_THEME = {
 };
 var HOST_COMMAND_EVENT = "archie:editor-host-command";
 var DND_RUNTIME_EVENT = "archie:dnd-runtime-event";
+function summarizeIdentity(identity2) {
+  if (!identity2) return null;
+  return {
+    nodeId: identity2.nodeId,
+    nodeKey: identity2.nodeKey,
+    ref: identity2.inspectorRef ? `${identity2.inspectorRef.relativePath}:${identity2.inspectorRef.line}:${identity2.inspectorRef.column}` : null,
+    ...identity2.effectiveNodeId && identity2.effectiveNodeId !== identity2.nodeId ? { effectiveNodeId: identity2.effectiveNodeId } : {}
+  };
+}
+function summarizeRuntimeEvent(detail) {
+  switch (detail.type) {
+    case "element-moved":
+      return {
+        operationId: detail.operationId,
+        commandType: detail.commandType,
+        selected: summarizeIdentity(detail.selected),
+        anchor: summarizeIdentity(detail.anchor),
+        container: summarizeIdentity(detail.container),
+        beforeSibling: summarizeIdentity(detail.beforeSibling),
+        sourceContainer: summarizeIdentity(detail.sourceContainer),
+        diagnostics: detail.diagnostics ?? null
+      };
+    case "element-resized":
+      return {
+        operationId: detail.operationId,
+        selected: summarizeIdentity(detail.selected),
+        anchor: summarizeIdentity(detail.anchor),
+        resize: {
+          mode: detail.resize.mode,
+          selectedNodeKey: detail.resize.selectedNodeKey,
+          targetNodeKey: detail.resize.targetNodeKey,
+          targetNodeId: detail.resize.targetNodeId,
+          width: detail.resize.width,
+          height: detail.resize.height
+        }
+      };
+    case "element-inserted":
+      return {
+        operationId: detail.operationId,
+        nodeId: detail.nodeId,
+        nodeKey: detail.nodeKey,
+        displayName: detail.displayName,
+        container: summarizeIdentity(detail.container),
+        index: detail.index,
+        beforeSibling: summarizeIdentity(detail.beforeSibling),
+        hasTsxCode: !!detail.tsxCode,
+        htmlLength: detail.html?.length ?? 0
+      };
+    case "arrange-session-changed":
+      return {
+        mode: detail.session.mode,
+        canUndo: detail.session.canUndo,
+        changeCount: detail.session.changes.length,
+        changes: detail.session.changes.map((c) => ({
+          id: c.id,
+          kind: c.kind,
+          operationId: c.operationId,
+          nodeKey: c.nodeKey,
+          ref: c.inspectorRef ? `${c.inspectorRef.relativePath}:${c.inspectorRef.line}:${c.inspectorRef.column}` : null
+        }))
+      };
+    case "arrange-undo-applied":
+      return { success: detail.success, updatedAt: detail.updatedAt };
+    case "design-mode-changed":
+      return { mode: detail.mode };
+    case "design-mode-error":
+      return { error: detail.error };
+    default:
+      return null;
+  }
+}
 function dispatchRuntimeEvent(detail) {
   if (typeof window === "undefined") return;
+  veTrace("dnd", `runtime-event:${detail.type}`, () => summarizeRuntimeEvent(detail));
   window.dispatchEvent(new CustomEvent(DND_RUNTIME_EVENT, { detail }));
 }
 function resolveRowBinding(el) {
@@ -8196,8 +8308,23 @@ function useDragLifecycle({
     if (refs.resizeSessionRef.current || Date.now() < refs.resizeDragBlockUntilRef.current) return;
     const activeId = active.id;
     const found = refs.draggableNodeMapRef.current.get(activeId) ?? refs.nodeMapRef.current.get(activeId);
-    if (!found) return;
-    if (!isEligibleForDrag(found)) return;
+    if (!found) {
+      veTrace("dnd", "drag:start-rejected", { nodeId: activeId, reason: "not-scanned" });
+      return;
+    }
+    if (!isEligibleForDrag(found)) {
+      veTrace("dnd", "drag:start-rejected", {
+        nodeId: activeId,
+        reason: "not-eligible",
+        eligibilitySource: found.eligibilitySource ?? "editor-meta",
+        draggable: found.draggable
+      });
+      return;
+    }
+    veTrace("dnd", "drag:start", {
+      nodeId: activeId,
+      eligibilitySource: found.eligibilitySource ?? "editor-meta"
+    });
     refs.lastIntentRef.current = null;
     refs.visualIntentRef.current = null;
     refs.targetPlaneRef.current = "lane";
@@ -8256,6 +8383,16 @@ function useDragLifecycle({
     const pointer = refs.mouseRef.current;
     const safeZone = refs.safeZoneRef.current;
     const blockedByGuard = isPointerOutsideSafeZone(pointer.x, pointer.y, safeZone) || isPointerInHardPageEdgeZone(pointer.x, pointer.y);
+    veTrace("dnd", "drag:end", () => ({
+      selectedNodeId,
+      anchorNodeId,
+      blockedByGuard,
+      intent: refs.visualIntentRef.current ? {
+        mode: refs.visualIntentRef.current.mode,
+        containerId: refs.visualIntentRef.current.containerId,
+        index: refs.visualIntentRef.current.index
+      } : null
+    }));
     let sourcePos = refs.dragStartPositionRef.current ?? getCurrentCommitPlacement(anchorNodeId, refs.sourceContainerIdRef.current);
     if (!sourcePos && activeEl && activeEl.parentElement) {
       const parentEl = activeEl.parentElement;
@@ -8354,6 +8491,7 @@ function useDragLifecycle({
     syncHistoryAvailability();
   }, [applyCommand, classifyCommandType, clearDragState, getCurrentCommitPlacement, recordMoveChange, resolveNodeElement, selectElement, syncHistoryAvailability]);
   const handleDragCancel = (0, import_react13.useCallback)(() => {
+    veTrace("dnd", "drag:cancel");
     clearDragState();
   }, [clearDragState]);
   return { activeDrag, handleDragStart, handleDragEnd, handleDragCancel };
@@ -8415,6 +8553,17 @@ function useResizeSession({
       beforeStyles,
       hasMoved: false
     };
+    veTrace("dnd", "resize:start", {
+      dir,
+      mode,
+      selectedNodeId: nodeId,
+      selectedNodeKey,
+      targetNodeId,
+      targetNodeKey,
+      retargeted: resizeTargetEl !== selectedEl,
+      startW: Math.round(rect.width),
+      startH: Math.round(rect.height)
+    });
     pointerTarget?.setPointerCapture?.(e.pointerId);
   }, []);
   const handleResizePointerMove = (0, import_react14.useCallback)((e) => {
@@ -8477,6 +8626,7 @@ function useResizeSession({
     const afterStyles = readStyleSnapshot(element, ["width", "height", "grid-column", "grid-column-end", "grid-row", "grid-row-end"]);
     const unchanged = mode === "grid-span" ? afterColSpan === startColSpan && afterRowSpan === startRowSpan : afterW === Math.round(startW) && afterH === Math.round(startH);
     if (unchanged) {
+      veTrace("dnd", "resize:noop", { selectedNodeId, targetNodeId });
       syncHistoryAvailability();
       return;
     }
@@ -8538,6 +8688,10 @@ function useResizeSession({
       const session = refs.resizeSessionRef.current;
       if (!session || session.pointerId !== e.pointerId) return;
       if (session.pointerTarget?.hasPointerCapture?.(e.pointerId)) session.pointerTarget.releasePointerCapture(e.pointerId);
+      veTrace("dnd", "resize:cancel", {
+        selectedNodeId: session.selectedNodeId,
+        targetNodeId: session.targetNodeId
+      });
       for (const [prop, value] of Object.entries(session.beforeStyles)) {
         if (value === null) session.element.style.removeProperty(prop);
         else session.element.style.setProperty(prop, value);
@@ -9328,6 +9482,13 @@ function DndProvider({ children }) {
     const handleHostCommand = (event) => {
       const detail = event.detail;
       if (!detail || typeof detail !== "object") return;
+      if (detail.type !== "external-drag-move") {
+        veTrace(
+          "dnd",
+          `host-command:${detail.type}`,
+          () => detail.type === "external-drag-start" ? { displayName: detail.component.displayName, category: detail.component.category } : detail.type === "sync-editor-state" ? { mode: detail.mode ?? null, historyMode: detail.historyMode ?? null } : detail.type === "set-design-mode" ? { enabled: detail.enabled } : void 0
+        );
+      }
       switch (detail.type) {
         case "sync-editor-state":
           if (detail.mode === "design") {

package/dist/client/client.mjs

@@ -4050,6 +4050,46 @@ function DragOverlay2() {
   return /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: renderContent() });
 }
 
+// src/client/dnd/design-mode/debug-trace.ts
+var MAX_ENTRIES = 800;
+function traceWindow() {
+  return typeof window === "undefined" ? null : window;
+}
+function isVeDebugEnabled() {
+  const w = traceWindow();
+  if (!w) return false;
+  if (w.__ARCHIE_VE_DEBUG__ === true || w._inspectorDebug === true) return true;
+  try {
+    return w.localStorage?.getItem("ARCHIE_VE_DEBUG") === "1";
+  } catch {
+    return false;
+  }
+}
+function veTrace(layer, event, data) {
+  const w = traceWindow();
+  if (!w) return;
+  let resolved;
+  if (typeof data === "function") {
+    try {
+      resolved = data();
+    } catch (error) {
+      resolved = { __traceDataError: String(error) };
+    }
+  } else {
+    resolved = data;
+  }
+  const entry = { t: Date.now(), layer, event, ...resolved === void 0 ? {} : { data: resolved } };
+  const buffer = w.__ARCHIE_VE_TRACE__ ?? (w.__ARCHIE_VE_TRACE__ = []);
+  buffer.push(entry);
+  if (buffer.length > MAX_ENTRIES) buffer.splice(0, buffer.length - MAX_ENTRIES);
+  if (!w.__ARCHIE_VE_TRACE_DUMP__) {
+    w.__ARCHIE_VE_TRACE_DUMP__ = () => JSON.stringify(w.__ARCHIE_VE_TRACE__ ?? []);
+  }
+  if (isVeDebugEnabled()) {
+    console.log(`[archie-ve:${layer}]`, event, resolved ?? "");
+  }
+}
+
 // src/client/dnd/design-mode/host-bridge.ts
 var DEFAULT_INSPECTOR_THEME = {
   accent: "#8b5cf6",
@@ -4059,8 +4099,80 @@ var DEFAULT_INSPECTOR_THEME = {
 };
 var HOST_COMMAND_EVENT = "archie:editor-host-command";
 var DND_RUNTIME_EVENT = "archie:dnd-runtime-event";
+function summarizeIdentity(identity2) {
+  if (!identity2) return null;
+  return {
+    nodeId: identity2.nodeId,
+    nodeKey: identity2.nodeKey,
+    ref: identity2.inspectorRef ? `${identity2.inspectorRef.relativePath}:${identity2.inspectorRef.line}:${identity2.inspectorRef.column}` : null,
+    ...identity2.effectiveNodeId && identity2.effectiveNodeId !== identity2.nodeId ? { effectiveNodeId: identity2.effectiveNodeId } : {}
+  };
+}
+function summarizeRuntimeEvent(detail) {
+  switch (detail.type) {
+    case "element-moved":
+      return {
+        operationId: detail.operationId,
+        commandType: detail.commandType,
+        selected: summarizeIdentity(detail.selected),
+        anchor: summarizeIdentity(detail.anchor),
+        container: summarizeIdentity(detail.container),
+        beforeSibling: summarizeIdentity(detail.beforeSibling),
+        sourceContainer: summarizeIdentity(detail.sourceContainer),
+        diagnostics: detail.diagnostics ?? null
+      };
+    case "element-resized":
+      return {
+        operationId: detail.operationId,
+        selected: summarizeIdentity(detail.selected),
+        anchor: summarizeIdentity(detail.anchor),
+        resize: {
+          mode: detail.resize.mode,
+          selectedNodeKey: detail.resize.selectedNodeKey,
+          targetNodeKey: detail.resize.targetNodeKey,
+          targetNodeId: detail.resize.targetNodeId,
+          width: detail.resize.width,
+          height: detail.resize.height
+        }
+      };
+    case "element-inserted":
+      return {
+        operationId: detail.operationId,
+        nodeId: detail.nodeId,
+        nodeKey: detail.nodeKey,
+        displayName: detail.displayName,
+        container: summarizeIdentity(detail.container),
+        index: detail.index,
+        beforeSibling: summarizeIdentity(detail.beforeSibling),
+        hasTsxCode: !!detail.tsxCode,
+        htmlLength: detail.html?.length ?? 0
+      };
+    case "arrange-session-changed":
+      return {
+        mode: detail.session.mode,
+        canUndo: detail.session.canUndo,
+        changeCount: detail.session.changes.length,
+        changes: detail.session.changes.map((c) => ({
+          id: c.id,
+          kind: c.kind,
+          operationId: c.operationId,
+          nodeKey: c.nodeKey,
+          ref: c.inspectorRef ? `${c.inspectorRef.relativePath}:${c.inspectorRef.line}:${c.inspectorRef.column}` : null
+        }))
+      };
+    case "arrange-undo-applied":
+      return { success: detail.success, updatedAt: detail.updatedAt };
+    case "design-mode-changed":
+      return { mode: detail.mode };
+    case "design-mode-error":
+      return { error: detail.error };
+    default:
+      return null;
+  }
+}
 function dispatchRuntimeEvent(detail) {
   if (typeof window === "undefined") return;
+  veTrace("dnd", `runtime-event:${detail.type}`, () => summarizeRuntimeEvent(detail));
   window.dispatchEvent(new CustomEvent(DND_RUNTIME_EVENT, { detail }));
 }
 function resolveRowBinding(el) {
@@ -8161,8 +8273,23 @@ function useDragLifecycle({
     if (refs.resizeSessionRef.current || Date.now() < refs.resizeDragBlockUntilRef.current) return;
     const activeId = active.id;
     const found = refs.draggableNodeMapRef.current.get(activeId) ?? refs.nodeMapRef.current.get(activeId);
-    if (!found) return;
-    if (!isEligibleForDrag(found)) return;
+    if (!found) {
+      veTrace("dnd", "drag:start-rejected", { nodeId: activeId, reason: "not-scanned" });
+      return;
+    }
+    if (!isEligibleForDrag(found)) {
+      veTrace("dnd", "drag:start-rejected", {
+        nodeId: activeId,
+        reason: "not-eligible",
+        eligibilitySource: found.eligibilitySource ?? "editor-meta",
+        draggable: found.draggable
+      });
+      return;
+    }
+    veTrace("dnd", "drag:start", {
+      nodeId: activeId,
+      eligibilitySource: found.eligibilitySource ?? "editor-meta"
+    });
     refs.lastIntentRef.current = null;
     refs.visualIntentRef.current = null;
     refs.targetPlaneRef.current = "lane";
@@ -8221,6 +8348,16 @@ function useDragLifecycle({
     const pointer = refs.mouseRef.current;
     const safeZone = refs.safeZoneRef.current;
     const blockedByGuard = isPointerOutsideSafeZone(pointer.x, pointer.y, safeZone) || isPointerInHardPageEdgeZone(pointer.x, pointer.y);
+    veTrace("dnd", "drag:end", () => ({
+      selectedNodeId,
+      anchorNodeId,
+      blockedByGuard,
+      intent: refs.visualIntentRef.current ? {
+        mode: refs.visualIntentRef.current.mode,
+        containerId: refs.visualIntentRef.current.containerId,
+        index: refs.visualIntentRef.current.index
+      } : null
+    }));
     let sourcePos = refs.dragStartPositionRef.current ?? getCurrentCommitPlacement(anchorNodeId, refs.sourceContainerIdRef.current);
     if (!sourcePos && activeEl && activeEl.parentElement) {
       const parentEl = activeEl.parentElement;
@@ -8319,6 +8456,7 @@ function useDragLifecycle({
     syncHistoryAvailability();
   }, [applyCommand, classifyCommandType, clearDragState, getCurrentCommitPlacement, recordMoveChange, resolveNodeElement, selectElement, syncHistoryAvailability]);
   const handleDragCancel = useCallback6(() => {
+    veTrace("dnd", "drag:cancel");
     clearDragState();
   }, [clearDragState]);
   return { activeDrag, handleDragStart, handleDragEnd, handleDragCancel };
@@ -8380,6 +8518,17 @@ function useResizeSession({
       beforeStyles,
       hasMoved: false
     };
+    veTrace("dnd", "resize:start", {
+      dir,
+      mode,
+      selectedNodeId: nodeId,
+      selectedNodeKey,
+      targetNodeId,
+      targetNodeKey,
+      retargeted: resizeTargetEl !== selectedEl,
+      startW: Math.round(rect.width),
+      startH: Math.round(rect.height)
+    });
     pointerTarget?.setPointerCapture?.(e.pointerId);
   }, []);
   const handleResizePointerMove = useCallback7((e) => {
@@ -8442,6 +8591,7 @@ function useResizeSession({
     const afterStyles = readStyleSnapshot(element, ["width", "height", "grid-column", "grid-column-end", "grid-row", "grid-row-end"]);
     const unchanged = mode === "grid-span" ? afterColSpan === startColSpan && afterRowSpan === startRowSpan : afterW === Math.round(startW) && afterH === Math.round(startH);
     if (unchanged) {
+      veTrace("dnd", "resize:noop", { selectedNodeId, targetNodeId });
       syncHistoryAvailability();
       return;
     }
@@ -8503,6 +8653,10 @@ function useResizeSession({
       const session = refs.resizeSessionRef.current;
       if (!session || session.pointerId !== e.pointerId) return;
       if (session.pointerTarget?.hasPointerCapture?.(e.pointerId)) session.pointerTarget.releasePointerCapture(e.pointerId);
+      veTrace("dnd", "resize:cancel", {
+        selectedNodeId: session.selectedNodeId,
+        targetNodeId: session.targetNodeId
+      });
       for (const [prop, value] of Object.entries(session.beforeStyles)) {
         if (value === null) session.element.style.removeProperty(prop);
         else session.element.style.setProperty(prop, value);
@@ -9293,6 +9447,13 @@ function DndProvider({ children }) {
     const handleHostCommand = (event) => {
       const detail = event.detail;
       if (!detail || typeof detail !== "object") return;
+      if (detail.type !== "external-drag-move") {
+        veTrace(
+          "dnd",
+          `host-command:${detail.type}`,
+          () => detail.type === "external-drag-start" ? { displayName: detail.component.displayName, category: detail.component.category } : detail.type === "sync-editor-state" ? { mode: detail.mode ?? null, historyMode: detail.historyMode ?? null } : detail.type === "set-design-mode" ? { enabled: detail.enabled } : void 0
+        );
+      }
       switch (detail.type) {
         case "sync-editor-state":
           if (detail.mode === "design") {

package/dist/inspector.standalone.js

@@ -1258,6 +1258,11 @@
         // make this redundant for new indexes, but an already-built index may
         // still hold a stale group.)
         if (isInsertedSubtreeElement(inspectTarget)) {
+          veTrace("shared-targets", {
+            via: "inserted-subtree",
+            count: 1,
+            nodeId: inspectTarget.getAttribute("data-dnd-node-id") || null,
+          })
           return [inspectTarget]
         }
 
@@ -1268,14 +1273,32 @@
             inspectTarget,
             sharedTargetIndex.sharedBySignature.get(signature) || []
           )
-          if (sharedTargets.length > 0) return sharedTargets
+          if (sharedTargets.length > 0) {
+            veTrace("shared-targets", {
+              via: "signature",
+              signature: String(signature).slice(0, 160),
+              count: sharedTargets.length,
+              nodeId: inspectTarget.getAttribute("data-dnd-node-id") || null,
+            })
+            return sharedTargets
+          }
         }
 
         var legacyTargets = resolveLegacySharedTargets(inspectTarget)
         if (legacyTargets.length > 0) {
+          veTrace("shared-targets", {
+            via: "legacy",
+            count: legacyTargets.length,
+            nodeId: inspectTarget.getAttribute("data-dnd-node-id") || null,
+          })
           return legacyTargets
         }
 
+        veTrace("shared-targets", {
+          via: "self-only",
+          count: 1,
+          nodeId: inspectTarget.getAttribute("data-dnd-node-id") || null,
+        })
         return [inspectTarget]
       }
 
@@ -1379,10 +1402,24 @@
 
         syncBridgeStateFromWindow()
         if (!bridgeState.targetOrigin || bridgeState.targetOrigin === "*") {
+          if (msg && msg.type && msg.type !== "ELEMENT_POSITION_UPDATE") {
+            veTrace("out:" + msg.type + ":queued", {
+              requestId: (msg && msg.requestId) || null,
+            })
+          }
           bridgeState.pendingParentMessages.push(msg)
           return
         }
 
+        if (msg && msg.type && msg.type !== "ELEMENT_POSITION_UPDATE") {
+          veTrace("out:" + msg.type, {
+            requestId: (msg && msg.requestId) || null,
+            operationId:
+              (msg && msg.operationId) ||
+              (msg && msg.payload && msg.payload.operationId) ||
+              null,
+          })
+        }
         window.parent.postMessage(msg, bridgeState.targetOrigin)
       }
 
@@ -1455,6 +1492,41 @@
         }
       }
 
+      /**
+       * Always-on trace ring buffer, shared shape with the design-mode engine
+       * (`debug-trace.ts`): reproduce a broken gesture, then read
+       * `window.__ARCHIE_VE_TRACE__` / `window.__ARCHIE_VE_TRACE_DUMP__()` in
+       * THIS frame's console. Console echo only with `_inspectorDebug` /
+       * `__ARCHIE_VE_DEBUG__`. Payloads must be small summaries — ids, types,
+       * refs — never elements or full HTML.
+       */
+      var VE_TRACE_MAX = 800
+      function veTrace(event, data) {
+        try {
+          var buffer = window.__ARCHIE_VE_TRACE__
+          if (!buffer) {
+            buffer = window.__ARCHIE_VE_TRACE__ = []
+          }
+          var entry = { t: Date.now(), layer: "inspector", event: event }
+          if (typeof data !== "undefined") entry.data = data
+          buffer.push(entry)
+          if (buffer.length > VE_TRACE_MAX) {
+            buffer.splice(0, buffer.length - VE_TRACE_MAX)
+          }
+          if (!window.__ARCHIE_VE_TRACE_DUMP__) {
+            window.__ARCHIE_VE_TRACE_DUMP__ = function () {
+              return JSON.stringify(window.__ARCHIE_VE_TRACE__ || [])
+            }
+          }
+          if (window._inspectorDebug || window.__ARCHIE_VE_DEBUG__ === true) {
+            // eslint-disable-next-line no-console
+            console.log("[archie-ve:inspector]", event, data || "")
+          }
+        } catch (e) {
+          // Tracing must never break the inspector.
+        }
+      }
+
       postMessageToParent({
         type: "INSPECTOR_SCRIPT_LOADED",
         timestamp: Date.now(),
@@ -2658,6 +2730,31 @@
           } catch (e) {}
         }
 
+        veTrace("resolve-mutation-element", {
+          selector: hasSelector ? selector : null,
+          inspectorSource:
+            inspectorSource && typeof inspectorSource === "object"
+              ? (inspectorSource.file || "") +
+                ":" +
+                (inspectorSource.line || "") +
+                ":" +
+                (inspectorSource.column || "")
+              : null,
+          matchedSelector: !!selectorElement,
+          resolvedVia: !element
+            ? "none"
+            : element === selectorElement
+              ? "selector"
+              : "inspector-source-or-fallback",
+          resolvedNodeId: element
+            ? element.getAttribute("data-dnd-node-id") || null
+            : null,
+          resolvedSourceRef: element
+            ? element.getAttribute("data-archie-source-ref") || null
+            : null,
+          resolvedTag: element ? String(element.tagName || "").toLowerCase() : null,
+        })
+
         return element
       }
 
@@ -3207,6 +3304,10 @@
           return
         }
 
+        veTrace("runtime-event:" + detail.type, {
+          operationId: detail.operationId || null,
+        })
+
         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
@@ -3216,6 +3317,9 @@
           // only needs runtime-originated mode changes in the legacy
           // design-only flow.
           if (hostCommandedEditorMode === "inspect") {
+            veTrace("runtime-event:design-mode-changed:suppressed", {
+              hostCommandedEditorMode: hostCommandedEditorMode,
+            })
             return
           }
           postMessageToParent({
@@ -3304,6 +3408,12 @@
             event.data.type,
             event.data
           )
+          if (event.data.type !== "EXTERNAL_DRAG_MOVE") {
+            veTrace("in:" + event.data.type, {
+              requestId: event.data.requestId || null,
+              selector: event.data.selector || null,
+            })
+          }
         }
 
         if (event.data && event.data.type === "SET_EDITOR_MODE") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",