@barefootjs/jsx 0.34.0 → 0.35.1

package/src/ir-to-client-js/control-flow/plan/build-reactive-effects.ts

@@ -12,8 +12,9 @@
  *      from `LoopChildBranchSummary.reactiveAttrs` / `.reactiveTexts` —
  *      collected per-branch, recursively, so a doubly-nested conditional's
  *      arm carries its own bindings instead of an outer scope reaching in.
- *   4. Apply `addCondAttrToTemplate` to the wrapped branch HTML so the
- *      stringifier emits a ready-to-interpolate template literal.
+ *   4. Apply `addCondAttrToTemplate` to each branch's HTML (already
+ *      loop-param-wrapped at IR render time, #2868) so the stringifier
+ *      emits a ready-to-interpolate template literal.
  *   5. Recurse into the per-arm sub-plans via `LoopChildArmPlan` —
  *      events, child component inits, inner loops, nested conditionals,
  *      attrs, texts. No legacy passthrough remains.
@@ -52,6 +53,8 @@ export interface BuildReactiveEffectsArgs {
   conditionals: readonly LoopChildConditional[] | undefined
   loopParam: string
   loopParamBindings?: readonly LoopParamBinding[]
+  /** This loop's index param name, when it declares one (#2859). */
+  loopIndex?: string | null
   /** Owning component name in profile mode (#1690, SR3) — else undefined. */
   profileComponentName?: string
 }
@@ -60,8 +63,8 @@ export interface BuildReactiveEffectsArgs {
 export function buildReactiveEffectsPlan(
   args: BuildReactiveEffectsArgs,
 ): ReactiveEffectsPlan {
-  const { attrs, texts, conditionals, loopParam, loopParamBindings, profileComponentName } = args
-  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings)
+  const { attrs, texts, conditionals, loopParam, loopParamBindings, loopIndex, profileComponentName } = args
+  const wrap = (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex)
 
   // 1. Group attrs by slot, preserving declaration order (Map insertion order
   //    matches the legacy iteration that produced byte-identical output).
@@ -108,10 +111,17 @@ export function buildReactiveEffectsPlan(
       conditionalPlans.push({
         slotId: cond.slotId,
         wrappedCondition: wrap(cond.condition),
-        whenTrueTemplateHtml: addCondAttrToTemplate(wrap(cond.whenTrueHtml), cond.slotId),
-        whenFalseTemplateHtml: addCondAttrToTemplate(wrap(cond.whenFalseHtml), cond.slotId),
-        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, cond.slotId, profileComponentName),
+        // whenTrueHtml/whenFalseHtml are already loop-param-wrapped at IR
+        // render time (`irToHtmlTemplate`'s `loopParams`, collect-elements.ts)
+        // — do NOT re-wrap the rendered HTML string here. A word-boundary
+        // regex over already-assembled markup matches a bare tag name that
+        // collides with the param/index identifier (`<i>` -> `<i()>`) just
+        // as readily as a real reference, since `<`/`>` are non-word
+        // characters (#2868).
+        whenTrueTemplateHtml: addCondAttrToTemplate(cond.whenTrueHtml, cond.slotId),
+        whenFalseTemplateHtml: addCondAttrToTemplate(cond.whenFalseHtml, cond.slotId),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, loopIndex, cond.slotId, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, loopIndex, cond.slotId, profileComponentName),
         ...(cond.readsPreamble && { readsPreamble: true }),
       })
     }
