@archie/devtools 0.0.12-beta → 0.0.13

package/dist/client/client.js

@@ -37,7 +37,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/client/dnd/DndProvider.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // node_modules/@dnd-kit/core/dist/core.esm.js
 var import_react3 = __toESM(require("react"));
@@ -4104,19 +4104,498 @@ function mergeInspectorTheme(theme) {
   };
 }
 
+// src/client/dnd/design-mode/structural-policy.ts
+var STRUCTURAL_COMPONENT_RE = /(?:Page|Provider|RootLayout)$/;
+var STRUCTURAL_TAGS = /* @__PURE__ */ new Set(["html", "body"]);
+function isStructuralComponentName(componentName) {
+  return !!componentName && STRUCTURAL_COMPONENT_RE.test(componentName);
+}
+function isHighLevelStructuralElement(el) {
+  if (!el) return false;
+  if (el.hasAttribute("data-dnd-structural")) return true;
+  const tag = el.tagName.toLowerCase();
+  if (STRUCTURAL_TAGS.has(tag)) return true;
+  if (el.id === "root") return true;
+  return tag === "main" && (el.parentElement === document.body || el.parentElement?.id === "root");
+}
+function isStructuralScannedElement(scanned) {
+  if (!scanned) return false;
+  if (isHighLevelStructuralElement(scanned.element)) return true;
+  return isStructuralComponentName(scanned.editorMeta?.componentName);
+}
+function isStructuralContainer(containerId, nodeMap) {
+  return isStructuralScannedElement(nodeMap.get(containerId));
+}
+function isValidLaneContainer(containerId, projection, nodeMap) {
+  const container = projection.containerIndex.get(containerId);
+  if (!container) return false;
+  if (container.children.length === 0) return false;
+  return !isStructuralContainer(containerId, nodeMap);
+}
+function buildBlockedStructuralContainerIds(projection, nodeMap, sourceContainerId) {
+  const blocked = /* @__PURE__ */ new Set();
+  for (const containerId of projection.containerIndex.keys()) {
+    if (containerId === sourceContainerId) continue;
+    if (isStructuralContainer(containerId, nodeMap)) blocked.add(containerId);
+  }
+  return blocked;
+}
+
+// src/client/dnd/design-mode/fiber-bridge.ts
+var FIBER_KEY_PREFIX = "__reactFiber$";
+var PROPS_KEY_PREFIX = "__reactProps$";
+var metaCache = /* @__PURE__ */ new WeakMap();
+var directMetaCache = /* @__PURE__ */ new WeakMap();
+function hasEditorMetaInFiberChain(fiber) {
+  let current = fiber;
+  while (current) {
+    if (current.memoizedProps?.__editorMeta) return true;
+    current = current.return;
+  }
+  return false;
+}
+function compareFiberCandidates(candidate, currentBest) {
+  if (!currentBest) return 1;
+  const candidateScore = [
+    candidate.hasMatchingProps ? 1 : 0,
+    candidate.hasDirectEditorMeta ? 1 : 0,
+    candidate.hasCompanionPropsKey ? 1 : 0,
+    candidate.hasEditorMetaInReturnChain ? 1 : 0,
+    candidate.order
+  ];
+  const currentScore = [
+    currentBest.hasMatchingProps ? 1 : 0,
+    currentBest.hasDirectEditorMeta ? 1 : 0,
+    currentBest.hasCompanionPropsKey ? 1 : 0,
+    currentBest.hasEditorMetaInReturnChain ? 1 : 0,
+    currentBest.order
+  ];
+  for (let i = 0; i < candidateScore.length; i += 1) {
+    if (candidateScore[i] === currentScore[i]) continue;
+    return candidateScore[i] > currentScore[i] ? 1 : -1;
+  }
+  return 0;
+}
+function getFiberSelectionFromElement(el) {
+  const record = el;
+  const keys = Object.keys(record);
+  let bestCandidate = null;
+  for (let i = 0; i < keys.length; i += 1) {
+    const fiberKey = keys[i];
+    if (!fiberKey.startsWith(FIBER_KEY_PREFIX)) continue;
+    const fiber = record[fiberKey];
+    if (!fiber) continue;
+    if (fiber.stateNode && fiber.stateNode !== el) continue;
+    const suffix = fiberKey.slice(FIBER_KEY_PREFIX.length);
+    const propsKey = `${PROPS_KEY_PREFIX}${suffix}`;
+    const hasCompanionPropsKey = Object.prototype.hasOwnProperty.call(record, propsKey);
+    const companionProps = hasCompanionPropsKey ? record[propsKey] : void 0;
+    const candidate = {
+      fiber,
+      fiberKey,
+      hasMatchingProps: hasCompanionPropsKey && fiber.memoizedProps === companionProps,
+      hasDirectEditorMeta: !!fiber.memoizedProps?.__editorMeta,
+      hasCompanionPropsKey,
+      hasEditorMetaInReturnChain: hasEditorMetaInFiberChain(fiber),
+      // Tiebreaker: higher index in Object.keys = later React fiber attachment.
+      // Relies on spec-guaranteed insertion-order for string keys (ES2015+).
+      order: i
+    };
+    if (compareFiberCandidates(candidate, bestCandidate) > 0) {
+      bestCandidate = candidate;
+    }
+  }
+  if (!bestCandidate) {
+    return { fiber: null, fiberKey: null };
+  }
+  return { fiber: bestCandidate.fiber, fiberKey: bestCandidate.fiberKey };
+}
+function readFiberAwareCache(cache, el, selection) {
+  const cached = cache.get(el);
+  if (!cached) return void 0;
+  if (cached.fiber !== selection.fiber) return void 0;
+  if (cached.fiberKey !== selection.fiberKey) return void 0;
+  return cached.value;
+}
+function writeFiberAwareCache(cache, el, selection, value) {
+  cache.set(el, {
+    fiber: selection.fiber,
+    fiberKey: selection.fiberKey,
+    value
+  });
+  return value;
+}
+function isRootSvg(el) {
+  return el instanceof SVGElement && el.tagName.toLowerCase() === "svg";
+}
+function isPassthroughMeta(meta) {
+  return !!meta?.staticProps && meta.staticProps.asChild === true;
+}
+function isWrapperMeta(meta) {
+  if (!meta?.componentName) return false;
+  return meta.componentName[0] !== meta.componentName[0].toLowerCase();
+}
+function hasOwnTextContent(el) {
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType !== Node.TEXT_NODE) continue;
+    if (node.textContent?.trim()) return true;
+  }
+  return false;
+}
+function getCandidateChildren(el) {
+  return Array.from(el.children).filter((child) => {
+    if (!(child instanceof HTMLElement)) return false;
+    if (child.hasAttribute("data-design-mode-ui")) return false;
+    if (child.hasAttribute("data-design-mode-allow")) return false;
+    return !shouldIgnoreAsVirtualRuntime(child);
+  });
+}
+function shouldIgnoreAsVirtualRuntime(el) {
+  const tag = el.tagName.toLowerCase();
+  if (tag === "canvas") return true;
+  if (tag === "script" || tag === "style" || tag === "noscript") return true;
+  if (el instanceof SVGElement && !isRootSvg(el)) return true;
+  return false;
+}
+function getDirectEditorMeta(el) {
+  const selection = getFiberSelectionFromElement(el);
+  const cached = readFiberAwareCache(directMetaCache, el, selection);
+  if (cached !== void 0) return cached;
+  const meta = selection.fiber?.memoizedProps?.__editorMeta;
+  return writeFiberAwareCache(directMetaCache, el, selection, meta ?? null);
+}
+function getEditorMeta(el) {
+  const selection = getFiberSelectionFromElement(el);
+  const cached = readFiberAwareCache(metaCache, el, selection);
+  if (cached !== void 0) return cached;
+  let fiber = selection.fiber;
+  while (fiber) {
+    const meta = fiber.memoizedProps?.__editorMeta;
+    if (meta) {
+      return writeFiberAwareCache(metaCache, el, selection, meta);
+    }
+    fiber = fiber.return;
+  }
+  return writeFiberAwareCache(metaCache, el, selection, null);
+}
+function findMetaOwnerElement(el) {
+  let current = el;
+  while (current) {
+    if (getEditorMeta(current)) return current;
+    current = current.parentElement;
+  }
+  return null;
+}
+function resolveHostElementFromFiberChain(el) {
+  if (shouldIgnoreAsVirtualRuntime(el)) return null;
+  const directMeta = getDirectEditorMeta(el);
+  const ownerMeta = directMeta ?? getEditorMeta(el);
+  if (isPassthroughMeta(ownerMeta)) {
+    const children = getCandidateChildren(el);
+    if (children.length !== 1) return null;
+    return children[0];
+  }
+  if (directMeta && !isWrapperMeta(directMeta)) return el;
+  const MAX_STEPS = 10;
+  const ownerNodeId = ownerMeta?.nodeId ?? null;
+  let outermost = el;
+  let parent = el.parentElement;
+  for (let i = 0; i < MAX_STEPS; i += 1) {
+    if (!parent || parent === document.body) break;
+    if (shouldIgnoreAsVirtualRuntime(parent)) break;
+    const parentMeta = getEditorMeta(parent);
+    if (!parentMeta) break;
+    if (ownerNodeId && parentMeta.nodeId !== ownerNodeId) break;
+    if (isStructuralComponentName(parentMeta.componentName)) break;
+    if (!isWrapperMeta(parentMeta)) break;
+    if (isPassthroughMeta(parentMeta)) break;
+    if (hasOwnTextContent(parent)) break;
+    const children = getCandidateChildren(parent);
+    if (children.length !== 1) break;
+    outermost = parent;
+    parent = parent.parentElement;
+  }
+  return outermost;
+}
+function resolveDragSurface(el) {
+  const host = resolveHostElementFromFiberChain(el);
+  if (!host) {
+    return { host: null, metaOwner: null, kind: "direct-host" };
+  }
+  const metaOwner = findMetaOwnerElement(host) ?? findMetaOwnerElement(el);
+  const ownerMeta = metaOwner ? getEditorMeta(metaOwner) : null;
+  const kind = isPassthroughMeta(ownerMeta) ? "passthrough-slot" : metaOwner && metaOwner !== host && isWrapperMeta(ownerMeta) ? "wrapper-to-host" : "direct-host";
+  return {
+    host,
+    metaOwner,
+    kind
+  };
+}
+
+// src/client/dnd/design-mode/node-key.ts
+var _runtimeKeyMap = /* @__PURE__ */ new WeakMap();
+var _runtimeKeyCounter = 0;
+function getRuntimeKey(el) {
+  const existing = _runtimeKeyMap.get(el);
+  if (existing) return existing;
+  const key2 = `runtime:${++_runtimeKeyCounter}`;
+  _runtimeKeyMap.set(el, key2);
+  return key2;
+}
+function getNodeKeyFromElement(el) {
+  const resolved = resolveDragSurface(el);
+  const host = resolved.host ?? el;
+  const meta = getEditorMeta(host);
+  if (meta) return meta.nodeId;
+  const persisted = host.getAttribute("data-dnd-node-id");
+  if (persisted) return persisted;
+  return getRuntimeKey(host);
+}
+function getInspectorRefFromElement(el) {
+  const resolved = resolveDragSurface(el);
+  const host = resolved.host ?? el;
+  const meta = getEditorMeta(host);
+  if (!meta) return null;
+  return { relativePath: meta.file, line: meta.line, column: meta.col };
+}
+
+// src/client/dnd/design-mode/arrange-persistence-diagnostics.ts
+function isSourceBackedRuntimeNodeKey(nodeKey) {
+  return typeof nodeKey === "string" && nodeKey.trim().length > 0 && !nodeKey.startsWith("runtime:");
+}
+function mergeRuntimeArrangeDiagnostics(diagnosticsEntries) {
+  const blockedReasons = /* @__PURE__ */ new Set();
+  const notes = /* @__PURE__ */ new Set();
+  let structurallyUnsafe = false;
+  for (const diagnostics of diagnosticsEntries) {
+    if (!diagnostics) continue;
+    if (diagnostics.structurallyUnsafe === true) {
+      structurallyUnsafe = true;
+    }
+    for (const reason of diagnostics.blockedReasons ?? []) {
+      if (typeof reason === "string" && reason.trim().length > 0) {
+        blockedReasons.add(reason);
+      }
+    }
+    for (const note of diagnostics.notes ?? []) {
+      if (typeof note === "string" && note.trim().length > 0) {
+        notes.add(note);
+      }
+    }
+  }
+  if (!structurallyUnsafe && blockedReasons.size === 0 && notes.size === 0) {
+    return null;
+  }
+  return {
+    ...structurallyUnsafe ? { structurallyUnsafe: true } : {},
+    ...blockedReasons.size > 0 ? { blockedReasons: Array.from(blockedReasons) } : {},
+    ...notes.size > 0 ? { notes: Array.from(notes) } : {}
+  };
+}
+function detectDuplicateSourceBackedNodeKeys(nodeKeys) {
+  const seenKeys = /* @__PURE__ */ new Set();
+  const duplicateKeys = /* @__PURE__ */ new Set();
+  for (const nodeKey of nodeKeys) {
+    if (!isSourceBackedRuntimeNodeKey(nodeKey)) {
+      continue;
+    }
+    if (seenKeys.has(nodeKey)) {
+      duplicateKeys.add(nodeKey);
+      continue;
+    }
+    seenKeys.add(nodeKey);
+  }
+  return Array.from(duplicateKeys);
+}
+function buildOccurrenceNodeId(nodeKey, occurrenceIndex) {
+  return `${nodeKey}::${occurrenceIndex}`;
+}
+function buildEffectiveNodeIdsByCommitNodeId(commitNodeIds, nodeKeysByCommitNodeId) {
+  const countsByNodeKey = /* @__PURE__ */ new Map();
+  for (const commitNodeId of commitNodeIds) {
+    const nodeKey = nodeKeysByCommitNodeId.get(commitNodeId);
+    if (!isSourceBackedRuntimeNodeKey(nodeKey)) {
+      continue;
+    }
+    countsByNodeKey.set(nodeKey, (countsByNodeKey.get(nodeKey) ?? 0) + 1);
+  }
+  const seenByNodeKey = /* @__PURE__ */ new Map();
+  const effectiveNodeIdsByCommitNodeId = /* @__PURE__ */ new Map();
+  for (const commitNodeId of commitNodeIds) {
+    const nodeKey = nodeKeysByCommitNodeId.get(commitNodeId);
+    if (!isSourceBackedRuntimeNodeKey(nodeKey) || (countsByNodeKey.get(nodeKey) ?? 0) < 2) {
+      effectiveNodeIdsByCommitNodeId.set(commitNodeId, null);
+      continue;
+    }
+    const occurrenceIndex = seenByNodeKey.get(nodeKey) ?? 0;
+    seenByNodeKey.set(nodeKey, occurrenceIndex + 1);
+    effectiveNodeIdsByCommitNodeId.set(
+      commitNodeId,
+      buildOccurrenceNodeId(nodeKey, occurrenceIndex)
+    );
+  }
+  return effectiveNodeIdsByCommitNodeId;
+}
+function createCommitLaneIdentitySnapshot(params) {
+  return {
+    laneContainerId: params.laneContainerId,
+    commitNodeIds: [...params.commitNodeIds],
+    nodeKeysByCommitNodeId: new Map(params.nodeKeysByCommitNodeId),
+    effectiveNodeIdsByCommitNodeId: buildEffectiveNodeIdsByCommitNodeId(
+      params.commitNodeIds,
+      params.nodeKeysByCommitNodeId
+    ),
+    committable: true
+  };
+}
+function hasSafeOccurrenceIdentities(lane, duplicateNodeKey) {
+  const effectiveNodeIds = lane.commitNodeIds.filter(
+    (commitNodeId) => lane.nodeKeysByCommitNodeId.get(commitNodeId) === duplicateNodeKey
+  ).map(
+    (commitNodeId) => lane.effectiveNodeIdsByCommitNodeId.get(commitNodeId) ?? null
+  );
+  return effectiveNodeIds.length > 1 && effectiveNodeIds.every(
+    (effectiveNodeId) => typeof effectiveNodeId === "string" && effectiveNodeId.length > 0
+  ) && new Set(effectiveNodeIds).size === effectiveNodeIds.length;
+}
+function buildLanePersistenceDiagnostics(params) {
+  const duplicateNodeKeys = detectDuplicateSourceBackedNodeKeys(
+    buildNodeKeysFromCommitIds(
+      params.lane.commitNodeIds,
+      params.lane.nodeKeysByCommitNodeId
+    )
+  );
+  if (duplicateNodeKeys.length === 0) {
+    return null;
+  }
+  const safeDuplicateNodeKeys = duplicateNodeKeys.filter(
+    (nodeKey) => hasSafeOccurrenceIdentities(params.lane, nodeKey)
+  );
+  if (safeDuplicateNodeKeys.length === duplicateNodeKeys.length) {
+    return {
+      notes: safeDuplicateNodeKeys.map(
+        (nodeKey) => `Arrange lane ${params.lane.laneContainerId} repeats source-backed nodeKey ${nodeKey}, but runtime assigned explicit occurrence identities for each commit root.`
+      )
+    };
+  }
+  return {
+    structurallyUnsafe: true,
+    blockedReasons: duplicateNodeKeys.map(
+      (nodeKey) => `Arrange lane ${params.lane.laneContainerId} contains multiple commit roots with the same source-backed nodeKey (${nodeKey}), so local save is unsafe.`
+    ),
+    notes: [
+      `Lane ${params.lane.laneContainerId} duplicates source-backed nodeKeys: ${duplicateNodeKeys.join(", ")}`
+    ]
+  };
+}
+function removeCommitNodeId(commitNodeIds, commitNodeId) {
+  return commitNodeIds.filter((candidate) => candidate !== commitNodeId);
+}
+function buildNodeKeysFromCommitIds(commitNodeIds, nodeKeysByCommitNodeId) {
+  return commitNodeIds.map(
+    (commitNodeId) => nodeKeysByCommitNodeId.get(commitNodeId) ?? null
+  );
+}
+function captureCommitLaneIdentitySnapshot(lane, resolveNodeElement) {
+  if (!lane?.committable) return null;
+  const nodeKeysByCommitNodeId = /* @__PURE__ */ new Map();
+  for (const commitNodeId of lane.orderedCommitNodeIds) {
+    const element = resolveNodeElement(commitNodeId);
+    if (!element) return null;
+    nodeKeysByCommitNodeId.set(commitNodeId, getNodeKeyFromElement(element));
+  }
+  return createCommitLaneIdentitySnapshot({
+    laneContainerId: lane.laneContainerId,
+    nodeKeysByCommitNodeId,
+    commitNodeIds: lane.orderedCommitNodeIds
+  });
+}
+function projectCommitNodeIdsForMove(params) {
+  const withoutMovedCommit = removeCommitNodeId(
+    params.commitNodeIds,
+    params.movedCommitNodeId
+  );
+  if (typeof params.targetIndex !== "number" || !Number.isFinite(params.targetIndex)) {
+    return [...withoutMovedCommit, params.movedCommitNodeId];
+  }
+  const insertionIndex = Math.max(
+    0,
+    Math.min(params.targetIndex, withoutMovedCommit.length)
+  );
+  return [
+    ...withoutMovedCommit.slice(0, insertionIndex),
+    params.movedCommitNodeId,
+    ...withoutMovedCommit.slice(insertionIndex)
+  ];
+}
+function buildMovePersistenceDiagnostics(params) {
+  const {
+    sourceLane,
+    targetLane,
+    movedCommitNodeId,
+    sourceLaneContainerId,
+    targetLaneContainerId,
+    targetIndex
+  } = params;
+  const sameLane = !!sourceLaneContainerId && !!targetLaneContainerId && sourceLaneContainerId === targetLaneContainerId;
+  const targetSnapshot = sameLane ? targetLane ?? sourceLane : targetLane;
+  const sourceLaneAfter = !sameLane && sourceLane?.committable ? createCommitLaneIdentitySnapshot({
+    laneContainerId: sourceLane.laneContainerId,
+    commitNodeIds: removeCommitNodeId(
+      sourceLane.commitNodeIds,
+      movedCommitNodeId
+    ),
+    nodeKeysByCommitNodeId: sourceLane.nodeKeysByCommitNodeId
+  }) : null;
+  const targetLaneAfter = targetSnapshot?.committable ? createCommitLaneIdentitySnapshot({
+    laneContainerId: targetSnapshot.laneContainerId,
+    commitNodeIds: projectCommitNodeIdsForMove({
+      commitNodeIds: targetSnapshot.commitNodeIds,
+      movedCommitNodeId,
+      targetIndex
+    }),
+    nodeKeysByCommitNodeId: new Map([
+      ...targetSnapshot.nodeKeysByCommitNodeId,
+      ...sourceLane?.nodeKeysByCommitNodeId.has(movedCommitNodeId) ? [
+        [
+          movedCommitNodeId,
+          sourceLane.nodeKeysByCommitNodeId.get(movedCommitNodeId) ?? null
+        ]
+      ] : []
+    ])
+  }) : null;
+  return mergeRuntimeArrangeDiagnostics([
+    sourceLaneAfter ? buildLanePersistenceDiagnostics({ lane: sourceLaneAfter }) : null,
+    targetLaneAfter ? buildLanePersistenceDiagnostics({ lane: targetLaneAfter }) : null
+  ]);
+}
+
 // src/client/dnd/design-mode/store.ts
 function summarizeEditorChangeEvent(event) {
+  if (event.kind === "insert") {
+    return `insert ${event.displayName} at ${event.containerId}[${event.index}]`;
+  }
   if (event.kind === "move") {
     const selectedHint = event.selectedNodeKey && event.selectedNodeKey !== event.nodeKey ? ` (selected ${event.selectedNodeKey})` : "";
     const anchorHint = event.anchorNodeKey && event.anchorNodeKey !== event.nodeKey ? ` (anchor ${event.anchorNodeKey})` : "";
-    const commandHint = event.commandType ? ` ${event.commandType}` : "";
-    return `move${commandHint} ${event.nodeKey}: parent ${event.payload.before.parentNodeId}[${event.payload.before.index}] \u2192 ${event.payload.after.parentNodeId}[${event.payload.after.index}]${event.payload.after.commitNodeId ? ` (commit ${event.payload.after.commitNodeId}` : ""}${event.payload.after.beforeNodeId ? ` before ${event.payload.after.beforeNodeId}` : ""}${event.payload.after.afterNodeId ? ` after ${event.payload.after.afterNodeId}` : ""}${event.payload.after.commitNodeId ? ")" : ""}${selectedHint}${anchorHint}`;
+    const beforeParentNodeId = event.payload.before.effectiveContainerNodeId ?? event.payload.before.parentNodeId;
+    const afterParentNodeId = event.payload.after.effectiveContainerNodeId ?? event.payload.after.parentNodeId;
+    const commitNodeId = event.payload.after.effectiveCommitNodeId ?? event.payload.after.commitNodeId;
+    const beforeNodeId = event.payload.after.effectiveBeforeNodeId ?? event.payload.after.beforeNodeId;
+    const afterNodeId = event.payload.after.effectiveAfterNodeId ?? event.payload.after.afterNodeId;
+    return `move ${event.nodeKey}: parent ${beforeParentNodeId}[${event.payload.before.index}] \u2192 ${afterParentNodeId}[${event.payload.after.index}]${commitNodeId ? ` (commit ${commitNodeId}` : ""}${beforeNodeId ? ` before ${beforeNodeId}` : ""}${afterNodeId ? ` after ${afterNodeId}` : ""}${commitNodeId ? ")" : ""}${selectedHint}${anchorHint}`;
   }
   if (event.payload.after.mode === "grid-span") {
     return `resize(grid-span) ${event.nodeKey}: col ${event.payload.before.colSpan ?? 1}\u2192${event.payload.after.colSpan ?? 1}, row ${event.payload.before.rowSpan ?? 1}\u2192${event.payload.after.rowSpan ?? 1}`;
   }
   return `resize(px) ${event.nodeKey}: ${event.payload.before.width}\xD7${event.payload.before.height} \u2192 ${event.payload.after.width}\xD7${event.payload.after.height}`;
 }
+function buildFallbackOperationId(now, nodeId) {
+  return `${now}:${nodeId}`;
+}
+function inferMoveCommandType(before, after) {
+  return before.parentNodeId === after.parentNodeId ? "reorder" : "moveCrossContainer";
+}
 function rebuildNodeEdit(orderedChanges, nodeKey) {
   let latestMove;
   let latestResize;
@@ -4131,11 +4610,36 @@ function rebuildNodeEdit(orderedChanges, nodeKey) {
     nodeId = ev.nodeId;
     inspectorRef = ev.inspectorRef;
     if (ev.kind === "move") latestMove = ev.payload;
-    else latestResize = ev.payload;
+    else if (ev.kind === "resize") latestResize = ev.payload;
   }
   if (count === 0) return null;
   return { nodeKey, nodeId, inspectorRef, latestMove, latestResize, changeCount: count, lastUpdatedAt: lastAt };
 }
+function coalesceOrderedChanges(changes) {
+  if (changes.length <= 1) return changes;
+  const result = [];
+  for (const event of changes) {
+    const prev = result[result.length - 1];
+    if (prev && prev.kind === "resize" && event.kind === "resize" && prev.nodeKey === event.nodeKey) {
+      result[result.length - 1] = {
+        ...event,
+        payload: { before: prev.payload.before, after: event.payload.after }
+      };
+    } else {
+      result.push(event);
+    }
+  }
+  return result;
+}
+function buildEmptyArrangeSessionState() {
+  return {
+    nodeEditsByKey: {},
+    orderedChanges: [],
+    undoneChanges: [],
+    canUndo: false,
+    canRedo: false
+  };
+}
 var useDesignModeStore = create((set, get) => ({
   // UI state
   enabled: false,
@@ -4151,8 +4655,10 @@ var useDesignModeStore = create((set, get) => ({
   nodeEditsByKey: {},
   orderedChanges: [],
   undoneChanges: [],
+  // External drag
+  externalDrag: null,
   // UI actions
-  toggle: () => set((s) => ({ enabled: !s.enabled })),
+  toggle: () => set((s) => ({ enabled: !s.enabled, ...buildEmptyArrangeSessionState() })),
   setEnabled: (enabled) => set({ enabled }),
   setHovered: (selector) => set({ hoveredSelector: selector }),
   setSelected: (selector) => set({ selectedSelector: selector }),
@@ -4167,6 +4673,7 @@ var useDesignModeStore = create((set, get) => ({
     canUndo: false,
     canRedo: false
   }),
+  resetArrangeSession: () => set(buildEmptyArrangeSessionState()),
   // Change tracking actions
   recordMoveChange: ({
     operationId,
@@ -4179,18 +4686,24 @@ var useDesignModeStore = create((set, get) => ({
     selectedInspectorRef,
     anchorNodeKey,
     anchorNodeId,
+    sourceContainer,
+    sourceBeforeSibling,
+    sourceAfterSibling,
     container,
     beforeSibling,
     afterSibling,
+    diagnostics,
     componentName,
     before,
     after
   }) => {
     const now = Date.now();
+    const normalizedOperationId = operationId ?? buildFallbackOperationId(now, nodeId);
+    const normalizedCommandType = commandType ?? inferMoveCommandType(before, after);
     const event = {
       kind: "move",
-      operationId: operationId ?? `${now}:${nodeId}`,
-      commandType: commandType ?? "reorder",
+      operationId: normalizedOperationId,
+      commandType: normalizedCommandType,
       nodeKey,
       nodeId,
       inspectorRef,
@@ -4199,9 +4712,13 @@ var useDesignModeStore = create((set, get) => ({
       selectedInspectorRef,
       anchorNodeKey,
       anchorNodeId,
+      sourceContainer: sourceContainer ?? null,
+      sourceBeforeSibling: sourceBeforeSibling ?? null,
+      sourceAfterSibling: sourceAfterSibling ?? null,
       container: container ?? null,
       beforeSibling: beforeSibling ?? null,
       afterSibling: afterSibling ?? null,
+      diagnostics: diagnostics ?? null,
       payload: { before, after },
       at: now
     };
@@ -4224,11 +4741,20 @@ var useDesignModeStore = create((set, get) => ({
       };
     });
   },
-  recordResizeChange: ({ operationId, nodeKey, nodeId, inspectorRef, componentName, before, after }) => {
+  recordResizeChange: ({
+    operationId,
+    nodeKey,
+    nodeId,
+    inspectorRef,
+    componentName,
+    before,
+    after
+  }) => {
     const now = Date.now();
+    const normalizedOperationId = operationId ?? buildFallbackOperationId(now, nodeId);
     const event = {
       kind: "resize",
-      operationId: operationId ?? `${now}:${nodeId}`,
+      operationId: normalizedOperationId,
       nodeKey,
       nodeId,
       inspectorRef,
@@ -4254,6 +4780,52 @@ var useDesignModeStore = create((set, get) => ({
       };
     });
   },
+  recordInsertChange: ({
+    operationId,
+    nodeKey,
+    nodeId,
+    inspectorRef,
+    displayName,
+    html,
+    containerId,
+    containerNodeKey,
+    index
+  }) => {
+    const now = Date.now();
+    const normalizedOperationId = operationId ?? buildFallbackOperationId(now, nodeId);
+    const event = {
+      kind: "insert",
+      operationId: normalizedOperationId,
+      nodeKey,
+      nodeId,
+      inspectorRef,
+      displayName,
+      html,
+      containerId,
+      containerNodeKey,
+      index,
+      at: now
+    };
+    set((s) => {
+      const prev = s.nodeEditsByKey[nodeKey];
+      const meta = {
+        nodeKey,
+        nodeId,
+        inspectorRef,
+        latestMove: prev?.latestMove,
+        latestResize: prev?.latestResize,
+        changeCount: (prev?.changeCount ?? 0) + 1,
+        lastUpdatedAt: now
+      };
+      return {
+        orderedChanges: [...s.orderedChanges, event],
+        nodeEditsByKey: { ...s.nodeEditsByKey, [nodeKey]: meta },
+        undoneChanges: []
+      };
+    });
+  },
+  startExternalDrag: (component) => set({ externalDrag: component }),
+  cancelExternalDrag: () => set({ externalDrag: null }),
   undoLastChange: () => {
     const { orderedChanges, undoneChanges } = get();
     if (orderedChanges.length === 0) return null;
@@ -4279,7 +4851,8 @@ var useDesignModeStore = create((set, get) => ({
   },
   clearChanges: () => set({ orderedChanges: [], undoneChanges: [], nodeEditsByKey: {} }),
   exportChangesForAI: () => {
-    const { orderedChanges, nodeEditsByKey } = get();
+    const { orderedChanges: rawChanges, nodeEditsByKey } = get();
+    const orderedChanges = coalesceOrderedChanges(rawChanges);
     const changesByFile = {};
     for (const event of orderedChanges) {
       const fileKey = event.inspectorRef?.relativePath ?? "__runtime__";
@@ -4293,180 +4866,127 @@ var useDesignModeStore = create((set, get) => ({
         lines.push(`  ${summarizeEditorChangeEvent(ev)}`);
       }
     }
+    const diagnostics = mergeRuntimeArrangeDiagnostics(
+      orderedChanges.map(
+        (event) => event.kind === "move" ? event.diagnostics : null
+      )
+    );
     return {
       changesByFile,
       finalSnapshot: { ...nodeEditsByKey },
-      aiPromptContext: lines.join("\n")
+      aiPromptContext: lines.join("\n"),
+      ...diagnostics ? { diagnostics } : {}
     };
   }
 }));
 
 // src/client/dnd/design-mode/DesignModeOverlay.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/client/dnd/design-mode/useElementScanner.ts
 var import_react6 = require("react");
 
-// src/client/dnd/design-mode/structural-policy.ts
-var STRUCTURAL_COMPONENT_RE = /(?:Layout|Page|Provider|App)$/;
-var STRUCTURAL_TAGS = /* @__PURE__ */ new Set(["html", "body"]);
-function isStructuralComponentName(componentName) {
-  return !!componentName && STRUCTURAL_COMPONENT_RE.test(componentName);
+// src/client/dnd/design-mode/helpers.ts
+var DND_NODE_ID_ATTR = "data-dnd-node-id";
+var PAGE_EDGE_GUARD = 10;
+var HARD_PAGE_EDGE_GUARD = 4;
+var SAFE_ZONE_INSET = 8;
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
 }
-function isHighLevelStructuralElement(el) {
-  if (!el) return false;
-  const tag = el.tagName.toLowerCase();
-  if (STRUCTURAL_TAGS.has(tag)) return true;
-  if (el.id === "root") return true;
-  return tag === "main" && (el.parentElement === document.body || el.parentElement?.id === "root");
+function buildNodeSelector(nodeId) {
+  return `[${DND_NODE_ID_ATTR}="${escapeCssAttrValue(nodeId)}"]`;
 }
-function isStructuralScannedElement(scanned) {
-  if (!scanned) return false;
-  if (isHighLevelStructuralElement(scanned.element)) return true;
-  return isStructuralComponentName(scanned.editorMeta?.componentName);
+var LARGE_NODE_NEST_BLOCK_MIN_WIDTH = 520;
+var LARGE_NODE_NEST_BLOCK_MIN_HEIGHT = 260;
+var LARGE_NODE_NEST_BLOCK_MIN_AREA = 18e4;
+function isEligibleForDrag(sc) {
+  const source = sc.eligibilitySource ?? "editor-meta";
+  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant";
 }
-function isStructuralContainer(containerId, nodeMap) {
-  return isStructuralScannedElement(nodeMap.get(containerId));
+function isPointerInEdgeZone(px, py, guard) {
+  return px <= guard || py <= guard || px >= window.innerWidth - guard || py >= window.innerHeight - guard;
 }
-function isValidLaneContainer(containerId, projection, nodeMap) {
-  const container = projection.containerIndex.get(containerId);
-  if (!container) return false;
-  if (container.children.length < 2) return false;
-  return !isStructuralContainer(containerId, nodeMap);
+function isPointerInPageEdgeZone(px, py) {
+  return isPointerInEdgeZone(px, py, PAGE_EDGE_GUARD);
 }
-function buildBlockedStructuralContainerIds(projection, nodeMap, sourceContainerId) {
-  const blocked = /* @__PURE__ */ new Set();
-  for (const containerId of projection.containerIndex.keys()) {
-    if (containerId === sourceContainerId) continue;
-    if (isStructuralContainer(containerId, nodeMap)) blocked.add(containerId);
-  }
-  return blocked;
+function isPointerInHardPageEdgeZone(px, py) {
+  return isPointerInEdgeZone(px, py, HARD_PAGE_EDGE_GUARD);
 }
-
-// src/client/dnd/design-mode/fiber-bridge.ts
-var metaCache = /* @__PURE__ */ new WeakMap();
-var directMetaCache = /* @__PURE__ */ new WeakMap();
-function getFiberFromElement(el) {
-  const keys = Object.keys(el);
-  for (let i = 0; i < keys.length; i++) {
-    if (keys[i].startsWith("__reactFiber$")) {
-      return el[keys[i]];
-    }
-  }
-  return null;
+function resolveSafeZoneRect() {
+  const root = document.getElementById("root");
+  if (!root) return null;
+  const rect = root.getBoundingClientRect();
+  const left = rect.left + SAFE_ZONE_INSET;
+  const top = rect.top + SAFE_ZONE_INSET;
+  const right = rect.right - SAFE_ZONE_INSET;
+  const bottom = rect.bottom - SAFE_ZONE_INSET;
+  if (right <= left || bottom <= top) return null;
+  return { left, top, right, bottom };
 }
-function isRootSvg(el) {
-  return el instanceof SVGElement && el.tagName.toLowerCase() === "svg";
+function isPointerInSafeZone(px, py, safeZone) {
+  if (!safeZone) return true;
+  return px >= safeZone.left && px <= safeZone.right && py >= safeZone.top && py <= safeZone.bottom;
 }
-function isPassthroughMeta(meta) {
-  return !!meta?.staticProps && meta.staticProps.asChild === true;
+function isPointerOutsideSafeZone(px, py, safeZone) {
+  return !isPointerInSafeZone(px, py, safeZone);
 }
-function isWrapperMeta(meta) {
-  if (!meta?.componentName) return false;
-  return meta.componentName[0] !== meta.componentName[0].toLowerCase();
+function isPointerBlocked(px, py, safeZone) {
+  return isPointerInHardPageEdgeZone(px, py) || isPointerOutsideSafeZone(px, py, safeZone);
 }
-function hasOwnTextContent(el) {
-  for (const node of Array.from(el.childNodes)) {
-    if (node.nodeType !== Node.TEXT_NODE) continue;
-    if (node.textContent?.trim()) return true;
+function shouldBlockNestForLargeNode(w, h) {
+  return w >= LARGE_NODE_NEST_BLOCK_MIN_WIDTH || h >= LARGE_NODE_NEST_BLOCK_MIN_HEIGHT || w * h >= LARGE_NODE_NEST_BLOCK_MIN_AREA;
+}
+function findScrollableAncestor(start, dx, dy) {
+  let el = start;
+  while (el && el !== document.body) {
+    const cs = getComputedStyle(el);
+    if (dy !== 0 && (cs.overflowY === "auto" || cs.overflowY === "scroll") && el.scrollHeight > el.clientHeight + 1) return el;
+    if (dx !== 0 && (cs.overflowX === "auto" || cs.overflowX === "scroll") && el.scrollWidth > el.clientWidth + 1) return el;
+    el = el.parentElement;
   }
-  return false;
+  return null;
 }
-function getCandidateChildren(el) {
-  return Array.from(el.children).filter((child) => {
-    if (!(child instanceof HTMLElement)) return false;
-    if (child.hasAttribute("data-design-mode-ui")) return false;
-    if (child.hasAttribute("data-design-mode-allow")) return false;
-    return !shouldIgnoreAsVirtualRuntime(child);
-  });
+function escapeCssAttrValue(value) {
+  const esc = globalThis.CSS?.escape;
+  return esc ? esc(value) : value.replace(/["\\]/g, "\\$&");
 }
-function shouldIgnoreAsVirtualRuntime(el) {
-  const tag = el.tagName.toLowerCase();
-  if (tag === "canvas") return true;
-  if (tag === "script" || tag === "style" || tag === "noscript") return true;
-  if (el instanceof SVGElement && !isRootSvg(el)) return true;
-  return false;
+function isDesignModeUiElement(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  return el.hasAttribute("data-design-mode-ui") || !!el.closest("[data-design-mode-ui]");
 }
-function getDirectEditorMeta(el) {
-  const cached = directMetaCache.get(el);
-  if (cached !== void 0) return cached;
-  const fiber = getFiberFromElement(el);
-  const meta = fiber?.memoizedProps?.__editorMeta;
-  const resolved = meta ?? null;
-  directMetaCache.set(el, resolved);
-  return resolved;
+function isElementScrollable(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const cs = getComputedStyle(el);
+  const overY = cs.overflowY;
+  const overX = cs.overflowX;
+  return (overY === "auto" || overY === "scroll") && el.scrollHeight > el.clientHeight || (overX === "auto" || overX === "scroll") && el.scrollWidth > el.clientWidth;
 }
-function getEditorMeta(el) {
-  const cached = metaCache.get(el);
-  if (cached !== void 0) return cached;
-  let fiber = getFiberFromElement(el);
-  while (fiber) {
-    const meta = fiber.memoizedProps?.__editorMeta;
-    if (meta) {
-      metaCache.set(el, meta);
-      return meta;
+function resolveScrollableFromHitStack(stack) {
+  for (const hit of stack) {
+    if (isDesignModeUiElement(hit)) continue;
+    let el = hit;
+    while (el) {
+      if (isElementScrollable(el)) return el;
+      el = el.parentElement;
     }
-    fiber = fiber.return;
   }
-  metaCache.set(el, null);
   return null;
 }
-function findMetaOwnerElement(el) {
-  let current = el;
-  while (current) {
-    if (getEditorMeta(current)) return current;
-    current = current.parentElement;
-  }
-  return null;
-}
-function resolveHostElementFromFiberChain(el) {
-  if (shouldIgnoreAsVirtualRuntime(el)) return null;
-  const directMeta = getDirectEditorMeta(el);
-  const ownerMeta = directMeta ?? getEditorMeta(el);
-  if (isPassthroughMeta(ownerMeta)) {
-    const children = getCandidateChildren(el);
-    if (children.length !== 1) return null;
-    return children[0];
-  }
-  if (directMeta && !isWrapperMeta(directMeta)) return el;
-  const MAX_STEPS = 10;
-  const ownerNodeId = ownerMeta?.nodeId ?? null;
-  let outermost = el;
-  let parent = el.parentElement;
-  for (let i = 0; i < MAX_STEPS; i += 1) {
-    if (!parent || parent === document.body) break;
-    if (shouldIgnoreAsVirtualRuntime(parent)) break;
-    const parentMeta = getEditorMeta(parent);
-    if (!parentMeta) break;
-    if (ownerNodeId && parentMeta.nodeId !== ownerNodeId) break;
-    if (isStructuralComponentName(parentMeta.componentName)) break;
-    if (!isWrapperMeta(parentMeta)) break;
-    if (isPassthroughMeta(parentMeta)) break;
-    if (hasOwnTextContent(parent)) break;
-    const children = getCandidateChildren(parent);
-    if (children.length !== 1) break;
-    outermost = parent;
-    parent = parent.parentElement;
-  }
-  return outermost;
-}
-function resolveDragSurface(el) {
-  const host = resolveHostElementFromFiberChain(el);
-  if (!host) {
-    return { host: null, metaOwner: null, kind: "direct-host" };
+var _undoParentNodeIdMap = /* @__PURE__ */ new WeakMap();
+var _undoParentNodeIdCounter = 0;
+function ensureParentNodeId(el) {
+  const existing = el.getAttribute(DND_NODE_ID_ATTR);
+  if (existing) return existing;
+  if (!_undoParentNodeIdMap.has(el)) {
+    _undoParentNodeIdMap.set(el, `dnd-parent:${++_undoParentNodeIdCounter}`);
   }
-  const metaOwner = findMetaOwnerElement(host) ?? findMetaOwnerElement(el);
-  const ownerMeta = metaOwner ? getEditorMeta(metaOwner) : null;
-  const kind = isPassthroughMeta(ownerMeta) ? "passthrough-slot" : metaOwner && metaOwner !== host && isWrapperMeta(ownerMeta) ? "wrapper-to-host" : "direct-host";
-  return {
-    host,
-    metaOwner,
-    kind
-  };
+  const id = _undoParentNodeIdMap.get(el);
+  el.setAttribute(DND_NODE_ID_ATTR, id);
+  return id;
 }
 
 // src/client/dnd/design-mode/useElementScanner.ts
-var DND_NODE_ID_ATTR = "data-dnd-node-id";
 function resolveContainerStrategy(el) {
   const cs = getComputedStyle(el);
   const d = cs.display;
@@ -4497,7 +5017,7 @@ function getRuntimeNodeId(el) {
 }
 function getEditorMetaNodeId(el) {
   if (!(el instanceof HTMLElement)) return null;
-  return getEditorMeta(el)?.nodeId ?? null;
+  return getDirectEditorMeta(el)?.nodeId ?? null;
 }
 function isInspectorEligible(el) {
   if (getEditorMetaNodeId(el) !== null) return "editor-meta";
@@ -4521,7 +5041,7 @@ function inferEligibilityFromSortableParent(el) {
     if (child.hasAttribute("data-design-mode-ui")) return false;
     return !isRuntimeVisualInternal(child);
   });
-  if (siblingElements.length < 2) return null;
+  if (siblingElements.length < 1) return null;
   return "inferred-sortable-descendant";
 }
 function ensureUniqueNodeId(base, used) {
@@ -5075,7 +5595,15 @@ function buildProjection(elements, rectOverrides) {
   }
   const containerIndex = /* @__PURE__ */ new Map();
   for (const node of nodeMap.values()) {
-    if (node.children.length === 0) continue;
+    if (node.children.length === 0) {
+      const scanInfo = elementIndex.get(node.id);
+      const eligible = scanInfo?.editorMeta || scanInfo?.eligibilitySource === "force-allow";
+      if (!eligible) continue;
+      node.sortable = true;
+      node.strategy = "vertical";
+      containerIndex.set(node.id, node);
+      continue;
+    }
     node.sortable = true;
     const firstChild = elementIndex.get(node.children[0]);
     node.strategy = firstChild?.containerStrategy ?? "vertical";
@@ -5144,33 +5672,27 @@ function buildSlotIndex(containerIndex, nodeMap) {
 }
 function buildVerticalSlotRect(children, nodeMap, cRect, i, n) {
   const top = i === 0 ? cRect.top : nodeMap.get(children[i - 1])?.rect.bottom ?? cRect.top;
-  const bottom = i === n ? cRect.bottom : nodeMap.get(children[i])?.rect.top ?? cRect.bottom;
-  const height = Math.max(0, bottom - top);
-  return {
-    x: cRect.left,
-    y: top,
-    left: cRect.left,
-    top,
-    right: cRect.right,
-    bottom: top + height,
-    width: cRect.width,
-    height
-  };
+  const bottom = i === n ? cRect.bottom : nodeMap.get(children[i])?.rect.top ?? cRect.bottom;
+  const height = Math.max(0, bottom - top);
+  const prevRect = i > 0 ? nodeMap.get(children[i - 1])?.rect : null;
+  const nextRect = i < n ? nodeMap.get(children[i])?.rect : null;
+  const refRect = prevRect ?? nextRect;
+  const left = refRect ? refRect.left : cRect.left;
+  const right = refRect ? refRect.right : cRect.right;
+  const width = Math.max(0, right - left);
+  return { x: left, y: top, left, top, right, bottom: top + height, width, height };
 }
 function buildHorizontalSlotRect(children, nodeMap, cRect, i, n) {
   const left = i === 0 ? cRect.left : nodeMap.get(children[i - 1])?.rect.right ?? cRect.left;
   const right = i === n ? cRect.right : nodeMap.get(children[i])?.rect.left ?? cRect.right;
   const width = Math.max(0, right - left);
-  return {
-    x: left,
-    y: cRect.top,
-    left,
-    top: cRect.top,
-    right: left + width,
-    bottom: cRect.bottom,
-    width,
-    height: cRect.height
-  };
+  const prevRect = i > 0 ? nodeMap.get(children[i - 1])?.rect : null;
+  const nextRect = i < n ? nodeMap.get(children[i])?.rect : null;
+  const refRect = prevRect ?? nextRect;
+  const top = refRect ? refRect.top : cRect.top;
+  const bottom = refRect ? refRect.bottom : cRect.bottom;
+  const height = Math.max(0, bottom - top);
+  return { x: left, y: top, left, top, right: left + width, bottom, width, height };
 }
 function buildRectSlotRect(children, nodeMap, cRect, i, n, rows) {
   const findRow = (childIdx) => rows.find((r) => childIdx >= r.startIdx && childIdx <= r.endIdx) ?? null;
@@ -5234,6 +5756,79 @@ function buildRectSlotRect(children, nodeMap, cRect, i, n, rows) {
   };
 }
 
+// src/client/dnd/design-mode/history.ts
+function applyInsertCommand(command, direction, resolveNodeElement) {
+  if (direction === "undo") {
+    const el = resolveNodeElement(command.nodeId);
+    if (el?.isConnected) el.remove();
+    return true;
+  }
+  const container = resolveNodeElement(command.containerId);
+  if (!container) return false;
+  const existing = resolveNodeElement(command.nodeId);
+  if (existing?.isConnected) return true;
+  const template = document.createElement("template");
+  template.innerHTML = command.html.trim();
+  const newEl = template.content.firstElementChild;
+  if (!newEl) return false;
+  newEl.setAttribute("data-dnd-node-id", command.nodeId);
+  newEl.setAttribute("data-dnd-force-allow", "");
+  newEl.setAttribute("data-dnd-moved", "");
+  const kids = Array.from(container.children).filter(
+    (c) => c instanceof HTMLElement
+  );
+  container.insertBefore(newEl, kids[command.index] ?? null);
+  return true;
+}
+var DEFAULT_LIMIT = 300;
+var DndCommandHistory = class {
+  constructor(limit = DEFAULT_LIMIT) {
+    this.limit = limit;
+    __publicField(this, "undoStack", []);
+    __publicField(this, "redoStack", []);
+  }
+  execute(command, apply) {
+    const applied = apply(command, "redo");
+    if (!applied) return false;
+    this.undoStack.push(command);
+    if (this.undoStack.length > this.limit) this.undoStack.shift();
+    this.redoStack = [];
+    return true;
+  }
+  undo(apply) {
+    const command = this.undoStack.pop();
+    if (!command) return false;
+    const applied = apply(command, "undo");
+    if (!applied) {
+      this.undoStack.push(command);
+      return false;
+    }
+    this.redoStack.push(command);
+    return true;
+  }
+  redo(apply) {
+    const command = this.redoStack.pop();
+    if (!command) return false;
+    const applied = apply(command, "redo");
+    if (!applied) {
+      this.redoStack.push(command);
+      return false;
+    }
+    this.undoStack.push(command);
+    return true;
+  }
+  clear() {
+    this.undoStack = [];
+    this.redoStack = [];
+  }
+  canUndo() {
+    return this.undoStack.length > 0;
+  }
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+};
+
 // src/client/dnd/design-mode/resize.ts
 function splitTopLevelSpaceSeparated(value) {
   const tokens = [];
@@ -5265,9 +5860,6 @@ function parseSpanValue(value) {
   const parsed = Number.parseInt(match[1], 10);
   return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
 }
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
 function resolveResizeTargetElement(selectedEl) {
   const elementChildren = Array.from(selectedEl.children).filter(
     (child2) => child2 instanceof HTMLElement
@@ -5348,100 +5940,6 @@ function applyStyleSnapshot(el, snapshot) {
   }
 }
 
-// src/client/dnd/design-mode/helpers.ts
-var DND_NODE_ID_ATTR2 = "data-dnd-node-id";
-var PAGE_EDGE_GUARD = 10;
-var HARD_PAGE_EDGE_GUARD = 4;
-var SAFE_ZONE_INSET = 8;
-var LARGE_NODE_NEST_BLOCK_MIN_WIDTH = 520;
-var LARGE_NODE_NEST_BLOCK_MIN_HEIGHT = 260;
-var LARGE_NODE_NEST_BLOCK_MIN_AREA = 18e4;
-function isEligibleForDrag(sc) {
-  const source = sc.eligibilitySource ?? "editor-meta";
-  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant";
-}
-function isPointerInPageEdgeZone(px, py) {
-  return px <= PAGE_EDGE_GUARD || py <= PAGE_EDGE_GUARD || px >= window.innerWidth - PAGE_EDGE_GUARD || py >= window.innerHeight - PAGE_EDGE_GUARD;
-}
-function isPointerInHardPageEdgeZone(px, py) {
-  return px <= HARD_PAGE_EDGE_GUARD || py <= HARD_PAGE_EDGE_GUARD || px >= window.innerWidth - HARD_PAGE_EDGE_GUARD || py >= window.innerHeight - HARD_PAGE_EDGE_GUARD;
-}
-function resolveSafeZoneRect() {
-  const root = document.getElementById("root");
-  if (!root) return null;
-  const rect = root.getBoundingClientRect();
-  const left = rect.left + SAFE_ZONE_INSET;
-  const top = rect.top + SAFE_ZONE_INSET;
-  const right = rect.right - SAFE_ZONE_INSET;
-  const bottom = rect.bottom - SAFE_ZONE_INSET;
-  if (right <= left || bottom <= top) return null;
-  return { left, top, right, bottom };
-}
-function isPointerInSafeZone(px, py, safeZone) {
-  if (!safeZone) return true;
-  return px >= safeZone.left && px <= safeZone.right && py >= safeZone.top && py <= safeZone.bottom;
-}
-function isPointerOutsideSafeZone(px, py, safeZone) {
-  return !isPointerInSafeZone(px, py, safeZone);
-}
-function isPointerBlocked(px, py, safeZone) {
-  return isPointerInHardPageEdgeZone(px, py) || isPointerOutsideSafeZone(px, py, safeZone);
-}
-function shouldBlockNestForLargeNode(w, h) {
-  return w >= LARGE_NODE_NEST_BLOCK_MIN_WIDTH || h >= LARGE_NODE_NEST_BLOCK_MIN_HEIGHT || w * h >= LARGE_NODE_NEST_BLOCK_MIN_AREA;
-}
-function findScrollableAncestor(start, dx, dy) {
-  let el = start;
-  while (el && el !== document.body) {
-    const cs = getComputedStyle(el);
-    if (dy !== 0 && (cs.overflowY === "auto" || cs.overflowY === "scroll") && el.scrollHeight > el.clientHeight + 1) return el;
-    if (dx !== 0 && (cs.overflowX === "auto" || cs.overflowX === "scroll") && el.scrollWidth > el.clientWidth + 1) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-function escapeCssAttrValue(value) {
-  const esc = globalThis.CSS?.escape;
-  return esc ? esc(value) : value.replace(/["\\]/g, "\\$&");
-}
-function isDesignModeUiElement(el) {
-  if (!(el instanceof HTMLElement)) return false;
-  return el.hasAttribute("data-design-mode-ui") || !!el.closest("[data-design-mode-ui]");
-}
-function isElementScrollable(el) {
-  if (!(el instanceof HTMLElement)) return false;
-  const cs = getComputedStyle(el);
-  const overY = cs.overflowY;
-  const overX = cs.overflowX;
-  return (overY === "auto" || overY === "scroll") && el.scrollHeight > el.clientHeight || (overX === "auto" || overX === "scroll") && el.scrollWidth > el.clientWidth;
-}
-function resolveScrollableFromHitStack(stack) {
-  for (const hit of stack) {
-    if (isDesignModeUiElement(hit)) continue;
-    let el = hit;
-    while (el) {
-      if (isElementScrollable(el)) return el;
-      el = el.parentElement;
-    }
-  }
-  return null;
-}
-var _undoParentNodeIdMap = /* @__PURE__ */ new WeakMap();
-var _undoParentNodeIdCounter = 0;
-function ensureParentNodeId(el) {
-  const existing = el.getAttribute(DND_NODE_ID_ATTR2);
-  if (existing) return existing;
-  if (!_undoParentNodeIdMap.has(el)) {
-    _undoParentNodeIdMap.set(el, `dnd-parent:${++_undoParentNodeIdCounter}`);
-  }
-  const id = _undoParentNodeIdMap.get(el);
-  el.setAttribute(DND_NODE_ID_ATTR2, id);
-  return id;
-}
-function ensureElementNodeId(el) {
-  return ensureParentNodeId(el);
-}
-
 // src/client/dnd/design-mode/drag-preview.tsx
 var import_react9 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -5542,7 +6040,7 @@ function findNearestContainerId(nodeId, projection, nodeMap, allowStructuralFall
     const parentId = node?.parentId ?? null;
     if (!parentId) break;
     const parentContainer = projection.containerIndex.get(parentId);
-    if (parentContainer && parentContainer.children.length >= 2) {
+    if (parentContainer && parentContainer.children.length >= 1) {
       if (isValidLaneContainer(parentId, projection, nodeMap)) return parentId;
       if (allowStructuralFallback && !structuralFallback) structuralFallback = parentId;
     }
@@ -5627,12 +6125,6 @@ function findDirectChildUnderParent(child, parent) {
   }
   return null;
 }
-function isContiguous(indices) {
-  if (indices.length === 0) return false;
-  const min = Math.min(...indices);
-  const max = Math.max(...indices);
-  return max - min + 1 === indices.length;
-}
 function createPlacement(parentNodeId, laneContainerId, commitNodeId, beforeNodeId, afterNodeId, index) {
   return {
     parentNodeId,
@@ -5646,7 +6138,16 @@ function createPlacement(parentNodeId, laneContainerId, commitNodeId, beforeNode
 function buildCommitLaneSnapshot(laneContainerId, projection, nodeMap) {
   const lane = projection.containerIndex.get(laneContainerId);
   const laneElement = nodeMap.get(laneContainerId)?.element ?? null;
-  if (!lane || lane.children.length === 0 || !laneElement) return null;
+  if (!lane || !laneElement) return null;
+  if (lane.children.length === 0) {
+    return {
+      laneContainerId,
+      commitParentNodeId: ensureParentNodeId(laneElement),
+      orderedCommitNodeIds: [],
+      commitNodeByAnchorId: /* @__PURE__ */ new Map(),
+      committable: true
+    };
+  }
   const childElements = lane.children.map((childId) => nodeMap.get(childId)?.element ?? null).filter((el) => !!el);
   if (childElements.length !== lane.children.length) return null;
   const commitParent = findLowestCommonAncestor(childElements, laneElement);
@@ -5663,19 +6164,18 @@ function buildCommitLaneSnapshot(laneContainerId, projection, nodeMap) {
     if (seenRoots.has(commitRoot)) return null;
     seenRoots.add(commitRoot);
     commitRoots.push(commitRoot);
-    commitNodeByAnchorId.set(anchorNodeId, ensureElementNodeId(commitRoot));
+    commitNodeByAnchorId.set(anchorNodeId, ensureParentNodeId(commitRoot));
   }
   const childList = Array.from(commitParent.children).filter(
     (child) => child instanceof HTMLElement
   );
   const commitRootIndices = commitRoots.map((root) => childList.indexOf(root));
   if (commitRootIndices.some((index) => index < 0)) return null;
-  if (!isContiguous(commitRootIndices)) return null;
   const domOrderedRoots = [...commitRoots].sort(
     (a, b) => childList.indexOf(a) - childList.indexOf(b)
   );
-  const projectionOrderedIds = commitRoots.map((root) => ensureElementNodeId(root));
-  const domOrderedIds = domOrderedRoots.map((root) => ensureElementNodeId(root));
+  const projectionOrderedIds = commitRoots.map((root) => ensureParentNodeId(root));
+  const domOrderedIds = domOrderedRoots.map((root) => ensureParentNodeId(root));
   if (projectionOrderedIds.length !== domOrderedIds.length) return null;
   if (projectionOrderedIds.some((id, index) => id !== domOrderedIds[index])) return null;
   return {
@@ -5720,7 +6220,7 @@ function resolveAppendCommitPlacement(parentEl, commitNodeId, laneContainerId) {
   const children = Array.from(parentEl.children).filter(
     (child) => child instanceof HTMLElement
   );
-  const lastChild = children.length > 0 ? ensureElementNodeId(children[children.length - 1]) : null;
+  const lastChild = children.length > 0 ? ensureParentNodeId(children[children.length - 1]) : null;
   return createPlacement(
     ensureParentNodeId(parentEl),
     laneContainerId,
@@ -5775,6 +6275,58 @@ function createDesignModeCollisionDetection(blockedContainerIds) {
   };
 }
 
+// src/client/dnd/design-mode/arrange-session.ts
+function serializeArrangeChange(event, index) {
+  return {
+    id: `${event.kind}:${event.operationId}:${index}`,
+    kind: event.kind,
+    operationId: event.operationId,
+    commandType: event.kind === "move" ? event.commandType : void 0,
+    nodeKey: event.nodeKey,
+    nodeId: event.nodeId,
+    inspectorRef: event.inspectorRef,
+    selectedNodeKey: event.kind === "move" ? event.selectedNodeKey : void 0,
+    selectedNodeId: event.kind === "move" ? event.selectedNodeId : void 0,
+    selectedInspectorRef: event.kind === "move" ? event.selectedInspectorRef : void 0,
+    anchorNodeKey: event.kind === "move" ? event.anchorNodeKey : void 0,
+    anchorNodeId: event.kind === "move" ? event.anchorNodeId : void 0,
+    container: event.kind === "move" ? event.container : void 0,
+    beforeSibling: event.kind === "move" ? event.beforeSibling : void 0,
+    afterSibling: event.kind === "move" ? event.afterSibling : void 0,
+    sourceContainer: event.kind === "move" ? event.sourceContainer : void 0,
+    sourceBeforeSibling: event.kind === "move" ? event.sourceBeforeSibling : void 0,
+    sourceAfterSibling: event.kind === "move" ? event.sourceAfterSibling : void 0,
+    diagnostics: event.kind === "move" ? event.diagnostics : void 0,
+    // Insert-specific fields
+    displayName: event.kind === "insert" ? event.displayName : void 0,
+    html: event.kind === "insert" ? event.html : void 0,
+    containerId: event.kind === "insert" ? event.containerId : void 0,
+    containerNodeKey: event.kind === "insert" ? event.containerNodeKey : void 0,
+    insertIndex: event.kind === "insert" ? event.index : void 0,
+    summary: summarizeEditorChangeEvent(event),
+    at: event.at
+  };
+}
+function buildArrangeSessionSnapshot(params) {
+  const { enabled, aiOutput } = params;
+  const coalescedChanges = coalesceOrderedChanges(params.orderedChanges);
+  const updatedAt = typeof params.updatedAt === "number" ? params.updatedAt : Date.now();
+  return {
+    mode: enabled ? "arrange" : "off",
+    canUndo: params.orderedChanges.length > 0,
+    changes: coalescedChanges.map(
+      (event, index) => serializeArrangeChange(event, index)
+    ),
+    diagnostics: aiOutput.diagnostics ?? null,
+    output: {
+      json: aiOutput,
+      prompt: aiOutput.aiPromptContext,
+      summary: coalescedChanges.length === 0 ? "No arrange changes recorded yet." : `${coalescedChanges.length} arrange change${coalescedChanges.length === 1 ? "" : "s"} recorded.`
+    },
+    updatedAt
+  };
+}
+
 // src/client/dnd/design-mode/useDesignModeAutoScroll.ts
 var import_react10 = require("react");
 function edgeVelocity(distanceToEdge, zone, maxSpeed) {
@@ -5790,11 +6342,16 @@ function findScrollableAtPoint(x, y) {
   return resolveScrollableFromHitStack(stack) ?? (document.scrollingElement ?? document.documentElement);
 }
 function getScrollerKey(el) {
-  return el.getAttribute?.(DND_NODE_ID_ATTR2) ?? el.id ?? el.tagName.toLowerCase();
+  return el.getAttribute?.(DND_NODE_ID_ATTR) ?? el.id ?? el.tagName.toLowerCase();
 }
 function pointerInsideRect(x, y, rect, inset = 0) {
   return x >= rect.left - inset && x <= rect.right + inset && y >= rect.top - inset && y <= rect.bottom + inset;
 }
+var AUTO_SCROLL_ZONE_PX = 120;
+var AUTO_SCROLL_MAX_SPEED = 24;
+var SCROLLER_RECT_RECALC_INTERVAL = 8;
+var SCROLLER_SWITCH_FRAMES = 3;
+var SCROLLER_EDGE_HYSTERESIS_PX = 18;
 function useDesignModeAutoScroll({
   active,
   mouseRef,
@@ -5803,11 +6360,6 @@ function useDesignModeAutoScroll({
 }) {
   (0, import_react10.useEffect)(() => {
     if (!active) return;
-    const ZONE = 120;
-    const MAX = 24;
-    const RECALC_INTERVAL = 8;
-    const SWITCH_FRAMES = 3;
-    const SCROLLER_EDGE_HYSTERESIS = 18;
     let scrollEl = findScrollableAtPoint(mouseRef.current.x, mouseRef.current.y);
     let cachedRect = scrollEl.getBoundingClientRect();
     let rectAge = 0;
@@ -5815,17 +6367,17 @@ function useDesignModeAutoScroll({
     const tick = () => {
       const { x, y } = mouseRef.current;
       const safeZone = safeZoneRef.current;
-      if (++rectAge > RECALC_INTERVAL) {
+      if (++rectAge > SCROLLER_RECT_RECALC_INTERVAL) {
         const candidate = findScrollableAtPoint(x, y);
         const candidateKey = getScrollerKey(candidate);
         const currentKey = getScrollerKey(scrollEl);
         const currentRect = scrollEl.getBoundingClientRect();
-        if (candidateKey !== currentKey && !pointerInsideRect(x, y, currentRect, SCROLLER_EDGE_HYSTERESIS)) {
+        if (candidateKey !== currentKey && !pointerInsideRect(x, y, currentRect, SCROLLER_EDGE_HYSTERESIS_PX)) {
           const pendingKey = autoScrollStateRef.current.pendingScrollerKey;
           const pendingFrames = pendingKey === candidateKey ? (autoScrollStateRef.current.pendingFrames ?? 0) + 1 : 1;
           autoScrollStateRef.current.pendingScrollerKey = candidateKey;
           autoScrollStateRef.current.pendingFrames = pendingFrames;
-          if (pendingFrames >= SWITCH_FRAMES) {
+          if (pendingFrames >= SCROLLER_SWITCH_FRAMES) {
             scrollEl = candidate;
             cachedRect = candidate.getBoundingClientRect();
             autoScrollStateRef.current.pendingScrollerKey = null;
@@ -5834,98 +6386,52 @@ function useDesignModeAutoScroll({
         } else {
           scrollEl = candidateKey === currentKey ? scrollEl : candidate;
           cachedRect = scrollEl.getBoundingClientRect();
-          autoScrollStateRef.current.pendingScrollerKey = null;
-          autoScrollStateRef.current.pendingFrames = 0;
-        }
-        rectAge = 0;
-      }
-      if (isPointerInPageEdgeZone(x, y) || isPointerOutsideSafeZone(x, y, safeZone)) {
-        autoScrollStateRef.current = {
-          ...autoScrollStateRef.current,
-          scrollerKey: null,
-          vx: 0,
-          vy: 0
-        };
-        raf = requestAnimationFrame(tick);
-        return;
-      }
-      const dTop = y - cachedRect.top;
-      const dBot = cachedRect.bottom - y;
-      let dy = 0;
-      if (dTop > 0 && dTop < ZONE) dy = -edgeVelocity(dTop, ZONE, MAX);
-      else if (dBot > 0 && dBot < ZONE) dy = edgeVelocity(dBot, ZONE, MAX);
-      const dLeft = x - cachedRect.left;
-      const dRight = cachedRect.right - x;
-      let dx = 0;
-      if (dLeft > 0 && dLeft < ZONE) dx = -edgeVelocity(dLeft, ZONE, MAX);
-      else if (dRight > 0 && dRight < ZONE) dx = edgeVelocity(dRight, ZONE, MAX);
-      if (dy !== 0) scrollEl.scrollTop += dy;
-      if (dx !== 0) scrollEl.scrollLeft += dx;
-      autoScrollStateRef.current = {
-        ...autoScrollStateRef.current,
-        scrollerKey: getScrollerKey(scrollEl),
-        vx: dx,
-        vy: dy
-      };
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [active, autoScrollStateRef, mouseRef, safeZoneRef]);
-}
-
-// src/client/dnd/design-mode/useOverlayRefs.ts
-var import_react11 = require("react");
-
-// src/client/dnd/design-mode/history.ts
-var DEFAULT_LIMIT = 300;
-var DndCommandHistory = class {
-  constructor(limit = DEFAULT_LIMIT) {
-    this.limit = limit;
-    __publicField(this, "undoStack", []);
-    __publicField(this, "redoStack", []);
-  }
-  execute(command, apply) {
-    const applied = apply(command, "redo");
-    if (!applied) return false;
-    this.undoStack.push(command);
-    if (this.undoStack.length > this.limit) this.undoStack.shift();
-    this.redoStack = [];
-    return true;
-  }
-  undo(apply) {
-    const command = this.undoStack.pop();
-    if (!command) return false;
-    const applied = apply(command, "undo");
-    if (!applied) {
-      this.undoStack.push(command);
-      return false;
-    }
-    this.redoStack.push(command);
-    return true;
-  }
-  redo(apply) {
-    const command = this.redoStack.pop();
-    if (!command) return false;
-    const applied = apply(command, "redo");
-    if (!applied) {
-      this.redoStack.push(command);
-      return false;
-    }
-    this.undoStack.push(command);
-    return true;
-  }
-  clear() {
-    this.undoStack = [];
-    this.redoStack = [];
-  }
-  canUndo() {
-    return this.undoStack.length > 0;
-  }
-  canRedo() {
-    return this.redoStack.length > 0;
-  }
-};
+          autoScrollStateRef.current.pendingScrollerKey = null;
+          autoScrollStateRef.current.pendingFrames = 0;
+        }
+        rectAge = 0;
+      }
+      if (isPointerInPageEdgeZone(x, y) || isPointerOutsideSafeZone(x, y, safeZone)) {
+        autoScrollStateRef.current = {
+          ...autoScrollStateRef.current,
+          scrollerKey: null,
+          vx: 0,
+          vy: 0
+        };
+        raf = requestAnimationFrame(tick);
+        return;
+      }
+      const dTop = y - cachedRect.top;
+      const dBot = cachedRect.bottom - y;
+      let dy = 0;
+      if (dTop > 0 && dTop < AUTO_SCROLL_ZONE_PX)
+        dy = -edgeVelocity(dTop, AUTO_SCROLL_ZONE_PX, AUTO_SCROLL_MAX_SPEED);
+      else if (dBot > 0 && dBot < AUTO_SCROLL_ZONE_PX)
+        dy = edgeVelocity(dBot, AUTO_SCROLL_ZONE_PX, AUTO_SCROLL_MAX_SPEED);
+      const dLeft = x - cachedRect.left;
+      const dRight = cachedRect.right - x;
+      let dx = 0;
+      if (dLeft > 0 && dLeft < AUTO_SCROLL_ZONE_PX)
+        dx = -edgeVelocity(dLeft, AUTO_SCROLL_ZONE_PX, AUTO_SCROLL_MAX_SPEED);
+      else if (dRight > 0 && dRight < AUTO_SCROLL_ZONE_PX)
+        dx = edgeVelocity(dRight, AUTO_SCROLL_ZONE_PX, AUTO_SCROLL_MAX_SPEED);
+      if (dy !== 0) scrollEl.scrollTop += dy;
+      if (dx !== 0) scrollEl.scrollLeft += dx;
+      autoScrollStateRef.current = {
+        ...autoScrollStateRef.current,
+        scrollerKey: getScrollerKey(scrollEl),
+        vx: dx,
+        vy: dy
+      };
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [active, autoScrollStateRef, mouseRef, safeZoneRef]);
+}
+
+// src/client/dnd/design-mode/useOverlayRefs.ts
+var import_react11 = require("react");
 
 // src/client/dnd/design-mode/sortable-preview-animator.ts
 function isIdentityTransform(transform) {
@@ -6139,43 +6645,6 @@ function useHoverDetection({
 // src/client/dnd/design-mode/useDragVisualLoop.ts
 var import_react13 = require("react");
 
-// src/client/dnd/design-mode/drag-lock.ts
-var MIN_UNLOCK_MARGIN = 32;
-var MAX_UNLOCK_MARGIN = 72;
-var MIN_UNLOCK_DWELL_MS = 170;
-var MAX_UNLOCK_DWELL_MS = 300;
-function clamp2(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function resolveCrossUnlockParams(rect) {
-  const width = Math.max(0, rect.right - rect.left);
-  const height = Math.max(0, rect.bottom - rect.top);
-  const shortest = Math.max(1, Math.min(width, height));
-  const margin = Math.round(clamp2(shortest * 0.14, MIN_UNLOCK_MARGIN, MAX_UNLOCK_MARGIN));
-  const dwellMs = Math.round(clamp2(shortest * 0.7, MIN_UNLOCK_DWELL_MS, MAX_UNLOCK_DWELL_MS));
-  return { margin, dwellMs };
-}
-function checkCrossUnlock(lock, adjustedPx, adjustedPy, lockRect, now, margin, dwellMs, graceMs) {
-  if (lock.isCrossUnlocked) {
-    if (lock.unlockUntilTs !== null && now < lock.unlockUntilTs) return lock;
-    return lock;
-  }
-  const outsideBand = adjustedPx < lockRect.left - margin || adjustedPx > lockRect.right + margin || adjustedPy < lockRect.top - margin || adjustedPy > lockRect.bottom + margin;
-  if (!outsideBand) {
-    return lock.exitSince !== null ? { ...lock, exitSince: null } : lock;
-  }
-  const exitSince = lock.exitSince ?? now;
-  if (now - exitSince >= dwellMs) {
-    return {
-      containerId: lock.containerId,
-      isCrossUnlocked: true,
-      exitSince,
-      unlockUntilTs: now + graceMs
-    };
-  }
-  return lock.exitSince !== null ? lock : { ...lock, exitSince: now };
-}
-
 // src/client/dnd/design-mode/quadtree.ts
 function overlaps(a, b) {
   return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
@@ -6185,6 +6654,7 @@ function fitsInside(outer, inner) {
 }
 var CAPACITY = 8;
 var MAX_DEPTH2 = 8;
+var ROOT_BOUNDS_PAD = 100;
 var QTNode = class _QTNode {
   constructor(bounds, depth = 0) {
     __publicField(this, "bounds");
@@ -6282,12 +6752,11 @@ var Quadtree = class _Quadtree {
       if (r.right > maxX) maxX = r.right;
       if (r.bottom > maxY) maxY = r.bottom;
     }
-    const PAD = 100;
     const root = new QTNode({
-      x: minX - PAD,
-      y: minY - PAD,
-      w: maxX - minX + 2 * PAD,
-      h: maxY - minY + 2 * PAD
+      x: minX - ROOT_BOUNDS_PAD,
+      y: minY - ROOT_BOUNDS_PAD,
+      w: maxX - minX + 2 * ROOT_BOUNDS_PAD,
+      h: maxY - minY + 2 * ROOT_BOUNDS_PAD
     });
     for (const [id, r] of rects) {
       if (r.width > 0 && r.height > 0) {
@@ -6389,9 +6858,9 @@ function getSlotQueryRadius() {
   const vh = window.innerHeight;
   return Math.min(500, Math.max(100, Math.max(vw, vh) * 0.2));
 }
-var NEST_EDGE_FRACTION = 0.28;
-var ORIGIN_RETURN_BAND_PX = 56;
-var LAST_CONTAINER_REENTRY_SLOP_PX = 40;
+var NEST_EDGE_FRACTION = 0.2;
+var ORIGIN_RETURN_BAND_PX = 24;
+var LAST_CONTAINER_REENTRY_SLOP_PX = 16;
 var ROW_OVERLAP_TOLERANCE_PX = 1;
 function normalizeContainerSet(containers) {
   if (!containers) return null;
@@ -6469,8 +6938,6 @@ var DragIntentEngine = class {
     // Pre-computed set of slot IDs that would produce no movement for the active item.
     __publicField(this, "noOpSlotIds");
     __publicField(this, "originContainerId");
-    __publicField(this, "laneRootContainerId");
-    __publicField(this, "laneParentId");
     __publicField(this, "laneAllowedContainers");
     __publicField(this, "blockedContainerIds");
     __publicField(this, "targetPlane", "lane");
@@ -6482,8 +6949,6 @@ var DragIntentEngine = class {
     this.queryRadius = getSlotQueryRadius();
     this.slotsByContainer = buildSlotsByContainer(projection.slotIndex);
     this.originContainerId = this.getNodeParentContainerId(activeId);
-    this.laneRootContainerId = options?.laneRootContainerId ?? this.originContainerId;
-    this.laneParentId = this.laneRootContainerId ? this.containerIndex.get(this.laneRootContainerId)?.parentId ?? null : null;
     this.laneAllowedContainers = normalizeContainerSet(options?.laneAllowedContainers);
     this.blockedContainerIds = normalizeContainerSet(options?.blockedContainerIds);
     const noOpSlotIds = /* @__PURE__ */ new Set();
@@ -6515,10 +6980,6 @@ var DragIntentEngine = class {
   setTargetPlane(plane) {
     this.targetPlane = plane;
   }
-  setLaneAllowedContainers(containers) {
-    this.laneAllowedContainers = normalizeContainerSet(containers);
-    this.reset();
-  }
   getTargetPlane() {
     return this.targetPlane;
   }
@@ -6617,7 +7078,7 @@ var DragIntentEngine = class {
     if (this.isInvalidDropContainer(pointerContainerId)) return null;
     for (const childId of container.children) {
       if (childId === this.activeId) continue;
-      if (this.containerIndex.has(childId)) continue;
+      if (this.isInvalidDropContainer(childId)) continue;
       const childNode = this.getNodeRect(childId);
       if (!childNode) continue;
       if (!pointInRect(px, py, childNode)) continue;
@@ -6642,9 +7103,16 @@ var DragIntentEngine = class {
       if (laneLock && !this.isLaneContainer(id)) continue;
       if (!pointInRect(px, py, node.rect)) continue;
       if (this.hasUsableSlots(id) === false) continue;
-      pointerContainers.push({ id, depth: node.depth, area: node.rect.width * node.rect.height });
+      const r = node.rect;
+      const edgeDistX = Math.min(px - r.left, r.right - px);
+      const edgeDistY = Math.min(py - r.top, r.bottom - py);
+      const minDim = Math.min(r.width, r.height);
+      const edgeFraction = Math.min(edgeDistX, edgeDistY) / Math.max(1, minDim);
+      const edgePenalty = edgeFraction < 0.1 ? 1 : 0;
+      pointerContainers.push({ id, depth: node.depth, area: node.rect.width * node.rect.height, edgePenalty });
     }
     pointerContainers.sort((a, b) => {
+      if (a.edgePenalty !== b.edgePenalty) return a.edgePenalty - b.edgePenalty;
       if (b.depth !== a.depth) return b.depth - a.depth;
       return a.area - b.area;
     });
@@ -6657,7 +7125,9 @@ var DragIntentEngine = class {
     }
     if (this.originContainerId && this.originContainerId !== pointerContainerId && !this.isInvalidDropContainer(this.originContainerId) && !this.isBlockedContainer(this.originContainerId) && (!laneLock || this.isLaneContainer(this.originContainerId)) && this.hasUsableSlots(this.originContainerId)) {
       const originNode = this.containerIndex.get(this.originContainerId);
-      if (originNode && pointInExpandedRect(px, py, originNode.rect, ORIGIN_RETURN_BAND_PX)) {
+      const currentNode = pointerContainerId ? this.containerIndex.get(pointerContainerId) : null;
+      const originIsDeeper = originNode && (!currentNode || originNode.depth >= currentNode.depth);
+      if (originIsDeeper && originNode && pointInExpandedRect(px, py, originNode.rect, ORIGIN_RETURN_BAND_PX)) {
         pointerContainerId = this.originContainerId;
       }
     }
@@ -6724,8 +7194,13 @@ var DragIntentEngine = class {
       }
       return n;
     }
+    const SLOT_ZONE_PX = 30;
     for (const child of childRects) {
       const midY = child.rect.top + child.rect.height / 2;
+      const clampedTop = Math.max(child.rect.top, midY - SLOT_ZONE_PX);
+      if (py < clampedTop) return child.index;
+      const clampedBottom = Math.min(child.rect.bottom, midY + SLOT_ZONE_PX);
+      if (py > clampedBottom) continue;
       if (py < midY) return child.index;
     }
     return n;
@@ -6794,15 +7269,14 @@ var DragIntentEngine = class {
   hasUsableSlots(containerId) {
     const filtered = this.getContainerSlots(containerId);
     if (filtered.length > 0) return true;
-    return (this.slotsByContainer.get(containerId)?.length ?? 0) > 0;
+    const raw = this.slotsByContainer.get(containerId) ?? [];
+    if (raw.length === 0) return false;
+    const container = this.containerIndex.get(containerId);
+    return !container || container.children.length <= 1;
   }
   isLaneContainer(containerId) {
     if (this.laneAllowedContainers) return this.laneAllowedContainers.has(containerId);
-    if (!this.laneRootContainerId) return true;
-    if (containerId === this.laneRootContainerId) return true;
-    const node = this.containerIndex.get(containerId);
-    if (!node) return false;
-    return node.parentId === this.laneParentId;
+    return true;
   }
   isBlockedContainer(containerId) {
     return this.blockedContainerIds?.has(containerId) ?? false;
@@ -6813,9 +7287,11 @@ 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;
 function slotDropLine(slot, container, projectionTree, sdx, sdy) {
-  const T = 2;
-  const MIN = 40;
+  const T = DROP_LINE_THICKNESS_PX;
+  const MIN = DROP_LINE_MIN_LENGTH_PX;
   const bp = computeSlotBoundaryPoint(slot, container, projectionTree);
   if (container.strategy === "horizontal") {
     return {
@@ -6855,9 +7331,6 @@ function slotDropLine(slot, container, projectionTree, sdx, sdy) {
 }
 
 // src/client/dnd/design-mode/preview-layout.ts
-function clampIndex(index, min, max) {
-  return Math.max(min, Math.min(index, max));
-}
 function getContainerChildren(projection, containerId) {
   return [...projection.containerIndex.get(containerId)?.children ?? []];
 }
@@ -6977,7 +7450,7 @@ function buildPreviewLayout({
     const originalItemIds = getContainerChildren(projection, containerId);
     const activeIndex = originalItemIds.indexOf(anchorNodeId);
     if (activeIndex < 0) return null;
-    const overIndex = clampIndex(targetIndex, 0, Math.max(0, originalItemIds.length - 1));
+    const overIndex = clamp(targetIndex, 0, Math.max(0, originalItemIds.length - 1));
     const previewItemIds = arrayMove(originalItemIds, activeIndex, overIndex);
     const strategy = getContainerStrategy(projection, containerId);
     containers.set(containerId, {
@@ -7017,7 +7490,7 @@ function buildPreviewLayout({
   activePreviewContainers.add(sourceContainerId);
   const targetOriginalItemIds = targetChildren.filter((id) => id !== anchorNodeId);
   const targetPreviewItemIds = [...targetOriginalItemIds];
-  const targetOverIndex = clampIndex(targetIndex, 0, targetOriginalItemIds.length);
+  const targetOverIndex = clamp(targetIndex, 0, targetOriginalItemIds.length);
   targetPreviewItemIds.splice(targetOverIndex, 0, anchorNodeId);
   const targetStrategy = getContainerStrategy(projection, targetContainerId);
   const targetStrategyItemIds = [...targetOriginalItemIds, anchorNodeId];
@@ -7049,9 +7522,8 @@ function buildPreviewLayout({
 }
 
 // src/client/dnd/design-mode/useDragVisualLoop.ts
-var CONTAINER_SWITCH_HYSTERESIS = 32;
-var CROSS_UNLOCK_GRACE_MS = 320;
-var SMALL_NODE_NEST_DWELL_MS = 180;
+var CONTAINER_SWITCH_HYSTERESIS = 12;
+var SMALL_NODE_NEST_DWELL_MS = 100;
 var LARGE_NODE_NEST_DWELL_MS = 320;
 function useDragVisualLoop({
   activeDrag,
@@ -7100,33 +7572,12 @@ function useDragVisualLoop({
       const scrollDy = window.scrollY - snapshot.scroll.y;
       const adjustedPx = px + scrollDx;
       const adjustedPy = py + scrollDy;
-      const lockContainer = refs.lockRef.current.containerId ? refs.projectionRef.current.containerIndex.get(refs.lockRef.current.containerId) ?? null : null;
-      if (!refs.lockRef.current.isCrossUnlocked && lockContainer) {
-        const { margin, dwellMs } = resolveCrossUnlockParams(lockContainer.rect);
-        const nextLock = checkCrossUnlock(
-          refs.lockRef.current,
-          adjustedPx,
-          adjustedPy,
-          lockContainer.rect,
-          performance.now(),
-          margin,
-          dwellMs,
-          CROSS_UNLOCK_GRACE_MS
-        );
-        if (nextLock !== refs.lockRef.current) {
-          refs.lockRef.current = nextLock;
-          if (nextLock.isCrossUnlocked) engine.setLaneAllowedContainers(null);
-        }
-      }
       const nestPreview = engine.peekNestIntent(px, py, window.scrollX, window.scrollY, snapshot.scroll.x, snapshot.scroll.y);
       const isLargeDraggedNode = shouldBlockNestForLargeNode(activeDrag.w, activeDrag.h);
       let allowNest = false;
       if (nestPreview) {
         const childId = nestPreview.slotId.split("::nest::")[1] ?? "";
-        const siblings = engine.getContainerChildren(nestPreview.containerId);
-        const isSiblingList = siblings.length >= 2;
-        const isSourceContainerNest = nestPreview.containerId === refs.sourceContainerIdRef.current;
-        allowNest = !!childId && !isSiblingList && !isLargeDraggedNode && !isSourceContainerNest;
+        allowNest = !!childId && !isLargeDraggedNode;
       }
       if (!allowNest) {
         refs.nestCandidateRef.current = null;
@@ -7136,7 +7587,12 @@ function useDragVisualLoop({
         const now = performance.now();
         if (!refs.nestCandidateRef.current || refs.nestCandidateRef.current.id !== nestPreview.slotId) {
           refs.nestCandidateRef.current = { id: nestPreview.slotId, since: now };
-          refs.nestTargetRef.current = null;
+          const hintTargetId = nestPreview.slotId.split("::nest::")[1] ?? "";
+          refs.nestTargetRef.current = refs.nodeMapRef.current.get(hintTargetId) ?? null;
+          const hintRect = snapshot.rects.get(hintTargetId);
+          if (hintRect) {
+            setInsideRect(new DOMRect(hintRect.left - scrollDx, hintRect.top - scrollDy, hintRect.width, hintRect.height));
+          }
           setTargetPlane("lane");
         } else if (now - refs.nestCandidateRef.current.since >= (isLargeDraggedNode ? LARGE_NODE_NEST_DWELL_MS : SMALL_NODE_NEST_DWELL_MS)) {
           setTargetPlane("nest");
@@ -7195,18 +7651,6 @@ function useDragVisualLoop({
         setTargetPlane("lane");
         refs.nestCandidateRef.current = null;
         refs.nestTargetRef.current = null;
-        const lockedParentId = refs.lockRef.current.containerId;
-        if (!refs.lockRef.current.isCrossUnlocked && (!lockedParentId || intent.containerId !== lockedParentId)) {
-          refs.lastIntentRef.current = null;
-          refs.visualIntentRef.current = null;
-          refs.resolvedReorderRef.current = null;
-          refs.finalVisualKeyRef.current = null;
-          setInsideRect(null);
-          setDropLine(null);
-          animator.clear();
-          rafId = requestAnimationFrame(tick);
-          return;
-        }
         refs.lastIntentRef.current = intent;
         refs.visualIntentRef.current = intent;
         setInsideRect(null);
@@ -7238,19 +7682,43 @@ function useDragVisualLoop({
         }
         const sourceCommitLane = refs.sourceCommitLaneRef.current ?? getCommitLaneSnapshot(sourceContainerId);
         const targetCommitLane = getCommitLaneSnapshot(intent.containerId);
-        const commitPlacement = resolveCommitPlacementFromVisualTarget(
+        let commitPlacement = resolveCommitPlacementFromVisualTarget(
           targetCommitLane,
           sourceCommitLane,
           activeDrag.anchorNodeId,
           targetInsertIndex
         );
         if (!commitPlacement) {
-          refs.resolvedReorderRef.current = null;
-          refs.finalVisualKeyRef.current = null;
-          setDropLine(null);
-          animator.clear();
-          rafId = requestAnimationFrame(tick);
-          return;
+          const containerEl = refs.nodeMapRef.current.get(intent.containerId)?.element;
+          const sourceCommitNodeId = refs.sourceCommitLaneRef.current?.commitNodeByAnchorId.get(activeDrag.anchorNodeId) ?? activeDrag.anchorNodeId;
+          if (!containerEl) {
+            refs.resolvedReorderRef.current = null;
+            refs.finalVisualKeyRef.current = null;
+            setDropLine(null);
+            animator.clear();
+            rafId = requestAnimationFrame(tick);
+            return;
+          }
+          const targetChildren = Array.from(containerEl.children).filter(
+            (child) => child instanceof HTMLElement
+          );
+          const filteredChildren = targetChildren.filter(
+            (child) => child.getAttribute(DND_NODE_ID_ATTR) !== sourceCommitNodeId
+          );
+          const idx = Math.max(0, Math.min(targetInsertIndex, filteredChildren.length));
+          const beforeChild = filteredChildren[idx] ?? null;
+          const afterChild = idx > 0 ? filteredChildren[idx - 1] ?? null : null;
+          const parentNodeId = ensureParentNodeId(containerEl);
+          const beforeNodeId = beforeChild?.getAttribute(DND_NODE_ID_ATTR) ? ensureParentNodeId(beforeChild) : null;
+          const afterNodeId = afterChild?.getAttribute(DND_NODE_ID_ATTR) ? ensureParentNodeId(afterChild) : null;
+          commitPlacement = {
+            parentNodeId,
+            laneContainerId: intent.containerId,
+            commitNodeId: sourceCommitNodeId,
+            beforeNodeId,
+            afterNodeId,
+            index: idx
+          };
         }
         setDropLine(slotDropLine(slot, container, proj.projectionTree, scrollDx, scrollDy));
         refs.resolvedReorderRef.current = {
@@ -7295,56 +7763,175 @@ function useDragVisualLoop({
 
 // src/client/dnd/design-mode/useDragLifecycle.ts
 var import_react14 = require("react");
-
-// src/client/dnd/design-mode/node-key.ts
-var _runtimeKeyMap = /* @__PURE__ */ new WeakMap();
-var _runtimeKeyCounter = 0;
-function getRuntimeKey(el) {
-  const existing = _runtimeKeyMap.get(el);
-  if (existing) return existing;
-  const key2 = `runtime:${++_runtimeKeyCounter}`;
-  _runtimeKeyMap.set(el, key2);
-  return key2;
-}
-function getNodeKeyFromElement(el) {
-  const resolved = resolveDragSurface(el);
-  const host = resolved.host ?? el;
-  const meta = getEditorMeta(host);
-  if (meta) return meta.nodeId;
-  const persisted = host.getAttribute("data-dnd-node-id");
-  if (persisted) return persisted;
-  return getRuntimeKey(host);
-}
-function getInspectorRefFromElement(el) {
-  const resolved = resolveDragSurface(el);
-  const host = resolved.host ?? el;
-  const meta = getEditorMeta(host);
-  if (!meta) return null;
-  return { relativePath: meta.file, line: meta.line, column: meta.col };
-}
-
-// src/client/dnd/design-mode/useDragLifecycle.ts
-var SOFT_COMMIT_DISTANCE_PX = 14;
-function isLaneCommitValid(intent, resolvedReorder, lockedParentId) {
-  if (!intent || intent.mode !== "reorder") return false;
-  if (!resolvedReorder) return false;
-  if (!lockedParentId) return false;
-  if (intent.containerId !== lockedParentId) return false;
-  if (resolvedReorder.visual.slotId !== intent.slotId) return false;
-  if (resolvedReorder.visual.parentNodeId !== intent.containerId) return false;
-  return true;
-}
-function buildRuntimeIdentityLocal(nodeId, resolveNodeElement) {
+function buildRuntimeIdentityLocal(nodeId, resolveNodeElement, effectiveLaneSnapshot) {
   if (!nodeId) return null;
   const element = resolveNodeElement(nodeId);
   if (!element) return null;
+  const nodeKey = getNodeKeyFromElement(element);
+  const inspectorRef = getInspectorRefFromElement(element);
+  const laneEffectiveNodeId = effectiveLaneSnapshot?.effectiveNodeIdsByCommitNodeId.get(nodeId) ?? null;
+  const effectiveNodeId = typeof laneEffectiveNodeId === "string" && laneEffectiveNodeId.length > 0 ? laneEffectiveNodeId : isSourceBackedRuntimeNodeKey(nodeKey) ? nodeKey : null;
+  const shouldExposeEffectiveIdentity = typeof effectiveNodeId === "string" && effectiveNodeId.length > 0;
   return {
     nodeId,
-    nodeKey: getNodeKeyFromElement(element),
-    selector: element.getAttribute(DND_NODE_ID_ATTR2) ? `[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(nodeId)}"]` : null,
-    inspectorRef: getInspectorRefFromElement(element)
+    nodeKey,
+    selector: element.getAttribute(DND_NODE_ID_ATTR) ? buildNodeSelector(nodeId) : null,
+    inspectorRef,
+    ...shouldExposeEffectiveIdentity ? {
+      effectiveNodeId,
+      effectiveNodeKey: effectiveNodeId,
+      effectiveInspectorRef: inspectorRef
+    } : {}
+  };
+}
+function buildMovePayloadWithEffectiveIdentities(params) {
+  const {
+    placement,
+    containerIdentity,
+    beforeSiblingIdentity,
+    afterSiblingIdentity,
+    commitIdentity
+  } = params;
+  return {
+    ...placement,
+    effectiveContainerNodeId: containerIdentity?.effectiveNodeId ?? null,
+    effectiveContainerNodeKey: containerIdentity?.effectiveNodeKey ?? null,
+    effectiveContainerInspectorRef: containerIdentity?.effectiveInspectorRef ?? null,
+    effectiveBeforeNodeId: beforeSiblingIdentity?.effectiveNodeId ?? null,
+    effectiveBeforeNodeKey: beforeSiblingIdentity?.effectiveNodeKey ?? null,
+    effectiveBeforeInspectorRef: beforeSiblingIdentity?.effectiveInspectorRef ?? null,
+    effectiveAfterNodeId: afterSiblingIdentity?.effectiveNodeId ?? null,
+    effectiveAfterNodeKey: afterSiblingIdentity?.effectiveNodeKey ?? null,
+    effectiveAfterInspectorRef: afterSiblingIdentity?.effectiveInspectorRef ?? null,
+    effectiveCommitNodeId: commitIdentity?.effectiveNodeId ?? null,
+    effectiveCommitNodeKey: commitIdentity?.effectiveNodeKey ?? null,
+    effectiveCommitInspectorRef: commitIdentity?.effectiveInspectorRef ?? null
   };
 }
+function recordCommittedMove(args) {
+  const {
+    command,
+    anchorNodeId,
+    selectedNodeId,
+    anchorEl,
+    selectedEl,
+    nodeKey,
+    inspRef,
+    selectedNodeKey,
+    selectedInspectorRef,
+    sourceLaneSnapshot,
+    targetLaneSnapshot,
+    resolveNodeElement,
+    recordMoveChange
+  } = args;
+  const sourceLaneIdentitySnapshot = captureCommitLaneIdentitySnapshot(
+    sourceLaneSnapshot,
+    resolveNodeElement
+  );
+  const targetLaneIdentitySnapshot = command.to.laneContainerId === command.from.laneContainerId ? sourceLaneIdentitySnapshot : captureCommitLaneIdentitySnapshot(targetLaneSnapshot, resolveNodeElement);
+  const targetLaneAfterIdentitySnapshot = targetLaneIdentitySnapshot ? createCommitLaneIdentitySnapshot({
+    laneContainerId: targetLaneIdentitySnapshot.laneContainerId,
+    commitNodeIds: projectCommitNodeIdsForMove({
+      commitNodeIds: targetLaneIdentitySnapshot.commitNodeIds,
+      movedCommitNodeId: command.commitNodeId,
+      targetIndex: command.to.index
+    }),
+    nodeKeysByCommitNodeId: new Map([
+      ...targetLaneIdentitySnapshot.nodeKeysByCommitNodeId,
+      ...sourceLaneIdentitySnapshot?.nodeKeysByCommitNodeId.has(command.commitNodeId) ? [[command.commitNodeId, sourceLaneIdentitySnapshot.nodeKeysByCommitNodeId.get(command.commitNodeId) ?? null]] : []
+    ])
+  }) : null;
+  const sourceContainerIdentity = buildRuntimeIdentityLocal(
+    command.from.parentNodeId ?? command.from.laneContainerId,
+    resolveNodeElement,
+    sourceLaneIdentitySnapshot
+  );
+  const sourceBeforeSiblingIdentity = buildRuntimeIdentityLocal(command.from.beforeNodeId, resolveNodeElement, sourceLaneIdentitySnapshot);
+  const sourceAfterSiblingIdentity = buildRuntimeIdentityLocal(command.from.afterNodeId, resolveNodeElement, sourceLaneIdentitySnapshot);
+  const sourceCommitIdentity = buildRuntimeIdentityLocal(command.commitNodeId, resolveNodeElement, sourceLaneIdentitySnapshot);
+  const containerIdentity = buildRuntimeIdentityLocal(
+    command.to.parentNodeId ?? command.to.laneContainerId,
+    resolveNodeElement,
+    targetLaneAfterIdentitySnapshot
+  );
+  const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement, targetLaneAfterIdentitySnapshot);
+  const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement, targetLaneAfterIdentitySnapshot);
+  const targetCommitIdentity = buildRuntimeIdentityLocal(command.commitNodeId, resolveNodeElement, targetLaneAfterIdentitySnapshot);
+  const diagnostics = buildMovePersistenceDiagnostics({
+    sourceLane: sourceLaneIdentitySnapshot,
+    targetLane: targetLaneIdentitySnapshot,
+    movedCommitNodeId: command.commitNodeId,
+    sourceLaneContainerId: command.from.laneContainerId,
+    targetLaneContainerId: command.to.laneContainerId,
+    targetIndex: command.to.index
+  });
+  const componentName = getEditorMeta(anchorEl)?.componentName;
+  const operationId = `${command.at}:${anchorNodeId}`;
+  const beforePayload = buildMovePayloadWithEffectiveIdentities({
+    placement: command.from,
+    containerIdentity: sourceContainerIdentity,
+    beforeSiblingIdentity: sourceBeforeSiblingIdentity,
+    afterSiblingIdentity: sourceAfterSiblingIdentity,
+    commitIdentity: sourceCommitIdentity
+  });
+  const afterPayload = buildMovePayloadWithEffectiveIdentities({
+    placement: command.to,
+    containerIdentity,
+    beforeSiblingIdentity,
+    afterSiblingIdentity,
+    commitIdentity: targetCommitIdentity
+  });
+  recordMoveChange({
+    operationId,
+    commandType: command.type,
+    nodeKey,
+    nodeId: anchorNodeId,
+    inspectorRef: inspRef,
+    selectedNodeKey,
+    selectedNodeId,
+    selectedInspectorRef,
+    anchorNodeKey: nodeKey,
+    anchorNodeId,
+    sourceContainer: sourceContainerIdentity,
+    sourceBeforeSibling: sourceBeforeSiblingIdentity,
+    sourceAfterSibling: sourceAfterSiblingIdentity,
+    diagnostics,
+    container: containerIdentity,
+    beforeSibling: beforeSiblingIdentity,
+    afterSibling: afterSiblingIdentity,
+    componentName,
+    before: beforePayload,
+    after: afterPayload
+  });
+  dispatchRuntimeEvent({
+    type: "element-moved",
+    operationId,
+    commandType: command.type,
+    selected: {
+      nodeId: selectedNodeId,
+      nodeKey: selectedNodeKey,
+      selector: selectedEl.getAttribute(DND_NODE_ID_ATTR) ? buildNodeSelector(selectedNodeId) : null,
+      inspectorRef: selectedInspectorRef,
+      ...targetCommitIdentity?.effectiveNodeId ? { effectiveNodeId: targetCommitIdentity.effectiveNodeId, effectiveNodeKey: targetCommitIdentity.effectiveNodeKey } : {}
+    },
+    anchor: {
+      nodeId: anchorNodeId,
+      nodeKey,
+      selector: anchorEl.getAttribute(DND_NODE_ID_ATTR) ? buildNodeSelector(anchorNodeId) : null,
+      inspectorRef: inspRef,
+      ...targetCommitIdentity?.effectiveNodeId ? { effectiveNodeId: targetCommitIdentity.effectiveNodeId, effectiveNodeKey: targetCommitIdentity.effectiveNodeKey } : {}
+    },
+    sourceContainer: sourceContainerIdentity,
+    sourceBeforeSibling: sourceBeforeSiblingIdentity,
+    sourceAfterSibling: sourceAfterSiblingIdentity,
+    container: containerIdentity,
+    beforeSibling: beforeSiblingIdentity,
+    afterSibling: afterSiblingIdentity,
+    diagnostics,
+    before: beforePayload,
+    after: afterPayload
+  });
+}
 function useDragLifecycle({
   refs,
   pause,
@@ -7426,12 +8013,10 @@ function useDragLifecycle({
     const srcContainerId = anchor.sourceContainerId;
     const sourceCommitLane = getCommitLaneSnapshot(srcContainerId);
     const startPosition = getCurrentCommitPlacement(anchorNodeId, srcContainerId);
-    const laneAllowed = srcContainerId ? /* @__PURE__ */ new Set([srcContainerId]) : null;
     const blockedContainerIds = buildBlockedStructuralContainerIds(proj, refs.nodeMapRef.current, srcContainerId);
     refs.blockedContainerIdsRef.current = blockedContainerIds;
     refs.engineRef.current = createDragIntentEngine(proj, anchorNodeId, {
       laneRootContainerId: srcContainerId,
-      laneAllowedContainers: laneAllowed,
       blockedContainerIds
     });
     refs.engineRef.current.setTargetPlane("lane");
@@ -7439,7 +8024,7 @@ function useDragLifecycle({
     refs.sourceContainerIdRef.current = srcContainerId;
     refs.sourceCommitLaneRef.current = sourceCommitLane;
     refs.dragSessionAnchorRef.current = anchor;
-    refs.lockRef.current = { containerId: srcContainerId, isCrossUnlocked: false, exitSince: null, unlockUntilTs: null };
+    refs.lockRef.current = { containerId: srcContainerId, isCrossUnlocked: true, exitSince: null, unlockUntilTs: null };
     refs.dragStartPositionRef.current = startPosition;
     refs.safeZoneRef.current = resolveSafeZoneRect();
     pause();
@@ -7465,22 +8050,34 @@ function useDragLifecycle({
     const pointer = refs.mouseRef.current;
     const safeZone = refs.safeZoneRef.current;
     const blockedByGuard = isPointerOutsideSafeZone(pointer.x, pointer.y, safeZone) || isPointerInHardPageEdgeZone(pointer.x, pointer.y);
-    const sourcePos = refs.dragStartPositionRef.current ?? getCurrentCommitPlacement(anchorNodeId, refs.sourceContainerIdRef.current);
+    let sourcePos = refs.dragStartPositionRef.current ?? getCurrentCommitPlacement(anchorNodeId, refs.sourceContainerIdRef.current);
+    if (!sourcePos && activeEl && activeEl.parentElement) {
+      const parentEl = activeEl.parentElement;
+      const commitNodeId = activeEl.getAttribute(DND_NODE_ID_ATTR) ?? anchorNodeId;
+      const siblings = Array.from(parentEl.children).filter((c) => c instanceof HTMLElement);
+      const idx = siblings.indexOf(activeEl);
+      if (idx >= 0) {
+        sourcePos = {
+          parentNodeId: ensureParentNodeId(parentEl),
+          laneContainerId: refs.sourceContainerIdRef.current,
+          commitNodeId,
+          beforeNodeId: idx < siblings.length - 1 ? siblings[idx + 1].getAttribute(DND_NODE_ID_ATTR) ?? ensureParentNodeId(siblings[idx + 1]) : null,
+          afterNodeId: idx > 0 ? siblings[idx - 1].getAttribute(DND_NODE_ID_ATTR) ?? ensureParentNodeId(siblings[idx - 1]) : null,
+          index: idx
+        };
+      }
+    }
     const intent = refs.visualIntentRef.current;
-    const finalVisual = refs.finalVisualKeyRef.current;
     const nestTarget = refs.nestTargetRef.current;
     const intentHasContainer = intent ? refs.projectionRef.current.containerIndex.has(intent.containerId) : false;
     const intentHasSlot = intent ? intent.mode === "nest" || refs.projectionRef.current.slotIndex.has(intent.slotId) : false;
     const intentValid = !!intent && intentHasContainer && intentHasSlot;
     if (!blockedByGuard && activeEl && sourcePos && (nestTarget || intentValid)) {
       const dropTargetId = nestTarget?.nodeId ?? intent?.containerId;
-      if (dropTargetId) {
-        const targetSc = refs.nodeMapRef.current.get(dropTargetId);
-        if (!targetSc || !isEligibleForDrag(targetSc)) {
-          clearDragState();
-          syncHistoryAvailability();
-          return;
-        }
+      if (dropTargetId && !refs.nodeMapRef.current.has(dropTargetId)) {
+        clearDragState();
+        syncHistoryAvailability();
+        return;
       }
       let command = null;
       if (nestTarget) {
@@ -7500,46 +8097,8 @@ function useDragLifecycle({
           };
         }
       } else if (intentValid && intent.mode === "reorder") {
-        const lockedParentId = refs.lockRef.current.containerId;
-        if (!refs.lockRef.current.isCrossUnlocked && (!lockedParentId || intent.containerId !== lockedParentId)) {
-          clearDragState();
-          syncHistoryAvailability();
-          return;
-        }
-        const snapshot = refs.snapshotRef.current;
-        const targetContainer = refs.projectionRef.current.containerIndex.get(intent.containerId);
-        if (targetContainer) {
-          const scrollDx = window.scrollX - (snapshot?.scroll.x ?? 0);
-          const scrollDy = window.scrollY - (snapshot?.scroll.y ?? 0);
-          const adjPx = pointer.x + scrollDx;
-          const adjPy = pointer.y + scrollDy;
-          const r = targetContainer.rect;
-          const inContainer = adjPx >= r.left - 40 && adjPx <= r.right + 40 && adjPy >= r.top - 40 && adjPy <= r.bottom + 40;
-          if (!inContainer) {
-            const softFallbackAllowed = finalVisual?.mode === "reorder" && finalVisual.containerId === intent.containerId && (() => {
-              const slot = refs.projectionRef.current.slotIndex.get(finalVisual.slotId);
-              const container = refs.projectionRef.current.containerIndex.get(finalVisual.containerId);
-              if (!slot || !container) return false;
-              const bp = computeSlotBoundaryPoint(slot, container, refs.projectionRef.current.projectionTree);
-              const dist = Math.hypot(adjPx - bp.x, adjPy - bp.y);
-              return dist <= SOFT_COMMIT_DISTANCE_PX;
-            })();
-            if (!softFallbackAllowed) {
-              clearDragState();
-              syncHistoryAvailability();
-              return;
-            }
-          }
-        }
         const resolvedReorder = refs.resolvedReorderRef.current;
-        const laneValid = refs.lockRef.current.isCrossUnlocked ? !!resolvedReorder && resolvedReorder.visual.slotId === intent.slotId && resolvedReorder.visual.parentNodeId === intent.containerId : isLaneCommitValid(intent, resolvedReorder, lockedParentId);
-        if (!laneValid) {
-          clearDragState();
-          syncHistoryAvailability();
-          return;
-        }
-        const visualParity = !!finalVisual && finalVisual.mode === "reorder" && finalVisual.anchorNodeId === anchorNodeId && finalVisual.slotId === resolvedReorder.visual.slotId && finalVisual.parentNodeId === resolvedReorder.visual.parentNodeId && finalVisual.index === resolvedReorder.visual.index && finalVisual.containerId === intent.containerId;
-        if (!visualParity) {
+        if (!resolvedReorder || resolvedReorder.visual.containerId !== intent.containerId) {
           clearDragState();
           syncHistoryAvailability();
           return;
@@ -7555,62 +8114,32 @@ function useDragLifecycle({
         };
       }
       if (command) {
+        const anchorEl = resolveNodeElement(anchorNodeId) ?? activeEl;
+        const selectedEl = resolveNodeElement(selectedNodeId) ?? anchorEl;
+        const nodeKey = getNodeKeyFromElement(anchorEl);
+        const inspRef = getInspectorRefFromElement(anchorEl);
+        const selectedNodeKey = getNodeKeyFromElement(selectedEl);
+        const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
+        const sourceLaneSnapshot = refs.sourceCommitLaneRef.current ?? getCommitLaneSnapshot(command.from.laneContainerId);
+        const targetLaneSnapshot = command.to.laneContainerId === command.from.laneContainerId ? sourceLaneSnapshot : getCommitLaneSnapshot(command.to.laneContainerId);
         const committed = refs.historyRef.current.execute(command, applyCommand);
         if (committed) {
           activeEl.setAttribute("data-dnd-moved", "");
           selectElement(null);
-          const anchorEl = resolveNodeElement(anchorNodeId) ?? activeEl;
-          const selectedEl = resolveNodeElement(selectedNodeId) ?? anchorEl;
-          const nodeKey = getNodeKeyFromElement(anchorEl);
-          const inspRef = getInspectorRefFromElement(anchorEl);
-          const selectedNodeKey = getNodeKeyFromElement(selectedEl);
-          const selectedInspectorRef = getInspectorRefFromElement(selectedEl);
-          const containerIdentity = buildRuntimeIdentityLocal(
-            command.to.parentNodeId ?? command.to.laneContainerId,
-            resolveNodeElement
-          );
-          const beforeSiblingIdentity = buildRuntimeIdentityLocal(command.to.beforeNodeId, resolveNodeElement);
-          const afterSiblingIdentity = buildRuntimeIdentityLocal(command.to.afterNodeId, resolveNodeElement);
-          const operationId = `${command.at}:${anchorNodeId}`;
-          recordMoveChange({
-            operationId,
-            commandType: command.type,
+          recordCommittedMove({
+            command,
+            anchorNodeId,
+            selectedNodeId,
+            anchorEl,
+            selectedEl,
             nodeKey,
-            nodeId: anchorNodeId,
-            inspectorRef: inspRef,
+            inspRef,
             selectedNodeKey,
-            selectedNodeId,
             selectedInspectorRef,
-            anchorNodeKey: nodeKey,
-            anchorNodeId,
-            container: containerIdentity,
-            beforeSibling: beforeSiblingIdentity,
-            afterSibling: afterSiblingIdentity,
-            componentName: getEditorMeta(anchorEl)?.componentName,
-            before: command.from,
-            after: command.to
-          });
-          dispatchRuntimeEvent({
-            type: "element-moved",
-            operationId,
-            commandType: command.type,
-            selected: {
-              nodeId: selectedNodeId,
-              nodeKey: selectedNodeKey,
-              selector: selectedEl.getAttribute(DND_NODE_ID_ATTR2) ? `[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(selectedNodeId)}"]` : null,
-              inspectorRef: selectedInspectorRef
-            },
-            anchor: {
-              nodeId: anchorNodeId,
-              nodeKey,
-              selector: anchorEl.getAttribute(DND_NODE_ID_ATTR2) ? `[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(anchorNodeId)}"]` : null,
-              inspectorRef: inspRef
-            },
-            container: containerIdentity,
-            beforeSibling: beforeSiblingIdentity,
-            afterSibling: afterSiblingIdentity,
-            before: command.from,
-            after: command.to
+            sourceLaneSnapshot,
+            targetLaneSnapshot,
+            resolveNodeElement,
+            recordMoveChange
           });
         }
       }
@@ -7649,7 +8178,7 @@ function useResizeSession({
     const rect = resizeTargetEl.getBoundingClientRect();
     const selectedNodeKey = getNodeKeyFromElement(selectedEl);
     const targetNodeKey = getNodeKeyFromElement(resizeTargetEl);
-    const targetNodeId = ensureElementNodeId(resizeTargetEl);
+    const targetNodeId = ensureParentNodeId(resizeTargetEl);
     const startColSpan = parseSpanValue(getComputedStyle(resizeTargetEl).gridColumnEnd || resizeTargetEl.style.gridColumnEnd);
     const startRowSpan = parseSpanValue(getComputedStyle(resizeTargetEl).gridRowEnd || resizeTargetEl.style.gridRowEnd);
     const columnTrackCount = getGridTrackCount(resizeTargetParent ? getComputedStyle(resizeTargetParent).gridTemplateColumns : null);
@@ -7774,13 +8303,13 @@ function useResizeSession({
       selected: {
         nodeId: selectedNodeId,
         nodeKey: selectedNodeKey,
-        selector: `[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(selectedNodeId)}"]`,
+        selector: buildNodeSelector(selectedNodeId),
         inspectorRef
       },
       anchor: {
         nodeId: targetNodeId,
         nodeKey: targetNodeKey,
-        selector: `[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(targetNodeId)}"]`,
+        selector: buildNodeSelector(targetNodeId),
         inspectorRef: getInspectorRefFromElement(element)
       },
       resize: {
@@ -7821,6 +8350,169 @@ function useResizeSession({
   return { handleResizeHandlePointerDown };
 }
 
+// src/client/dnd/design-mode/useExternalDragLoop.ts
+var import_react16 = require("react");
+var EXTERNAL_DRAG_ACTIVE_ID = "__external-drag-placeholder__";
+function useExternalDragLoop({
+  externalDrag,
+  refs,
+  elements,
+  resolveNodeElement,
+  setDropLine
+}) {
+  const engineRef = (0, import_react16.useRef)(null);
+  const lastIntentRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!externalDrag) {
+      engineRef.current = null;
+      lastIntentRef.current = null;
+      setDropLine(null);
+      externalDragMouse.commitRequested = false;
+      return;
+    }
+    const projection = buildProjection(elements);
+    if (projection.containerIndex.size === 0) return;
+    const rects = /* @__PURE__ */ new Map();
+    for (const el of elements) {
+      rects.set(el.nodeId, el.rect);
+    }
+    const nodeMap = /* @__PURE__ */ new Map();
+    for (const el of elements) nodeMap.set(el.nodeId, el);
+    const blockedContainerIds = buildBlockedStructuralContainerIds(projection, nodeMap, null);
+    const engine = new DragIntentEngine(projection, EXTERNAL_DRAG_ACTIVE_ID, {
+      blockedContainerIds
+    });
+    engineRef.current = engine;
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    let rafId;
+    const tick = () => {
+      if (externalDragMouse.commitRequested) {
+        externalDragMouse.commitRequested = false;
+        commitExternalDrop(
+          externalDragMouse.x,
+          externalDragMouse.y,
+          engine,
+          externalDrag,
+          refs,
+          resolveNodeElement,
+          setDropLine
+        );
+        return;
+      }
+      const intent = engine.resolve(
+        externalDragMouse.x,
+        externalDragMouse.y,
+        window.scrollX,
+        window.scrollY,
+        scrollX,
+        scrollY
+      );
+      if (intent && intent.mode === "reorder") {
+        lastIntentRef.current = intent;
+        const slot = projection.slotIndex.get(intent.slotId);
+        const container = projection.containerIndex.get(intent.containerId);
+        if (slot && container) {
+          const scrollDx = window.scrollX - scrollX;
+          const scrollDy = window.scrollY - scrollY;
+          setDropLine(slotDropLine(slot, container, projection.projectionTree, scrollDx, scrollDy));
+        } else {
+          setDropLine(null);
+        }
+      } else {
+        lastIntentRef.current = null;
+        setDropLine(null);
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [externalDrag, elements, refs, resolveNodeElement, setDropLine]);
+}
+function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, setDropLine) {
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  const intent = engine.resolve(x, y, scrollX, scrollY, scrollX, scrollY);
+  if (!intent || intent.mode !== "reorder") {
+    useDesignModeStore.getState().cancelExternalDrag();
+    setDropLine(null);
+    return;
+  }
+  const containerEl = resolveNodeElement(intent.containerId);
+  if (!containerEl) {
+    useDesignModeStore.getState().cancelExternalDrag();
+    setDropLine(null);
+    return;
+  }
+  const template = document.createElement("template");
+  template.innerHTML = component.html.trim();
+  const newElement = template.content.firstElementChild;
+  if (!newElement) {
+    useDesignModeStore.getState().cancelExternalDrag();
+    setDropLine(null);
+    return;
+  }
+  const nodeId = `insert:${Date.now()}`;
+  newElement.setAttribute(DND_NODE_ID_ATTR, nodeId);
+  newElement.setAttribute("data-dnd-force-allow", "");
+  newElement.setAttribute("data-dnd-moved", "");
+  const children = Array.from(containerEl.children).filter(
+    (child) => child instanceof HTMLElement
+  );
+  const beforeChild = children[intent.index] ?? null;
+  containerEl.insertBefore(newElement, beforeChild);
+  const insertCommand = {
+    type: "insert",
+    nodeId,
+    html: component.html,
+    containerId: intent.containerId,
+    index: intent.index,
+    at: Date.now()
+  };
+  const applied = refs.historyRef.current.execute(insertCommand, (command, direction) => {
+    if (command.type !== "insert") return false;
+    return applyInsertCommand(command, direction, resolveNodeElement);
+  });
+  if (applied) {
+    const nodeKey = getNodeKeyFromElement(newElement);
+    const inspectorRef = getInspectorRefFromElement(newElement);
+    const containerNodeKey = getNodeKeyFromElement(containerEl);
+    let containerIdentity = null;
+    if (containerEl) {
+      containerIdentity = {
+        nodeId: intent.containerId,
+        nodeKey: getNodeKeyFromElement(containerEl),
+        selector: containerEl.getAttribute(DND_NODE_ID_ATTR) ? buildNodeSelector(intent.containerId) : null,
+        inspectorRef: getInspectorRefFromElement(containerEl)
+      };
+    }
+    const operationId = `${insertCommand.at}:${nodeId}`;
+    useDesignModeStore.getState().recordInsertChange({
+      operationId,
+      nodeKey,
+      nodeId,
+      inspectorRef,
+      displayName: component.displayName,
+      html: component.html,
+      containerId: intent.containerId,
+      containerNodeKey,
+      index: intent.index
+    });
+    dispatchRuntimeEvent({
+      type: "element-inserted",
+      operationId,
+      nodeId,
+      nodeKey,
+      displayName: component.displayName,
+      html: component.html,
+      container: containerIdentity,
+      index: intent.index
+    });
+  }
+  setDropLine(null);
+  useDesignModeStore.getState().cancelExternalDrag();
+}
+
 // src/client/dnd/design-mode/DesignModeOverlay.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var DROP_ANIMATION = { duration: DURATION_MS, easing: EASING };
@@ -7866,11 +8558,11 @@ function HitArea({
   onResizeHandlePointerDown
 }) {
   const { setNodeRef, listeners, attributes, isDragging } = useDraggable({ id: scanned.nodeId });
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setNodeRef(scanned.element);
     return () => setNodeRef(null);
   }, [setNodeRef, scanned.element]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     const el = scanned.element;
     if (isDragging) {
       el.style.opacity = "0";
@@ -7878,16 +8570,16 @@ function HitArea({
       el.style.removeProperty("opacity");
     }
   }, [isDragging, scanned.element]);
-  (0, import_react16.useEffect)(() => () => {
+  (0, import_react17.useEffect)(() => () => {
     scanned.element.style.removeProperty("opacity");
     scanned.element.style.removeProperty("transform");
     scanned.element.style.removeProperty("transition");
     scanned.element.style.removeProperty("will-change");
   }, [scanned.element]);
-  const divRef = (0, import_react16.useRef)(null);
-  const [hoverResizeHandle, setHoverResizeHandle] = (0, import_react16.useState)(null);
+  const divRef = (0, import_react17.useRef)(null);
+  const [hoverResizeHandle, setHoverResizeHandle] = (0, import_react17.useState)(null);
   const isSelected = scanned.nodeId === selectedNodeId;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const div = divRef.current;
     if (!div) return;
     const onWheel = (e) => {
@@ -7958,13 +8650,14 @@ function DesignModeOverlay() {
   const redoLastChange = useDesignModeStore((s) => s.redoLastChange);
   const orderedChanges = useDesignModeStore((s) => s.orderedChanges);
   const exportChangesForAI = useDesignModeStore((s) => s.exportChangesForAI);
+  const externalDrag = useDesignModeStore((s) => s.externalDrag);
   const { elements, pause, resume } = useElementScanner(enabled);
-  const nodeMap = (0, import_react16.useMemo)(() => {
+  const nodeMap = (0, import_react17.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const el of elements) m.set(el.nodeId, el);
     return m;
   }, [elements]);
-  const draggableElements = (0, import_react16.useMemo)(() => {
+  const draggableElements = (0, import_react17.useMemo)(() => {
     if (elements.length === 0) return [];
     const projection = buildProjection(elements);
     return collectDraggableAnchors(elements, projection, nodeMap);
@@ -7972,21 +8665,21 @@ function DesignModeOverlay() {
   const refs = useOverlayRefs(undoRequestId, redoRequestId);
   refs.elementsRef.current = elements;
   refs.nodeMapRef.current = nodeMap;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
-  const resolveNodeElement = (0, import_react16.useCallback)((nodeId) => {
+  const resolveNodeElement = (0, import_react17.useCallback)((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
-    return document.querySelector(`[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(nodeId)}"]`);
+    return document.querySelector(buildNodeSelector(nodeId));
   }, []);
-  const clearCommitLaneCache = (0, import_react16.useCallback)(() => {
+  const clearCommitLaneCache = (0, import_react17.useCallback)(() => {
     refs.commitLaneCacheRef.current.clear();
     refs.sourceCommitLaneRef.current = null;
   }, []);
-  const getCommitLaneSnapshot = (0, import_react16.useCallback)((laneContainerId) => {
+  const getCommitLaneSnapshot = (0, import_react17.useCallback)((laneContainerId) => {
     if (!laneContainerId) return null;
     if (refs.commitLaneCacheRef.current.has(laneContainerId)) {
       return refs.commitLaneCacheRef.current.get(laneContainerId) ?? null;
@@ -7995,15 +8688,15 @@ function DesignModeOverlay() {
     refs.commitLaneCacheRef.current.set(laneContainerId, snapshot);
     return snapshot;
   }, []);
-  const getCurrentCommitPlacement = (0, import_react16.useCallback)((anchorNodeId, laneContainerId) => {
+  const getCurrentCommitPlacement = (0, import_react17.useCallback)((anchorNodeId, laneContainerId) => {
     const lane = getCommitLaneSnapshot(laneContainerId);
     return resolveCurrentCommitPlacement(lane, anchorNodeId);
   }, [getCommitLaneSnapshot]);
-  const applyCommand = (0, import_react16.useCallback)((command, direction) => {
+  const applyCommand = (0, import_react17.useCallback)((command, direction) => {
     if (command.type === "resize") {
       const resCmd = command;
       const targetId = resCmd.targetNodeId ?? resCmd.nodeId;
-      const targetEl = document.querySelector(`[${DND_NODE_ID_ATTR2}="${escapeCssAttrValue(targetId)}"]`);
+      const targetEl = document.querySelector(buildNodeSelector(targetId));
       if (!targetEl) return false;
       const snapshot = direction === "redo" ? resCmd.after : resCmd.before;
       if (snapshot.styles) {
@@ -8014,29 +8707,36 @@ function DesignModeOverlay() {
       }
       return true;
     }
+    if (command.type === "insert") {
+      return applyInsertCommand(command, direction, resolveNodeElement);
+    }
     const applied = applyDndCommandPlacement(command, direction, resolveNodeElement);
     if (!applied) return false;
     clearCommitLaneCache();
     return true;
   }, [clearCommitLaneCache, resolveNodeElement]);
-  const syncHistoryAvailability = (0, import_react16.useCallback)(() => {
+  const syncHistoryAvailability = (0, import_react17.useCallback)(() => {
     if (historyMode === "host") {
       setHistoryAvailability(false, false);
       return;
     }
     setHistoryAvailability(refs.historyRef.current.canUndo(), refs.historyRef.current.canRedo());
   }, [historyMode, setHistoryAvailability]);
+  (0, import_react17.useEffect)(() => {
+    refs.historyRef.current.clear();
+    syncHistoryAvailability();
+  }, [enabled, syncHistoryAvailability]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
   );
-  const collisionDetection = (0, import_react16.useCallback)(
+  const collisionDetection = (0, import_react17.useCallback)(
     (args) => createDesignModeCollisionDetection(refs.blockedContainerIdsRef.current)(args),
     []
     // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
   );
-  const [insideRect, setInsideRect] = (0, import_react16.useState)(null);
-  const [dropLine, setDropLine] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [insideRect, setInsideRect] = (0, import_react17.useState)(null);
+  const [dropLine, setDropLine] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     const fn = (e) => {
       refs.mouseRef.current = { x: e.clientX, y: e.clientY };
@@ -8044,7 +8744,7 @@ function DesignModeOverlay() {
     window.addEventListener("pointermove", fn, { capture: true, passive: true });
     return () => window.removeEventListener("pointermove", fn, { capture: true });
   }, [enabled]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     if (historyMode !== "local") return;
     const onKeyDown = (e) => {
@@ -8073,7 +8773,7 @@ function DesignModeOverlay() {
     setInsideRect,
     setDropLine
   });
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled || activeDrag) return;
     if (undoRequestId === refs.processedUndoIdRef.current) return;
     refs.processedUndoIdRef.current = undoRequestId;
@@ -8090,7 +8790,7 @@ function DesignModeOverlay() {
     });
     syncHistoryAvailability();
   }, [undoRequestId, enabled, activeDrag, applyCommand, resume, selectElement, syncHistoryAvailability, undoLastChange]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled || activeDrag || historyMode !== "local") return;
     if (redoRequestId === refs.processedRedoIdRef.current) return;
     refs.processedRedoIdRef.current = redoRequestId;
@@ -8102,49 +8802,29 @@ function DesignModeOverlay() {
     }
     syncHistoryAvailability();
   }, [redoRequestId, enabled, activeDrag, applyCommand, historyMode, resume, selectElement, syncHistoryAvailability, redoLastChange]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     syncHistoryAvailability();
   }, [syncHistoryAvailability]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     dispatchRuntimeEvent({
       type: "design-mode-changed",
       mode: enabled ? "design" : "off"
     });
   }, [enabled]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const aiOutput = exportChangesForAI();
     const updatedAt = orderedChanges.length > 0 ? orderedChanges[orderedChanges.length - 1]?.at ?? Date.now() : Date.now();
     dispatchRuntimeEvent({
       type: "arrange-session-changed",
-      session: {
-        mode: enabled ? "arrange" : "off",
-        canUndo: orderedChanges.length > 0,
-        changes: orderedChanges.map((event, index) => ({
-          id: `${event.kind}:${event.operationId}:${index}`,
-          kind: event.kind,
-          operationId: event.operationId,
-          commandType: event.kind === "move" ? event.commandType : void 0,
-          nodeKey: event.nodeKey,
-          nodeId: event.nodeId,
-          inspectorRef: event.inspectorRef,
-          selectedNodeKey: event.kind === "move" ? event.selectedNodeKey : void 0,
-          selectedNodeId: event.kind === "move" ? event.selectedNodeId : void 0,
-          selectedInspectorRef: event.kind === "move" ? event.selectedInspectorRef : void 0,
-          anchorNodeKey: event.kind === "move" ? event.anchorNodeKey : void 0,
-          anchorNodeId: event.kind === "move" ? event.anchorNodeId : void 0,
-          summary: summarizeEditorChangeEvent(event),
-          at: event.at
-        })),
-        output: {
-          json: aiOutput,
-          prompt: aiOutput.aiPromptContext,
-          summary: orderedChanges.length === 0 ? "No arrange changes recorded yet." : `${orderedChanges.length} arrange change${orderedChanges.length === 1 ? "" : "s"} recorded.`
-        },
+      session: buildArrangeSessionSnapshot({
+        enabled,
+        orderedChanges,
+        aiOutput,
         updatedAt
-      }
+      })
     });
   }, [enabled, exportChangesForAI, orderedChanges]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     document.body.classList.add("design-mode-active");
     return () => document.body.classList.remove("design-mode-active");
@@ -8157,6 +8837,13 @@ function DesignModeOverlay() {
     autoScrollStateRef: refs.autoScrollStateRef
   });
   useDragVisualLoop({ activeDrag, refs, getCommitLaneSnapshot, setInsideRect, setDropLine });
+  useExternalDragLoop({
+    externalDrag,
+    refs,
+    elements,
+    resolveNodeElement,
+    setDropLine
+  });
   const { handleResizeHandlePointerDown } = useResizeSession({
     enabled,
     refs,
@@ -8212,7 +8899,7 @@ function DesignModeOverlay() {
             }
           }
         ),
-        dropLine && activeDrag && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        dropLine && (activeDrag ?? externalDrag) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             "data-design-mode-ui": true,
@@ -8237,8 +8924,8 @@ function DesignModeOverlay() {
 }
 
 // src/client/dnd/design-mode/DesignModeErrorBoundary.tsx
-var import_react17 = __toESM(require("react"));
-var DesignModeErrorBoundary = class extends import_react17.default.Component {
+var import_react18 = __toESM(require("react"));
+var DesignModeErrorBoundary = class extends import_react18.default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -8271,35 +8958,40 @@ var combinedCollisionDetection = (args) => {
 
 // src/client/dnd/DndProvider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var externalDragMouse = { x: 0, y: 0, commitRequested: false };
 function DndProvider({ children }) {
   const setActive = useDndStore((s) => s.setActive);
   const dragEndHandlers = useDndStore((s) => s.dragEndHandlers);
-  const toggle = useDesignModeStore((s) => s.toggle);
   const designModeEnabled = useDesignModeStore((s) => s.enabled);
-  const setDesignModeEnabled = useDesignModeStore((s) => s.setEnabled);
   const setHistoryMode = useDesignModeStore((s) => s.setHistoryMode);
   const setInspectorTheme = useDesignModeStore((s) => s.setInspectorTheme);
   const requestUndo = useDesignModeStore((s) => s.requestUndo);
-  (0, import_react18.useEffect)(() => {
+  const transitionDesignMode = (0, import_react19.useCallback)((nextEnabled) => {
+    const designModeState = useDesignModeStore.getState();
+    if (designModeState.enabled === nextEnabled) return;
+    designModeState.resetArrangeSession();
+    designModeState.setEnabled(nextEnabled);
+  }, []);
+  (0, import_react19.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
-        toggle();
+        transitionDesignMode(!useDesignModeStore.getState().enabled);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggle]);
-  (0, import_react18.useEffect)(() => {
+  }, [transitionDesignMode]);
+  (0, import_react19.useEffect)(() => {
     const handleHostCommand = (event) => {
       const detail = event.detail;
       if (!detail || typeof detail !== "object") return;
       switch (detail.type) {
         case "sync-editor-state":
           if (detail.mode === "design") {
-            setDesignModeEnabled(true);
+            transitionDesignMode(true);
           } else if (detail.mode === "inspect" || detail.mode === "off") {
-            setDesignModeEnabled(false);
+            transitionDesignMode(false);
           }
           if (detail.historyMode) {
             setHistoryMode(detail.historyMode);
@@ -8309,7 +9001,7 @@ function DndProvider({ children }) {
           }
           break;
         case "set-design-mode":
-          setDesignModeEnabled(detail.enabled);
+          transitionDesignMode(detail.enabled);
           break;
         case "set-history-mode":
           setHistoryMode(detail.historyMode);
@@ -8320,6 +9012,21 @@ function DndProvider({ children }) {
         case "request-undo":
           requestUndo();
           break;
+        case "external-drag-start":
+          useDesignModeStore.getState().startExternalDrag(detail.component);
+          break;
+        case "external-drag-move":
+          externalDragMouse.x = detail.clientX;
+          externalDragMouse.y = detail.clientY;
+          break;
+        case "external-drag-end":
+          externalDragMouse.x = detail.clientX;
+          externalDragMouse.y = detail.clientY;
+          externalDragMouse.commitRequested = true;
+          break;
+        case "external-drag-cancel":
+          useDesignModeStore.getState().cancelExternalDrag();
+          break;
         default:
           break;
       }
@@ -8329,7 +9036,7 @@ function DndProvider({ children }) {
       window.removeEventListener(HOST_COMMAND_EVENT, handleHostCommand);
     };
   }, [
-    setDesignModeEnabled,
+    transitionDesignMode,
     setHistoryMode,
     setInspectorTheme,
     requestUndo
@@ -8337,7 +9044,7 @@ function DndProvider({ children }) {
   const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 8 } });
   const keyboardSensor = useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates });
   const sensors = useSensors(pointerSensor, keyboardSensor);
-  const handleDragStart = (0, import_react18.useCallback)(
+  const handleDragStart = (0, import_react19.useCallback)(
     (event) => {
       const { active } = event;
       const element = document.querySelector(`[data-canvas-node="${active.id}"]`);
@@ -8345,7 +9052,7 @@ function DndProvider({ children }) {
     },
     [setActive]
   );
-  const handleDragEnd = (0, import_react18.useCallback)(
+  const handleDragEnd = (0, import_react19.useCallback)(
     (event) => {
       const { active, over } = event;
       const dragEndEvent = {
@@ -8361,9 +9068,10 @@ function DndProvider({ children }) {
     },
     [dragEndHandlers, setActive]
   );
-  const handleDesignModeCrash = (0, import_react18.useCallback)(() => {
+  const handleDesignModeCrash = (0, import_react19.useCallback)(() => {
     const designModeState = useDesignModeStore.getState();
     designModeState.resetAll();
+    designModeState.resetArrangeSession();
     designModeState.setEnabled(false);
   }, []);
   if (designModeEnabled) {
@@ -8404,7 +9112,7 @@ function DndProvider({ children }) {
 }
 
 // src/client/useArchieDevToolsRuntime.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/client/inject-inspector/archieOrigins.ts
 var ARCHIE_HOST_ORIGINS = [
@@ -8510,10 +9218,9 @@ function injectInspector(opts = {}) {
     document.head.appendChild(script);
     return null;
   }
-  const localInspectorModulePath = "./inspector.js";
   return import(
     /* @vite-ignore */
-    localInspectorModulePath
+    "./inspector.js"
   ).then((m) => {
     try {
       m.default();
@@ -8599,13 +9306,13 @@ function setupArchieRouteListener(router) {
 }
 
 // src/client/runtime/domMetaSanitizer.ts
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var _installed = false;
 function installDomMetaSanitizer() {
   if (_installed) return;
   _installed = true;
-  const _origCE = import_react19.default.createElement.bind(import_react19.default);
-  import_react19.default.createElement = function patchedCreateElement(type, props, ...children) {
+  const _origCE = import_react20.default.createElement.bind(import_react20.default);
+  import_react20.default.createElement = function patchedCreateElement(type, props, ...children) {
     if (typeof type === "string" && props != null && "__editorMeta" in props) {
       const { __editorMeta: _stripped, ...rest } = props;
       return _origCE(type, rest, ...children);
@@ -8629,18 +9336,26 @@ installDomMetaSanitizer();
 installDomMetaSanitizer();
 function useArchieDevToolsRuntime({
   router,
-  inspector = true
+  inspector,
+  inspectorOptions
 }) {
-  (0, import_react20.useEffect)(() => {
+  const stableOptionsKey = JSON.stringify(inspectorOptions ?? null);
+  const inspectorOptionsRef = (0, import_react21.useRef)(inspectorOptions);
+  inspectorOptionsRef.current = inspectorOptions;
+  (0, import_react21.useEffect)(() => {
     if (process.env.NODE_ENV !== "development") {
       return;
     }
     const unsubscribe = setupArchieRouteListener(router);
-    if (inspector) {
-      injectInspector({ scriptSource: "remote" });
+    if (inspector !== false) {
+      const isLocalHost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+      injectInspector({
+        scriptSource: isLocalHost ? "local" : "remote",
+        ...inspectorOptionsRef.current
+      });
     }
     return unsubscribe;
-  }, [router, inspector]);
+  }, [router, inspector, stableOptionsKey]);
 }
 
 // src/client/ArchieDevToolProvider.tsx
@@ -8648,9 +9363,10 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function ArchieDevToolProvider({
   children,
   router,
-  inspector = true
+  inspector,
+  inspectorOptions
 }) {
-  useArchieDevToolsRuntime({ router, inspector });
+  useArchieDevToolsRuntime({ router, inspector, inspectorOptions });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DndProvider, { children });
 }
 // Annotate the CommonJS export names for ESM import in node: