@archie/devtools 0.0.45 → 0.0.47

package/dist/client/client.js

@@ -5222,9 +5222,12 @@ function ensureUniqueNodeId(base, used) {
   return `${base}::${idx}`;
 }
 var INSERT_NODE_ID_PREFIX = "insert:";
+var INSERT_CHILD_NODE_ID_PREFIX = "insert-child:";
 function resolveStableNodeId(el, used) {
   const persisted = el.getAttribute(DND_NODE_ID_ATTR);
-  if (persisted && persisted.startsWith(INSERT_NODE_ID_PREFIX)) return persisted;
+  if (persisted && (persisted.startsWith(INSERT_NODE_ID_PREFIX) || persisted.startsWith(INSERT_CHILD_NODE_ID_PREFIX))) {
+    return persisted;
+  }
   if (persisted && !used.has(persisted)) return persisted;
   const projected = projectUsageMeta(el);
   if (projected) return ensureUniqueNodeId(projected.nodeId, used);
@@ -5541,6 +5544,25 @@ function useElementScanner(enabled) {
 // src/client/dnd/design-mode/ElementHighlight.tsx
 var import_react7 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function computeLaneKinshipContainerIds({
+  candidateContainerIds,
+  activeContainerId,
+  draggingNodeId,
+  getParentContainerId,
+  getContainerChildren: getContainerChildren2
+}) {
+  const anchorId = activeContainerId ?? getParentContainerId(draggingNodeId);
+  if (!anchorId) return /* @__PURE__ */ new Set();
+  const parentId = getParentContainerId(anchorId);
+  const kin = /* @__PURE__ */ new Set();
+  if (!parentId) return kin;
+  if (candidateContainerIds.has(parentId)) kin.add(parentId);
+  for (const siblingId of getContainerChildren2(parentId)) {
+    if (siblingId === anchorId) continue;
+    if (candidateContainerIds.has(siblingId)) kin.add(siblingId);
+  }
+  return kin;
+}
 var HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var HANDLE_HIT_SIZE = 24;
 var HANDLE_KNOB_SIZE = 8;
@@ -6128,6 +6150,15 @@ var NON_DRAGGABLE_DESCENDANT_TAGS = /* @__PURE__ */ new Set([
   "source",
   "track"
 ]);
+var ARCHIE_INSERTED_ATTR = "data-archie-inserted";
+var INSERT_CHILD_NODE_ID_PREFIX2 = "insert-child:";
+function sealDescendantNodeId(node) {
+  if (node.hasAttribute("data-dnd-node-id")) return;
+  const marker = node.getAttribute(ARCHIE_INSERTED_ATTR);
+  if (!marker) return;
+  if (marker.includes('"') || marker.includes("'")) return;
+  node.setAttribute("data-dnd-node-id", `${INSERT_CHILD_NODE_ID_PREFIX2}${marker}`);
+}
 function markInsertedDescendants(root) {
   const descendants = root.querySelectorAll("*");
   for (const node of descendants) {
@@ -6135,6 +6166,7 @@ function markInsertedDescendants(root) {
     if (NON_DRAGGABLE_DESCENDANT_TAGS.has(tag)) continue;
     node.setAttribute("data-dnd-force-allow", "");
     node.setAttribute("data-dnd-moved", "");
+    sealDescendantNodeId(node);
   }
 }
 
@@ -8926,7 +8958,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
     const candidate = postInsertChildren[i];
     const candidateNodeId = candidate.getAttribute(DND_NODE_ID_ATTR);
     if (!candidateNodeId) continue;
-    const isEarlierInsert = candidateNodeId.startsWith("insert:");
+    const isEarlierInsert = candidateNodeId.startsWith("insert:") || candidateNodeId.startsWith("insert-child:");
     if (!isEarlierInsert && !getInspectorRefFromElement(candidate)) continue;
     beforeSiblingEl = candidate;
     beforeSiblingNodeId = candidateNodeId;
@@ -9337,21 +9369,33 @@ function DesignModeOverlay() {
     [activeDrag]
     // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
   );
+  const laneKinshipContainerIds = (0, import_react16.useMemo)(() => {
+    if (!activeDrag || !dropCandidateContainerIds) return null;
+    const engine = refs.engineRef.current;
+    if (!engine) return null;
+    return computeLaneKinshipContainerIds({
+      candidateContainerIds: dropCandidateContainerIds,
+      activeContainerId: activeLaneContainerId,
+      draggingNodeId: activeDrag.nodeId,
+      getParentContainerId: (id) => engine.getNodeParentContainerId(id),
+      getContainerChildren: (id) => engine.getContainerChildren(id)
+    });
+  }, [activeDrag, activeLaneContainerId, dropCandidateContainerIds]);
   const visibleCandidateContainerIds = (0, import_react16.useMemo)(() => {
-    if (!dropCandidateContainerIds) return null;
+    if (!laneKinshipContainerIds) return null;
     const rects = refs.snapshotRef.current?.rects;
-    if (!rects) return dropCandidateContainerIds;
+    if (!rects) return laneKinshipContainerIds;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     const visible = /* @__PURE__ */ new Set();
-    for (const id of dropCandidateContainerIds) {
+    for (const id of laneKinshipContainerIds) {
       const r = rects.get(id);
       if (!r) continue;
       if (r.right < 0 || r.bottom < 0 || r.left > vw || r.top > vh) continue;
       visible.add(id);
     }
     return visible;
-  }, [dropCandidateContainerIds]);
+  }, [laneKinshipContainerIds]);
   const dragGuide = (0, import_react16.useMemo)(() => {
     if (!activeDrag) return null;
     const snapshot = refs.snapshotRef.current;
@@ -9573,6 +9617,7 @@ var combinedCollisionDetection = (args) => {
 // src/client/dnd/DndProvider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var externalDragMouse = { x: 0, y: 0, commitRequested: false };
+var EMPTY_SENSORS = [];
 function DndProvider({ children }) {
   const setActive = useDndStore((s) => s.setActive);
   const dragEndHandlers = useDndStore((s) => s.dragEndHandlers);
@@ -9714,30 +9759,17 @@ function DndProvider({ children }) {
     designModeState.resetArrangeSession();
     designModeState.setEnabled(false);
   }, []);
-  if (designModeEnabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      children,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        DesignModeErrorBoundary,
-        {
-          onError: handleDesignModeCrash,
-          resetKey: designModeEnabled,
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DesignModeOverlay, {})
-        }
-      )
-    ] });
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     DndContext,
     {
-      sensors,
+      sensors: designModeEnabled ? EMPTY_SENSORS : sensors,
       collisionDetection: combinedCollisionDetection,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragCancel: () => setActive(null),
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DragOverlay2, {}),
+        !designModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DragOverlay2, {}),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           DesignModeErrorBoundary,
           {

package/dist/client/client.mjs

@@ -5187,9 +5187,12 @@ function ensureUniqueNodeId(base, used) {
   return `${base}::${idx}`;
 }
 var INSERT_NODE_ID_PREFIX = "insert:";
+var INSERT_CHILD_NODE_ID_PREFIX = "insert-child:";
 function resolveStableNodeId(el, used) {
   const persisted = el.getAttribute(DND_NODE_ID_ATTR);
-  if (persisted && persisted.startsWith(INSERT_NODE_ID_PREFIX)) return persisted;
+  if (persisted && (persisted.startsWith(INSERT_NODE_ID_PREFIX) || persisted.startsWith(INSERT_CHILD_NODE_ID_PREFIX))) {
+    return persisted;
+  }
   if (persisted && !used.has(persisted)) return persisted;
   const projected = projectUsageMeta(el);
   if (projected) return ensureUniqueNodeId(projected.nodeId, used);
@@ -5506,6 +5509,25 @@ function useElementScanner(enabled) {
 // src/client/dnd/design-mode/ElementHighlight.tsx
 import { useRef as useRef5, useEffect as useEffect5, useCallback as useCallback5 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function computeLaneKinshipContainerIds({
+  candidateContainerIds,
+  activeContainerId,
+  draggingNodeId,
+  getParentContainerId,
+  getContainerChildren: getContainerChildren2
+}) {
+  const anchorId = activeContainerId ?? getParentContainerId(draggingNodeId);
+  if (!anchorId) return /* @__PURE__ */ new Set();
+  const parentId = getParentContainerId(anchorId);
+  const kin = /* @__PURE__ */ new Set();
+  if (!parentId) return kin;
+  if (candidateContainerIds.has(parentId)) kin.add(parentId);
+  for (const siblingId of getContainerChildren2(parentId)) {
+    if (siblingId === anchorId) continue;
+    if (candidateContainerIds.has(siblingId)) kin.add(siblingId);
+  }
+  return kin;
+}
 var HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var HANDLE_HIT_SIZE = 24;
 var HANDLE_KNOB_SIZE = 8;
@@ -6093,6 +6115,15 @@ var NON_DRAGGABLE_DESCENDANT_TAGS = /* @__PURE__ */ new Set([
   "source",
   "track"
 ]);
+var ARCHIE_INSERTED_ATTR = "data-archie-inserted";
+var INSERT_CHILD_NODE_ID_PREFIX2 = "insert-child:";
+function sealDescendantNodeId(node) {
+  if (node.hasAttribute("data-dnd-node-id")) return;
+  const marker = node.getAttribute(ARCHIE_INSERTED_ATTR);
+  if (!marker) return;
+  if (marker.includes('"') || marker.includes("'")) return;
+  node.setAttribute("data-dnd-node-id", `${INSERT_CHILD_NODE_ID_PREFIX2}${marker}`);
+}
 function markInsertedDescendants(root) {
   const descendants = root.querySelectorAll("*");
   for (const node of descendants) {
@@ -6100,6 +6131,7 @@ function markInsertedDescendants(root) {
     if (NON_DRAGGABLE_DESCENDANT_TAGS.has(tag)) continue;
     node.setAttribute("data-dnd-force-allow", "");
     node.setAttribute("data-dnd-moved", "");
+    sealDescendantNodeId(node);
   }
 }
 
@@ -8891,7 +8923,7 @@ function commitExternalDrop(x, y, engine, component, refs, resolveNodeElement, s
     const candidate = postInsertChildren[i];
     const candidateNodeId = candidate.getAttribute(DND_NODE_ID_ATTR);
     if (!candidateNodeId) continue;
-    const isEarlierInsert = candidateNodeId.startsWith("insert:");
+    const isEarlierInsert = candidateNodeId.startsWith("insert:") || candidateNodeId.startsWith("insert-child:");
     if (!isEarlierInsert && !getInspectorRefFromElement(candidate)) continue;
     beforeSiblingEl = candidate;
     beforeSiblingNodeId = candidateNodeId;
@@ -9302,21 +9334,33 @@ function DesignModeOverlay() {
     [activeDrag]
     // eslint-disable-line react-hooks/exhaustive-deps -- refs are stable
   );
+  const laneKinshipContainerIds = useMemo6(() => {
+    if (!activeDrag || !dropCandidateContainerIds) return null;
+    const engine = refs.engineRef.current;
+    if (!engine) return null;
+    return computeLaneKinshipContainerIds({
+      candidateContainerIds: dropCandidateContainerIds,
+      activeContainerId: activeLaneContainerId,
+      draggingNodeId: activeDrag.nodeId,
+      getParentContainerId: (id) => engine.getNodeParentContainerId(id),
+      getContainerChildren: (id) => engine.getContainerChildren(id)
+    });
+  }, [activeDrag, activeLaneContainerId, dropCandidateContainerIds]);
   const visibleCandidateContainerIds = useMemo6(() => {
-    if (!dropCandidateContainerIds) return null;
+    if (!laneKinshipContainerIds) return null;
     const rects = refs.snapshotRef.current?.rects;
-    if (!rects) return dropCandidateContainerIds;
+    if (!rects) return laneKinshipContainerIds;
     const vw = window.innerWidth;
     const vh = window.innerHeight;
     const visible = /* @__PURE__ */ new Set();
-    for (const id of dropCandidateContainerIds) {
+    for (const id of laneKinshipContainerIds) {
       const r = rects.get(id);
       if (!r) continue;
       if (r.right < 0 || r.bottom < 0 || r.left > vw || r.top > vh) continue;
       visible.add(id);
     }
     return visible;
-  }, [dropCandidateContainerIds]);
+  }, [laneKinshipContainerIds]);
   const dragGuide = useMemo6(() => {
     if (!activeDrag) return null;
     const snapshot = refs.snapshotRef.current;
@@ -9536,8 +9580,9 @@ var combinedCollisionDetection = (args) => {
 };
 
 // src/client/dnd/DndProvider.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var externalDragMouse = { x: 0, y: 0, commitRequested: false };
+var EMPTY_SENSORS = [];
 function DndProvider({ children }) {
   const setActive = useDndStore((s) => s.setActive);
   const dragEndHandlers = useDndStore((s) => s.dragEndHandlers);
@@ -9679,30 +9724,17 @@ function DndProvider({ children }) {
     designModeState.resetArrangeSession();
     designModeState.setEnabled(false);
   }, []);
-  if (designModeEnabled) {
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      children,
-      /* @__PURE__ */ jsx5(
-        DesignModeErrorBoundary,
-        {
-          onError: handleDesignModeCrash,
-          resetKey: designModeEnabled,
-          children: /* @__PURE__ */ jsx5(DesignModeOverlay, {})
-        }
-      )
-    ] });
-  }
   return /* @__PURE__ */ jsxs4(
     DndContext,
     {
-      sensors,
+      sensors: designModeEnabled ? EMPTY_SENSORS : sensors,
       collisionDetection: combinedCollisionDetection,
       onDragStart: handleDragStart,
       onDragEnd: handleDragEnd,
       onDragCancel: () => setActive(null),
       children: [
         children,
-        /* @__PURE__ */ jsx5(DragOverlay2, {}),
+        !designModeEnabled && /* @__PURE__ */ jsx5(DragOverlay2, {}),
         /* @__PURE__ */ jsx5(
           DesignModeErrorBoundary,
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",