@archie/devtools 0.0.44 → 0.0.45

package/dist/client/client.mjs

@@ -581,44 +581,6 @@ function getFirstCollision(collisions, property) {
   const [firstCollision] = collisions;
   return property ? firstCollision[property] : firstCollision;
 }
-function centerOfRectangle(rect, left, top) {
-  if (left === void 0) {
-    left = rect.left;
-  }
-  if (top === void 0) {
-    top = rect.top;
-  }
-  return {
-    x: left + rect.width * 0.5,
-    y: top + rect.height * 0.5
-  };
-}
-var closestCenter = (_ref) => {
-  let {
-    collisionRect,
-    droppableRects,
-    droppableContainers
-  } = _ref;
-  const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
-  const collisions = [];
-  for (const droppableContainer of droppableContainers) {
-    const {
-      id
-    } = droppableContainer;
-    const rect = droppableRects.get(id);
-    if (rect) {
-      const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
-      collisions.push({
-        id,
-        data: {
-          droppableContainer,
-          value: distBetween
-        }
-      });
-    }
-  }
-  return collisions.sort(sortCollisionsAsc);
-};
 var closestCorners = (_ref) => {
   let {
     collisionRect,
@@ -5547,6 +5509,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var HANDLE_HIT_SIZE = 24;
 var HANDLE_KNOB_SIZE = 8;
+var EMPTY_SCROLL_DELTA = { x: NaN, y: NaN };
 var OVERLAY_ROOT_STYLE = {
   position: "fixed",
   inset: 0,
@@ -5620,17 +5583,39 @@ function handlePosition(dir) {
   };
   return positions[dir];
 }
-function getOutlineStyle(rect, isSelected, inspectorTheme) {
+function getSelectedOutlineStyle(rect, inspectorTheme) {
   return {
     ...OUTLINE_BASE_STYLE,
     left: rect.left,
     top: rect.top,
     width: rect.width,
     height: rect.height,
-    border: isSelected ? `2px solid ${inspectorTheme.accent}` : `1px dashed ${inspectorTheme.shared}`,
-    backgroundColor: isSelected ? inspectorTheme.accentSoft : "transparent"
+    border: `2px solid ${inspectorTheme.accent}`,
+    backgroundColor: inspectorTheme.accentSoft
   };
 }
+function getGuideOutlineStyle(rect, tier, inspectorTheme) {
+  const base = {
+    ...OUTLINE_BASE_STYLE,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+  switch (tier) {
+    case "candidate":
+      return { ...base, border: `1px solid ${inspectorTheme.accent}`, opacity: 0.2 };
+    case "lane-child":
+      return { ...base, border: `1px dashed ${inspectorTheme.accent}`, opacity: 0.45 };
+    case "lane":
+      return {
+        ...base,
+        border: `1.5px solid ${inspectorTheme.accent}`,
+        backgroundColor: inspectorTheme.accentSoft,
+        opacity: 0.75
+      };
+  }
+}
 function getResizeHandleStyle(position) {
   return {
     ...RESIZE_HANDLE_BASE_STYLE,
@@ -5653,40 +5638,58 @@ function getLabelStyle(labelLeft, labelTop, labelColor) {
     backgroundColor: labelColor
   };
 }
+function projectDragRect(dragGuide, nodeId, sdx, sdy) {
+  const r = dragGuide.rects.get(nodeId);
+  if (!r) return null;
+  return { left: r.left - sdx, top: r.top - sdy, width: r.width, height: r.height };
+}
 function ElementHighlight({
-  elements,
-  draggingNodeId,
-  activeEl,
-  arrangeSelectedNodeId,
+  selected,
+  dragGuide,
   externalDragActive,
   onResizeHandlePointerDown
 }) {
   const inspectorTheme = useDesignModeStore((s) => s.inspectorTheme);
-  const internalDragInProgress = draggingNodeId !== null;
-  const overlayVisible = arrangeSelectedNodeId !== null || internalDragInProgress;
   const containerRef = useRef5(null);
   const rafRef = useRef5(0);
+  const lastScrollDeltaRef = useRef5(EMPTY_SCROLL_DELTA);
   const syncPositions = useCallback5(() => {
     const container = containerRef.current;
     if (!container) return;
-    const outlines = container.querySelectorAll("[data-outline-for]");
-    for (const outline of outlines) {
-      const nodeId = outline.getAttribute("data-outline-for");
-      const el = elements.find((e) => e.nodeId === nodeId);
-      if (!el) continue;
-      const rect = el.element.getBoundingClientRect();
-      outline.style.left = `${rect.left}px`;
-      outline.style.top = `${rect.top}px`;
-      outline.style.width = `${rect.width}px`;
-      outline.style.height = `${rect.height}px`;
-      const label = outline.nextElementSibling;
-      if (label) {
-        label.style.left = `${rect.left}px`;
-        label.style.top = `${rect.top}px`;
+    if (dragGuide) {
+      const sdx = window.scrollX - dragGuide.startScroll.x;
+      const sdy = window.scrollY - dragGuide.startScroll.y;
+      if (sdx === lastScrollDeltaRef.current.x && sdy === lastScrollDeltaRef.current.y) return;
+      lastScrollDeltaRef.current = { x: sdx, y: sdy };
+      const outlines = container.querySelectorAll("[data-guide-for]");
+      for (const outline2 of outlines) {
+        const nodeId = outline2.getAttribute("data-guide-for");
+        const r = dragGuide.rects.get(nodeId);
+        if (!r) continue;
+        outline2.style.left = `${r.left - sdx}px`;
+        outline2.style.top = `${r.top - sdy}px`;
       }
+      return;
     }
-  }, [elements]);
+    if (!selected) return;
+    const rect2 = selected.element.getBoundingClientRect();
+    const outline = container.querySelector("[data-outline-for]");
+    if (outline) {
+      outline.style.left = `${rect2.left}px`;
+      outline.style.top = `${rect2.top}px`;
+      outline.style.width = `${rect2.width}px`;
+      outline.style.height = `${rect2.height}px`;
+    }
+    const label = container.querySelector("[data-drag-handle]");
+    if (label) {
+      label.style.left = `${rect2.left + 12}px`;
+      label.style.top = `${Math.max(0, rect2.top - 20)}px`;
+    }
+  }, [dragGuide, selected]);
+  const loopActive = !externalDragActive && (dragGuide !== null || selected !== null);
   useEffect5(() => {
+    if (!loopActive) return;
+    lastScrollDeltaRef.current = EMPTY_SCROLL_DELTA;
     let running = true;
     const loop = () => {
       if (!running) return;
@@ -5698,81 +5701,113 @@ function ElementHighlight({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [syncPositions]);
-  if (!overlayVisible) return null;
-  if (externalDragActive) return null;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ref: containerRef,
-      "data-design-mode-ui": true,
-      style: OVERLAY_ROOT_STYLE,
-      children: elements.map((el) => {
-        if (el.nodeId === draggingNodeId) return null;
-        if (activeEl && activeEl !== el.element && activeEl.contains(el.element)) return null;
-        const isSelected = el.nodeId === arrangeSelectedNodeId;
-        if (!isSelected && !internalDragInProgress) return null;
-        const rect = el.element.getBoundingClientRect();
-        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: [
-          /* @__PURE__ */ jsx2(
-            "div",
-            {
-              "data-outline-for": el.nodeId,
-              "data-design-mode-ui": true,
-              style: getOutlineStyle(rect, isSelected, inspectorTheme),
-              children: isSelected && el.draggable && HANDLES.map((dir) => {
-                const pos = handlePosition(dir);
-                return /* @__PURE__ */ jsx2(
-                  "div",
-                  {
-                    "data-design-mode-ui": true,
-                    "data-resize-handle": dir,
-                    onPointerDown: (e) => {
-                      e.stopPropagation();
-                      onResizeHandlePointerDown?.(e, el.nodeId, dir);
-                    },
-                    style: getResizeHandleStyle(pos),
-                    children: /* @__PURE__ */ jsx2(
-                      "span",
-                      {
-                        "data-design-mode-ui": true,
-                        style: getResizeKnobStyle(inspectorTheme.accent)
-                      }
-                    )
-                  },
-                  dir
-                );
-              })
-            }
-          ),
-          showLabel && /* @__PURE__ */ jsxs(
+  }, [loopActive, syncPositions]);
+  if (!loopActive) return null;
+  if (dragGuide) {
+    const sdx = window.scrollX - dragGuide.startScroll.x;
+    const sdy = window.scrollY - dragGuide.startScroll.y;
+    const { candidateContainerIds, activeContainerId, activeChildIds, draggingNodeId } = dragGuide;
+    return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-design-mode-ui": true, style: OVERLAY_ROOT_STYLE, children: [
+      [...candidateContainerIds].map((id) => {
+        if (id === activeContainerId || id === draggingNodeId) return null;
+        const rect2 = projectDragRect(dragGuide, id, sdx, sdy);
+        if (!rect2) return null;
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-guide-for": id,
+            "data-guide-tier": "candidate",
+            "data-design-mode-ui": true,
+            style: getGuideOutlineStyle(rect2, "candidate", inspectorTheme)
+          },
+          `candidate:${id}`
+        );
+      }),
+      activeContainerId !== null && activeChildIds.map((id) => {
+        if (id === draggingNodeId) return null;
+        const rect2 = projectDragRect(dragGuide, id, sdx, sdy);
+        if (!rect2) return null;
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-guide-for": id,
+            "data-guide-tier": "lane-child",
+            "data-design-mode-ui": true,
+            style: getGuideOutlineStyle(rect2, "lane-child", inspectorTheme)
+          },
+          `lane-child:${id}`
+        );
+      }),
+      activeContainerId !== null && activeContainerId !== draggingNodeId && (() => {
+        const rect2 = projectDragRect(dragGuide, activeContainerId, sdx, sdy);
+        if (!rect2) return null;
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-guide-for": activeContainerId,
+            "data-guide-tier": "lane",
+            "data-design-mode-ui": true,
+            style: getGuideOutlineStyle(rect2, "lane", inspectorTheme)
+          },
+          `lane:${activeContainerId}`
+        );
+      })()
+    ] });
+  }
+  if (!selected) return null;
+  const rect = selected.element.getBoundingClientRect();
+  const labelTop = Math.max(0, rect.top - 20);
+  const labelLeft = rect.left + 12;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-design-mode-ui": true, style: OVERLAY_ROOT_STYLE, children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-outline-for": selected.nodeId,
+        "data-design-mode-ui": true,
+        style: getSelectedOutlineStyle(rect, inspectorTheme),
+        children: selected.draggable && HANDLES.map((dir) => {
+          const pos = handlePosition(dir);
+          return /* @__PURE__ */ jsx2(
             "div",
             {
               "data-design-mode-ui": true,
-              "data-drag-handle": el.nodeId,
-              style: getLabelStyle(
-                labelLeft,
-                labelTop,
-                isSelected ? inspectorTheme.accent : inspectorTheme.hover
-              ),
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: LABEL_ICON_STYLE, children: "\u283F" }),
-                el.label,
-                isSelected && /* @__PURE__ */ jsxs("span", { style: LABEL_DIMENSIONS_STYLE, children: [
-                  Math.round(rect.width),
-                  "\xD7",
-                  Math.round(rect.height)
-                ] })
-              ]
-            }
-          )
-        ] }, el.nodeId);
-      })
-    }
-  );
+              "data-resize-handle": dir,
+              onPointerDown: (e) => {
+                e.stopPropagation();
+                onResizeHandlePointerDown?.(e, selected.nodeId, dir);
+              },
+              style: getResizeHandleStyle(pos),
+              children: /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  "data-design-mode-ui": true,
+                  style: getResizeKnobStyle(inspectorTheme.accent)
+                }
+              )
+            },
+            dir
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-design-mode-ui": true,
+        "data-drag-handle": selected.nodeId,
+        style: getLabelStyle(labelLeft, labelTop, inspectorTheme.accent),
+        children: [
+          /* @__PURE__ */ jsx2("span", { style: LABEL_ICON_STYLE, children: "\u283F" }),
+          selected.label,
+          /* @__PURE__ */ jsxs("span", { style: LABEL_DIMENSIONS_STYLE, children: [
+            Math.round(rect.width),
+            "\xD7",
+            Math.round(rect.height)
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/client/dnd/design-mode/projection.ts
@@ -6566,30 +6601,6 @@ function applyDndCommandPlacement(command, direction, resolveNodeElement) {
   return true;
 }
 
-// src/client/dnd/design-mode/design-mode-collision.ts
-function filterDroppables(droppableContainers, blockedContainerIds) {
-  if (!blockedContainerIds || blockedContainerIds.size === 0) return droppableContainers;
-  return droppableContainers.filter((container) => !blockedContainerIds.has(String(container.id)));
-}
-function getCollisions(detector, args) {
-  return detector(args);
-}
-function createDesignModeCollisionDetection(blockedContainerIds) {
-  return (args) => {
-    const droppableContainers = filterDroppables(args.droppableContainers, blockedContainerIds);
-    if (droppableContainers.length === 0) return [];
-    const scopedArgs = {
-      ...args,
-      droppableContainers
-    };
-    const pointerHits = getCollisions(pointerWithin, scopedArgs);
-    if (pointerHits.length > 0) return pointerHits;
-    const cornerHits = getCollisions(closestCorners, scopedArgs);
-    if (cornerHits.length > 0) return cornerHits;
-    return getCollisions(closestCenter, scopedArgs);
-  };
-}
-
 // src/client/dnd/design-mode/arrange-session.ts
 function serializeArrangeChange(event, index) {
   return {
@@ -6868,9 +6879,9 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
   const lastIntentRef = useRef8(null);
   const visualIntentRef = useRef8(null);
   const sourceContainerIdRef = useRef8(null);
+  const activeLaneContainerIdRef = useRef8(null);
   const rowLockedRef = useRef8(false);
   const dragSessionAnchorRef = useRef8(null);
-  const lockRef = useRef8({ containerId: null, isCrossUnlocked: false, exitSince: null, unlockUntilTs: null });
   const targetPlaneRef = useRef8("lane");
   const nestCandidateRef = useRef8(null);
   const nestTargetRef = useRef8(null);
@@ -6880,7 +6891,6 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
   const sourceCommitLaneRef = useRef8(null);
   const commitLaneCacheRef = useRef8(/* @__PURE__ */ new Map());
   const safeZoneRef = useRef8(null);
-  const blockedContainerIdsRef = useRef8(/* @__PURE__ */ new Set());
   const historyRef = useRef8(new DndCommandHistory());
   const processedUndoIdRef = useRef8(undoRequestId);
   const processedRedoIdRef = useRef8(redoRequestId);
@@ -6900,9 +6910,9 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
     lastIntentRef,
     visualIntentRef,
     sourceContainerIdRef,
+    activeLaneContainerIdRef,
     rowLockedRef,
     dragSessionAnchorRef,
-    lockRef,
     targetPlaneRef,
     nestCandidateRef,
     nestTargetRef,
@@ -6912,7 +6922,6 @@ function useOverlayRefs(undoRequestId, redoRequestId) {
     sourceCommitLaneRef,
     commitLaneCacheRef,
     safeZoneRef,
-    blockedContainerIdsRef,
     historyRef,
     processedUndoIdRef,
     processedRedoIdRef,
@@ -7180,6 +7189,11 @@ function pointInRect(px, py, r) {
 function pointInExpandedRect(px, py, r, inset) {
   return px >= r.left - inset && px <= r.right + inset && py >= r.top - inset && py <= r.bottom + inset;
 }
+function isInNestZone(px, py, rect) {
+  const relX = (px - rect.left) / rect.width;
+  const relY = (py - rect.top) / rect.height;
+  return relX > NEST_EDGE_FRACTION && relX < 1 - NEST_EDGE_FRACTION && relY > NEST_EDGE_FRACTION && relY < 1 - NEST_EDGE_FRACTION;
+}
 function buildSlotQuadtree(slotIndex) {
   const rects = /* @__PURE__ */ new Map();
   for (const [id, slot] of slotIndex) {
@@ -7222,6 +7236,11 @@ var DragIntentEngine = class {
     __publicField(this, "laneAllowedContainers");
     __publicField(this, "blockedContainerIds");
     __publicField(this, "targetPlane", "lane");
+    // Memoized result of getValidDropContainerIds(). Safe to cache because every
+    // input it reads (containerIndex, slotIndex, activeId, laneAllowedContainers,
+    // blockedContainerIds) is fixed in the constructor and never mutated during
+    // a drag.
+    __publicField(this, "validDropContainerIds", null);
     this.projectionTree = projection.projectionTree;
     this.containerIndex = projection.containerIndex;
     this.slotIndex = projection.slotIndex;
@@ -7258,6 +7277,44 @@ var DragIntentEngine = class {
   getContainerChildren(containerId) {
     return this.containerIndex.get(containerId)?.children ?? [];
   }
+  /**
+   * Every container id this engine would accept as a drop target for the
+   * active node, at the current pointer position or any other — i.e. the
+   * full set `resolvePointerContainer` draws from, not a snapshot of one
+   * resolve() call. Intended for the visual layer to draw a guide that
+   * matches exactly what the engine can land on, without re-deriving the
+   * eligibility rule itself.
+   *
+   * Always queries with `laneLock: true`. That is not an approximation of
+   * the "real" default — it IS the real answer for every reachable caller:
+   *
+   * - With a row lock active (`laneAllowedContainers` set), `isLaneContainer`
+   *   restricts eligibility to that set, so this returns exactly
+   *   `{srcContainerId}` — the ARCH-1071 lock, reproduced faithfully.
+   * - Without a row lock, `laneAllowedContainers` is null and
+   *   `isLaneContainer` returns true unconditionally, so `laneLock`'s value
+   *   makes no difference — passing `true` costs nothing here.
+   * - The engine's own 'nest' plane does call `isEligibleDropContainer` with
+   *   `laneLock: false` (see `peekNestIntent` → `resolvePointerContainer`),
+   *   but that plane is unreachable for a locked drag: `computeAllowNest`
+   *   (useDragVisualLoop.ts) short-circuits `rowLocked` drags before
+   *   `setTargetPlane('nest')` is ever called, so `targetPlane` stays
+   *   'lane' for the drag's whole lifetime. If that guard is ever removed,
+   *   this method will under-report nest-only targets for locked drags —
+   *   keep the two in sync.
+   *
+   * Cached after the first call: every input (containerIndex, slotIndex,
+   * activeId, laneAllowedContainers, blockedContainerIds) is fixed at
+   * construction and never changes for the life of a drag.
+   */
+  getValidDropContainerIds() {
+    if (this.validDropContainerIds) return this.validDropContainerIds;
+    const ids2 = /* @__PURE__ */ new Set();
+    for (const id of this.containerIndex.keys()) {
+      if (this.isEligibleDropContainer(id, true)) ids2.add(id);
+    }
+    return this.validDropContainerIds = ids2;
+  }
   setTargetPlane(plane) {
     this.targetPlane = plane;
   }
@@ -7276,6 +7333,17 @@ var DragIntentEngine = class {
   isInvalidDropContainer(containerId) {
     return containerId === this.activeId || this.isContainerDescendantOf(containerId, this.activeId);
   }
+  /**
+   * The full "can this container accept the active node this drag" predicate.
+   * SINGLE definition — every caller routes through it so no two parts of the
+   * system can disagree about which containers are droppable.
+   */
+  isEligibleDropContainer(containerId, laneLock) {
+    if (this.isInvalidDropContainer(containerId)) return false;
+    if (this.isBlockedContainer(containerId)) return false;
+    if (laneLock && !this.isLaneContainer(containerId)) return false;
+    return this.hasUsableSlots(containerId);
+  }
   /**
    * Resolve the drag intent from the current pointer position.
    *
@@ -7363,9 +7431,7 @@ var DragIntentEngine = class {
       const childNode = this.getNodeRect(childId);
       if (!childNode) continue;
       if (!pointInRect(px, py, childNode)) continue;
-      const relX = (px - childNode.left) / childNode.width;
-      const relY = (py - childNode.top) / childNode.height;
-      if (relX > NEST_EDGE_FRACTION && relX < 1 - NEST_EDGE_FRACTION && relY > NEST_EDGE_FRACTION && relY < 1 - NEST_EDGE_FRACTION) {
+      if (isInNestZone(px, py, childNode)) {
         return {
           containerId: pointerContainerId,
           index: container.children.indexOf(childId),
@@ -7379,11 +7445,8 @@ var DragIntentEngine = class {
   resolvePointerContainer(px, py, laneLock) {
     const pointerContainers = [];
     for (const [id, node] of this.containerIndex) {
-      if (this.isInvalidDropContainer(id)) continue;
-      if (this.isBlockedContainer(id)) continue;
-      if (laneLock && !this.isLaneContainer(id)) continue;
       if (!pointInRect(px, py, node.rect)) continue;
-      if (this.hasUsableSlots(id) === false) continue;
+      if (!this.isEligibleDropContainer(id, laneLock)) continue;
       const r = node.rect;
       const edgeDistX = Math.min(px - r.left, r.right - px);
       const edgeDistY = Math.min(py - r.top, r.bottom - py);
@@ -7400,11 +7463,11 @@ var DragIntentEngine = class {
     let pointerContainerId = pointerContainers[0]?.id ?? null;
     if (!pointerContainerId && this.lastIntent?.mode === "reorder") {
       const lastContainer = this.containerIndex.get(this.lastIntent.containerId);
-      if (lastContainer && !this.isInvalidDropContainer(lastContainer.id) && !this.isBlockedContainer(lastContainer.id) && (!laneLock || this.isLaneContainer(lastContainer.id)) && this.hasUsableSlots(lastContainer.id) && pointInExpandedRect(px, py, lastContainer.rect, LAST_CONTAINER_REENTRY_SLOP_PX)) {
+      if (lastContainer && this.isEligibleDropContainer(lastContainer.id, laneLock) && pointInExpandedRect(px, py, lastContainer.rect, LAST_CONTAINER_REENTRY_SLOP_PX)) {
         pointerContainerId = lastContainer.id;
       }
     }
-    if (this.originContainerId && this.originContainerId !== pointerContainerId && !this.isInvalidDropContainer(this.originContainerId) && !this.isBlockedContainer(this.originContainerId) && (!laneLock || this.isLaneContainer(this.originContainerId)) && this.hasUsableSlots(this.originContainerId)) {
+    if (this.originContainerId && this.originContainerId !== pointerContainerId && this.isEligibleDropContainer(this.originContainerId, laneLock)) {
       const originNode = this.containerIndex.get(this.originContainerId);
       const currentNode = pointerContainerId ? this.containerIndex.get(pointerContainerId) : null;
       const originIsDeeper = originNode && (!currentNode || originNode.depth >= currentNode.depth);
@@ -7817,7 +7880,8 @@ function useDragVisualLoop({
   refs,
   getCommitLaneSnapshot,
   setInsideRect,
-  setDropLine
+  setDropLine,
+  setActiveLaneContainerId
 }) {
   useEffect8(() => {
     const engine = refs.engineRef.current;
@@ -7825,6 +7889,11 @@ function useDragVisualLoop({
     if (!activeDrag || !engine || !snapshot) return;
     let rafId;
     const animator = refs.animatorRef.current;
+    const publishActiveLane = (containerId) => {
+      if (refs.activeLaneContainerIdRef.current === containerId) return;
+      refs.activeLaneContainerIdRef.current = containerId;
+      setActiveLaneContainerId(containerId);
+    };
     const setTargetPlane = (nextPlane) => {
       const prevPlane = refs.targetPlaneRef.current;
       if (prevPlane === nextPlane) return;
@@ -7843,6 +7912,7 @@ function useDragVisualLoop({
       const safeZone = refs.safeZoneRef.current;
       if (isPointerBlocked(px, py, safeZone)) {
         setTargetPlane("lane");
+        publishActiveLane(null);
         refs.lastIntentRef.current = null;
         refs.visualIntentRef.current = null;
         refs.nestCandidateRef.current = null;
@@ -7884,6 +7954,7 @@ function useDragVisualLoop({
       let intent = engine.resolve(px, py, window.scrollX, window.scrollY, snapshot.scroll.x, snapshot.scroll.y);
       if (!intent) {
         setTargetPlane("lane");
+        publishActiveLane(null);
         refs.lastIntentRef.current = null;
         refs.visualIntentRef.current = null;
         refs.nestCandidateRef.current = null;
@@ -7909,6 +7980,7 @@ function useDragVisualLoop({
         const targetId = intent.slotId.split("::nest::")[1] ?? "";
         if (!targetId) {
           setTargetPlane("lane");
+          publishActiveLane(null);
           rafId = requestAnimationFrame(tick);
           return;
         }
@@ -7930,12 +8002,14 @@ function useDragVisualLoop({
         };
         refs.visualIntentRef.current = intent;
         refs.lastIntentRef.current = intent;
+        publishActiveLane(intent.containerId);
       } else {
         setTargetPlane("lane");
         refs.nestCandidateRef.current = null;
         refs.nestTargetRef.current = null;
         refs.lastIntentRef.current = intent;
         refs.visualIntentRef.current = intent;
+        publishActiveLane(intent.containerId);
         setInsideRect(null);
         const proj = refs.projectionRef.current;
         const slot = proj.slotIndex.get(intent.slotId);
@@ -8242,7 +8316,8 @@ function useDragLifecycle({
   syncHistoryAvailability,
   resolveNodeElement,
   setInsideRect,
-  setDropLine
+  setDropLine,
+  setActiveLaneContainerId
 }) {
   const [activeDrag, setActiveDrag] = useState5(null);
   const clearDragState = useCallback6(() => {
@@ -8253,13 +8328,12 @@ function useDragLifecycle({
     refs.snapshotRef.current = null;
     refs.projectionRef.current = EMPTY_PROJECTION;
     refs.engineRef.current = null;
-    refs.blockedContainerIdsRef.current = /* @__PURE__ */ new Set();
     refs.lastIntentRef.current = null;
     refs.visualIntentRef.current = null;
     refs.sourceContainerIdRef.current = null;
+    refs.activeLaneContainerIdRef.current = null;
     refs.rowLockedRef.current = false;
     refs.dragSessionAnchorRef.current = null;
-    refs.lockRef.current = { containerId: null, isCrossUnlocked: false, exitSince: null, unlockUntilTs: null };
     refs.targetPlaneRef.current = "lane";
     refs.nestCandidateRef.current = null;
     refs.nestTargetRef.current = null;
@@ -8270,6 +8344,7 @@ function useDragLifecycle({
     refs.safeZoneRef.current = null;
     setInsideRect(null);
     setDropLine(null);
+    setActiveLaneContainerId(null);
     setActiveDrag(null);
     resume();
   }, [clearCommitLaneCache, resume]);
@@ -8327,7 +8402,6 @@ function useDragLifecycle({
     const sourceCommitLane = getCommitLaneSnapshot(srcContainerId);
     const startPosition = getCurrentCommitPlacement(anchorNodeId, srcContainerId);
     const blockedContainerIds = buildBlockedStructuralContainerIds(proj, refs.nodeMapRef.current, srcContainerId);
-    refs.blockedContainerIdsRef.current = blockedContainerIds;
     const engineOptions = buildDragIntentEngineOptions(anchorScanned.element, srcContainerId, blockedContainerIds);
     refs.rowLockedRef.current = !!engineOptions.laneAllowedContainers;
     refs.engineRef.current = createDragIntentEngine(proj, anchorNodeId, engineOptions);
@@ -8336,7 +8410,6 @@ function useDragLifecycle({
     refs.sourceContainerIdRef.current = srcContainerId;
     refs.sourceCommitLaneRef.current = sourceCommitLane;
     refs.dragSessionAnchorRef.current = anchor;
-    refs.lockRef.current = { containerId: srcContainerId, isCrossUnlocked: true, exitSince: null, unlockUntilTs: null };
     refs.dragStartPositionRef.current = startPosition;
     refs.safeZoneRef.current = resolveSafeZoneRect();
     pause();
@@ -8895,6 +8968,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
 // src/client/dnd/design-mode/DesignModeOverlay.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DROP_ANIMATION = { duration: DURATION_MS, easing: EASING };
+var EMPTY_CONTAINER_ID_SET = /* @__PURE__ */ new Set();
 function resizeCursorFromHandle(handle) {
   switch (handle) {
     case "n":
@@ -9182,13 +9256,9 @@ function DesignModeOverlay() {
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
   );
-  const collisionDetection = useCallback8(
-    (args) => createDesignModeCollisionDetection(refs.blockedContainerIdsRef.current)(args),
-    []
-    // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
-  );
   const [insideRect, setInsideRect] = useState6(null);
   const [dropLine, setDropLine] = useState6(null);
+  const [activeLaneContainerId, setActiveLaneContainerId] = useState6(null);
   useEffect11(() => {
     if (!enabled) return;
     const fn = (e) => {
@@ -9224,8 +9294,43 @@ function DesignModeOverlay() {
     syncHistoryAvailability,
     resolveNodeElement,
     setInsideRect,
-    setDropLine
+    setDropLine,
+    setActiveLaneContainerId
   });
+  const dropCandidateContainerIds = useMemo6(
+    () => activeDrag ? refs.engineRef.current?.getValidDropContainerIds() ?? null : null,
+    [activeDrag]
+    // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
+  );
+  const visibleCandidateContainerIds = useMemo6(() => {
+    if (!dropCandidateContainerIds) return null;
+    const rects = refs.snapshotRef.current?.rects;
+    if (!rects) return dropCandidateContainerIds;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const visible = /* @__PURE__ */ new Set();
+    for (const id of dropCandidateContainerIds) {
+      const r = rects.get(id);
+      if (!r) continue;
+      if (r.right < 0 || r.bottom < 0 || r.left > vw || r.top > vh) continue;
+      visible.add(id);
+    }
+    return visible;
+  }, [dropCandidateContainerIds]);
+  const dragGuide = useMemo6(() => {
+    if (!activeDrag) return null;
+    const snapshot = refs.snapshotRef.current;
+    if (!snapshot) return null;
+    const activeChildIds = activeLaneContainerId ? refs.engineRef.current?.getContainerChildren(activeLaneContainerId) ?? [] : [];
+    return {
+      rects: snapshot.rects,
+      startScroll: snapshot.scroll,
+      candidateContainerIds: visibleCandidateContainerIds ?? EMPTY_CONTAINER_ID_SET,
+      activeContainerId: activeLaneContainerId,
+      activeChildIds,
+      draggingNodeId: activeDrag.nodeId
+    };
+  }, [activeDrag, activeLaneContainerId, visibleCandidateContainerIds]);
   useEffect11(() => {
     if (!enabled || activeDrag) return;
     if (undoRequestId === refs.processedUndoIdRef.current) return;
@@ -9288,7 +9393,7 @@ function DesignModeOverlay() {
     safeZoneRef: refs.safeZoneRef,
     autoScrollStateRef: refs.autoScrollStateRef
   });
-  useDragVisualLoop({ activeDrag, refs, getCommitLaneSnapshot, setInsideRect, setDropLine });
+  useDragVisualLoop({ activeDrag, refs, getCommitLaneSnapshot, setInsideRect, setDropLine, setActiveLaneContainerId });
   useExternalDragLoop({
     externalDrag,
     refs,
@@ -9308,7 +9413,6 @@ function DesignModeOverlay() {
     DndContext,
     {
       sensors,
-      collisionDetection,
       autoScroll: false,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
@@ -9317,10 +9421,8 @@ function DesignModeOverlay() {
         /* @__PURE__ */ jsx4(
           ElementHighlight,
           {
-            elements,
-            draggingNodeId: activeDrag?.nodeId ?? null,
-            activeEl: refs.activeElRef.current,
-            arrangeSelectedNodeId,
+            selected: arrangeSelectedNodeId ? nodeMap.get(arrangeSelectedNodeId) ?? null : null,
+            dragGuide,
             externalDragActive: externalDrag !== null,
             onResizeHandlePointerDown: handleResizeHandlePointerDown
           }