@barefootjs/jsx 0.35.0 → 0.35.2

package/src/__tests__/preamble-branch-arm-rerun.test.ts

@@ -0,0 +1,135 @@
+/**
+ * Codegen-shape pins for the loop-row branch-arm preamble gap (#2596/#2447
+ * follow-up, found while discussing #2869's aftermath). Companion to the
+ * behavioral test in
+ * `packages/client/__tests__/runtime/preamble-branch-attr-staleness.test.ts`,
+ * which is the one that actually proves the fix works end to end — this
+ * file pins the exact emitted shape so a future refactor of
+ * `stringifyLoopChildArm`/`stringifyBranchReactiveAttrs`/
+ * `stringifyLoopChildConditional` can't silently drop the preamble re-run
+ * again.
+ *
+ * Two sites were fixed together: a reactive ATTRIBUTE inside a loop row's
+ * branch conditional that reads a `.map()` preamble local (case a), and a
+ * NESTED conditional's own CONDITION expression doing the same (case b,
+ * #2596 one nesting level deeper than the already-fixed outer-conditional
+ * case pinned by `preamble-conditional-reactivity.test.ts`). Case c is the
+ * negative control: no preamble local in play, so nothing should be
+ * injected.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+function clientJsFor(source: string, filename: string): string {
+  const result = compileJSX(source, filename, { adapter })
+  expect(result.errors).toHaveLength(0)
+  const clientJs = result.files.find(f => f.type === 'clientJs')?.content
+  if (!clientJs) throw new Error('No client JS emitted')
+  return clientJs
+}
+
+describe('#2596/#2447 follow-up — preamble re-run inside a loop-row branch arm', () => {
+  test('(a) an attribute inside a branch arm re-runs the preamble before reading it', () => {
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; tier: string }
+export function List() {
+  const [visible] = createSignal(true)
+  const [rows] = createSignal<Row[]>([{ id: 1, tier: 'gold' }])
+  return (
+    <ul>
+      {rows().map(row => {
+        const cls = 'tier-' + row.tier
+        return (
+          <li key={row.id}>
+            {visible() ? <span class={cls} id="target">{row.tier}</span> : <span>x</span>}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+`
+    const js = clientJsFor(source, 'List.tsx')
+
+    // Pin the eager per-row mapArray path (not lazy-row, not relevant here
+    // but keeps this fixture stable if eligibility ever widens).
+    expect(js).toContain('mapArray(')
+
+    // The outer conditional's own getter is NOT preamble-guarded (`visible`
+    // is a plain signal, no preamble read) — stays bare.
+    expect(js).toContain("insert(__el, 's0', () => visible(), {")
+
+    // The arm's attr effect re-runs the preamble before reading `cls`.
+    const disposerStart = js.indexOf('const __disposers = []')
+    const disposerEnd = js.indexOf('return () => __disposers.forEach')
+    const arm = js.slice(disposerStart, disposerEnd)
+    const preambleAt = arm.indexOf("const cls = 'tier-' + row().tier;")
+    const readAt = arm.indexOf('const __x = cls')
+    expect(preambleAt).toBeGreaterThanOrEqual(0)
+    expect(readAt).toBeGreaterThan(preambleAt)
+  })
+
+  test('(b) a nested conditional inside a branch arm re-runs the preamble in its own condition getter', () => {
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; tier: string }
+export function List() {
+  const [visible] = createSignal(true)
+  const [selected] = createSignal(1)
+  const [rows] = createSignal<Row[]>([{ id: 1, tier: 'gold' }])
+  return (
+    <ul>
+      {rows().map(row => {
+        const cls = 'tier-' + row.tier
+        const on = selected() === row.id
+        return (
+          <li key={row.id}>
+            {visible() ? <div><span>{cls}</span>{on ? <em id="yes">yes</em> : <em id="no">no</em>}</div> : <span>x</span>}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+`
+    const js = clientJsFor(source, 'List2.tsx')
+
+    expect(js).toMatch(
+      /insert\(__branchScope, 's\d+', \(\) => \{ const cls = 'tier-' \+ row\(\)\.tier; const on = selected\(\) === row\(\)\.id;; return \(on\) \}, \{/,
+    )
+  })
+
+  test('(c) negative control — no preamble local in play, nothing injected', () => {
+    const source = `'use client'
+import { createSignal } from '@barefootjs/client'
+type Row = { id: number; tier: string }
+export function List() {
+  const [visible] = createSignal(true)
+  const [rows] = createSignal<Row[]>([{ id: 1, tier: 'gold' }])
+  return (
+    <ul>
+      {rows().map(row => (
+        <li key={row.id}>
+          {visible() ? <span class={row.tier} id="target">{row.tier}</span> : <span>x</span>}
+        </li>
+      ))}
+    </ul>
+  )
+}
+`
+    const js = clientJsFor(source, 'List3.tsx')
+
+    expect(js).not.toContain('const cls =')
+    // The attr effect still exists and still writes — just with no
+    // preamble re-run ahead of it, since there is nothing to re-run.
+    const disposerStart = js.indexOf('const __disposers = []')
+    const disposerEnd = js.indexOf('return () => __disposers.forEach')
+    const arm = js.slice(disposerStart, disposerEnd)
+    expect(arm).toContain("setAttribute('class'")
+  })
+})

package/src/__tests__/style-css-var-reactive.test.ts

@@ -113,7 +113,10 @@ describe('reactive CSS custom properties (#135)', () => {
 
     // Both reactive sinks live in the init body — one assigning the DOM
     // `disabled` property, the other writing the `aria-busy` attribute.
-    expect(content).toMatch(/\.disabled\s*=\s*!!\(busy\(\)\)/)
+    // The write reads a dedup-guarded temp (`__x`, #2869), not `busy()`
+    // inline — the computed value is still `busy()`'s result either way.
+    expect(content).toMatch(/const __x = busy\(\)/)
+    expect(content).toMatch(/\.disabled\s*=\s*!!\(__x\)/)
     expect(content).toContain("setAttribute('aria-busy'")
   })
 })

package/src/analyzer-context.ts

@@ -26,6 +26,7 @@ import type {
 } from './types.ts'
 import { type ExcludeRange, collectAllTypeRanges, reconstructWithoutTypes } from './strip-types.ts'
 import type { CallbackBodyAcceptor } from './adapters/interface.ts'
+import { nodeContainsJsx } from './reactivity-checker.ts'
 
 /**
  * Deferred info for BF043 (props destructuring warning).
@@ -318,10 +319,17 @@ export function createAnalyzerContext(
       // travel as structured segments, never as raw text. Every getJS call
       // site shares this contract; the env gate keeps the subtree walk off
       // the production hot path (the trichotomy harness enables it). Scoped
-      // to error-free compiles: a compile that already refused loudly may
-      // take degraded fallback paths whose artifacts are gated by the error —
-      // the invariant this trips on is the SILENT leak.
-      if (process.env.BF_ASSERT_NO_JSX_IN_GETJS === '1' && this.errors.length === 0 && nodeContainsJsx(node)) {
+      // to compiles with no `error`-severity diagnostic: a compile that
+      // already refused loudly may take degraded fallback paths whose
+      // artifacts are gated by the error — the invariant this trips on is
+      // the SILENT leak. A `warning` (e.g. BF043 props-destructuring) does
+      // not gate anything, so it must not silently disarm this assertion too
+      // (#2867) — only `error` severity does.
+      if (
+        process.env.BF_ASSERT_NO_JSX_IN_GETJS === '1' &&
+        !this.errors.some((e) => e.severity === 'error') &&
+        nodeContainsJsx(node)
+      ) {
         throw new Error(
           'getJS() called on a JSX-bearing node — raw JSX must never be spliced ' +
           'into emitted output. Carry mixed content as structured segments ' +
@@ -336,12 +344,6 @@ export function createAnalyzerContext(
   }
 }
 
-/** Subtree JSX check for the test-gated getJS assertion above. */
-function nodeContainsJsx(node: ts.Node): boolean {
-  if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)) return true
-  return ts.forEachChild(node, nodeContainsJsx) ?? false
-}
-
 // =============================================================================
 // Source Location Helper
 // =============================================================================

