@archie/devtools 0.0.22 → 0.0.23

package/dist/index.mjs

@@ -178,6 +178,36 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
 
 // src/babel-plugin-editor-meta.ts
 import * as nodePath from "path";
+var KIT_SLOT_ATTR = "data-kit-slot";
+var MAX_SLOT_SEGMENTS = 4;
+var NON_BINDING_ATTRS = /* @__PURE__ */ new Set(["__editorMeta", "key", "ref", KIT_SLOT_ATTR]);
+var STRUCTURAL_ATTRS = /* @__PURE__ */ new Set([
+  "id",
+  "htmlFor",
+  "slot",
+  "name",
+  "type",
+  "role",
+  // The camelCase carrier of the SAME durable key as `data-agent-id`: kit
+  // components take `agentId` and render it as the data attribute. Found on the
+  // real corpus (×4) — blocking only the dashed form would have left the prop
+  // form routable, and a durable key with a string-literal usage value sails
+  // straight through the usage-value law.
+  "agentId"
+]);
+function isNonContentAttribute(name) {
+  if (/^on[A-Z]/.test(name)) return true;
+  if (name.startsWith("data-")) return true;
+  return STRUCTURAL_ATTRS.has(name);
+}
+function normalizeSlot(raw) {
+  const value = raw.trim();
+  if (!value) return null;
+  const segments = value.split("/");
+  if (segments.length > MAX_SLOT_SEGMENTS) return null;
+  if (segments.some((segment) => segment.trim() === "")) return null;
+  return value;
+}
 function isPackageImport(src) {
   if (src.startsWith(".") || src.startsWith("/")) return false;
   if (src.startsWith("@")) {
@@ -193,7 +223,8 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   const {
     fileExclude = /node_modules/,
     instrumentImported = true,
-    includeHostSourceRef = false
+    includeHostSourceRef = false,
+    origin = "screen"
   } = opts;
   function getJSXTagName(el) {
     const { name } = el;
@@ -306,29 +337,275 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
     }
     return false;
   }
+  function buildPayloadFilter(payload) {
+    return t.callExpression(
+      t.arrowFunctionExpression(
+        [
+          t.objectPattern([
+            t.objectProperty(
+              t.identifier("__editorMeta"),
+              t.identifier("_$em"),
+              false,
+              false
+            ),
+            t.objectProperty(
+              t.stringLiteral(KIT_SLOT_ATTR),
+              t.identifier("_$ks"),
+              false,
+              false
+            ),
+            t.restElement(t.identifier("_$r"))
+          ])
+        ],
+        t.identifier("_$r")
+      ),
+      [t.objectExpression([t.spreadElement(payload)])]
+    );
+  }
   function sanitizeSpreadAttributes(attrs) {
     for (const attr of attrs) {
       if (!t.isJSXSpreadAttribute(attr)) continue;
       if (isMetaStripSpreadExpression(attr.argument)) continue;
-      const origArg = attr.argument;
-      attr.argument = t.callExpression(
-        t.arrowFunctionExpression(
-          [
-            t.objectPattern([
-              t.objectProperty(
-                t.identifier("__editorMeta"),
-                t.identifier("_$em"),
-                false,
-                false
-              ),
-              t.restElement(t.identifier("_$r"))
-            ])
-          ],
-          t.identifier("_$r")
-        ),
-        [t.objectExpression([t.spreadElement(origArg)])]
-      );
+      attr.argument = buildPayloadFilter(attr.argument);
+    }
+  }
+  function consumeKitSlot(attrs) {
+    let slot = null;
+    let found = false;
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR })) continue;
+      found = true;
+      if (slot !== null) continue;
+      const { value } = attr;
+      if (t.isStringLiteral(value)) {
+        slot = normalizeSlot(value.value);
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        slot = normalizeSlot(value.expression.value);
+      }
+    }
+    if (!found) return { slot: null, found: false, attrs };
+    return {
+      slot,
+      found: true,
+      attrs: attrs.filter(
+        (attr) => !(t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR }))
+      )
+    };
+  }
+  function getFunctionName(fn) {
+    const node = fn.node;
+    if (t.isFunctionDeclaration(node) && node.id) return node.id.name;
+    if (t.isFunctionExpression(node) && node.id) return node.id.name;
+    const parent = fn.parentPath;
+    if (parent?.isVariableDeclarator() && t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name;
+    }
+    return null;
+  }
+  function buildPropMap(pattern) {
+    const map = /* @__PURE__ */ new Map();
+    for (const prop of pattern.properties) {
+      if (!t.isObjectProperty(prop) || prop.computed) continue;
+      const key = t.isIdentifier(prop.key) ? prop.key.name : t.isStringLiteral(prop.key) ? prop.key.value : null;
+      if (!key) continue;
+      const value = prop.value;
+      if (t.isIdentifier(value)) {
+        map.set(value.name, key);
+      } else if (t.isAssignmentPattern(value) && t.isIdentifier(value.left)) {
+        map.set(value.left.name, key);
+      }
     }
+    return map;
+  }
+  function resolvePropContext(path2) {
+    let fn = path2.getFunctionParent();
+    while (fn) {
+      const [first] = fn.node.params;
+      if (first && t.isObjectPattern(first)) {
+        if (fn.scope.parent !== fn.scope.getProgramParent()) return null;
+        return {
+          componentScope: fn.scope,
+          propMap: buildPropMap(first),
+          componentName: getFunctionName(fn)
+        };
+      }
+      fn = fn.getFunctionParent();
+    }
+    return null;
+  }
+  function resolveProp(name, scope, ctx) {
+    const prop = ctx.propMap.get(name);
+    if (!prop) return null;
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (binding.scope !== ctx.componentScope) return null;
+    if (!binding.constant) return null;
+    return prop;
+  }
+  function isScopeWithinComponent(scope, ctx) {
+    let current = scope;
+    while (current) {
+      if (current === ctx.componentScope) return true;
+      current = current.parent;
+    }
+    return false;
+  }
+  function resolveLocalConstInit(name, scope, ctx) {
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (!binding.constant) return null;
+    const declarator = binding.path;
+    if (!declarator.isVariableDeclarator()) return null;
+    if (!isScopeWithinComponent(binding.scope, ctx)) return null;
+    const init = declarator.node.init;
+    if (!init || !t.isExpression(init)) return null;
+    return { init, scope: declarator.scope };
+  }
+  function isStaticStringLiteral(node) {
+    if (t.isStringLiteral(node)) return true;
+    return t.isTemplateLiteral(node) && node.expressions.length === 0;
+  }
+  function collectPropIdentifiers(node, scope, ctx, out = []) {
+    if (!node) return out;
+    const visit = (child) => collectPropIdentifiers(child, scope, ctx, out);
+    if (t.isIdentifier(node)) {
+      const prop = resolveProp(node.name, scope, ctx);
+      if (prop && !out.includes(prop)) out.push(prop);
+      return out;
+    }
+    if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
+      visit(node.object);
+      if (node.computed) visit(node.property);
+      return out;
+    }
+    if (t.isCallExpression(node) || t.isOptionalCallExpression(node)) {
+      visit(node.callee);
+      node.arguments.forEach((arg) => visit(arg));
+      return out;
+    }
+    if (t.isTemplateLiteral(node)) {
+      node.expressions.forEach((expr) => visit(expr));
+      return out;
+    }
+    if (t.isConditionalExpression(node)) {
+      visit(node.test);
+      visit(node.consequent);
+      visit(node.alternate);
+      return out;
+    }
+    if (t.isLogicalExpression(node) || t.isBinaryExpression(node)) {
+      visit(node.left);
+      visit(node.right);
+      return out;
+    }
+    if (t.isUnaryExpression(node) || t.isAwaitExpression(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isArrayExpression(node)) {
+      node.elements.forEach((el) => visit(el));
+      return out;
+    }
+    if (t.isObjectExpression(node)) {
+      for (const prop of node.properties) {
+        if (t.isObjectProperty(prop)) {
+          if (prop.computed) visit(prop.key);
+          visit(prop.value);
+        } else if (t.isSpreadElement(prop)) {
+          visit(prop.argument);
+        }
+      }
+      return out;
+    }
+    if (t.isSpreadElement(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isTSAsExpression(node) || t.isTSNonNullExpression(node) || t.isTypeCastExpression(node)) {
+      visit(node.expression);
+      return out;
+    }
+    return out;
+  }
+  function classifyExpression(expr, scope, ctx, hop) {
+    if (t.isIdentifier(expr)) {
+      const prop = resolveProp(expr.name, scope, ctx);
+      if (prop) return { kind: "direct", prop };
+      if (hop > 0) return null;
+      const local = resolveLocalConstInit(expr.name, scope, ctx);
+      if (!local) return null;
+      const inner = classifyExpression(local.init, local.scope, ctx, hop + 1);
+      if (!inner) return null;
+      return { kind: inner.kind === "formatted" ? "formatted" : "derived", prop: inner.prop };
+    }
+    if (t.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??") && isStaticStringLiteral(expr.right)) {
+      const left = classifyExpression(expr.left, scope, ctx, hop);
+      if (!left) return null;
+      return { kind: left.kind === "formatted" ? "formatted" : "derived", prop: left.prop };
+    }
+    const props = collectPropIdentifiers(expr, scope, ctx);
+    return props.length > 0 ? { kind: "formatted", prop: props[0] } : null;
+  }
+  function meaningfulChildren(children) {
+    return children.filter((child) => {
+      if (t.isJSXText(child)) return child.value.trim() !== "";
+      if (t.isJSXExpressionContainer(child)) return !t.isJSXEmptyExpression(child.expression);
+      return true;
+    });
+  }
+  function collectPropBindings(path2, attrs) {
+    const ctx = resolvePropContext(path2);
+    if (!ctx || ctx.propMap.size === 0) return { bindings: [], owner: null };
+    if (ctx.componentName === null) return { bindings: [], owner: null };
+    const scope = path2.scope;
+    const bindings = [];
+    const elementPath = path2.parentPath;
+    if (elementPath && elementPath.isJSXElement()) {
+      const children = meaningfulChildren(elementPath.node.children);
+      const isSoleChild = children.length === 1;
+      for (const child of children) {
+        if (!t.isJSXExpressionContainer(child)) continue;
+        const expression = child.expression;
+        if (t.isJSXEmptyExpression(expression)) continue;
+        const verdict = classifyExpression(expression, scope, ctx, 0);
+        if (!verdict) continue;
+        bindings.push({
+          target: "children",
+          prop: verdict.prop,
+          kind: isSoleChild ? verdict.kind : "formatted"
+        });
+      }
+    }
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      const name = t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
+      if (NON_BINDING_ATTRS.has(name)) continue;
+      const value = attr.value;
+      if (!t.isJSXExpressionContainer(value)) continue;
+      const expression = value.expression;
+      if (t.isJSXEmptyExpression(expression)) continue;
+      const verdict = classifyExpression(expression, scope, ctx, 0);
+      if (!verdict) continue;
+      bindings.push({
+        target: `attr:${name}`,
+        prop: verdict.prop,
+        // M2b: machine-contract attributes are reported, never offered.
+        kind: isNonContentAttribute(name) ? "formatted" : verdict.kind
+      });
+    }
+    return { bindings, owner: bindings.length > 0 ? ctx.componentName : null };
+  }
+  function propBindingsToAst(bindings) {
+    return t.arrayExpression(
+      bindings.map(
+        (binding) => t.objectExpression([
+          t.objectProperty(t.identifier("target"), t.stringLiteral(binding.target)),
+          t.objectProperty(t.identifier("prop"), t.stringLiteral(binding.prop)),
+          t.objectProperty(t.identifier("kind"), t.stringLiteral(binding.kind))
+        ])
+      )
+    );
   }
   return {
     name: "babel-plugin-editor-meta",
@@ -356,25 +633,13 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
         if (!propsArg || t.isNullLiteral(propsArg)) return;
         if (!t.isExpression(propsArg)) return;
         if (isMetaStripSpreadExpression(propsArg)) return;
-        args[1] = t.callExpression(
-          t.arrowFunctionExpression(
-            [
-              t.objectPattern([
-                t.objectProperty(
-                  t.identifier("__editorMeta"),
-                  t.identifier("_$em"),
-                  false,
-                  false
-                ),
-                t.restElement(t.identifier("_$r"))
-              ])
-            ],
-            t.identifier("_$r")
-          ),
-          [t.objectExpression([t.spreadElement(propsArg)])]
-        );
+        args[1] = buildPayloadFilter(propsArg);
       },
       JSXOpeningElement(path2, state) {
+        const consumed = consumeKitSlot(path2.node.attributes);
+        path2.node.attributes = consumed.attrs;
+        const slot = consumed.slot;
+        const hasSlotAttr = consumed.found;
         const filename = state.filename ?? "";
         if (fileExclude.test(filename)) return;
         const existing = path2.node.attributes.find(
@@ -420,9 +685,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
           }
         }
         const nodeId = computeNodeId(file, line, col, componentName);
