@archie/devtools 0.0.18 → 0.0.20

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) {
@@ -4901,9 +4927,22 @@ function buildNodeSelector(nodeId) {
 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 resolveGrabFeedbackTarget(target, scannedByNodeId) {
+  if (!(target instanceof Element)) return null;
+  if (target.closest("[data-design-mode-ui]")) return null;
+  const host = target.closest(`[${DND_NODE_ID_ATTR}]`);
+  if (!host) return null;
+  const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
+  const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
+  if (!scanned || scanned.draggable !== false) return null;
+  return scanned;
+}
 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 +5064,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 +5102,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 +5195,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 +5242,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 +5294,7 @@ function useElementScanner(enabled) {
           nodeId,
           element: el,
           selector,
+          draggable: !nodeId.startsWith("runtime:"),
           sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
           resolvedHostNodeId: nodeId,
           resolvedHostSelector: selector,
@@ -8661,7 +8734,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;
@@ -8671,6 +8746,25 @@ function DesignModeOverlay() {
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
+  const [grabFeedback, setGrabFeedback] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
+    if (!enabled) return;
+    const onPointerDown = (e) => {
+      const scanned = resolveGrabFeedbackTarget(
+        e.target,
+        refs.nodeMapRef.current
+      );
+      if (!scanned) return;
+      setGrabFeedback({ x: e.clientX, y: e.clientY, at: Date.now() });
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled]);
+  (0, import_react17.useEffect)(() => {
+    if (!grabFeedback) return;
+    const t = setTimeout(() => setGrabFeedback(null), 1400);
+    return () => clearTimeout(t);
+  }, [grabFeedback]);
   const resolveNodeElement = (0, import_react17.useCallback)((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
@@ -8882,6 +8976,29 @@ function DesignModeOverlay() {
           },
           el.nodeId
         )),
+        grabFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            "data-design-mode-ui": "true",
+            style: {
+              position: "fixed",
+              left: grabFeedback.x,
+              top: grabFeedback.y - 34,
+              transform: "translateX(-50%)",
+              zIndex: 2147483646,
+              pointerEvents: "none",
+              background: "rgba(23, 23, 23, 0.92)",
+              color: "#fff",
+              font: "500 11px/1.4 system-ui, sans-serif",
+              padding: "4px 8px",
+              borderRadius: 6,
+              whiteSpace: "nowrap",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+            },
+            children: "This element can't be moved"
+          },
+          grabFeedback.at
+        ) : null,
         insideRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {

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) {
@@ -4866,9 +4892,22 @@ function buildNodeSelector(nodeId) {
 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 resolveGrabFeedbackTarget(target, scannedByNodeId) {
+  if (!(target instanceof Element)) return null;
+  if (target.closest("[data-design-mode-ui]")) return null;
+  const host = target.closest(`[${DND_NODE_ID_ATTR}]`);
+  if (!host) return null;
+  const nodeId = host.getAttribute(DND_NODE_ID_ATTR);
+  const scanned = nodeId ? scannedByNodeId.get(nodeId) : null;
+  if (!scanned || scanned.draggable !== false) return null;
+  return scanned;
+}
 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 +5029,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 +5067,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 +5160,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 +5207,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 +5259,7 @@ function useElementScanner(enabled) {
           nodeId,
           element: el,
           selector,
+          draggable: !nodeId.startsWith("runtime:"),
           sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
           resolvedHostNodeId: nodeId,
           resolvedHostSelector: selector,
@@ -8626,7 +8699,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;
@@ -8636,6 +8711,25 @@ function DesignModeOverlay() {
     for (const el of draggableElements) m.set(el.nodeId, el);
     refs.draggableNodeMapRef.current = m;
   }, [draggableElements]);
+  const [grabFeedback, setGrabFeedback] = useState6(null);
+  useEffect12(() => {
+    if (!enabled) return;
+    const onPointerDown = (e) => {
+      const scanned = resolveGrabFeedbackTarget(
+        e.target,
+        refs.nodeMapRef.current
+      );
+      if (!scanned) return;
+      setGrabFeedback({ x: e.clientX, y: e.clientY, at: Date.now() });
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [enabled]);
+  useEffect12(() => {
+    if (!grabFeedback) return;
+    const t = setTimeout(() => setGrabFeedback(null), 1400);
+    return () => clearTimeout(t);
+  }, [grabFeedback]);
   const resolveNodeElement = useCallback8((nodeId) => {
     const known = refs.nodeMapRef.current.get(nodeId)?.element;
     if (known) return known;
@@ -8847,6 +8941,29 @@ function DesignModeOverlay() {
           },
           el.nodeId
         )),
+        grabFeedback ? /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-design-mode-ui": "true",
+            style: {
+              position: "fixed",
+              left: grabFeedback.x,
+              top: grabFeedback.y - 34,
+              transform: "translateX(-50%)",
+              zIndex: 2147483646,
+              pointerEvents: "none",
+              background: "rgba(23, 23, 23, 0.92)",
+              color: "#fff",
+              font: "500 11px/1.4 system-ui, sans-serif",
+              padding: "4px 8px",
+              borderRadius: 6,
+              whiteSpace: "nowrap",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.25)"
+            },
+            children: "This element can't be moved"
+          },
+          grabFeedback.at
+        ) : null,
         insideRect && /* @__PURE__ */ jsx4(
           "div",
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "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"
   }
-}
+}