@pyreon/runtime-dom 0.23.0 → 0.24.1

package/src/template.ts

@@ -280,7 +280,192 @@ export function _rsCollapseH(
       el.className = v ? darkClass : lightClass
     })
     const handlerDisposers: (() => void)[] = []
-    for (const key in handlers) {
+    // `Object.keys` (not `for...in`) so an attacker who pollutes
+    // `Object.prototype` can't inject a fake handler via inherited
+    // enumerable properties. Defense-in-depth — the compiler emits a
+    // clean object literal so this matters defensively, not in
+    // practice, but the cost is zero.
+    for (const key of Object.keys(handlers)) {
+      const d = _bindEvent(el, key, handlers[key])
+      if (d) handlerDisposers.push(d)
+    }
+    const disposeChildren = bind ? bind(el) : null
+    return () => {
+      disposeClass()
+      for (const d of handlerDisposers) d()
+      if (disposeChildren) disposeChildren()
+    }
+  })
+}
+
+/**
+ * Compiler-emitted DYNAMIC-prop collapsed rocketstyle call site — PR 1
+ * of the dynamic-prop partial-collapse build (next bite after the
+ * `on*`-handler partial-collapse `_rsCollapseH`, `.claude/plans/open-work-2026-q3.md`
+ * → #1 dynamic-prop bucket = 15.3% of all real-corpus sites).
+ *
+ * Generalises {@link _rsCollapse}'s 2-class (light/dark) dispatch to an
+ * N-class dispatch for sites where one dimension prop is an enumerable
+ * dynamic expression (e.g. `<Button state={cond ? 'primary' : 'secondary'}>`).
+ * The compiler resolves EVERY value of that prop through the existing
+ * SSR-render resolver (so each value gets its own light + dark class
+ * baked in, byte-identical to a `_rsCollapse` site for that value), and
+ * the runtime picks the right `(value × mode)` class via the user's
+ * expression.
+ *
+ * Class layout in `classes` is **stride-2, value-major**: index
+ * `2 * valueIndex + (isDark ? 1 : 0)`. For the canonical ternary case:
+ *
+ * ```
+ * <Button state={cond ? 'primary' : 'secondary'}>Save</Button>
+ *   →
+ * __rsCollapseDyn(
+ *   "<button>Save</button>",
+ *   ["btn-primary-light", "btn-primary-dark", "btn-secondary-light", "btn-secondary-dark"],
+ *   () => cond ? 0 : 1,
+ *   () => __pyrMode() === "dark"
+ * )
+ * ```
+ *
+ * Both the value expression AND the mode accessor are reactive: a change
+ * to either re-runs ONLY this className assignment, no remount (same
+ * contract as `_rsCollapse`'s mode flip). Both dispatches share a single
+ * `_bindDirect` so reading both inside one effect subscribes once per
+ * source — Pyreon's effect dedupe handles the rest.
+ *
+ * The structural HTML template is shared across every value (asserted
+ * by the resolver — divergent markup between values bails the collapse).
+ * Mirrors `_rsCollapse`'s mode-divergence-bails invariant.
+ *
+ * `bind` follows the same contract as `_rsCollapse` — standard `_tpl`
+ * child/event binder, runs after class binding, disposers chained.
+ *
+ * @param html  static element HTML WITHOUT the root `class=` attr
+ * @param classes  flat array of `2 × valueCount` class strings,
+ *   indexed `[v0_light, v0_dark, v1_light, v1_dark, ...]`. The runtime
+ *   does no validation — the compiler is the source of truth (an
+ *   out-of-range `valueIndex()` would coerce to `undefined` className,
+ *   which is correct-for-zero-style — never crashes)
+ * @param valueIndex  user expression returning 0..valueCount-1 — reactive
+ * @param isDark  app mode accessor — reactive
+ * @param bind  standard _tpl binder for children/events (or null)
+ */
+export function _rsCollapseDyn(
+  html: string,
+  classes: readonly string[],
+  valueIndex: () => number,
+  isDark: () => boolean,
+  bind?: ((el: HTMLElement) => (() => void) | null) | null,
+): NativeItem {
+  return _tpl(html, (el) => {
+    // One `renderEffect` drives the className from both accessors;
+    // reading `valueIndex()` AND `isDark()` inside the callback
+    // subscribes to BOTH live signals via Pyreon's tracking — a change
+    // to EITHER re-runs only this className assignment, no remount.
+    //
+    // Direct `renderEffect` (vs the `_bindDirect` indirection used by
+    // `_rsCollapse`): the `_bindDirect` fallback path calls the source
+    // function ONCE per re-run and passes the result to the callback.
+    // We were ignoring that result and calling `valueIndex()` again
+    // inside — i.e., a double call per re-run. Side-effecting cond
+    // expressions (`{(modifyState(), cond) ? 'a' : 'b'}`) would fire
+    // their side-effects twice. Direct `renderEffect` calls
+    // `valueIndex()` exactly once per re-run, matching the original
+    // source's call-count contract.
+    const disposeClass = renderEffect(() => {
+      const idx = (valueIndex() << 1) | (isDark() ? 1 : 0)
+      el.className = classes[idx] ?? ''
+    })
+    const disposeChildren = bind ? bind(el) : null
+    if (!disposeChildren) return disposeClass
+    return () => {
+      disposeClass()
+      disposeChildren()
+    }
+  })
+}
+
+/**
+ * Compiler-emitted DYNAMIC-prop + HANDLER collapsed rocketstyle call
+ * site — closes the largest remaining real-corpus dynamic-collapse
+ * gap (`.claude/plans/open-work-2026-q3.md` → #1 dynamic-prop bucket
+ * = 15.4% of all real-corpus sites; the strict no-handler subset was
+ * only 0.2% measured; this helper unlocks the handler-combined slice
+ * that was bailed by `tryDynamicCollapse` in PR #767 by design).
+ *
+ * Combines {@link _rsCollapseDyn}'s value-major class dispatch with
+ * {@link _rsCollapseH}'s handler re-attachment. Handlers are orthogonal
+ * to both the SSR-resolved styler class AND the value dispatcher (a
+ * `state={cond ? 'a' : 'b'} onClick={h}` site's onClick is identical
+ * for both `state="a"` and `state="b"` resolutions — the styler class
+ * varies, the handler does not). So this helper is structurally the
+ * union of the two, no new behavior:
+ *
+ * ```
+ * <Button state={cond ? 'primary' : 'secondary'} onClick={go}>Save</Button>
+ *   →
+ * __rsCollapseDynH(
+ *   "<button>Save</button>",
+ *   ["pri-L", "pri-D", "sec-L", "sec-D"],
+ *   () => cond ? 0 : 1,
+ *   () => __pyrMode() === "dark",
+ *   { onClick: go }
+ * )
+ * ```
+ *
+ * Class layout matches `_rsCollapseDyn` (stride-2 value-major):
+ * `index = 2 * valueIndex + (isDark ? 1 : 0)`. Handler attachment
+ * matches `_rsCollapseH` — routed through the canonical `_bindEvent`
+ * → `applyEventProp` path (delegation + batching + name
+ * normalization). All three reactives (valueIndex, isDark, handlers
+ * — though handler identity is captured at the call site) compose
+ * cleanly: a value flip OR a mode flip patches className IN PLACE
+ * on the SAME node, handlers stay attached across both.
+ *
+ * Layer-pure: no styler / ui-core imports (the styler injection is
+ * the emitted code's job via `__rsSheet.injectRules`).
+ *
+ * @param html        static element HTML WITHOUT the root `class=` attr
+ * @param classes     flat array of `2 × valueCount` class strings, indexed
+ *                    `[v0_L, v0_D, v1_L, v1_D, …]`
+ * @param valueIndex  user expression returning 0..valueCount-1 — reactive
+ * @param isDark      app mode accessor — reactive
+ * @param handlers    `{ onClick: fn, onPointerEnter: fn, … }` — the
+ *                    residual handlers peeled off the call site by the
+ *                    compiler's emit (sliced source spans re-emitted
+ *                    verbatim, paren-wrapped to keep arrow / sequence
+ *                    expressions a single value)
+ * @param bind        standard _tpl binder for children/events (or null)
+ */
+export function _rsCollapseDynH(
+  html: string,
+  classes: readonly string[],
+  valueIndex: () => number,
+  isDark: () => boolean,
+  handlers: Record<string, unknown>,
+  bind?: ((el: HTMLElement) => (() => void) | null) | null,
+): NativeItem {
+  return _tpl(html, (el) => {
+    // Reactive class — identical shape to `_rsCollapseDyn`: one
+    // `renderEffect` reads both accessors, subscribing to both signals;
+    // a change to EITHER re-runs only this className assignment, no
+    // remount. Direct `renderEffect` (not via `_bindDirect`) so
+    // `valueIndex()` runs exactly once per re-run — see the
+    // corresponding comment in `_rsCollapseDyn`.
+    const disposeClass = renderEffect(() => {
+      const idx = (valueIndex() << 1) | (isDark() ? 1 : 0)
+      el.className = classes[idx] ?? ''
+    })
+    // Handler attachment — identical to `_rsCollapseH`: routes through
+    // the canonical `_bindEvent` path so delegation / batching / name
+    // normalization behave byte-identically to the 5-layer mount.
+    // `Object.keys` (not `for...in`) so an attacker who pollutes
+    // `Object.prototype` can't inject a fake handler via inherited
+    // enumerable properties — only OWN keys count. The compiler emits
+    // a clean object literal so this matters defensively, not in
+    // practice, but the cost is zero.
+    const handlerDisposers: (() => void)[] = []
+    for (const key of Object.keys(handlers)) {
       const d = _bindEvent(el, key, handlers[key])
       if (d) handlerDisposers.push(d)
     }

package/src/tests/keyed-array-in-for-batched-toggle.browser.test.ts

@@ -0,0 +1,140 @@
+import { For, h } from '@pyreon/core'
+import type { ForProps, VNode } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { describe, expect, it } from 'vitest'
+
+// Regression — same closure-captured-parent bug class as the For-of-Show
+// fix in #776, but exercising the SIBLING reactive entry point
+// `mountKeyedList` (the inline reactive keyed array shape).
+//
+// **Bug class (recap from #776):** any reactive mount loop that captures
+// `parent` in its setup closure breaks when a containing reconciler
+// creates the subtree in a `DocumentFragment` and then moves it via
+// `liveParent.insertBefore(frag, tailMarker)`. The markers move with
+// the fragment contents; the captured `parent` becomes a stale
+// reference to the now-empty fragment. Next signal flip → throw +
+// child-loss.
+//
+// **`mountKeyedList`'s exposure**: three sites in `nodes.ts:mountKeyedList`
+// use closure-captured `parent`:
+//   1. `parent.insertBefore(anchor, tailMarker)` in mountNewEntries
+//   2. `mountVNode(vnode, parent, tailMarker)` immediately after
+//   3. `keyedListReorder(..., parent, tailMarker)` → applyKeyedMoves
+//      → moveEntryBefore → `parent.insertBefore(node, before)`
+//
+// All three run inside the `effect(() => ...)` body, so any post-setup
+// move of the markers (via a containing mountFor's frag-then-move) plus
+// a subsequent signal-driven re-run (mount new entries OR reorder)
+// throws NotFoundError.
+//
+// **Trigger requires the keyed array to land DIRECTLY in the For's
+// fragment** (no wrapping Element). The cleanest shape: For children
+// returns a function `(i) => () => signal().map(...)` — mountFor's
+// renderInto calls `mountChild(fn, frag, before)`, mountChild's
+// function branch samples the result, sees a keyed array, and creates
+// `mountKeyedList(fn, frag, before, ...)`. Now `parent === frag` in
+// the closure, and the bug fires identically to the For-of-Show case.
+// A `<div>`-wrapped keyed array would NOT trigger the bug — the div
+// is the element parent, isolating mountKeyedList from the frag move.
+
+describe('mountKeyedList: inline keyed array as direct For child under batched signal additions', () => {
+  it('sanity: top-level inline keyed array handles add/reorder cycles correctly', async () => {
+    // No For wrapper — mountKeyedList is the top-level reconciler.
+    // Should always work — no frag-then-move pressure on the captured parent.
+    const items = signal<{ id: number }[]>([{ id: 0 }])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        () => items().map((v) => h('span', { key: v.id, 'data-id': String(v.id) }, String(v.id))),
+      ),
+    )
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(1)
+
+    items.set([{ id: 0 }, { id: 1 }, { id: 2 }])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(3)
+
+    // Reorder — exercises mountKeyedList's keyedListReorder path
+    items.set([{ id: 2 }, { id: 0 }, { id: 1 }])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(3)
+
+    items.set([])
+    await flush()
+    expect(container.querySelectorAll('span[data-id]')).toHaveLength(0)
+    unmount()
+  })
+
+  it('CONTRACT: <For> + DIRECT keyed-array function child does not throw NotFoundError or lose children', async () => {
+    // 10 For rows. Each row's children function returns a FUNCTION
+    // `() => signal().map(...)` directly — NOT wrapped in a `<div>`.
+    // mountFor's renderInto then calls `mountChild(fn, frag, before)`,
+    // mountChild creates `mountKeyedList(fn, frag, before, ...)` —
+    // capturing the For's DocumentFragment as `parent`. Once the frag
+    // moves to the live parent, the closure-captured `parent` is stale.
+    //
+    // The initial signal value MUST be a non-empty keyed array for
+    // `isKeyedArray(sample)` (mount.ts) to route into mountKeyedList;
+    // an empty initial array would route into mountReactive instead
+    // (already covered by the For-of-Show fix in #776). Each row starts
+    // with one item so we land on mountKeyedList, then we grow each
+    // row's array — mountKeyedList's mountNewEntries calls
+    // `parent.insertBefore(anchor, tailMarker)` which throws against
+    // the stale frag unless the live-parent fix is applied.
+    const itemSignals = Array.from({ length: 10 }, (_, rowIdx) =>
+      signal<{ id: number }[]>([{ id: rowIdx * 100 }]),
+    )
+    const indices = Array.from({ length: 10 }, (_, i) => i)
+
+    // Cast: ForProps.children narrows to `(item: T) => VNode | NativeItem`,
+    // but the runtime ALSO accepts a function return (mount.ts's mountChild
+    // function branch handles it). This shape is exactly what triggers
+    // mountKeyedList with frag-as-parent — the public type doesn't expose
+    // it, so we cast through an explicit ForProps<number> shape.
+    const forProps: ForProps<number> = {
+      each: indices,
+      by: (i: number) => i,
+      // children returns a FUNCTION (not a VNode). That function returns
+      // a keyed array — mountChild's function branch routes it to
+      // mountKeyedList with frag as parent.
+      children: ((rowIdx: number) =>
+        () =>
+          (itemSignals[rowIdx] as ReturnType<typeof signal<{ id: number }[]>>)().map((v) =>
+            h('span', { key: v.id, 'data-rowitem': `${rowIdx}-${v.id}` }, String(v.id)),
+          )) as unknown as (item: number) => VNode,
+    }
+    const { container, unmount } = mountInBrowser(
+      h('div', { id: 'root' }, For(forProps)),
+    )
+    await flush()
+    try {
+      // Sanity: one item per row at mount, 10 total.
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(10)
+
+      // Grow every row's array to 5 items each — 10 rows × 5 = 50.
+      // Bug fires HERE on EVERY row: mountKeyedList's mountNewEntries
+      // calls `parent.insertBefore(anchor, tailMarker)` against the
+      // stale frag captured at the For's initial mount.
+      for (let r = 0; r < 10; r++) {
+        const s = itemSignals[r] as ReturnType<typeof signal<{ id: number }[]>>
+        s.set([0, 1, 2, 3, 4].map((id) => ({ id: r * 100 + id })))
+      }
+      await flush()
+
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(50)
+
+      // Reorder one row — exercises mountKeyedList's reorder path
+      // (keyedListReorder → applyKeyedMoves → moveEntryBefore → stale
+      // `parent.insertBefore(startNode, before)`). All items must remain.
+      const s0 = itemSignals[0] as ReturnType<typeof signal<{ id: number }[]>>
+      s0.set([4, 0, 2, 1, 3].map((id) => ({ id: id })))
+      await flush()
+      expect(container.querySelectorAll('span[data-rowitem]')).toHaveLength(50)
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/tests/rs-collapse-dyn-h.browser.test.ts

@@ -0,0 +1,303 @@
+import { signal } from '@pyreon/reactivity'
+import { flush } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it } from 'vitest'
+import { _rsCollapseDynH, mount } from '../index'
+
+// Runtime helper for the HANDLER-COMBINED dynamic-collapse slice — the
+// follow-up to the strict no-handler PR sequence (#765/#766/#767/#771).
+// Closes the largest remaining real-corpus dynamic-collapse gap: the
+// `<Button state={cond ? 'a' : 'b'} onClick={h}>` shape that PR #767's
+// `tryDynamicCollapse` BAILED by design ("PR 3 scope: no-handler only").
+//
+// Structurally the union of:
+//   - `_rsCollapseDyn`'s stride-2 value-major class dispatch
+//   - `_rsCollapseH`'s handler re-attachment via `_bindEvent`
+//
+// Proves what `_rsCollapseDynH` owns:
+//   1. Class dispatch identical to `_rsCollapseDyn` (value flip / mode
+//      flip / combined flip all patch className IN PLACE on SAME node)
+//   2. Handlers attached + dispatched correctly across value flips
+//      (handler identity preserved; same el; click fires once per click)
+//   3. Both dispatchers + handlers compose without interference —
+//      handler stays attached after a value flip, value dispatch keeps
+//      working after handler invocation, mode flip doesn't break handlers
+//   4. Disposers chained — class, all handlers, children all cleaned up
+//
+// Layer-pure: no @pyreon/styler import — CSS via plain <style> just
+// like the existing rs-collapse-dyn / rs-collapse-h suites.
+
+describe('_rsCollapseDynH (real browser)', () => {
+  const cleanup: Array<() => void> = []
+  afterEach(() => {
+    for (const u of cleanup.splice(0)) u()
+  })
+
+  function injectCss(css: string): void {
+    const el = document.createElement('style')
+    el.textContent = css
+    document.head.appendChild(el)
+    cleanup.push(() => el.remove())
+  }
+
+  function mountInto(node: ReturnType<typeof _rsCollapseDynH>): HTMLElement {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const dispose = mount(node as unknown as Parameters<typeof mount>[0], root)
+    cleanup.push(() => {
+      dispose()
+      root.remove()
+    })
+    return root
+  }
+
+  const ternaryClasses = (prefix: string): readonly string[] => [
+    `${prefix}-v0-light`,
+    `${prefix}-v0-dark`,
+    `${prefix}-v1-light`,
+    `${prefix}-v1-dark`,
+  ]
+
+  it('cold mount picks value=0 + light + attaches handlers', async () => {
+    injectCss(`
+      .rdh1-v0-light{color:rgb(1,1,1)}.rdh1-v0-dark{color:rgb(2,2,2)}
+      .rdh1-v1-light{color:rgb(3,3,3)}.rdh1-v1-dark{color:rgb(4,4,4)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Save</button>',
+        ternaryClasses('rdh1'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('rdh1-v0-light')
+    btn.click()
+    expect(clicks).toBe(1)
+  })
+
+  it('value flip swaps class on SAME node — handler stays attached', async () => {
+    injectCss(`
+      .rdh2-v0-light{color:rgb(10,10,10)}.rdh2-v0-dark{color:rgb(20,20,20)}
+      .rdh2-v1-light{color:rgb(30,30,30)}.rdh2-v1-dark{color:rgb(40,40,40)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>X</button>',
+        ternaryClasses('rdh2'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLElement
+    before.click()
+    expect(clicks).toBe(1)
+
+    cond.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLElement
+    expect(after).toBe(before) // node identity preserved
+    expect(after.className).toBe('rdh2-v1-light')
+
+    // Handler still attached post-value-flip — same closure, same callback identity
+    after.click()
+    expect(clicks).toBe(2)
+  })
+
+  it('mode flip swaps class on SAME node — handler stays attached (preserves _rsCollapseH contract)', async () => {
+    injectCss(`
+      .rdh3-v0-light{color:rgb(50,50,50)}.rdh3-v0-dark{color:rgb(60,60,60)}
+      .rdh3-v1-light{color:rgb(70,70,70)}.rdh3-v1-dark{color:rgb(80,80,80)}
+    `)
+    const cond = signal(true) // pin valueIndex to 1
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Y</button>',
+        ternaryClasses('rdh3'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLElement
+    expect(before.className).toBe('rdh3-v1-light')
+
+    isDark.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLElement
+    expect(after).toBe(before)
+    expect(after.className).toBe('rdh3-v1-dark')
+    after.click()
+    expect(clicks).toBe(1)
+  })
+
+  it('combined value + mode flip lands on the right class — handler invariant across all 4 combinations', async () => {
+    injectCss(`
+      .rdh4-v0-light{color:rgb(11,11,11)}.rdh4-v0-dark{color:rgb(22,22,22)}
+      .rdh4-v1-light{color:rgb(33,33,33)}.rdh4-v1-dark{color:rgb(44,44,44)}
+    `)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Z</button>',
+        ternaryClasses('rdh4'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+
+    expect(btn.className).toBe('rdh4-v0-light')
+    btn.click()
+    isDark.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh4-v0-dark')
+    btn.click()
+    cond.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh4-v1-dark')
+    btn.click()
+    isDark.set(false)
+    await flush()
+    expect(btn.className).toBe('rdh4-v1-light')
+    btn.click()
+    // 4 clicks across 4 combinations, all on the SAME node
+    expect(clicks).toBe(4)
+  })
+
+  it('multiple handlers — all attach + survive value/mode flips', async () => {
+    injectCss(`.rdh5-v0-light{color:rgb(1,1,1)}.rdh5-v0-dark{color:rgb(2,2,2)}.rdh5-v1-light{color:rgb(3,3,3)}.rdh5-v1-dark{color:rgb(4,4,4)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    let enters = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>M</button>',
+        ternaryClasses('rdh5'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        {
+          onClick: () => clicks++,
+          onPointerEnter: () => enters++,
+        },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    btn.click()
+    btn.dispatchEvent(new PointerEvent('pointerenter'))
+    expect(clicks).toBe(1)
+    expect(enters).toBe(1)
+
+    cond.set(true)
+    await flush()
+    btn.click()
+    btn.dispatchEvent(new PointerEvent('pointerenter'))
+    expect(clicks).toBe(2)
+    expect(enters).toBe(2)
+  })
+
+  it('out-of-range valueIndex coerces to empty className — handlers still work', async () => {
+    // Same graceful-degradation contract as `_rsCollapseDyn`: an out-
+    // of-range index is documented as "compiler is source of truth";
+    // empty className is the runtime fallback, never a crash. Handlers
+    // are orthogonal to class dispatch and must keep working.
+    injectCss(`.rdh6-v0-light{color:rgb(5,5,5)}.rdh6-v0-dark{color:rgb(6,6,6)}`)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Bad</button>',
+        ['rdh6-v0-light', 'rdh6-v0-dark'], // only ONE value
+        () => 7, // BUG-shaped: out of range
+        () => false,
+        { onClick: () => clicks++ },
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('') // graceful
+    btn.click()
+    expect(clicks).toBe(1) // handler unaffected
+  })
+
+  it('children binder runs alongside class + handlers; ALL three dispose with the host', async () => {
+    injectCss(`.rdh7-v0-light{color:rgb(7,7,7)}.rdh7-v0-dark{color:rgb(8,8,8)}.rdh7-v1-light{color:rgb(9,9,9)}.rdh7-v1-dark{color:rgb(11,11,11)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    let clicks = 0
+    let childDisposed = false
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button><span></span></button>',
+        ternaryClasses('rdh7'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        { onClick: () => clicks++ },
+        (el) => {
+          const span = el.querySelector('span') as HTMLElement
+          span.textContent = 'child'
+          return () => {
+            childDisposed = true
+          }
+        },
+      ),
+    )
+    await flush()
+    expect((root.querySelector('span') as HTMLElement).textContent).toBe('child')
+    ;(root.querySelector('button') as HTMLElement).click()
+    expect(clicks).toBe(1)
+
+    // Disposing the host (via cleanup) must fire ALL three disposers:
+    // class binding, handler bindings, child binder. Bisect-load-bearing
+    // for the disposer-chain composition shape.
+    cleanup.splice(0).forEach((u) => u())
+    expect(childDisposed).toBe(true)
+  })
+
+  it('zero handlers (empty {}) degenerates to `_rsCollapseDyn`-equivalent shape', async () => {
+    // Useful structural assertion: `_rsCollapseDynH` with no handlers
+    // behaves identically to `_rsCollapseDyn`. Guards the union as a
+    // strict superset — emit can always route to DynH; lighter-weight
+    // Dyn is just the no-handler optimization.
+    injectCss(`.rdh8-v0-light{color:rgb(80,80,80)}.rdh8-v0-dark{color:rgb(90,90,90)}.rdh8-v1-light{color:rgb(100,100,100)}.rdh8-v1-dark{color:rgb(110,110,110)}`)
+    const cond = signal(false)
+    const isDark = signal(false)
+    const root = mountInto(
+      _rsCollapseDynH(
+        '<button>Solo</button>',
+        ternaryClasses('rdh8'),
+        () => (cond() ? 1 : 0),
+        () => isDark(),
+        {}, // no handlers
+      ),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLElement
+    expect(btn.className).toBe('rdh8-v0-light')
+
+    cond.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh8-v1-light')
+    isDark.set(true)
+    await flush()
+    expect(btn.className).toBe('rdh8-v1-dark')
+  })
+})