@pyreon/runtime-dom 0.23.0 → 0.24.0

package/lib/_chunks/{keep-alive-BM7bn3W9.js → keep-alive-DznjF_h1.js}

@@ -364,7 +364,8 @@ function mountReactive(accessor, parent, anchor, mount) {
 		hasCleanup = false;
 		const value = accessor();
 		if (value != null && value !== false) {
-			const cleanup = runUntracked(() => restoreContextStack(contextSnapshot, () => mount(value, parent, marker)));
+			const liveParent = marker.parentNode ?? parent;
+			const cleanup = runUntracked(() => restoreContextStack(contextSnapshot, () => mount(value, liveParent, marker)));
 			if (myGen === generation) {
 				currentCleanup = cleanup;
 				hasCleanup = true;
@@ -483,15 +484,15 @@ function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
 			curPos.delete(key);
 		}
 	};
-	const mountNewEntries = (newList) => {
+	const mountNewEntries = (newList, liveParent) => {
 		for (const vnode of newList) {
 			const key = vnode.key;
 			if (key === null || key === void 0) 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
@@ -502,6 +503,7 @@ function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
 		const newList = accessor();
 		const n = newList.length;
 		runUntracked(() => {
+			const liveParent = tailMarker.parentNode ?? parent;
 			if (n === 0 && cache.size > 0) {
 				for (const entry of cache.values()) {
 					_emitCleanup();
@@ -515,8 +517,8 @@ function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
 			}
 			const { newKeyOrder, newKeySet } = collectKeyOrder(newList);
 			removeStaleEntries(newKeySet);
-			mountNewEntries(newList);
-			if (currentKeyOrder.length > 0 && n > 0) lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker);
+			mountNewEntries(newList, liveParent);
+			if (currentKeyOrder.length > 0 && n > 0) lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, liveParent, tailMarker);
 			curPos.clear();
 			for (let i = 0; i < newKeyOrder.length; i++) {
 				const k = newKeyOrder[i];
@@ -1654,4 +1656,4 @@ nativeCompat(KeepAlive);
 
 //#endregion
 export { applyProps as a, mountReactive as c, delegatedPropName as d, setupDelegation as f, applyProp as i, installDevTools as l, mountChild as n, sanitizeHtml as o, _bindEvent as r, setSanitizer as s, KeepAlive as t, DELEGATED_EVENTS as u };
-//# sourceMappingURL=keep-alive-BM7bn3W9.js.map
+//# sourceMappingURL=keep-alive-DznjF_h1.js.map

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"b8baa038-1","name":"hydration-debug.ts"},{"uid":"b8baa038-3","name":"hydrate.ts"},{"uid":"b8baa038-5","name":"template.ts"},{"uid":"b8baa038-7","name":"transition-group.ts"},{"uid":"b8baa038-9","name":"index.ts"}]}]},{"name":"keep-alive-entry.js","uid":"b8baa038-11"},{"name":"transition-entry.js","children":[{"name":"src/transition.ts","uid":"b8baa038-13"}]},{"name":"_chunks/keep-alive-BM7bn3W9.js","children":[{"name":"src","children":[{"uid":"b8baa038-15","name":"delegate.ts"},{"uid":"b8baa038-17","name":"devtools.ts"},{"uid":"b8baa038-19","name":"nodes.ts"},{"uid":"b8baa038-21","name":"props.ts"},{"uid":"b8baa038-23","name":"mount.ts"},{"uid":"b8baa038-24","name":"keep-alive.ts"}]}]}],"isRoot":true},"nodeParts":{"b8baa038-1":{"renderedLength":1395,"gzipLength":718,"brotliLength":0,"metaUid":"b8baa038-0"},"b8baa038-3":{"renderedLength":8312,"gzipLength":2472,"brotliLength":0,"metaUid":"b8baa038-2"},"b8baa038-5":{"renderedLength":9693,"gzipLength":3748,"brotliLength":0,"metaUid":"b8baa038-4"},"b8baa038-7":{"renderedLength":8002,"gzipLength":2092,"brotliLength":0,"metaUid":"b8baa038-6"},"b8baa038-9":{"renderedLength":985,"gzipLength":549,"brotliLength":0,"metaUid":"b8baa038-8"},"b8baa038-11":{"id":"keep-alive-entry.js","gzipLength":93,"brotliLength":0,"renderedLength":89,"metaUid":"b8baa038-10"},"b8baa038-13":{"renderedLength":4925,"gzipLength":1407,"brotliLength":0,"metaUid":"b8baa038-12"},"b8baa038-15":{"renderedLength":2090,"gzipLength":1029,"brotliLength":0,"metaUid":"b8baa038-14"},"b8baa038-17":{"renderedLength":8163,"gzipLength":2538,"brotliLength":0,"metaUid":"b8baa038-16"},"b8baa038-19":{"renderedLength":17556,"gzipLength":4658,"brotliLength":0,"metaUid":"b8baa038-18"},"b8baa038-21":{"renderedLength":9054,"gzipLength":3495,"brotliLength":0,"metaUid":"b8baa038-20"},"b8baa038-23":{"renderedLength":12162,"gzipLength":3873,"brotliLength":0,"metaUid":"b8baa038-22"},"b8baa038-24":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"b8baa038-10"}},"nodeMetas":{"b8baa038-0":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"b8baa038-1"},"imported":[],"importedBy":[{"uid":"b8baa038-8"},{"uid":"b8baa038-2"}]},"b8baa038-2":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"b8baa038-3"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"},{"uid":"b8baa038-14"},{"uid":"b8baa038-0"},{"uid":"b8baa038-22"},{"uid":"b8baa038-18"},{"uid":"b8baa038-20"}],"importedBy":[{"uid":"b8baa038-8"}]},"b8baa038-4":{"id":"/src/template.ts","moduleParts":{"index.js":"b8baa038-5"},"imported":[{"uid":"b8baa038-25"},{"uid":"b8baa038-22"},{"uid":"b8baa038-20"}],"importedBy":[{"uid":"b8baa038-8"}]},"b8baa038-6":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"b8baa038-7"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"},{"uid":"b8baa038-22"}],"importedBy":[{"uid":"b8baa038-8"}]},"b8baa038-8":{"id":"/src/index.ts","moduleParts":{"index.js":"b8baa038-9"},"imported":[{"uid":"b8baa038-14"},{"uid":"b8baa038-2"},{"uid":"b8baa038-0"},{"uid":"b8baa038-10"},{"uid":"b8baa038-22"},{"uid":"b8baa038-20"},{"uid":"b8baa038-4"},{"uid":"b8baa038-12"},{"uid":"b8baa038-6"},{"uid":"b8baa038-16"}],"importedBy":[],"isEntry":true},"b8baa038-10":{"id":"/src/keep-alive.ts","moduleParts":{"keep-alive-entry.js":"b8baa038-11","_chunks/keep-alive-BM7bn3W9.js":"b8baa038-24"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"},{"uid":"b8baa038-22"}],"importedBy":[{"uid":"b8baa038-8"}],"isEntry":true},"b8baa038-12":{"id":"/src/transition.ts","moduleParts":{"transition-entry.js":"b8baa038-13"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"}],"importedBy":[{"uid":"b8baa038-8"}],"isEntry":true},"b8baa038-14":{"id":"/src/delegate.ts","moduleParts":{"_chunks/keep-alive-BM7bn3W9.js":"b8baa038-15"},"imported":[{"uid":"b8baa038-25"}],"importedBy":[{"uid":"b8baa038-8"},{"uid":"b8baa038-2"},{"uid":"b8baa038-20"}]},"b8baa038-16":{"id":"/src/devtools.ts","moduleParts":{"_chunks/keep-alive-BM7bn3W9.js":"b8baa038-17"},"imported":[{"uid":"b8baa038-25"}],"importedBy":[{"uid":"b8baa038-8"},{"uid":"b8baa038-22"}]},"b8baa038-18":{"id":"/src/nodes.ts","moduleParts":{"_chunks/keep-alive-BM7bn3W9.js":"b8baa038-19"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"}],"importedBy":[{"uid":"b8baa038-2"},{"uid":"b8baa038-22"}]},"b8baa038-20":{"id":"/src/props.ts","moduleParts":{"_chunks/keep-alive-BM7bn3W9.js":"b8baa038-21"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"},{"uid":"b8baa038-14"}],"importedBy":[{"uid":"b8baa038-8"},{"uid":"b8baa038-2"},{"uid":"b8baa038-22"},{"uid":"b8baa038-4"}]},"b8baa038-22":{"id":"/src/mount.ts","moduleParts":{"_chunks/keep-alive-BM7bn3W9.js":"b8baa038-23"},"imported":[{"uid":"b8baa038-26"},{"uid":"b8baa038-25"},{"uid":"b8baa038-16"},{"uid":"b8baa038-18"},{"uid":"b8baa038-20"}],"importedBy":[{"uid":"b8baa038-8"},{"uid":"b8baa038-2"},{"uid":"b8baa038-10"},{"uid":"b8baa038-4"},{"uid":"b8baa038-6"}]},"b8baa038-25":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"b8baa038-14"},{"uid":"b8baa038-2"},{"uid":"b8baa038-10"},{"uid":"b8baa038-22"},{"uid":"b8baa038-20"},{"uid":"b8baa038-4"},{"uid":"b8baa038-12"},{"uid":"b8baa038-6"},{"uid":"b8baa038-16"},{"uid":"b8baa038-18"}]},"b8baa038-26":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"b8baa038-2"},{"uid":"b8baa038-10"},{"uid":"b8baa038-22"},{"uid":"b8baa038-20"},{"uid":"b8baa038-12"},{"uid":"b8baa038-6"},{"uid":"b8baa038-18"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"baaa0631-1","name":"hydration-debug.ts"},{"uid":"baaa0631-3","name":"hydrate.ts"},{"uid":"baaa0631-5","name":"template.ts"},{"uid":"baaa0631-7","name":"transition-group.ts"},{"uid":"baaa0631-9","name":"index.ts"}]}]},{"name":"keep-alive-entry.js","uid":"baaa0631-11"},{"name":"transition-entry.js","children":[{"name":"src/transition.ts","uid":"baaa0631-13"}]},{"name":"_chunks/keep-alive-DznjF_h1.js","children":[{"name":"src","children":[{"uid":"baaa0631-15","name":"delegate.ts"},{"uid":"baaa0631-17","name":"devtools.ts"},{"uid":"baaa0631-19","name":"nodes.ts"},{"uid":"baaa0631-21","name":"props.ts"},{"uid":"baaa0631-23","name":"mount.ts"},{"uid":"baaa0631-24","name":"keep-alive.ts"}]}]}],"isRoot":true},"nodeParts":{"baaa0631-1":{"renderedLength":1395,"gzipLength":718,"brotliLength":0,"metaUid":"baaa0631-0"},"baaa0631-3":{"renderedLength":8312,"gzipLength":2472,"brotliLength":0,"metaUid":"baaa0631-2"},"baaa0631-5":{"renderedLength":15703,"gzipLength":5438,"brotliLength":0,"metaUid":"baaa0631-4"},"baaa0631-7":{"renderedLength":8002,"gzipLength":2092,"brotliLength":0,"metaUid":"baaa0631-6"},"baaa0631-9":{"renderedLength":985,"gzipLength":549,"brotliLength":0,"metaUid":"baaa0631-8"},"baaa0631-11":{"id":"keep-alive-entry.js","gzipLength":93,"brotliLength":0,"renderedLength":89,"metaUid":"baaa0631-10"},"baaa0631-13":{"renderedLength":4925,"gzipLength":1407,"brotliLength":0,"metaUid":"baaa0631-12"},"baaa0631-15":{"renderedLength":2090,"gzipLength":1029,"brotliLength":0,"metaUid":"baaa0631-14"},"baaa0631-17":{"renderedLength":8163,"gzipLength":2538,"brotliLength":0,"metaUid":"baaa0631-16"},"baaa0631-19":{"renderedLength":17702,"gzipLength":4689,"brotliLength":0,"metaUid":"baaa0631-18"},"baaa0631-21":{"renderedLength":9054,"gzipLength":3495,"brotliLength":0,"metaUid":"baaa0631-20"},"baaa0631-23":{"renderedLength":12162,"gzipLength":3873,"brotliLength":0,"metaUid":"baaa0631-22"},"baaa0631-24":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"baaa0631-10"}},"nodeMetas":{"baaa0631-0":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"baaa0631-1"},"imported":[],"importedBy":[{"uid":"baaa0631-8"},{"uid":"baaa0631-2"}]},"baaa0631-2":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"baaa0631-3"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"},{"uid":"baaa0631-14"},{"uid":"baaa0631-0"},{"uid":"baaa0631-22"},{"uid":"baaa0631-18"},{"uid":"baaa0631-20"}],"importedBy":[{"uid":"baaa0631-8"}]},"baaa0631-4":{"id":"/src/template.ts","moduleParts":{"index.js":"baaa0631-5"},"imported":[{"uid":"baaa0631-25"},{"uid":"baaa0631-22"},{"uid":"baaa0631-20"}],"importedBy":[{"uid":"baaa0631-8"}]},"baaa0631-6":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"baaa0631-7"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"},{"uid":"baaa0631-22"}],"importedBy":[{"uid":"baaa0631-8"}]},"baaa0631-8":{"id":"/src/index.ts","moduleParts":{"index.js":"baaa0631-9"},"imported":[{"uid":"baaa0631-14"},{"uid":"baaa0631-2"},{"uid":"baaa0631-0"},{"uid":"baaa0631-10"},{"uid":"baaa0631-22"},{"uid":"baaa0631-20"},{"uid":"baaa0631-4"},{"uid":"baaa0631-12"},{"uid":"baaa0631-6"},{"uid":"baaa0631-16"}],"importedBy":[],"isEntry":true},"baaa0631-10":{"id":"/src/keep-alive.ts","moduleParts":{"keep-alive-entry.js":"baaa0631-11","_chunks/keep-alive-DznjF_h1.js":"baaa0631-24"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"},{"uid":"baaa0631-22"}],"importedBy":[{"uid":"baaa0631-8"}],"isEntry":true},"baaa0631-12":{"id":"/src/transition.ts","moduleParts":{"transition-entry.js":"baaa0631-13"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"}],"importedBy":[{"uid":"baaa0631-8"}],"isEntry":true},"baaa0631-14":{"id":"/src/delegate.ts","moduleParts":{"_chunks/keep-alive-DznjF_h1.js":"baaa0631-15"},"imported":[{"uid":"baaa0631-25"}],"importedBy":[{"uid":"baaa0631-8"},{"uid":"baaa0631-2"},{"uid":"baaa0631-20"}]},"baaa0631-16":{"id":"/src/devtools.ts","moduleParts":{"_chunks/keep-alive-DznjF_h1.js":"baaa0631-17"},"imported":[{"uid":"baaa0631-25"}],"importedBy":[{"uid":"baaa0631-8"},{"uid":"baaa0631-22"}]},"baaa0631-18":{"id":"/src/nodes.ts","moduleParts":{"_chunks/keep-alive-DznjF_h1.js":"baaa0631-19"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"}],"importedBy":[{"uid":"baaa0631-2"},{"uid":"baaa0631-22"}]},"baaa0631-20":{"id":"/src/props.ts","moduleParts":{"_chunks/keep-alive-DznjF_h1.js":"baaa0631-21"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"},{"uid":"baaa0631-14"}],"importedBy":[{"uid":"baaa0631-8"},{"uid":"baaa0631-2"},{"uid":"baaa0631-22"},{"uid":"baaa0631-4"}]},"baaa0631-22":{"id":"/src/mount.ts","moduleParts":{"_chunks/keep-alive-DznjF_h1.js":"baaa0631-23"},"imported":[{"uid":"baaa0631-26"},{"uid":"baaa0631-25"},{"uid":"baaa0631-16"},{"uid":"baaa0631-18"},{"uid":"baaa0631-20"}],"importedBy":[{"uid":"baaa0631-8"},{"uid":"baaa0631-2"},{"uid":"baaa0631-10"},{"uid":"baaa0631-4"},{"uid":"baaa0631-6"}]},"baaa0631-25":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"baaa0631-14"},{"uid":"baaa0631-2"},{"uid":"baaa0631-10"},{"uid":"baaa0631-22"},{"uid":"baaa0631-20"},{"uid":"baaa0631-4"},{"uid":"baaa0631-12"},{"uid":"baaa0631-6"},{"uid":"baaa0631-16"},{"uid":"baaa0631-18"}]},"baaa0631-26":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"baaa0631-2"},{"uid":"baaa0631-10"},{"uid":"baaa0631-22"},{"uid":"baaa0631-20"},{"uid":"baaa0631-12"},{"uid":"baaa0631-6"},{"uid":"baaa0631-18"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { a as applyProps, c as mountReactive, d as delegatedPropName, f as setupDelegation, i as applyProp, l as installDevTools, n as mountChild, o as sanitizeHtml, r as _bindEvent, s as setSanitizer, t as KeepAlive, u as DELEGATED_EVENTS } from "./_chunks/keep-alive-BM7bn3W9.js";
+import { a as applyProps, c as mountReactive, d as delegatedPropName, f as setupDelegation, i as applyProp, l as installDevTools, n as mountChild, o as sanitizeHtml, r as _bindEvent, s as setSanitizer, t as KeepAlive, u as DELEGATED_EVENTS } from "./_chunks/keep-alive-DznjF_h1.js";
 import { Transition } from "./transition-entry.js";
 import { effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
 import { ForSymbol, Fragment, PortalSymbol, createRef, dispatchToErrorBoundary, h, makeReactiveProps, nativeCompat, onMount, onUnmount, reportError, runWithHooks } from "@pyreon/core";
@@ -490,7 +490,142 @@ function _rsCollapseH(html, lightClass, darkClass, isDark, handlers, bind) {
 			el.className = v ? darkClass : lightClass;
 		});
 		const handlerDisposers = [];
-		for (const key in handlers) {
+		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)
+*/
+function _rsCollapseDyn(html, classes, valueIndex, isDark, bind) {
+	return _tpl(html, (el) => {
+		const disposeClass = renderEffect(() => {
+			el.className = classes[valueIndex() << 1 | (isDark() ? 1 : 0)] ?? "";
+		});
+		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)
+*/
+function _rsCollapseDynH(html, classes, valueIndex, isDark, handlers, bind) {
+	return _tpl(html, (el) => {
+		const disposeClass = renderEffect(() => {
+			el.className = classes[valueIndex() << 1 | (isDark() ? 1 : 0)] ?? "";
+		});
+		const handlerDisposers = [];
+		for (const key of Object.keys(handlers)) {
 			const d = _bindEvent(el, key, handlers[key]);
 			if (d) handlerDisposers.push(d);
 		}
@@ -811,5 +946,5 @@ function mount(root, container) {
 const render = mount;
 
 //#endregion
-export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, 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, KeepAlive, Transition, TransitionGroup, 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=index.js.map

package/lib/keep-alive-entry.js

@@ -1,3 +1,3 @@
-import { t as KeepAlive } from "./_chunks/keep-alive-BM7bn3W9.js";
+import { t as KeepAlive } from "./_chunks/keep-alive-DznjF_h1.js";
 
 export { KeepAlive };

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.23.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.23.0",
-    "@pyreon/reactivity": "^0.23.0"
+    "@pyreon/core": "^0.24.0",
+    "@pyreon/reactivity": "^0.24.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.23.0",
+    "@pyreon/compiler": "^0.24.0",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/runtime-server": "^0.23.0",
-    "@pyreon/test-utils": "^0.13.10",
+    "@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()