@barefootjs/jsx 0.25.0 → 0.26.0

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

@@ -3,17 +3,20 @@
  *
  * Decisions resolved at build time (no longer in the stringifier):
  *   1. Group reactive attrs by `childSlotId` (one qsa() lookup per slot).
+ *      `attrs` only ever carries outer-scope entries — the collector that
+ *      produces it already stops descending into reactive conditionals
+ *      (#2347), so no branch/outer partition is needed here.
  *   2. Wrap every attr / text / condition expression via
  *      `wrapLoopParamAsAccessor` so the stringifier never touches the wrap.
- *   3. Partition reactive texts: those whose slot id appears inside any
- *      conditional branch HTML must be emitted *inside* that branch's
- *      `bindEvents` (insert() may replace the DOM nodes), the rest stay in
- *      the outer renderItem scope.
+ *   3. Each conditional arm gets its own reactive attrs / texts directly
+ *      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.
  *   5. Recurse into the per-arm sub-plans via `LoopChildArmPlan` —
- *      events, child component inits, inner loops, nested conditionals.
- *      No legacy passthrough remains.
+ *      events, child component inits, inner loops, nested conditionals,
+ *      attrs, texts. No legacy passthrough remains.
  */
 
 import type {
@@ -28,15 +31,14 @@ import { pickAttrMeta } from '../../../types.ts'
 import { wrapLoopParamAsAccessor } from '../../utils.ts'
 import { addCondAttrToTemplate } from '../../html-template.ts'
 import {
+  buildArmAttrsPlan,
+  buildArmTextsPlan,
   buildBranchChildComponentInitsPlan,
   buildBranchEventBindingsPlan,
   buildBranchInnerLoopsPlan,
   buildLoopChildConditionalsPlan,
 } from './build-loop-child-arm.ts'
-import type {
-  LoopChildArmPlan,
-  LoopChildArmText,
-} from './loop-child-arm.ts'
+import type { LoopChildArmPlan } from './loop-child-arm.ts'
 import type {
   NestedConditionalPlan,
   ReactiveAttrSlot,
@@ -84,57 +86,31 @@ export function buildReactiveEffectsPlan(
     })
   }
 
-  // 2. Identify text slots that must be deferred into a conditional branch's
-  //    bindEvents. The check mirrors the legacy `cond.whenXxxHtml.includes(
-  //    'bf:' + slotId)` heuristic — the rendered template HTML is the only
-  //    pre-runtime signal available.
-  const textSlotsInConditionals = new Set<string>()
-  if (conditionals) {
-    for (const cond of conditionals) {
-      for (const text of texts) {
-        if (
-          cond.whenTrueHtml.includes(`bf:${text.slotId}`) ||
-          cond.whenFalseHtml.includes(`bf:${text.slotId}`)
-        ) {
-          textSlotsInConditionals.add(text.slotId)
-        }
-      }
-    }
-  }
-
-  const outerTexts: ReactiveTextEffect[] = []
-  for (const text of texts) {
-    if (textSlotsInConditionals.has(text.slotId)) continue
-    outerTexts.push({
-      slotId: text.slotId,
-      wrappedExpression: wrap(text.expression),
-    })
-  }
+  // 2. Outer text effects. `texts` (elem.bindings.reactiveTexts) is produced
+  //    by `collectLoopChildReactiveTexts`, which already stops descending
+  //    into any reactive (slotId'd) conditional — so every entry here is
+  //    genuinely outer-scope, no HTML-substring partition needed (#2347).
+  const outerTexts: ReactiveTextEffect[] = texts.map(text => ({
+    slotId: text.slotId,
+    wrappedExpression: wrap(text.expression),
+  }))
 
-  // 3. Per-conditional plans. Branch-scoped texts are partitioned by which
-  //    branch HTML mentions the slot (declaration order preserved). The
-  //    arm bodies are fully Plan-built — no legacy passthrough.
+  // 3. Per-conditional plans. Each arm's own reactive attrs / texts come
+  //    from `LoopChildBranchSummary.reactiveAttrs` / `.reactiveTexts` —
+  //    collected directly on that branch's subtree (#2347) — instead of a
+  //    flat list partitioned by searching the rendered branch HTML for a
+  //    `bf:<slotId>` marker. The arm bodies are fully Plan-built — no
+  //    legacy passthrough.
   const conditionalPlans: NestedConditionalPlan[] = []
   if (conditionals) {
     for (const cond of conditionals) {
-      const trueTexts: LoopChildArmText[] = []
-      const falseTexts: LoopChildArmText[] = []
-      for (const text of texts) {
-        if (!textSlotsInConditionals.has(text.slotId)) continue
-        const wrapped: LoopChildArmText = {
-          slotId: text.slotId,
-          wrappedExpression: wrap(text.expression),
-        }
-        if (cond.whenTrueHtml.includes(`bf:${text.slotId}`)) trueTexts.push(wrapped)
-        if (cond.whenFalseHtml.includes(`bf:${text.slotId}`)) falseTexts.push(wrapped)
-      }
       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, trueTexts, wrap, loopParam, loopParamBindings, profileComponentName),
-        whenFalseArm: buildOuterArm(cond.whenFalse, falseTexts, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenTrueArm: buildOuterArm(cond.whenTrue, wrap, loopParam, loopParamBindings, profileComponentName),
+        whenFalseArm: buildOuterArm(cond.whenFalse, wrap, loopParam, loopParamBindings, profileComponentName),
       })
     }
   }
