@archie/devtools 0.1.8 → 0.1.10

package/README.md

@@ -156,6 +156,24 @@ Tests follow a colocated-by-feature convention:
 
 ## Release notes
 
+### 0.1.9
+
+Fixes the `arrange-session-changed` index for a move onto a screen's own
+root (0.1.8's screen-root translation) so it matches the direct
+`ELEMENT_MOVED` event.
+
+- **Screen-root move index.** `recordCommittedMove`'s `after` payload (the
+  one `serializeArrangeChange` reads as `event.payload.after.index` for the
+  `arrange-session-changed` change entry) carried the raw DOM-child index
+  (`command.to.index`) even when the drop resolved to a screen-root target,
+  instead of `screenRootTarget.index` — the position remapped to count only
+  the screen's own root children. The direct `element-moved` runtime event
+  already used the remapped index; only the session-change payload lagged.
+  In the common case (no runtime-injected chrome interleaved among a
+  screen's root children) the two indices coincide and nothing broke; the
+  mismatch only surfaced when chrome sat between screen-root children and
+  the drop slot was valid but not adjacent to the chrome node.
+
 ### 0.1.8
 
 Fixes two related cases where a palette drop or an in-canvas move could

package/dist/client/client.js

@@ -5335,6 +5335,17 @@ var MIN_WIDTH = 40;
 var MIN_HEIGHT = 20;
 var INTERACTIVE_MIN = 8;
 var MAX_DEPTH = 12;
+var COLLAPSED_CONTAINER_HIT_MIN = 24;
+function collapsedContainerHitRect(el, rect) {
+  if (el.children.length > 0 || el.textContent?.trim()) return null;
+  if (getDirectEditorMeta(el)?.containerKind !== "plain") return null;
+  if (el.getClientRects().length === 0) return null;
+  const width = Math.max(rect.width, COLLAPSED_CONTAINER_HIT_MIN);
+  const height = Math.max(rect.height, COLLAPSED_CONTAINER_HIT_MIN);
+  const left = rect.left + rect.width / 2 - width / 2;
+  const top = rect.top + rect.height / 2 - height / 2;
+  return new DOMRect(left, top, width, height);
+}
 var _runtimeNodeIdMap = /* @__PURE__ */ new WeakMap();
 var _runtimeNodeIdCounter = 0;
 function getRuntimeNodeId(el) {
@@ -5486,7 +5497,8 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
           const nodeId2 = resolveStableNodeId(el, usedNodeIds);
           usedNodeIds.add(nodeId2);
           el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
-          if (isZeroRect) {
+          const collapsedHitRect = isZeroRect && !isSvgRoot ? collapsedContainerHitRect(el, rect) : null;
+          if (isZeroRect && !collapsedHitRect) {
             resolvedUnreported.add(el);
           } else {
             seenResolvedHosts.add(el);
@@ -5503,7 +5515,7 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
               resolvedHostSelector: selector,
               resolutionKind: "direct-host",
               label: getLabel(el),
-              rect,
+              rect: collapsedHitRect ?? rect,
               containerStrategy: parentEl2 && isFlexOrGridParent(parentEl2) ? resolveContainerStrategy(parentEl2) : null,
               eligibilitySource: smallEligibility,
               draggable: false,
@@ -7407,7 +7419,7 @@ function computeSlotBoundaryPoint(slot, container, projectionTree) {
   {
     let lineY;
     if (n === 0) {
-      lineY = container.rect.top;
+      lineY = container.rect.top + container.rect.height / 2;
     } else if (i === 0) {
       lineY = nodeRect(children[0])?.top ?? container.rect.top;
     } else if (i >= n) {
@@ -7912,6 +7924,7 @@ function createDragIntentEngine(projection, activeId, options) {
 // src/client/dnd/design-mode/drop-line.ts
 var DROP_LINE_THICKNESS_PX = 2;
 var DROP_LINE_MIN_LENGTH_PX = 40;
+var EMPTY_CONTAINER_INSET_PX = 8;
 function slotDropLine(slot, container, projectionTree, sdx, sdy) {
   const T = DROP_LINE_THICKNESS_PX;
   const MIN = DROP_LINE_MIN_LENGTH_PX;
@@ -7945,6 +7958,14 @@ function slotDropLine(slot, container, projectionTree, sdx, sdy) {
       };
     }
   }
+  if (container.children.length === 0 && container.rect.width > 2 * EMPTY_CONTAINER_INSET_PX + MIN) {
+    return {
+      x: container.rect.left + EMPTY_CONTAINER_INSET_PX - sdx,
+      y: bp.y - sdy - T / 2,
+      width: container.rect.width - 2 * EMPTY_CONTAINER_INSET_PX,
+      height: T
+    };
+  }
   return {
     x: container.rect.left - sdx,
     y: bp.y - sdy - T / 2,
@@ -8154,6 +8175,27 @@ function computeAllowNest(nestPreview, isLargeDraggedNode, rowLocked) {
   const childId = nestPreview.slotId.split("::nest::")[1] ?? "";
   return !!childId && !isLargeDraggedNode;
 }
+function resolveContainerHold(params) {
+  const { intent, previousIntent, sourceContainerId, projection, x, y } = params;
+  if (intent.mode !== "reorder" || previousIntent?.mode !== "reorder") return intent;
+  if (previousIntent.containerId === intent.containerId) return intent;
+  if (intent.containerId === sourceContainerId) return intent;
+  if (isProjectedDescendant(intent.containerId, previousIntent.containerId, projection.projectionTree)) {
+    return intent;
+  }
+  const prev = projection.containerIndex.get(previousIntent.containerId);
+  if (!prev) return intent;
+  const inPrevExpanded = x >= prev.rect.left - CONTAINER_SWITCH_HYSTERESIS && x <= prev.rect.right + CONTAINER_SWITCH_HYSTERESIS && y >= prev.rect.top - CONTAINER_SWITCH_HYSTERESIS && y <= prev.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
+  return inPrevExpanded ? previousIntent : intent;
+}
+function isProjectedDescendant(id, ancestorId, tree) {
+  let parentId = tree.get(id)?.parentId ?? null;
+  while (parentId) {
+    if (parentId === ancestorId) return true;
+    parentId = tree.get(parentId)?.parentId ?? null;
+  }
+  return false;
+}
 function useDragVisualLoop({
   activeDrag,
   refs,
@@ -8245,15 +8287,14 @@ function useDragVisualLoop({
         rafId = requestAnimationFrame(tick);
         return;
       }
-      const previousIntent = refs.lastIntentRef.current;
-      const isReturningToSource = intent.mode === "reorder" && intent.containerId === refs.sourceContainerIdRef.current;
-      if (!isReturningToSource && previousIntent?.mode === "reorder" && intent.mode === "reorder" && previousIntent.containerId !== intent.containerId) {
-        const prevContainer = refs.projectionRef.current.containerIndex.get(previousIntent.containerId);
-        if (prevContainer) {
-          const inPrevExpanded = adjustedPx >= prevContainer.rect.left - CONTAINER_SWITCH_HYSTERESIS && adjustedPx <= prevContainer.rect.right + CONTAINER_SWITCH_HYSTERESIS && adjustedPy >= prevContainer.rect.top - CONTAINER_SWITCH_HYSTERESIS && adjustedPy <= prevContainer.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
-          if (inPrevExpanded) intent = previousIntent;
-        }
-      }
+      intent = resolveContainerHold({
+        intent,
+        previousIntent: refs.lastIntentRef.current,
+        sourceContainerId: refs.sourceContainerIdRef.current,
+        projection: refs.projectionRef.current,
+        x: adjustedPx,
+        y: adjustedPy
+      });
       if (intent.mode === "nest") {
         setTargetPlane("nest");
         const targetId = intent.slotId.split("::nest::")[1] ?? "";
@@ -8577,7 +8618,7 @@ function recordCommittedMove(args) {
     commitIdentity: sourceCommitIdentity
   });
   const afterPayload = buildMovePayloadWithEffectiveIdentities({
-    placement: command.to,
+    placement: screenRootTarget ? { ...command.to, index: screenRootTarget.index } : command.to,
     containerIdentity,
     beforeSiblingIdentity,
     afterSiblingIdentity,
@@ -10230,7 +10271,7 @@ function isPreviewOrigin(origin) {
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
 var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
 function readBuildVersion() {
-  return "0.1.8" ? "0.1.8" : null;
+  return "0.1.10" ? "0.1.10" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/client/client.mjs

@@ -5300,6 +5300,17 @@ var MIN_WIDTH = 40;
 var MIN_HEIGHT = 20;
 var INTERACTIVE_MIN = 8;
 var MAX_DEPTH = 12;
+var COLLAPSED_CONTAINER_HIT_MIN = 24;
+function collapsedContainerHitRect(el, rect) {
+  if (el.children.length > 0 || el.textContent?.trim()) return null;
+  if (getDirectEditorMeta(el)?.containerKind !== "plain") return null;
+  if (el.getClientRects().length === 0) return null;
+  const width = Math.max(rect.width, COLLAPSED_CONTAINER_HIT_MIN);
+  const height = Math.max(rect.height, COLLAPSED_CONTAINER_HIT_MIN);
+  const left = rect.left + rect.width / 2 - width / 2;
+  const top = rect.top + rect.height / 2 - height / 2;
+  return new DOMRect(left, top, width, height);
+}
 var _runtimeNodeIdMap = /* @__PURE__ */ new WeakMap();
 var _runtimeNodeIdCounter = 0;
 function getRuntimeNodeId(el) {
@@ -5451,7 +5462,8 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
           const nodeId2 = resolveStableNodeId(el, usedNodeIds);
           usedNodeIds.add(nodeId2);
           el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
-          if (isZeroRect) {
+          const collapsedHitRect = isZeroRect && !isSvgRoot ? collapsedContainerHitRect(el, rect) : null;
+          if (isZeroRect && !collapsedHitRect) {
             resolvedUnreported.add(el);
           } else {
             seenResolvedHosts.add(el);
@@ -5468,7 +5480,7 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
               resolvedHostSelector: selector,
               resolutionKind: "direct-host",
               label: getLabel(el),
-              rect,
+              rect: collapsedHitRect ?? rect,
               containerStrategy: parentEl2 && isFlexOrGridParent(parentEl2) ? resolveContainerStrategy(parentEl2) : null,
               eligibilitySource: smallEligibility,
               draggable: false,
@@ -7372,7 +7384,7 @@ function computeSlotBoundaryPoint(slot, container, projectionTree) {
   {
     let lineY;
     if (n === 0) {
-      lineY = container.rect.top;
+      lineY = container.rect.top + container.rect.height / 2;
     } else if (i === 0) {
       lineY = nodeRect(children[0])?.top ?? container.rect.top;
     } else if (i >= n) {
@@ -7877,6 +7889,7 @@ function createDragIntentEngine(projection, activeId, options) {
 // src/client/dnd/design-mode/drop-line.ts
 var DROP_LINE_THICKNESS_PX = 2;
 var DROP_LINE_MIN_LENGTH_PX = 40;
+var EMPTY_CONTAINER_INSET_PX = 8;
 function slotDropLine(slot, container, projectionTree, sdx, sdy) {
   const T = DROP_LINE_THICKNESS_PX;
   const MIN = DROP_LINE_MIN_LENGTH_PX;
@@ -7910,6 +7923,14 @@ function slotDropLine(slot, container, projectionTree, sdx, sdy) {
       };
     }
   }
+  if (container.children.length === 0 && container.rect.width > 2 * EMPTY_CONTAINER_INSET_PX + MIN) {
+    return {
+      x: container.rect.left + EMPTY_CONTAINER_INSET_PX - sdx,
+      y: bp.y - sdy - T / 2,
+      width: container.rect.width - 2 * EMPTY_CONTAINER_INSET_PX,
+      height: T
+    };
+  }
   return {
     x: container.rect.left - sdx,
     y: bp.y - sdy - T / 2,
@@ -8119,6 +8140,27 @@ function computeAllowNest(nestPreview, isLargeDraggedNode, rowLocked) {
   const childId = nestPreview.slotId.split("::nest::")[1] ?? "";
   return !!childId && !isLargeDraggedNode;
 }
+function resolveContainerHold(params) {
+  const { intent, previousIntent, sourceContainerId, projection, x, y } = params;
+  if (intent.mode !== "reorder" || previousIntent?.mode !== "reorder") return intent;
+  if (previousIntent.containerId === intent.containerId) return intent;
+  if (intent.containerId === sourceContainerId) return intent;
+  if (isProjectedDescendant(intent.containerId, previousIntent.containerId, projection.projectionTree)) {
+    return intent;
+  }
+  const prev = projection.containerIndex.get(previousIntent.containerId);
+  if (!prev) return intent;
+  const inPrevExpanded = x >= prev.rect.left - CONTAINER_SWITCH_HYSTERESIS && x <= prev.rect.right + CONTAINER_SWITCH_HYSTERESIS && y >= prev.rect.top - CONTAINER_SWITCH_HYSTERESIS && y <= prev.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
+  return inPrevExpanded ? previousIntent : intent;
+}
+function isProjectedDescendant(id, ancestorId, tree) {
+  let parentId = tree.get(id)?.parentId ?? null;
+  while (parentId) {
+    if (parentId === ancestorId) return true;
+    parentId = tree.get(parentId)?.parentId ?? null;
+  }
+  return false;
+}
 function useDragVisualLoop({
   activeDrag,
   refs,
@@ -8210,15 +8252,14 @@ function useDragVisualLoop({
         rafId = requestAnimationFrame(tick);
         return;
       }
-      const previousIntent = refs.lastIntentRef.current;
-      const isReturningToSource = intent.mode === "reorder" && intent.containerId === refs.sourceContainerIdRef.current;
-      if (!isReturningToSource && previousIntent?.mode === "reorder" && intent.mode === "reorder" && previousIntent.containerId !== intent.containerId) {
-        const prevContainer = refs.projectionRef.current.containerIndex.get(previousIntent.containerId);
-        if (prevContainer) {
-          const inPrevExpanded = adjustedPx >= prevContainer.rect.left - CONTAINER_SWITCH_HYSTERESIS && adjustedPx <= prevContainer.rect.right + CONTAINER_SWITCH_HYSTERESIS && adjustedPy >= prevContainer.rect.top - CONTAINER_SWITCH_HYSTERESIS && adjustedPy <= prevContainer.rect.bottom + CONTAINER_SWITCH_HYSTERESIS;
-          if (inPrevExpanded) intent = previousIntent;
-        }
-      }
+      intent = resolveContainerHold({
+        intent,
+        previousIntent: refs.lastIntentRef.current,
+        sourceContainerId: refs.sourceContainerIdRef.current,
+        projection: refs.projectionRef.current,
+        x: adjustedPx,
+        y: adjustedPy
+      });
       if (intent.mode === "nest") {
         setTargetPlane("nest");
         const targetId = intent.slotId.split("::nest::")[1] ?? "";
@@ -8542,7 +8583,7 @@ function recordCommittedMove(args) {
     commitIdentity: sourceCommitIdentity
   });
   const afterPayload = buildMovePayloadWithEffectiveIdentities({
-    placement: command.to,
+    placement: screenRootTarget ? { ...command.to, index: screenRootTarget.index } : command.to,
     containerIdentity,
     beforeSiblingIdentity,
     afterSiblingIdentity,
@@ -10195,7 +10236,7 @@ function isPreviewOrigin(origin) {
 var DEFAULT_SCRIPT_ID = "archie-inspector-script";
 var R2_INSPECTOR_BASE_URL = "https://pub-bf238c278d9644b39ec34ecaca1d315c.r2.dev";
 function readBuildVersion() {
-  return "0.1.8" ? "0.1.8" : null;
+  return "0.1.10" ? "0.1.10" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "sideEffects": false,
   "repository": {