package/src/ir-to-client-js/collect-elements.ts

@@ -4,7 +4,7 @@
 
 import { type IRNode, type IRElement, type IRComponent, type IRLoop, type IRProp, pickAttrMetaFromIR } from '../types.ts'
 import type { ClientJsContext, ConditionalBranchChildComponent, ConditionalBranchReactiveAttr, BranchLoop, ConditionalBranchTextEffect, ConditionalElement, LoopChildBindings, LoopChildBranchSummary, LoopChildConditional, LoopOffset, NestedLoop } from './types.ts'
-import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM } from './utils.ts'
+import { attrValueToString, freeIdsFromRefs, quotePropName, PROPS_PARAM, type LoopParamSpec } from './utils.ts'
 import { classifyReactivity, decideWrapForAttr, decideWrapForChildProp, decideWrapFromAstFlags, collectEventHandlersFromIR, collectConditionalBranchEvents, collectConditionalBranchRefs, collectConditionalBranchChildComponents, collectLoopChildEventsWithNesting, collectLoopChildReactiveAttrs, collectLoopChildReactiveTexts, collectLoopChildRefs, emptyLoopChildBindings, buildLoopRowScope, anyNameIn } from './reactivity.ts'
 import { irToHtmlTemplate, irToPlaceholderTemplate, irChildrenToJsExpr, jsxChildrenPropGetterExpr, buildLoopSkeletonTemplate, computeSkeletonSlotPaths, renderFlatMapClientBody, renderFlatMapProjectionClientBody, flatMapCallbackHasKeyedLeaf, type SkeletonSlotPaths } from './html-template.ts'
 import { detectRootNamespaceWrapTag } from './control-flow/stringify/template-parse.ts'