@@ -149,7 +125,6 @@ export function buildReactiveEffectsPlan(
 
 function buildOuterArm(
   branch: LoopChildBranchSummary,
-  texts: readonly LoopChildArmText[],
   wrap: (expr: string) => string,
   loopParam: string,
   loopParamBindings: readonly LoopParamBinding[] | undefined,
@@ -179,7 +154,8 @@ function buildOuterArm(
       loopParam,
       loopParamBindings,
     }),
-    texts,
+    attrs: buildArmAttrsPlan(branch.reactiveAttrs, wrap),
+    texts: buildArmTextsPlan(branch.reactiveTexts, wrap),
   }
 }
 

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

@@ -152,8 +152,7 @@ export type BranchInnerLoopsPlan = readonly BranchInnerLoop[]
 
 /**
  * One branch-scoped reactive text effect (slotId + already-wrapped
- * expression). The top-level outer conditional's arms emit these inside
- * `bindEvents`; recursive nested conditionals never carry texts.
+ * expression), attached inside the arm's `bindEvents`.
  */
 export interface LoopChildArmText {
   slotId: string
@@ -169,16 +168,23 @@ export interface LoopChildArmText {
  *   - `childComponents`   — `buildBranchChildComponentInitsPlan`
  *   - `innerLoops`        — `buildBranchInnerLoopsPlan`
  *   - `nestedConditionals`— `buildLoopChildConditionalPlan` (recursive)
+ *   - `attrs`             — reactive attrs on elements directly inside the
+ *     arm, grouped by slot (#2347)
+ *   - `texts`             — reactive text interpolations on elements
+ *     directly inside the arm (#2347)
  *
- * `texts` is only populated for the *outer* conditional — the recursion
- * branch (`emitNestedLoopChildConditionals` legacy) never threaded text
- * effects through, so nested arms always carry an empty list.
+ * Both `attrs` and `texts` are collected per-arm at every nesting depth —
+ * an element inside a doubly-nested conditional gets its bindings from the
+ * innermost enclosing arm, never from an outer scope's own initial-clone
+ * query, so a branch swap (`insert()` mounting a fresh node) never leaves a
+ * binding pointed at a detached element.
  */
 export interface LoopChildArmPlan {
   events: BranchEventBindingsPlan
   childComponents: BranchChildComponentInitsPlan
   innerLoops: BranchInnerLoopsPlan
   nestedConditionals: readonly LoopChildConditionalPlan[]
+  attrs: readonly import('./reactive-effects.ts').ReactiveAttrSlot[]
   texts: readonly LoopChildArmText[]
 }
 

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

@@ -13,6 +13,7 @@
 
 import { varSlotId, DATA_BF_PH, keyAttrName, profileBindingId } from '../../utils.ts'
 import { emitComponentAndEventSetup } from '../shared.ts'
+import { emitAttrUpdate } from '../../emit-reactive.ts'
 import { templateRootIsSvg } from './template-parse.ts'
 import { emitListenerLine } from './event-listener.ts'
 import { nameForRegistryRef } from '../../component-scope.ts'
@@ -23,6 +24,43 @@ import type {
   LoopChildArmPlan,
   LoopChildConditionalPlan,
 } from '../plan/loop-child-arm.ts'
+import type { ReactiveAttrSlot } from '../plan/reactive-effects.ts'
+
+/**
+ * Emit reactive attribute effects for one arm — one qsa() per slot, then one
+ * `createDisposableEffect` per attr on that slot, pushed onto the caller's
+ * `__disposers` array. Mirrors the outer renderItem-scope attr emission in
+ * `stringifyReactiveEffects` (#2347): binding attrs inside the arm that owns
+ * the element (instead of an outer scope's own initial clone) means a branch
+ * swap's fresh `insert()`-mounted node is always the one the effect targets.
+ *
+ * `createDisposableEffect` (not `createEffect`) so the caller's `bindEvents`
+ * can return a cleanup that disposes this effect on the NEXT branch swap —
+ * otherwise it would keep running against the node this branch swap just
+ * detached, and every subsequent swap stacks another orphaned effect.
+ * Callers must declare `const __disposers = []` before emitting this and
+ * return `() => __disposers.forEach(d => d())` from `bindEvents`.
+ */
+export function stringifyBranchReactiveAttrs(
+  lines: string[],
+  plan: readonly ReactiveAttrSlot[],
+  indent: string,
+  pc?: string,
+): void {
+  for (const slot of plan) {
+    const varName = `__ra_${varSlotId(slot.slotId)}`
+    lines.push(`${indent}{ const ${varName} = qsa(__branchScope, '[bf="${slot.slotId}"]')`)
+    lines.push(`${indent}if (${varName}) {`)
+    for (const attr of slot.attrs) {
+      lines.push(`${indent}  __disposers.push(createDisposableEffect(() => {`)
+      for (const stmt of emitAttrUpdate(varName, attr.attrName, attr.wrappedExpression, attr.meta)) {
+        lines.push(`${indent}    ${stmt}`)
+      }
+      lines.push(`${indent}  }${profileBindingId(pc, slot.slotId)}))`)
+    }
+    lines.push(`${indent}} }`)
+  }
+}
 
 /**
  * Emit `addEventListener` setup for a loop-cond branch arm. One qsa() per
@@ -176,7 +214,15 @@ function stringifyLoopChildConditional(
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
 
-function stringifyLoopChildArm(
+/**
+ * Emit one arm's full body: events, child component inits, inner loops,
+ * then a disposable section (reactive attrs, nested conditionals, texts)
+ * whose aggregate cleanup `bindEvents` returns to `insert()` (#2347 follow-up).
+ * Shared by both the loop-scoped-conditional stringifier in this file and
+ * the outer (top-of-loop-item) conditional stringifier in
+ * `reactive-effects.ts` — the two arm shapes are identical.
+ */
+export function stringifyLoopChildArm(
   lines: string[],
   arm: LoopChildArmPlan,
   armIndent: string,
@@ -185,10 +231,38 @@ function stringifyLoopChildArm(
   stringifyBranchEventBindings(lines, arm.events, armIndent)
   stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
   stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
+
+  // Disposable section: reactive attrs + text effects + nested conditionals.
+  // `bindEvents` returns the aggregate cleanup so `insert()` disposes this
+  // arm's scoped effects (and any nested insert()'s own effect tree) before
+  // the NEXT branch swap — otherwise they'd keep running against the node
+  // this swap just detached, stacking another orphaned effect on every
+  // subsequent toggle (#2347 follow-up).
+  const hasDisposables = arm.attrs.length > 0 || arm.texts.length > 0 || arm.nestedConditionals.length > 0
+  if (!hasDisposables) return
+
+  lines.push(`${armIndent}const __disposers = []`)
+  stringifyBranchReactiveAttrs(lines, arm.attrs, armIndent, pc)
+
+  // Nested conditionals: each inner `insert()` is wrapped in its own
+  // disposable effect so disposing THIS entry cascades to whatever
+  // reactive state that insert() set up internally (mirrors the top-level
+  // conditional's nested-conditional handling in stringify/insert.ts).
+  for (const cond of arm.nestedConditionals) {
+    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => {`)
+    stringifyLoopChildConditional(lines, cond, `${armIndent}  `, pc)
+    lines.push(`${armIndent}}))`)
+  }
+
   for (const text of arm.texts) {
+    // __bfText (not a naive `.textContent = String(...)`) so a Child-position
+    // expression whose value is a live Node (e.g. a hoisted `renderNode={(n)
+    // => <PillNode/>}` callback, #1213) is spliced into the slot by identity
+    // instead of being stringified to "[object HTMLElement]" (#2347).
     const varName = `__rt_${varSlotId(text.slotId)}`
-    lines.push(`${armIndent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-    lines.push(`${armIndent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
+    lines.push(`${armIndent}let ${varName} = $t(__branchScope, '${text.slotId}')[0]`)
+    lines.push(`${armIndent}__disposers.push(createDisposableEffect(() => { ${varName} = __bfText(${varName}, ${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}))`)
   }
+
+  lines.push(`${armIndent}return () => __disposers.forEach(d => d())`)
 }

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

@@ -10,13 +10,7 @@
 
 import { varSlotId, profileBindingId } from '../../utils.ts'
 import { emitAttrUpdate } from '../../emit-reactive.ts'
-import {
-  stringifyBranchChildComponentInits,
-  stringifyBranchEventBindings,
-  stringifyBranchInnerLoops,
-  stringifyLoopChildConditionals,
-} from './loop-child-arm.ts'
-import type { LoopChildArmPlan, LoopChildArmText } from '../plan/loop-child-arm.ts'
+import { stringifyLoopChildArm } from './loop-child-arm.ts'
 import type {
   NestedConditionalPlan,
   ReactiveEffectsPlan,
@@ -126,28 +120,12 @@ function emitOuterConditional(
   lines.push(`${indent}insert(${elVar}, '${cond.slotId}', () => ${cond.wrappedCondition}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenTrueTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenTrueArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenTrueArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}, {`)
   lines.push(`${indent}  template: () => { const __slots = []; return { html: \`${cond.whenFalseTemplateHtml}\`, slots: __slots } },`)
   lines.push(`${indent}  bindEvents: (__branchScope, { isFirstRun: __bfFirstRun = false } = {}) => {`)
-  emitArmBody(lines, cond.whenFalseArm, armIndent, pc)
+  stringifyLoopChildArm(lines, cond.whenFalseArm, armIndent, pc)
   lines.push(`${indent}  }`)
   lines.push(`${indent}}${profileBindingId(pc, cond.slotId)})`)
 }
-
-function emitArmBody(lines: string[], arm: LoopChildArmPlan, armIndent: string, pc: string | undefined): void {
-  stringifyBranchEventBindings(lines, arm.events, armIndent)
-  stringifyBranchChildComponentInits(lines, arm.childComponents, armIndent)
-  stringifyBranchInnerLoops(lines, arm.innerLoops, armIndent, pc)
-  stringifyLoopChildConditionals(lines, arm.nestedConditionals, armIndent, pc)
-  for (const text of arm.texts) {
-    emitArmText(lines, armIndent, text, pc)
-  }
-}
-
-function emitArmText(lines: string[], indent: string, text: LoopChildArmText, pc: string | undefined): void {
-  const varName = `__rt_${varSlotId(text.slotId)}`
-  lines.push(`${indent}{ const [${varName}] = $t(__branchScope, '${text.slotId}')`)
-  lines.push(`${indent}if (${varName}) createEffect(() => { ${varName}.textContent = String(${text.wrappedExpression}) }${profileBindingId(pc, text.slotId)}) }`)
-}

package/src/ir-to-client-js/reactivity.ts

@@ -265,14 +265,32 @@ export function collectEventHandlersFromIR(node: IRNode): string[] {
 /**
  * Traverse an IR tree depth-first, calling visitor for each element node.
  * Shared by collectConditionalBranchEvents, collectConditionalBranchRefs,
- * and collectLoopChildEvents to avoid duplicating the traversal logic.
+ * collectLoopChildRefs, and collectLoopChildEvents to avoid duplicating the
+ * traversal logic.
  *
  * 'loop' is intentionally skipped. Nested .map() event delegation requires
  * a different approach (nested data-key lookup + inner loop variable
  * resolution) that isn't implemented yet. See memory:
  * compiler-reconcile-templates-events.md
+ *
+ * `stopAtReactiveConditionals` (#2347): when true, a nested `conditional`
+ * with a `slotId` is NOT descended into — the caller is one that also
+ * separately collects that nested conditional via `collectBranchConditionals`
+ * / `collectLoopChildConditionals` and gives it its own `insert()` call, so
+ * descending here too would double-bind (against the enclosing scope's own
+ * initial template node, in addition to the nested conditional's own
+ * `bindEvents` against whatever node `insert()` mounts). Defaults to false
+ * because several callers (e.g. a plain nested `.map()`'s own per-item
+ * bindings, `collectInnerLoops`'s non-branch path) have no such sibling
+ * collector — for those, a slotId'd conditional's content is ONLY ever
+ * reachable by unconditionally descending here, since it's inlined directly
+ * into that scope's template rather than switched via its own `insert()`.
  */
-function traverseElements(node: IRNode, visitor: (el: IRElement, domDepth: number) => void): void {
+function traverseElements(
+  node: IRNode,
+  visitor: (el: IRElement, domDepth: number) => void,
+  stopAtReactiveConditionals = false,
+): void {
   walkIR(node, 0, {
     element: ({ node: el, scope: domDepth, descend }) => {
       visitor(el, domDepth)
@@ -281,12 +299,25 @@ function traverseElements(node: IRNode, visitor: (el: IRElement, domDepth: numbe
     loop: () => {
       // skip: nested-loop event delegation is handled separately
     },
+    ...(stopAtReactiveConditionals
+      ? {
+          conditional: ({ node: c, scope: domDepth, descend }: { node: IRNode & { type: 'conditional' }; scope: number; descend: (s: number) => void }) => {
+            if (!c.slotId) descend(domDepth)
+          },
+        }
+      : {}),
   })
 }
 
 /**
  * Collect events from a conditional branch for use with insert().
  * These events will be bound via the branch's bindEvents function.
+ *
+ * Always stops at a nested reactive conditional (#2347): every caller
+ * (`summarizeBranch`, `summarizeLoopChildBranch`) also collects that nested
+ * conditional separately (`collectBranchConditionals` /
+ * `collectLoopChildConditionals`), so its own `insert()`/bindEvents owns
+ * its events.
  */
 export function collectConditionalBranchEvents(node: IRNode): ConditionalBranchEvent[] {
   const events: ConditionalBranchEvent[] = []
@@ -300,13 +331,17 @@ export function collectConditionalBranchEvents(node: IRNode): ConditionalBranchE
         })
       }
     }
-  })
+  }, true)
   return events
 }
 
 /**
  * Collect refs from a conditional branch for use with insert().
  * These refs will be called via the branch's bindEvents function.
+ *
+ * Always stops at a nested reactive conditional (#2347): its sole caller
+ * (`summarizeBranch`) also collects that nested conditional separately via
+ * `collectBranchConditionals`, so its own `insert()`/bindEvents owns its refs.
  */
 export function collectConditionalBranchRefs(node: IRNode): ConditionalBranchRef[] {
   const refs: ConditionalBranchRef[] = []
@@ -317,7 +352,7 @@ export function collectConditionalBranchRefs(node: IRNode): ConditionalBranchRef
         callback: el.ref,
       })
     }
-  })
+  }, true)
   return refs
 }
 
