@archie/devtools 0.0.21 → 0.0.22

package/dist/client/client.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, {
 var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
 
 // src/client/dnd/DndProvider.tsx
-import { useCallback as useCallback9, useEffect as useEffect13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect12 } from "react";
 
 // node_modules/@dnd-kit/core/dist/core.esm.js
 import React2, { createContext, useContext, useEffect as useEffect2, useState as useState2, useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, memo, useReducer, cloneElement, forwardRef } from "react";
@@ -4280,6 +4280,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)) {
@@ -4635,8 +4638,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,
@@ -4652,16 +4655,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
   }),
@@ -4779,9 +4789,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);
@@ -4793,9 +4807,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) => {
@@ -4873,7 +4891,7 @@ var useDesignModeStore = create((set, get) => ({
 }));
 
 // src/client/dnd/design-mode/DesignModeOverlay.tsx
-import { useRef as useRef10, useCallback as useCallback8, useEffect as useEffect12, useLayoutEffect as useLayoutEffect2, useState as useState6, useMemo as useMemo6 } from "react";
+import { useRef as useRef10, useCallback as useCallback8, useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useState as useState6, useMemo as useMemo6 } from "react";
 
 // src/client/dnd/design-mode/useElementScanner.ts
 import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4, useRef as useRef4 } from "react";
@@ -5402,14 +5420,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"
   };
 }
