@archie/devtools 0.0.35 → 0.0.37

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") {