@@ -511,12 +546,21 @@ function traverseForComponents(
  * Includes expressions that read signals OR reference the loop parameter.
  * With per-item signals, loop param access (item().text) is reactive
  * because item is a signal accessor.
+ *
+ * `stopAtReactiveConditionals` (#2347): pass true only when the caller also
+ * separately collects nested reactive conditionals (via
+ * `collectLoopChildConditionals`) and gives each its own `insert()` /
+ * bindEvents — otherwise a text inside such a conditional would bind twice.
+ * Defaults to false: some callers (e.g. a plain nested `.map()`'s own
+ * per-item bindings) have no sibling conditional collector, so a slotId'd
+ * conditional's inlined content is only ever reachable by descending here.
  */
 export function collectLoopChildReactiveTexts(
   node: IRNode,
   ctx: ClientJsContext,
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  stopAtReactiveConditionals = false,
 ): LoopChildReactiveText[] {
   const texts: LoopChildReactiveText[] = []
   walkIR(node, false, {
@@ -549,8 +593,13 @@ export function collectLoopChildReactiveTexts(
         ...(expanded.freeIds !== undefined && { freeIdentifiers: expanded.freeIds }),
       })
     },
-    conditional: ({ descend }) => {
-      descend(true)
+    conditional: ({ node: c, descend }) => {
+      // When stopAtReactiveConditionals is set, a reactive conditional
+      // (slotId set) gets its own insert() call that rebinds its branch
+      // text effects independently — descending here too would bind the
+      // same expression twice, once against the enclosing scope's initial
+      // node and once against insert()'s mounted node (#2347).
+      if (!stopAtReactiveConditionals || !c.slotId) descend(true)
     },
   })
   return texts
@@ -560,12 +609,17 @@ export function collectLoopChildReactiveTexts(
  * Collect reactive attributes from loop children.
  * These are dynamic attributes that read signals and need createEffect
  * to update the DOM when signals change.
+ *
+ * `stopAtReactiveConditionals` (#2347): see `collectLoopChildReactiveTexts` —
+ * same semantics. Pass true only when the caller also separately collects
+ * nested reactive conditionals and gives each its own `insert()`.
  */
 export function collectLoopChildReactiveAttrs(
   node: IRNode,
   ctx: ClientJsContext,
   loopParam?: string,
   loopParamBindings?: readonly LoopParamBinding[],
+  stopAtReactiveConditionals = false,
 ): LoopChildReactiveAttr[] {
   const attrs: LoopChildReactiveAttr[] = []
   traverseElements(node, (el) => {
@@ -617,6 +671,6 @@ export function collectLoopChildReactiveAttrs(
         })
       }
     }
-  })
+  }, stopAtReactiveConditionals)
   return attrs
 }

