@archie/devtools 0.0.20 → 0.0.22

package/dist/client/client.js

@@ -38,7 +38,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/client/dnd/DndProvider.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // node_modules/@dnd-kit/core/dist/core.esm.js
 var import_react3 = __toESM(require("react"));
@@ -4315,6 +4315,9 @@ function findMetaOwnerElement(el) {
 }
 function resolveHostElementFromFiberChain(el) {
   if (shouldIgnoreAsVirtualRuntime(el)) return null;
+  if (el.hasAttribute("data-dnd-force-allow")) {
+    return el;
+  }
   const directMeta = getDirectEditorMeta(el);
   const ownerMeta = directMeta ?? getEditorMeta(el);
   if (isPassthroughMeta(ownerMeta)) {
@@ -4670,8 +4673,8 @@ function buildEmptyArrangeSessionState() {
 var useDesignModeStore = create((set, get) => ({
   // UI state
   enabled: false,
-  hoveredSelector: null,
   selectedSelector: null,
+  inspectorSelectedNodeIds: [],
   historyMode: "local",
   inspectorTheme: DEFAULT_INSPECTOR_THEME,
   canUndo: false,
@@ -4687,16 +4690,23 @@ var useDesignModeStore = create((set, get) => ({
   // UI actions
   toggle: () => set((s) => ({ enabled: !s.enabled, ...buildEmptyArrangeSessionState() })),
   setEnabled: (enabled) => set({ enabled }),
-  setHovered: (selector) => set({ hoveredSelector: selector }),
   setSelected: (selector) => set({ selectedSelector: selector }),
+  setInspectorSelection: (nodeIds) => {
+    const next = nodeIds.filter((id) => typeof id === "string" && id.length > 0);
+    const prev = get().inspectorSelectedNodeIds;
+    if (prev.length === next.length && prev.every((id, i) => id === next[i])) {
+      return;
+    }
+    set({ inspectorSelectedNodeIds: next });
+  },
   setHistoryMode: (historyMode) => set({ historyMode }),
   setInspectorTheme: (theme) => set((s) => ({ inspectorTheme: mergeInspectorTheme({ ...s.inspectorTheme, ...theme }) })),
   setHistoryAvailability: (canUndo, canRedo) => set({ canUndo, canRedo }),
   requestUndo: () => set((s) => ({ undoRequestId: s.undoRequestId + 1 })),
   requestRedo: () => set((s) => ({ redoRequestId: s.redoRequestId + 1 })),
   resetAll: () => set({
-    hoveredSelector: null,
     selectedSelector: null,
+    inspectorSelectedNodeIds: [],
     canUndo: false,
     canRedo: false
   }),
@@ -4814,9 +4824,13 @@ var useDesignModeStore = create((set, get) => ({
     inspectorRef,
     displayName,
     html,
+    tsxCode,
+    tsxImports,
     containerId,
     containerNodeKey,
-    index
+    index,
+    beforeSiblingInspectorRef,
+    beforeSiblingNodeKey
   }) => {
     const now = Date.now();
     const normalizedOperationId = operationId ?? buildFallbackOperationId(now, nodeId);
@@ -4828,9 +4842,13 @@ var useDesignModeStore = create((set, get) => ({
       inspectorRef,
       displayName,
       html,
+      tsxCode: tsxCode ?? null,
+      tsxImports: tsxImports ?? null,
       containerId,
       containerNodeKey,
       index,
+      beforeSiblingInspectorRef: beforeSiblingInspectorRef ?? null,
+      beforeSiblingNodeKey: beforeSiblingNodeKey ?? null,
       at: now
     };
     set((s) => {
@@ -4908,7 +4926,7 @@ var useDesignModeStore = create((set, get) => ({
 }));
 
 // src/client/dnd/design-mode/DesignModeOverlay.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 
 // src/client/dnd/design-mode/useElementScanner.ts
 var import_react6 = require("react");
@@ -4927,15 +4945,17 @@ function buildNodeSelector(nodeId) {
 var LARGE_NODE_NEST_BLOCK_MIN_WIDTH = 520;
 var LARGE_NODE_NEST_BLOCK_MIN_HEIGHT = 260;
 var LARGE_NODE_NEST_BLOCK_MIN_AREA = 18e4;
-function resolveGrabFeedbackTarget(target, scannedByNodeId) {
-  if (!(target instanceof Element)) return null;
-  if (target.closest("[data-design-mode-ui]")) return null;
+function shouldShowGrabFeedback(target, scannedByNodeId) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-design-mode-ui]")) return false;
+  if (!target.closest("#root")) return false;
   const host = target.closest(`[${DND_NODE_ID_ATTR}]`);
-  if (!host) return null;
+  if (!host) {
+    return true;
+  }
   const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
   const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
-  if (!scanned || scanned.draggable !== false) return null;
-  return scanned;
+  return !scanned || scanned.draggable === false;
 }
 function isEligibleForDrag(sc) {
   if (sc.draggable === false) return false;
@@ -5435,14 +5455,14 @@ function handlePosition(dir) {
   };
   return positions[dir];
 }
-function getOutlineStyle(rect, isSelected, isHovered, inspectorTheme) {
+function getOutlineStyle(rect, isSelected, inspectorTheme) {
   return {
     ...OUTLINE_BASE_STYLE,
     left: rect.left,
     top: rect.top,
     width: rect.width,
     height: rect.height,
-    border: isSelected ? `2px solid ${inspectorTheme.accent}` : isHovered ? `2px dashed ${inspectorTheme.hover}` : `1px dashed ${inspectorTheme.shared}`,
+    border: isSelected ? `2px solid ${inspectorTheme.accent}` : `1px dashed ${inspectorTheme.shared}`,
     backgroundColor: isSelected ? inspectorTheme.accentSoft : "transparent"
   };
 }
@@ -5472,11 +5492,13 @@ function ElementHighlight({
   elements,
   draggingNodeId,
   activeEl,
+  arrangeSelectedNodeId,
+  externalDragActive,
   onResizeHandlePointerDown
 }) {
-  const hoveredSelector = useDesignModeStore((s) => s.hoveredSelector);
-  const selectedSelector = useDesignModeStore((s) => s.selectedSelector);
   const inspectorTheme = useDesignModeStore((s) => s.inspectorTheme);
+  const internalDragInProgress = draggingNodeId !== null;
+  const overlayVisible = arrangeSelectedNodeId !== null || internalDragInProgress;
   const containerRef = (0, import_react7.useRef)(null);
   const rafRef = (0, import_react7.useRef)(0);
   const syncPositions = (0, import_react7.useCallback)(() => {
@@ -5500,7 +5522,6 @@ function ElementHighlight({
     }
   }, [elements]);
   (0, import_react7.useEffect)(() => {
-    if (draggingNodeId) return;
     let running = true;
     const loop = () => {
       if (!running) return;
@@ -5512,8 +5533,9 @@ function ElementHighlight({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [syncPositions, draggingNodeId]);
-  if (draggingNodeId) return null;
+  }, [syncPositions]);
+  if (!overlayVisible) return null;
+  if (externalDragActive) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -5523,10 +5545,10 @@ function ElementHighlight({
       children: elements.map((el) => {
         if (el.nodeId === draggingNodeId) return null;
         if (activeEl && activeEl !== el.element && activeEl.contains(el.element)) return null;
-        const isHovered = el.nodeId === hoveredSelector;
-        const isSelected = el.nodeId === selectedSelector;
+        const isSelected = el.nodeId === arrangeSelectedNodeId;
+        if (!isSelected && !internalDragInProgress) return null;
         const rect = el.element.getBoundingClientRect();
-        const showLabel = isHovered || isSelected;
+        const showLabel = isSelected;
         const labelTop = isSelected ? Math.max(0, rect.top - 20) : rect.top;
         const labelLeft = isSelected ? rect.left + 12 : rect.left;
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
@@ -5535,7 +5557,7 @@ function ElementHighlight({
             {
               "data-outline-for": el.nodeId,
               "data-design-mode-ui": true,
-              style: getOutlineStyle(rect, isSelected, isHovered, inspectorTheme),
+              style: getOutlineStyle(rect, isSelected, inspectorTheme),
               children: isSelected && HANDLES.map((dir) => {
                 const pos = handlePosition(dir);
                 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -5830,6 +5852,57 @@ function buildRectSlotRect(children, nodeMap, cRect, i, n, rows) {
   };
 }
 
+// src/client/dnd/design-mode/inserted-descendants.ts
+var NON_DRAGGABLE_DESCENDANT_TAGS = /* @__PURE__ */ new Set([
+  // SVG internals — the whole <svg> is the unit; its parts must stay together.
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "use",
+  // <select>/<option>: options live inside their <select>, never standalone.
+  "option",
+  "optgroup",
+  // Table internals: only meaningful in their <table> tree.
+  "caption",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td",
+  "col",
+  "colgroup",
+  // Self-closing inline atoms with no draggable surface.
+  "br",
+  "wbr",
+  "hr",
+  // Non-rendered metadata.
+  "script",
+  "style",
+  "meta",
+  "link",
+  "title",
+  "noscript",
+  // Replaced media controls handled by their parent player.
+  "source",
+  "track"
+]);
+function markInsertedDescendants(root) {
+  const descendants = root.querySelectorAll("*");
+  for (const node of descendants) {
+    const tag = node.tagName.toLowerCase();
+    if (NON_DRAGGABLE_DESCENDANT_TAGS.has(tag)) continue;
+    node.setAttribute("data-dnd-force-allow", "");
+    node.setAttribute("data-dnd-moved", "");
+  }
+}
+
 // src/client/dnd/design-mode/history.ts
 function applyInsertCommand(command, direction, resolveNodeElement) {
   if (direction === "undo") {
@@ -5852,6 +5925,7 @@ function applyInsertCommand(command, direction, resolveNodeElement) {
     (c) => c instanceof HTMLElement
   );
   container.insertBefore(newEl, kids[command.index] ?? null);
+  markInsertedDescendants(newEl);
   return true;
 }
 var DEFAULT_LIMIT = 300;
@@ -6377,6 +6451,8 @@ function serializeArrangeChange(event, index) {
     containerId: event.kind === "insert" ? event.containerId : void 0,
     containerNodeKey: event.kind === "insert" ? event.containerNodeKey : void 0,
     insertIndex: event.kind === "insert" ? event.index : void 0,
+    beforeSiblingInspectorRef: event.kind === "insert" ? event.beforeSiblingInspectorRef : void 0,
+    beforeSiblingNodeKey: event.kind === "insert" ? event.beforeSiblingNodeKey : void 0,
     summary: summarizeEditorChangeEvent(event),
     at: event.at
   };
@@ -6674,50 +6750,8 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
   }), []);
 }
 
-// src/client/dnd/design-mode/useHoverDetection.ts
-var import_react12 = require("react");
-function useHoverDetection({
-  enabled,
-  activeDrag,
-  elementsRef,
-  setHovered
-}) {
-  (0, import_react12.useEffect)(() => {
-    if (!enabled) {
-      setHovered(null);
-      return;
-    }
-    let lastNodeId = null;
-    const fn = (e) => {
-      if (activeDrag) return;
-      let best = null;
-      let bestArea = Infinity;
-      for (const sc of elementsRef.current) {
-        const r = sc.rect;
-        if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) {
-          const a = r.width * r.height;
-          if (a < bestArea) {
-            bestArea = a;
-            best = sc;
-          }
-        }
-      }
-      const nodeId = best?.nodeId ?? null;
-      if (nodeId !== lastNodeId) {
-        lastNodeId = nodeId;
-        setHovered(nodeId);
-      }
-    };
-    document.addEventListener("mousemove", fn);
-    return () => {
-      document.removeEventListener("mousemove", fn);
-      setHovered(null);
-    };
-  }, [enabled, setHovered, activeDrag]);
-}
-
 // src/client/dnd/design-mode/useDragVisualLoop.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/client/dnd/design-mode/quadtree.ts
 function overlaps(a, b) {
@@ -7606,7 +7640,7 @@ function useDragVisualLoop({
   setInsideRect,
   setDropLine
 }) {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const engine = refs.engineRef.current;
     const snapshot = refs.snapshotRef.current;
     if (!activeDrag || !engine || !snapshot) return;
@@ -7836,7 +7870,7 @@ function useDragVisualLoop({
 }
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
-var import_react14 = require("react");
+var import_react13 = require("react");
 function buildRuntimeIdentityLocal(nodeId, resolveNodeElement, effectiveLaneSnapshot) {
   if (!nodeId) return null;
   const element = resolveNodeElement(nodeId);
@@ -8021,8 +8055,8 @@ function useDragLifecycle({
   setInsideRect,
   setDropLine
 }) {
-  const [activeDrag, setActiveDrag] = (0, import_react14.useState)(null);
-  const clearDragState = (0, import_react14.useCallback)(() => {
+  const [activeDrag, setActiveDrag] = (0, import_react13.useState)(null);
+  const clearDragState = (0, import_react13.useCallback)(() => {
     refs.animatorRef.current.clear();
     const activeEl = refs.activeElRef.current;
     refs.activeElRef.current = null;
@@ -8049,7 +8083,7 @@ function useDragLifecycle({
     setActiveDrag(null);
     resume();
   }, [clearCommitLaneCache, resume]);
-  const classifyCommandType = (0, import_react14.useCallback)((from, to, isNest) => {
+  const classifyCommandType = (0, import_react13.useCallback)((from, to, isNest) => {
     if (isNest) return "nest";
     if (from.parentNodeId === to.parentNodeId) return "reorder";
     if (from.parentNodeId) {
@@ -8059,7 +8093,7 @@ function useDragLifecycle({
     }
     return "moveCrossContainer";
   }, [resolveNodeElement]);
-  const handleDragStart = (0, import_react14.useCallback)(({ active }) => {
+  const handleDragStart = (0, import_react13.useCallback)(({ active }) => {
     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);
@@ -8115,7 +8149,7 @@ function useDragLifecycle({
       element: anchorScanned.element
     });
   }, [clearCommitLaneCache, getCommitLaneSnapshot, getCurrentCommitPlacement, pause, selectElement]);
-  const handleDragEnd = (0, import_react14.useCallback)(({ active }) => {
+  const handleDragEnd = (0, import_react13.useCallback)(({ active }) => {
     const activeEl = refs.activeElRef.current;
     const fallbackActiveId = active.id;
     const dragSession = refs.dragSessionAnchorRef.current;
@@ -8221,14 +8255,14 @@ function useDragLifecycle({
     clearDragState();
     syncHistoryAvailability();
   }, [applyCommand, classifyCommandType, clearDragState, getCurrentCommitPlacement, recordMoveChange, resolveNodeElement, selectElement, syncHistoryAvailability]);
-  const handleDragCancel = (0, import_react14.useCallback)(() => {
+  const handleDragCancel = (0, import_react13.useCallback)(() => {
     clearDragState();
   }, [clearDragState]);
   return { activeDrag, handleDragStart, handleDragEnd, handleDragCancel };
 }
 
 // src/client/dnd/design-mode/useResizeSession.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 var RESIZE_POINTER_TOLERANCE_PX = 2;
 var RESIZE_DRAG_BLOCK_MS = 180;
 var RESIZE_MIN = 24;
@@ -8239,7 +8273,7 @@ function useResizeSession({
   recordResizeChange,
   syncHistoryAvailability
 }) {
-  const handleResizeHandlePointerDown = (0, import_react15.useCallback)((e, nodeId, dir) => {
+  const handleResizeHandlePointerDown = (0, import_react14.useCallback)((e, nodeId, dir) => {
     if (refs.resizeSessionRef.current) return;
     const selectedEl = refs.nodeMapRef.current.get(nodeId)?.element ?? document.querySelector(`[data-dnd-node-id="${nodeId}"]`);
     if (!selectedEl) return;
@@ -8285,7 +8319,7 @@ function useResizeSession({
     };
     pointerTarget?.setPointerCapture?.(e.pointerId);
   }, []);
-  const handleResizePointerMove = (0, import_react15.useCallback)((e) => {
+  const handleResizePointerMove = (0, import_react14.useCallback)((e) => {
     const session = refs.resizeSessionRef.current;
     if (!session || e.pointerId !== session.pointerId) return;
     const dx = e.clientX - session.startX;
@@ -8331,7 +8365,7 @@ function useResizeSession({
     element.style.width = `${Math.round(Math.min(newW, window.innerWidth))}px`;
     element.style.height = `${Math.round(Math.min(newH, window.innerHeight))}px`;
   }, []);
-  const handleResizePointerUp = (0, import_react15.useCallback)((e) => {
+  const handleResizePointerUp = (0, import_react14.useCallback)((e) => {
     const session = refs.resizeSessionRef.current;
     if (!session || e.pointerId !== session.pointerId) return;
     refs.resizeSessionRef.current = null;
@@ -8400,7 +8434,7 @@ function useResizeSession({
     });
     syncHistoryAvailability();
   }, [applyCommand, recordResizeChange, syncHistoryAvailability]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enabled) return;
     const handleResizePointerCancel = (e) => {
       const session = refs.resizeSessionRef.current;
@@ -8425,8 +8459,13 @@ function useResizeSession({
 }
 
 // src/client/dnd/design-mode/useExternalDragLoop.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var EXTERNAL_DRAG_ACTIVE_ID = "__external-drag-placeholder__";
+var insertNodeIdCounter = 0;
+function nextInsertNodeId() {
+  insertNodeIdCounter += 1;
+  return `insert:${Date.now()}:${insertNodeIdCounter}`;
+}
 function useExternalDragLoop({
   externalDrag,
   refs,
@@ -8434,9 +8473,9 @@ function useExternalDragLoop({
   resolveNodeElement,
   setDropLine
 }) {
-  const engineRef = (0, import_react16.useRef)(null);
-  const lastIntentRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const engineRef = (0, import_react15.useRef)(null);
+  const lastIntentRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (!externalDrag) {
       engineRef.current = null;
       lastIntentRef.current = null;
@@ -8526,7 +8565,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
     setDropLine(null);
     return;
   }
-  const nodeId = `insert:${Date.now()}`;
+  const nodeId = nextInsertNodeId();
   newElement.setAttribute(DND_NODE_ID_ATTR, nodeId);
   newElement.setAttribute("data-dnd-force-allow", "");
   newElement.setAttribute("data-dnd-moved", "");
@@ -8535,6 +8574,23 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
   );
   const beforeChild = children[intent.index] ?? null;
   containerEl.insertBefore(newElement, beforeChild);
+  markInsertedDescendants(newElement);
+  const postInsertChildren = Array.from(containerEl.children).filter(
+    (child) => child instanceof HTMLElement
+  );
+  let beforeSiblingEl = null;
+  let beforeSiblingNodeId = null;
+  const startIdx = postInsertChildren.indexOf(newElement) + 1;
+  for (let i = startIdx; i < postInsertChildren.length; i += 1) {
+    const candidate = postInsertChildren[i];
+    const candidateNodeId = candidate.getAttribute(DND_NODE_ID_ATTR);
+    if (!candidateNodeId) continue;
+    const isEarlierInsert = candidateNodeId.startsWith("insert:");
+    if (!isEarlierInsert && !getInspectorRefFromElement(candidate)) continue;
+    beforeSiblingEl = candidate;
+    beforeSiblingNodeId = candidateNodeId;
+    break;
+  }
   const insertCommand = {
     type: "insert",
     nodeId,
@@ -8560,6 +8616,15 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
         inspectorRef: getInspectorRefFromElement(containerEl)
       };
     }
+    let beforeSiblingIdentity = null;
+    if (beforeSiblingEl && beforeSiblingNodeId) {
+      beforeSiblingIdentity = {
+        nodeId: beforeSiblingNodeId,
+        nodeKey: getNodeKeyFromElement(beforeSiblingEl),
+        selector: buildNodeSelector(beforeSiblingNodeId),
+        inspectorRef: getInspectorRefFromElement(beforeSiblingEl)
+      };
+    }
     const operationId = `${insertCommand.at}:${nodeId}`;
     useDesignModeStore.getState().recordInsertChange({
       operationId,
@@ -8568,9 +8633,13 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       inspectorRef,
       displayName: component.displayName,
       html: component.html,
+      tsxCode: component.tsxCode ?? null,
+      tsxImports: component.tsxImports ?? null,
       containerId: intent.containerId,
       containerNodeKey,
-      index: intent.index
+      index: intent.index,
+      beforeSiblingInspectorRef: beforeSiblingIdentity?.inspectorRef ?? null,
+      beforeSiblingNodeKey: beforeSiblingIdentity?.nodeKey ?? null
     });
     dispatchRuntimeEvent({
       type: "element-inserted",
@@ -8579,8 +8648,11 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       nodeKey,
       displayName: component.displayName,
       html: component.html,
+      tsxCode: component.tsxCode ?? null,
+      tsxImports: component.tsxImports ?? null,
       container: containerIdentity,
-      index: intent.index
+      index: intent.index,
+      beforeSibling: beforeSiblingIdentity
     });
   }
   setDropLine(null);
@@ -8631,12 +8703,16 @@ function HitArea({
   selectedNodeId,
   onResizeHandlePointerDown
 }) {
-  const { setNodeRef, listeners, attributes, isDragging } = useDraggable({ id: scanned.nodeId });
-  (0, import_react17.useEffect)(() => {
+  const isSelected = scanned.nodeId === selectedNodeId;
+  const { setNodeRef, listeners, attributes, isDragging } = useDraggable({
+    id: scanned.nodeId,
+    disabled: !isSelected
+  });
+  (0, import_react16.useEffect)(() => {
     setNodeRef(scanned.element);
     return () => setNodeRef(null);
   }, [setNodeRef, scanned.element]);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     const el = scanned.element;
     if (isDragging) {
       el.style.opacity = "0";
@@ -8644,16 +8720,26 @@ function HitArea({
       el.style.removeProperty("opacity");
     }
   }, [isDragging, scanned.element]);
-  (0, import_react17.useEffect)(() => () => {
+  (0, import_react16.useEffect)(() => () => {
     scanned.element.style.removeProperty("opacity");
     scanned.element.style.removeProperty("transform");
     scanned.element.style.removeProperty("transition");
     scanned.element.style.removeProperty("will-change");
   }, [scanned.element]);
-  const divRef = (0, import_react17.useRef)(null);
-  const [hoverResizeHandle, setHoverResizeHandle] = (0, import_react17.useState)(null);
-  const isSelected = scanned.nodeId === selectedNodeId;
-  (0, import_react17.useEffect)(() => {
+  const divRef = (0, import_react16.useRef)(null);
+  const [hoverResizeHandle, setHoverResizeHandle] = (0, import_react16.useState)(null);
+  const justDraggedRef = (0, import_react16.useRef)(false);
+  (0, import_react16.useEffect)(() => {
+    if (isDragging) {
+      justDraggedRef.current = true;
+      return;
+    }
+    const id = window.setTimeout(() => {
+      justDraggedRef.current = false;
+    }, 0);
+    return () => window.clearTimeout(id);
+  }, [isDragging]);
+  (0, import_react16.useEffect)(() => {
     const div = divRef.current;
     if (!div) return;
     const onWheel = (e) => {
@@ -8669,7 +8755,7 @@ function HitArea({
     return () => div.removeEventListener("wheel", onWheel);
   }, []);
   const { left, top, width, height } = scanned.rect;
-  const cursor = isDragging ? "grabbing" : isSelected && hoverResizeHandle ? resizeCursorFromHandle(hoverResizeHandle) : "grab";
+  const cursor = isDragging ? "grabbing" : !isSelected ? "default" : hoverResizeHandle ? resizeCursorFromHandle(hoverResizeHandle) : "grab";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
@@ -8700,6 +8786,35 @@ function HitArea({
       ...attributes,
       ...listeners,
       onClick: (e) => {
+        if (justDraggedRef.current) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        const stack = document.elementsFromPoint(e.clientX, e.clientY);
+        for (const candidate of stack) {
+          if (!(candidate instanceof HTMLElement)) continue;
+          if (candidate.hasAttribute("data-design-mode-ui")) continue;
+          if (candidate === scanned.element) break;
+          const candidateNodeId = candidate.getAttribute("data-dnd-node-id");
+          if (candidateNodeId && candidateNodeId !== scanned.nodeId) {
+            e.preventDefault();
+            e.stopPropagation();
+            candidate.dispatchEvent(
+              new MouseEvent("mousedown", {
+                bubbles: true,
+                cancelable: true,
+                clientX: e.clientX,
+                clientY: e.clientY,
+                metaKey: e.metaKey,
+                ctrlKey: e.ctrlKey,
+                shiftKey: e.shiftKey,
+                altKey: e.altKey
+              })
+            );
+            return;
+          }
+        }
         e.preventDefault();
         e.stopPropagation();
         onActivate(scanned.nodeId);
@@ -8710,9 +8825,11 @@ function HitArea({
 function DesignModeOverlay() {
   const enabled = useDesignModeStore((s) => s.enabled);
   const historyMode = useDesignModeStore((s) => s.historyMode);
-  const setHovered = useDesignModeStore((s) => s.setHovered);
   const selectElement = useDesignModeStore((s) => s.setSelected);
-  const selectedSelector = useDesignModeStore((s) => s.selectedSelector);
+  const inspectorSelectedNodeIds = useDesignModeStore(
+    (s) => s.inspectorSelectedNodeIds
+  );
+  const arrangeSelectedNodeId = inspectorSelectedNodeIds.length === 1 ? inspectorSelectedNodeIds[0] : null;
   const setHistoryAvailability = useDesignModeStore((s) => s.setHistoryAvailability);
   const undoRequestId = useDesignModeStore((s) => s.undoRequestId);
   const redoRequestId = useDesignModeStore((s) => s.redoRequestId);
@@ -8726,55 +8843,63 @@ function DesignModeOverlay() {
   const exportChangesForAI = useDesignModeStore((s) => s.exportChangesForAI);
   const externalDrag = useDesignModeStore((s) => s.externalDrag);
   const { elements, pause, resume } = useElementScanner(enabled);
-  const nodeMap = (0, import_react17.useMemo)(() => {
+  const nodeMap = (0, import_react16.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const el of elements) m.set(el.nodeId, el);
     return m;
   }, [elements]);
-  const draggableElements = (0, import_react17.useMemo)(() => {
+  const draggableElements = (0, import_react16.useMemo)(() => {
     if (elements.length === 0) return [];
     const projection = buildProjection(elements);
     return collectDraggableAnchors(elements, projection, nodeMap).filter(
       (el) => el.draggable !== false
     );
   }, [elements, nodeMap]);
+  const arrangeHitAreaElement = (0, import_react16.useMemo)(() => {
+    if (!arrangeSelectedNodeId) return null;
+    if (externalDrag) return null;
+    return draggableElements.find(
+      (candidate) => candidate.nodeId === arrangeSelectedNodeId
+    ) ?? null;
+  }, [arrangeSelectedNodeId, externalDrag, draggableElements]);
   const refs = useOverlayRefs(undoRequestId, redoRequestId);
   refs.elementsRef.current = elements;
   refs.nodeMapRef.current = nodeMap;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
-  const [grabFeedback, setGrabFeedback] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [grabFeedback, setGrabFeedback] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     const onPointerDown = (e) => {
-      const scanned = resolveGrabFeedbackTarget(
+      if (!shouldShowGrabFeedback(
         e.target,
         refs.nodeMapRef.current
-      );
-      if (!scanned) return;
+      )) {
+        return;
+      }
       setGrabFeedback({ x: e.clientX, y: e.clientY, at: Date.now() });
     };
     document.addEventListener("pointerdown", onPointerDown, true);
     return () => document.removeEventListener("pointerdown", onPointerDown, true);
   }, [enabled]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!grabFeedback) return;
     const t = setTimeout(() => setGrabFeedback(null), 1400);
     return () => clearTimeout(t);
   }, [grabFeedback]);
-  const resolveNodeElement = (0, import_react17.useCallback)((nodeId) => {
+  const resolveNodeElement = (0, import_react16.useCallback)((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
     return document.querySelector(buildNodeSelector(nodeId));
   }, []);
-  const clearCommitLaneCache = (0, import_react17.useCallback)(() => {
+  const clearCommitLaneCache = (0, import_react16.useCallback)(() => {
     refs.commitLaneCacheRef.current.clear();
     refs.sourceCommitLaneRef.current = null;
   }, []);
-  const getCommitLaneSnapshot = (0, import_react17.useCallback)((laneContainerId) => {
+  const getCommitLaneSnapshot = (0, import_react16.useCallback)((laneContainerId) => {
     if (!laneContainerId) return null;
     if (refs.commitLaneCacheRef.current.has(laneContainerId)) {
       return refs.commitLaneCacheRef.current.get(laneContainerId) ?? null;
@@ -8783,11 +8908,11 @@ function DesignModeOverlay() {
     refs.commitLaneCacheRef.current.set(laneContainerId, snapshot);
     return snapshot;
   }, []);
-  const getCurrentCommitPlacement = (0, import_react17.useCallback)((anchorNodeId, laneContainerId) => {
+  const getCurrentCommitPlacement = (0, import_react16.useCallback)((anchorNodeId, laneContainerId) => {
     const lane = getCommitLaneSnapshot(laneContainerId);
     return resolveCurrentCommitPlacement(lane, anchorNodeId);
   }, [getCommitLaneSnapshot]);
-  const applyCommand = (0, import_react17.useCallback)((command, direction) => {
+  const applyCommand = (0, import_react16.useCallback)((command, direction) => {
     if (command.type === "resize") {
       const resCmd = command;
       const targetId = resCmd.targetNodeId ?? resCmd.nodeId;
@@ -8810,28 +8935,28 @@ function DesignModeOverlay() {
     clearCommitLaneCache();
     return true;
   }, [clearCommitLaneCache, resolveNodeElement]);
-  const syncHistoryAvailability = (0, import_react17.useCallback)(() => {
+  const syncHistoryAvailability = (0, import_react16.useCallback)(() => {
     if (historyMode === "host") {
       setHistoryAvailability(false, false);
       return;
     }
     setHistoryAvailability(refs.historyRef.current.canUndo(), refs.historyRef.current.canRedo());
   }, [historyMode, setHistoryAvailability]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     refs.historyRef.current.clear();
     syncHistoryAvailability();
   }, [enabled, syncHistoryAvailability]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
   );
-  const collisionDetection = (0, import_react17.useCallback)(
+  const collisionDetection = (0, import_react16.useCallback)(
     (args) => createDesignModeCollisionDetection(refs.blockedContainerIdsRef.current)(args),
     []
     // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
   );
-  const [insideRect, setInsideRect] = (0, import_react17.useState)(null);
-  const [dropLine, setDropLine] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [insideRect, setInsideRect] = (0, import_react16.useState)(null);
+  const [dropLine, setDropLine] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     const fn = (e) => {
       refs.mouseRef.current = { x: e.clientX, y: e.clientY };
@@ -8839,7 +8964,7 @@ function DesignModeOverlay() {
     window.addEventListener("pointermove", fn, { capture: true, passive: true });
     return () => window.removeEventListener("pointermove", fn, { capture: true });
   }, [enabled]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     if (historyMode !== "local") return;
     const onKeyDown = (e) => {
@@ -8868,7 +8993,7 @@ function DesignModeOverlay() {
     setInsideRect,
     setDropLine
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled || activeDrag) return;
     if (undoRequestId === refs.processedUndoIdRef.current) return;
     refs.processedUndoIdRef.current = undoRequestId;
@@ -8885,7 +9010,7 @@ function DesignModeOverlay() {
     });
     syncHistoryAvailability();
   }, [undoRequestId, enabled, activeDrag, applyCommand, resume, selectElement, syncHistoryAvailability, undoLastChange]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled || activeDrag || historyMode !== "local") return;
     if (redoRequestId === refs.processedRedoIdRef.current) return;
     refs.processedRedoIdRef.current = redoRequestId;
@@ -8897,18 +9022,18 @@ function DesignModeOverlay() {
     }
     syncHistoryAvailability();
   }, [redoRequestId, enabled, activeDrag, applyCommand, historyMode, resume, selectElement, syncHistoryAvailability, redoLastChange]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     syncHistoryAvailability();
   }, [syncHistoryAvailability]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     dispatchRuntimeEvent({
       type: "design-mode-changed",
       mode: enabled ? "design" : "off"
     });
   }, [enabled]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const aiOutput = exportChangesForAI();
-    const updatedAt = orderedChanges.length > 0 ? orderedChanges[orderedChanges.length - 1]?.at ?? Date.now() : Date.now();
+    const updatedAt = Date.now();
     dispatchRuntimeEvent({
       type: "arrange-session-changed",
       session: buildArrangeSessionSnapshot({
@@ -8919,12 +9044,11 @@ function DesignModeOverlay() {
       })
     });
   }, [enabled, exportChangesForAI, orderedChanges]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     document.body.classList.add("design-mode-active");
     return () => document.body.classList.remove("design-mode-active");
   }, [enabled]);
-  useHoverDetection({ enabled, activeDrag, elementsRef: refs.elementsRef, setHovered });
   useDesignModeAutoScroll({
     active: !!activeDrag,
     mouseRef: refs.mouseRef,
@@ -8963,19 +9087,21 @@ function DesignModeOverlay() {
             elements,
             draggingNodeId: activeDrag?.nodeId ?? null,
             activeEl: refs.activeElRef.current,
+            arrangeSelectedNodeId,
+            externalDragActive: externalDrag !== null,
             onResizeHandlePointerDown: handleResizeHandlePointerDown
           }
         ),
-        draggableElements.map((el) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        arrangeHitAreaElement && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           HitArea,
           {
-            scanned: el,
+            scanned: arrangeHitAreaElement,
             onActivate: selectElement,
-            selectedNodeId: selectedSelector,
+            selectedNodeId: arrangeHitAreaElement.nodeId,
             onResizeHandlePointerDown: handleResizeHandlePointerDown
           },
-          el.nodeId
-        )),
+          arrangeHitAreaElement.nodeId
+        ),
         grabFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
@@ -9042,8 +9168,8 @@ function DesignModeOverlay() {
 }
 
 // src/client/dnd/design-mode/DesignModeErrorBoundary.tsx
-var import_react18 = __toESM(require("react"));
-var DesignModeErrorBoundary = class extends import_react18.default.Component {
+var import_react17 = __toESM(require("react"));
+var DesignModeErrorBoundary = class extends import_react17.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -9084,13 +9210,13 @@ function DndProvider({ children }) {
   const setHistoryMode = useDesignModeStore((s) => s.setHistoryMode);
   const setInspectorTheme = useDesignModeStore((s) => s.setInspectorTheme);
   const requestUndo = useDesignModeStore((s) => s.requestUndo);
-  const transitionDesignMode = (0, import_react19.useCallback)((nextEnabled) => {
+  const transitionDesignMode = (0, import_react18.useCallback)((nextEnabled) => {
     const designModeState = useDesignModeStore.getState();
     if (designModeState.enabled === nextEnabled) return;
     designModeState.resetArrangeSession();
     designModeState.setEnabled(nextEnabled);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
@@ -9100,7 +9226,7 @@ function DndProvider({ children }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [transitionDesignMode]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const handleHostCommand = (event) => {
       const detail = event.detail;
       if (!detail || typeof detail !== "object") return;
@@ -9159,10 +9285,29 @@ function DndProvider({ children }) {
     setInspectorTheme,
     requestUndo
   ]);
+  (0, import_react18.useEffect)(() => {
+    const bridgeWindow = window;
+    const bridge = {
+      setInspectorSelection: (nodeIds) => {
+        useDesignModeStore.getState().setInspectorSelection(nodeIds);
+      }
+    };
+    bridgeWindow.__ARCHIE_DESIGN_MODE__ = bridge;
+    const pending = bridgeWindow.__ARCHIE_DESIGN_MODE_PENDING__;
+    if (Array.isArray(pending)) {
+      bridge.setInspectorSelection(pending);
+      delete bridgeWindow.__ARCHIE_DESIGN_MODE_PENDING__;
+    }
+    return () => {
+      if (bridgeWindow.__ARCHIE_DESIGN_MODE__ === bridge) {
+        delete bridgeWindow.__ARCHIE_DESIGN_MODE__;
+      }
+    };
+  }, []);
   const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 8 } });
   const keyboardSensor = useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates });
   const sensors = useSensors(pointerSensor, keyboardSensor);
-  const handleDragStart = (0, import_react19.useCallback)(
+  const handleDragStart = (0, import_react18.useCallback)(
     (event) => {
       const { active } = event;
       const element = document.querySelector(`[data-canvas-node="${active.id}"]`);
@@ -9170,7 +9315,7 @@ function DndProvider({ children }) {
     },
     [setActive]
   );
-  const handleDragEnd = (0, import_react19.useCallback)(
+  const handleDragEnd = (0, import_react18.useCallback)(
     (event) => {
       const { active, over } = event;
       const dragEndEvent = {
@@ -9186,7 +9331,7 @@ function DndProvider({ children }) {
     },
     [dragEndHandlers, setActive]
   );
-  const handleDesignModeCrash = (0, import_react19.useCallback)(() => {
+  const handleDesignModeCrash = (0, import_react18.useCallback)(() => {
     const designModeState = useDesignModeStore.getState();
     designModeState.resetAll();
     designModeState.resetArrangeSession();
@@ -9230,13 +9375,12 @@ function DndProvider({ children }) {
 }
 
 // src/client/useArchieDevToolsRuntime.ts
-var import_react21 = require("react");
+var import_react20 = require("react");
 
 // src/client/archieLocalInspectorEnv.ts
-var import_meta = {};
 function readArchieLocalInspectorFlag() {
   try {
-    return import_meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+    return false;
   } catch {
     return false;
   }
@@ -9421,13 +9565,13 @@ function setupArchieRouteListener(router) {
 }
 
 // src/client/runtime/domMetaSanitizer.ts
-var import_react20 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var _installed = false;
 function installDomMetaSanitizer() {
   if (_installed) return;
   _installed = true;
-  const _origCE = import_react20.default.createElement.bind(import_react20.default);
-  import_react20.default.createElement = function patchedCreateElement(type, props, ...children) {
+  const _origCE = import_react19.default.createElement.bind(import_react19.default);
+  import_react19.default.createElement = function patchedCreateElement(type, props, ...children) {
     if (typeof type === "string" && props != null && "__editorMeta" in props) {
       const { __editorMeta: _stripped, ...rest } = props;
       return _origCE(type, rest, ...children);
@@ -9455,9 +9599,9 @@ function useArchieDevToolsRuntime({
   inspectorOptions
 }) {
   const stableOptionsKey = JSON.stringify(inspectorOptions ?? null);
-  const inspectorOptionsRef = (0, import_react21.useRef)(inspectorOptions);
+  const inspectorOptionsRef = (0, import_react20.useRef)(inspectorOptions);
   inspectorOptionsRef.current = inspectorOptions;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (process.env.NODE_ENV !== "development") {
       return;
     }