-        const movable = isMovable(path2);
+        const isKitOrigin = origin === "kit" || hasSlotAttr;
+        const movable = isKitOrigin ? false : isMovable(path2);
         const parentNodeId = getParentNodeId(path2, file);
         const staticPropsObj = extractStaticProps(path2.node.attributes);
+        const { bindings, owner } = collectPropBindings(path2, path2.node.attributes);
         const metaObj = t.objectExpression([
           t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
           t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
@@ -439,6 +706,22 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
           )
         ]);
+        if (slot !== null) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("slot"), t.stringLiteral(slot))
+          );
+        }
+        if (bindings.length > 0) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("propBindings"), propBindingsToAst(bindings))
+          );
+          metaObj.properties.push(
+            t.objectProperty(
+              t.identifier("propOwner"),
+              owner ? t.stringLiteral(owner) : t.nullLiteral()
+            )
+          );
+        }
         if (isHostElement && includeHostSourceRef) {
           path2.node.attributes.push(
             t.jsxAttribute(
@@ -447,10 +730,11 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
             )
           );
         }
+        const metaThunk = t.arrowFunctionExpression([], metaObj);
         path2.node.attributes.push(
           t.jsxAttribute(
             t.jsxIdentifier("__editorMeta"),
-            t.jsxExpressionContainer(metaObj)
+            t.jsxExpressionContainer(metaThunk)
           )
         );
       }

