@archie/devtools 0.0.48 → 0.1.0

package/dist/index.js

@@ -205,6 +205,7 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
 }
 
 // src/babel-plugin-editor-meta.ts
+var import_editor_protocol = require("@8base-archie/editor-protocol");
 var nodePath = __toESM(require("path"));
 function meaningfulChildren(t, children) {
   return children.filter((child) => {
@@ -260,7 +261,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     instrumentImported = true,
     includeHostSourceRef = false,
     origin = "screen",
-    templateOrigin = false
+    templateOrigin = false,
+    allowLegacyIds = true
   } = opts;
   function getJSXTagName(el) {
     const { name } = el;
@@ -308,6 +310,77 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function computeNodeId(file, line, col, componentName) {
     return `${file}:${line}:${col}:${componentName}`;
   }
+  function readVidAttr(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: import_editor_protocol.VID_ATTR })) continue;
+      const { value } = attr;
+      let raw = null;
+      if (t.isStringLiteral(value)) {
+        raw = value.value;
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        raw = value.expression.value;
+      }
+      if (raw !== null && import_editor_protocol.VID_PATTERN.test(raw)) return raw;
+      return null;
+    }
+    return null;
+  }
+  function computeDynamicType(path) {
+    let current = path.parentPath;
+    while (current) {
+      if (current.isJSXExpressionContainer()) {
+        const expr = current.node.expression;
+        if (t.isConditionalExpression(expr) || t.isLogicalExpression(expr)) {
+          return "CONDITIONAL";
+        }
+      }
+      if (current.isArrowFunctionExpression() || current.isFunctionExpression()) {
+        const call = current.parentPath;
+        if (call?.isCallExpression()) {
+          const callee = call.node.callee;
+          if (t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property) && /^(map|flatMap|forEach)$/.test(callee.property.name)) {
+            return "ARRAY";
+          }
+        }
+        break;
+      }
+      if (current.isFunctionDeclaration()) break;
+      current = current.parentPath;
+    }
+    return "STATIC";
+  }
+  const SHELL_FILE_RE = /(^|\/)shell\.jsx$/;
+  const SHELL_DIR_RE = /(^|\/)components\/shell\//;
+  const CHROME_ANCESTOR_TAGS = /* @__PURE__ */ new Set(["nav", "aside", "header"]);
+  function computeIsChrome(file, path) {
+    if (SHELL_FILE_RE.test(file) || SHELL_DIR_RE.test(file)) return true;
+    let current = path.parentPath;
+    while (current) {
+      if (current.isJSXElement()) {
+        const tag = getJSXTagName(current.node.openingElement);
+        if (CHROME_ANCESTOR_TAGS.has(tag)) return true;
+      }
+      current = current.parentPath;
+    }
+    return false;
+  }
+  function computeContainerKind(path) {
+    const elPath = path.parentPath;
+    if (!elPath?.isJSXElement()) return "none";
+    const children = meaningfulChildren(t, elPath.node.children);
+    if (children.length === 0) return "none";
+    const allPlain = children.every((c) => t.isJSXElement(c) || t.isJSXText(c));
+    return allPlain ? "plain" : "expression";
+  }
+  function computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind) {
+    if (isKitOrigin) return "KIT_INTERNAL";
+    if (isChrome) return "CHROME_STRUCTURAL";
+    if (dynamicType === "ARRAY") return "DYNAMIC_ARRAY";
+    if (dynamicType === "CONDITIONAL") return "DYNAMIC_CONDITIONAL";
+    if (containerKind === "expression") return "EXPRESSION_CONTAINER";
+    return void 0;
+  }
   function isMovable(path) {
     const elPath = path.parentPath;
     if (!elPath) return false;
@@ -325,6 +398,9 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     while (ancestor) {
       if (ancestor.isJSXElement()) {
         const opening = ancestor.node.openingElement;
+        const parentVid = readVidAttr(opening.attributes);
+        if (parentVid) return parentVid;
+        if (!allowLegacyIds) return null;
         const loc = opening.loc?.start;
         if (loc) {
           const tag = getJSXTagName(opening);
@@ -951,7 +1027,9 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
               return;
           }
         }
-        const nodeId = computeNodeId(file, line, col, componentName);
+        const vid = readVidAttr(path.node.attributes);
+        if (!vid && !allowLegacyIds) return;
+        const nodeId = vid ?? computeNodeId(file, line, col, componentName);
         const isKitOrigin = origin === "kit" || hasSlotAttr;
         const movable = isKitOrigin ? false : isMovable(path);
         const parentNodeId = getParentNodeId(path, file);
@@ -973,6 +1051,24 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
           )
         ]);