@@ -130,6 +140,8 @@ function buildOuterArm(
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  /** This loop's index param name, when it declares one (#2861). */
+  loopIndex: string | null | undefined,
   /** The conditional's own slot id — threaded to `buildBranchInnerLoopsPlan`'s `condSlotId` (#2705). */
   condSlotId: string,
   profileComponentName?: string,
@@ -150,6 +162,7 @@ function buildOuterArm(
       condSlotId,
       outerLoopParam: loopParam,
       outerLoopParamBindings: loopParamBindings,
+      outerLoopIndex: loopIndex,
       wrapOuter: wrap,
     }),
     nestedConditionals: buildLoopChildConditionalsPlan({
@@ -158,6 +171,7 @@ function buildOuterArm(
       wrap,
       loopParam,
       loopParamBindings,
+      loopIndex,
     }),
     attrs: buildArmAttrsPlan(branch.reactiveAttrs, wrap),
     texts: buildArmTextsPlan(branch.reactiveTexts, wrap),
@@ -175,6 +189,7 @@ export function buildLoopReactiveEffectsPlan(elem: TopLevelLoop, profileComponen
     conditionals: elem.bindings.conditionals,
     loopParam: elem.param,
     loopParamBindings: elem.paramBindings,
+    loopIndex: elem.index,
     profileComponentName,
   })
 }

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

@@ -1,13 +1,19 @@
 /**
  * Plan types for inner loops emitted inside a composite loop's renderItem
- * body. Each `InnerLoopPlan` is one level (= one `mapArray` for reactive
- * inner loops, one `forEach` for static ones); `childLevels` recurses for
- * deeper nestings.
+ * body. Each `InnerLoopPlan` is one level (= one `mapArray`); `childLevels`
+ * recurses for deeper nestings.
  *
  * Replaces the legacy `emitInnerLoopSetup` + `DepthLevel` walk. The
- * builder pre-resolves every per-level decision (mode, container query,
- * wrapped array / template / key, narrowed-outer-param children) so the
+ * builder pre-resolves every per-level decision (container query, wrapped
+ * array / template / key, narrowed-outer-param children) so the
  * stringifier is a deterministic walk.
+ *
+ * Every level gets the reactive `mapArray` shape (#2865) — there used to
+ * be a second "static forEach, setup-only" shape for a nested loop whose
+ * array didn't reference the outer item, but that gate answered the wrong
+ * question (it never checked whether the array was reactive at all, only
+ * whether it mentioned the outer item's name) and silently froze any other
+ * reactivity in the row. See `build-inner-loop.ts`'s module docstring.
  */
 
 import type { LoopChildEvent } from '../../types.ts'
