@pyreon/runtime-dom 0.19.0 → 0.21.0

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":"8df5ffbc-1","name":"delegate.ts"},{"uid":"8df5ffbc-3","name":"hydration-debug.ts"},{"uid":"8df5ffbc-5","name":"devtools.ts"},{"uid":"8df5ffbc-7","name":"nodes.ts"},{"uid":"8df5ffbc-9","name":"props.ts"},{"uid":"8df5ffbc-11","name":"mount.ts"},{"uid":"8df5ffbc-13","name":"hydrate.ts"},{"uid":"8df5ffbc-15","name":"keep-alive.ts"},{"uid":"8df5ffbc-17","name":"template.ts"},{"uid":"8df5ffbc-19","name":"transition.ts"},{"uid":"8df5ffbc-21","name":"transition-group.ts"},{"uid":"8df5ffbc-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"8df5ffbc-1":{"renderedLength":2090,"gzipLength":1029,"brotliLength":0,"metaUid":"8df5ffbc-0"},"8df5ffbc-3":{"renderedLength":1395,"gzipLength":718,"brotliLength":0,"metaUid":"8df5ffbc-2"},"8df5ffbc-5":{"renderedLength":7009,"gzipLength":2149,"brotliLength":0,"metaUid":"8df5ffbc-4"},"8df5ffbc-7":{"renderedLength":17556,"gzipLength":4660,"brotliLength":0,"metaUid":"8df5ffbc-6"},"8df5ffbc-9":{"renderedLength":8288,"gzipLength":3134,"brotliLength":0,"metaUid":"8df5ffbc-8"},"8df5ffbc-11":{"renderedLength":12232,"gzipLength":3882,"brotliLength":0,"metaUid":"8df5ffbc-10"},"8df5ffbc-13":{"renderedLength":8312,"gzipLength":2472,"brotliLength":0,"metaUid":"8df5ffbc-12"},"8df5ffbc-15":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"8df5ffbc-14"},"8df5ffbc-17":{"renderedLength":5942,"gzipLength":2283,"brotliLength":0,"metaUid":"8df5ffbc-16"},"8df5ffbc-19":{"renderedLength":4929,"gzipLength":1410,"brotliLength":0,"metaUid":"8df5ffbc-18"},"8df5ffbc-21":{"renderedLength":8002,"gzipLength":2092,"brotliLength":0,"metaUid":"8df5ffbc-20"},"8df5ffbc-23":{"renderedLength":985,"gzipLength":549,"brotliLength":0,"metaUid":"8df5ffbc-22"}},"nodeMetas":{"8df5ffbc-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"8df5ffbc-1"},"imported":[{"uid":"8df5ffbc-24"}],"importedBy":[{"uid":"8df5ffbc-22"},{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-8"}]},"8df5ffbc-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"8df5ffbc-3"},"imported":[],"importedBy":[{"uid":"8df5ffbc-22"},{"uid":"8df5ffbc-12"}]},"8df5ffbc-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"8df5ffbc-5"},"imported":[],"importedBy":[{"uid":"8df5ffbc-22"},{"uid":"8df5ffbc-10"}]},"8df5ffbc-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"8df5ffbc-7"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"}],"importedBy":[{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-10"}]},"8df5ffbc-8":{"id":"/src/props.ts","moduleParts":{"index.js":"8df5ffbc-9"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-0"}],"importedBy":[{"uid":"8df5ffbc-22"},{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-10"}]},"8df5ffbc-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"8df5ffbc-11"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-4"},{"uid":"8df5ffbc-6"},{"uid":"8df5ffbc-8"}],"importedBy":[{"uid":"8df5ffbc-22"},{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-14"},{"uid":"8df5ffbc-16"},{"uid":"8df5ffbc-20"}]},"8df5ffbc-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"8df5ffbc-13"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-0"},{"uid":"8df5ffbc-2"},{"uid":"8df5ffbc-10"},{"uid":"8df5ffbc-6"},{"uid":"8df5ffbc-8"}],"importedBy":[{"uid":"8df5ffbc-22"}]},"8df5ffbc-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"8df5ffbc-15"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-10"}],"importedBy":[{"uid":"8df5ffbc-22"}]},"8df5ffbc-16":{"id":"/src/template.ts","moduleParts":{"index.js":"8df5ffbc-17"},"imported":[{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-10"}],"importedBy":[{"uid":"8df5ffbc-22"}]},"8df5ffbc-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"8df5ffbc-19"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"}],"importedBy":[{"uid":"8df5ffbc-22"}]},"8df5ffbc-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"8df5ffbc-21"},"imported":[{"uid":"8df5ffbc-25"},{"uid":"8df5ffbc-24"},{"uid":"8df5ffbc-10"}],"importedBy":[{"uid":"8df5ffbc-22"}]},"8df5ffbc-22":{"id":"/src/index.ts","moduleParts":{"index.js":"8df5ffbc-23"},"imported":[{"uid":"8df5ffbc-0"},{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-2"},{"uid":"8df5ffbc-14"},{"uid":"8df5ffbc-10"},{"uid":"8df5ffbc-8"},{"uid":"8df5ffbc-16"},{"uid":"8df5ffbc-18"},{"uid":"8df5ffbc-20"},{"uid":"8df5ffbc-4"}],"importedBy":[],"isEntry":true},"8df5ffbc-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"8df5ffbc-0"},{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-14"},{"uid":"8df5ffbc-10"},{"uid":"8df5ffbc-8"},{"uid":"8df5ffbc-16"},{"uid":"8df5ffbc-18"},{"uid":"8df5ffbc-20"},{"uid":"8df5ffbc-6"}]},"8df5ffbc-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"8df5ffbc-12"},{"uid":"8df5ffbc-14"},{"uid":"8df5ffbc-10"},{"uid":"8df5ffbc-8"},{"uid":"8df5ffbc-18"},{"uid":"8df5ffbc-20"},{"uid":"8df5ffbc-6"}]}},"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":"c8f66e40-1","name":"delegate.ts"},{"uid":"c8f66e40-3","name":"hydration-debug.ts"},{"uid":"c8f66e40-5","name":"devtools.ts"},{"uid":"c8f66e40-7","name":"nodes.ts"},{"uid":"c8f66e40-9","name":"props.ts"},{"uid":"c8f66e40-11","name":"mount.ts"},{"uid":"c8f66e40-13","name":"hydrate.ts"},{"uid":"c8f66e40-15","name":"keep-alive.ts"},{"uid":"c8f66e40-17","name":"template.ts"},{"uid":"c8f66e40-19","name":"transition.ts"},{"uid":"c8f66e40-21","name":"transition-group.ts"},{"uid":"c8f66e40-23","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"c8f66e40-1":{"renderedLength":2090,"gzipLength":1029,"brotliLength":0,"metaUid":"c8f66e40-0"},"c8f66e40-3":{"renderedLength":1395,"gzipLength":718,"brotliLength":0,"metaUid":"c8f66e40-2"},"c8f66e40-5":{"renderedLength":8163,"gzipLength":2538,"brotliLength":0,"metaUid":"c8f66e40-4"},"c8f66e40-7":{"renderedLength":17556,"gzipLength":4660,"brotliLength":0,"metaUid":"c8f66e40-6"},"c8f66e40-9":{"renderedLength":9054,"gzipLength":3498,"brotliLength":0,"metaUid":"c8f66e40-8"},"c8f66e40-11":{"renderedLength":12232,"gzipLength":3882,"brotliLength":0,"metaUid":"c8f66e40-10"},"c8f66e40-13":{"renderedLength":8312,"gzipLength":2472,"brotliLength":0,"metaUid":"c8f66e40-12"},"c8f66e40-15":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"c8f66e40-14"},"c8f66e40-17":{"renderedLength":9693,"gzipLength":3751,"brotliLength":0,"metaUid":"c8f66e40-16"},"c8f66e40-19":{"renderedLength":4929,"gzipLength":1410,"brotliLength":0,"metaUid":"c8f66e40-18"},"c8f66e40-21":{"renderedLength":8002,"gzipLength":2092,"brotliLength":0,"metaUid":"c8f66e40-20"},"c8f66e40-23":{"renderedLength":985,"gzipLength":549,"brotliLength":0,"metaUid":"c8f66e40-22"}},"nodeMetas":{"c8f66e40-0":{"id":"/src/delegate.ts","moduleParts":{"index.js":"c8f66e40-1"},"imported":[{"uid":"c8f66e40-24"}],"importedBy":[{"uid":"c8f66e40-22"},{"uid":"c8f66e40-12"},{"uid":"c8f66e40-8"}]},"c8f66e40-2":{"id":"/src/hydration-debug.ts","moduleParts":{"index.js":"c8f66e40-3"},"imported":[],"importedBy":[{"uid":"c8f66e40-22"},{"uid":"c8f66e40-12"}]},"c8f66e40-4":{"id":"/src/devtools.ts","moduleParts":{"index.js":"c8f66e40-5"},"imported":[{"uid":"c8f66e40-24"}],"importedBy":[{"uid":"c8f66e40-22"},{"uid":"c8f66e40-10"}]},"c8f66e40-6":{"id":"/src/nodes.ts","moduleParts":{"index.js":"c8f66e40-7"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"}],"importedBy":[{"uid":"c8f66e40-12"},{"uid":"c8f66e40-10"}]},"c8f66e40-8":{"id":"/src/props.ts","moduleParts":{"index.js":"c8f66e40-9"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"},{"uid":"c8f66e40-0"}],"importedBy":[{"uid":"c8f66e40-22"},{"uid":"c8f66e40-12"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-16"}]},"c8f66e40-10":{"id":"/src/mount.ts","moduleParts":{"index.js":"c8f66e40-11"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"},{"uid":"c8f66e40-4"},{"uid":"c8f66e40-6"},{"uid":"c8f66e40-8"}],"importedBy":[{"uid":"c8f66e40-22"},{"uid":"c8f66e40-12"},{"uid":"c8f66e40-14"},{"uid":"c8f66e40-16"},{"uid":"c8f66e40-20"}]},"c8f66e40-12":{"id":"/src/hydrate.ts","moduleParts":{"index.js":"c8f66e40-13"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"},{"uid":"c8f66e40-0"},{"uid":"c8f66e40-2"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-6"},{"uid":"c8f66e40-8"}],"importedBy":[{"uid":"c8f66e40-22"}]},"c8f66e40-14":{"id":"/src/keep-alive.ts","moduleParts":{"index.js":"c8f66e40-15"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"},{"uid":"c8f66e40-10"}],"importedBy":[{"uid":"c8f66e40-22"}]},"c8f66e40-16":{"id":"/src/template.ts","moduleParts":{"index.js":"c8f66e40-17"},"imported":[{"uid":"c8f66e40-24"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-8"}],"importedBy":[{"uid":"c8f66e40-22"}]},"c8f66e40-18":{"id":"/src/transition.ts","moduleParts":{"index.js":"c8f66e40-19"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"}],"importedBy":[{"uid":"c8f66e40-22"}]},"c8f66e40-20":{"id":"/src/transition-group.ts","moduleParts":{"index.js":"c8f66e40-21"},"imported":[{"uid":"c8f66e40-25"},{"uid":"c8f66e40-24"},{"uid":"c8f66e40-10"}],"importedBy":[{"uid":"c8f66e40-22"}]},"c8f66e40-22":{"id":"/src/index.ts","moduleParts":{"index.js":"c8f66e40-23"},"imported":[{"uid":"c8f66e40-0"},{"uid":"c8f66e40-12"},{"uid":"c8f66e40-2"},{"uid":"c8f66e40-14"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-8"},{"uid":"c8f66e40-16"},{"uid":"c8f66e40-18"},{"uid":"c8f66e40-20"},{"uid":"c8f66e40-4"}],"importedBy":[],"isEntry":true},"c8f66e40-24":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"c8f66e40-0"},{"uid":"c8f66e40-12"},{"uid":"c8f66e40-14"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-8"},{"uid":"c8f66e40-16"},{"uid":"c8f66e40-18"},{"uid":"c8f66e40-20"},{"uid":"c8f66e40-4"},{"uid":"c8f66e40-6"}]},"c8f66e40-25":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"c8f66e40-12"},{"uid":"c8f66e40-14"},{"uid":"c8f66e40-10"},{"uid":"c8f66e40-8"},{"uid":"c8f66e40-18"},{"uid":"c8f66e40-20"},{"uid":"c8f66e40-6"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/keep-alive-entry.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"keep-alive-entry.js","children":[{"name":"src","children":[{"uid":"56ea40e5-1","name":"devtools.ts"},{"uid":"56ea40e5-3","name":"nodes.ts"},{"uid":"56ea40e5-5","name":"delegate.ts"},{"uid":"56ea40e5-7","name":"props.ts"},{"uid":"56ea40e5-9","name":"mount.ts"},{"uid":"56ea40e5-11","name":"keep-alive.ts"}]}]}],"isRoot":true},"nodeParts":{"56ea40e5-1":{"renderedLength":759,"gzipLength":340,"brotliLength":0,"metaUid":"56ea40e5-0"},"56ea40e5-3":{"renderedLength":17556,"gzipLength":4658,"brotliLength":0,"metaUid":"56ea40e5-2"},"56ea40e5-5":{"renderedLength":790,"gzipLength":436,"brotliLength":0,"metaUid":"56ea40e5-4"},"56ea40e5-7":{"renderedLength":7818,"gzipLength":2974,"brotliLength":0,"metaUid":"56ea40e5-6"},"56ea40e5-9":{"renderedLength":12162,"gzipLength":3873,"brotliLength":0,"metaUid":"56ea40e5-8"},"56ea40e5-11":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"56ea40e5-10"}},"nodeMetas":{"56ea40e5-0":{"id":"/src/devtools.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-1"},"imported":[],"importedBy":[{"uid":"56ea40e5-8"}]},"56ea40e5-2":{"id":"/src/nodes.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-3"},"imported":[{"uid":"56ea40e5-12"},{"uid":"56ea40e5-13"}],"importedBy":[{"uid":"56ea40e5-8"}]},"56ea40e5-4":{"id":"/src/delegate.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-5"},"imported":[{"uid":"56ea40e5-13"}],"importedBy":[{"uid":"56ea40e5-6"}]},"56ea40e5-6":{"id":"/src/props.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-7"},"imported":[{"uid":"56ea40e5-12"},{"uid":"56ea40e5-13"},{"uid":"56ea40e5-4"}],"importedBy":[{"uid":"56ea40e5-8"}]},"56ea40e5-8":{"id":"/src/mount.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-9"},"imported":[{"uid":"56ea40e5-12"},{"uid":"56ea40e5-13"},{"uid":"56ea40e5-0"},{"uid":"56ea40e5-2"},{"uid":"56ea40e5-6"}],"importedBy":[{"uid":"56ea40e5-10"}]},"56ea40e5-10":{"id":"/src/keep-alive.ts","moduleParts":{"keep-alive-entry.js":"56ea40e5-11"},"imported":[{"uid":"56ea40e5-12"},{"uid":"56ea40e5-13"},{"uid":"56ea40e5-8"}],"importedBy":[],"isEntry":true},"56ea40e5-12":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"56ea40e5-10"},{"uid":"56ea40e5-8"},{"uid":"56ea40e5-2"},{"uid":"56ea40e5-6"}]},"56ea40e5-13":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"56ea40e5-10"},{"uid":"56ea40e5-8"},{"uid":"56ea40e5-2"},{"uid":"56ea40e5-6"},{"uid":"56ea40e5-4"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"keep-alive-entry.js","children":[{"name":"src","children":[{"uid":"30eeaaf0-1","name":"devtools.ts"},{"uid":"30eeaaf0-3","name":"nodes.ts"},{"uid":"30eeaaf0-5","name":"delegate.ts"},{"uid":"30eeaaf0-7","name":"props.ts"},{"uid":"30eeaaf0-9","name":"mount.ts"},{"uid":"30eeaaf0-11","name":"keep-alive.ts"}]}]}],"isRoot":true},"nodeParts":{"30eeaaf0-1":{"renderedLength":759,"gzipLength":340,"brotliLength":0,"metaUid":"30eeaaf0-0"},"30eeaaf0-3":{"renderedLength":17556,"gzipLength":4658,"brotliLength":0,"metaUid":"30eeaaf0-2"},"30eeaaf0-5":{"renderedLength":790,"gzipLength":436,"brotliLength":0,"metaUid":"30eeaaf0-4"},"30eeaaf0-7":{"renderedLength":7818,"gzipLength":2974,"brotliLength":0,"metaUid":"30eeaaf0-6"},"30eeaaf0-9":{"renderedLength":12162,"gzipLength":3873,"brotliLength":0,"metaUid":"30eeaaf0-8"},"30eeaaf0-11":{"renderedLength":1518,"gzipLength":724,"brotliLength":0,"metaUid":"30eeaaf0-10"}},"nodeMetas":{"30eeaaf0-0":{"id":"/src/devtools.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-1"},"imported":[{"uid":"30eeaaf0-13"}],"importedBy":[{"uid":"30eeaaf0-8"}]},"30eeaaf0-2":{"id":"/src/nodes.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-3"},"imported":[{"uid":"30eeaaf0-12"},{"uid":"30eeaaf0-13"}],"importedBy":[{"uid":"30eeaaf0-8"}]},"30eeaaf0-4":{"id":"/src/delegate.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-5"},"imported":[{"uid":"30eeaaf0-13"}],"importedBy":[{"uid":"30eeaaf0-6"}]},"30eeaaf0-6":{"id":"/src/props.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-7"},"imported":[{"uid":"30eeaaf0-12"},{"uid":"30eeaaf0-13"},{"uid":"30eeaaf0-4"}],"importedBy":[{"uid":"30eeaaf0-8"}]},"30eeaaf0-8":{"id":"/src/mount.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-9"},"imported":[{"uid":"30eeaaf0-12"},{"uid":"30eeaaf0-13"},{"uid":"30eeaaf0-0"},{"uid":"30eeaaf0-2"},{"uid":"30eeaaf0-6"}],"importedBy":[{"uid":"30eeaaf0-10"}]},"30eeaaf0-10":{"id":"/src/keep-alive.ts","moduleParts":{"keep-alive-entry.js":"30eeaaf0-11"},"imported":[{"uid":"30eeaaf0-12"},{"uid":"30eeaaf0-13"},{"uid":"30eeaaf0-8"}],"importedBy":[],"isEntry":true},"30eeaaf0-12":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"30eeaaf0-10"},{"uid":"30eeaaf0-8"},{"uid":"30eeaaf0-2"},{"uid":"30eeaaf0-6"}]},"30eeaaf0-13":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"30eeaaf0-10"},{"uid":"30eeaaf0-8"},{"uid":"30eeaaf0-0"},{"uid":"30eeaaf0-2"},{"uid":"30eeaaf0-6"},{"uid":"30eeaaf0-4"}]}},"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 { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
+import { activateReactiveDevtools, batch, deactivateReactiveDevtools, effect, effectScope, getReactiveFires, getReactiveGraph, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
 import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, captureContextStack, createRef, cx, dispatchToErrorBoundary, h, makeReactiveProps, nativeCompat, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, restoreContextStack, runWithHooks, toKebabCase } from "@pyreon/core";
 
 //#region src/delegate.ts