+        if (vid) {
+          const dynamicType = computeDynamicType(path);
+          const isChrome = computeIsChrome(file, path);
+          const containerKind = computeContainerKind(path);
+          const lockReason = computeLockReason(isKitOrigin, isChrome, dynamicType, containerKind);
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("vid"), t.stringLiteral(vid)),
+            t.objectProperty(t.identifier("isKitOrigin"), t.booleanLiteral(isKitOrigin)),
+            t.objectProperty(t.identifier("dynamicType"), t.stringLiteral(dynamicType)),
+            t.objectProperty(t.identifier("isChrome"), t.booleanLiteral(isChrome)),
+            t.objectProperty(t.identifier("containerKind"), t.stringLiteral(containerKind))
+          );
+          if (lockReason) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("lockReason"), t.stringLiteral(lockReason))
+            );
+          }
+        }
         if (isKitOrigin) {
           if (templateOrigin) {
             metaObj.properties.push(

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import {
   __dirname,
   babelPluginEditorMeta
-} from "./chunk-P5XMHBFS.mjs";
+} from "./chunk-THKKWDMJ.mjs";
 
 // src/index.ts
 import { readFileSync } from "fs";

package/dist/inspector.standalone.js

@@ -1725,10 +1725,96 @@
             // asking blindly (and treating silence as "still unknown", never
             // as "reported empty") is the correct posture.
             capabilitiesQuery: true,
+            // vid-identity migration (protocol 1.x, `@8base-archie/editor-protocol`):
+            // this script reads `data-vid`/`meta.vid` as the node's identity
+            // (`resolveNodeVid` below) and assembles a `NodeMeta` object for
+            // `ELEMENT_SELECTED`, and it emits `REFUSED` instead of silently
+            // accepting a drag/drop this package's own policy would reject.
+            // Hosts MUST feature-detect all three: a frozen pre-migration
+            // inspector has none of them, and its `ELEMENT_SELECTED` has no
+            // `vid`/`nodeMeta` fields at all.
+            vidIdentity: true,
+            nodeMeta: true,
+            refusals: true,
           },
         }
       }
 
