@archie/devtools 0.0.18 → 0.0.19

package/dist/client/client.js

@@ -4279,6 +4279,32 @@ function getEditorMeta(el) {
   }
   return writeFiberAwareCache(metaCache, el, selection, null);
 }
+function getEditorMetaOwnerFiber(el) {
+  const selection = getFiberSelectionFromElement(el);
+  let fiber = selection.fiber;
+  while (fiber) {
+    if (fiber.memoizedProps?.__editorMeta) return fiber;
+    fiber = fiber.return;
+  }
+  return null;
+}
+function getSingleHostElement(owner) {
+  const hosts = [];
+  const stack = owner?.child ? [owner.child] : [];
+  while (stack.length > 0) {
+    const fiber = stack.pop();
+    if (!fiber) continue;
+    if (fiber.tag === 4) return null;
+    if (typeof fiber.type === "string" && fiber.stateNode instanceof HTMLElement) {
+      hosts.push(fiber.stateNode);
+      if (hosts.length > 1) return null;
+    } else if (fiber.child) {
+      stack.push(fiber.child);
+    }
+    if (fiber.sibling) stack.push(fiber.sibling);
+  }
+  return hosts.length === 1 ? hosts[0] : null;
+}
 function findMetaOwnerElement(el) {
   let current = el;
   while (current) {
@@ -4902,8 +4928,11 @@ 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) {
+  if (sc.draggable === false) return false;
   const source = sc.eligibilitySource ?? "editor-meta";
-  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant";
+  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant" || // RFC E2.4 P1: single host root of a kit-component usage (MetricCard,
+  // Section, …) carrying the usage's projected meta.
+  source === "projected-usage";
 }
 function isPointerInEdgeZone(px, py, guard) {
   return px <= guard || py <= guard || px >= window.innerWidth - guard || py >= window.innerHeight - guard;
@@ -5025,6 +5054,13 @@ function isInspectorEligible(el) {
   if (el.hasAttribute("data-dnd-force-allow")) return "force-allow";
   return null;
 }
+function projectUsageMeta(el) {
+  if (getDirectEditorMeta(el)) return null;
+  const owner = getEditorMetaOwnerFiber(el);
+  if (!owner) return null;
+  if (getSingleHostElement(owner) !== el) return null;
+  return owner.memoizedProps?.__editorMeta ?? null;
+}
 function isRuntimeVisualInternal(el) {
   if (shouldIgnoreAsVirtualRuntime(el)) return true;
   const tag = el.tagName.toLowerCase();
@@ -5056,6 +5092,8 @@ function resolveStableNodeId(el, used) {
   if (persisted && !used.has(persisted)) return persisted;
   const metaId = getEditorMetaNodeId(el);
   if (metaId) return ensureUniqueNodeId(metaId, used);
+  const projected = projectUsageMeta(el);
+  if (projected) return ensureUniqueNodeId(projected.nodeId, used);
   return ensureUniqueNodeId(getRuntimeNodeId(el), used);
 }
 function getUniqueSelector(el) {
@@ -5147,9 +5185,31 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
         continue;
       }
       const eligibilitySource = isInspectorEligible(el);
-      const inferredEligibility = eligibilitySource ?? inferEligibilityFromSortableParent(el);
+      const inferredEligibility = eligibilitySource ?? inferEligibilityFromSortableParent(el) ?? (projectUsageMeta(el) ? "projected-usage" : null);
       if (inferredEligibility === null) {
-        results.push(...scanElements(el, depth + 1, usedNodeIds, seenResolvedHosts));
+        const childResults = scanElements(el, depth + 1, usedNodeIds, seenResolvedHosts);
+        results.push(...childResults);
+        if (isFlexOrGridParent(el) && !seenResolvedHosts.has(el) && childResults.some((r) => r.draggable && r.element.parentElement === el)) {
+          const nodeId2 = resolveStableNodeId(el, usedNodeIds);
+          seenResolvedHosts.add(el);
+          usedNodeIds.add(nodeId2);
+          el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
+          const selector = getUniqueSelector(el);
+          results.push({
+            nodeId: nodeId2,
+            element: el,
+            selector,
+            sourceMetaNodeId: null,
+            resolvedHostNodeId: nodeId2,
+            resolvedHostSelector: selector,
+            resolutionKind: "direct-host",
+            label: getLabel(el),
+            rect: el.getBoundingClientRect(),
+            containerStrategy: resolveContainerStrategy(el),
+            eligibilitySource: "container-of-eligible",
+            draggable: false
+          });
+        }
         continue;
       }
       const dragSurface = resolveDragSurface(el);
@@ -5172,10 +5232,12 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
       const surfaceMeta = hostEl instanceof HTMLElement ? getDirectEditorMeta(hostEl) ?? void 0 : void 0;
       const ownerMeta = dragSurface.metaOwner && dragSurface.metaOwner instanceof HTMLElement ? getEditorMeta(dragSurface.metaOwner) : null;
       const resolvedSelector = getUniqueSelector(hostEl);
+      const draggable = inferredEligibility === "force-allow" || !nodeId.startsWith("runtime:");
       results.push({
         nodeId,
         element: hostEl,
         selector: resolvedSelector,
+        draggable,
         sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
         resolvedHostNodeId: nodeId,
         resolvedHostSelector: resolvedSelector,
@@ -5222,6 +5284,7 @@ function useElementScanner(enabled) {
           nodeId,
           element: el,
           selector,
+          draggable: !nodeId.startsWith("runtime:"),
           sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
           resolvedHostNodeId: nodeId,
           resolvedHostSelector: selector,
@@ -8661,7 +8724,9 @@ function DesignModeOverlay() {
   const draggableElements = (0, import_react17.useMemo)(() => {
     if (elements.length === 0) return [];
     const projection = buildProjection(elements);
-    return collectDraggableAnchors(elements, projection, nodeMap);
+    return collectDraggableAnchors(elements, projection, nodeMap).filter(
+      (el) => el.draggable !== false
+    );
   }, [elements, nodeMap]);
   const refs = useOverlayRefs(undoRequestId, redoRequestId);
   refs.elementsRef.current = elements;

package/dist/client/client.mjs

@@ -4244,6 +4244,32 @@ function getEditorMeta(el) {
   }
   return writeFiberAwareCache(metaCache, el, selection, null);
 }
+function getEditorMetaOwnerFiber(el) {
+  const selection = getFiberSelectionFromElement(el);
+  let fiber = selection.fiber;
+  while (fiber) {
+    if (fiber.memoizedProps?.__editorMeta) return fiber;
+    fiber = fiber.return;
+  }
+  return null;
+}
+function getSingleHostElement(owner) {
+  const hosts = [];
+  const stack = owner?.child ? [owner.child] : [];
+  while (stack.length > 0) {
+    const fiber = stack.pop();
+    if (!fiber) continue;
+    if (fiber.tag === 4) return null;
+    if (typeof fiber.type === "string" && fiber.stateNode instanceof HTMLElement) {
+      hosts.push(fiber.stateNode);
+      if (hosts.length > 1) return null;
+    } else if (fiber.child) {
+      stack.push(fiber.child);
+    }
+    if (fiber.sibling) stack.push(fiber.sibling);
+  }
+  return hosts.length === 1 ? hosts[0] : null;
+}
 function findMetaOwnerElement(el) {
   let current = el;
   while (current) {
@@ -4867,8 +4893,11 @@ 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) {
+  if (sc.draggable === false) return false;
   const source = sc.eligibilitySource ?? "editor-meta";
-  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant";
+  return source === "editor-meta" || source === "force-allow" || source === "inferred-sortable-descendant" || // RFC E2.4 P1: single host root of a kit-component usage (MetricCard,
+  // Section, …) carrying the usage's projected meta.
+  source === "projected-usage";
 }
 function isPointerInEdgeZone(px, py, guard) {
   return px <= guard || py <= guard || px >= window.innerWidth - guard || py >= window.innerHeight - guard;
@@ -4990,6 +5019,13 @@ function isInspectorEligible(el) {
   if (el.hasAttribute("data-dnd-force-allow")) return "force-allow";
   return null;
 }
+function projectUsageMeta(el) {
+  if (getDirectEditorMeta(el)) return null;
+  const owner = getEditorMetaOwnerFiber(el);
+  if (!owner) return null;
+  if (getSingleHostElement(owner) !== el) return null;
+  return owner.memoizedProps?.__editorMeta ?? null;
+}
 function isRuntimeVisualInternal(el) {
   if (shouldIgnoreAsVirtualRuntime(el)) return true;
   const tag = el.tagName.toLowerCase();
@@ -5021,6 +5057,8 @@ function resolveStableNodeId(el, used) {
   if (persisted && !used.has(persisted)) return persisted;
   const metaId = getEditorMetaNodeId(el);
   if (metaId) return ensureUniqueNodeId(metaId, used);
+  const projected = projectUsageMeta(el);
+  if (projected) return ensureUniqueNodeId(projected.nodeId, used);
   return ensureUniqueNodeId(getRuntimeNodeId(el), used);
 }
 function getUniqueSelector(el) {
@@ -5112,9 +5150,31 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
         continue;
       }
       const eligibilitySource = isInspectorEligible(el);
-      const inferredEligibility = eligibilitySource ?? inferEligibilityFromSortableParent(el);
+      const inferredEligibility = eligibilitySource ?? inferEligibilityFromSortableParent(el) ?? (projectUsageMeta(el) ? "projected-usage" : null);
       if (inferredEligibility === null) {
-        results.push(...scanElements(el, depth + 1, usedNodeIds, seenResolvedHosts));
+        const childResults = scanElements(el, depth + 1, usedNodeIds, seenResolvedHosts);
+        results.push(...childResults);
+        if (isFlexOrGridParent(el) && !seenResolvedHosts.has(el) && childResults.some((r) => r.draggable && r.element.parentElement === el)) {
+          const nodeId2 = resolveStableNodeId(el, usedNodeIds);
+          seenResolvedHosts.add(el);
+          usedNodeIds.add(nodeId2);
+          el.setAttribute(DND_NODE_ID_ATTR, nodeId2);
+          const selector = getUniqueSelector(el);
+          results.push({
+            nodeId: nodeId2,
+            element: el,
+            selector,
+            sourceMetaNodeId: null,
+            resolvedHostNodeId: nodeId2,
+            resolvedHostSelector: selector,
+            resolutionKind: "direct-host",
+            label: getLabel(el),
+            rect: el.getBoundingClientRect(),
+            containerStrategy: resolveContainerStrategy(el),
+            eligibilitySource: "container-of-eligible",
+            draggable: false
+          });
+        }
         continue;
       }
       const dragSurface = resolveDragSurface(el);
@@ -5137,10 +5197,12 @@ function scanElements(root, depth = 0, usedNodeIds = /* @__PURE__ */ new Set(),
       const surfaceMeta = hostEl instanceof HTMLElement ? getDirectEditorMeta(hostEl) ?? void 0 : void 0;
       const ownerMeta = dragSurface.metaOwner && dragSurface.metaOwner instanceof HTMLElement ? getEditorMeta(dragSurface.metaOwner) : null;
       const resolvedSelector = getUniqueSelector(hostEl);
+      const draggable = inferredEligibility === "force-allow" || !nodeId.startsWith("runtime:");
       results.push({
         nodeId,
         element: hostEl,
         selector: resolvedSelector,
+        draggable,
         sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
         resolvedHostNodeId: nodeId,
         resolvedHostSelector: resolvedSelector,
@@ -5187,6 +5249,7 @@ function useElementScanner(enabled) {
           nodeId,
           element: el,
           selector,
+          draggable: !nodeId.startsWith("runtime:"),
           sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
           resolvedHostNodeId: nodeId,
           resolvedHostSelector: selector,
@@ -8626,7 +8689,9 @@ function DesignModeOverlay() {
   const draggableElements = useMemo6(() => {
     if (elements.length === 0) return [];
     const projection = buildProjection(elements);
-    return collectDraggableAnchors(elements, projection, nodeMap);
+    return collectDraggableAnchors(elements, projection, nodeMap).filter(
+      (el) => el.draggable !== false
+    );
   }, [elements, nodeMap]);
   const refs = useOverlayRefs(undoRequestId, redoRequestId);
   refs.elementsRef.current = elements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -73,4 +73,4 @@
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.4.0"
   }
-}
+}