@@ -129,6 +129,23 @@ function warnHydrationMismatch(type, expected, actual, path) {
 
 //#endregion
 //#region src/devtools.ts
+/**
+* Pyreon DevTools — exposes a `__PYREON_DEVTOOLS__` global hook for browser devtools extensions
+* and in-app debugging utilities.
+*
+* Installed automatically on first `mount()` call in the browser.
+* No-op on the server (typeof window === "undefined").
+*
+* Usage:
+*   window.__PYREON_DEVTOOLS__.getComponentTree()    // root component entries
+*   window.__PYREON_DEVTOOLS__.getAllComponents()     // flat list of all live components
+*   window.__PYREON_DEVTOOLS__.highlight("comp-id")  // outline a component's DOM node
+*   window.__PYREON_DEVTOOLS__.onComponentMount(cb)  // subscribe to mount events
+*   window.__PYREON_DEVTOOLS__.onComponentUnmount(cb)// subscribe to unmount events
+*   window.__PYREON_DEVTOOLS__.enableOverlay()       // Ctrl+Shift+P: hover to inspect components
+*   window.__PYREON_DEVTOOLS__.reactive.activate()   // opt-in: track the live signal/effect graph
+*   window.__PYREON_DEVTOOLS__.reactive.getGraph()   // snapshot of signals/derived/effects + edges
+*/
 const _components = /* @__PURE__ */ new Map();
 const _mountListeners = [];
 const _unmountListeners = [];
@@ -298,7 +315,13 @@ function installDevTools() {
 			};
 		},
 		enableOverlay,
