@archie/devtools 0.0.27 → 0.0.29

package/dist/collection-binding.d.mts

@@ -21,8 +21,12 @@ import { types, PluginObj } from '@babel/core';
  *   data-agent-row                {String(param?.id)}, on the row root
  *   data-agent-field              static string OR a runtime expression
  *                                 (??/ternary field selection, D5.5)
- *   data-agent-field-state        "mixed" | "unresolved"
- *   data-agent-field-parts        comma-separated field list (mixed leaves)
+ *   data-agent-field-state        "mixed" | "unresolved" | "rendered"
+ *                                 ("rendered": a formatter-CALL-wrapped
+ *                                 value — the DOM only ever holds the
+ *                                 FORMATTED string, ARCH-1065 M-COV FIX)
+ *   data-agent-field-parts        comma-separated field list (mixed leaves,
+ *                                 or the single field of a "rendered" leaf)
  *   data-agent-field-slot         text-node index of the dynamic part
  *                                 (label+value leaves, D6)
  *   data-agent-collection-order   "stable" | "derived" (D18), on the row root
@@ -35,8 +39,12 @@ import { types, PluginObj } from '@babel/core';
  * `.filter()/.slice()/.sort()/.map()` chain calls, through single-assignment
  * (`const`, never reassigned) local-variable hops (bounded to
  * `MAX_SOURCE_CHAIN_HOPS`), and through a `useMemo(() => …, deps)` /
- * `React.useMemo(() => …, deps)` unwrap (the common `() => expr` shape only —
- * see `resolveSliceSource`). A `.sort(` ANYWHERE in the chain marks the
+ * `React.useMemo(() => …, deps)` unwrap — EITHER the arrow-EXPRESSION-body
+ * shape (`() => expr`) OR a block body with exactly ONE return statement
+ * (`() => { …; return expr; }`, ARCH-1065 M-COV FIX, devtools 0.0.29); a
+ * block body with zero or 2+ returns (ambiguous control flow) is left
+ * unresolved, never guessed at (see `resolveSliceSource` /
+ * `findSingleReturnArgument`). A `.sort(` ANYWHERE in the chain marks the
  * collection `data-agent-collection-order="derived"`; otherwise `"stable"`
  * (D18). The identifier root must be exactly `slice` — this mirrors the
  * runtime's `window.__slice` (M3); the codemod does not trace how a `slice`
@@ -72,6 +80,50 @@ import { types, PluginObj } from '@babel/core';
  * specific field OR several), because no row identity is at stake — only
  * further field leaves.
  *
