@pyreon/runtime-dom 0.22.0 → 0.24.0

package/lib/transition-entry.js

@@ -1,5 +1,5 @@
-import { Fragment, createRef, h, nativeCompat, onUnmount } from "@pyreon/core";
 import { effect, runUntracked, signal } from "@pyreon/reactivity";
+import { Fragment, createRef, h, nativeCompat, onUnmount } from "@pyreon/core";
 
 //#region src/transition.ts
 const __DEV__ = process.env.NODE_ENV !== "production";

package/lib/types/index.d.ts

@@ -372,6 +372,112 @@ declare function _rsCollapse(html: string, lightClass: string, darkClass: string
  *   sliced source spans `detectPartialCollapsibleShape` returned.
  */
 declare function _rsCollapseH(html: string, lightClass: string, darkClass: string, isDark: () => boolean, handlers: Record<string, unknown>, bind?: ((el: HTMLElement) => (() => void) | null) | null): NativeItem;
+/**
+ * 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)
+ */
+declare function _rsCollapseDyn(html: string, classes: readonly string[], valueIndex: () => number, isDark: () => boolean, bind?: ((el: HTMLElement) => (() => void) | null) | null): NativeItem;
+/**
+ * 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)
+ */
+declare function _rsCollapseDynH(html: string, classes: readonly string[], valueIndex: () => number, isDark: () => boolean, handlers: Record<string, unknown>, bind?: ((el: HTMLElement) => (() => void) | null) | null): NativeItem;
 /**
  * Mount a children slot inside a template.
  *
@@ -513,5 +619,5 @@ declare function mount(root: VNodeChild, container: Element): () => void;
 /** Alias for `mount` */
 declare const render: typeof mount;
 //#endregion
-export { DELEGATED_EVENTS, type DevtoolsComponentEntry, type HydrationMismatchContext, type HydrationMismatchHandler, type HydrationMismatchType, KeepAlive, type KeepAliveProps, type PyreonDevtools, type SanitizeFn, Transition, TransitionGroup, type TransitionGroupProps, type TransitionProps, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _rsCollapse, _rsCollapseH, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, onHydrationMismatch, render, sanitizeHtml, setSanitizer, setupDelegation };
+export { DELEGATED_EVENTS, type DevtoolsComponentEntry, type HydrationMismatchContext, type HydrationMismatchHandler, type HydrationMismatchType, KeepAlive, type KeepAliveProps, type PyreonDevtools, type SanitizeFn, Transition, TransitionGroup, type TransitionGroupProps, type TransitionProps, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _rsCollapse, _rsCollapseDyn, _rsCollapseDynH, _rsCollapseH, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, onHydrationMismatch, render, sanitizeHtml, setSanitizer, setupDelegation };
 //# sourceMappingURL=index2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-dom",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "DOM renderer for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
   "bugs": {
@@ -54,15 +54,15 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.22.0",
-    "@pyreon/reactivity": "^0.22.0"
+    "@pyreon/core": "^0.24.0",
+    "@pyreon/reactivity": "^0.24.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.22.0",
+    "@pyreon/compiler": "^0.24.0",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/runtime-server": "^0.22.0",
-    "@pyreon/test-utils": "^0.13.9",
+    "@pyreon/runtime-server": "^0.24.0",
+    "@pyreon/test-utils": "^0.13.11",
     "@vitest/browser-playwright": "^4.1.4",
     "esbuild": "^0.28.0",
     "happy-dom": "^20.8.3",

package/src/index.ts

@@ -29,6 +29,8 @@ export {
   _bindText,
   _mountSlot,
   _rsCollapse,
+  _rsCollapseDyn,
+  _rsCollapseDynH,
   _rsCollapseH,
   _tpl,
   createTemplate,

package/src/nodes.ts

@@ -100,8 +100,18 @@ export function mountReactive(
       // Child components set up their OWN effects for reactivity
       // (e.g. DynamicStyled's class swap effect). Those effects track
       // their own dependencies independently.
+      //
+      // Use the marker's LIVE parent (not the closure-captured `parent`):
+      // when this mountReactive was created inside a DocumentFragment that
+      // mountFor later moved into the live tree via `insertBefore(frag, ...)`,
+      // the captured `parent` becomes a stale reference to the now-empty
+      // fragment. The marker, in contrast, was moved with the fragment's
+      // contents and `marker.parentNode` reflects the current live parent.
+      // Falling back to the captured `parent` only when the marker is
+      // detached (cleanup edge case) preserves prior behavior.
+      const liveParent = marker.parentNode ?? parent
       const cleanup = runUntracked(() =>
-        restoreContextStack(contextSnapshot, () => mount(value, parent, marker)),
+        restoreContextStack(contextSnapshot, () => mount(value, liveParent, marker)),
       )
       // Guard: a re-entrant signal update (e.g. ErrorBoundary catching a child
       // throw) may have already re-run this effect and updated currentCleanup.
@@ -292,15 +302,15 @@ export function mountKeyedList(
     }
   }
 
-  const mountNewEntries = (newList: VNode[]) => {
+  const mountNewEntries = (newList: VNode[], liveParent: Node) => {
     for (const vnode of newList) {
       const key = vnode.key
       if (key === null || key === undefined) continue
       if (cache.has(key)) continue
       const anchor = document.createComment('')
       _keyedAnchors.add(anchor)
-      parent.insertBefore(anchor, tailMarker)
-      const cleanup = mountVNode(vnode, parent, tailMarker)
+      liveParent.insertBefore(anchor, tailMarker)
+      const cleanup = mountVNode(vnode, liveParent, tailMarker)
       cache.set(key, { anchor, cleanup })
     }
   }
@@ -311,6 +321,17 @@ export function mountKeyedList(
     // Same untracking rationale as mountFor — see comment there. Child
     // mounts via mountVNode must not re-track on this effect's run.
     runUntracked(() => {
+      // Use the marker's LIVE parent (not the closure-captured `parent`).
+      // Same bug class fixed in #776 for mountReactive: when this
+      // mountKeyedList was created inside a DocumentFragment that mountFor
+      // later moved via `liveParent.insertBefore(frag, tailMarker)`, the
+      // captured `parent` becomes a stale reference to the now-empty
+      // fragment. The markers were moved with the fragment's contents
+      // and their `parentNode` reflects the current live parent.
+      // Fallback to the captured `parent` only when the marker is
+      // detached (cleanup edge case) preserves prior behavior.
+      const liveParent = tailMarker.parentNode ?? parent
+
       if (n === 0 && cache.size > 0) {
         for (const entry of cache.values()) {
           _emitCleanup()
@@ -325,10 +346,10 @@ export function mountKeyedList(
 
       const { newKeyOrder, newKeySet } = collectKeyOrder(newList)
       removeStaleEntries(newKeySet)
-      mountNewEntries(newList)
+      mountNewEntries(newList, liveParent)
 
       if (currentKeyOrder.length > 0 && n > 0) {
-        lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker)
+        lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, liveParent, tailMarker)
       }
 
       curPos.clear()

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/ctx-stack-growth-repro.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * REGRESSION: context stack does not grow unboundedly under repeated reactive
+ * remounts.
+ *
+ * User-reported symptom (`@pyreon/core@<=0.22.0`):
+ *   1 GB heap; 33 effect snapshots × ~10,000 frames each; live context stack
+ *   contained 321,024 entries but only 47 distinct provider Map instances.
+ *   The same handful of providers were re-referenced thousands of times each.
+ *
+ * Root cause:
+ *   `mountReactive`'s effect re-fire flow runs the previous-mount subtree
+ *   cleanup INSIDE the effect's snapshot-restore window. The descendant's
+ *   `onUnmount` calls `popContext()` (position-based, `stack.pop()`) — but
+ *   the top of the stack at that moment is the snapshot-pushed frame, NOT
+ *   the descendant's own provider frame. `popContext()` pops the snapshot
+ *   frame; the descendant's frame is orphaned on the live stack. Geometric
+ *   amplification across nested reactive boundaries × repeated toggles
+ *   produces the 321k-frame state.
+ *
+ * Fix: `provide()` registers `onUnmount(removeContextFrame(frame))` — an
+ * identity-based splice that finds the specific frame regardless of its
+ * position on the stack.
+ */
+import { captureContextStack, createContext, h, provide, useContext } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { mount } from '..'
+
+describe('Context stack — growth under repeated remounts', () => {
+  it('single reactive boundary cycling a Provider — stack stays bounded', () => {
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+
+    const baseLen = captureContextStack().length
+    const cond = signal(true)
+
+    function InnerProvider() {
+      provide(Ctx, 'inner')
+      return h('span', null, useContext(Ctx))
+    }
+
+    const App = () =>
+      h('div', null, () => (cond() ? h(InnerProvider, null) : null))
+
+    const unmount = mount(h(App, null), container)
+
+    for (let i = 0; i < 1000; i++) {
+      cond.set(false)
+      cond.set(true)
+    }
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('REGRESSION: nested reactive boundaries with providers — no orphan frames', () => {
+    // The exact shape that produced the 321k-entry live stack in 0.22.0:
+    // two NESTED reactive boundaries, each containing a provider. The
+    // outer's cleanup chain unmounts the inner; the inner's provider's
+    // onUnmount popContext used to pop the wrong (snapshot) frame, orphaning
+    // the provider's frame on the live stack.
+    const A = createContext<string>('A_default')
+    const B = createContext<string>('B_default')
+    const container = document.createElement('div')
+    const baseLen = captureContextStack().length
+
+    const toggleA = signal(true)
+    const toggleB = signal(true)
+
+    function PA() {
+      provide(A, 'A_value')
+      return h('div', null, () => (toggleB() ? h(PB, null) : null))
+    }
+    function PB() {
+      provide(B, 'B_value')
+      return h('span', null, `${useContext(A)}/${useContext(B)}`)
+    }
+
+    const App = () =>
+      h('div', null, () => (toggleA() ? h(PA, null) : null))
+
+    const unmount = mount(h(App, null), container)
+
+    // 500 full cycles. Without the fix, the stack grows ~1 frame per cycle
+    // (502 after 500 iterations of toggleB/toggleA off/on).
+    for (let i = 0; i < 500; i++) {
+      toggleB.set(false)
+      toggleB.set(true)
+      toggleA.set(false)
+      toggleA.set(true)
+    }
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('signal-driven re-mount of a provider — stack stays bounded across many updates', () => {
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+    const baseLen = captureContextStack().length
+    const inner = signal('a')
+
+    function InnerProvider() {
+      provide(Ctx, inner())
+      return h('span', null, useContext(Ctx))
+    }
+
+    const App = () => h('div', null, () => h(InnerProvider, null))
+    const unmount = mount(h(App, null), container)
+
+    for (let i = 0; i < 2000; i++) inner.set(`v${i}`)
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('contextSnapshot used in restoreContextStack still finds inherited providers post-remount', () => {
+    // Read-side correctness: the snapshot mechanism's whole point is that
+    // useContext from a descendant inside a reactive boundary still finds
+    // the ancestor provider. The fix must not break this.
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+    const cond = signal(true)
+    const seen: string[] = []
+
+    function Reader() {
+      seen.push(useContext(Ctx))
+      return h('span', null, useContext(Ctx))
+    }
+
+    function Provider() {
+      provide(Ctx, 'inherited')
+      return h('div', null, () => (cond() ? h(Reader, null) : null))
+    }
+
+    const unmount = mount(h(Provider, null), container)
+
+    // Initial render must see 'inherited'
+    expect(seen[seen.length - 1]).toBe('inherited')
+
+    // Toggle a few times — every re-mount of Reader must see the inherited
+    // value, NOT the default 'root'.
+    for (let i = 0; i < 10; i++) {
+      cond.set(false)
+      cond.set(true)
+    }
+    // The most recent mount also saw inherited
+    expect(seen[seen.length - 1]).toBe('inherited')
+
+    unmount()
+  })
+})