-		disableOverlay
+		disableOverlay,
+		reactive: {
+			activate: activateReactiveDevtools,
+			deactivate: deactivateReactiveDevtools,
+			getGraph: getReactiveGraph,
+			getFires: getReactiveFires
+		}
 	};
 	window.__PYREON_DEVTOOLS__ = devtools;
 	window.addEventListener("keydown", (e) => {
@@ -1092,6 +1115,21 @@ function applyEventProp(el, key, value) {
 	return () => el.removeEventListener(eventName, batched);
 }
 /**
+* Bind ONE event handler through the CANONICAL event path
+* (`applyEventProp` — the same delegation, batching, and exact
+* `onXxx`→event-name normalization every compiler-emitted handler
+* uses). PR 2 of the partial-collapse build (open-work #1): a
+* collapsed-with-handler site (`_rsCollapseH`) re-attaches the residual
+* handlers `detectPartialCollapsibleShape` (compiler PR 1) peeled off.
+* Contract-consistent BY CONSTRUCTION — it IS `applyEventProp`, not a
+* re-implementation — so a partially-collapsed `<Button onClick=…>`
+* behaves byte-identically to the 5-layer mount it replaced (same
+* delegated-event prop slot, same `batch()` wrapping, same cleanup).
+*/
+function _bindEvent(el, key, handler) {
+	return applyEventProp(el, key, handler);
+}
+/**
 * Sink for a single prop's CALLED value (always a primitive / object /
 * `null` — never a function). Called both directly for static values and
 * from the reactive `renderEffect` for accessor-bound values.
@@ -2034,6 +2072,87 @@ function _tpl(html, bind) {
 	};
 }
 /**
+* Compiler-emitted collapsed rocketstyle call site.
+*
+* The runtime half of the P0 compile-time rocketstyle wrapper-collapse.
+* For a literal-prop call site like `<Button state="primary" size="md">Save</Button>`,
+* the build resolves the FULL rocketstyle/styler pipeline once (SSR
+* render of the real component) and the compiler emits ONE `_rsCollapse`
+* call instead of the 5-layer wrapper mount (rocketstyle → attrs HOC →
+* Element → Wrapper → styled). Measured 44× wall-clock, mountChild 9→1
+* (see examples/experiments/e2-static-rocketstyle/RESULTS.md).
+*
+* Dual-emit (RFC decision 1): both the light- and dark-resolved class
+* strings are baked in; `isDark` is the app's live mode accessor (the
+* compiler threads it from the configured provider, e.g. `useMode` from
+* `@pyreon/ui-core`). A whole-theme/mode swap re-runs only this binding —
+* no remount — preserving Pyreon's reactive mode-switch contract. The
+* resolved CSS rules are injected once at module-eval via the styler's
+* idempotent `injectRules()` (emitted alongside this call), so the
+* collapsed site is self-sufficient: no prior runtime mount of the real
+* component is needed to populate the sheet.
+*
+* `bind` is the standard `_tpl` child/event binder for the (static)
+* children — identical to what the compiler emits for the non-collapsed
+* template path, so children reactivity / event delegation is unchanged.
+*
+* @param html  static element HTML WITHOUT the class attr (class is applied reactively)
+* @param lightClass  resolved styler class string for light mode
+* @param darkClass   resolved styler class string for dark mode
+* @param isDark  app mode accessor — `() => boolean` (true ⇒ dark)
+* @param bind  standard _tpl binder for children/events (or null)
+*/
+function _rsCollapse(html, lightClass, darkClass, isDark, bind) {
+	return _tpl(html, (el) => {
+		const disposeClass = _bindDirect(isDark, (v) => {
+			el.className = v ? darkClass : lightClass;
+		});
+		const disposeChildren = bind ? bind(el) : null;
+		if (!disposeChildren) return disposeClass;
+		return () => {
+			disposeClass();
+			disposeChildren();
+		};
+	});
+}
+/**
+* Compiler-emitted PARTIALLY-collapsed rocketstyle call site — PR 2 of
+* the partial-collapse build (`.claude/plans/open-work-2026-q3.md` → #1).
+*
+* Identical to {@link _rsCollapse} (one `_tpl` cloneNode, dual-emit
+* reactive class, no remount on mode swap) PLUS it re-attaches the
+* residual event handlers `detectPartialCollapsibleShape` (compiler
+* PR 1) peeled off the `on*`-handler-only subset (the 7.8% the bail
+* census measured). Handlers are orthogonal to the SSR-resolved styler
+* class, so `html` / `lightClass` / `darkClass` are byte-identical to a
+* full-collapse site's — the ONLY delta vs `_rsCollapse` is the handler
+* re-attach, routed through the CANONICAL `_bindEvent` → `applyEventProp`
+* path (delegation + batching + name normalization), so the collapsed
+* node behaves byte-identically to the 5-layer mount it replaced.
+*
+* @param handlers  `{ onClick: fn, onPointerEnter: fn, … }` — the peeled
+*   residual handlers; compiler PR 3 emits this object literal from the
+*   sliced source spans `detectPartialCollapsibleShape` returned.
+*/
+function _rsCollapseH(html, lightClass, darkClass, isDark, handlers, bind) {
+	return _tpl(html, (el) => {
+		const disposeClass = _bindDirect(isDark, (v) => {
+			el.className = v ? darkClass : lightClass;
+		});
+		const handlerDisposers = [];
+		for (const key in 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();
+		};
+	});
+}
+/**
 * Mount a children slot inside a template.
 *
 * Compiler emits this instead of `createTextNode()` when it detects a
@@ -2505,5 +2624,5 @@ function mount(root, container) {
 const render = mount;
 
 //#endregion
-export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, applyProps as _applyProps, applyProps, _bindDirect, _bindText, _mountSlot, _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, _rsCollapseH, _tpl, applyProp, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, onHydrationMismatch, render, sanitizeHtml, setSanitizer, setupDelegation };
 //# sourceMappingURL=index.js.map

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactiveFire, ReactiveGraph } from "@pyreon/reactivity";
 import { NativeItem, Props, VNode, VNodeChild } from "@pyreon/core";
 
 //#region src/delegate.d.ts
@@ -31,21 +32,6 @@ declare function delegatedPropName(eventName: string): string;
 declare function setupDelegation(container: Element): void;
 //#endregion
 //#region src/devtools.d.ts
-/**
- * Pyreon DevTools — exposes a `__PYREON_DEVTOOLS__` global hook for browser devtools extensions
- * and in-app debugging utilities.
- *
- * Installed automatically on first `mount()` call in the browser.
- * No-op on the server (typeof window === "undefined").
- *
- * Usage:
- *   window.__PYREON_DEVTOOLS__.getComponentTree()    // root component entries
- *   window.__PYREON_DEVTOOLS__.getAllComponents()     // flat list of all live components
- *   window.__PYREON_DEVTOOLS__.highlight("comp-id")  // outline a component's DOM node
- *   window.__PYREON_DEVTOOLS__.onComponentMount(cb)  // subscribe to mount events
- *   window.__PYREON_DEVTOOLS__.onComponentUnmount(cb)// subscribe to unmount events
- *   window.__PYREON_DEVTOOLS__.enableOverlay()       // Ctrl+Shift+P: hover to inspect components
- */
 interface DevtoolsComponentEntry {
   id: string;
   name: string;
@@ -64,6 +50,22 @@ interface PyreonDevtools {
   /** Toggle the component inspector overlay (also: Ctrl+Shift+P) */
   enableOverlay(): void;
   disableOverlay(): void;
+  /**
+   * Reactive-graph bridge — powers the devtools Signals / Graph / Effects
+   * surfaces. Opt-in and zero-cost until `activate()` is called: nothing
+   * is tracked while a devtools client is not attached.
+   */
+  reactive: PyreonReactiveDevtools;
+}
+interface PyreonReactiveDevtools {
+  /** Start tracking the live signal/computed/effect graph. Idempotent. */
+  activate(): void;
+  /** Stop tracking + drop all retained registry/timeline state. */
+  deactivate(): void;
+  /** Fresh snapshot of the reactive graph (nodes + edges). */
+  getGraph(): ReactiveGraph;
+  /** Bounded recent-fire timeline (oldest → newest). */
+  getFires(): ReactiveFire[];
 }
 //#endregion
 //#region src/hydrate.d.ts
@@ -318,6 +320,58 @@ declare function _bindDirect(source: {
  * })
  */
 declare function _tpl(html: string, bind: (el: HTMLElement) => (() => void) | null): NativeItem;
+/**
+ * Compiler-emitted collapsed rocketstyle call site.
+ *
+ * The runtime half of the P0 compile-time rocketstyle wrapper-collapse.
+ * For a literal-prop call site like `<Button state="primary" size="md">Save</Button>`,
+ * the build resolves the FULL rocketstyle/styler pipeline once (SSR
+ * render of the real component) and the compiler emits ONE `_rsCollapse`
+ * call instead of the 5-layer wrapper mount (rocketstyle → attrs HOC →
+ * Element → Wrapper → styled). Measured 44× wall-clock, mountChild 9→1
+ * (see examples/experiments/e2-static-rocketstyle/RESULTS.md).
+ *
+ * Dual-emit (RFC decision 1): both the light- and dark-resolved class
+ * strings are baked in; `isDark` is the app's live mode accessor (the
+ * compiler threads it from the configured provider, e.g. `useMode` from
+ * `@pyreon/ui-core`). A whole-theme/mode swap re-runs only this binding —
+ * no remount — preserving Pyreon's reactive mode-switch contract. The
+ * resolved CSS rules are injected once at module-eval via the styler's
+ * idempotent `injectRules()` (emitted alongside this call), so the
+ * collapsed site is self-sufficient: no prior runtime mount of the real
+ * component is needed to populate the sheet.
+ *
+ * `bind` is the standard `_tpl` child/event binder for the (static)
+ * children — identical to what the compiler emits for the non-collapsed
+ * template path, so children reactivity / event delegation is unchanged.
+ *
+ * @param html  static element HTML WITHOUT the class attr (class is applied reactively)
+ * @param lightClass  resolved styler class string for light mode
+ * @param darkClass   resolved styler class string for dark mode
+ * @param isDark  app mode accessor — `() => boolean` (true ⇒ dark)
+ * @param bind  standard _tpl binder for children/events (or null)
+ */
+declare function _rsCollapse(html: string, lightClass: string, darkClass: string, isDark: () => boolean, bind?: ((el: HTMLElement) => (() => void) | null) | null): NativeItem;
+/**
+ * Compiler-emitted PARTIALLY-collapsed rocketstyle call site — PR 2 of
+ * the partial-collapse build (`.claude/plans/open-work-2026-q3.md` → #1).
+ *
+ * Identical to {@link _rsCollapse} (one `_tpl` cloneNode, dual-emit
+ * reactive class, no remount on mode swap) PLUS it re-attaches the
+ * residual event handlers `detectPartialCollapsibleShape` (compiler
+ * PR 1) peeled off the `on*`-handler-only subset (the 7.8% the bail
+ * census measured). Handlers are orthogonal to the SSR-resolved styler
+ * class, so `html` / `lightClass` / `darkClass` are byte-identical to a
+ * full-collapse site's — the ONLY delta vs `_rsCollapse` is the handler
+ * re-attach, routed through the CANONICAL `_bindEvent` → `applyEventProp`
+ * path (delegation + batching + name normalization), so the collapsed
+ * node behaves byte-identically to the 5-layer mount it replaced.
+ *
+ * @param handlers  `{ onClick: fn, onPointerEnter: fn, … }` — the peeled
+ *   residual handlers; compiler PR 3 emits this object literal from the
+ *   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;
 /**
  * Mount a children slot inside a template.
  *
@@ -459,5 +513,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, _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, _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.19.0",
+  "version": "0.21.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.19.0",
-    "@pyreon/reactivity": "^0.19.0"
+    "@pyreon/core": "^0.21.0",
+    "@pyreon/reactivity": "^0.21.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.19.0",
+    "@pyreon/compiler": "^0.21.0",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/runtime-server": "^0.19.0",
-    "@pyreon/test-utils": "^0.13.6",
+    "@pyreon/runtime-server": "^0.21.0",
+    "@pyreon/test-utils": "^0.13.8",
     "@vitest/browser-playwright": "^4.1.4",
     "esbuild": "^0.28.0",
     "happy-dom": "^20.8.3",

package/src/devtools.ts

@@ -12,8 +12,19 @@
  *   window.__PYREON_DEVTOOLS__.onComponentMount(cb)  // subscribe to mount events
  *   window.__PYREON_DEVTOOLS__.onComponentUnmount(cb)// subscribe to unmount events
  *   window.__PYREON_DEVTOOLS__.enableOverlay()       // Ctrl+Shift+P: hover to inspect components
+ *   window.__PYREON_DEVTOOLS__.reactive.activate()   // opt-in: track the live signal/effect graph
+ *   window.__PYREON_DEVTOOLS__.reactive.getGraph()   // snapshot of signals/derived/effects + edges
  */
 
+import {
+  activateReactiveDevtools,
+  deactivateReactiveDevtools,
+  getReactiveFires,
+  getReactiveGraph,
+  type ReactiveFire,
+  type ReactiveGraph,
+} from '@pyreon/reactivity'
+
 export interface DevtoolsComponentEntry {
   id: string
   name: string
@@ -33,6 +44,23 @@ export interface PyreonDevtools {
   /** Toggle the component inspector overlay (also: Ctrl+Shift+P) */
   enableOverlay(): void
   disableOverlay(): void
+  /**
+   * Reactive-graph bridge — powers the devtools Signals / Graph / Effects
+   * surfaces. Opt-in and zero-cost until `activate()` is called: nothing
+   * is tracked while a devtools client is not attached.
+   */
+  reactive: PyreonReactiveDevtools
+}
+
+export interface PyreonReactiveDevtools {
+  /** Start tracking the live signal/computed/effect graph. Idempotent. */
+  activate(): void
+  /** Stop tracking + drop all retained registry/timeline state. */
+  deactivate(): void
+  /** Fresh snapshot of the reactive graph (nodes + edges). */
+  getGraph(): ReactiveGraph
+  /** Bounded recent-fire timeline (oldest → newest). */
+  getFires(): ReactiveFire[]
 }
 
 // ─── Internal registry ────────────────────────────────────────────────────────
@@ -250,6 +278,13 @@ export function installDevTools(): void {
 
     enableOverlay,
     disableOverlay,
+
+    reactive: {
+      activate: activateReactiveDevtools,
+      deactivate: deactivateReactiveDevtools,
+      getGraph: getReactiveGraph,
+      getFires: getReactiveFires,
+    },
   }
 
   // Attach to window — compatible with browser devtools extensions

package/src/index.ts

@@ -24,7 +24,15 @@ export {
   sanitizeHtml,
   setSanitizer,
 } from './props'
-export { _bindDirect, _bindText, _mountSlot, _tpl, createTemplate } from './template'
+export {
+  _bindDirect,
+  _bindText,
+  _mountSlot,
+  _rsCollapse,
+  _rsCollapseH,
+  _tpl,
+  createTemplate,
+} from './template'
 export type { TransitionProps } from './transition'
 export { Transition } from './transition'
 export type { TransitionGroupProps } from './transition-group'

package/src/manifest.ts

@@ -192,6 +192,24 @@ setSanitizer(DOMPurify.sanitize)
 const clean = sanitizeHtml(userInput)`,
       seeAlso: ['setSanitizer'],
     },
+    {
+      name: '__PYREON_DEVTOOLS__',
+      kind: 'constant',
+      signature:
+        'window.__PYREON_DEVTOOLS__: { version; getComponentTree(); getAllComponents(); highlight(id); onComponentMount(cb); onComponentUnmount(cb); enableOverlay(); disableOverlay(); reactive: PyreonReactiveDevtools }',
+      summary:
+        'Browser devtools hook, installed automatically on the first `mount()` (no-op on the server). Exposes the component tree + an element-picker overlay (also `Ctrl+Shift+P`) for the `@pyreon/devtools` Chrome extension, plus a `$p` console helper. The `reactive` namespace bridges `@pyreon/reactivity`’s opt-in graph: `reactive.activate()` / `deactivate()` start/stop tracking, `reactive.getGraph()` returns the live signal/computed/effect nodes + dependency edges, `reactive.getFires()` the bounded fire timeline — powering the extension’s Signals / Graph / Effects / Profiler / Console tabs. **Dev-only and tree-shaken from production builds**; `reactive` is zero-cost until `activate()` is called by an attached panel.',
+      example: `// In the browser console (after the app has mounted):
+$p.tree()                              // root component entries
+window.__PYREON_DEVTOOLS__.reactive.activate()
+window.__PYREON_DEVTOOLS__.reactive.getGraph()  // { nodes, edges }`,
+      mistakes: [
+        'Reading it before the first `mount()` — it is installed by mount; it is `undefined` until then (and always `undefined` on the server / in production builds)',
+        'Expecting `reactive.getGraph()` to return data without calling `reactive.activate()` first — tracking is opt-in (zero-cost until a panel attaches)',
+        'Depending on it in app code — it is a dev-tooling hook, tree-shaken in production; never branch runtime behavior on its presence',
+      ],
+      seeAlso: ['mount'],
+    },
   ],
   gotchas: [
     {

package/src/props.ts

@@ -264,6 +264,22 @@ function applyEventProp(el: Element, key: string, value: unknown): Cleanup | nul
   return () => el.removeEventListener(eventName, batched)
 }
 
+/**
+ * Bind ONE event handler through the CANONICAL event path
+ * (`applyEventProp` — the same delegation, batching, and exact
+ * `onXxx`→event-name normalization every compiler-emitted handler
+ * uses). PR 2 of the partial-collapse build (open-work #1): a
+ * collapsed-with-handler site (`_rsCollapseH`) re-attaches the residual
+ * handlers `detectPartialCollapsibleShape` (compiler PR 1) peeled off.
+ * Contract-consistent BY CONSTRUCTION — it IS `applyEventProp`, not a
+ * re-implementation — so a partially-collapsed `<Button onClick=…>`
+ * behaves byte-identically to the 5-layer mount it replaced (same
+ * delegated-event prop slot, same `batch()` wrapping, same cleanup).
+ */
+export function _bindEvent(el: Element, key: string, handler: unknown): Cleanup | null {
+  return applyEventProp(el, key, handler)
+}
+
 /**
  * Sink for a single prop's CALLED value (always a primitive / object /
  * `null` — never a function). Called both directly for static values and

package/src/template.ts

@@ -1,6 +1,7 @@
 import type { NativeItem, VNodeChild } from '@pyreon/core'
 import { renderEffect } from '@pyreon/reactivity'
 import { mountChild } from './mount'
+import { _bindEvent } from './props'
 
 // Dev-mode gate: see `pyreon/no-process-dev-gate` lint rule for why this
 // uses `import.meta.env.DEV` instead of `typeof process !== 'undefined'`.
@@ -193,6 +194,105 @@ export function _tpl(html: string, bind: (el: HTMLElement) => (() => void) | nul
   return { __isNative: true, el, cleanup }
 }
 
+/**
+ * Compiler-emitted collapsed rocketstyle call site.
+ *
+ * The runtime half of the P0 compile-time rocketstyle wrapper-collapse.
+ * For a literal-prop call site like `<Button state="primary" size="md">Save</Button>`,
+ * the build resolves the FULL rocketstyle/styler pipeline once (SSR
+ * render of the real component) and the compiler emits ONE `_rsCollapse`
+ * call instead of the 5-layer wrapper mount (rocketstyle → attrs HOC →
+ * Element → Wrapper → styled). Measured 44× wall-clock, mountChild 9→1
+ * (see examples/experiments/e2-static-rocketstyle/RESULTS.md).
+ *
+ * Dual-emit (RFC decision 1): both the light- and dark-resolved class
+ * strings are baked in; `isDark` is the app's live mode accessor (the
+ * compiler threads it from the configured provider, e.g. `useMode` from
+ * `@pyreon/ui-core`). A whole-theme/mode swap re-runs only this binding —
+ * no remount — preserving Pyreon's reactive mode-switch contract. The
+ * resolved CSS rules are injected once at module-eval via the styler's
+ * idempotent `injectRules()` (emitted alongside this call), so the
+ * collapsed site is self-sufficient: no prior runtime mount of the real
+ * component is needed to populate the sheet.
+ *
+ * `bind` is the standard `_tpl` child/event binder for the (static)
+ * children — identical to what the compiler emits for the non-collapsed
+ * template path, so children reactivity / event delegation is unchanged.
+ *
+ * @param html  static element HTML WITHOUT the class attr (class is applied reactively)
+ * @param lightClass  resolved styler class string for light mode
+ * @param darkClass   resolved styler class string for dark mode
+ * @param isDark  app mode accessor — `() => boolean` (true ⇒ dark)
+ * @param bind  standard _tpl binder for children/events (or null)
+ */
+export function _rsCollapse(
+  html: string,
+  lightClass: string,
+  darkClass: string,
+  isDark: () => boolean,
+  bind?: ((el: HTMLElement) => (() => void) | null) | null,
+): NativeItem {
+  return _tpl(html, (el) => {
+    // Reactive class: _bindDirect's plain-callable fallback wraps this in
+    // a renderEffect, so reading the mode accessor subscribes to the live
+    // mode signal — a mode swap re-runs ONLY this className assignment.
+    const disposeClass = _bindDirect(isDark as unknown as { _v?: unknown }, (v) => {
+      el.className = v ? darkClass : lightClass
+    })
+    const disposeChildren = bind ? bind(el) : null
+    if (!disposeChildren) return disposeClass
+    return () => {
+      disposeClass()
+      disposeChildren()
+    }
+  })
+}
+
+/**
+ * Compiler-emitted PARTIALLY-collapsed rocketstyle call site — PR 2 of
+ * the partial-collapse build (`.claude/plans/open-work-2026-q3.md` → #1).
+ *
+ * Identical to {@link _rsCollapse} (one `_tpl` cloneNode, dual-emit
+ * reactive class, no remount on mode swap) PLUS it re-attaches the
+ * residual event handlers `detectPartialCollapsibleShape` (compiler
+ * PR 1) peeled off the `on*`-handler-only subset (the 7.8% the bail
+ * census measured). Handlers are orthogonal to the SSR-resolved styler
+ * class, so `html` / `lightClass` / `darkClass` are byte-identical to a
+ * full-collapse site's — the ONLY delta vs `_rsCollapse` is the handler
+ * re-attach, routed through the CANONICAL `_bindEvent` → `applyEventProp`
+ * path (delegation + batching + name normalization), so the collapsed
+ * node behaves byte-identically to the 5-layer mount it replaced.
+ *
+ * @param handlers  `{ onClick: fn, onPointerEnter: fn, … }` — the peeled
+ *   residual handlers; compiler PR 3 emits this object literal from the
+ *   sliced source spans `detectPartialCollapsibleShape` returned.
+ */
+export function _rsCollapseH(
+  html: string,
+  lightClass: string,
+  darkClass: string,
+  isDark: () => boolean,
+  handlers: Record<string, unknown>,
+  bind?: ((el: HTMLElement) => (() => void) | null) | null,
+): NativeItem {
+  return _tpl(html, (el) => {
+    const disposeClass = _bindDirect(isDark as unknown as { _v?: unknown }, (v) => {
+      el.className = v ? darkClass : lightClass
+    })
+    const handlerDisposers: (() => void)[] = []
+    for (const key in 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()
+    }
+  })
+}
+
 /**
  * Test-only: clear the template cache. Used by tests that assert on
  * cache size; never called by runtime code. Not exported from the

package/src/tests/manifest-snapshot.test.ts

@@ -74,7 +74,8 @@ describe('gen-docs — runtime-dom snapshot', () => {
 
   it('renders @pyreon/runtime-dom to MCP api-reference entries — one per api[] item', () => {
     const record = renderApiReferenceEntries(runtimeDomManifest)
-    expect(Object.keys(record).length).toBe(9)
+    // +1: __PYREON_DEVTOOLS__ (reactive-devtools hook surface).
+    expect(Object.keys(record).length).toBe(10)
     expect(Object.keys(record)).toContain('runtime-dom/mount')
     // Spot-check the flagship API — mount is the primary entry point
     const mount = record['runtime-dom/mount']!

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

@@ -0,0 +1,152 @@
+import { signal } from '@pyreon/reactivity'
+import { flush } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it } from 'vitest'
+import { _rsCollapseH, mount } from '../index'
+
+// PR 2 of the partial-collapse build (open-work #1), in REAL Chromium.
+// `_rsCollapseH` = `_rsCollapse` (one _tpl cloneNode, dual-emit reactive
+// class, no remount) PLUS it re-attaches the residual `on*` handlers the
+// compiler's `detectPartialCollapsibleShape` (PR 1) peeled off. The ONLY
+// delta vs `_rsCollapse` is the handler re-attach, routed through the
+// canonical `_bindEvent` → `applyEventProp` path — so a partially-
+// collapsed `<Button onClick=…>` behaves byte-identically to the
+// 5-layer mount it replaced. These specs prove exactly that delta in a
+// real browser (real click/pointer events, real computed style).
+//
+// Bisect-verify (PR body): neutralize the handler loop in
+// `_rsCollapseH` (`for (const key in handlers)` → no-op) → the 3
+// handler specs fail (`expected 0 to be 1` — handler never fired) while
+// every class/mode/no-remount assertion still passes; restore → all
+// pass. That asymmetry proves the handler re-attach is the load-bearing
+// addition, not passing for the wrong reason.
+
+describe('_rsCollapseH (real browser) — PR 2 partial-collapse runtime', () => {
+  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 _rsCollapseH>): 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
+  }
+
+  it('applies the light class AND fires the peeled onClick on a real click', async () => {
+    injectCss('.rsh-l{color:rgb(1,2,3)}.rsh-d{color:rgb(9,8,7)}')
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseH('<button>Save</button>', 'rsh-l', 'rsh-d', () => isDark(), {
+        onClick: () => {
+          clicks++
+        },
+      }),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLButtonElement
+    expect(btn).not.toBeNull()
+    expect(btn.className).toBe('rsh-l')
+    expect(btn.textContent).toBe('Save')
+    expect(getComputedStyle(btn).color).toBe('rgb(1, 2, 3)')
+
+    btn.click()
+    expect(clicks).toBe(1)
+    btn.click()
+    expect(clicks).toBe(2)
+  })
+
+  it('mode flip swaps the class on the SAME node AND the handler survives the flip', async () => {
+    injectCss('.rsh-l2{color:rgb(10,20,30)}.rsh-d2{color:rgb(40,50,60)}')
+    const isDark = signal(false)
+    let clicks = 0
+    const root = mountInto(
+      _rsCollapseH('<button>X</button>', 'rsh-l2', 'rsh-d2', () => isDark(), {
+        onClick: () => {
+          clicks++
+        },
+      }),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLButtonElement
+    expect(before.className).toBe('rsh-l2')
+    before.click()
+    expect(clicks).toBe(1)
+
+    isDark.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLButtonElement
+    expect(after).toBe(before) // node identity preserved ⇒ reactive, not remount
+    expect(after.className).toBe('rsh-d2')
+    // The load-bearing partial-collapse contract: the reactive class
+    // binding does NOT remount, so the handler attached at first mount is
+    // still live after the mode flip.
+    after.click()
+    expect(clicks).toBe(2)
+  })
+
+  it('peels + binds MULTIPLE handlers with correct onXxx→event normalization', async () => {
+    injectCss('.rsh-m{color:rgb(0,0,0)}')
+    const isDark = signal(false)
+    let clicks = 0
+    let enters = 0
+    const root = mountInto(
+      _rsCollapseH('<button>M</button>', 'rsh-m', 'rsh-m', () => isDark(), {
+        onClick: () => {
+          clicks++
+        },
+        // onPointerEnter must normalize to the lowercase DOM event
+        // `pointerenter` via the canonical path — a hand-rolled
+        // `addEventListener('pointerEnter', …)` would never fire.
+        onPointerEnter: () => {
+          enters++
+        },
+      }),
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLButtonElement
+    btn.click()
+    btn.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false }))
+    expect(clicks).toBe(1)
+    expect(enters).toBe(1)
+  })
+
+  it('dispose removes the listener (no leak) — composed cleanup is correct', async () => {
+    injectCss('.rsh-c{color:rgb(5,5,5)}')
+    const isDark = signal(false)
+    let clicks = 0
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const dispose = mount(
+      _rsCollapseH('<button>C</button>', 'rsh-c', 'rsh-c', () => isDark(), {
+        onClick: () => {
+          clicks++
+        },
+      }) as unknown as Parameters<typeof mount>[0],
+      root,
+    )
+    await flush()
+    const btn = root.querySelector('button') as HTMLButtonElement
+    btn.click()
+    expect(clicks).toBe(1)
+
+    dispose()
+    // After dispose the handler disposer ran — the listener is gone, so a
+    // post-dispose click does NOT increment.
+    btn.click()
+    expect(clicks).toBe(1)
+    root.remove()
+  })
+})

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

@@ -0,0 +1,237 @@
+import { signal } from '@pyreon/reactivity'
+import { afterEach, describe, expect, it } from 'vitest'
+import { _rsCollapseH } from '../template'
+
+// PR 2 of the partial-collapse build (open-work #1) — happy-dom UNIT
+// layer (fast + locally bisect-verifiable). Imports ONLY `../template`
+// (template.test.ts style) — NOT `../index`, whose wide cross-package
+// re-export graph hits the documented fresh-worktree resolution trap.
+//
+// Event-path split (honest, per test-environment-parity — both layers):
+//   - DELEGATED events (`click`, see `delegate.ts:DELEGATED_EVENTS`)
+//     park in a prop-slot that only fires via the root listener
+//     `mount()` installs → covered by `rs-collapse-h.browser.test.ts`
+//     (real Chromium + real `mount()`, CI-authoritative; can't run in a
+//     fresh worktree — `@pyreon/test-utils/browser` needs built lib).
+//   - NON-delegated events (`pointerenter`, `mouseenter` — NOT in
+//     `DELEGATED_EVENTS`) take `applyEventProp`'s direct
+//     `el.addEventListener(name, …)` path → fire on a bare
+//     `dispatchEvent` with NO `mount()`. This unit drives the
+//     handler-attach delta on THAT path: it still proves `_rsCollapseH`
+//     routes residual handlers through the canonical
+//     `_bindEvent`→`applyEventProp` path (incl. the exact
+//     `onXxx`→lowercase normalization) + composed cleanup — the
+//     load-bearing addition vs `_rsCollapse`.
+//
+// `_rsCollapseH` returns a NativeItem (`{ __isNative, el, cleanup }`);
+// `_tpl` runs the bind synchronously at call time, so class + handlers
+// are live on `.el` immediately (same direct-NativeItem shape
+// `template.test.ts` uses for `_tpl`). Signal writes propagate
+// synchronously here (cf. `template.test.ts:_bindText`); a
+// `Promise.resolve()` tick covers any microtask-scheduled reactive
+// class update defensively.
+//
+// Bisect-verify (PR body): neutralize the handler loop in
+// `_rsCollapseH` (`for (const key in handlers)` body → skip) → the
+// handler/normalization/cleanup specs fail with `expected 0 to be 1`
+// while every class / mode-flip / no-remount / zero-handler / child
+// assertion still passes; restore → 8/8. The asymmetry proves the
+// handler re-attach is the load-bearing delta.
+
+const tick = (): Promise<void> => Promise.resolve()
+
+describe('_rsCollapseH (happy-dom unit) — PR 2 partial-collapse runtime', () => {
+  const cleanup: Array<() => void> = []
+  afterEach(() => {
+    for (const u of cleanup.splice(0)) u()
+  })
+
+  function place(item: ReturnType<typeof _rsCollapseH>): HTMLElement {
+    const el = item.el as HTMLElement
+    document.body.appendChild(el)
+    cleanup.push(() => {
+      item.cleanup?.()
+      el.remove()
+    })
+    return el
+  }
+
+  const fire = (el: HTMLElement, type: string): void => {
+    el.dispatchEvent(new Event(type, { bubbles: false }))
+  }
+
+  it('sets the light class + static children AND fires the peeled handler', () => {
+    const isDark = signal(false)
+    let enters = 0
+    const el = place(
+      _rsCollapseH('<button>Save</button>', 'rsh-l', 'rsh-d', () => isDark(), {
+        onPointerEnter: () => {
+          enters++
+        },
+      }),
+    )
+    expect(el.tagName).toBe('BUTTON')
+    expect(el.className).toBe('rsh-l')
+    expect(el.textContent).toBe('Save')
+
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1)
+    fire(el, 'pointerenter')
+    expect(enters).toBe(2)
+  })
+
+  it('normalizes onXxx → lowercase DOM event via the canonical path', () => {
+    const isDark = signal(false)
+    let enters = 0
+    let mouse = 0
+    const el = place(
+      _rsCollapseH('<button>M</button>', 'rsh-m', 'rsh-m', () => isDark(), {
+        // onPointerEnter MUST bind to `pointerenter` (lowercased whole
+        // name) — a hand-rolled `addEventListener('pointerEnter', …)`
+        // would never fire. onMouseEnter → `mouseenter` likewise.
+        onPointerEnter: () => {
+          enters++
+        },
+        onMouseEnter: () => {
+          mouse++
+        },
+      }),
+    )
+    fire(el, 'pointerenter')
+    fire(el, 'mouseenter')
+    expect(enters).toBe(1)
+    expect(mouse).toBe(1)
+    // Wrong-case names must NOT fire (proves real normalization, not luck).
+    fire(el, 'pointerEnter')
+    fire(el, 'mouseEnter')
+    expect(enters).toBe(1)
+    expect(mouse).toBe(1)
+  })
+
+  it('mode flip swaps the class on the SAME node AND the handler survives the flip', async () => {
+    const isDark = signal(false)
+    let enters = 0
+    const el = place(
+      _rsCollapseH('<button>X</button>', 'rsh-l2', 'rsh-d2', () => isDark(), {
+        onPointerEnter: () => {
+          enters++
+        },
+      }),
+    )
+    expect(el.className).toBe('rsh-l2')
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1)
+
+    isDark.set(true)
+    await tick()
+    // Same node identity ⇒ reactive class swap, NOT a remount.
+    expect(el.className).toBe('rsh-d2')
+    // Load-bearing partial-collapse contract: no remount ⇒ the handler
+    // bound at construction is still live after the mode flip.
+    fire(el, 'pointerenter')
+    expect(enters).toBe(2)
+
+    isDark.set(false)
+    await tick()
+    expect(el.className).toBe('rsh-l2')
+  })
+
+  it('cleanup() removes the listener — composed disposer is correct (no leak)', () => {
+    const isDark = signal(false)
+    let enters = 0
+    const item = _rsCollapseH('<button>C</button>', 'rsh-c', 'rsh-c', () => isDark(), {
+      onPointerEnter: () => {
+        enters++
+      },
+    })
+    const el = item.el as HTMLElement
+    document.body.appendChild(el)
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1)
+
+    item.cleanup?.()
+    fire(el, 'pointerenter') // listener removed by the composed disposer
+    expect(enters).toBe(1)
+    el.remove()
+  })
+
+  it('binds MULTIPLE handlers; literal props stay out of the handler set', () => {
+    const isDark = signal(false)
+    let a = 0
+    let b = 0
+    const el = place(
+      _rsCollapseH('<button>N</button>', 'rsh-n', 'rsh-n', () => isDark(), {
+        onPointerEnter: () => {
+          a++
+        },
+        onMouseEnter: () => {
+          b++
+        },
+      }),
+    )
+    fire(el, 'pointerenter')
+    fire(el, 'mouseenter')
+    fire(el, 'pointerenter')
+    expect(a).toBe(2)
+    expect(b).toBe(1)
+  })
+
+  it('zero handlers: renders class + children, cleanup is safe (defensive)', async () => {
+    const isDark = signal(false)
+    const el = place(_rsCollapseH('<button>Z</button>', 'rsh-z', 'rsh-zd', () => isDark(), {}))
+    expect(el.className).toBe('rsh-z')
+    expect(el.textContent).toBe('Z')
+    isDark.set(true)
+    await tick()
+    expect(el.className).toBe('rsh-zd')
+    // cleanup runs via afterEach — must not throw with no handlers.
+  })
+
+  it('children bind runs alongside the class + handler binds', () => {
+    const isDark = signal(false)
+    let enters = 0
+    const el = place(
+      _rsCollapseH(
+        '<button><span></span></button>',
+        'rsh-cb',
+        'rsh-cbd',
+        () => isDark(),
+        { onPointerEnter: () => enters++ },
+        (root) => {
+          ;(root.querySelector('span') as HTMLElement).textContent = 'child'
+          return null
+        },
+      ),
+    )
+    expect(el.className).toBe('rsh-cb')
+    expect((el.querySelector('span') as HTMLElement).textContent).toBe('child')
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1)
+  })
+
+  it('disposes class + handler + child binds together (composition)', () => {
+    const isDark = signal(false)
+    let enters = 0
+    let childDisposed = false
+    const item = _rsCollapseH(
+      '<button><span></span></button>',
+      'rsh-x',
+      'rsh-xd',
+      () => isDark(),
+      { onPointerEnter: () => enters++ },
+      () => () => {
+        childDisposed = true
+      },
+    )
+    const el = item.el as HTMLElement
+    document.body.appendChild(el)
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1)
+
+    item.cleanup?.()
+    expect(childDisposed).toBe(true) // child disposer composed + ran
+    fire(el, 'pointerenter')
+    expect(enters).toBe(1) // handler disposer ran too
+    el.remove()
+  })
+})

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

@@ -0,0 +1,128 @@
+import { signal } from '@pyreon/reactivity'
+import { flush } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it } from 'vitest'
+import { _rsCollapse, mount } from '../index'
+
+// Layer 2 of the P0 rocketstyle-collapse slice, in real Chromium.
+// `_rsCollapse` deliberately does NOT import @pyreon/styler (layer
+// purity — runtime-dom is layer 4; the styler injection is the EMITTED
+// code's job). So this suite injects CSS via a plain <style> and proves
+// only what _rsCollapse owns: ONE _tpl() cloneNode whose class is
+// reactively bound to the app mode (dual-emit, RFC decision 1) — a mode
+// flip swaps the class on the SAME node with no remount.
+
+describe('_rsCollapse (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 _rsCollapse>): 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
+  }
+
+  it('applies the light class + static children; the class is real CSS', async () => {
+    injectCss('.rsc-light{color:rgb(1,2,3)}.rsc-dark{color:rgb(9,8,7)}')
+    const isDark = signal(false)
+    const root = mountInto(
+      _rsCollapse('<button>Save</button>', 'rsc-light', 'rsc-dark', () => isDark()),
+    )
+    await flush()
+    const btn = root.querySelector('button')
+    expect(btn).not.toBeNull()
+    expect(btn?.className).toBe('rsc-light')
+    expect(btn?.textContent).toBe('Save')
+    expect(getComputedStyle(btn as Element).color).toBe('rgb(1, 2, 3)')
+  })
+
+  it('mode flip swaps to the dark class on the SAME node (no remount)', async () => {
+    injectCss('.rsc-l2{color:rgb(10,20,30)}.rsc-d2{color:rgb(40,50,60)}')
+    const isDark = signal(false)
+    const root = mountInto(
+      _rsCollapse('<button>X</button>', 'rsc-l2', 'rsc-d2', () => isDark()),
+    )
+    await flush()
+    const before = root.querySelector('button') as HTMLElement
+    expect(before.className).toBe('rsc-l2')
+
+    isDark.set(true)
+    await flush()
+    const after = root.querySelector('button') as HTMLElement
+    expect(after).toBe(before) // node identity preserved ⇒ reactive, not remount
+    expect(after.className).toBe('rsc-d2')
+    expect(getComputedStyle(after).color).toBe('rgb(40, 50, 60)')
+
+    isDark.set(false)
+    await flush()
+    expect((root.querySelector('button') as HTMLElement).className).toBe('rsc-l2')
+  })
+
+  it('children bind runs alongside the class bind and disposes cleanly', async () => {
+    injectCss('.rsc-c{color:rgb(2,2,2)}.rsc-cd{color:rgb(3,3,3)}')
+    const label = signal('one')
+    const isDark = signal(false)
+    let childDisposed = false
+    const root = mountInto(
+      _rsCollapse(
+        '<button><span></span></button>',
+        'rsc-c',
+        'rsc-cd',
+        () => isDark(),
+        (el) => {
+          const span = el.querySelector('span') as HTMLElement
+          const stop = (() => {
+            // minimal reactive child without pulling the compiler in
+            let raf = 0
+            const tick = () => {
+              span.textContent = label()
+              raf = requestAnimationFrame(tick)
+            }
+            tick()
+            return () => {
+              cancelAnimationFrame(raf)
+              childDisposed = true
+            }
+          })()
+          return stop
+        },
+      ),
+    )
+    await flush()
+    expect((root.querySelector('span') as HTMLElement).textContent).toBe('one')
+    expect((root.querySelector('button') as HTMLElement).className).toBe('rsc-c')
+    // dispose via afterEach → child cleanup must fire
+    for (const u of cleanup.splice(0)) u()
+    expect(childDisposed).toBe(true)
+  })
+
+  it('two instances of the same html share ONE parsed template, with independent reactivity', async () => {
+    injectCss('.rsc-s{color:rgb(7,7,7)}.rsc-sd{color:rgb(8,8,8)}')
+    const isDark = signal(false)
+    const r1 = mountInto(_rsCollapse('<button>dup</button>', 'rsc-s', 'rsc-sd', () => isDark()))
+    const r2 = mountInto(_rsCollapse('<button>dup</button>', 'rsc-s', 'rsc-sd', () => isDark()))
+    await flush()
+    const b1 = r1.querySelector('button') as HTMLElement
+    const b2 = r2.querySelector('button') as HTMLElement
+    expect(b1).not.toBe(b2) // distinct cloned nodes from the shared template
+    expect(b1.className).toBe('rsc-s')
+    expect(b2.className).toBe('rsc-s')
+    isDark.set(true)
+    await flush()
+    expect((r1.querySelector('button') as HTMLElement).className).toBe('rsc-sd')
+    expect((r2.querySelector('button') as HTMLElement).className).toBe('rsc-sd')
+  })
+})