package/src/ir-to-client-js/types.ts

@@ -512,6 +512,19 @@ export interface LoopChildBranchSummary {
   conditionals?: LoopChildConditional[]
   /** Events on elements inside the branch — attached via insert() bindEvents (#839). */
   events?: ConditionalBranchEvent[]
+  /**
+   * Reactive attrs on elements directly inside the branch — attached via
+   * insert() bindEvents (#2347). Collected loop-param-aware so `u().active`
+   * style loop-item accessors classify as reactive; stops at any further
+   * nested reactive conditional (which gets its own insert() + arm).
+   */
+  reactiveAttrs?: LoopChildReactiveAttr[]
+  /**
+   * Reactive text interpolations on elements directly inside the branch —
+   * attached via insert() bindEvents (#2347). Same loop-param-aware /
+   * nested-conditional-stopping semantics as `reactiveAttrs`.
+   */
+  reactiveTexts?: LoopChildReactiveText[]
 }
 
 export interface LoopChildConditional {

package/src/rich-type-refusal.ts

@@ -99,10 +99,11 @@ function pushDiagnostic(
   // `toLocaleDateString` has a catalogued explicit-input form (#2324 slice
   // 2) — point the fix at it instead of the generic escape hatches alone.
   // The implicit-environment forms (zero-arg, locale-only, non-literal
-  // locale, IANA timeZone) stay refused by design.
+  // locale, an unverifiable timeZone literal) stay refused by design;
+  // canonical IANA zone literals compile since #2344.
   const suggestion =
     method === 'toLocaleDateString' && typeName === 'Date'
-      ? "Pass a literal locale and an explicit literal timeZone — .toLocaleDateString('ja-JP', { timeZone: 'UTC' }) (or a fixed '±HH:MM' offset) — to compile it to the format_date helper; for a runtime locale, resolve the pattern in your i18n layer and use formatDate(date, pattern, tz) from @barefootjs/client. Alternatively add /* @client */ or pre-compute server-side."
+      ? "Pass a literal locale and an explicit literal timeZone — .toLocaleDateString('ja-JP', { timeZone: 'UTC' }), a fixed '±HH:MM' offset, or a canonical IANA zone ID like 'Asia/Tokyo' (exact case; #2344) — to compile it to the format_date helper; for a runtime locale, resolve the pattern in your i18n layer and use formatDate(date, pattern, tz) from @barefootjs/client. Alternatively add /* @client */ or pre-compute server-side."
       : 'Add /* @client */ to evaluate this expression on the client only, or pre-compute the value server-side.'
   errors.push({
     code: ErrorCodes.UNSUPPORTED_JSX_PATTERN,

package/src/to-locale-date-lowering.ts

@@ -34,8 +34,15 @@
  *     there, feeding `formatDate` directly. An OPTIONAL union prop also
  *     declines: `undefined` at runtime makes real `toLocaleDateString` read
  *     the host locale, which no frozen pattern table can reproduce;
- *   - an IANA `timeZone` name — couples output to the host's tzdata version
- *     (only `'UTC'` and fixed `±HH:MM` offsets are deterministic);
+ *   - an IANA `timeZone` literal the build machine cannot verify (#2344):
+ *     a named zone IS admitted when the build's own `Intl` echoes it back
+ *     verbatim from `resolvedOptions().timeZone` — the canonical primary
+ *     ID, the one spelling every backend's tzdata resolves identically (the
+ *     runtime helpers resolve it through Go `time.LoadLocation`, Ruby
+ *     tzinfo, PHP `DateTimeZone`, Perl `DateTime::TimeZone`, Python
+ *     `zoneinfo`, Rust `chrono-tz`). Non-canonical case, link/alias names
+ *     the probe canonicalizes away, and unknown zones all decline — the
+ *     probe-and-verify discipline of #2334, applied to tz;
  *   - an options bag the probe cannot reproduce EXACTLY in the token+table
  *     vocabulary — era, dayPeriod, 2-digit year, narrow name forms,
  *     non-literal option values ("faithful or loud", never approximate);
@@ -57,17 +64,46 @@ import { resolveReceiverType, baseTypeName } from './rich-type-evidence.ts'
 import { typeReachesDate } from './date-lowering.ts'
 
 /**
- * `timeZone` literals the lowering admits: `'UTC'` or a fixed `±HH:MM`
- * offset **within ECMA-402's valid offset range** (hours 00–23, minutes
- * 00–59). An out-of-range shape like `'+25:00'` or `'+99:99'` must DECLINE
- * (→ BF021), not lower: real `toLocaleDateString` throws a RangeError on
- * it, so compiling it would render a nonsense offset on the template
- * adapters while the JS-native path (Hono, and the pre-rewrite semantics
- * the sugar stands in for) crashes — the exact divergence the sugar exists
- * to rule out.
+ * `timeZone` literals the lowering admits without probing: `'UTC'` or a
+ * fixed `±HH:MM` offset **within ECMA-402's valid offset range** (hours
+ * 00–23, minutes 00–59). An out-of-range shape like `'+25:00'` or
+ * `'+99:99'` must DECLINE (→ BF021), not lower: real `toLocaleDateString`
+ * throws a RangeError on it, so compiling it would render a nonsense
+ * offset on the template adapters while the JS-native path (Hono, and the
+ * pre-rewrite semantics the sugar stands in for) crashes — the exact
+ * divergence the sugar exists to rule out. Named IANA zones are admitted
+ * through {@link isBuildResolvableTimeZone} instead (#2344).
  */
 export const TO_LOCALE_TZ_RE = /^(?:UTC|[+-](?:[01]\d|2[0-3]):[0-5]\d)$/
 
+/** Build-time probe cache: tz literal → verified-canonical? */
+const tzProbeCache = new Map<string, boolean>()
+
+/**
+ * Probe-and-verify a named-zone `timeZone` literal against the build
+ * machine's own `Intl` (#2344, the #2334 discipline applied to tz): admit
+ * it iff `resolvedOptions().timeZone` echoes the literal back VERBATIM.
+ * The echo check is what pins the canonical primary IANA ID — `Intl`
+ * itself accepts case-folded spellings and link/alias names but
+ * canonicalizes them in `resolvedOptions()`, and those non-canonical
+ * spellings are exactly where backend tzdata layers disagree (Go/Python/
+ * Ruby/Rust resolve the exact ID set; PHP folds case; link availability
+ * varies by tzdata vintage). Anything the probe can't verify declines
+ * (→ BF021) — the `formatDate` primitive stays available for edge cases.
+ */
+export function isBuildResolvableTimeZone(value: string): boolean {
+  const cached = tzProbeCache.get(value)
+  if (cached !== undefined) return cached
+  let verified: boolean
+  try {
+    verified = new Intl.DateTimeFormat('en-US', { timeZone: value }).resolvedOptions().timeZone === value
+  } catch {
+    verified = false
+  }
+  tzProbeCache.set(value, verified)
+  return verified
+}
+
 /**
  * Probe instant for pattern derivation: 2001-02-03 UTC. Month and day are
  * distinct single-digit values, so the rendered part text distinguishes both
@@ -452,8 +488,9 @@ export function matchToLocaleDateStringCall(
   if (callee.kind !== 'member' || callee.computed) return null
   if (callee.property !== 'toLocaleDateString' || args.length !== 2) return null
   const [locale, options] = args
-  // Options bag: `timeZone` is REQUIRED (a literal 'UTC' | valid ±HH:MM —
-  // its omission would read the host timezone); every OTHER key rides into
+  // Options bag: `timeZone` is REQUIRED (a literal 'UTC' | valid ±HH:MM |
+  // probe-verified canonical IANA zone (#2344) — its omission would read
+  // the host timezone); every OTHER key rides into
   // the Intl probe as-is when its value is a string literal (#2334's
   // fidelity rule: admit any literal options bag the probe can reproduce
   // exactly, decline everything else — dateStyle, month/weekday forms, …).
@@ -464,7 +501,7 @@ export function matchToLocaleDateStringCall(
     if (prop.value.kind !== 'literal' || prop.value.literalType !== 'string') return null
     const value = String(prop.value.value)
     if (prop.key === 'timeZone') {
-      if (!TO_LOCALE_TZ_RE.test(value)) return null
+      if (!TO_LOCALE_TZ_RE.test(value) && !isBuildResolvableTimeZone(value)) return null
       tz = value
     } else {
       probeOptions[prop.key] = value

package/src/types.ts

@@ -1525,10 +1525,11 @@ export interface ReactiveFactoryInfo {
 
 /**
  * An import the helper file holds that an inlined factory body references
- * (#2332). Not a BF112 capture: the component file can import the same
- * binding itself. Collected at prescan with the specifier ALREADY rewritten
- * relative to the component file (or unchanged for bare/npm specifiers);
- * the source rewriter injects one deduped import statement per specifier.
+ * (#2332, type-only refs added #2350). Not a BF112 capture: the component
+ * file can import the same binding itself. Collected at prescan with the
+ * specifier ALREADY rewritten relative to the component file (or unchanged
+ * for bare/npm specifiers); the source rewriter injects one deduped import
+ * statement per (specifier, isTypeOnly) pair.
  */
 export interface RequiredFactoryImport {
   /** Local binding name as referenced inside the factory body. */
@@ -1537,6 +1538,9 @@ export interface RequiredFactoryImport {
   exportedName: string
   /** Component-file-relative specifier (`../lib/mathmod`), or the unchanged bare specifier. */
   specifier: string
+  /** True when the factory body only ever references this in type position —
+   *  re-provisioned as `import type { ... }` instead of a value import. */
+  isTypeOnly?: boolean
 }
 
 /**