@archie/devtools 0.0.17 → 0.0.19

package/dist/client/client.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /** Only configured domains (Archie host origins) and optionally localhost in dev. "*" is never used. */
 type InjectOptions = {
@@ -82,4 +82,9 @@ interface ArchieDevToolProviderProps extends ArchieDevToolsRuntimeOptions {
 }
 declare function ArchieDevToolProvider({ children, router, inspector, inspectorOptions, }: ArchieDevToolProviderProps): react_jsx_runtime.JSX.Element;
 
-export { ArchieDevToolProvider, type ArchieDevToolProviderProps };
+interface DndProviderProps {
+    children: React.ReactNode;
+}
+declare function DndProvider({ children }: DndProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ArchieDevToolProvider, type ArchieDevToolProviderProps, DndProvider };

package/dist/client/client.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 /** Only configured domains (Archie host origins) and optionally localhost in dev. "*" is never used. */
 type InjectOptions = {
@@ -82,4 +82,9 @@ interface ArchieDevToolProviderProps extends ArchieDevToolsRuntimeOptions {
 }
 declare function ArchieDevToolProvider({ children, router, inspector, inspectorOptions, }: ArchieDevToolProviderProps): react_jsx_runtime.JSX.Element;
 
-export { ArchieDevToolProvider, type ArchieDevToolProviderProps };
+interface DndProviderProps {
+    children: React.ReactNode;
+}
+declare function DndProvider({ children }: DndProviderProps): react_jsx_runtime.JSX.Element;
+
+export { ArchieDevToolProvider, type ArchieDevToolProviderProps, DndProvider };

package/dist/client/client.js

@@ -32,7 +32,8 @@ var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "
 // src/client/client.ts
 var client_exports = {};
 __export(client_exports, {
-  ArchieDevToolProvider: () => ArchieDevToolProvider
+  ArchieDevToolProvider: () => ArchieDevToolProvider,
+  DndProvider: () => DndProvider
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -4278,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,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;
@@ -5024,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();
@@ -5055,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) {
@@ -5146,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);
@@ -5171,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,
@@ -5221,6 +5284,7 @@ function useElementScanner(enabled) {
           nodeId,
           element: el,
           selector,
+          draggable: !nodeId.startsWith("runtime:"),
           sourceMetaNodeId: ownerMeta?.nodeId ?? surfaceMeta?.nodeId ?? null,
           resolvedHostNodeId: nodeId,
           resolvedHostSelector: selector,
@@ -8660,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;
@@ -9368,5 +9434,6 @@ function ArchieDevToolProvider({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ArchieDevToolProvider
+  ArchieDevToolProvider,
+  DndProvider
 });

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;
@@ -9332,5 +9397,6 @@ function ArchieDevToolProvider({
   return /* @__PURE__ */ jsx6(DndProvider, { children });
 }
 export {
-  ArchieDevToolProvider
+  ArchieDevToolProvider,
+  DndProvider
 };

package/dist/index.d.mts

@@ -1,4 +1,31 @@
 import { ResolvedConfig, ViteDevServer } from 'vite';
+import { types, PluginObj } from '@babel/core';
+
+/**
+ * babel-plugin-editor-meta
+ *
+ * Injects `__editorMeta` prop into every JSX element at compile time.
+ * This replaces the external `@react-dev-inspector/babel-plugin` — metadata
+ * lives in React Fiber `memoizedProps` rather than DOM `data-inspector-*` attrs.
+ *
+ * The injected prop contains:
+ *   nodeId, file, line, col, componentName, staticProps, movable, parentNodeId
+ *
+ * At runtime the Fiber bridge reads `memoizedProps.__editorMeta` to resolve
+ * element identity without any DOM attributes.
+ */
+
+interface EditorMetaPluginOptions {
+    /** Skip files matching this pattern. @default /node_modules/ */
+    fileExclude?: RegExp;
+    /** Allow instrumentation for imported components. Defaults to true for local imports. */
+    instrumentImported?: boolean;
+    /** Include exact host source refs for runtime DOM lookup. */
+    includeHostSourceRef?: boolean;
+}
+declare function babelPluginEditorMeta({ types: t }: {
+    types: typeof types;
+}, opts?: EditorMetaPluginOptions): PluginObj;
 
 interface ArchieDevToolsOptions {
     /**
@@ -34,4 +61,4 @@ interface ArchieDevToolsPlugin {
 }
 declare function archieDevTools(options?: ArchieDevToolsOptions): ArchieDevToolsPlugin;
 
-export { archieDevTools };
+export { type EditorMetaPluginOptions, archieDevTools, babelPluginEditorMeta };

package/dist/index.d.ts

@@ -1,4 +1,31 @@
 import { ResolvedConfig, ViteDevServer } from 'vite';
+import { types, PluginObj } from '@babel/core';
+
+/**
+ * babel-plugin-editor-meta
+ *
+ * Injects `__editorMeta` prop into every JSX element at compile time.
+ * This replaces the external `@react-dev-inspector/babel-plugin` — metadata
+ * lives in React Fiber `memoizedProps` rather than DOM `data-inspector-*` attrs.
+ *
+ * The injected prop contains:
+ *   nodeId, file, line, col, componentName, staticProps, movable, parentNodeId
+ *
+ * At runtime the Fiber bridge reads `memoizedProps.__editorMeta` to resolve
+ * element identity without any DOM attributes.
+ */
+
+interface EditorMetaPluginOptions {
+    /** Skip files matching this pattern. @default /node_modules/ */
+    fileExclude?: RegExp;
+    /** Allow instrumentation for imported components. Defaults to true for local imports. */
+    instrumentImported?: boolean;
+    /** Include exact host source refs for runtime DOM lookup. */
+    includeHostSourceRef?: boolean;
+}
+declare function babelPluginEditorMeta({ types: t }: {
+    types: typeof types;
+}, opts?: EditorMetaPluginOptions): PluginObj;
 
 interface ArchieDevToolsOptions {
     /**
@@ -34,4 +61,4 @@ interface ArchieDevToolsPlugin {
 }
 declare function archieDevTools(options?: ArchieDevToolsOptions): ArchieDevToolsPlugin;
 
-export { archieDevTools };
+export { type EditorMetaPluginOptions, archieDevTools, babelPluginEditorMeta };

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  archieDevTools: () => archieDevTools
+  archieDevTools: () => archieDevTools,
+  babelPluginEditorMeta: () => babelPluginEditorMeta
 });
 module.exports = __toCommonJS(src_exports);
 var import_node_fs = require("fs");
@@ -591,5 +592,6 @@ function archieDevTools(options = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  archieDevTools
+  archieDevTools,
+  babelPluginEditorMeta
 });

package/dist/index.mjs

@@ -563,5 +563,6 @@ function archieDevTools(options = {}) {
   return plugin;
 }
 export {
-  archieDevTools
+  archieDevTools,
+  babelPluginEditorMeta
 };