package/dist/inspector.standalone.js

@@ -95,6 +95,28 @@
       var FIBER_KEY_PREFIX = "__reactFiber$"
       var PROPS_KEY_PREFIX = "__reactProps$"
 
+      // ARCH-883 P0-1: babel-plugin-editor-meta.ts (TypeScript context) now
+      // emits __editorMeta as a zero-arg function, not the object literal
+      // directly, so React never writes it into the DOM. Every extraction
+      // site below must invoke the value when it is a function. Mirrors
+      // readEditorMetaValue in fiber-bridge.ts — if this changes, update
+      // that copy to maintain parity.
+      function resolveEditorMetaValue(value) {
+        if (typeof value === "function") {
+          // Each call re-evaluates the plugin-emitted `() => ({...})`
+          // closure and returns a FRESH object literal — never rely on
+          // meta object identity (`===`) across two separate reads, even
+          // within the same render (mirrors readEditorMetaValue in
+          // fiber-bridge.ts).
+          return value()
+        }
+        // Twin parity with fiber-bridge.ts's readEditorMetaValue: only
+        // undefined/null is a miss, not "any falsy value" — __editorMeta is
+        // always an object or a function in practice, so this is a no-op
+        // today, but keeps the two implementations provably equivalent.
+        return value === undefined || value === null ? null : value
+      }
+
       function hasEditorMetaInFiberChain(fiber) {
         var current = fiber
         while (current) {
@@ -195,7 +217,7 @@
         var fiber = getFiberFromElement(el)
         while (fiber) {
           if (fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
-            return fiber.memoizedProps.__editorMeta
+            return resolveEditorMetaValue(fiber.memoizedProps.__editorMeta)
           }
           fiber = fiber["return"]
         }
@@ -205,7 +227,7 @@
       function getDirectEditorMetaFromElement(el) {
         var fiber = getFiberFromElement(el)
         if (fiber && fiber.memoizedProps && fiber.memoizedProps.__editorMeta) {
-          return fiber.memoizedProps.__editorMeta
+          return resolveEditorMetaValue(fiber.memoizedProps.__editorMeta)
         }
         return null
       }
@@ -231,7 +253,7 @@
             break
           }
           if (current.memoizedProps && current.memoizedProps.__editorMeta) {
-            return current.memoizedProps.__editorMeta
+            return resolveEditorMetaValue(current.memoizedProps.__editorMeta)
           }
           current = current["return"]
         }
