@barefootjs/jsx 0.33.2 → 0.33.4

package/src/jsx-to-ir.ts

@@ -49,7 +49,7 @@ import {
   rewriteBarePropRefs as rewriteBarePropRefsCore,
   collectAstPropRefs,
 } from './prop-rewrite.ts'
-import { buildPropAliasMap } from './props-binding.ts'
+import { buildPropAliasMap, resolveRestSpreadOriginCore } from './props-binding.ts'
 import { resolveFreeRefs, isNameBound as isNameBoundInEnv, type BindingEnvironment } from './free-refs.ts'
 import { computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { createTemplateAwareStringProtector } from './ir-to-client-js/html-template.ts'
@@ -61,7 +61,7 @@ import { extractFreeIdentifiersFromNode, initializerShapeContainsJsx, extractMul
 import { iterateJsTokens, replaceInExprContexts } from './scanner/js-scanner.ts'
 import { reconstructAsSegments } from './strip-types.ts'
 import { templatePartsToJsExpr } from './template-parts.ts'
-import { toHTMLAttrName, decodeEntities } from '@barefootjs/shared'
+import { toHTMLAttrName, decodeEntities, BF_KEY, keyAttrName } from '@barefootjs/shared'
 import { BindingScope } from './scope/binding-scope.ts'
 import { identifierPattern, identifierCallPattern } from './identifier-pattern.ts'
 
@@ -93,6 +93,8 @@ interface TransformContext {
   _reactiveGetterNames?: Set<string>
   /** Cached set of module-scope @client signal/memo names. */
   _moduleClientSignalNames?: Set<string>
+  /** Cached `localConstants` index for `forwardsCallerRestProps`'s alias walk */
+  _restSpreadConstantValues?: ReadonlyMap<string, string | undefined>
   /** Cached set of destructured prop names for AST-based rewriting */
   _destructuredPropNames?: Set<string> | null
   /**
@@ -982,9 +984,82 @@ function attachParsedExpressions(node: IRNode, analyzer: AnalyzerContext, bound:
   }
 }
 
+/**
+ * Resolve #2753's "mechanism 2" `keyAttr`: the component's own possible
+ * render root(s) relay a key value an external caller supplies at runtime
+ * (a `data-key` prop / Rust `bf.data_key` field / client `createComponent`
+ * key argument) when THIS component is itself invoked as a caller's keyed
+ * loop row. Ported, once, from the `element.needsScope` test each of the 10
+ * SSR adapters previously applied at EMIT time, on every compile. Resolving
+ * it here means every adapter instead reads one IR field.
+ *
+ * The relay belongs on exactly the elements carrying `needsScope` — the
+ * elements that also carry `bf-s`, i.e. this component's rendered root(s).
+ * That is the same predicate, evaluated at the same set of elements, as the
+ * reference (Hono) adapter applied before #2762, and it matches what the
+ * client runtime does for the CSR half of the contract: `renderChild` /
+ * `materializeComponent` splice `data-key` onto the rendered markup's FIRST
+ * element (component.ts), whatever wrapper nodes stand above it. A walk
+ * that stops at the first non-element node instead of testing `needsScope`
+ * throughout answers differently for every component whose root is a
+ * `<Ctx.Provider>` — `transformProviderElement` passes `ctx.isRoot` through
+ * to its children, so the provider's inner element is a rendered root and
+ * gets `needsScope`, but the walk never reaches it (#2753 regression).
+ *
+ * `needsScope` is `ctx.isRoot` at element-transform time, and `ctx.isRoot`
+ * is consumed by the first element/component/scope-comment fragment on the
+ * way down, so nothing inside a loop body or a child component's slot
+ * children can be true here. Visiting the whole tree therefore costs
+ * nothing in reach but cannot go stale the way an enumeration of
+ * "`isRoot`-transparent constructs" can.
+ *
+ * A `needsScopeComment` fragment root (#2732) is handled separately, at
+ * `transformFragment` build time (`markDataKeyCarrier`): `ctx.isRoot` can be
+ * true for at most one node in a component's whole tree, so that one shape
+ * is fully resolved the moment the fragment itself is built and does not
+ * need a second, tree-wide pass to find it again. Its children carry
+ * `needsScope: false` by construction, so this walk's `n.needsScope` guard
+ * naturally skips them without double-marking.
+ *
+ * The `!keyAttr` guard keeps mechanism 1 (`applyLoopKeyAttr`, an inline
+ * `.map()` row root's own concretely-known key expression, resolved during
+ * the transform) — strictly more useful than a relay marker — from being
+ * overwritten.
+ */
+function resolveRootKeyAttr(node: IRNode | null): void {
+  if (!node) return
+  switch (node.type) {
+    case 'element':
+      if (node.needsScope && !node.keyAttr) node.keyAttr = { name: BF_KEY }
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'fragment':
+    case 'component':
+    case 'provider':
+    case 'loop':
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'async':
+      resolveRootKeyAttr(node.fallback)
+      for (const c of node.children) resolveRootKeyAttr(c)
+      return
+    case 'conditional':
+      resolveRootKeyAttr(node.whenTrue)
+      resolveRootKeyAttr(node.whenFalse)
+      return
+    case 'if-statement':
+      resolveRootKeyAttr(node.consequent)
+      resolveRootKeyAttr(node.alternate)
+      return
+  }
+}
+
 export function jsxToIR(analyzer: AnalyzerContext): IRNode | null {
   const root = buildIRRoot(analyzer)
-  if (root) attachParsedExpressions(root, analyzer)
+  if (root) {
+    attachParsedExpressions(root, analyzer)
+    resolveRootKeyAttr(root)
+  }
   return root
 }
 
@@ -1388,13 +1463,12 @@ function lowerFormControlValueSsr(
     children.push({
       type: 'expression',
       expr,
-      // The client-side registration template interpolates slotless
-      // expression children RAW (no text-slot `escapeText` wrapper), so a
-      // value containing `</textarea>` would break out of the element on
-      // CSR mount. Escape in the client-only template variant; `expr`
-      // stays clean for the SSR adapters, whose template engines (and
-      // hono/jsx) already escape text children natively.
+      // Escaped for client string-building; `expr` stays raw since SSR
+      // engines escape text children natively.
       templateExpr: `escapeText(${templateExpr ?? expr})`,
+      // Init-scope builders can't just swap in `templateExpr` (its `_p.`
+      // binding differs) — see `escapeInClientTemplate`'s docstring.
+      escapeInClientTemplate: true,
       typeInfo: null,
       reactive: false,
       slotId: null,
@@ -1471,7 +1545,7 @@ function transformHtmlElement(
 
   // Determine if this element needs a slot ID
   // Elements need slotIds if they have: events, dynamic children, reactive attributes, or refs
-  const needsSlot = events.length > 0 || hasDynamicContent(children) || hasReactiveAttributes(attrs, ctx) || ref !== null
+  const needsSlot = events.length > 0 || hasDynamicContent(children) || hasReactiveAttributes(attrs, ctx) || ref !== null || forwardsCallerRestProps(attrs, ctx)
   const slotId = needsSlot ? generateSlotId(ctx) : null
 
   // Propagate slotId to loop children (they need to use parent's marker)
@@ -1527,7 +1601,7 @@ function transformSelfClosingElement(
   lowerFormControlValueSsr(tagName, attrs, selfClosingChildren)
 
   // Elements need slotIds if they have events, reactive attributes, or refs
-  const needsSlot = events.length > 0 || hasReactiveAttributes(attrs, ctx) || ref !== null
+  const needsSlot = events.length > 0 || hasReactiveAttributes(attrs, ctx) || ref !== null || forwardsCallerRestProps(attrs, ctx)
   const slotId = needsSlot ? generateSlotId(ctx) : null
 
   const needsScope = ctx.isRoot
@@ -1946,10 +2020,12 @@ function unwrapHoistedFragment(node: IRNode): IRNode {
 
 // #2732: a `needsScopeComment` fragment's five hydration markers move to
 // the wrapping comment, but `data-key` needs to stay on an element (see
-// `IRElement.carriesDataKey`'s docstring for why). Mark the first ELEMENT
-// among `children` — immutably (`{ ...el, carriesDataKey: true }`), matching
+// `IRElement.keyAttr`'s docstring for why). Mark the first ELEMENT among
+// `children` — immutably (`{ ...el, keyAttr: { name: BF_KEY } }`), matching
 // the rest of this file's post-hoc IR tagging (e.g. `unwrapHoistedFragment`)
-// rather than mutating the child in place.
+// rather than mutating the child in place. No `value`: this fragment relays
+// whatever key its OWN caller supplies at runtime (#2753's "mechanism 2" —
+// see `IRElement.keyAttr`), not a locally-known expression.
 function markDataKeyCarrier(children: IRNode[]): IRNode[] {
   for (let i = 0; i < children.length; i++) {
     const marked = markCarrierIn(children[i])
@@ -1978,7 +2054,13 @@ function markDataKeyCarrier(children: IRNode[]): IRNode[] {
  */
 function markCarrierIn(node: IRNode): IRNode | null {
   if (node.type === 'element') {
-    return { ...(node as IRElement), carriesDataKey: true }
+    // Never overwrite an element that already resolved a LOCAL loop key
+    // (mechanism 1, `resolveLoopKeyAttr` below) — that can only happen if
+    // this same element is simultaneously a `.map()` row root AND this
+    // fragment's relay carrier, and the local, concretely-known expression
+    // is strictly more useful than the relay marker.
+    if ((node as IRElement).keyAttr) return null
+    return { ...(node as IRElement), keyAttr: { name: BF_KEY } }
   }
   if (node.type === 'conditional') {
     const cond = node as IRConditional
@@ -2171,8 +2253,11 @@ function transformExpressionInner(
     return null
   }
 
-  // Check for bare signal/memo identifier (BF044)
-  checkBareSignalOrMemoIdentifier(expr, ctx)
+  // Check for bare signal/memo identifier (BF044). A JSX text child is
+  // inherently a RENDERED position — unlike a component prop, `{expr}`
+  // here always becomes literal rendered output, never an opaque value
+  // handed to a consumer to call later — so nested descent is always on.
+  checkBareSignalOrMemoIdentifier(expr, ctx, { descendNested: true })
 
   // #547: Inline a JSX constant referenced by identifier. Unique to JSX-child
   // position — conditional branches and return position don't resolve
@@ -3708,6 +3793,19 @@ function extractLoopKey(node: IRNode): string | null {
     if (b === null) return null
     return normalizeKeyExpr(a) === normalizeKeyExpr(b) ? a : null
   }
+  if (node.type === 'fragment') {
+    // #2763: a `.map()` body returning a fragment (`<><li key={..}/><li/></>`)
+    // reads the key off its FIRST element, not first node — same "first
+    // element, not first node" rule as `IRElement.keyAttr`'s docstring and
+    // `markCarrierIn`'s relay case, skipping whitespace-only text the way
+    // `branchHasNoElement` does. Recursing through `extractLoopKey` (rather
+    // than requiring `type === 'element'` directly) lets a nested
+    // conditional/fragment first child resolve too.
+    const first = node.children.find(
+      (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
+    )
+    return first ? extractLoopKey(first) : null
+  }
   return null
 }
 
@@ -4023,7 +4121,7 @@ function leafIsWirelessElement(el: ts.JsxElement | ts.JsxSelfClosingElement): bo
         if (ts.isJsxSpreadAttribute(attr)) { ok = false; return }
         if (ts.isJsxAttribute(attr)) {
           const name = attr.name.getText()
-          if (/^on[A-Z]/.test(name)) { ok = false; return }
+          if (isEventHandlerAttrName(name)) { ok = false; return }
         }
       }
     }
@@ -4104,6 +4202,56 @@ function tagLoopItemRootComponents(nodes: readonly IRNode[]): void {
   }
 }
 
+/**
+ * Attach the loop's resolved key ATTRIBUTE (name + value) to the element(s)
+ * that will actually render it — the write-side twin of `extractLoopKey`,
+ * which reads the SAME `key={}` JSX attribute (#2753: the SSR-side row-key
+ * decision is resolved once here, so the 9 SSR adapters stop re-deriving the
+ * attribute name from their own depth tracking, and stop disagreeing about
+ * whether an unkeyed row gets one at all).
+ *
+ * Mutates in place — `tagLoopItemRootComponents`'s style, run immediately
+ * after `key`/`depth` resolve, on the same node objects `children` already
+ * owns — rather than rebuilding the tree immutably: unlike `markCarrierIn`
+ * (which hands a fresh tree back to a caller holding the old one), this runs
+ * on IR this same function just built and is about to return, so there is
+ * no stale external reference to protect.
+ *
+ * Deliberately does NOT remove the literal `key` entry from `.attrs`: the
+ * CSR/client-JS codegen path (`ir-to-client-js/html-template.ts`'s
+ * `resolvedKeyAttrName` helper, #2763) reads it back off `.attrs` too, but
+ * only emits `data-key` when THIS field — `node.keyAttr` — is actually set;
+ * a raw `key` attribute the SSR side didn't recognize as a row key (e.g. a
+ * fragment-bodied row before #2763's fix) no longer gets baked client-side
+ * either. Adapters skip the raw `key` attr in their generic `renderAttributes`
+ * loop instead (Hono's own JSX runtime already drops it silently either way).
+ *
+ * `component` bodies are left untouched: a `<Comp key={x}/>` row root's key
+ * is a PROP (`renderComponentProps`'s own `data-key` prop-forwarding), not
+ * an `IRElement` — a separate mechanism #2753 did not measure as broken and
+ * this change does not touch.
+ */
+function applyLoopKeyAttr(node: IRNode, name: string, value: string): void {
+  if (node.type === 'element') {
+    node.keyAttr = { name, value }
+    return
+  }
+  if (node.type === 'conditional') {
+    applyLoopKeyAttr(node.whenTrue, name, value)
+    applyLoopKeyAttr(node.whenFalse, name, value)
+    return
+  }
+  if (node.type === 'fragment') {
+    // Write-side twin of `extractLoopKey`'s fragment case: stamp the SAME
+    // first-real-child this key was read from, not every child, matching
+    // the "first element, not first node" rule.
+    const first = node.children.find(
+      (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
+    )
+    if (first) applyLoopKeyAttr(first, name, value)
+  }
+}
+
 function loopBodyItemConditional(children: IRNode[]): IRConditional | null {
   const real = children.filter(
     (c) => !(c.type === 'text' && typeof c.value === 'string' && !c.value.trim())
@@ -4542,7 +4690,7 @@ function transformMapCall(
           // the conditional — the same carrier the single-return path uses. A
           // JS-runtime adapter (and the browser under /* @client */) runs it
           // verbatim.
-          preamble = preambleFromValueStatements(pre, ctx)
+          preamble = preambleFromValueStatements(pre, ctx, body.statements)
 
           // Stage 2 of spec/callback-fidelity.md, narrowed by #2447. This used
           // to refuse EVERY branch preamble on a DSL target, on the premise
@@ -4749,7 +4897,7 @@ function transformMapCall(
             valueStmts.push(stmt)
           }
           if (valueStmts.length > 0) {
-            preamble = preambleFromValueStatements(valueStmts, ctx)
+            preamble = preambleFromValueStatements(valueStmts, ctx, body.statements)
 
             // #2447. A DSL adapter cannot execute `preamble.segments` (JS
             // text), so it lowers `declarations` — one per-row local each —
@@ -4946,6 +5094,20 @@ function transformMapCall(
     ? extractItemConditionalKey(itemConditional!)
     : (children.length > 0 ? extractLoopKey(children[0]) : null)
 
+  // #2753: resolve this row's key ATTRIBUTE (name + value) here, once, and
+  // stamp it onto the element(s) that render it — `null` (unkeyed) means no
+  // `IRElement.keyAttr` at all, which is the correct final answer for every
+  // adapter and the client runtime alike, not a hint they still have to
+  // gate. See `IRElement.keyAttr` / `applyLoopKeyAttr`'s docstrings.
+  if (key !== null) {
+    const resolvedKeyAttrName = keyAttrName(depth)
+    if (bodyIsItemConditional) {
+      applyLoopKeyAttr(itemConditional!, resolvedKeyAttrName, key)
+    } else if (children.length > 0) {
+      applyLoopKeyAttr(children[0], resolvedKeyAttrName, key)
+    }
+  }
+
   // Stage 3 / D5 (spec/callback-fidelity.md) — the keyFn is hoisted: `mapArray`
   // computes it from the raw item BEFORE the callback body runs, so the key must
   // be derivable from the item (and index), never from a value the preamble
@@ -5705,6 +5867,7 @@ function computePreambleReactiveNames(
 function preambleFromValueStatements(
   statements: readonly ts.Statement[],
   ctx: TransformContext,
+  bodyStatements: readonly ts.Statement[],
 ): MapCallbackPreamble {
   const segments: PreambleSegment[] = []
   const typedParts: string[] = []
@@ -5726,7 +5889,7 @@ function preambleFromValueStatements(
     declaredNames: [...declared],
     // Value-only preambles accumulate no JSX, so no child needs the array join.
     builderNames: [],
-    declarations: neutralPreambleDeclarations(statements, ctx) ?? undefined,
+    declarations: neutralPreambleDeclarations(statements, ctx, bodyStatements) ?? undefined,
     reactiveNames: reactiveNames.size > 0 ? [...reactiveNames] : undefined,
   }
 }
@@ -5743,6 +5906,7 @@ function preambleFromValueStatements(
 function neutralPreambleDeclarations(
   statements: readonly ts.Statement[],
   ctx: TransformContext,
+  bodyStatements: readonly ts.Statement[],
 ): PreambleValueDeclaration[] | null {
   const out: PreambleValueDeclaration[] = []
   for (const stmt of statements) {
@@ -5754,6 +5918,20 @@ function neutralPreambleDeclarations(
       // no adapter has a single per-row local form for that.
       if (!ts.isIdentifier(decl.name)) return null
       if (!decl.initializer) return null
+      // #2797: a function-valued local (an event handler hoisted out of the
+      // JSX attribute position, e.g. `const handleClick = () => {...}`) has
+      // no template-expression form on any backend — no DSL here has a
+      // callable value. But every adapter's own SSR component-prop builder
+      // already skips an event-handler prop (`isEventHandlerAttrName`)
+      // outright, so a name read ONLY that way needs no SSR representation
+      // at all — elide the declaration instead of refusing the whole
+      // preamble. The client-JS preamble (`segments`, not `declarations`)
+      // still carries the real closure; this only concerns what the DSL
+      // SSR template sees.
+      if (isFunctionLiteral(decl.initializer)) {
+        if (everyReadIsEventHandlerPropValue(decl.name.text, bodyStatements)) continue
+        return null
+      }
       const valueParsed = tsNodeToParsedExpr(decl.initializer)
       // The same subset gate every other DSL-lowered expression passes
       // through. An adapter that additionally cannot emit a supported shape
@@ -5768,7 +5946,74 @@ function neutralPreambleDeclarations(
       })
     }
   }
-  return out.length > 0 ? out : null
+  // Not `out.length > 0 ? out : null` — an all-elided preamble legitimately
+  // has zero declarations to emit (see MapCallbackPreamble.declarations'
+  // docstring); `[]` is what tells the Phase-1 gate "fully declared."
+  return out
+}
+
+/** `const x = () => {...}` / `const x = function () {...}` — a callable value, never a template-expression shape. */
+function isFunctionLiteral(node: ts.Expression): boolean {
+  return ts.isArrowFunction(node) || ts.isFunctionExpression(node)
+}
+
+/**
+ * Whether every read of `name` in `bodyStatements`, other than its own
+ * binding site, sits inside an event-handler `JsxAttribute`'s
+ * (`onClick`/`onInput`/...) value — i.e. `name={<ident>}` where the
+ * attribute's own name passes {@link isEventHandlerAttrName}, the exact
+ * predicate every DSL adapter's own SSR prop-builder already uses to skip an
+ * event-handler prop (e.g. `packages/adapter-jinja/src/adapter/
+ * jinja-adapter.ts`'s `renderComponent`, `packages/adapter-go-template/...`'s
+ * `prop.isEventHandler` check).
+ *
+ * Walks the raw preamble+return syntax rather than the already-built row IR
+ * (`children`) deliberately: `neutralPreambleDeclarations` runs on the
+ * PREAMBLE statements specifically, and the IR built from the return
+ * expression doesn't retain a per-occurrence link back to which SOURCE
+ * identifier fed a given `IREvent`/`IRProp` — re-deriving from syntax here
+ * keeps the safety check self-contained rather than threading that link
+ * through the IR builder for one caller.
+ *
+ * Conservative: a property-access name (`x.name`), a nested declaration's own
+ * binding, or any other read shape (a text/attr expression, a NON-event
+ * child prop, a call) fails this and falls through to the ordinary refusal —
+ * this only widens the shapes that are SAFE to elide, never narrows what was
+ * already accepted. Uses `ts.forEachChild`'s own short-circuit (a truthy
+ * return stops the walk) rather than a separate mutable flag.
+ */
+function everyReadIsEventHandlerPropValue(name: string, bodyStatements: readonly ts.Statement[]): boolean {
+  const findDisallowedRead = (node: ts.Node): true | undefined => {
+    if (ts.isIdentifier(node) && node.text === name) {
+      const isBindingName = ts.isVariableDeclaration(node.parent) && node.parent.name === node
+      const isPropertyName = ts.isPropertyAccessExpression(node.parent) && node.parent.name === node
+      if (!isBindingName && !isPropertyName) {
+        const jsxExpr = node.parent
+        const attr = jsxExpr.parent
+        const isEventHandlerAttrValue =
+          ts.isJsxExpression(jsxExpr) &&
+          ts.isJsxAttribute(attr) &&
+          attr.initializer === jsxExpr &&
+          ts.isIdentifier(attr.name) &&
+          isEventHandlerAttrName(attr.name.text)
+        if (!isEventHandlerAttrValue) return true
+      }
+    }
+    return ts.forEachChild(node, findDisallowedRead)
+  }
+  return !bodyStatements.some(findDisallowedRead)
+}
+
+/**
+ * Whether a JSX attribute name is an event handler (`onClick`, `onInput`,
+ * ...) rather than a plain attribute/prop. Shared by every site in this file
+ * that needs the same call: native-element attribute extraction (routes into
+ * `IREvent`, never rendered HTML), the preamble-verbatim-leaf wiring guard,
+ * and {@link everyReadIsEventHandlerPropValue}'s elision safety check — one
+ * decision, one implementation, per CLAUDE.md.
+ */
+function isEventHandlerAttrName(name: string): boolean {
+  return /^on[A-Z]/.test(name)
 }
 
 /** Drop the trailing separator space from the final js segment. */
@@ -6122,7 +6367,7 @@ function processAttributes(
     // they're wired up at hydration time (delegated event registration) and
     // must not leak into rendered HTML. The DOM event name is lowercase
     // (`click`, not `Click`), so strip the `on` prefix and downcase.
-    if (/^on[A-Z]/.test(rawName)) {
+    if (isEventHandlerAttrName(rawName)) {
       if (attr.initializer && ts.isJsxExpression(attr.initializer) && attr.initializer.expression) {
         const eventName = rawName.slice(2).toLowerCase()
         reportJsxBranchLocalInCallback(attr.initializer.expression, ctx)
@@ -6244,8 +6489,20 @@ function getAttributeValue(attr: ts.JsxAttribute, ctx: TransformContext): AttrVa
       return AttrValueOf.expression('undefined')
     }
 
-    // Check for bare signal/memo identifier (BF044)
-    checkBareSignalOrMemoIdentifier(expr, ctx)
+    // Check for bare signal/memo identifier (BF044). `getAttributeValue`
+    // serves BOTH a DOM element's attributes and a component's props
+    // (two call sites above, in `processElementAttributes` and
+    // `processComponentProps`), and only the element-attribute case is
+    // a RENDERED position — a component prop is an opaque value handed
+    // to the component, and this codebase's Context-Provider idiom
+    // depends on that value being an uncalled accessor (`value={{
+    // open }}`, ui/components/ui/select/index.tsx — calling it eagerly
+    // there would freeze the value at provider-render time and break
+    // every consumer's reactivity). So nested descent is gated on
+    // element-vs-component, derived from the tag this attribute lives
+    // on; the top-level bare-identifier check stays unconditional
+    // either way, unchanged from this diagnostic's original behaviour.
+    checkBareSignalOrMemoIdentifier(expr, ctx, { descendNested: isRenderedElementAttribute(attr, ctx) })
 
     // Static style object: style={{ key: 'value', ... }} → CSS string at compile time
     if (attr.name.getText(ctx.sourceFile) === 'style' && ts.isObjectLiteralExpression(expr)) {
@@ -7300,53 +7557,287 @@ function processComponentProps(
 // =============================================================================
 
 /**
- * Check if a bare identifier is a signal getter or memo name.
- * Emits BF044 error when a signal/memo getter is passed without calling it.
+ * Is `attr` an attribute on a DOM/SVG element's opening tag, as opposed
+ * to a prop on a component? `JsxAttributes.parent` is always the
+ * `JsxOpeningElement`/`JsxSelfClosingElement` the attribute list belongs
+ * to (`JsxOpeningLikeElement`); its `tagName` follows the same
+ * uppercase-means-component convention `transformSelfClosingElement`
+ * already uses (`isComponent = /^[A-Z]/.test(tagName)`) — lowercase or
+ * hyphenated (a custom element) is a real DOM node, capitalised or
+ * dotted (`Select.Provider`) is a component.
+ *
+ * Feeds `checkBareSignalOrMemoIdentifier`'s `descendNested` gate: a
+ * DOM attribute value is a RENDERED position (this is genuinely what
+ * ends up in the DOM), so a bare getter buried inside it — `style={{
+ * color: val }}` — is exactly as much a forgotten `()` as a top-level
+ * one. A component prop is not rendered — it's an opaque value handed
+ * to the component — and this codebase's Context-Provider idiom
+ * depends on that value being an UNCALLED accessor
+ * (`ui/components/ui/select/index.tsx`'s `value={{ open, ... }}`), so
+ * nested descent must not fire there.
+ */
+function isRenderedElementAttribute(attr: ts.JsxAttribute, ctx: TransformContext): boolean {
+  const tagName = attr.parent.parent.tagName.getText(ctx.sourceFile)
+  return !/^[A-Z]/.test(tagName)
+}
+
+/**
+ * Check for a bare signal/memo getter reference in `expr`.
+ * Emits BF044 when a signal/memo getter is passed without calling it.
  * e.g., value={count} instead of value={count()}
+ *
+ * The top-level check — is `expr` itself a bare reactive identifier —
+ * always runs, unchanged from this diagnostic's original behaviour
+ * (`value={count}`, `<Foo x={count} />` keep firing regardless of
+ * position). `descendNested` additionally opts into walking INSIDE a
+ * composite expression — call arguments, template-literal spans,
+ * ternary branches (condition + both arms), array/object literal
+ * members, binary/logical operands, parenthesized wrappers — to catch
+ * a bare reference buried anywhere in that reachable set (#2755,
+ * #2751: this is the single upstream gate whose shallow top-level-only
+ * check let both downstream bugs through). Callers opt in only for
+ * RENDERED positions (a JSX text child; a DOM element's attribute value
+ * via `isRenderedElementAttribute`) — never for a component prop, where
+ * a bare getter is this codebase's deliberate Context-Provider idiom
+ * (measured: 66 such uses across `ui/components/**`/`site/**`, all
+ * legitimate, none a forgotten `()` — widening the gate to fire there
+ * would be a correctness regression, not a fix).
+ *
+ * Two structural exclusions apply whenever descending, both required
+ * so the walk doesn't false-positive on shapes that read the name
+ * without evaluating its signal value:
+ *   - the callee of a zero-arg call (`val()`) is the CORRECT form and
+ *     is never visited as a bare reference — only the call's arguments
+ *     (there are none) would be descended into.
+ *   - a property-access chain's object is visited but its property
+ *     NAME never is, so `ctx.val` never fires when a signal `val`
+ *     exists — the exact bug class documented in this file's
+ *     `csr-substitute.ts` sibling walker, #1100.
+ * JSX embedded inside the checked expression (a `.map()`/`.filter()`
+ * callback returning JSX is the common shape) is NOT this walk's
+ * territory either: `transformNode` independently descends into that
+ * element's own attributes and children, each re-entering this same
+ * check on its own real value expression. Descending into it here
+ * would be actively wrong, not just redundant — a JSX element's `name`
+ * nodes (an attribute's NAME, a tag name) are plain `ts.Identifier`s
+ * with no marker distinguishing them from a value read, so without
+ * this guard an attribute like `checked={x}` gets its own NAME flagged
+ * whenever a same-named signal is in scope (measured directly against
+ * `checkbox-demo.tsx` while building this walk).
+ * A nested function/arrow body that rebinds the name shadows it for
+ * everything under that body — modeled with a local bound-name stack,
+ * same shape as `csrSubstituteOnce`'s `boundStack`
+ * (`ir-to-client-js/csr-substitute.ts`), which solves this exact
+ * member-access/shadowing pair of problems for the CSR-substitution
+ * walk. Deliberately NOT threaded through the shared `BindingScope`
+ * service (`scope/binding-scope.ts`) — that scope answers "what does
+ * the surrounding loop/callback bind"; this walk only needs shadowing
+ * introduced by nested function literals inside the single expression
+ * being checked, the same reasoning `csrSubstituteOnce` already
+ * documents for its own local `boundStack`.
  */
 function checkBareSignalOrMemoIdentifier(
   expr: ts.Expression,
-  ctx: TransformContext
+  ctx: TransformContext,
+  options?: { descendNested?: boolean }
 ): void {
-  if (!ts.isIdentifier(expr)) return
-
-  const name = expr.text
+  const reactiveNames = new Map<string, 'signal' | 'memo'>()
+  for (const signal of ctx.analyzer.signals) reactiveNames.set(signal.getter, 'signal')
+  for (const memo of ctx.analyzer.memos) reactiveNames.set(memo.name, 'memo')
+  if (reactiveNames.size === 0) return
 
-  for (const signal of ctx.analyzer.signals) {
-    if (signal.getter === name) {
-      ctx.analyzer.errors.push(
-        createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
-          getSourceLocation(expr, ctx.sourceFile, ctx.filePath),
-          {
-            message: `Signal getter '${name}' passed without calling it`,
-            suggestion: {
-              message: `Signal getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
-              replacement: `${name}()`,
-            },
-          }
-        )
+  const report = (id: ts.Identifier, name: string, kind: 'signal' | 'memo'): void => {
+    const label = kind === 'signal' ? 'Signal' : 'Memo'
+    ctx.analyzer.errors.push(
+      createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
+        getSourceLocation(id, ctx.sourceFile, ctx.filePath),
+        {
+          message: `${label} getter '${name}' passed without calling it`,
+          suggestion: {
+            message: `${label} getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
+            replacement: `${name}()`,
+          },
+        }
       )
+    )
+  }
+
+  // Top-level check — unchanged from this diagnostic's original
+  // position-gating (fires unconditionally, everywhere), but NOW also
+  // respects the ambient loop/callback `BindingScope` a shadowed name
+  // needs — a pre-existing gap (the original single-line
+  // `if (!ts.isIdentifier(expr)) return` never consulted scope either)
+  // that stayed invisible only because a bare top-level identifier
+  // shadowed by a `.map(name => ...)` row param never happened to be
+  // exercised by any prior test. `ctx.scope` is the LIVE scope at this
+  // JSX node — already entered for the current loop row/callback frame
+  // by the time an attribute/child expression under it is checked
+  // (`enterLoopRow`/`enterCallback`, `scope/binding-scope.ts`) — so
+  // `isBound` here is a shadow-guard read in exactly the sense
+  // `spec/compiler.md`'s `BindingScope` section describes: is a signal
+  // getter of this name shadowed HERE, not "does this expression need
+  // its own reactive slot".
+  if (ts.isIdentifier(expr)) {
+    const kind = reactiveNames.get(expr.text)
+    if (kind && !ctx.scope.isBound(expr.text)) report(expr, expr.text, kind)
+    return
+  }
+
+  if (!options?.descendNested) return
+
+  const boundStack: Array<Set<string>> = []
+  const isBound = (name: string): boolean => {
+    for (let i = boundStack.length - 1; i >= 0; i--) {
+      if (boundStack[i].has(name)) return true
+    }
+    return ctx.scope.isBound(name)
+  }
+
+  /**
+   * Visit the default VALUES in a binding pattern (`const { x = count } = obj`,
+   * `(f = count) => …`), binding each name into `bound` as it is introduced.
+   *
+   * `collectBindingNames` deliberately walks only NAMES — a binding name is
+   * not a reference — but a default value is an ordinary expression, so a bare
+   * getter can hide there. Not hypothetical: measured, such a shape emits a
+   * module-scope `template` thunk that references a component-scope binding
+   * and throws `ReferenceError` on CSR mount, which is #2751's mechanism —
+   * the class this check exists to close.
+   *
+   * Binds as it goes because JS binds left to right WITHIN a pattern too:
+   * `({ a, b = a })` reads the already-initialized `a`, so `b`'s default must
+   * be checked against a scope that already contains `a`. Visiting every
+   * default first and binding afterwards would flag `a` as a bare signal read
+   * whenever a pattern name happens to collide with a real signal — a false
+   * positive, which is the direction that breaks working code.
+   */
+  const visitBindingDefaults = (name: ts.BindingName, bound: Set<string>): void => {
+    if (ts.isIdentifier(name)) {
+      bound.add(name.text)
       return
     }
+    for (const el of name.elements) {
+      if (ts.isOmittedExpression(el)) continue
+      if (el.initializer) visit(el.initializer)
+      visitBindingDefaults(el.name, bound)
+    }
   }
 
-  for (const memo of ctx.analyzer.memos) {
-    if (memo.name === name) {
-      ctx.analyzer.errors.push(
-        createError(ErrorCodes.SIGNAL_GETTER_NOT_CALLED,
-          getSourceLocation(expr, ctx.sourceFile, ctx.filePath),
-          {
-            message: `Memo getter '${name}' passed without calling it`,
-            suggestion: {
-              message: `Memo getters must be called to read the value. Use \`${name}()\` instead of \`${name}\`.`,
-              replacement: `${name}()`,
-            },
-          }
-        )
-      )
+  const collectBindingNames = (name: ts.BindingName, out: Set<string>): void => {
+    if (ts.isIdentifier(name)) out.add(name.text)
+    else if (ts.isObjectBindingPattern(name)) {
+      for (const el of name.elements) collectBindingNames(el.name, out)
+    } else if (ts.isArrayBindingPattern(name)) {
+      for (const el of name.elements) {
+        if (!ts.isOmittedExpression(el)) collectBindingNames(el.name, out)
+      }
+    }
+  }
+
+  const collectBlockDeclarations = (block: ts.Block, out: Set<string>): void => {
+    for (const stmt of block.statements) {
+      if (ts.isVariableStatement(stmt)) {
+        for (const decl of stmt.declarationList.declarations) collectBindingNames(decl.name, out)
+      } else if (ts.isFunctionDeclaration(stmt) && stmt.name) {
+        out.add(stmt.name.text)
+      }
+    }
+  }
+
+  function visit(node: ts.Node): void {
+    // JSX embedded inside the checked expression — see docstring.
+    if (
+      ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)
+    ) {
       return
     }
+
+    // Type positions are not value positions. `({} as { count?: unknown })`
+    // in a rendered position would otherwise read the type literal's property
+    // name `count` as a bare reference to a signal of the same name and refuse
+    // valid code — a false positive, the direction that breaks working code.
+    // Covers every type node reachable from an expression: `as`/`satisfies`
+    // types, type assertions, and generic type arguments.
+    if (ts.isTypeNode(node)) return
+
+    // Zero-arg call with bare-identifier callee (`val()`): the correct
+    // form. The callee is never visited as a bare reference; there are
+    // no arguments to descend into either.
+    if (ts.isCallExpression(node) && node.arguments.length === 0 && ts.isIdentifier(node.expression)) {
+      return
+    }
+
+    // Property access: `obj.prop` — visit `obj` (a real reference),
+    // never `prop` (a member-access tail, not a value read). #1100.
+    if (ts.isPropertyAccessExpression(node)) {
+      visit(node.expression)
+      return
+    }
+
+    // Object literal key: `{ X: value }` — `X` is a key, not a read.
+    if (ts.isPropertyAssignment(node)) {
+      if (ts.isComputedPropertyName(node.name)) visit(node.name.expression)
+      visit(node.initializer)
+      return
+    }
+
+    // Shorthand property: `{ X }` — `X` is both key and value, so the
+    // value side IS a bare reference.
+    if (ts.isShorthandPropertyAssignment(node)) {
+      if (ts.isIdentifier(node.name) && !isBound(node.name.text)) {
+        const kind = reactiveNames.get(node.name.text)
+        if (kind) report(node.name, node.name.text, kind)
+      }
+      return
+    }
+
+    // Nested function/arrow: bind params + block-scoped locals declared
+    // in its body, recurse, unbind. A name shadowed here is a different
+    // binding, not the signal/memo of the same name.
+    if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
+      const bound = new Set<string>()
+      // Parameters bind LEFT TO RIGHT, and each default is evaluated against
+      // the scope as it stands at that point: `(a, b = a) => …` reads the
+      // already-bound parameter `a`, never an outer binding of the same name
+      // (verified against V8). So `bound` is pushed FIRST and grows as the
+      // loop walks — each default sees only the parameters before it.
+      boundStack.push(bound)
+      for (const p of node.parameters) {
+        if (p.initializer) visit(p.initializer)
+        visitBindingDefaults(p.name, bound)
+      }
+      if (node.body && ts.isBlock(node.body)) collectBlockDeclarations(node.body, bound)
+      if (node.body) visit(node.body)
+      boundStack.pop()
+      return
+    }
+
+    // Variable declaration: the binding name itself isn't a reference;
+    // only its initializer can be.
+    if (ts.isVariableDeclaration(node)) {
+      if (node.initializer) visit(node.initializer)
+      // The names this declaration introduces shadow outer ones for any LATER
+      // default in the same pattern (`const { a, b = a } = obj`), so they bind
+      // into a scope of their own rather than leaking into the enclosing one.
+      const declared = new Set<string>()
+      boundStack.push(declared)
+      visitBindingDefaults(node.name, declared)
+      boundStack.pop()
+      return
+    }
+
+    // Bare identifier reference — the case this check exists for.
+    if (ts.isIdentifier(node)) {
+      if (isBound(node.text)) return
+      const kind = reactiveNames.get(node.text)
+      if (kind) report(node, node.text, kind)
+      return
+    }
+
+    ts.forEachChild(node, visit)
   }
+
+  visit(expr)
 }
 
 /**
@@ -7532,6 +8023,49 @@ function isPropsReference(expr: string, ctx: TransformContext, visited?: Set<str
   return false
 }
 
+/**
+ * Does this element carry a `{...spread}` that forwards the caller's
+ * leftover props (the destructured `...rest` binding or a whole `(props)`
+ * parameter, through any alias hop)?
+ *
+ * Such a spread is the one attribute source whose keys are unknowable at
+ * compile time, so neither template can carry it: the SSR adapters render
+ * it through their own spread helper against real request data, and the
+ * client's registration template drops it entirely, leaving the runtime's
+ * `applyRestAttrs` as the only thing that can apply it after a pure CSR
+ * mount. `applyRestAttrs` addresses its element by slot id, so an element
+ * whose only dynamic attribute source is this spread still needs one —
+ * otherwise `init` has no patch point, and every caller-supplied attribute
+ * is silently absent under `createComponent` while SSR and hydration look
+ * correct (#2754).
+ *
+ * Deliberately narrower than "has any spread": a spread of an ordinary
+ * object (`{...extra}`) IS statically emitted into both templates, needs
+ * no runtime application, and must not start allocating slot ids.
+ */
+function forwardsCallerRestProps(attrs: IRAttribute[], ctx: TransformContext): boolean {
+  for (const attr of attrs) {
+    if (attr.value.kind !== 'spread') continue
+    const constants = restSpreadConstantValues(ctx)
+    for (const name of new Set([attr.value.expr, attr.value.templateExpr])) {
+      if (!name) continue
+      if (resolveRestSpreadOriginCore(ctx.analyzer, constants, name) !== null) return true
+    }
+  }
+  return false
+}
+
+/** `ctx.analyzer.localConstants` indexed by name, memoized per component walk. */
+function restSpreadConstantValues(ctx: TransformContext): ReadonlyMap<string, string | undefined> {
+  if (ctx._restSpreadConstantValues) return ctx._restSpreadConstantValues
+  const byName = new Map<string, string | undefined>()
+  for (const constant of ctx.analyzer.localConstants) {
+    if (!byName.has(constant.name)) byName.set(constant.name, constant.value)
+  }
+  ctx._restSpreadConstantValues = byName
+  return byName
+}
+
 /**
  * Check if any attributes in the list are reactive (depend on signals/memos).
  * Reactive attributes need a slotId so the client JS can update them.