@@ -12,8 +12,8 @@ import { expandDynamicPropValue, expandConstantForReactivity, resolveRestSpreadO
 import { extractFreeIdentifiersFromText } from './csr-substitute.ts'
 import { walkIR, stopAt } from './walker.ts'
 import { buildLoopChainExpr } from '../loop-chain.ts'
-import { identifierPattern } from '../identifier-pattern.ts'
 import { classifyDOMProp } from '@barefootjs/shared'
+import type { BindingScope } from '../scope/binding-scope.ts'
 
 /** Expressions that render nothing (0 DOM nodes) — `&&` / `?:` empty branches. */
 const EMPTY_RENDER_EXPRS = new Set(['null', 'undefined', 'false', "''", '""', '``'])
@@ -272,7 +272,7 @@ export const branchInnerLoopOptions: CollectInnerLoopsOptions = {
 export function collectInnerLoops(
   nodes: IRNode[],
   siblingOffsets: Map<IRLoop, IRNode[]>,
-  outerLoopParam?: string,
+  outerLoopParam?: string | LoopParamSpec,
   ctx?: ClientJsContext,
   options?: CollectInnerLoopsOptions,
 ): NestedLoop[] {
@@ -280,12 +280,29 @@ export function collectInnerLoops(
     parentSlotId: string | null
     depth: number
     insideCond: boolean
+    /**
+     * Every ancestor loop's own item/index binding, innermost-first
+     * (#2861) — `undefined` above the outermost loop. Threaded (not just
+     * captured once from `outerLoopParam`) so a THIRD-level-deep loop's row
+     * sees BOTH its grandparent's and its immediate parent's bindings, not
+     * only the outermost one: each `loop:` visit below pushes its own
+     * frame via `buildLoopRowScope(..., scope.bindingScope)` before
+     * descending into that loop's own children.
+     */
+    bindingScope: BindingScope | undefined
   }
   const result: NestedLoop[] = []
   const flat = options?.flatBranchMode === true
   const fixedDepth = options?.templateDepth
   const collectBindings = options?.collectItemBindings === true
-  const initialScope: Scope = { parentSlotId: null, depth: 0, insideCond: false }
+  // Normalize to a spec regardless of which shape the caller passed (#2868
+  // callers always pass a full spec; a bare string carries no bindings/index
+  // of its own) — one shape feeds both the reactivity scope below and
+  // `loopParamsForTemplate` inside the `loop:` visitor.
+  const outerSpec: LoopParamSpec | undefined =
+    typeof outerLoopParam === 'string' ? { param: outerLoopParam } : outerLoopParam
+  const outerScope = buildLoopRowScope(outerSpec?.param, outerSpec?.bindings, undefined, outerSpec?.index)
+  const initialScope: Scope = { parentSlotId: null, depth: 0, insideCond: false, bindingScope: outerScope }
 
   for (const root of nodes) {
     walkIR<Scope>(root, initialScope, {
@@ -308,14 +325,10 @@ export function collectInnerLoops(
         // Pass loopParams so expressions are wrapped at generation time (not post-hoc regex).
         // Forward destructured bindings (#951) so inner-loop template
         // references to the destructured locals are rewritten.
-        const loopParamsForTemplate = outerLoopParam
-          ? [outerLoopParam, { param: n.param, bindings: n.paramBindings, index: n.index }]
+        const loopParamsForTemplate = outerSpec
+          ? [outerSpec, { param: n.param, bindings: n.paramBindings, index: n.index }]
           : undefined
         const template = n.children.map(c => irToPlaceholderTemplate(c, undefined, emitDepth, loopParamsForTemplate)).join('')
-        // Check if array expression references the outer loop param
-        const refsOuter = outerLoopParam
-          ? identifierPattern(outerLoopParam).test(n.array)
-          : false
         // Per-item bindings for inner loop body, collected uniformly when
         // ctx is available: reactiveTexts / reactiveAttrs / refs are each
         // classified against the loop's OWN param via `classifyReactivity`,
@@ -349,8 +362,8 @@ export function collectInnerLoops(
             // guarantees the branch's marker is mounted the moment this
             // effect first runs (issue-2706-nested-loop-conditional-slot
             // .test.ts's original repro).
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index))
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index, scope.bindingScope))
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, true, innerPreambleNames, n.index, scope.bindingScope))
             bindings.refs.push(...collectLoopChildRefs(child))
           }
           bindings.conditionals.push(...collectLoopChildConditionals(
@@ -361,6 +374,12 @@ export function collectInnerLoops(
             n.paramBindings,
             innerPreambleNames,
             n.index,
+            // Render a branch's HTML against the FULL ancestor chain (outer
+            // loop(s) + this loop's own param), not just this loop's own
+            // param — an inner-loop conditional arm can read an outer
+            // loop's item/index too (#2868).
+            loopParamsForTemplate,
+            scope.bindingScope,
           ))
         }
 
@@ -412,7 +431,6 @@ export function collectInnerLoops(
           containerSlotId: scope.parentSlotId,
           template,
           preamble: n.preamble,
-          refsOuterParam: refsOuter,
           childComponents,
           insideConditional: !flat && scope.insideCond ? true : undefined,
           offset: flat ? undefined : resolveLoopOffset(siblingOffsets.get(n)),
@@ -420,7 +438,14 @@ export function collectInnerLoops(
         })
         // Branch-mode callers handle deeper nesting via their own collection paths.
         if (!flat) {
-          descend({ ...scope, depth: scope.depth + 1 })
+          // #2861: push THIS loop's own item/index frame onto the scope
+          // stack before descending, so a loop found deeper still (depth 2+)
+          // sees every ancestor's bindings, not just the outermost one.
+          descend({
+            ...scope,
+            depth: scope.depth + 1,
+            bindingScope: buildLoopRowScope(n.param, n.paramBindings, innerPreambleNames, n.index, scope.bindingScope),
+          })
         }
       },
       // fragment / provider / async auto-descend with the same scope.