+      // `@8base-archie/editor-protocol`'s `PROTOCOL_VERSION` (semver,
+      // major-only compatibility). This script cannot `import` the shared
+      // package (vanilla IIFE, CDN-served) — keep this literal in sync BY
+      // HAND with that package's `src/version.ts` whenever the wire shape of
+      // `RuntimeMessage`/`NodeMeta`/`Op` changes. Reported as a SEPARATE key
+      // from the existing numeric `protocolVersion` above (never overwritten
+      // — archie-app's `runtime-compatibility.ts` parses that field as a
+      // number and compares it with strict equality; colliding the two would
+      // silently break every existing compatibility check).
+      var EDITOR_PROTOCOL_VERSION = "1.0.0"
+
+      // vid-identity migration: `/^[a-z0-9]{6,8}$/`, mirrors
+      // `@8base-archie/editor-protocol`'s `VID_PATTERN` — kept in parity by
+      // hand for the same reason as `EDITOR_PROTOCOL_VERSION` above.
+      var VID_PATTERN = /^[a-z0-9]{6,8}$/
+
+      /**
+       * This node's `vid` — the fiber-resolved (usage-projected) meta's
+       * `vid` first, the DOM `data-vid` attribute next, or null. Mirrors
+       * `node-key.ts`'s `getNodeKeyFromElement` precedence for the vid-only
+       * portion of it (this script has no legacy-nodeId/runtime-key
+       * fallback to offer here — callers that need a key for every element,
+       * vid or not, keep using their own `inspectorSource` resolution).
+       */
+      function resolveNodeVid(el, meta) {
+        if (meta && typeof meta.vid === "string" && VID_PATTERN.test(meta.vid)) {
+          return meta.vid
+        }
+        if (el && typeof el.getAttribute === "function") {
+          var domVid = el.getAttribute("data-vid")
+          if (domVid && VID_PATTERN.test(domVid)) return domVid
+        }
+        return null
+      }
+
+      /**
+       * Assemble this node's `NodeMeta` (`@8base-archie/editor-protocol`)
+       * from its `EditorMeta`, or null when there is no `vid` to key it by.
+       * Mirrors `fiber-bridge.ts`'s `getNodeMeta` — kept in parity by hand,
+       * same reason as `EDITOR_PROTOCOL_VERSION` above (this script cannot
+       * import the TS module or run its `NodeMetaSchema.safeParse`).
+       */
+      function resolveNodeMeta(el, meta) {
+        var vid = resolveNodeVid(el, meta)
+        if (!vid) return null
+        var nodeMeta = {
+          vid: vid,
+          file: (meta && meta.file) || "",
+          dynamicType: (meta && meta.dynamicType) || "STATIC",
+          isKitOrigin: !!(meta && (meta.isKitOrigin || isTemplateFrame(meta))),
+          isChrome: !!(meta && meta.isChrome),
+          containerKind: (meta && meta.containerKind) || "none",
+        }
+        if (meta && meta.componentName) nodeMeta.component = meta.componentName
+        if (meta && meta.lockReason) nodeMeta.lockReason = meta.lockReason
+        return nodeMeta
+      }
+
+      /**
+       * Emit `REFUSED` (vid-identity migration) instead of letting a
+       * drag/drop the runtime's own policy would reject proceed silently —
+       * the gap `docs/deploy-order.md`-adjacent decision this capability bit
+       * documents: "today the drop is accepted and the host discards it
+       * after the fact; that must stop."
+       */
+      function refuseNode(code, cause, vid) {
+        postMessageToParent({
+          source: "archie-devtools",
+          type: "REFUSED",
+          code: code,
+          cause: cause,
+          vid: vid || undefined,
+        })
+      }
+
       /**
        * Emit the capabilities payload as `CAPABILITIES_RESULT`.
        *
@@ -1745,6 +1831,7 @@
           reason: typeof reason === "string" && reason !== "" ? reason : null,
           version: handshake.version,
           protocolVersion: handshake.protocolVersion,
+          editorProtocolVersion: EDITOR_PROTOCOL_VERSION,
           capabilities: handshake.capabilities,
         })
       }
@@ -1755,6 +1842,7 @@
         timestamp: Date.now(),
         version: initialHandshake.version,
         protocolVersion: initialHandshake.protocolVersion,
+        editorProtocolVersion: EDITOR_PROTOCOL_VERSION,
         capabilities: initialHandshake.capabilities,
       })
 
@@ -3681,6 +3769,12 @@
           // this script's version. The slot string is opaque here; validating it
           // against kit-runtime's `slot-vocabulary` is the host's job.
           editorMeta: editorMeta ? editorMeta.meta : null,
+          // vid-identity migration — `vid`/`nodeMeta` derived from the SAME
+          // meta as `editorMeta` above (`resolveNodeVid`/`resolveNodeMeta`,
+          // mirroring `node-key.ts`/`fiber-bridge.ts`'s `getNodeMeta`). Both
+          // are null for a legacy node with no `data-vid`.
+          vid: resolveNodeVid(element, editorMeta ? editorMeta.meta : null),
+          nodeMeta: resolveNodeMeta(element, editorMeta ? editorMeta.meta : null),
           // ARCH-883 F2 — the two things the host cannot derive from
           // `editorMeta` alone (SDD §2.9):
           //
@@ -4219,6 +4313,45 @@
           return
         }
 
+        // `data-vid` identity migration — the DnD runtime's `drag-started`/
+        // `drag-refused` events (`useDragLifecycle.ts`, `host-bridge.ts`)
+        // otherwise die inside the iframe: nothing relayed them to the host.
+        // Reuses `refuseNode` for `REFUSED` so the wire shape is the SAME
+        // one produced by every other refusal path in this file (never a
+        // second, drifting literal) and validates against
+        // `RuntimeMessageSchema` (`@8base-archie/editor-protocol`).
+        if (detail.type === "drag-refused") {
+          refuseNode(detail.code, detail.cause, detail.vid)
+          return
+        }
+
+        if (detail.type === "drag-started") {
+          // `DragStartMessageSchema.targetVid` is REQUIRED (not optional) —
+          // unlike `REFUSED.vid`. A legacy (no `data-vid`) page's dragged
+          // node has no vid to report, so the message cannot be made to
+          // satisfy the schema; skip the relay rather than send a shape
+          // that fails validation on the host. `droppable` is filtered to
+          // well-formed vids for the same reason — the projection's own ids
+          // can be legacy `file:line:col:componentName` strings, which the
+          // schema's `z.array(Vid)` would reject.
+          if (typeof detail.targetVid !== "string" || !VID_PATTERN.test(detail.targetVid)) {
+            veTrace("runtime-event:drag-started:skipped-no-vid", {})
+            return
+          }
+          var droppableVids = Array.isArray(detail.droppable)
+            ? detail.droppable.filter(function (id) {
+                return typeof id === "string" && VID_PATTERN.test(id)
+              })
+            : []
+          postMessageToParent({
+            source: "archie-devtools",
+            type: "DRAG_START",
+            targetVid: detail.targetVid,
+            droppable: droppableVids,
+          })
+          return
+        }
+
         // ARCH-1367 F6 — attach the drop container's editor meta chain to a
         // container descriptor ({selector, nodeId, …}). Shared by the
         // `element-inserted` relay AND the `arrange-session-changed` relay:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archie/devtools",
-  "version": "0.0.48",
+  "version": "0.1.0",
   "description": "DevTools for Archie generated applications - Route synchronization and editor communication",
   "repository": {
     "type": "git",
@@ -76,7 +76,9 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
+    "@8base-archie/editor-protocol": "1.0.0-rc.1",
     "@babel/core": "7.29.0",
-    "@babel/types": "7.29.0"
+    "@babel/types": "7.29.0",
+    "zod": "^4.6.5"
   }
 }