@@ -5439,11 +5457,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 = useRef5(null);
   const rafRef = useRef5(0);
   const syncPositions = useCallback5(() => {
@@ -5467,7 +5487,6 @@ function ElementHighlight({
     }
   }, [elements]);
   useEffect5(() => {
-    if (draggingNodeId) return;
     let running = true;
     const loop = () => {
       if (!running) return;
@@ -5479,8 +5498,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__ */ jsx2(
     "div",
     {
@@ -5490,10 +5510,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__ */ jsxs("div", { children: [
@@ -5502,7 +5522,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__ */ jsx2(
@@ -5797,6 +5817,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") {
@@ -5819,6 +5890,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;
@@ -6344,6 +6416,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
   };
@@ -6641,50 +6715,8 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
   }), []);
 }
 
-// src/client/dnd/design-mode/useHoverDetection.ts
-import { useEffect as useEffect8 } from "react";
-function useHoverDetection({
-  enabled,
-  activeDrag,
-  elementsRef,
-  setHovered
-}) {
-  useEffect8(() => {
-    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
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/client/dnd/design-mode/quadtree.ts
 function overlaps(a, b) {
@@ -7573,7 +7605,7 @@ function useDragVisualLoop({
   setInsideRect,
   setDropLine
 }) {
-  useEffect9(() => {
+  useEffect8(() => {
     const engine = refs.engineRef.current;
     const snapshot = refs.snapshotRef.current;
     if (!activeDrag || !engine || !snapshot) return;
@@ -8195,7 +8227,7 @@ function useDragLifecycle({
 }
 
 // src/client/dnd/design-mode/useResizeSession.ts
-import { useCallback as useCallback7, useEffect as useEffect10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9 } from "react";
 var RESIZE_POINTER_TOLERANCE_PX = 2;
 var RESIZE_DRAG_BLOCK_MS = 180;
 var RESIZE_MIN = 24;
@@ -8367,7 +8399,7 @@ function useResizeSession({
     });
     syncHistoryAvailability();
   }, [applyCommand, recordResizeChange, syncHistoryAvailability]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!enabled) return;
     const handleResizePointerCancel = (e) => {
       const session = refs.resizeSessionRef.current;
@@ -8392,8 +8424,13 @@ function useResizeSession({
 }
 
 // src/client/dnd/design-mode/useExternalDragLoop.ts
-import { useEffect as useEffect11, useRef as useRef9 } from "react";
+import { useEffect as useEffect10, useRef as useRef9 } from "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,
@@ -8403,7 +8440,7 @@ function useExternalDragLoop({
 }) {
   const engineRef = useRef9(null);
   const lastIntentRef = useRef9(null);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!externalDrag) {
       engineRef.current = null;
       lastIntentRef.current = null;
@@ -8493,7 +8530,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", "");
@@ -8502,6 +8539,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,
@@ -8527,6 +8581,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,
@@ -8535,9 +8598,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",
@@ -8546,8 +8613,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);
@@ -8598,8 +8668,12 @@ function HitArea({
   selectedNodeId,
   onResizeHandlePointerDown
 }) {
-  const { setNodeRef, listeners, attributes, isDragging } = useDraggable({ id: scanned.nodeId });
-  useEffect12(() => {
+  const isSelected = scanned.nodeId === selectedNodeId;
+  const { setNodeRef, listeners, attributes, isDragging } = useDraggable({
+    id: scanned.nodeId,
+    disabled: !isSelected
+  });
+  useEffect11(() => {
     setNodeRef(scanned.element);
     return () => setNodeRef(null);
   }, [setNodeRef, scanned.element]);
@@ -8611,7 +8685,7 @@ function HitArea({
       el.style.removeProperty("opacity");
     }
   }, [isDragging, scanned.element]);
-  useEffect12(() => () => {
+  useEffect11(() => () => {
     scanned.element.style.removeProperty("opacity");
     scanned.element.style.removeProperty("transform");
     scanned.element.style.removeProperty("transition");
@@ -8619,8 +8693,18 @@ function HitArea({
   }, [scanned.element]);
   const divRef = useRef10(null);
   const [hoverResizeHandle, setHoverResizeHandle] = useState6(null);
-  const isSelected = scanned.nodeId === selectedNodeId;
-  useEffect12(() => {
+  const justDraggedRef = useRef10(false);
+  useEffect11(() => {
+    if (isDragging) {
+      justDraggedRef.current = true;
+      return;
+    }
+    const id = window.setTimeout(() => {
+      justDraggedRef.current = false;
+    }, 0);
+    return () => window.clearTimeout(id);
+  }, [isDragging]);
+  useEffect11(() => {
     const div = divRef.current;
     if (!div) return;
     const onWheel = (e) => {
@@ -8636,7 +8720,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__ */ jsx4(
     "div",
     {
@@ -8667,6 +8751,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);
@@ -8677,9 +8790,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);
@@ -8705,16 +8820,23 @@ function DesignModeOverlay() {
       (el) => el.draggable !== false
     );
   }, [elements, nodeMap]);
+  const arrangeHitAreaElement = useMemo6(() => {
+    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;
-  useEffect12(() => {
+  useEffect11(() => {
     const m = /* @__PURE__ */ new Map();
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
   const [grabFeedback, setGrabFeedback] = useState6(null);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!enabled) return;
     const onPointerDown = (e) => {
       if (!shouldShowGrabFeedback(
@@ -8728,7 +8850,7 @@ function DesignModeOverlay() {
     document.addEventListener("pointerdown", onPointerDown, true);
     return () => document.removeEventListener("pointerdown", onPointerDown, true);
   }, [enabled]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!grabFeedback) return;
     const t = setTimeout(() => setGrabFeedback(null), 1400);
     return () => clearTimeout(t);
@@ -8785,7 +8907,7 @@ function DesignModeOverlay() {
     }
     setHistoryAvailability(refs.historyRef.current.canUndo(), refs.historyRef.current.canRedo());
   }, [historyMode, setHistoryAvailability]);
-  useEffect12(() => {
+  useEffect11(() => {
     refs.historyRef.current.clear();
     syncHistoryAvailability();
   }, [enabled, syncHistoryAvailability]);
@@ -8799,7 +8921,7 @@ function DesignModeOverlay() {
   );
   const [insideRect, setInsideRect] = useState6(null);
   const [dropLine, setDropLine] = useState6(null);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!enabled) return;
     const fn = (e) => {
       refs.mouseRef.current = { x: e.clientX, y: e.clientY };
@@ -8807,7 +8929,7 @@ function DesignModeOverlay() {
     window.addEventListener("pointermove", fn, { capture: true, passive: true });
     return () => window.removeEventListener("pointermove", fn, { capture: true });
   }, [enabled]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!enabled) return;
     if (historyMode !== "local") return;
     const onKeyDown = (e) => {
@@ -8836,7 +8958,7 @@ function DesignModeOverlay() {
     setInsideRect,
     setDropLine
   });
-  useEffect12(() => {
+  useEffect11(() => {
     if (!enabled || activeDrag) return;
     if (undoRequestId === refs.processedUndoIdRef.current) return;
     refs.processedUndoIdRef.current = undoRequestId;
@@ -8853,7 +8975,7 @@ function DesignModeOverlay() {
     });
     syncHistoryAvailability();
   }, [undoRequestId, enabled, activeDrag, applyCommand, resume, selectElement, syncHistoryAvailability, undoLastChange]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!enabled || activeDrag || historyMode !== "local") return;
     if (redoRequestId === refs.processedRedoIdRef.current) return;
     refs.processedRedoIdRef.current = redoRequestId;
@@ -8865,18 +8987,18 @@ function DesignModeOverlay() {
     }
     syncHistoryAvailability();
   }, [redoRequestId, enabled, activeDrag, applyCommand, historyMode, resume, selectElement, syncHistoryAvailability, redoLastChange]);
-  useEffect12(() => {
+  useEffect11(() => {
     syncHistoryAvailability();
   }, [syncHistoryAvailability]);
-  useEffect12(() => {
+  useEffect11(() => {
     dispatchRuntimeEvent({
       type: "design-mode-changed",
       mode: enabled ? "design" : "off"
     });
   }, [enabled]);
-  useEffect12(() => {
+  useEffect11(() => {
     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({
@@ -8887,12 +9009,11 @@ function DesignModeOverlay() {
       })
     });
   }, [enabled, exportChangesForAI, orderedChanges]);
-  useEffect12(() => {
+  useEffect11(() => {
     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,
@@ -8931,19 +9052,21 @@ function DesignModeOverlay() {
             elements,
             draggingNodeId: activeDrag?.nodeId ?? null,
             activeEl: refs.activeElRef.current,
+            arrangeSelectedNodeId,
+            externalDragActive: externalDrag !== null,
             onResizeHandlePointerDown: handleResizeHandlePointerDown
           }
         ),
-        draggableElements.map((el) => /* @__PURE__ */ jsx4(
+        arrangeHitAreaElement && /* @__PURE__ */ jsx4(
           HitArea,
           {
-            scanned: el,
+            scanned: arrangeHitAreaElement,
             onActivate: selectElement,
-            selectedNodeId: selectedSelector,
+            selectedNodeId: arrangeHitAreaElement.nodeId,
             onResizeHandlePointerDown: handleResizeHandlePointerDown
           },
-          el.nodeId
-        )),
+          arrangeHitAreaElement.nodeId
+        ),
         grabFeedback ? /* @__PURE__ */ jsx4(
           "div",
           {
@@ -9058,7 +9181,7 @@ function DndProvider({ children }) {
     designModeState.resetArrangeSession();
     designModeState.setEnabled(nextEnabled);
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
@@ -9068,7 +9191,7 @@ function DndProvider({ children }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [transitionDesignMode]);
-  useEffect13(() => {
+  useEffect12(() => {
     const handleHostCommand = (event) => {
       const detail = event.detail;
       if (!detail || typeof detail !== "object") return;
@@ -9127,6 +9250,25 @@ function DndProvider({ children }) {
     setInspectorTheme,
     requestUndo
   ]);
+  useEffect12(() => {
+    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);
@@ -9198,12 +9340,12 @@ function DndProvider({ children }) {
 }
 
 // src/client/useArchieDevToolsRuntime.ts
-import { useEffect as useEffect14, useRef as useRef11 } from "react";
+import { useEffect as useEffect13, useRef as useRef11 } from "react";
 
 // src/client/archieLocalInspectorEnv.ts
 function readArchieLocalInspectorFlag() {
   try {
-    return import.meta.env?.VITE_ARCHIE_LOCAL_INSPECTOR === "true";
+    return false;
   } catch {
     return false;
   }
@@ -9424,7 +9566,7 @@ function useArchieDevToolsRuntime({
   const stableOptionsKey = JSON.stringify(inspectorOptions ?? null);
   const inspectorOptionsRef = useRef11(inspectorOptions);
   inspectorOptionsRef.current = inspectorOptions;
-  useEffect14(() => {
+  useEffect13(() => {
     if (process.env.NODE_ENV !== "development") {
       return;
     }