@@ -864,9 +886,14 @@
       postMessageToParent({
         type: "INSPECTOR_SCRIPT_LOADED",
         timestamp: Date.now(),
-        version: "2.1.0",
+        version: "2.1.1",
         protocolVersion: 1,
         capabilities: {
+          // 2.1.1: function-valued __editorMeta props are invoked before any
+          // postMessage, so meta payloads stay structured-cloneable. Hosts can
+          // gate on this bit to confirm the deployed CDN artifact carries the
+          // fix (the 2.1.0 URL is overwritten in place on publish).
+          functionValuedEditorMeta: true,
           inspect: true,
           dndMove: true,
           dndResize: true,
@@ -2020,6 +2047,19 @@
             : null,
           attributes: attributes,
           inspectorSource: inspectorInfo,
+          // ARCH-883 F1 — FORWARD THE META WHOLE. The plugin now also emits
+          // `slot`, `propBindings` and `propOwner` (SDD §2.3/§2.6) and the editor
+          // host routes edits off them; field-picking here would silently strip
+          // them and turn every kit-internal edit into a gap. `inspectorSource`
+          // above is the deliberately narrow structure — this one is not.
+          //
+          // Unlike P0-1 this needs no deploy ordering: the extra keys are plain
+          // data, so an already-published standalone.js forwards them unchanged
+          // through `postMessage`'s structured clone. Whether a given PAGE has
+          // them depends on the plugin that built it, which the host resolves via
+          // `deriveEditorCapabilities(kitRuntimeVersion)` (SDD §2.5) — never from
+          // 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,
           computedStyles: {
             display: computed.display,

package/package.json

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