@@ -64,20 +70,9 @@ export interface InnerLoopReactiveAttr {
 }
 
 /**
- * One inner loop level inside a composite renderItem.
- *
- * The `mode` discriminator selects the emission shape:
- *
- *   - `reactive`: full `mapArray(...)` with renderItem (template clone,
- *     key attr, components/events with inner-wrapped props, reactive text
- *     effects, recursive childLevels).
- *   - `static`: `forEach(...)` for setup-only (children are rendered
- *     into the SSR HTML); components/events use the raw param, no
- *     wrap, no template clone.
- *
- * Choosing the mode requires checking whether `inner.array` references
- * the outer loop param at *this* level (legacy O-8 fix). The builder
- * does that check; the stringifier just dispatches on `mode`.
+ * One inner loop level inside a composite renderItem: a full `mapArray(...)`
+ * with renderItem (template clone, key attr, components/events with
+ * inner-wrapped props, reactive text/attr effects, recursive childLevels).
  */
 export interface InnerLoopPlan {
   /** Unique suffix used in `__ic` / `__innerEl` / `__innerIdx` var names. */
@@ -101,21 +96,25 @@ export interface InnerLoopPlan {
    * `// Initialize <array> loop components and events` comments.
    */
   arraySrc: string
-  /** Inner loop parameter identifier (used by static forEach). */
+  /** Inner loop parameter identifier. */
   param: string
   /** Depth used by `keyAttrName(...)`. Same as the IR's `inner.depth`. */
   keyDepth: number
-  /**
-   * Per-mode emission data. Discriminator keeps each shape's required fields
-   * narrowed and prevents accidental cross-talk.
-   */
-  emit: InnerLoopReactiveEmit | InnerLoopStaticEmit
+  /** Emission data for this level's `mapArray` renderItem. */
+  emit: InnerLoopReactiveEmit
   /** Recursive child levels — narrowed-outer-param at build time. */
   childLevels: readonly InnerLoopPlan[]
   /** Outer loop param threaded into emitComponentAndEventSetup. */
   outerLoopParam: string | undefined
   /** Outer loop param destructuring metadata. */
   outerLoopParamBindings?: readonly LoopParamBinding[]
+  /**
+   * Outer loop's index param name, when present (#2861) — threaded into
+   * `emitComponentAndEventSetup` so a component prop / event handler in
+   * this row that closes over the OUTER loop's index reads it through the
+   * live accessor instead of a value frozen at row-creation time.
+   */
+  outerLoopIndex?: string | null
 }
 
 export interface InnerLoopReactiveEmit {
@@ -164,24 +163,4 @@ export interface InnerLoopReactiveEmit {
   childRefs: readonly LoopChildRefBinding[]
 }
 
-export interface InnerLoopStaticEmit {
-  mode: 'static'
-  /** Raw key expression (used as-is in setAttribute) — null when no key. */
-  rawKey: string | null
-  /**
-   * Body-entry statements (see `PreludeStatements`) emitted at the top of
-   * the static `forEach(...)` body, after the existence guard. Holds the
-   * inner `.map()` callback preamble locals (#1064). Emitted unwrapped
-   * because the forEach param is the literal item, not a signal accessor —
-   * no accessor rewrite is needed.
-   */
-  preludeStatements: PreludeStatements
-  /** Raw components (no inner-wrap; the static body has no signal accessor). */
-  components: readonly IRLoopChildComponent[]
-  /** Raw events (no inner-wrap). */
-  events: readonly LoopChildEvent[]
-  /** Imperative ref callbacks (unwrapped — static body has no signal accessor). */
-  childRefs: readonly LoopChildRefBinding[]
-}
-
 export type InnerLoopsPlan = readonly InnerLoopPlan[]

package/src/ir-to-client-js/control-flow/plan/lazy-conditional.ts

@@ -47,9 +47,11 @@
  *     defeating the hoist. (A literal `${` in authored TEXT would also refuse
  *     here; that is the safe direction — a false refusal costs the eager
  *     fallback, a false accept would ship a frozen arm.)
- *  4. **The condition does not read the loop INDEX.** `applyItem` and
- *     `applyOuter` have no index parameter, the same reason
- *     `ClassifiedLazyBinding.referencesIndex` refuses a binding.
+ *  4. (#2859 follow-up) A condition MAY read the loop index — it is
+ *     classified like any other binding (`classifyLazyBinding` in
+ *     `lazy-row-eligibility.ts`), which forces it into `applyItem` so a
+ *     reorder (a position change the reconciler tracks on `entry.index`)
+ *     re-evaluates it, not just an item change.
  *
  * Everything refused carries a specific reason, which `lazyRowEligibility`
  * passes through unchanged.
@@ -99,13 +101,9 @@ function wiringOn(branch: LoopChildBranchSummary): string[] {
 
 /**
  * Decide whether `cond` can be driven from the loop-level apply bodies.
- *
- * `indexParam` is the loop's index parameter name as the emitter uses it
- * (`elem.index || '__idx'`); a condition reading it is refused.
  */
 export function analyzeLazyConditional(
   cond: LoopChildConditional,
-  indexParam: string,
   arms: PreparedArms,
 ): LazyConditionalAnalysis {
   for (const [label, branch] of [['true', cond.whenTrue], ['false', cond.whenFalse]] as const) {
@@ -135,9 +133,12 @@ export function analyzeLazyConditional(
   if (!cond.conditionFreeIdentifiers) {
     return NO(`conditional on slot ${cond.slotId}: condition has no analyzable identifier set`)
   }
-  if (cond.conditionFreeIdentifiers.has(indexParam)) {
-    return NO(`conditional on slot ${cond.slotId}: condition reads the loop index parameter '${indexParam}'`)
-  }
+  // A condition reading the loop index (#2859 follow-up, widening from a hard
+  // refusal) is no longer refused here: the caller classifies the condition
+  // like any other binding (`classifyLazyBinding` in `lazy-row-eligibility.ts`),
+  // which forces `readsItem: true` for an index reference — the reconciler
+  // delivers the row's current position on `entry.index` the same way it
+  // delivers the item, so the condition is re-evaluated on a reorder too.
 
   return {
     lazySafe: true,

package/src/ir-to-client-js/control-flow/plan/lazy-preamble.ts

@@ -68,9 +68,10 @@
  *    markup, which is `preambleRegions` territory (refused separately).
  *  - No `builderNames`. Same shape as above, pinned explicitly so the reason
  *    names it rather than surfacing as a confusing "contains a call".
- *  - The preamble does not read the loop's INDEX parameter. `applyItem` and
- *    `applyOuter` have no index to give it — the same reason
- *    `ClassifiedLazyBinding.referencesIndex` refuses a binding.
+ *  - (#2859 follow-up) The preamble MAY read the loop's index parameter — it
+ *    survives into `freeNames` below like any other read, so a binding that
+ *    names this preamble local substitutes through to it and is classified
+ *    the same way a direct index reference is (forced into `applyItem`).
  *
  * Member access is deliberately NOT banned even though a getter could in
  * principle run code: a binding expression like `class={row.cls}` is already
@@ -130,9 +131,6 @@ const NO = (reason: string): LazyPreambleAnalysis => ({ lazySafe: false, reason
  * Decide whether `preamble` may be re-executed inside a lazy row's apply
  * bodies, and if so what it declares and reads.
  *
- * `indexParam` is the loop's index parameter name as the emitter uses it
- * (`elem.index || '__idx'`); a preamble reading it is refused.
- *
  * `primableNames` are the component's signal getters and memos — the only
  * callees a preamble initializer may invoke (see the module docstring). Pass
  * the same names `LazyRowScopeInfo` carries, so "primable here" and "primable
@@ -140,7 +138,6 @@ const NO = (reason: string): LazyPreambleAnalysis => ({ lazySafe: false, reason
  */
 export function analyzeLazyPreamble(
   preamble: MapCallbackPreamble | undefined,
-  indexParam: string,
   primableNames: ReadonlySet<string>,
 ): LazyPreambleAnalysis {
   if (!preamble) return NO_PREAMBLE
@@ -196,13 +193,14 @@ export function analyzeLazyPreamble(
     }
   }
 
-  // The index parameter does not exist in `applyItem` / `applyOuter`, and
-  // `createRow` receives it but the preamble must read the same values in
-  // every body it runs in. Same reason `referencesIndex` refuses a binding.
+  // A preamble reading the loop index (#2859 follow-up, widening from a hard
+  // refusal) is no longer refused here: `indexParam` survives into
+  // `freeNames` below, and any binding that names this preamble local
+  // substitutes through to it (`classifyLazyBinding`'s preamble handling),
+  // which classifies a free `indexParam` the same way a direct reference
+  // would — forcing the binding into `applyItem` so a reorder re-evaluates
+  // it via `entry.index`.
   const readNames = extractFreeIdentifiersFromStatementText(text)
-  if (readNames.has(indexParam) && !declaredNames.has(indexParam)) {
-    return NO(`map-callback preamble reads the loop index parameter '${indexParam}'`)
-  }
 
   const freeNames = new Set(readNames)
   for (const declared of declaredNames) freeNames.delete(declared)

package/src/ir-to-client-js/control-flow/plan/lazy-row-eligibility.ts

@@ -284,9 +284,15 @@ export function lazyRowEligibility(args: LazyRowEligibilityArgs): LazyRowEligibi
 
   // Per-binding gates.
   for (const b of bindings) {
-    if (b.referencesIndex) {
-      return NO(`binding on slot ${b.slotId} references the loop index parameter`)
-    }
+    // A binding that references the loop index (#2859 follow-up, widening
+    // from a hard refusal): `applyItem`/`applyOuter` have no index PARAMETER,
+    // but the reconciler tracks each entry's current position on `entry.index`
+    // (`LazyRowEntry.index`, `map-array-lazy.ts`) exactly like it tracks
+    // `entry.item` — a reorder is a position change the reconciler already
+    // detects, the same way an item change is. `classifyLazyBinding` forces
+    // `readsItem: true` for any binding with `referencesIndex`, so it is
+    // ALWAYS emitted into `applyItem`, and the runtime calls `applyItem` on a
+    // pure reorder too when `plan.indexDriven` (`LazyRowPlanData.readsIndex`).
     // An identifier set we could not compute at all is different in kind
     // from a name we CAN see but cannot prime. With `free === null` the
     // classifier knows nothing — not the outer reads, and not whether the
@@ -445,7 +451,11 @@ export function classifyLazyBinding(args: {
       return
     }
     if (name === indexParam) {
+      // The row's current position (#2859 follow-up) — the reconciler
+      // delivers it on `entry.index` exactly like it delivers the item on
+      // `entry.item`, so a binding that reads it is item-driven too.
       referencesIndex = true
+      readsItem = true
       return
     }
     if (INERT_BINDING_GLOBALS.has(name)) return

package/src/ir-to-client-js/control-flow/plan/loop-child-arm.ts

@@ -146,6 +146,13 @@ export interface BranchInnerLoop {
   outerLoopParam: string
   /** Outer loop param destructuring metadata. */
   outerLoopParamBindings?: readonly import('../../../types.ts').LoopParamBinding[]
+  /**
+   * Outer loop's index param name, when present (#2861) — threaded into
+   * `emitComponentAndEventSetup`'s own outer-wrap pass alongside
+   * `outerLoopParam`/`outerLoopParamBindings`, mirroring `InnerLoopPlan`'s
+   * field of the same name.
+   */
+  outerLoopIndex?: string | null
 }
 
 export type BranchInnerLoopsPlan = readonly BranchInnerLoop[]
@@ -206,4 +213,11 @@ export interface LoopChildConditionalPlan {
   whenFalseTemplateHtml: string
   whenTrueArm: LoopChildArmPlan
   whenFalseArm: LoopChildArmPlan
+  /**
+   * `wrappedCondition` reads a `.map()` callback preamble local (#2596,
+   * same field as `NestedConditionalPlan.readsPreamble` one level up) —
+   * the stringifier must run the row's preamble inside the getter passed
+   * to `insert()`; the local isn't otherwise in scope there.
+   */
+  readsPreamble?: boolean
 }

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

@@ -23,6 +23,7 @@ import type {
   TopLevelLoop,
 } from '../../types.ts'
 import type { IRLoopChildComponent } from '../../../types.ts'
+import type { SafeHtml } from '../../safe-html.ts'
 import type { SkeletonSlotPaths } from '../../html-template.ts'
 import type { ReactiveEffectsPlan } from './reactive-effects.ts'
 import type { InnerLoopsPlan } from './inner-loop.ts'
@@ -83,15 +84,16 @@ interface DynamicLoopCommon extends LoopPlanCommon {
 
 /**
  * A resolved preamble-patched region (#2389), ready to emit: `valueExpr` is
- * already wrapped with the loop-param accessor and, for a `joinArrayChild`
- * source, already carries the array-join ternary — the exact value
- * `irToHtmlTemplate` computes for the same node in the row template, so a
- * same-key update's re-patch stays byte-identical to what a fresh mount
- * would render.
+ * already wrapped with the loop-param accessor and already went through the
+ * child-splice door (`safe-html.ts`) — the exact value `irToHtmlTemplate`
+ * computes for the same node in the row template, so a same-key update's
+ * re-patch stays byte-identical to what a fresh mount would render. Typed
+ * `SafeHtml` because the region writer is an `innerHTML` write: only a
+ * value the door (or a named producer) vouched for may reach it.
  */
 export interface PreambleRegionPlan {
   slotId: string
-  valueExpr: string
+  valueExpr: SafeHtml
 }
 
 /** Per-item ref callback resolved against a child slot for emission (#1244). */
@@ -237,6 +239,8 @@ interface CompositeLoopVariant extends DynamicLoopCommon {
   loopParam: string
   /** Destructured-binding metadata for the loop param. */
   loopParamBindings: TopLevelLoop['paramBindings']
+  /** This loop's index param name, when it declares one (#2859). */
+  loopIndex: TopLevelLoop['index']
   /** Reactive effects rendered after the SSR/CSR split. */
   reactiveEffects: ReactiveEffectsPlan | null
   /**

package/src/ir-to-client-js/control-flow/shared.ts

@@ -17,6 +17,7 @@ import type { IRLoopChildComponent, LoopParamBinding } from '../../types.ts'
 import { preambleAnalysisText } from '../../types.ts'
 import { quotePropName, wrapLoopParamAsAccessor, irChildrenFreeIds, attrValueToString } from '../utils.ts'
 import { irChildrenToJsExpr, jsxChildrenPropGetterExpr } from '../html-template.ts'
+import { spliceChildValue } from '../safe-html.ts'
 import { emitListenerBlock } from './stringify/event-listener.ts'
 import { nameForRegistryRef } from '../component-scope.ts'
 import { BF_SCOPE, BF_HOST, BF_AT } from '@barefootjs/shared'
@@ -147,11 +148,12 @@ export function buildChildRefBindings(
   refs: readonly LoopChildRef[],
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  loopIndex?: string | null,
 ): readonly LoopChildRefBinding[] {
   if (refs.length === 0) return []
   return refs.map(r => ({
     childSlotId: r.childSlotId,
-    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings),
+    callback: wrapLoopParamAsAccessor(r.callback, loopParam, loopParamBindings, loopIndex),
   }))
 }
 
@@ -241,23 +243,27 @@ export function destructureLoopParam(
 /**
  * Resolve `IRLoop.preambleRegions` (#2389) into ready-to-emit
  * `PreambleRegionPlan`s: wrap each source expression with the loop-param
- * accessor and, for a `joinArrayChild` source, apply the same array-join
- * ternary `irToHtmlTemplate` uses for the identical node in the row
- * template — so the region-patch effect's re-render matches what a fresh
- * mount would have produced. Shared by the top-level (`build-loop.ts`) and
- * branch (`build-branch-loop.ts`) plain-loop-plan builders.
+ * accessor and hand it to the same door (`spliceChildValue`) the row
+ * template's `irToHtmlTemplate` uses for the identical node — so the
+ * region-patch effect's re-render (a `'markup'` claim writer, i.e. an
+ * `innerHTML` write) matches what a fresh mount would have produced, and
+ * the escape decision is made in exactly one place. Shared by the
+ * top-level (`build-loop.ts`) and branch (`build-branch-loop.ts`)
+ * plain-loop-plan builders.
  */
 export function buildPreambleRegionPlans(
   regions: readonly PreambleRegionSource[] | undefined,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
+  loopIndex?: string | null,
 ): readonly PreambleRegionPlan[] {
   if (!regions || regions.length === 0) return []
   return regions.map((r) => {
-    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings)
-    const valueExpr = r.joinArrayChild
-      ? `Array.isArray(${wrapped}) ? ${wrapped}.join('') : (${wrapped} ?? '')`
-      : `escapeText(${wrapped})`
+    const wrapped = wrapLoopParamAsAccessor(r.expr, loopParam, loopParamBindings, loopIndex)
+    // The region's row-template twin carries the same `slotId`, so the door
+    // takes the slotted arm; no `markupSlotIds` here — a loop-row slot's
+    // initial render is plain `escapeText`, matching `irToHtmlTemplate`.
+    const valueExpr = spliceChildValue({ expr: r.expr, slotId: r.slotId, joinArrayChild: r.joinArrayChild }, wrapped, {})
     return { slotId: r.slotId, valueExpr }
   })
 }
@@ -270,8 +276,9 @@ export function buildComponentPropsExpr(
   comp: { props: Array<{ name: string; value: import('../../types.ts').AttrValue; isEventHandler: boolean }>, children?: import('../../types.ts').IRNode[] },
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  loopIndex?: string | null,
 ): string {
-  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr: string) => expr
+  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr: string) => expr
   const entries = comp.props.map((p) => {
     if (p.isEventHandler) {
       const handlerExpr = attrValueToString(p.value) ?? 'undefined'
@@ -347,7 +354,20 @@ export function buildDepthLevels(
   }))
 }
 
-/** Emit a single addEventListener call for a child event on a given element. */
+/**
+ * Emit a single addEventListener call for a child event on a given element.
+ *
+ * This is a DIRECT, one-time listener attach (composite/inner/conditional-arm
+ * loop shapes) — unlike the top-level delegated click dispatcher
+ * (`build-event-delegation.ts`), which re-derives the current index at click
+ * time via `arr.findIndex(...)` and is unaffected by this. A handler wired
+ * here closes over whatever `renderItem` bound its raw index parameter to at
+ * ROW CREATION time, so a reference to it needs the same accessor-call
+ * rewrite as every other loop-index read in this row (#2859) — otherwise a
+ * row that survives a same-key reorder keeps firing the handler with the
+ * stale, as-created index forever, the click-handler analogue of the
+ * render-output bug #2859 itself fixes.
+ */
 function emitEventSetup(
   ls: string[],
   indent: string,
@@ -356,8 +376,9 @@ function emitEventSetup(
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   bodyIsMultiRoot: boolean = false,
+  loopIndex?: string | null,
 ): void {
-  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings) : ev.handler
+  const handler = loopParam ? wrapLoopParamAsAccessor(ev.handler, loopParam, loopParamBindings, loopIndex) : ev.handler
   emitListenerBlock(ls, indent, elVar, ev.childSlotId, '__e', ev.eventName, handler, 'dom', bodyIsMultiRoot)
 }
 
@@ -412,14 +433,15 @@ export function emitComponentAndEventSetup(
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
   bodyIsMultiRoot: boolean = false,
+  loopIndex?: string | null,
 ): void {
-  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings) : (expr: string) => expr
+  const wrap = loopParam ? (expr: string) => wrapLoopParamAsAccessor(expr, loopParam, loopParamBindings, loopIndex) : (expr: string) => expr
   // Multi-root loop bodies (#1212) must search the item's sibling roots
   // and the pre-insertion `__bfExtras` stash; `upsertChildItem` wraps the
   // single-root `upsertChild` semantics in that walk.
   const upsertFn = bodyIsMultiRoot ? 'upsertChildItem' : 'upsertChild'
   for (const comp of comps) {
-    const propsExpr = buildComponentPropsExpr(comp, loopParam, loopParamBindings)
+    const propsExpr = buildComponentPropsExpr(comp, loopParam, loopParamBindings, loopIndex)
     // Check if children are text-equivalent and reference the loop param — if so,
     // emit a createEffect to reactively update textContent when the signal changes.
     // Text-equivalent: expression, text, or conditional with text-only branches.
@@ -429,7 +451,8 @@ export function emitComponentAndEventSetup(
     const rawChildrenExpr = isTextOnly ? irChildrenToJsExpr(comp.children!) : null
     const childrenFreeIds = isTextOnly && comp.children ? irChildrenFreeIds(comp.children) : undefined
     const childrenRefsLoop = loopParam != null && rawChildrenExpr != null && childrenFreeIds != null
-      && exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings })
+      && (exprRefsLoopBinding(childrenFreeIds, { param: loopParam, paramBindings: loopParamBindings })
+        || (!!loopIndex && childrenFreeIds.has(loopIndex)))
 
     const slotIdLit = comp.slotId ? `'${comp.slotId}'` : 'null'
     const keyProp = comp.props.find(p => p.name === 'key')
@@ -449,7 +472,7 @@ export function emitComponentAndEventSetup(
     }
   }
   for (const ev of events) {
-    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot)
+    emitEventSetup(ls, indent, elVar, ev, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex)
   }
 }
 

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

@@ -53,6 +53,7 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     innerLoops,
     loopParam,
     loopParamBindings,
+    loopIndex,
     reactiveEffects,
     childRefs,
     branchClearChildren,
@@ -124,7 +125,7 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     // variant whose tail needs the row already connected.
     mountRow: true,
   })
-  emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot)
+  emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot, loopIndex)
   if (innerLoops.length > 0) {
     stringifyInnerLoops(lines, innerLoops, bodyIndent, pc)
   }