@barefootjs/jsx 0.26.3 → 0.27.0

package/src/__tests__/map-body-no-silent-divergence.test.ts

@@ -258,6 +258,51 @@ function T({ groups }: { groups: { id: string; items: { id: string; tags: string
     })}</ul>
   ))}</div>
 }
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body',
+    // The unbraced twin of flatmap-block-body: `t => t.tags.map(...)` with no
+    // block. Pre-fix this fell through every dispatch arm to the IRExpression
+    // scalar path and spliced the raw callback — JSX included — verbatim into
+    // the client bundle (a silent SyntaxError caught only by parseErrors).
+    dslTier: true,
+    source: `
+function T({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body-parenthesized',
+    source: `
+function T({ items }: { items: { id: string; tags: string[] }[] }) {
+  return <ul>{items.flatMap((it) => (it.tags.map((t) => <li key={t}>{t}</li>)))}</ul>
+}
+export { T }`,
+  },
+  {
+    id: 'flatmap-expression-body-signal-array',
+    source: `
+'use client'
+import { createSignal } from '@barefootjs/client'
+function T() {
+  const [items] = createSignal([{ id: '1', tags: ['a'] }])
+  return <ul>{items().flatMap((it) => it.tags.map((t) => <li key={t}>{t}</li>))}</ul>
+}
+export { T }`,
+  },
+  {
+    id: 'map-jsx-inside-unrecognized-call',
+    // An inline JSX literal in a body shape no dispatch arm recognizes (a call
+    // wrapping JSX). The structural net refuses loudly instead of letting the
+    // scalar fallback splice the raw JSX into the bundle.
+    dslTier: true,
+    source: `
+declare function wrap(x: unknown): unknown
+function T({ items }: { items: { id: string }[] }) {
+  return <ul>{items.map((it) => wrap(<li key={it.id}>{it.id}</li>))}</ul>
+}
 export { T }`,
   },
   {

package/src/__tests__/module-level-signal.audit.test.ts

@@ -234,8 +234,13 @@ export function Counter() {
     const ssr = files['Counter.tsx']
     // SSR template should NOT declare count as a getter
     expect(ssr).not.toContain('const count = () =>')
-    // SSR template should have a client-only placeholder (not the value)
-    expect(ssr).toContain('client:s')
+    // Slot unification Step B: `{count()}` is the SPAN's only, non-adjacent
+    // child, so `client-only-elision.ts` elides its marker pair entirely —
+    // no `bfText`/`bfTextEnd` call reaches the SSR output at all. The
+    // client's claim plan (`Counter.client.js`) creates the missing Text
+    // node from `elidedPath` alone; see `claim-slots.test.ts`'s
+    // "markerless text kind" describe block for the runtime contract.
+    expect(ssr).not.toContain('bfText(')
   })
 
   test('full compile: exported signal uses `export const` in client JS', () => {

package/src/__tests__/nested-loop-conditional.test.ts

@@ -134,13 +134,14 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     expect(mapArrayCount).toBeGreaterThanOrEqual(3)
   })
 
-  test('reactive text inside conditional inside inner loop uses re-query pattern (#840)', () => {
+  test('reactive text inside conditional inside inner loop uses re-claim pattern (#840)', () => {
     // When a reactive text is inside a conditional branch inside a nested (inner) loop,
     // insert() may replace the SSR element after the text node is captured.
-    // The generated code must use the re-query pattern:
-    //   createEffect(() => { const [__rt] = $t(...) ... })
-    // NOT the capture-then-effect pattern:
-    //   { const [__rt] = $t(...); if (__rt) createEffect(() => ...) }
+    // Slot unification A3: the generated code must re-claim on EVERY run via
+    // a fresh `claimSlots(...).write(...)` call inside the effect body — not
+    // a `lazySlots` writer built once outside it, which would go stale once
+    // insert() swaps the branch's DOM (see `stringifyInnerLoops`' docstring
+    // in `ir-to-client-js/control-flow/stringify/inner-loop.ts`).
     const source = `
       'use client'
       import { createSignal } from '@barefootjs/client'