@@ -455,7 +480,12 @@ function decideLoopRendering(
   // loop. These only surface for static arrays (gated at the call site via
   // `isStaticArray && innerLoops.length`) so dynamic child-component loops —
   // which render through `createComponent` — are unaffected.
-  const innerLoops = collectInnerLoops(loop.children, siblingOffsets, loop.param, ctx)
+  const innerLoops = collectInnerLoops(
+    loop.children,
+    siblingOffsets,
+    { param: loop.param, bindings: loop.paramBindings, index: loop.index },
+    ctx,
+  )
   const hasInnerLoops = (innerLoops?.length ?? 0) > 0
   const useElementReconciliation =
     !loop.childComponent && !loop.isStaticArray && (hasNestedComps || hasInnerLoops)
@@ -727,6 +757,7 @@ export function collectElements(
         : decideLoopRendering(l, siblingOffsets, ctx)
 
       let template = ''
+      let templateIndexed: string | undefined
       let staticItemTemplate: string | undefined
       let skeletonTemplate: string | undefined
       let skeletonPaths: SkeletonSlotPaths | undefined
@@ -771,6 +802,18 @@ export function collectElements(
         template = useElementReconciliation
           ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
           : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpec)
+        // Second structured render, WITH the index wrapped too — used by
+        // `build-plain-row.ts` once lazy eligibility rules out the lazy row
+        // plan (which needs `template` above, index-unwrapped, verbatim).
+        // Rendered here (IR level) rather than via a post-hoc regex pass
+        // over `template`, which can corrupt a tag name colliding with the
+        // index identifier (`<i>` -> `<i()>`, #2868).
+        if (l.index) {
+          const loopParamSpecIndexed = [{ param: l.param, bindings: l.paramBindings, index: l.index }]
+          templateIndexed = useElementReconciliation
+            ? irToPlaceholderTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpecIndexed)
+            : irToHtmlTemplate(l.children[0], resolveRestSpreadNames(ctx), 0, loopParamSpecIndexed)
+        }
         // Static-array loops emit a `forEach((param, idx) => ...)` whose body
         // references the destructured param directly — `__bfItem()` is not in
         // scope there. Build a second template that skips the loop-param
@@ -827,6 +870,7 @@ export function collectElements(
         iterationShape: l.iterationShape,
         objectIteration: l.objectIteration,
         template,
+        templateIndexed,
         staticItemTemplate,
         skeletonTemplate,
         skeletonPaths,
@@ -1177,6 +1221,7 @@ function collectBranchLoops(
       // keeping the template consistent with reactive effect expressions that
       // use `param()` to read the current item value.
       let childTemplate: string
+      let childTemplateIndexed: string | undefined
       // NOT `index: n.index` here — see the identical note on `loopParamSpec`
       // above; `BranchLoop.template` is reused verbatim by the lazy row plan
       // too (`callSite: 'branch-plain'`), and `buildBranchLoopPlan` applies
@@ -1189,6 +1234,15 @@ function collectBranchLoops(
       } else {
         childTemplate = n.children.map(c => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpec)).join('')
       }
+      // Second structured render, WITH the index wrapped too — see the
+      // identical `templateIndexed` note on the top-level loop path above
+      // (#2868).
+      if (n.index && !projectionInner) {
+        const branchLoopParamSpecIndexed = [{ param: n.param, bindings: n.paramBindings, index: n.index }]
+        childTemplateIndexed = useElementReconciliation && n.children[0]
+          ? irToPlaceholderTemplate(n.children[0], restNames, 0, branchLoopParamSpecIndexed)
+          : n.children.map(c => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpecIndexed)).join('')
+      }
 
       // Collect per-item bindings (events, reactive attrs/texts, refs,
       // conditionals) for ALL branch loops — simple loops also need
@@ -1214,6 +1268,7 @@ function collectBranchLoops(
         iterationShape: n.iterationShape,
         objectIteration: n.objectIteration,
         template: childTemplate,
+        templateIndexed: childTemplateIndexed,
         containerSlotId: containerSlot,
         preamble: n.preamble,
         preambleRegions: n.preambleRegions,
@@ -1441,24 +1496,41 @@ export function collectLoopChildConditionals(
    * `collectLoopChildBindings`'s doc comment (Copilot review on #2595).
    */
   loopIndex?: string | null,
+  /**
+   * The full ancestor loop-param chain to render branch HTML against
+   * (outermost first), when known — e.g. `[outerSpec, innerSpec]` for a
+   * conditional inside an inner `.map()`. Defaults to just
+   * `[{ param: loopParam, bindings: loopParamBindings, index: loopIndex }]`
+   * (this function's own single-loop scope) when omitted, which is correct
+   * for every caller except `collectInnerLoops`'s inner-loop handler, which
+   * passes the full chain so an inner loop's conditional arm can also
+   * reference an OUTER loop's item/index (#2868). Rendering the branch's
+   * HTML against the full chain at IR time — rather than re-wrapping the
+   * assembled HTML string with a word-boundary regex afterward — is also
+   * what makes it safe for a branch root tag name to collide with a
+   * param/index identifier (`<i>`, `<b>`, …): `irToHtmlTemplate` only wraps
+   * JS expression positions, never tag names.
+   */
+  loopParams?: ReadonlyArray<string | LoopParamSpec>,
+  /** Enclosing loop's own scope, for a NESTED loop (#2861) — see `buildLoopRowScope`. */
+  parentScope?: BindingScope,
 ): LoopChildConditional[] {
   const conditionals: LoopChildConditional[] = []
-  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex)
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex, parentScope)
 
   // Widen the source-level "references loop param" check so destructured
   // callbacks fire too — the pattern text `[, cfg]` never word-matches on
   // bare `cfg` but individual binding names do (#951). Consumes a
   // pre-computed `Set<string>` of free identifiers (#1267) rather than
   // running word-boundary regex on the expression text.
-  const refsAnyBindingViaFreeIds = (freeIds: ReadonlySet<string>): boolean => {
-    if (loopParamBindings && loopParamBindings.length > 0) {
-      for (const b of loopParamBindings) {
-        if (freeIds.has(b.name)) return true
-      }
-      return false
-    }
-    return loopParam ? freeIds.has(loopParam) : false
-  }
+  //
+  // #2861: also checks the loop's INDEX binding, not just item/destructure
+  // — `scope.valueBoundNames()` already unions all three (the same query
+  // Phase 1's `referencesLoopParam` reads to grant a slot at all), so a
+  // condition referencing only the index (e.g. `{i % 2 === 0 ? … : null}`)
+  // no longer dies at this pre-gate before `classifyReactivity` even runs.
+  const refsAnyBindingViaFreeIds = (freeIds: ReadonlySet<string>): boolean =>
+    scope !== undefined && anyNameIn(scope.valueBoundNames(), freeIds)
 
   walkIR(node, null, {
     // element / fragment / component / provider auto-descend with same scope.
@@ -1489,13 +1561,13 @@ export function collectLoopChildConditionals(
         preambleNames !== undefined &&
         preambleNames.size > 0 &&
         anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames)
-      // Loop-param conditionals are reactive via per-item signal accessors;
-      // classifyReactivity sees both paths (signal/memo/prop + loop-param).
-      if (!readsPreamble && classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
+      // Loop-param/loop-index conditionals are reactive via per-item signal
+      // accessors; classifyReactivity sees all three paths (signal/memo/prop
+      // + loop-param + loop-index, #2861).
+      if (!readsPreamble && classifyReactivity(expanded.expr, ctx, scope, expanded.freeIds).kind === 'none') return
 
-      const loopParamsForCond = loopParam
-        ? [{ param: loopParam, bindings: loopParamBindings, index: loopIndex }]
-        : undefined
+      const loopParamsForCond =
+        loopParams ?? (loopParam ? [{ param: loopParam, bindings: loopParamBindings, index: loopIndex }] : undefined)
       // `__slots` matches the closure variable emitted by
       // `stringifyLoopChildConditional` — Child-position interpolations
       // get wrapped in `__bfSlot(EXPR, __slots)` so live `Node` returns
@@ -1536,7 +1608,13 @@ function summarizeLoopChildBranch(
   /** Enclosing loop's index param name — see `collectLoopChildConditionals` (Copilot review on #2595). */
   loopIndex?: string | null,
 ): LoopChildBranchSummary {
-  const inner = collectInnerLoops([node], siblingOffsets, loopParam, ctx, branchInnerLoopOptions)
+  const inner = collectInnerLoops(
+    [node],
+    siblingOffsets,
+    loopParam ? { param: loopParam, bindings: loopParamBindings, index: loopIndex } : undefined,
+    ctx,
+    branchInnerLoopOptions,
+  )
   return {
     childComponents: collectConditionalBranchChildComponents(node),
     innerLoops: inner.length > 0 ? inner : undefined,

package/src/ir-to-client-js/control-flow/plan/build-composite-loop.ts

@@ -60,6 +60,7 @@ export function buildTopLevelCompositePlan(elem: TopLevelLoop, profileComponentN
       parentElVar: '__el',
       outerLoopParam: elem.param,
       outerLoopParamBindings: elem.paramBindings,
+      outerLoopIndex: elem.index,
     }),
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
@@ -122,6 +123,7 @@ export function buildBranchCompositePlan(loop: BranchLoop, cv: string, profileCo
       parentElVar: '__el',
       outerLoopParam: loop.param,
       outerLoopParamBindings: loop.paramBindings,
+      outerLoopIndex: loop.index,
     }),
     loopParam: loop.param,
     loopParamBindings: loop.paramBindings,

package/src/ir-to-client-js/control-flow/plan/build-inner-loop.ts

@@ -7,8 +7,18 @@
  *   - Sibling levels at the same depth are flattened into the top-level
  *     list; deeper levels become `childLevels` of the immediately-preceding
  *     ancestor.
- *   - Choose `reactive` vs `static` mode by checking whether `inner.array`
- *     references the *current* outer loop param (the O-8 narrowing fix).
+ *   - Every level gets the full reactive `mapArray` emission (#2865 —
+ *     the former "static forEach, setup-only" shortcut for a nested
+ *     `.map()` whose array didn't textually mention the outer loop's item
+ *     silently froze any OTHER reactivity the inner array or its rows
+ *     depended on: a signal, a memo, a prop, an imported function call, a
+ *     preamble local, a destructured outer param, an outer-index-derived
+ *     array — none of those are "the outer item", so `refsParent` missed
+ *     all of them, and the static emitter never wired a single
+ *     `createEffect` for the row's own reactiveTexts/reactiveAttrs/
+ *     conditionals either. A `mapArray` over a genuinely non-reactive
+ *     array just subscribes to nothing and runs once — a strict superset
+ *     of what the deleted static path did).
  *   - Recurse with `inner.param` as the new outerLoopParam so deeper
  *     levels see their immediate parent.
  */
@@ -28,7 +38,7 @@ import {
   wrapLoopParamAsAccessor,
   attrValueToString,
 } from '../../utils.ts'
-import { buildChildRefBindings, buildStaticChildRefBindings } from '../shared.ts'
+import { buildChildRefBindings } from '../shared.ts'
 import { renderPreamble, irToHtmlTemplate } from '../../html-template.ts'
 import { buildLoopChildConditionalsPlan } from './build-loop-child-arm.ts'
 import type { LoopChildConditionalPlan } from './loop-child-arm.ts'
@@ -67,7 +77,6 @@ import type {
   InnerLoopPlan,
   InnerLoopReactiveAttr,
   InnerLoopReactiveEmit,
-  InnerLoopStaticEmit,
   InnerLoopText,
   InnerLoopsPlan,
 } from './inner-loop.ts'
@@ -77,6 +86,8 @@ export interface BuildInnerLoopsArgs {
   parentElVar: string
   outerLoopParam: string | undefined
   outerLoopParamBindings?: readonly LoopParamBinding[]
+  /** Outer loop's index param name, when present (#2861). */
+  outerLoopIndex?: string | null
 }
 
 /**
@@ -85,9 +96,9 @@ export interface BuildInnerLoopsArgs {
  * conditional branch are skipped (they're emitted by `stringifyBranchInnerLoops`).
  */
 export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
-  const { levels, parentElVar, outerLoopParam, outerLoopParamBindings } = args
+  const { levels, parentElVar, outerLoopParam, outerLoopParamBindings, outerLoopIndex } = args
   const wrapOuter = outerLoopParam
-    ? (expr: string) => wrapLoopParamAsAccessor(expr, outerLoopParam, outerLoopParamBindings)
+    ? (expr: string) => wrapLoopParamAsAccessor(expr, outerLoopParam, outerLoopParamBindings, outerLoopIndex)
     : (expr: string) => expr
 
   const plan: InnerLoopPlan[] = []
@@ -111,17 +122,13 @@ export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
       ? `qsa(${parentElVar}, '[bf="${inner.containerSlotId}"]')`
       : parentElVar
 
-    // O-8 narrowing: at depth 2+, `inner.array` may reference the *immediate*
-    // parent loop's param. Check against whatever outerLoopParam our caller
-    // narrowed to — the recursion passes `inner.param` for child levels.
-    const refsParent = !!outerLoopParam && (inner.arrayFreeIdentifiers?.has(outerLoopParam) ?? false)
-    const useReactive = refsParent && !!inner.template
+    // #2865: every nested loop gets the full reactive `mapArray` emission,
+    // regardless of whether its array references the outer loop's item —
+    // see the module docstring for why the old `refsParent`-gated static
+    // shortcut was unsound.
+    const emit: InnerLoopReactiveEmit = buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings, outerLoopIndex)
 
-    const emit: InnerLoopReactiveEmit | InnerLoopStaticEmit = useReactive
-      ? buildReactiveEmit(inner, level, wrapOuter, uidSuffix, outerLoopParam, outerLoopParamBindings)
-      : buildStaticEmit(inner, level, uidSuffix)
-
-    const arrayExpr = useReactive ? wrapOuter(inner.array) : inner.array
+    const arrayExpr = wrapOuter(inner.array)
 
     const childLevelsPlan = childLevels.length > 0
       ? buildInnerLoopsPlan({
@@ -129,6 +136,7 @@ export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
           parentElVar: `__innerEl${uidSuffix}`,
           outerLoopParam: inner.param,
           outerLoopParamBindings: inner.paramBindings,
+          outerLoopIndex: inner.index,
         })
       : []
 
@@ -146,6 +154,7 @@ export function buildInnerLoopsPlan(args: BuildInnerLoopsArgs): InnerLoopsPlan {
       childLevels: childLevelsPlan,
       outerLoopParam,
       outerLoopParamBindings,
+      outerLoopIndex,
     })
 
     i = j
@@ -160,6 +169,7 @@ function buildReactiveEmit(
   uidSuffix: string,
   outerLoopParam?: string,
   outerLoopParamBindings?: readonly LoopParamBinding[],
+  outerLoopIndex?: string | null,
 ): InnerLoopReactiveEmit {
   const wrapInner = (expr: string) => wrapLoopParamAsAccessor(expr, inner.param, inner.paramBindings, inner.index)
   const wrapBoth = (expr: string) => wrapLoopParamAsAccessor(wrapOuter(expr), inner.param, inner.paramBindings, inner.index)
@@ -240,7 +250,7 @@ function buildReactiveEmit(
     // wrapInner(wrapOuter(...)) applied to the js text.
     const leafLoopParams = outerLoopParam
       ? [
-          { param: outerLoopParam, bindings: outerLoopParamBindings },
+          { param: outerLoopParam, bindings: outerLoopParamBindings, index: outerLoopIndex },
           { param: inner.param, bindings: inner.paramBindings, index: inner.index },
         ]
       : [{ param: inner.param, bindings: inner.paramBindings, index: inner.index }]
@@ -265,6 +275,7 @@ function buildReactiveEmit(
     wrap: wrapBoth,
     loopParam: inner.param,
     loopParamBindings: inner.paramBindings,
+    loopIndex: inner.index,
   })
 
   return {
@@ -283,37 +294,3 @@ function buildReactiveEmit(
     childRefs,
   }
 }
-
-function buildStaticEmit(inner: NestedLoop, level: DepthLevel, uidSuffix: string): InnerLoopStaticEmit {
-  // Static `forEach` iterates with the literal item as its first param, so
-  // no signal-accessor rewrite is needed — emit the preamble verbatim
-  // before the component/event setup so prop getters and event handlers
-  // can resolve the locals (#1064). Refs follow the same contract:
-  // wrapping the callback would rewrite `s.x` to `s().x` and throw at
-  // runtime when the callback closes over the static inner param (#1244,
-  // PR #1352 Copilot review).
-  //
-  // The index alias (#2218) lands first, same rationale as the reactive
-  // path: `forEach`'s second param is the synthetic `__innerIdx<uid>`, not
-  // the user's index name, so a preamble/prop/event that reads it needs the
-  // alias bound before anything else runs.
-  const preludeStatements: string[] = []
-  const indexAlias = nestedLoopIndexAlias(inner, `__innerIdx${uidSuffix}`, inner.param, level.comps, level.events)
-  if (indexAlias) preludeStatements.push(indexAlias)
-  // Static `forEach` receives the literal item, so neither the js text nor a
-  // leaf's param reads get accessor-wrapped (mirrors the verbatim emission
-  // of the js segments above).
-  if (inner.preamble) {
-    preludeStatements.push(renderPreamble(inner.preamble, {
-      renderLeaf: (ir) => irToHtmlTemplate(ir, undefined, 1, undefined, undefined),
-    }))
-  }
-  return {
-    mode: 'static',
-    rawKey: inner.key ?? null,
-    preludeStatements,
-    components: level.comps,
-    events: level.events,
-    childRefs: buildStaticChildRefBindings(inner.bindings.refs),
-  }
-}