@archie/devtools 0.1.7 → 0.1.9

package/README.md

@@ -156,6 +156,59 @@ 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
+land somewhere the host would later discard, instead of refusing the
+gesture up front:
+
+- **Screen-root translation.** A drop/insert that lands inside the app
+  shell's children-slot container (kit-internal/chrome,
+  `containerKind: 'expression'` — the element that renders `{children}`)
+  between the screen's own root nodes now translates to a screen-root
+  target instead of an ordinary container insert. The wire message
+  (`ELEMENT_INSERTED`/`ELEMENT_MOVED`, and `arrange-session-changed`'s
+  per-change entries) carries `screenRootFile` (the screen's file) and an
+  `index` remapped to the position among the screen's own root children —
+  `containerVid` is unchanged, still the observed DOM container.
+- **Text/expression containers, and every other chrome/kit-internal
+  container.** Any OTHER drop/insert into app-shell/kit chrome, or into a
+  non-plain (`containerKind !== 'plain'`) element such as a text-bearing
+  `<p>`/`<h3>`/`<span>`, now refuses the gesture instead of completing —
+  the engine falls back to the nearest enclosing PLAIN container under the
+  pointer when one exists (e.g. the card `<div>` wrapping a paragraph), or
+  refuses the gesture entirely when none does. This also fixes a gap where
+  the external-palette-insert path (`useExternalDragLoop.ts`) never applied
+  the `NodeMeta`-derived chrome/kit-origin/non-plain blocking at all, unlike
+  the in-canvas move path — every palette drop onto text or app-shell chrome
+  used to be accepted and silently discarded by the host afterward.
+
+The `screenRootFile` wire field is additive: a host whose own
+`@8base-archie/editor-protocol` copy has not yet added
+`DropMessage.screenRootFile` simply ignores it. This package does not
+construct `InsertOp`/`MoveOp` itself, and does not import any
+`@8base-archie/editor-protocol` schema at runtime (only two plain constants,
+`VID_ATTR`/`VID_PATTERN` — everything else is `import type`), so it carries
+no dependency-version coupling to this change.
+
 ### 0.1.5
 
 Treats a JSX comment (`{/* ... */}`) as a plain container, not an expression

package/dist/client/client.js

@@ -4119,7 +4119,8 @@ function summarizeRuntimeEvent(detail) {
         diagnostics: detail.diagnostics ?? null,
         targetVid: detail.targetVid ?? null,
         containerVid: detail.containerVid ?? null,
-        index: detail.index
+        index: detail.index,
+        screenRootFile: detail.screenRootFile ?? null
       };
     case "drag-started":
       return { targetVid: detail.targetVid, droppableCount: detail.droppable.length };
@@ -4150,6 +4151,7 @@ function summarizeRuntimeEvent(detail) {
         containerVid: detail.containerVid ?? null,
         insertedVid: detail.insertedVid ?? null,
         index: detail.index,
+        screenRootFile: detail.screenRootFile ?? null,
         beforeSibling: summarizeIdentity(detail.beforeSibling),
         hasTsxCode: !!detail.tsxCode,
         htmlLength: detail.html?.length ?? 0
@@ -4245,6 +4247,54 @@ function isNonDraggableNodeMeta(meta) {
   if (meta.isKitOrigin) return true;
   return false;
 }
+var SCREEN_FILE_RE = /(?:^|\/)screens\//;
+function isScreenRootMeta(meta) {
+  return !!meta && !!meta.file && SCREEN_FILE_RE.test(meta.file) && meta.parentNodeId === null;
+}
+function isUnsavedScreenRootCandidate(nodeId) {
+  return nodeId.startsWith("insert:");
+}
+function isScreenRootChild(nodeId, nodeMap) {
+  const meta = nodeMap.get(nodeId)?.editorMeta;
+  if (meta) return isScreenRootMeta(meta);
+  return isUnsavedScreenRootCandidate(nodeId);
+}
+function isChildrenSlotContainer(meta) {
+  if (!meta) return false;
+  if (meta.containerKind !== "expression") return false;
+  return !!(meta.isChrome || meta.isKitOrigin || meta.isKitContainer);
+}
+function findScreenRootHostFile(containerId, projection, nodeMap) {
+  if (!isChildrenSlotContainer(nodeMap.get(containerId)?.editorMeta)) return null;
+  const container = projection.containerIndex.get(containerId);
+  if (!container) return null;
+  for (const childId of container.children) {
+    const childMeta = nodeMap.get(childId)?.editorMeta;
+    if (isScreenRootMeta(childMeta)) return childMeta.file;
+  }
+  return null;
+}
+function resolveScreenRootDropTarget(containerId, domIndex, projection, nodeMap) {
+  const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+  if (!screenRootFile) return null;
+  const container = projection.containerIndex.get(containerId);
+  if (!container) return null;
+  const children = container.children;
+  const before = domIndex > 0 ? children[domIndex - 1] : null;
+  const after = domIndex < children.length ? children[domIndex] : null;
+  if (before && !isScreenRootChild(before, nodeMap)) return null;
+  if (after && !isScreenRootChild(after, nodeMap)) return null;
+  let index = 0;
+  for (let i = 0; i < domIndex && i < children.length; i += 1) {
+    if (isScreenRootChild(children[i], nodeMap)) index += 1;
+  }
+  return { screenRootFile, index };
+}
+function isBlockedDropContainer(containerId, projection, nodeMap) {
+  const meta = nodeMap.get(containerId)?.editorMeta;
+  if (!isNonDroppableNodeMeta(meta)) return false;
+  return findScreenRootHostFile(containerId, projection, nodeMap) === null;
+}
 function collectSubtreeIds(rootId, projection) {
   const ids2 = /* @__PURE__ */ new Set([rootId]);
   const stack = [rootId];
@@ -4267,8 +4317,9 @@ function computeDroppableSet(sourceId, projection, nodeMap) {
   for (const containerId of projection.containerIndex.keys()) {
     if (excluded.has(containerId)) continue;
     if (isStructuralContainer(containerId, nodeMap)) continue;
-    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) continue;
-    const containerFile = nodeMap.get(containerId)?.editorMeta?.file;
+    if (isBlockedDropContainer(containerId, projection, nodeMap)) continue;
+    const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+    const containerFile = screenRootFile ?? nodeMap.get(containerId)?.editorMeta?.file;
     if (sourceFile && containerFile && containerFile !== sourceFile) continue;
     droppable.add(containerId);
   }
@@ -4278,11 +4329,12 @@ function buildBlockedNodeMetaContainerIds(projection, nodeMap, sourceId) {
   const sourceFile = sourceId ? nodeMap.get(sourceId)?.editorMeta?.file : void 0;
   const blocked = /* @__PURE__ */ new Set();
   for (const containerId of projection.containerIndex.keys()) {
-    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) {
+    if (isBlockedDropContainer(containerId, projection, nodeMap)) {
       blocked.add(containerId);
       continue;
     }
-    const containerFile = nodeMap.get(containerId)?.editorMeta?.file;
+    const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+    const containerFile = screenRootFile ?? nodeMap.get(containerId)?.editorMeta?.file;
     if (sourceFile && containerFile && containerFile !== sourceFile) {
       blocked.add(containerId);
     }
@@ -4935,6 +4987,7 @@ var useDesignModeStore = create((set, get) => ({
     binding,
     targetVid,
     containerVid,
+    screenRootFile,
     componentName,
     before,
     after
@@ -4964,6 +5017,7 @@ var useDesignModeStore = create((set, get) => ({
       binding: binding ?? null,
       targetVid: targetVid ?? null,
       containerVid: containerVid ?? null,
+      screenRootFile: screenRootFile ?? null,
       payload: { before, after },
       at: now
     };
@@ -5040,6 +5094,7 @@ var useDesignModeStore = create((set, get) => ({
     containerNodeKey,
     containerVid,
     insertedVid,
+    screenRootFile,
     index,
     beforeSiblingInspectorRef,
     beforeSiblingNodeKey
@@ -5060,6 +5115,7 @@ var useDesignModeStore = create((set, get) => ({
       containerNodeKey,
       containerVid: containerVid ?? null,
       insertedVid: insertedVid ?? null,
+      screenRootFile: screenRootFile ?? null,
       index,
       beforeSiblingInspectorRef: beforeSiblingInspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingNodeKey ?? null,
@@ -6839,6 +6895,11 @@ function serializeArrangeChange(event, index) {
     // the drop container's vid on an `insert` change.
     targetVid: event.kind === "move" || event.kind === "resize" ? event.targetVid : void 0,
     containerVid: event.kind === "move" || event.kind === "insert" ? event.containerVid : void 0,
+    // ARCH — arrange screen-root: `screenRootFile` names the screen the
+    // destination resolved to, on both a move (kind: 'move') and an insert
+    // (kind: 'insert') that landed on the screen's own root — see
+    // `RuntimeMoveDetail.screenRootFile` (`host-bridge.ts`).
+    screenRootFile: event.kind === "move" || event.kind === "insert" ? event.screenRootFile : void 0,
     index: event.kind === "move" ? event.payload.after.index : void 0,
     // Insert-specific fields
     displayName: event.kind === "insert" ? event.displayName : void 0,
@@ -8380,6 +8441,9 @@ function resolveDragEndRefusal(params) {
 function resolveDragEndBranch(params) {
   if (!params.dropTargetExistsInMap) return { kind: "refuse", reason: "drop-target-missing" };
   if (!params.dropTargetIsDroppable) return { kind: "refuse", reason: "drop-target-not-droppable" };
+  if (!params.hasNestTarget && params.dropTargetIsScreenRootHost && !params.dropTargetScreenRootSlotValid) {
+    return { kind: "refuse", reason: "drop-target-not-droppable" };
+  }
   if (params.hasNestTarget) {
     if (params.nestIsSelfOrDescendant) return { kind: "refuse", reason: "nest-self-or-descendant" };
     if (params.nestIsAncestor) return { kind: "refuse", reason: "nest-ancestor" };
@@ -8454,7 +8518,8 @@ function recordCommittedMove(args) {
     targetLaneSnapshot,
     resolveNodeElement,
     recordMoveChange,
-    nodeMap
+    nodeMap,
+    screenRootTarget
   } = args;
   const sourceLaneIdentitySnapshot = captureCommitLaneIdentitySnapshot(
     sourceLaneSnapshot,
@@ -8512,7 +8577,7 @@ function recordCommittedMove(args) {
     commitIdentity: sourceCommitIdentity
   });
   const afterPayload = buildMovePayloadWithEffectiveIdentities({
-    placement: command.to,
+    placement: screenRootTarget ? { ...command.to, index: screenRootTarget.index } : command.to,
     containerIdentity,
     beforeSiblingIdentity,
     afterSiblingIdentity,
@@ -8536,6 +8601,7 @@ function recordCommittedMove(args) {
     binding,
     targetVid,
     containerVid,
+    screenRootFile: screenRootTarget?.screenRootFile ?? null,
     container: containerIdentity,
     beforeSibling: beforeSiblingIdentity,
     afterSibling: afterSiblingIdentity,
@@ -8549,7 +8615,8 @@ function recordCommittedMove(args) {
     commandType: command.type,
     targetVid,
     containerVid,
-    index: command.to.index,
+    index: screenRootTarget?.index ?? command.to.index,
+    screenRootFile: screenRootTarget?.screenRootFile ?? null,
     selected: {
       nodeId: selectedNodeId,
       nodeKey: selectedNodeKey,
@@ -8790,9 +8857,13 @@ function useDragLifecycle({
     const pos = sourcePos;
     const dropTargetId = nestTarget?.nodeId ?? intent?.containerId;
     const resolvedReorder = refs.resolvedReorderRef.current;
+    const screenRootTarget = !nestTarget && intent && intent.mode === "reorder" ? resolveScreenRootDropTarget(intent.containerId, intent.index, refs.projectionRef.current, refs.nodeMapRef.current) : null;
+    const dropTargetIsScreenRootHost = !nestTarget && intent && intent.mode === "reorder" ? findScreenRootHostFile(intent.containerId, refs.projectionRef.current, refs.nodeMapRef.current) !== null : false;
     const branch = resolveDragEndBranch({
       dropTargetExistsInMap: refs.nodeMapRef.current.has(dropTargetId),
       dropTargetIsDroppable: !!refs.droppableContainerIdsRef.current?.has(dropTargetId),
+      dropTargetIsScreenRootHost,
+      dropTargetScreenRootSlotValid: !!screenRootTarget,
       hasNestTarget: !!nestTarget,
       nestIsSelfOrDescendant: !!nestTarget && el.contains(nestTarget.element),
       nestIsAncestor: !!nestTarget && nestTarget.element.contains(el),
@@ -8887,7 +8958,8 @@ function useDragLifecycle({
         targetLaneSnapshot,
         resolveNodeElement,
         recordMoveChange,
-        nodeMap: refs.nodeMapRef.current
+        nodeMap: refs.nodeMapRef.current,
+        screenRootTarget
       });
     } else {
       emitRefused(GATE_REJECT, "The resolved move could not be applied.", anchorVid());
@@ -9154,6 +9226,9 @@ function useExternalDragLoop({
     const nodeMap = /* @__PURE__ */ new Map();
     for (const el of elements) nodeMap.set(el.nodeId, el);
     const blockedContainerIds = buildBlockedStructuralContainerIds(projection, nodeMap, null);
+    for (const id of buildBlockedNodeMetaContainerIds(projection, nodeMap, null)) {
+      blockedContainerIds.add(id);
+    }
     const engine = new DragIntentEngine(projection, EXTERNAL_DRAG_ACTIVE_ID, {
       blockedContainerIds
     });
@@ -9173,7 +9248,8 @@ function useExternalDragLoop({
           resolveNodeElement,
           setDropLine,
           scrollX,
-          scrollY
+          scrollY,
+          projection
         );
         return;
       }
@@ -9206,13 +9282,35 @@ function useExternalDragLoop({
     return () => cancelAnimationFrame(rafId);
   }, [externalDrag, elements, refs, resolveNodeElement, setDropLine]);
 }
-function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, setDropLine, startScrollX, startScrollY) {
+function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, setDropLine, startScrollX, startScrollY, projection) {
   const intent = engine.resolve(x, y, window.scrollX, window.scrollY, startScrollX, startScrollY);
   if (!intent || intent.mode !== "reorder") {
     useDesignModeStore.getState().cancelExternalDrag();
     setDropLine(null);
     return;
   }
+  let screenRootFile = null;
+  let screenRootIndex = null;
+  if (projection) {
+    const isChildrenSlot = findScreenRootHostFile(intent.containerId, projection, refs.nodeMapRef.current) !== null;
+    if (isChildrenSlot) {
+      const target = resolveScreenRootDropTarget(intent.containerId, intent.index, projection, refs.nodeMapRef.current);
+      if (!target) {
+        const containerMeta = refs.nodeMapRef.current.get(intent.containerId)?.editorMeta;
+        dispatchRuntimeEvent({
+          type: "drag-refused",
+          code: resolveRefusalCode(containerMeta, "CONTAINER_NOT_PLAIN"),
+          cause: "Drop position is not a valid screen-root slot inside app-shell/kit chrome.",
+          vid: resolveVidForScannedNodeStrict(intent.containerId, refs.nodeMapRef.current)
+        });
+        useDesignModeStore.getState().cancelExternalDrag();
+        setDropLine(null);
+        return;
+      }
+      screenRootFile = target.screenRootFile;
+      screenRootIndex = target.index;
+    }
+  }
   const containerEl = resolveNodeElement(intent.containerId);
   if (!containerEl) {
     useDesignModeStore.getState().cancelExternalDrag();
@@ -9303,7 +9401,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       containerNodeKey,
       containerVid,
       insertedVid,
-      index: intent.index,
+      index: screenRootIndex ?? intent.index,
+      screenRootFile,
       beforeSiblingInspectorRef: beforeSiblingIdentity?.inspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingIdentity?.nodeKey ?? null
     });
@@ -9319,7 +9418,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       container: containerIdentity,
       containerVid,
       insertedVid,
-      index: intent.index,
+      index: screenRootIndex ?? intent.index,
+      screenRootFile,
       beforeSibling: beforeSiblingIdentity
     });
   }
@@ -10130,7 +10230,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.7" ? "0.1.7" : null;
+  return "0.1.9" ? "0.1.9" : null;
 }
 var REMOTE_INSPECTOR_VERSION = readBuildVersion();
 var isRemoteInspectorUrlVersioned = REMOTE_INSPECTOR_VERSION !== null;

package/dist/client/client.mjs

@@ -4084,7 +4084,8 @@ function summarizeRuntimeEvent(detail) {
         diagnostics: detail.diagnostics ?? null,
         targetVid: detail.targetVid ?? null,
         containerVid: detail.containerVid ?? null,
-        index: detail.index
+        index: detail.index,
+        screenRootFile: detail.screenRootFile ?? null
       };
     case "drag-started":
       return { targetVid: detail.targetVid, droppableCount: detail.droppable.length };
@@ -4115,6 +4116,7 @@ function summarizeRuntimeEvent(detail) {
         containerVid: detail.containerVid ?? null,
         insertedVid: detail.insertedVid ?? null,
         index: detail.index,
+        screenRootFile: detail.screenRootFile ?? null,
         beforeSibling: summarizeIdentity(detail.beforeSibling),
         hasTsxCode: !!detail.tsxCode,
         htmlLength: detail.html?.length ?? 0
@@ -4210,6 +4212,54 @@ function isNonDraggableNodeMeta(meta) {
   if (meta.isKitOrigin) return true;
   return false;
 }
+var SCREEN_FILE_RE = /(?:^|\/)screens\//;
+function isScreenRootMeta(meta) {
+  return !!meta && !!meta.file && SCREEN_FILE_RE.test(meta.file) && meta.parentNodeId === null;
+}
+function isUnsavedScreenRootCandidate(nodeId) {
+  return nodeId.startsWith("insert:");
+}
+function isScreenRootChild(nodeId, nodeMap) {
+  const meta = nodeMap.get(nodeId)?.editorMeta;
+  if (meta) return isScreenRootMeta(meta);
+  return isUnsavedScreenRootCandidate(nodeId);
+}
+function isChildrenSlotContainer(meta) {
+  if (!meta) return false;
+  if (meta.containerKind !== "expression") return false;
+  return !!(meta.isChrome || meta.isKitOrigin || meta.isKitContainer);
+}
+function findScreenRootHostFile(containerId, projection, nodeMap) {
+  if (!isChildrenSlotContainer(nodeMap.get(containerId)?.editorMeta)) return null;
+  const container = projection.containerIndex.get(containerId);
+  if (!container) return null;
+  for (const childId of container.children) {
+    const childMeta = nodeMap.get(childId)?.editorMeta;
+    if (isScreenRootMeta(childMeta)) return childMeta.file;
+  }
+  return null;
+}
+function resolveScreenRootDropTarget(containerId, domIndex, projection, nodeMap) {
+  const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+  if (!screenRootFile) return null;
+  const container = projection.containerIndex.get(containerId);
+  if (!container) return null;
+  const children = container.children;
+  const before = domIndex > 0 ? children[domIndex - 1] : null;
+  const after = domIndex < children.length ? children[domIndex] : null;
+  if (before && !isScreenRootChild(before, nodeMap)) return null;
+  if (after && !isScreenRootChild(after, nodeMap)) return null;
+  let index = 0;
+  for (let i = 0; i < domIndex && i < children.length; i += 1) {
+    if (isScreenRootChild(children[i], nodeMap)) index += 1;
+  }
+  return { screenRootFile, index };
+}
+function isBlockedDropContainer(containerId, projection, nodeMap) {
+  const meta = nodeMap.get(containerId)?.editorMeta;
+  if (!isNonDroppableNodeMeta(meta)) return false;
+  return findScreenRootHostFile(containerId, projection, nodeMap) === null;
+}
 function collectSubtreeIds(rootId, projection) {
   const ids2 = /* @__PURE__ */ new Set([rootId]);
   const stack = [rootId];
@@ -4232,8 +4282,9 @@ function computeDroppableSet(sourceId, projection, nodeMap) {
   for (const containerId of projection.containerIndex.keys()) {
     if (excluded.has(containerId)) continue;
     if (isStructuralContainer(containerId, nodeMap)) continue;
-    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) continue;
-    const containerFile = nodeMap.get(containerId)?.editorMeta?.file;
+    if (isBlockedDropContainer(containerId, projection, nodeMap)) continue;
+    const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+    const containerFile = screenRootFile ?? nodeMap.get(containerId)?.editorMeta?.file;
     if (sourceFile && containerFile && containerFile !== sourceFile) continue;
     droppable.add(containerId);
   }
@@ -4243,11 +4294,12 @@ function buildBlockedNodeMetaContainerIds(projection, nodeMap, sourceId) {
   const sourceFile = sourceId ? nodeMap.get(sourceId)?.editorMeta?.file : void 0;
   const blocked = /* @__PURE__ */ new Set();
   for (const containerId of projection.containerIndex.keys()) {
-    if (isNonDroppableNodeMeta(nodeMap.get(containerId)?.editorMeta)) {
+    if (isBlockedDropContainer(containerId, projection, nodeMap)) {
       blocked.add(containerId);
       continue;
     }
-    const containerFile = nodeMap.get(containerId)?.editorMeta?.file;
+    const screenRootFile = findScreenRootHostFile(containerId, projection, nodeMap);
+    const containerFile = screenRootFile ?? nodeMap.get(containerId)?.editorMeta?.file;
     if (sourceFile && containerFile && containerFile !== sourceFile) {
       blocked.add(containerId);
     }
@@ -4900,6 +4952,7 @@ var useDesignModeStore = create((set, get) => ({
     binding,
     targetVid,
     containerVid,
+    screenRootFile,
     componentName,
     before,
     after
@@ -4929,6 +4982,7 @@ var useDesignModeStore = create((set, get) => ({
       binding: binding ?? null,
       targetVid: targetVid ?? null,
       containerVid: containerVid ?? null,
+      screenRootFile: screenRootFile ?? null,
       payload: { before, after },
       at: now
     };
@@ -5005,6 +5059,7 @@ var useDesignModeStore = create((set, get) => ({
     containerNodeKey,
     containerVid,
     insertedVid,
+    screenRootFile,
     index,
     beforeSiblingInspectorRef,
     beforeSiblingNodeKey
@@ -5025,6 +5080,7 @@ var useDesignModeStore = create((set, get) => ({
       containerNodeKey,
       containerVid: containerVid ?? null,
       insertedVid: insertedVid ?? null,
+      screenRootFile: screenRootFile ?? null,
       index,
       beforeSiblingInspectorRef: beforeSiblingInspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingNodeKey ?? null,
@@ -6804,6 +6860,11 @@ function serializeArrangeChange(event, index) {
     // the drop container's vid on an `insert` change.
     targetVid: event.kind === "move" || event.kind === "resize" ? event.targetVid : void 0,
     containerVid: event.kind === "move" || event.kind === "insert" ? event.containerVid : void 0,
+    // ARCH — arrange screen-root: `screenRootFile` names the screen the
+    // destination resolved to, on both a move (kind: 'move') and an insert
+    // (kind: 'insert') that landed on the screen's own root — see
+    // `RuntimeMoveDetail.screenRootFile` (`host-bridge.ts`).
+    screenRootFile: event.kind === "move" || event.kind === "insert" ? event.screenRootFile : void 0,
     index: event.kind === "move" ? event.payload.after.index : void 0,
     // Insert-specific fields
     displayName: event.kind === "insert" ? event.displayName : void 0,
@@ -8345,6 +8406,9 @@ function resolveDragEndRefusal(params) {
 function resolveDragEndBranch(params) {
   if (!params.dropTargetExistsInMap) return { kind: "refuse", reason: "drop-target-missing" };
   if (!params.dropTargetIsDroppable) return { kind: "refuse", reason: "drop-target-not-droppable" };
+  if (!params.hasNestTarget && params.dropTargetIsScreenRootHost && !params.dropTargetScreenRootSlotValid) {
+    return { kind: "refuse", reason: "drop-target-not-droppable" };
+  }
   if (params.hasNestTarget) {
     if (params.nestIsSelfOrDescendant) return { kind: "refuse", reason: "nest-self-or-descendant" };
     if (params.nestIsAncestor) return { kind: "refuse", reason: "nest-ancestor" };
@@ -8419,7 +8483,8 @@ function recordCommittedMove(args) {
     targetLaneSnapshot,
     resolveNodeElement,
     recordMoveChange,
-    nodeMap
+    nodeMap,
+    screenRootTarget
   } = args;
   const sourceLaneIdentitySnapshot = captureCommitLaneIdentitySnapshot(
     sourceLaneSnapshot,
@@ -8477,7 +8542,7 @@ function recordCommittedMove(args) {
     commitIdentity: sourceCommitIdentity
   });
   const afterPayload = buildMovePayloadWithEffectiveIdentities({
-    placement: command.to,
+    placement: screenRootTarget ? { ...command.to, index: screenRootTarget.index } : command.to,
     containerIdentity,
     beforeSiblingIdentity,
     afterSiblingIdentity,
@@ -8501,6 +8566,7 @@ function recordCommittedMove(args) {
     binding,
     targetVid,
     containerVid,
+    screenRootFile: screenRootTarget?.screenRootFile ?? null,
     container: containerIdentity,
     beforeSibling: beforeSiblingIdentity,
     afterSibling: afterSiblingIdentity,
@@ -8514,7 +8580,8 @@ function recordCommittedMove(args) {
     commandType: command.type,
     targetVid,
     containerVid,
-    index: command.to.index,
+    index: screenRootTarget?.index ?? command.to.index,
+    screenRootFile: screenRootTarget?.screenRootFile ?? null,
     selected: {
       nodeId: selectedNodeId,
       nodeKey: selectedNodeKey,
@@ -8755,9 +8822,13 @@ function useDragLifecycle({
     const pos = sourcePos;
     const dropTargetId = nestTarget?.nodeId ?? intent?.containerId;
     const resolvedReorder = refs.resolvedReorderRef.current;
+    const screenRootTarget = !nestTarget && intent && intent.mode === "reorder" ? resolveScreenRootDropTarget(intent.containerId, intent.index, refs.projectionRef.current, refs.nodeMapRef.current) : null;
+    const dropTargetIsScreenRootHost = !nestTarget && intent && intent.mode === "reorder" ? findScreenRootHostFile(intent.containerId, refs.projectionRef.current, refs.nodeMapRef.current) !== null : false;
     const branch = resolveDragEndBranch({
       dropTargetExistsInMap: refs.nodeMapRef.current.has(dropTargetId),
       dropTargetIsDroppable: !!refs.droppableContainerIdsRef.current?.has(dropTargetId),
+      dropTargetIsScreenRootHost,
+      dropTargetScreenRootSlotValid: !!screenRootTarget,
       hasNestTarget: !!nestTarget,
       nestIsSelfOrDescendant: !!nestTarget && el.contains(nestTarget.element),
       nestIsAncestor: !!nestTarget && nestTarget.element.contains(el),
@@ -8852,7 +8923,8 @@ function useDragLifecycle({
         targetLaneSnapshot,
         resolveNodeElement,
         recordMoveChange,
-        nodeMap: refs.nodeMapRef.current
+        nodeMap: refs.nodeMapRef.current,
+        screenRootTarget
       });
     } else {
       emitRefused(GATE_REJECT, "The resolved move could not be applied.", anchorVid());
@@ -9119,6 +9191,9 @@ function useExternalDragLoop({
     const nodeMap = /* @__PURE__ */ new Map();
     for (const el of elements) nodeMap.set(el.nodeId, el);
     const blockedContainerIds = buildBlockedStructuralContainerIds(projection, nodeMap, null);
+    for (const id of buildBlockedNodeMetaContainerIds(projection, nodeMap, null)) {
+      blockedContainerIds.add(id);
+    }
     const engine = new DragIntentEngine(projection, EXTERNAL_DRAG_ACTIVE_ID, {
       blockedContainerIds
     });
@@ -9138,7 +9213,8 @@ function useExternalDragLoop({
           resolveNodeElement,
           setDropLine,
           scrollX,
-          scrollY
+          scrollY,
+          projection
         );
         return;
       }
@@ -9171,13 +9247,35 @@ function useExternalDragLoop({
     return () => cancelAnimationFrame(rafId);
   }, [externalDrag, elements, refs, resolveNodeElement, setDropLine]);
 }
-function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, setDropLine, startScrollX, startScrollY) {
+function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, setDropLine, startScrollX, startScrollY, projection) {
   const intent = engine.resolve(x, y, window.scrollX, window.scrollY, startScrollX, startScrollY);
   if (!intent || intent.mode !== "reorder") {
     useDesignModeStore.getState().cancelExternalDrag();
     setDropLine(null);
     return;
   }
+  let screenRootFile = null;
+  let screenRootIndex = null;
+  if (projection) {
+    const isChildrenSlot = findScreenRootHostFile(intent.containerId, projection, refs.nodeMapRef.current) !== null;
+    if (isChildrenSlot) {
+      const target = resolveScreenRootDropTarget(intent.containerId, intent.index, projection, refs.nodeMapRef.current);
+      if (!target) {
+        const containerMeta = refs.nodeMapRef.current.get(intent.containerId)?.editorMeta;
+        dispatchRuntimeEvent({
+          type: "drag-refused",
+          code: resolveRefusalCode(containerMeta, "CONTAINER_NOT_PLAIN"),
+          cause: "Drop position is not a valid screen-root slot inside app-shell/kit chrome.",
+          vid: resolveVidForScannedNodeStrict(intent.containerId, refs.nodeMapRef.current)
+        });
+        useDesignModeStore.getState().cancelExternalDrag();
+        setDropLine(null);
+        return;
+      }
+      screenRootFile = target.screenRootFile;
+      screenRootIndex = target.index;
+    }
+  }
   const containerEl = resolveNodeElement(intent.containerId);
   if (!containerEl) {
     useDesignModeStore.getState().cancelExternalDrag();
@@ -9268,7 +9366,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       containerNodeKey,
       containerVid,
       insertedVid,
-      index: intent.index,
+      index: screenRootIndex ?? intent.index,
+      screenRootFile,
       beforeSiblingInspectorRef: beforeSiblingIdentity?.inspectorRef ?? null,
       beforeSiblingNodeKey: beforeSiblingIdentity?.nodeKey ?? null
     });
@@ -9284,7 +9383,8 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
       container: containerIdentity,
       containerVid,
       insertedVid,
-      index: intent.index,
+      index: screenRootIndex ?? intent.index,
+      screenRootFile,
       beforeSibling: beforeSiblingIdentity
     });
   }
@@ -10095,7 +10195,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.7" ? "0.1.7" : null;
+  return "0.1.9" ? "0.1.9" : 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.7",
+  "version": "0.1.9",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "sideEffects": false,
   "repository": {