@@ -175,8 +176,9 @@ describe('nested loops/conditionals inside mapArray (#830, #839)', () => {
     expect(clientJs).toBeDefined()
     const content = clientJs!.content
 
-    // Re-query pattern: $t() inside createEffect so it always finds the live node
-    expect(content).toContain('createEffect(() => { const [__rt] = $t(')
+    // Re-claim pattern: a fresh `claimSlots(...)` call inside createEffect so
+    // it always resolves against the live node, never a cached stale ref.
+    expect(content).toMatch(/createEffect\(\(\) => \{ claimSlots\(__innerEl\w*, \[\{ id: 's\d+', kind: 'text', path: \[\] \}\]\)\.write\('s\d+', String\(/)
   })
 
   test('event handler inside conditional branch of loop item appears in bindEvents (#839)', () => {

package/src/__tests__/nested-loop-reactive-attrs.test.ts

@@ -339,7 +339,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // The innermost loop's per-item renderItem must emit BOTH a
     // reactive-text effect for `panel.text` and a reactive-attr effect
     // for `panel.cls` — the bug dropped only the former.
-    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?\.textContent = String\(panel\(\)\.text\)/)
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?__bfw_\w+\('s\d+', String\(panel\(\)\.text\)\)/)
     expect(content).toContain("setAttribute('class'")
   })
 
@@ -395,7 +395,7 @@ describe('reactive attributes inside a nested .map() body (#135)', () => {
     // textContent write — `labelAt(` also appears in the static template
     // clone, so asserting it independently would pass even with the
     // effect missing (the exact regression here).
-    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?\.textContent = String\(labelAt\(pi\)\)/)
+    expect(content).toMatch(/createEffect\(\(\) => \{[\s\S]*?__bfw_\w+\('s\d+', String\(labelAt\(pi\)\)\)/)
     expect(content).toContain("setAttribute('class'")
   })
 })

package/src/__tests__/preamble-region-patch.test.ts

@@ -0,0 +1,156 @@
+/**
+ * #2389 patch-on-update: a keyed `.map()` row body whose preamble builds
+ * content from item state (`const stateLabel = t.done ? ... ; const cells
+ * = []; cells.push(<td>{stateLabel}</td>)`) goes STALE on a same-key item
+ * update — `mapArray` reuses the row via per-item `setItem`, re-running
+ * only the row's wired text/attr slots. `{cells}` had no slot wiring at
+ * all, so it froze at its mount-time content forever while the sibling
+ * `{t.name}` text slot updated normally.
+ *
+ * The fix: a loop-body expression child whose free identifiers intersect
+ * the preamble's `declaredNames` is classified as a preamble-patched
+ * region — slot-marked like an ordinary reactive text (so SSR/CSR row
+ * templates render `<!--bf:sN-->...<!--/-->` / `{bfText("sN")}` the same
+ * door a reactive text uses), but wired on the client via a claimed
+ * 'markup' slot writer (`@barefootjs/client/runtime/claim-slots.ts`) rather
+ * than a `reactiveTexts` `.textContent` assignment (which would corrupt the
+ * array-joined markup). Dedup — skip the DOM write when the new value
+ * matches the writer's own held `last` value — lives inside that writer;
+ * every write, including the first, applies unless deduped (see
+ * `claim-slots.ts`'s module docstring).
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+import { HonoAdapter } from '../../../adapter-hono/src/index.ts'
+
+const ROW_SOURCE = `
+  'use client'
+  import { createSignal } from '@barefootjs/client'
+  export function Todos() {
+    const [todos, setTodos] = createSignal([
+      { id: 1, name: 'a', done: false },
+      { id: 2, name: 'b', done: false },
+    ])
+    const toggle = (id: number) =>
+      setTodos(todos().map(t => t.id === id ? { ...t, done: !t.done } : t))
+    return (
+      <table><tbody>
+        {todos().map((t) => {
+          const stateLabel = t.done ? 'done & dusted' : 'open'
+          const cells = []
+          cells.push(<td className="state">{stateLabel}</td>)
+          return (
+            <tr key={t.id}>
+              {cells}
+              <td>{t.name}</td>
+              <td><button onClick={() => toggle(t.id)}>toggle</button></td>
+            </tr>
+          )
+        })}
+      </tbody></table>
+    )
+  }
+`
+
+function compileWith(adapter: TestAdapter | HonoAdapter, source: string = ROW_SOURCE) {
+  const result = compileJSX(source, 'Todos.tsx', { adapter })
+  expect(result.errors.filter((e) => e.severity === 'error')).toHaveLength(0)
+  const clientJs = result.files.find((f) => f.type === 'clientJs')
+  const marked = result.files.find((f) => f.type === 'markedTemplate' || f.type === 'ssr')
+  expect(clientJs).toBeDefined()
+  return { clientJs: clientJs!.content, marked: marked?.content, result }
+}
+
+describe('preamble-region-patch (#2389)', () => {
+  test('(a) row template + SSR marked template both carry the region slot marker', () => {
+    const { clientJs } = compileWith(new TestAdapter())
+    // Row template (the `__tpl.innerHTML = ...` string literal inside
+    // renderItem): the region renders as a paired comment marker around the
+    // array-joined value, exactly like a reactive text slot.
+    expect(clientJs).toMatch(/<!--bf:s\d+-->\$\{Array\.isArray\(cells\) \? cells\.join\(''\) : \(cells \?\? ''\)\}<!--\/-->/)
+
+    const hono = compileWith(new HonoAdapter())
+    expect(hono.clientJs).toContain("kind: 'markup'")
+    expect(hono.clientJs).toContain('lazySlots(__el')
+    // Hono SSR renders the SAME slotId through `renderExpression`'s generic
+    // `{bfText("id")}...{bfTextEnd()}` door — no bespoke region handling.
+    const slotMatch = /<!--bf:(s\d+)-->\$\{Array\.isArray\(cells\)/.exec(hono.clientJs)
+    expect(slotMatch).not.toBeNull()
+    const slotId = slotMatch![1]
+    expect(hono.marked).toContain(`{bfText("${slotId}")}`)
+    expect(hono.marked).toContain('{cells}')
+    expect(hono.marked).toContain('{bfTextEnd()}')
+  })
+
+  test('(b) renderItem emits the region-patch effect, re-running the preamble in accessor form', () => {
+    const { clientJs } = compileWith(new TestAdapter())
+    expect(clientJs).toContain("kind: 'markup'")
+    // The preamble re-runs inside the effect with the loop-param accessor
+    // wrap (`t().done`), not the plain (`t.done`) form used at the
+    // top-level construction line.
+    expect(clientJs).toMatch(/createEffect\(\(\) => \{\s*const stateLabel = t\(\)\.done/)
+    // The write goes through the claimed 'markup' writer — dedup (skip an
+    // unchanged string, on every write including the first) now lives
+    // inside `writeMarkup` itself (`claim-slots.ts`), not a per-region
+    // `__last` local next to the write call.
+    expect(clientJs).toMatch(/__bfw_\w+\('s\d+', Array\.isArray\(cells\)/)
+  })
+
+  test('(c) a loop without a preamble gets no region', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Plain() {
+        const [items, setItems] = createSignal([{ id: 1, name: 'a' }])
+        return <ul>{items().map(t => <li key={t.id}>{t.name}</li>)}</ul>
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain("kind: 'markup'")
+  })
+
+  test('(c) a static-array loop with a preamble gets no region', () => {
+    const source = `
+      import { createSignal } from '@barefootjs/client'
+      const items = [{ id: 1, done: false }, { id: 2, done: true }]
+      export function StaticRows() {
+        return (
+          <table><tbody>
+            {items.map((t) => {
+              const stateLabel = t.done ? 'done' : 'open'
+              const cells = []
+              cells.push(<td>{stateLabel}</td>)
+              return <tr key={t.id}>{cells}<td>{t.id}</td></tr>
+            })}
+          </tbody></table>
+        )
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain("kind: 'markup'")
+  })
+
+  test('(d) a preamble local never referenced by an expression child gets no region', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function Unread() {
+        const [todos, setTodos] = createSignal([{ id: 1, name: 'a', done: false }])
+        return (
+          <ul>
+            {todos().map((t) => {
+              // Declared but never read as a bare expression child anywhere
+              // in the returned JSX — nothing qualifies for a region.
+              const stateLabel = t.done ? 'done' : 'open'
+              return <li key={t.id}>{t.name}</li>
+            })}
+          </ul>
+        )
+      }
+    `
+    const { clientJs } = compileWith(new TestAdapter(), source)
+    expect(clientJs).not.toContain("kind: 'markup'")
+  })
+})

package/src/__tests__/profile-cond-binding-ids.test.ts

@@ -60,8 +60,9 @@ describe('conditional binding-effect ids (#1795 Phase 1)', () => {
     const on = clientJs(true)
     // Branch reactive attribute effect (createDisposableEffect with the class write).
     expect(on).toMatch(/setAttribute\('class'[\s\S]*?}, "Disclosure#binding:s\d+"\)\)/)
-    // Branch reactive text effect (__bfText path).
-    expect(on).toMatch(/__bfText\([\s\S]*?}, "Disclosure#binding:s\d+"\)\)/)
+    // Branch reactive text effect (claimed 'markup' slot writer, slot
+    // unification A3).
+    expect(on).toMatch(/__bfw_\w+\([\s\S]*?}, "Disclosure#binding:s\d+"\)\)/)
   })
 
   test('buildIdIndex resolves conditional / attribute / text binding ids to source loc', () => {

package/src/__tests__/profile-loop-binding-ids.test.ts

@@ -50,9 +50,10 @@ describe('loop-child binding-effect ids (#1795 Phase 2)', () => {
 
   test('profile on: loop-child text effects carry #binding ids', () => {
     const on = clientJs(true)
-    // Both `{it.t}` and `{it.n}` text effects.
-    expect(on).toMatch(/__rt_s\d+\.textContent = String\(it\(\)\.t\) }, "List#binding:s\d+"\)/)
-    expect(on).toMatch(/__rt_s\d+\.textContent = String\(it\(\)\.n\) }, "List#binding:s\d+"\)/)
+    // Both `{it.t}` and `{it.n}` text effects write through the row's
+    // claimed 'text' slot writer (slot unification A3).
+    expect(on).toMatch(/__bfw_\w+\('s\d+', String\(it\(\)\.t\)\) }, "List#binding:s\d+"\)/)
+    expect(on).toMatch(/__bfw_\w+\('s\d+', String\(it\(\)\.n\)\) }, "List#binding:s\d+"\)/)
   })
 
   test('profile on: the loop-child attribute effect carries a #binding id', () => {

package/src/__tests__/profile-nested-binding-ids.test.ts

@@ -112,12 +112,17 @@ describe('nested loop binding ids (#1795 Phase 3)', () => {
   test('loop-child conditional insert() and its branch text carry ids', () => {
     const on = clientJs(nestedSource, 'Nested', true)
     // The branch-arm text (`{r.label}` inside the conditional's true arm) —
-    // __bfText (not a naive `.textContent = String(...)`) so a Child-position
-    // expression whose value is a live Node splices by identity instead of
-    // stringifying (#2347).
-    expect(on).toMatch(/__rt_s\d+ = __bfText\(__rt_s\d+, r\(\)\.label\) }, "Nested#binding:s\d+"\)/)
+    // a claimed 'markup' slot writer (slot unification A3), built fresh in
+    // the branch's own bindEvents, so a Child-position expression whose
+    // value is a live Node splices by identity instead of stringifying
+    // (#2347) — the same contract `__bfText` used to provide. Wrapped in
+    // `escapeTextOrNode` (A3 follow-up): a string value must be escaped
+    // before this 'markup' writer's `innerHTML =` insertion, matching what
+    // the initial SSR/CSR template already does for the same expression;
+    // a live Node passes through untouched.
+    expect(on).toMatch(/__bfw_\w+\('s\d+', escapeTextOrNode\(r\(\)\.label\)\) }, "Nested#binding:s\d+"\)/)
     // The inner loop's child text (`{t}`).
-    expect(on).toMatch(/String\(t\(\)\) }, "Nested#binding:s\d+"\)/)
+    expect(on).toMatch(/String\(t\(\)\)\) }, "Nested#binding:s\d+"\)/)
   })
 
   test('branch-scoped loop (loop inside a conditional) attributes its mapArray', () => {
@@ -132,7 +137,7 @@ describe('nested loop binding ids (#1795 Phase 3)', () => {
     const emitted = assertNoCoverageGap(staticLoopSource, 'StaticLoop')
     expect(emitted.length).toBeGreaterThanOrEqual(1)
     const on = clientJs(staticLoopSource, 'StaticLoop', true)
-    expect(on).toMatch(/textContent = String\(n\(\)\) }, "StaticLoop#binding:s\d+"\)/)
+    expect(on).toMatch(/__bfw_\w+\('s\d+', String\(n\(\)\)\) }, "StaticLoop#binding:s\d+"\)/)
   })
 
   test('component loop attributes its mapArray', () => {

package/src/__tests__/reactive-attrs-in-map.test.ts

@@ -68,7 +68,7 @@ describe('reactive attributes inside .map() callbacks', () => {
     expect(clientJs!.content).toContain('disabled')
   })
 
-  test('dynamic array: reactive className handled by reconcileElements re-render (no extra effect needed)', () => {
+  test('dynamic array: reactive className handled by mapArray re-render (no extra effect needed)', () => {
     const source = `
       'use client'
 
@@ -91,7 +91,7 @@ describe('reactive attributes inside .map() callbacks', () => {
 
     const clientJs = result.files.find(f => f.type === 'clientJs')
     expect(clientJs).toBeDefined()
-    // Dynamic arrays use reconcileElements which re-creates items on signal change
+    // Dynamic arrays use mapArray which re-creates items on signal change
     expect(clientJs!.content).toContain('mapArray')
   })
 
@@ -228,9 +228,11 @@ describe('reactive attributes inside .map() callbacks', () => {
     const result = compileJSX(source, 'L.tsx', { adapter })
     expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
     const js = result.files.find(f => f.type === 'clientJs')!.content
-    // Both effects must still be present.
+    // Both effects must still be present. The text effect writes through a
+    // claimed 'text' slot writer now (slot unification A3), not a bare
+    // `.textContent =` assignment.
     expect(js).toContain("setAttribute('class'")
-    expect(js).toMatch(/textContent\s*=\s*String\(item\.name\)/)
+    expect(js).toMatch(/__bfw_\w+\('s\d+', String\(item\.name\)\)/)
     // But there must be exactly one `items.forEach` call (not two).
     const forEachMatches = js.match(/items\.forEach\(/g) ?? []
     expect(forEachMatches.length).toBe(1)

package/src/__tests__/static-loop-csr-materialize.test.ts

@@ -124,8 +124,9 @@ describe('#1247 — static-loop CSR self-heal', () => {
     const m = clientJs.match(/if \(!__iterEl\) \{[\s\S]*?\n\s+\}\n\s+if \(__iterEl\)/)
     expect(m).toBeTruthy()
     const block = m![0]
-    // The cloned template must reference `emoji` directly.
-    expect(block).toMatch(/\$\{emoji\}/)
+    // The cloned template must reference `emoji` directly (possibly through
+    // the escapeAttr/escapeText interpolation wrappers).
+    expect(block).toMatch(/\$\{(?:escape(?:Attr|Text)\()?emoji\)?\}/)
     // It must NOT reference `__bfItem()` — that accessor only exists
     // inside `mapArray` renderItems, not inside a plain forEach.
     expect(block).not.toMatch(/__bfItem\(\)/)

package/src/__tests__/template-closure.test.ts

@@ -203,7 +203,7 @@ describe('#1128 — template body never reaches init-scope identifiers', () => {
 
     expect(tpl).not.toMatch(/\bitems\b/)
     // Bare `undefined.map(...)` would throw; substitute `[]` so the
-    // template renders an empty list and reconcileList populates it.
+    // template renders an empty list and mapArray populates it.
     expect(tpl).toMatch(/\$\{\[\]\.map\(/)
   })
 

package/src/compiler.ts

@@ -16,6 +16,7 @@ import { analyzeComponent, listComponentFunctions, createProgramForFile, needsTy
 import { jsxToIR } from './jsx-to-ir.ts'
 import { stripClientBuiltinImports } from './builtins.ts'
 import { generateClientJs, generateClientJsWithSourceMap, analyzeClientNeeds } from './ir-to-client-js/index.ts'
+import { decideClientOnlyElision } from './ir-to-client-js/client-only-elision.ts'
 import { emitModuleLevelDeclarations } from './ir-to-client-js/emit-module-level.ts'
 import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode } from './ir-to-client-js/imports.ts'
 import { setActiveComponentScope, computeFileScope } from './ir-to-client-js/component-scope.ts'
@@ -140,6 +141,10 @@ function compileMultipleComponents(
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR)
     checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors)
 
+    // Slot unification Step B — see the single-component path's identical
+    // call for why this must run before adapter.generate/generateClientJs.
+    decideClientOnlyElision(componentIR.root)
+
     if (options.cssLayerPrefix) {
       applyCssLayerPrefix(componentIR, options.cssLayerPrefix)
     }
@@ -619,6 +624,12 @@ export function compileJSX(
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR)
   checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors)
 
+  // Slot unification Step B (`spec/slot-unification.md` §5 Step B): decide
+  // marker elision ONCE, mutating `componentIR.root` in place, before either
+  // `adapter.generate` or `generateClientJs` run below — both must see the
+  // SAME `markerless`/`elidedPath` flags on the SAME IR nodes.
+  decideClientOnlyElision(componentIR.root)
+
   // Cross-file @client signal sources: identify which import sources
   // need `.client.js` path rewriting in the client bundle.
   if (ctx.importedClientSignalNames.size > 0) {

package/src/index.ts

@@ -65,6 +65,7 @@ export { createProgramForCorpus, type SharedProgramOptions } from './shared-prog
 
 // JSX to IR transformer
 export { jsxToIR } from './jsx-to-ir.ts'
+export { decideClientOnlyElision } from './ir-to-client-js/client-only-elision.ts'
 
 // Module exports generation (compiler layer)
 export { generateModuleExports, extractFunctionParams, formatParamWithType, findReachableNames } from './module-exports.ts'

package/src/ir-to-client-js/build-references.ts

@@ -153,6 +153,13 @@ export function buildReferencesGraph(ctx: ClientJsContext, irRoot: IRNode): Refe
     if (elem.filterPredicate) addExprEdges(ROOT_SOURCE, elem.filterPredicate.raw, 'template-closure')
     if (elem.sortComparator) addExprEdges(ROOT_SOURCE, elem.sortComparator.raw, 'template-closure')
     if (elem.preamble) addExprEdges(ROOT_SOURCE, preambleAnalysisText(elem.preamble), 'template-closure')
+    // flatMap descriptor bodies (`elem.flatMapClient`) are NOT traced here:
+    // the rendered body embeds leaf HTML template literals, and the regex
+    // identifier extractor would turn tag/attr names into false-positive
+    // edges. The Phase 3 loop visitor traces the same content structurally
+    // (js segments via `preambleAnalysisText`, leaf attrs/keys/interpolations
+    // via `walkIR` on `flatMapCallback` segments) — that's what keeps
+    // `const maxTags = _p.maxTags` in the extracted props.
     for (const attr of elem.bindings.reactiveAttrs) {
       addExprEdges(ROOT_SOURCE, attr.expression, 'template-closure')
     }
@@ -318,6 +325,15 @@ export function buildReferencesGraph(ctx: ClientJsContext, irRoot: IRNode): Refe
       if (l.filterPredicate) addExprEdges(ROOT_SOURCE, l.filterPredicate.raw, 'template-closure')
       if (l.sortComparator) addExprEdges(ROOT_SOURCE, l.sortComparator.raw, 'template-closure')
       if (l.preamble) addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.preamble), 'template-closure')
+      // flatMap bodies: js segments reference init-scope names; segment
+      // leaves are IR nodes off `children`, so `descend()` never reaches
+      // them — walk them explicitly (mirrors attachParsedExpressions).
+      if (l.flatMapCallback) {
+        addExprEdges(ROOT_SOURCE, preambleAnalysisText(l.flatMapCallback), 'template-closure')
+        for (const seg of l.flatMapCallback.segments) {
+          if (seg.kind === 'jsx') walkIR(seg.ir, null, visitor)
+        }
+      }
       descend()
       if (l.childComponent) walkChildComponent(l.childComponent)
       if (l.nestedComponents) {