+ * ── Forwarding-component allowlist descent (ARCH-1065 M-COV fix) ──────────
+ *
+ * D5.4 only ever sees THROUGH a component whose own source is available
+ * (module-local, co-located in the same file). Kit/imported components
+ * (`Card`, `CardContent`, `StatusBadge`, …) are opaque to the AST — the
+ * plugin has no body to project into — but many of them forward unrecognized
+ * JSX attributes onto their own root DOM element (typically via
+ * `{...rest}`), which makes them valid attribute CARRIERS even though
+ * they're not valid PROJECTION targets. `forwardingComponents` (a plugin
+ * option, see `CollectionBindingPluginOptions`) names exactly which ones.
+ *
+ * Two independent mechanisms use that allowlist:
+ *
+ *   - (a2) ROW ROOT: when the `.map()` callback's own returned JSX element
+ *     is an allowlisted component (`<Card key={r.id}>…</Card>` as the row
+ *     root itself), the row-identity attributes stamp directly onto that
+ *     component usage — NOT a projection into a separate definition, since
+ *     there is none to project into. The field walk continues into the
+ *     component's own JSX children with the SAME binding scope the row
+ *     callback already established.
+ *   - (c2-ii) LEAF: when a component usage directly hugs a field expression
+ *     with no host element beneath it (`<StatusBadge>{w.status}</StatusBadge>`),
+ *     the field attribute stamps onto the component itself IFF its name is
+ *     allowlisted; otherwise the leaf is left unstamped — a leaf is never
+ *     given an invented carrier.
+ *
+ * Separately, and regardless of allowlist membership at all — walking a
+ * component's own JSX children costs nothing, since no attribute lands
+ * anywhere until a valid carrier (host, or allowlisted leaf) is actually
+ * found — (a1) DESCENT: the field walk always continues INTO a structural
+ * child that is a component usage, as long as that usage has its own JSX
+ * children in source. `<Card><span>{w.name}</span></Card>` reaches the
+ * `<span>` (a host, stamped unconditionally) even though `Card` itself is
+ * never a stamp target unless allowlisted. This is what makes (c2-ii) safe
+ * to leave allowlist-gated: a wrapper with a host descendant never needs the
+ * wrapper itself to carry anything.
+ *
+ * The allowlist is ALWAYS an explicit option, never a built-in default list
+ * baked into this plugin — kit-manifest is the single source of truth for
+ * which components forward attributes (`forwardsDataAttributes`), and the
+ * kit build (`build-d.mjs`) is what threads that list in. An absent/empty
+ * option is exactly today's fail-closed behavior: zero component-carried
+ * stamps, byte-identical to the plugin before this mechanism existed.
+ *
  * ── Field resolution ────────────────────────────────────────────────────
  *
  * Reuses `meaningfulChildren` from `babel-plugin-editor-meta.ts` (the exact
@@ -95,10 +147,25 @@ import { types, PluginObj } from '@babel/core';
  *     the duplicated test would double-evaluate it across SSR and hydration,
  *     so the whole leaf is left unstamped instead;
  *   - `cond ? 'Literal' : 'Other'` where `cond` is itself a bare field
- *     member (a boolean-typed field driving two literal branches) → static
- *     field named by `cond` — the FE's typed controls (D7, a different
- *     mechanism, M3) read the boolean's true/false rendering from
- *     `window.__slice`, not from this attribute;
+ *     member (a boolean-typed field driving two literal branches), OR a
+ *     CALL-FREE comparison (`===`/`!==`/`==`/`!=`/`</<=`/`>`/`>=`) naming a
+ *     field on either side (`r.status === 'Active' ? 'Pause' : 'Enable'`,
+ *     D5.5 widening, ARCH-1065 M-COV FIX) → static field named by the
+ *     resolved test field — the FE's typed controls (D7, a different
+ *     mechanism, M3) read the boolean's/status's true/false or vocabulary
+ *     rendering from `window.__slice`, not from this attribute. Nothing
+ *     about the test is ever duplicated into the DOM here (only the field
+ *     NAME is emitted), so there is no C3 double-evaluation concern for this
+ *     shape — `containsEvaluation(test)` is still checked defensively;
+ *   - a formatter CALL with exactly one argument that is itself a bare
+ *     member/optional-member field (`Kit.date(r.updated_at)`,
+ *     `money(auction.currentPrice)`, ARCH-1065 M-COV FIX) → the resolved
+ *     field name, PLUS `data-agent-field-state="rendered"` and
+ *     `data-agent-field-parts` (the same field name) — the DOM only ever
+ *     holds the FORMATTED string, never the raw value, so this is marked
+ *     the same "honest, non-invertible" way a `??`/boolean fallback is (D8);
+ *     a multi-arg call, or a call whose sole argument isn't a bare field
+ *     member, is left unstamped rather than guessed at;
  *   - a COMPUTED member (`a[expr]`, `expr` not a string literal) → no field
  *     name, `data-agent-field-state="unresolved"` (a positive "this is
  *     row-scoped data, but which field is unknown" signal — never silent).
@@ -127,6 +194,13 @@ import { types, PluginObj } from '@babel/core';
  * that is itself slice-rooted gets discovered and stamped independently by
  * the same Program-wide `.map()` scan, with its own entity/row identity.
  *
+ * A JSXExpressionContainer wrapping `cond && <JSX/>` / `cond || <JSX/>` / a
+ * ternary IS a structural child, though (ARCH-1065 M-COV FIX, devtools
+ * 0.0.29, see `collectConditionalJsxBranchPaths`): the walker descends into
+ * whichever branch(es) are themselves a JSXElement, with the SAME scope —
+ * purely structural, the guard/test is never duplicated or stamped, only the
+ * JSX it conditionally renders is walked for further fields.
+ *
  * ── Failure posture ─────────────────────────────────────────────────────
  *
  * Every resolution step is an explicit allowlist; anything the resolver is
@@ -148,6 +222,27 @@ import { types, PluginObj } from '@babel/core';
 interface CollectionBindingPluginOptions {
     /** Skip files matching this pattern. @default /node_modules/ */
     fileExclude?: RegExp;
+    /**
+     * Component names known to forward unrecognized JSX attributes onto their
+     * own root DOM element (e.g. via `{...rest}`) — the exact set that makes
+     * a component usage a valid attribute CARRIER (row-root or leaf) even
+     * though it's opaque to the AST (see the "Forwarding-component allowlist
+     * descent" section above).
+     *
+     * Sourced from kit-manifest's `forwardsDataAttributes` flags by the kit
+     * build (`build-d.mjs` passes it) — this plugin NEVER hardcodes a default
+     * list here; that would be a shadow copy of kit-manifest's own truth, and
+     * would drift the moment a kit component's forwarding behavior changed
+     * without this plugin's knowledge. Synthetic lists are fine in tests, to
+     * keep the plugin testable standalone.
+     *
+     * Absent or empty = today's fail-closed behavior: no component ever
+     * carries a stamp, byte-identical to the plugin before this option
+     * existed.
+     *
+     * @default []
+     */
+    forwardingComponents?: string[];
 }
 declare function babelPluginCollectionBinding({ types: t }: {
     types: typeof types;

package/dist/collection-binding.d.ts

@@ -21,8 +21,12 @@ import { types, PluginObj } from '@babel/core';
  *   data-agent-row                {String(param?.id)}, on the row root
  *   data-agent-field              static string OR a runtime expression
  *                                 (??/ternary field selection, D5.5)
- *   data-agent-field-state        "mixed" | "unresolved"
- *   data-agent-field-parts        comma-separated field list (mixed leaves)
+ *   data-agent-field-state        "mixed" | "unresolved" | "rendered"
+ *                                 ("rendered": a formatter-CALL-wrapped
+ *                                 value — the DOM only ever holds the
+ *                                 FORMATTED string, ARCH-1065 M-COV FIX)
+ *   data-agent-field-parts        comma-separated field list (mixed leaves,
+ *                                 or the single field of a "rendered" leaf)
  *   data-agent-field-slot         text-node index of the dynamic part
  *                                 (label+value leaves, D6)
  *   data-agent-collection-order   "stable" | "derived" (D18), on the row root
@@ -35,8 +39,12 @@ import { types, PluginObj } from '@babel/core';
  * `.filter()/.slice()/.sort()/.map()` chain calls, through single-assignment
  * (`const`, never reassigned) local-variable hops (bounded to
  * `MAX_SOURCE_CHAIN_HOPS`), and through a `useMemo(() => …, deps)` /
- * `React.useMemo(() => …, deps)` unwrap (the common `() => expr` shape only —
- * see `resolveSliceSource`). A `.sort(` ANYWHERE in the chain marks the
+ * `React.useMemo(() => …, deps)` unwrap — EITHER the arrow-EXPRESSION-body
+ * shape (`() => expr`) OR a block body with exactly ONE return statement
+ * (`() => { …; return expr; }`, ARCH-1065 M-COV FIX, devtools 0.0.29); a
+ * block body with zero or 2+ returns (ambiguous control flow) is left
+ * unresolved, never guessed at (see `resolveSliceSource` /
+ * `findSingleReturnArgument`). A `.sort(` ANYWHERE in the chain marks the
  * collection `data-agent-collection-order="derived"`; otherwise `"stable"`
  * (D18). The identifier root must be exactly `slice` — this mirrors the
  * runtime's `window.__slice` (M3); the codemod does not trace how a `slice`
@@ -72,6 +80,50 @@ import { types, PluginObj } from '@babel/core';
  * specific field OR several), because no row identity is at stake — only
  * further field leaves.
  *
+ * ── Forwarding-component allowlist descent (ARCH-1065 M-COV fix) ──────────
+ *
+ * D5.4 only ever sees THROUGH a component whose own source is available
+ * (module-local, co-located in the same file). Kit/imported components
+ * (`Card`, `CardContent`, `StatusBadge`, …) are opaque to the AST — the
+ * plugin has no body to project into — but many of them forward unrecognized
+ * JSX attributes onto their own root DOM element (typically via
+ * `{...rest}`), which makes them valid attribute CARRIERS even though
+ * they're not valid PROJECTION targets. `forwardingComponents` (a plugin
+ * option, see `CollectionBindingPluginOptions`) names exactly which ones.
+ *
+ * Two independent mechanisms use that allowlist:
+ *
+ *   - (a2) ROW ROOT: when the `.map()` callback's own returned JSX element
+ *     is an allowlisted component (`<Card key={r.id}>…</Card>` as the row
+ *     root itself), the row-identity attributes stamp directly onto that
+ *     component usage — NOT a projection into a separate definition, since
+ *     there is none to project into. The field walk continues into the
+ *     component's own JSX children with the SAME binding scope the row
+ *     callback already established.
+ *   - (c2-ii) LEAF: when a component usage directly hugs a field expression
+ *     with no host element beneath it (`<StatusBadge>{w.status}</StatusBadge>`),
+ *     the field attribute stamps onto the component itself IFF its name is
+ *     allowlisted; otherwise the leaf is left unstamped — a leaf is never
+ *     given an invented carrier.
+ *
+ * Separately, and regardless of allowlist membership at all — walking a
+ * component's own JSX children costs nothing, since no attribute lands
+ * anywhere until a valid carrier (host, or allowlisted leaf) is actually
+ * found — (a1) DESCENT: the field walk always continues INTO a structural
+ * child that is a component usage, as long as that usage has its own JSX
+ * children in source. `<Card><span>{w.name}</span></Card>` reaches the
+ * `<span>` (a host, stamped unconditionally) even though `Card` itself is
+ * never a stamp target unless allowlisted. This is what makes (c2-ii) safe
+ * to leave allowlist-gated: a wrapper with a host descendant never needs the
+ * wrapper itself to carry anything.
+ *
+ * The allowlist is ALWAYS an explicit option, never a built-in default list
+ * baked into this plugin — kit-manifest is the single source of truth for
+ * which components forward attributes (`forwardsDataAttributes`), and the
+ * kit build (`build-d.mjs`) is what threads that list in. An absent/empty
+ * option is exactly today's fail-closed behavior: zero component-carried
+ * stamps, byte-identical to the plugin before this mechanism existed.
+ *
  * ── Field resolution ────────────────────────────────────────────────────
  *
  * Reuses `meaningfulChildren` from `babel-plugin-editor-meta.ts` (the exact
@@ -95,10 +147,25 @@ import { types, PluginObj } from '@babel/core';
  *     the duplicated test would double-evaluate it across SSR and hydration,
  *     so the whole leaf is left unstamped instead;
  *   - `cond ? 'Literal' : 'Other'` where `cond` is itself a bare field
- *     member (a boolean-typed field driving two literal branches) → static
- *     field named by `cond` — the FE's typed controls (D7, a different
- *     mechanism, M3) read the boolean's true/false rendering from
- *     `window.__slice`, not from this attribute;
+ *     member (a boolean-typed field driving two literal branches), OR a
+ *     CALL-FREE comparison (`===`/`!==`/`==`/`!=`/`</<=`/`>`/`>=`) naming a
+ *     field on either side (`r.status === 'Active' ? 'Pause' : 'Enable'`,
+ *     D5.5 widening, ARCH-1065 M-COV FIX) → static field named by the
+ *     resolved test field — the FE's typed controls (D7, a different
+ *     mechanism, M3) read the boolean's/status's true/false or vocabulary
+ *     rendering from `window.__slice`, not from this attribute. Nothing
+ *     about the test is ever duplicated into the DOM here (only the field
+ *     NAME is emitted), so there is no C3 double-evaluation concern for this
+ *     shape — `containsEvaluation(test)` is still checked defensively;
+ *   - a formatter CALL with exactly one argument that is itself a bare
+ *     member/optional-member field (`Kit.date(r.updated_at)`,
+ *     `money(auction.currentPrice)`, ARCH-1065 M-COV FIX) → the resolved
+ *     field name, PLUS `data-agent-field-state="rendered"` and
+ *     `data-agent-field-parts` (the same field name) — the DOM only ever
+ *     holds the FORMATTED string, never the raw value, so this is marked
+ *     the same "honest, non-invertible" way a `??`/boolean fallback is (D8);
+ *     a multi-arg call, or a call whose sole argument isn't a bare field
+ *     member, is left unstamped rather than guessed at;
  *   - a COMPUTED member (`a[expr]`, `expr` not a string literal) → no field
  *     name, `data-agent-field-state="unresolved"` (a positive "this is
  *     row-scoped data, but which field is unknown" signal — never silent).
@@ -127,6 +194,13 @@ import { types, PluginObj } from '@babel/core';
  * that is itself slice-rooted gets discovered and stamped independently by
  * the same Program-wide `.map()` scan, with its own entity/row identity.
  *
+ * A JSXExpressionContainer wrapping `cond && <JSX/>` / `cond || <JSX/>` / a
+ * ternary IS a structural child, though (ARCH-1065 M-COV FIX, devtools
+ * 0.0.29, see `collectConditionalJsxBranchPaths`): the walker descends into
+ * whichever branch(es) are themselves a JSXElement, with the SAME scope —
+ * purely structural, the guard/test is never duplicated or stamped, only the
+ * JSX it conditionally renders is walked for further fields.
+ *
  * ── Failure posture ─────────────────────────────────────────────────────
  *
  * Every resolution step is an explicit allowlist; anything the resolver is
@@ -148,6 +222,27 @@ import { types, PluginObj } from '@babel/core';
 interface CollectionBindingPluginOptions {
     /** Skip files matching this pattern. @default /node_modules/ */
     fileExclude?: RegExp;
+    /**
+     * Component names known to forward unrecognized JSX attributes onto their
+     * own root DOM element (e.g. via `{...rest}`) — the exact set that makes
+     * a component usage a valid attribute CARRIER (row-root or leaf) even
+     * though it's opaque to the AST (see the "Forwarding-component allowlist
+     * descent" section above).
+     *
+     * Sourced from kit-manifest's `forwardsDataAttributes` flags by the kit
+     * build (`build-d.mjs` passes it) — this plugin NEVER hardcodes a default
+     * list here; that would be a shadow copy of kit-manifest's own truth, and
+     * would drift the moment a kit component's forwarding behavior changed
+     * without this plugin's knowledge. Synthetic lists are fine in tests, to
+     * keep the plugin testable standalone.
+     *
+     * Absent or empty = today's fail-closed behavior: no component ever
+     * carries a stamp, byte-identical to the plugin before this option
+     * existed.
+     *
+     * @default []
+     */
+    forwardingComponents?: string[];
 }
 declare function babelPluginCollectionBinding({ types: t }: {
     types: typeof types;

package/dist/collection-binding.js

@@ -45,9 +45,11 @@ var ATTR_COLLECTION_ORDER = "data-agent-collection-order";
 var SLICE_ROOT_NAME = "slice";
 var CHAIN_METHODS = /* @__PURE__ */ new Set(["filter", "slice", "sort", "map"]);
 var MAX_SOURCE_CHAIN_HOPS = 4;
+var COMPARISON_OPERATORS = /* @__PURE__ */ new Set(["==", "!=", "===", "!==", "<", "<=", ">", ">="]);
 var MAX_PROJECTION_DEPTH = 3;
 function babelPluginCollectionBinding({ types: t }, opts = {}) {
-  const { fileExclude = /node_modules/ } = opts;
+  const { fileExclude = /node_modules/, forwardingComponents = [] } = opts;
+  const forwardingComponentSet = new Set(forwardingComponents);
   function hasOwnAttr(elementPath, name) {
     return elementPath.node.openingElement.attributes.some(
       (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name })
@@ -75,6 +77,10 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   function isLowercaseTag(tag) {
     return tag.length > 0 && tag[0] === tag[0].toLowerCase();
   }
+  function canCarryFieldStamp(elementPath) {
+    const tag = getTagName(elementPath.node.openingElement);
+    return isLowercaseTag(tag) || forwardingComponentSet.has(tag);
+  }
   function getAttrName(attr) {
     return t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
   }
@@ -87,44 +93,72 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (t.isIdentifier(callee, { name: "useMemo" })) return true;
     return t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property, { name: "useMemo" });
   }
-  function resolveSliceSource(expr, scope, hops, hasSort) {
-    if (t.isCallExpression(expr)) {
-      const callee = expr.callee;
-      if (!t.isExpression(callee)) return null;
-      if (isUseMemoCallee(callee)) {
-        const [factory] = expr.arguments;
-        if (!factory || !t.isArrowFunctionExpression(factory)) return null;
-        if (!t.isExpression(factory.body)) return null;
-        return resolveSliceSource(factory.body, scope, hops, hasSort);
+  function findSingleReturnArgument(blockPath) {
+    const returnPaths = [];
+    blockPath.traverse({
+      Function(inner) {
+        inner.skip();
+      },
+      ReturnStatement(rp) {
+        returnPaths.push(rp);
       }
-      if (t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property)) {
-        const method = callee.property.name;
+    });
+    if (returnPaths.length !== 1) return null;
+    const argPath = returnPaths[0].get("argument");
+    if (Array.isArray(argPath) || !argPath.node || !argPath.isExpression()) return null;
+    return argPath;
+  }
+  function resolveSliceSource(path, hops, hasSort) {
+    if (path.isCallExpression()) {
+      const calleePath = path.get("callee");
+      if (Array.isArray(calleePath) || !calleePath.isExpression()) return null;
+      if (isUseMemoCallee(calleePath.node)) {
+        const argPaths = path.get("arguments");
+        const factoryPath = argPaths[0];
+        if (!factoryPath || !factoryPath.isArrowFunctionExpression()) return null;
+        const bodyPath = factoryPath.get("body");
+        if (Array.isArray(bodyPath)) return null;
+        if (bodyPath.isExpression()) {
+          return resolveSliceSource(bodyPath, hops, hasSort);
+        }
+        if (bodyPath.isBlockStatement()) {
+          const returnArgPath = findSingleReturnArgument(bodyPath);
+          if (!returnArgPath) return null;
+          return resolveSliceSource(returnArgPath, hops, hasSort);
+        }
+        return null;
+      }
+      const calleeNode = calleePath.node;
+      if (t.isMemberExpression(calleeNode) && !calleeNode.computed && t.isIdentifier(calleeNode.property)) {
+        const method = calleeNode.property.name;
         if (!CHAIN_METHODS.has(method)) return null;
-        if (!t.isExpression(callee.object)) return null;
-        return resolveSliceSource(callee.object, scope, hops, hasSort || method === "sort");
+        const objectPath = calleePath.get("object");
+        if (Array.isArray(objectPath) || !objectPath.isExpression()) return null;
+        return resolveSliceSource(objectPath, hops, hasSort || method === "sort");
       }
       return null;
     }
-    if (t.isMemberExpression(expr)) {
-      if (!t.isIdentifier(expr.object, { name: SLICE_ROOT_NAME })) return null;
-      if (!isPageSliceBinding(scope)) return null;
-      if (!expr.computed && t.isIdentifier(expr.property)) {
-        return { entity: expr.property.name, hasSort };
+    if (path.isMemberExpression()) {
+      const { object, property, computed } = path.node;
+      if (!t.isIdentifier(object, { name: SLICE_ROOT_NAME })) return null;
+      if (!isPageSliceBinding(path.scope)) return null;
+      if (!computed && t.isIdentifier(property)) {
+        return { entity: property.name, hasSort };
       }
-      if (expr.computed && t.isStringLiteral(expr.property)) {
-        return { entity: expr.property.value, hasSort };
+      if (computed && t.isStringLiteral(property)) {
+        return { entity: property.value, hasSort };
       }
       return null;
     }
-    if (t.isIdentifier(expr)) {
+    if (path.isIdentifier()) {
       if (hops >= MAX_SOURCE_CHAIN_HOPS) return null;
-      const binding = scope.getBinding(expr.name);
+      const binding = path.scope.getBinding(path.node.name);
       if (!binding || !binding.constant) return null;
       const declarator = binding.path;
       if (!declarator.isVariableDeclarator()) return null;
-      const init = declarator.node.init;
-      if (!init || !t.isExpression(init)) return null;
-      return resolveSliceSource(init, declarator.scope, hops + 1, hasSort);
+      const initPath = declarator.get("init");
+      if (Array.isArray(initPath) || !initPath.node || !initPath.isExpression()) return null;
+      return resolveSliceSource(initPath, hops + 1, hasSort);
     }
     return null;
   }
@@ -262,11 +296,27 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     const field = fieldNameForBranch(expr.left, scope);
     return field ? { kind: "static", field } : null;
   }
+  function fieldNameForLiteralBranchTest(expr, scope) {
+    const direct = fieldNameForBranch(expr, scope);
+    if (direct) return direct;
+    if (t.isBinaryExpression(expr) && COMPARISON_OPERATORS.has(expr.operator)) {
+      if (t.isExpression(expr.left)) {
+        const leftField = fieldNameForBranch(expr.left, scope);
+        if (leftField) return leftField;
+      }
+      if (t.isExpression(expr.right)) {
+        const rightField = fieldNameForBranch(expr.right, scope);
+        if (rightField) return rightField;
+      }
+    }
+    return null;
+  }
   function classifyConditional(expr, scope) {
     const { test, consequent, alternate } = expr;
     if (!t.isExpression(test) || !t.isExpression(consequent) || !t.isExpression(alternate)) return null;
     if (isStaticLiteralExpr(consequent) && isStaticLiteralExpr(alternate)) {
-      const testField = fieldNameForBranch(test, scope);
+      if (containsEvaluation(test)) return null;
+      const testField = fieldNameForLiteralBranchTest(test, scope);
       return testField ? { kind: "static", field: testField } : null;
     }
     const consField = fieldNameForBranch(consequent, scope);
@@ -279,6 +329,14 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       expr: t.conditionalExpression(t.cloneNode(test), t.stringLiteral(consField), t.stringLiteral(altField))
     };
   }
+  function classifyFormatterCall(expr, scope) {
+    if (expr.arguments.length !== 1) return null;
+    const [arg] = expr.arguments;
+    if (!t.isMemberExpression(arg) && !t.isOptionalMemberExpression(arg)) return null;
+    const verdict = classifyMemberField(arg, scope);
+    if (!verdict || verdict.kind !== "static") return null;
+    return { kind: "formatted", field: verdict.field };
+  }
   function classifyFieldExpr(expr, scope) {
     if (t.isIdentifier(expr)) {
       const binding = scope.identifiers.get(expr.name);
@@ -290,6 +348,7 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (t.isLogicalExpression(expr) && expr.operator === "??") return classifyNullishChain(expr, scope);
     if (t.isLogicalExpression(expr) && expr.operator === "||") return classifySimpleLogicalOr(expr, scope);
     if (t.isConditionalExpression(expr)) return classifyConditional(expr, scope);
+    if (t.isCallExpression(expr)) return classifyFormatterCall(expr, scope);
     return null;
   }
   function applyFieldVerdict(elementPath, verdict) {
@@ -302,6 +361,12 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       addAttr(elementPath, ATTR_FIELD, t.stringLiteral(verdict.field));
       return;
     }
+    if (verdict.kind === "formatted") {
+      addAttr(elementPath, ATTR_FIELD, t.stringLiteral(verdict.field));
+      addAttr(elementPath, ATTR_FIELD_STATE, t.stringLiteral("rendered"));
+      addAttr(elementPath, ATTR_FIELD_PARTS, t.stringLiteral(verdict.field));
+      return;
+    }
     addAttr(elementPath, ATTR_FIELD, t.jsxExpressionContainer(verdict.expr));
   }
   function meaningfulChildPaths(elementPath) {
@@ -324,11 +389,13 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   }
   function stampPureLeaf(elementPath, expr, scope) {
     if (hasOwnAttr(elementPath, ATTR_FIELD) || hasOwnAttr(elementPath, ATTR_FIELD_STATE)) return;
+    if (!canCarryFieldStamp(elementPath)) return;
     if (t.isJSXEmptyExpression(expr) || !t.isExpression(expr)) return;
     applyFieldVerdict(elementPath, classifyFieldExpr(expr, scope));
   }
   function stampLabelValueOrMixed(elementPath, childPaths, scope) {
     if (hasOwnAttr(elementPath, ATTR_FIELD) || hasOwnAttr(elementPath, ATTR_FIELD_STATE)) return;
+    if (!canCarryFieldStamp(elementPath)) return;
     const hasInvisibleSibling = childPaths.some(
       (p) => p.isJSXExpressionContainer() && t.isExpression(p.node.expression) && isInvisibleRenderExpr(p.node.expression)
     );
@@ -432,6 +499,7 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   function resolveRowRoot(jsxPath, scope, depth) {
     const tag = getTagName(jsxPath.node.openingElement);
     if (isLowercaseTag(tag)) return { hostPath: jsxPath, scope };
+    if (forwardingComponentSet.has(tag)) return { hostPath: jsxPath, scope };
     if (depth >= MAX_PROJECTION_DEPTH) return null;
     const fnPath = resolveComponentDefinition(tag, jsxPath);
     if (!fnPath) return null;
@@ -477,13 +545,42 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (!innerReturn) return null;
     return resolveFieldProjection(innerReturn, { identifiers }, depth + 1);
   }
+  function collectConditionalJsxBranchPaths(containerPath) {
+    const exprPath = containerPath.get("expression");
+    if (Array.isArray(exprPath)) return [];
+    if (exprPath.isLogicalExpression() && (exprPath.node.operator === "&&" || exprPath.node.operator === "||")) {
+      const rightPath = exprPath.get("right");
+      return !Array.isArray(rightPath) && rightPath.isJSXElement() ? [rightPath] : [];
+    }
+    if (exprPath.isConditionalExpression()) {
+      const branches = [];
+      const consPath = exprPath.get("consequent");
+      const altPath = exprPath.get("alternate");
+      if (!Array.isArray(consPath) && consPath.isJSXElement()) branches.push(consPath);
+      if (!Array.isArray(altPath) && altPath.isJSXElement()) branches.push(altPath);
+      return branches;
+    }
+    return [];
+  }
   function walkFieldsWithinRow(elementPath, scope) {
     const childPaths = meaningfulChildPaths(elementPath);
-    const hasElementChild = childPaths.some((p) => p.isJSXElement());
+    const conditionalBranchesByChild = /* @__PURE__ */ new Map();
+    for (const p of childPaths) {
+      if (!p.isJSXExpressionContainer()) continue;
+      const branches = collectConditionalJsxBranchPaths(p);
+      if (branches.length > 0) conditionalBranchesByChild.set(p, branches);
+    }
+    const hasElementChild = childPaths.some((p) => p.isJSXElement() || conditionalBranchesByChild.has(p));
     if (hasElementChild) {
       for (const childPath of childPaths) {
-        if (!childPath.isJSXElement()) continue;
-        handleStructuralChild(childPath, scope);
+        if (childPath.isJSXElement()) {
+          handleStructuralChild(childPath, scope);
+          continue;
+        }
+        const branches = conditionalBranchesByChild.get(childPath);
+        if (branches) {
+          for (const branchPath of branches) handleStructuralChild(branchPath, scope);
+        }
       }
       return;
     }
@@ -503,6 +600,10 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       walkFieldsWithinRow(childPath, scope);
       return;
     }
+    if (meaningfulChildPaths(childPath).length > 0) {
+      walkFieldsWithinRow(childPath, scope);
+      return;
+    }
     const projected = resolveFieldProjection(childPath, scope, 0);
     if (!projected) return;
     walkFieldsWithinRow(projected.hostPath, projected.scope);
@@ -513,7 +614,11 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (!t.isMemberExpression(callee) || callee.computed) return;
     if (!t.isIdentifier(callee.property, { name: "map" })) return;
     if (!t.isExpression(callee.object)) return;
-    const source = resolveSliceSource(callee.object, callPath.scope, 0, false);
+    const calleePath = callPath.get("callee");
+    if (Array.isArray(calleePath) || !calleePath.isMemberExpression()) return;
+    const objectPath = calleePath.get("object");
+    if (Array.isArray(objectPath) || !objectPath.isExpression()) return;
+    const source = resolveSliceSource(objectPath, 0, false);
     if (!source) return;
     const [callback] = node.arguments;
     if (!callback || !t.isArrowFunctionExpression(callback) && !t.isFunctionExpression(callback)) return;

package/dist/collection-binding.mjs

@@ -14,9 +14,11 @@ var ATTR_COLLECTION_ORDER = "data-agent-collection-order";
 var SLICE_ROOT_NAME = "slice";
 var CHAIN_METHODS = /* @__PURE__ */ new Set(["filter", "slice", "sort", "map"]);
 var MAX_SOURCE_CHAIN_HOPS = 4;
+var COMPARISON_OPERATORS = /* @__PURE__ */ new Set(["==", "!=", "===", "!==", "<", "<=", ">", ">="]);
 var MAX_PROJECTION_DEPTH = 3;
 function babelPluginCollectionBinding({ types: t }, opts = {}) {
-  const { fileExclude = /node_modules/ } = opts;
+  const { fileExclude = /node_modules/, forwardingComponents = [] } = opts;
+  const forwardingComponentSet = new Set(forwardingComponents);
   function hasOwnAttr(elementPath, name) {
     return elementPath.node.openingElement.attributes.some(
       (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name })
@@ -44,6 +46,10 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   function isLowercaseTag(tag) {
     return tag.length > 0 && tag[0] === tag[0].toLowerCase();
   }
+  function canCarryFieldStamp(elementPath) {
+    const tag = getTagName(elementPath.node.openingElement);
+    return isLowercaseTag(tag) || forwardingComponentSet.has(tag);
+  }
   function getAttrName(attr) {
     return t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
   }
@@ -56,44 +62,72 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (t.isIdentifier(callee, { name: "useMemo" })) return true;
     return t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property, { name: "useMemo" });
   }
-  function resolveSliceSource(expr, scope, hops, hasSort) {
-    if (t.isCallExpression(expr)) {
-      const callee = expr.callee;
-      if (!t.isExpression(callee)) return null;
-      if (isUseMemoCallee(callee)) {
-        const [factory] = expr.arguments;
-        if (!factory || !t.isArrowFunctionExpression(factory)) return null;
-        if (!t.isExpression(factory.body)) return null;
-        return resolveSliceSource(factory.body, scope, hops, hasSort);
+  function findSingleReturnArgument(blockPath) {
+    const returnPaths = [];
+    blockPath.traverse({
+      Function(inner) {
+        inner.skip();
+      },
+      ReturnStatement(rp) {
+        returnPaths.push(rp);
       }
-      if (t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property)) {
-        const method = callee.property.name;
+    });
+    if (returnPaths.length !== 1) return null;
+    const argPath = returnPaths[0].get("argument");
+    if (Array.isArray(argPath) || !argPath.node || !argPath.isExpression()) return null;
+    return argPath;
+  }
+  function resolveSliceSource(path, hops, hasSort) {
+    if (path.isCallExpression()) {
+      const calleePath = path.get("callee");
+      if (Array.isArray(calleePath) || !calleePath.isExpression()) return null;
+      if (isUseMemoCallee(calleePath.node)) {
+        const argPaths = path.get("arguments");
+        const factoryPath = argPaths[0];
+        if (!factoryPath || !factoryPath.isArrowFunctionExpression()) return null;
+        const bodyPath = factoryPath.get("body");
+        if (Array.isArray(bodyPath)) return null;
+        if (bodyPath.isExpression()) {
+          return resolveSliceSource(bodyPath, hops, hasSort);
+        }
+        if (bodyPath.isBlockStatement()) {
+          const returnArgPath = findSingleReturnArgument(bodyPath);
+          if (!returnArgPath) return null;
+          return resolveSliceSource(returnArgPath, hops, hasSort);
+        }
+        return null;
+      }
+      const calleeNode = calleePath.node;
+      if (t.isMemberExpression(calleeNode) && !calleeNode.computed && t.isIdentifier(calleeNode.property)) {
+        const method = calleeNode.property.name;
         if (!CHAIN_METHODS.has(method)) return null;
-        if (!t.isExpression(callee.object)) return null;
-        return resolveSliceSource(callee.object, scope, hops, hasSort || method === "sort");
+        const objectPath = calleePath.get("object");
+        if (Array.isArray(objectPath) || !objectPath.isExpression()) return null;
+        return resolveSliceSource(objectPath, hops, hasSort || method === "sort");
       }
       return null;
     }
-    if (t.isMemberExpression(expr)) {
-      if (!t.isIdentifier(expr.object, { name: SLICE_ROOT_NAME })) return null;
-      if (!isPageSliceBinding(scope)) return null;
-      if (!expr.computed && t.isIdentifier(expr.property)) {
-        return { entity: expr.property.name, hasSort };
+    if (path.isMemberExpression()) {
+      const { object, property, computed } = path.node;
+      if (!t.isIdentifier(object, { name: SLICE_ROOT_NAME })) return null;
+      if (!isPageSliceBinding(path.scope)) return null;
+      if (!computed && t.isIdentifier(property)) {
+        return { entity: property.name, hasSort };
       }
-      if (expr.computed && t.isStringLiteral(expr.property)) {
-        return { entity: expr.property.value, hasSort };
+      if (computed && t.isStringLiteral(property)) {
+        return { entity: property.value, hasSort };
       }
       return null;
     }
-    if (t.isIdentifier(expr)) {
+    if (path.isIdentifier()) {
       if (hops >= MAX_SOURCE_CHAIN_HOPS) return null;
-      const binding = scope.getBinding(expr.name);
+      const binding = path.scope.getBinding(path.node.name);
       if (!binding || !binding.constant) return null;
       const declarator = binding.path;
       if (!declarator.isVariableDeclarator()) return null;
-      const init = declarator.node.init;
-      if (!init || !t.isExpression(init)) return null;
-      return resolveSliceSource(init, declarator.scope, hops + 1, hasSort);
+      const initPath = declarator.get("init");
+      if (Array.isArray(initPath) || !initPath.node || !initPath.isExpression()) return null;
+      return resolveSliceSource(initPath, hops + 1, hasSort);
     }
     return null;
   }
@@ -231,11 +265,27 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     const field = fieldNameForBranch(expr.left, scope);
     return field ? { kind: "static", field } : null;
   }
+  function fieldNameForLiteralBranchTest(expr, scope) {
+    const direct = fieldNameForBranch(expr, scope);
+    if (direct) return direct;
+    if (t.isBinaryExpression(expr) && COMPARISON_OPERATORS.has(expr.operator)) {
+      if (t.isExpression(expr.left)) {
+        const leftField = fieldNameForBranch(expr.left, scope);
+        if (leftField) return leftField;
+      }
+      if (t.isExpression(expr.right)) {
+        const rightField = fieldNameForBranch(expr.right, scope);
+        if (rightField) return rightField;
+      }
+    }
+    return null;
+  }
   function classifyConditional(expr, scope) {
     const { test, consequent, alternate } = expr;
     if (!t.isExpression(test) || !t.isExpression(consequent) || !t.isExpression(alternate)) return null;
     if (isStaticLiteralExpr(consequent) && isStaticLiteralExpr(alternate)) {
-      const testField = fieldNameForBranch(test, scope);
+      if (containsEvaluation(test)) return null;
+      const testField = fieldNameForLiteralBranchTest(test, scope);
       return testField ? { kind: "static", field: testField } : null;
     }
     const consField = fieldNameForBranch(consequent, scope);
@@ -248,6 +298,14 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       expr: t.conditionalExpression(t.cloneNode(test), t.stringLiteral(consField), t.stringLiteral(altField))
     };
   }
+  function classifyFormatterCall(expr, scope) {
+    if (expr.arguments.length !== 1) return null;
+    const [arg] = expr.arguments;
+    if (!t.isMemberExpression(arg) && !t.isOptionalMemberExpression(arg)) return null;
+    const verdict = classifyMemberField(arg, scope);
+    if (!verdict || verdict.kind !== "static") return null;
+    return { kind: "formatted", field: verdict.field };
+  }
   function classifyFieldExpr(expr, scope) {
     if (t.isIdentifier(expr)) {
       const binding = scope.identifiers.get(expr.name);
@@ -259,6 +317,7 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (t.isLogicalExpression(expr) && expr.operator === "??") return classifyNullishChain(expr, scope);
     if (t.isLogicalExpression(expr) && expr.operator === "||") return classifySimpleLogicalOr(expr, scope);
     if (t.isConditionalExpression(expr)) return classifyConditional(expr, scope);
+    if (t.isCallExpression(expr)) return classifyFormatterCall(expr, scope);
     return null;
   }
   function applyFieldVerdict(elementPath, verdict) {
@@ -271,6 +330,12 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       addAttr(elementPath, ATTR_FIELD, t.stringLiteral(verdict.field));
       return;
     }
+    if (verdict.kind === "formatted") {
+      addAttr(elementPath, ATTR_FIELD, t.stringLiteral(verdict.field));
+      addAttr(elementPath, ATTR_FIELD_STATE, t.stringLiteral("rendered"));
+      addAttr(elementPath, ATTR_FIELD_PARTS, t.stringLiteral(verdict.field));
+      return;
+    }
     addAttr(elementPath, ATTR_FIELD, t.jsxExpressionContainer(verdict.expr));
   }
   function meaningfulChildPaths(elementPath) {
@@ -293,11 +358,13 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   }
   function stampPureLeaf(elementPath, expr, scope) {
     if (hasOwnAttr(elementPath, ATTR_FIELD) || hasOwnAttr(elementPath, ATTR_FIELD_STATE)) return;
+    if (!canCarryFieldStamp(elementPath)) return;
     if (t.isJSXEmptyExpression(expr) || !t.isExpression(expr)) return;
     applyFieldVerdict(elementPath, classifyFieldExpr(expr, scope));
   }
   function stampLabelValueOrMixed(elementPath, childPaths, scope) {
     if (hasOwnAttr(elementPath, ATTR_FIELD) || hasOwnAttr(elementPath, ATTR_FIELD_STATE)) return;
+    if (!canCarryFieldStamp(elementPath)) return;
     const hasInvisibleSibling = childPaths.some(
       (p) => p.isJSXExpressionContainer() && t.isExpression(p.node.expression) && isInvisibleRenderExpr(p.node.expression)
     );
@@ -401,6 +468,7 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
   function resolveRowRoot(jsxPath, scope, depth) {
     const tag = getTagName(jsxPath.node.openingElement);
     if (isLowercaseTag(tag)) return { hostPath: jsxPath, scope };
+    if (forwardingComponentSet.has(tag)) return { hostPath: jsxPath, scope };
     if (depth >= MAX_PROJECTION_DEPTH) return null;
     const fnPath = resolveComponentDefinition(tag, jsxPath);
     if (!fnPath) return null;
@@ -446,13 +514,42 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (!innerReturn) return null;
     return resolveFieldProjection(innerReturn, { identifiers }, depth + 1);
   }
+  function collectConditionalJsxBranchPaths(containerPath) {
+    const exprPath = containerPath.get("expression");
+    if (Array.isArray(exprPath)) return [];
+    if (exprPath.isLogicalExpression() && (exprPath.node.operator === "&&" || exprPath.node.operator === "||")) {
+      const rightPath = exprPath.get("right");
+      return !Array.isArray(rightPath) && rightPath.isJSXElement() ? [rightPath] : [];
+    }
+    if (exprPath.isConditionalExpression()) {
+      const branches = [];
+      const consPath = exprPath.get("consequent");
+      const altPath = exprPath.get("alternate");
+      if (!Array.isArray(consPath) && consPath.isJSXElement()) branches.push(consPath);
+      if (!Array.isArray(altPath) && altPath.isJSXElement()) branches.push(altPath);
+      return branches;
+    }
+    return [];
+  }
   function walkFieldsWithinRow(elementPath, scope) {
     const childPaths = meaningfulChildPaths(elementPath);
-    const hasElementChild = childPaths.some((p) => p.isJSXElement());
+    const conditionalBranchesByChild = /* @__PURE__ */ new Map();
+    for (const p of childPaths) {
+      if (!p.isJSXExpressionContainer()) continue;
+      const branches = collectConditionalJsxBranchPaths(p);
+      if (branches.length > 0) conditionalBranchesByChild.set(p, branches);
+    }
+    const hasElementChild = childPaths.some((p) => p.isJSXElement() || conditionalBranchesByChild.has(p));
     if (hasElementChild) {
       for (const childPath of childPaths) {
-        if (!childPath.isJSXElement()) continue;
-        handleStructuralChild(childPath, scope);
+        if (childPath.isJSXElement()) {
+          handleStructuralChild(childPath, scope);
+          continue;
+        }
+        const branches = conditionalBranchesByChild.get(childPath);
+        if (branches) {
+          for (const branchPath of branches) handleStructuralChild(branchPath, scope);
+        }
       }
       return;
     }
@@ -472,6 +569,10 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
       walkFieldsWithinRow(childPath, scope);
       return;
     }
+    if (meaningfulChildPaths(childPath).length > 0) {
+      walkFieldsWithinRow(childPath, scope);
+      return;
+    }
     const projected = resolveFieldProjection(childPath, scope, 0);
     if (!projected) return;
     walkFieldsWithinRow(projected.hostPath, projected.scope);
@@ -482,7 +583,11 @@ function babelPluginCollectionBinding({ types: t }, opts = {}) {
     if (!t.isMemberExpression(callee) || callee.computed) return;
     if (!t.isIdentifier(callee.property, { name: "map" })) return;
     if (!t.isExpression(callee.object)) return;
-    const source = resolveSliceSource(callee.object, callPath.scope, 0, false);
+    const calleePath = callPath.get("callee");
+    if (Array.isArray(calleePath) || !calleePath.isMemberExpression()) return;
+    const objectPath = calleePath.get("object");
+    if (Array.isArray(objectPath) || !objectPath.isExpression()) return;
+    const source = resolveSliceSource(objectPath, 0, false);
     if (!source) return;
     const [callback] = node.arguments;
     if (!callback || !t.isArrowFunctionExpression(callback) && !t.isFunctionExpression(callback)) return;

package/package.json

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