@pyreon/runtime-dom 0.21.0 → 0.23.0

package/lib/index.js

@@ -1,85 +1,8 @@
-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";
+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 { 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";
 
-//#region src/delegate.ts
-/**
-* Event delegation — single listener per event type on the mount container.
-*
-* Instead of calling addEventListener on every element, the compiler emits
-* `el.__click = handler` (expando property). A single delegated listener on the
-* container walks event.target up the DOM tree, checking for expandos.
-*
-* Benefits:
-* - Saves ~2000 addEventListener calls for 1000 rows with 2 handlers each
-* - Reduces memory per row (no per-element listener closure)
-* - Faster initial mount (~0.4-0.8ms savings on 1000-row benchmarks)
-*/
-/**
-* Events that are delegated (common bubbling events).
-* Non-bubbling events (focus, blur, mouseenter, mouseleave, load, error, scroll)
-* are NOT delegated — they must use addEventListener.
-*/
-const DELEGATED_EVENTS = new Set([
-	"click",
-	"dblclick",
-	"contextmenu",
-	"focusin",
-	"focusout",
-	"input",
-	"change",
-	"keydown",
-	"keyup",
-	"mousedown",
-	"mouseup",
-	"mousemove",
-	"mouseover",
-	"mouseout",
-	"pointerdown",
-	"pointerup",
-	"pointermove",
-	"pointerover",
-	"pointerout",
-	"touchstart",
-	"touchend",
-	"touchmove",
-	"submit"
-]);
-/**
-* Property name used on DOM elements to store delegated event handlers.
-* Format: `__ev_{eventName}` e.g. `__ev_click`, `__ev_input`
-*/
-function delegatedPropName(eventName) {
-	return `__ev_${eventName}`;
-}
-const _delegated = /* @__PURE__ */ new WeakSet();
-/**
-* Install delegation listeners on a container element.
-* Called once from mount(). Idempotent — safe to call multiple times.
-*/
-function setupDelegation(container) {
-	if (_delegated.has(container)) return;
-	_delegated.add(container);
-	for (const eventName of DELEGATED_EVENTS) {
-		const prop = delegatedPropName(eventName);
-		container.addEventListener(eventName, (e) => {
-			let el = e.target;
-			while (el && el !== container) {
-				const handler = el[prop];
-				if (typeof handler === "function") {
-					Object.defineProperty(e, "currentTarget", {
-						value: el,
-						configurable: true
-					});
-					batch(() => handler(e));
-					if (e.cancelBubble) break;
-				}
-				el = el.parentElement;
-			}
-		});
-	}
-}
-
-//#endregion
 //#region src/hydration-debug.ts
 let _enabled = process.env.NODE_ENV !== "production";
 function enableHydrationWarnings() {
@@ -127,1526 +50,6 @@ 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 = [];
-function registerComponent(id, name, el, parentId) {
-	const entry = {
-		id,
-		name,
-		el,
-		parentId,
-		childIds: []
-	};
-	_components.set(id, entry);
-	if (parentId) {
-		const parent = _components.get(parentId);
-		if (parent) parent.childIds.push(id);
-	}
-	for (const cb of _mountListeners) cb(entry);
-}
-function unregisterComponent(id) {
-	const entry = _components.get(id);
-	if (!entry) return;
-	if (entry.parentId) {
-		const parent = _components.get(entry.parentId);
-		if (parent) parent.childIds = parent.childIds.filter((c) => c !== id);
-	}
-	_components.delete(id);
-	for (const cb of _unmountListeners) cb(id);
-}
-let _overlayActive = false;
-let _overlayEl = null;
-let _tooltipEl = null;
-let _currentHighlight = null;
-function findComponentForElement(el) {
-	let node = el;
-	while (node) {
-		for (const entry of _components.values()) if (entry.el === node) return entry;
-		node = node.parentElement;
-	}
-	return null;
-}
-function createOverlayElements() {
-	if (_overlayEl) return;
-	_overlayEl = document.createElement("div");
-	_overlayEl.id = "__pyreon-overlay";
-	_overlayEl.style.cssText = "position:fixed;pointer-events:none;border:2px solid #00b4d8;border-radius:3px;z-index:999999;display:none;transition:all 0.08s ease-out;";
-	_tooltipEl = document.createElement("div");
-	_tooltipEl.style.cssText = "position:fixed;pointer-events:none;background:#1a1a2e;color:#e0e0e0;font:12px/1.4 ui-monospace,monospace;padding:6px 10px;border-radius:4px;z-index:999999;display:none;box-shadow:0 2px 8px rgba(0,0,0,0.3);max-width:400px;white-space:pre-wrap;";
-	document.body.appendChild(_overlayEl);
-	document.body.appendChild(_tooltipEl);
-}
-function positionOverlay(rect) {
-	if (!_overlayEl) return;
-	_overlayEl.style.display = "block";
-	_overlayEl.style.top = `${rect.top}px`;
-	_overlayEl.style.left = `${rect.left}px`;
-	_overlayEl.style.width = `${rect.width}px`;
-	_overlayEl.style.height = `${rect.height}px`;
-}
-function positionTooltip(entry, rect) {
-	if (!_tooltipEl) return;
-	const childCount = entry.childIds.length;
-	let info = `<${entry.name}>`;
-	if (childCount > 0) info += `\n  ${childCount} child component${childCount === 1 ? "" : "s"}`;
-	_tooltipEl.textContent = info;
-	_tooltipEl.style.display = "block";
-	_tooltipEl.style.top = `${rect.top - 30}px`;
-	_tooltipEl.style.left = `${rect.left}px`;
-	if (rect.top < 35) _tooltipEl.style.top = `${rect.bottom + 4}px`;
-}
-function hideOverlayElements() {
-	if (_overlayEl) _overlayEl.style.display = "none";
-	if (_tooltipEl) _tooltipEl.style.display = "none";
-	_currentHighlight = null;
-}
-/** @internal — exported for testing only */
-function onOverlayMouseMove(e) {
-	const target = document.elementFromPoint(e.clientX, e.clientY);
-	if (!target || target === _overlayEl || target === _tooltipEl) return;
-	const entry = findComponentForElement(target);
-	if (!entry?.el) {
-		hideOverlayElements();
-		return;
-	}
-	if (entry.el === _currentHighlight) return;
-	_currentHighlight = entry.el;
-	const rect = entry.el.getBoundingClientRect();
-	positionOverlay(rect);
-	positionTooltip(entry, rect);
-}
-/** @internal — exported for testing only */
-function onOverlayClick(e) {
-	e.preventDefault();
-	e.stopPropagation();
-	const target = document.elementFromPoint(e.clientX, e.clientY);
-	if (!target) return;
-	const entry = findComponentForElement(target);
-	if (entry) {
-		console.group(`[Pyreon] <${entry.name}>`);
-		console.log("element:", entry.el);
-		console.log("children:", entry.childIds.length);
-		if (entry.parentId) {
-			const parent = _components.get(entry.parentId);
-			if (parent) console.log("parent:", `<${parent.name}>`);
-		}
-		console.groupEnd();
-	}
-	disableOverlay();
-}
-function onOverlayKeydown(e) {
-	if (e.key === "Escape") disableOverlay();
-}
-function enableOverlay() {
-	if (_overlayActive) return;
-	_overlayActive = true;
-	createOverlayElements();
-	document.addEventListener("mousemove", onOverlayMouseMove, true);
-	document.addEventListener("click", onOverlayClick, true);
-	document.addEventListener("keydown", onOverlayKeydown, true);
-	document.body.style.cursor = "crosshair";
-}
-function disableOverlay() {
-	if (!_overlayActive) return;
-	_overlayActive = false;
-	document.removeEventListener("mousemove", onOverlayMouseMove, true);
-	document.removeEventListener("click", onOverlayClick, true);
-	document.removeEventListener("keydown", onOverlayKeydown, true);
-	document.body.style.cursor = "";
-	if (_overlayEl) _overlayEl.style.display = "none";
-	if (_tooltipEl) _tooltipEl.style.display = "none";
-	_currentHighlight = null;
-}
-let _installed = false;
-const _hasWindow = typeof window !== "undefined";
-function installDevTools() {
-	if (!_hasWindow || _installed) return;
-	_installed = true;
-	const devtools = {
-		version: "0.1.0",
-		getComponentTree() {
-			return Array.from(_components.values()).filter((e) => e.parentId === null);
-		},
-		getAllComponents() {
-			return Array.from(_components.values());
-		},
-		highlight(id) {
-			const entry = _components.get(id);
-			if (!entry?.el) return;
-			const el = entry.el;
-			const prev = el.style.outline;
-			el.style.outline = "2px solid #00b4d8";
-			setTimeout(() => {
-				el.style.outline = prev;
-			}, 1500);
-		},
-		onComponentMount(cb) {
-			_mountListeners.push(cb);
-			return () => {
-				const i = _mountListeners.indexOf(cb);
-				if (i >= 0) _mountListeners.splice(i, 1);
-			};
-		},
-		onComponentUnmount(cb) {
-			_unmountListeners.push(cb);
-			return () => {
-				const i = _unmountListeners.indexOf(cb);
-				if (i >= 0) _unmountListeners.splice(i, 1);
-			};
-		},
-		enableOverlay,
-		disableOverlay,
-		reactive: {
-			activate: activateReactiveDevtools,
-			deactivate: deactivateReactiveDevtools,
-			getGraph: getReactiveGraph,
-			getFires: getReactiveFires
-		}
-	};
-	window.__PYREON_DEVTOOLS__ = devtools;
-	window.addEventListener("keydown", (e) => {
-		if (e.ctrlKey && e.shiftKey && e.key === "P") {
-			e.preventDefault();
-			if (_overlayActive) disableOverlay();
-			else enableOverlay();
-		}
-	});
-	const win = window;
-	win.$p = {
-		/** List all mounted components */
-		components: () => devtools.getAllComponents(),
-		/** Component tree (roots only) */
-		tree: () => devtools.getComponentTree(),
-		/** Highlight a component by id */
-		highlight: (id) => devtools.highlight(id),
-		/** Toggle component inspector overlay */
-		inspect: () => {
-			if (_overlayActive) disableOverlay();
-			else enableOverlay();
-		},
-		/** Print component count */
-		stats: () => {
-			const all = devtools.getAllComponents();
-			const roots = devtools.getComponentTree();
-			console.log(`[Pyreon] ${all.length} component${all.length === 1 ? "" : "s"}, ${roots.length} root${roots.length === 1 ? "" : "s"}`);
-			return {
-				total: all.length,
-				roots: roots.length
-			};
-		},
-		/** Quick help */
-		help: () => {
-			console.log("[Pyreon] $p commands:\n  $p.components() — list all mounted components\n  $p.tree()       — component tree (roots only)\n  $p.highlight(id)— outline a component\n  $p.inspect()    — toggle component inspector\n  $p.stats()      — print component count\n  $p.help()       — this message");
-		}
-	};
-}
-
-//#endregion
-//#region src/nodes.ts
-const __DEV__$5 = process.env.NODE_ENV !== "production";
-const _countSink$4 = globalThis;
-/**
-* Move all nodes strictly between `start` and `end` into a throwaway
-* DocumentFragment, detaching them from the live DOM in O(n) top-level moves.
-*
-* This is dramatically faster than Range.deleteContents() in JS-based DOMs
-* (happy-dom, jsdom) where deleting connected nodes with deep subtrees is O(n²).
-* In real browsers both approaches are similar, but the fragment approach is
-* never slower and avoids the pathological case.
-*
-* After this call every moved node has isConnected=false, so cleanup functions
-* that guard removeChild with `isConnected !== false` become no-ops.
-*/
-function clearBetween(start, end) {
-	const frag = document.createDocumentFragment();
-	let cur = start.nextSibling;
-	while (cur && cur !== end) {
-		const next = cur.nextSibling;
-		frag.appendChild(cur);
-		cur = next;
-	}
-}
-/** Emit `runtime.cleanup` once per registered mount cleanup that actually runs. */
-function _emitCleanup() {
-	if (__DEV__$5) _countSink$4.__pyreon_count__?.("runtime.cleanup");
-}
-/**
-* Mount a reactive node whose content changes over time.
-*
-* A comment node is used as a stable anchor point in the DOM.
-* On each change: old nodes are removed, new ones inserted before the anchor.
-*/
-function mountReactive(accessor, parent, anchor, mount) {
-	if (__DEV__$5) _countSink$4.__pyreon_count__?.("runtime.mountReactive");
-	const marker = document.createComment("pyreon");
-	parent.insertBefore(marker, anchor);
-	const contextSnapshot = captureContextStack();
-	let currentCleanup = () => {};
-	let hasCleanup = false;
-	let generation = 0;
-	const e = effect(() => {
-		const myGen = ++generation;
-		if (hasCleanup) _emitCleanup();
-		runUntracked(() => currentCleanup());
-		currentCleanup = () => {};
-		hasCleanup = false;
-		const value = accessor();
-		if (value != null && value !== false) {
-			const cleanup = runUntracked(() => restoreContextStack(contextSnapshot, () => mount(value, parent, marker)));
-			if (myGen === generation) {
-				currentCleanup = cleanup;
-				hasCleanup = true;
-			} else {
-				_emitCleanup();
-				cleanup();
-			}
-		}
-	});
-	return () => {
-		e.dispose();
-		if (hasCleanup) _emitCleanup();
-		currentCleanup();
-		marker.parentNode?.removeChild(marker);
-	};
-}
-const _keyedAnchors = /* @__PURE__ */ new WeakSet();
-function growLisArrays(lis, n) {
-	if (n <= lis.pred.length) return lis;
-	return {
-		tails: new Int32Array(n + 16),
-		tailIdx: new Int32Array(n + 16),
-		pred: new Int32Array(n + 16),
-		stay: new Uint8Array(n + 16)
-	};
-}
-function computeKeyedLis(lis, n, newKeyOrder, curPos) {
-	const { tails, tailIdx, pred } = lis;
-	let lisLen = 0;
-	let ops = 0;
-	for (let i = 0; i < n; i++) {
-		const key = newKeyOrder[i];
-		if (key === void 0) continue;
-		const v = curPos.get(key) ?? -1;
-		if (v < 0) continue;
-		let lo = 0;
-		let hi = lisLen;
-		while (lo < hi) {
-			const mid = lo + hi >> 1;
-			ops++;
-			if (tails[mid] < v) lo = mid + 1;
-			else hi = mid;
-		}
-		tails[lo] = v;
-		tailIdx[lo] = i;
-		if (lo > 0) pred[i] = tailIdx[lo - 1];
-		if (lo === lisLen) lisLen++;
-	}
-	if (__DEV__$5 && ops > 0) _countSink$4.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
-	return lisLen;
-}
-function markStayingEntries(lis, lisLen) {
-	const { tailIdx, pred, stay } = lis;
-	let cur = lisLen > 0 ? tailIdx[lisLen - 1] : -1;
-	while (cur !== -1) {
-		stay[cur] = 1;
-		cur = pred[cur];
-	}
-}
-function applyKeyedMoves(n, newKeyOrder, stay, cache, parent, tailMarker) {
-	let cursor = tailMarker;
-	for (let i = n - 1; i >= 0; i--) {
-		const key = newKeyOrder[i];
-		if (key === void 0) continue;
-		const entry = cache.get(key);
-		if (!entry) continue;
-		if (!stay[i]) moveEntryBefore(parent, entry.anchor, cursor);
-		cursor = entry.anchor;
-	}
-}
-/** Grow LIS typed arrays if needed, then compute and apply reorder. */
-function keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker) {
-	const grown = growLisArrays(lis, n);
-	grown.pred.fill(-1, 0, n);
-	grown.stay.fill(0, 0, n);
-	markStayingEntries(grown, computeKeyedLis(grown, n, newKeyOrder, curPos));
-	applyKeyedMoves(n, newKeyOrder, grown.stay, cache, parent, tailMarker);
-	return grown;
-}
-function mountKeyedList(accessor, parent, listAnchor, mountVNode) {
-	const startMarker = document.createComment("");
-	const tailMarker = document.createComment("");
-	parent.insertBefore(startMarker, listAnchor);
-	parent.insertBefore(tailMarker, listAnchor);
-	const cache = /* @__PURE__ */ new Map();
-	const curPos = /* @__PURE__ */ new Map();
-	let currentKeyOrder = [];
-	let lis = {
-		tails: new Int32Array(16),
-		tailIdx: new Int32Array(16),
-		pred: new Int32Array(16),
-		stay: new Uint8Array(16)
-	};
-	const collectKeyOrder = (newList) => {
-		const newKeyOrder = [];
-		const newKeySet = /* @__PURE__ */ new Set();
-		for (const vnode of newList) {
-			const key = vnode.key;
-			if (key !== null && key !== void 0) {
-				newKeyOrder.push(key);
-				newKeySet.add(key);
-			}
-		}
-		return {
-			newKeyOrder,
-			newKeySet
-		};
-	};
-	const removeStaleEntries = (newKeySet) => {
-		for (const [key, entry] of cache) {
-			if (newKeySet.has(key)) continue;
-			_emitCleanup();
-			entry.cleanup();
-			entry.anchor.parentNode?.removeChild(entry.anchor);
-			cache.delete(key);
-			curPos.delete(key);
-		}
-	};
-	const mountNewEntries = (newList) => {
-		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);
-			cache.set(key, {
-				anchor,
-				cleanup
-			});
-		}
-	};
-	const e = effect(() => {
-		const newList = accessor();
-		const n = newList.length;
-		runUntracked(() => {
-			if (n === 0 && cache.size > 0) {
-				for (const entry of cache.values()) {
-					_emitCleanup();
-					entry.cleanup();
-				}
-				cache.clear();
-				curPos.clear();
-				currentKeyOrder = [];
-				clearBetween(startMarker, tailMarker);
-				return;
-			}
-			const { newKeyOrder, newKeySet } = collectKeyOrder(newList);
-			removeStaleEntries(newKeySet);
-			mountNewEntries(newList);
-			if (currentKeyOrder.length > 0 && n > 0) lis = keyedListReorder(lis, n, newKeyOrder, curPos, cache, parent, tailMarker);
-			curPos.clear();
-			for (let i = 0; i < newKeyOrder.length; i++) {
-				const k = newKeyOrder[i];
-				if (k !== void 0) curPos.set(k, i);
-			}
-			currentKeyOrder = newKeyOrder;
-		});
-	});
-	return () => {
-		e.dispose();
-		for (const entry of cache.values()) {
-			_emitCleanup();
-			entry.cleanup();
-			entry.anchor.parentNode?.removeChild(entry.anchor);
-		}
-		cache.clear();
-		startMarker.parentNode?.removeChild(startMarker);
-		tailMarker.parentNode?.removeChild(tailMarker);
-	};
-}
-/** Maximum number of displaced positions before falling back to full LIS. */
-const SMALL_K = 8;
-const _forAnchors = /* @__PURE__ */ new WeakSet();
-/** Try small-k reorder; returns true if handled, false if LIS fallback needed. */
-function trySmallKReorder(n, newKeys, currentKeys, cache, liveParent, tailMarker) {
-	if (n !== currentKeys.length) return false;
-	const diffs = [];
-	for (let i = 0; i < n; i++) if (newKeys[i] !== currentKeys[i]) {
-		diffs.push(i);
-		if (diffs.length > SMALL_K) return false;
-	}
-	if (diffs.length > 0) smallKPlace(liveParent, diffs, newKeys, cache, tailMarker);
-	for (const i of diffs) {
-		const cached = cache.get(newKeys[i]);
-		if (cached) cached.pos = i;
-	}
-	return true;
-}
-function computeForLis(lis, n, newKeys, cache) {
-	const { tails, tailIdx, pred } = lis;
-	let lisLen = 0;
-	let ops = 0;
-	let lastV = -1;
-	for (let i = 0; i < n; i++) {
-		const key = newKeys[i];
-		const v = cache.get(key)?.pos ?? 0;
-		if (v > lastV) {
-			tails[lisLen] = v;
-			tailIdx[lisLen] = i;
-			if (lisLen > 0) pred[i] = tailIdx[lisLen - 1];
-			lisLen++;
-			lastV = v;
-			continue;
-		}
-		let lo;
-		if (v < lisLen && tails[v] === v) lo = v;
-		else {
-			lo = 0;
-			let hi = lisLen;
-			while (lo < hi) {
-				const mid = lo + hi >> 1;
-				ops++;
-				if (tails[mid] < v) lo = mid + 1;
-				else hi = mid;
-			}
-		}
-		tails[lo] = v;
-		tailIdx[lo] = i;
-		if (lo > 0) pred[i] = tailIdx[lo - 1];
-	}
-	if (__DEV__$5 && ops > 0) _countSink$4.__pyreon_count__?.("runtime.mountFor.lisOps", ops);
-	return lisLen;
-}
-function applyForMoves(n, newKeys, stay, cache, liveParent, tailMarker) {
-	let cursor = tailMarker;
-	for (let i = n - 1; i >= 0; i--) {
-		const entry = cache.get(newKeys[i]);
-		if (!entry) continue;
-		if (!stay[i]) moveEntryBefore(liveParent, entry.anchor, cursor);
-		cursor = entry.anchor;
-	}
-}
-/** LIS-based reorder for mountFor. */
-function forLisReorder(lis, n, newKeys, cache, liveParent, tailMarker) {
-	const grown = growLisArrays(lis, n);
-	grown.pred.fill(-1, 0, n);
-	grown.stay.fill(0, 0, n);
-	markStayingEntries(grown, computeForLis(grown, n, newKeys, cache));
-	applyForMoves(n, newKeys, grown.stay, cache, liveParent, tailMarker);
-	for (let i = 0; i < n; i++) {
-		const cached = cache.get(newKeys[i]);
-		if (cached) cached.pos = i;
-	}
-	return grown;
-}
-/**
-* Keyed reconciler that works directly on the source item array.
-*
-* Optimizations:
-*  - Calls renderItem() only for NEW keys — 0 VNode allocations for reorders
-*  - Small-k fast path: if <= SMALL_K positions changed, skips LIS
-*  - Fast clear path: moves nodes to DocumentFragment for O(n) bulk detach
-*  - Fresh render fast path: skips stale-check and reorder on first render
-*/
-function mountFor(source, getKey, renderItem, parent, anchor, mountChild) {
-	const startMarker = document.createComment("");
-	const tailMarker = document.createComment("");
-	parent.insertBefore(startMarker, anchor);
-	parent.insertBefore(tailMarker, anchor);
-	let cache = /* @__PURE__ */ new Map();
-	let currentKeys = [];
-	const _reusableKeySet = /* @__PURE__ */ new Set();
-	let cleanupCount = 0;
-	let anchorsRegistered = false;
-	let lis = {
-		tails: new Int32Array(16),
-		tailIdx: new Int32Array(16),
-		pred: new Int32Array(16),
-		stay: new Uint8Array(16)
-	};
-	const warnForKey = (seen, key) => {
-		if (!seen) return;
-		if (__DEV__$5 && key == null) console.warn("[Pyreon] <For> `by` function returned null/undefined. Keys must be strings or numbers. Check your `by` prop.");
-		if (seen.has(key)) {
-			if (__DEV__$5) console.warn(`[Pyreon] Duplicate key "${String(key)}" in <For> list. Keys must be unique.`);
-			return true;
-		}
-		seen.add(key);
-		return false;
-	};
-	/** Render item into container, update cache+cleanupCount. No anchor registration. */
-	const renderInto = (item, key, pos, container, before) => {
-		const result = renderItem(item);
-		if (result.__isNative) {
-			const native = result;
-			container.insertBefore(native.el, before);
-			cache.set(key, {
-				anchor: native.el,
-				cleanup: native.cleanup,
-				pos
-			});
-			if (native.cleanup) cleanupCount++;
-			return;
-		}
-		const priorLast = before ? before.previousSibling : container.lastChild;
-		const cl = mountChild(result, container, before);
-		const firstMounted = priorLast ? priorLast.nextSibling : container.firstChild;
-		if (!firstMounted || firstMounted === before) {
-			const ph = document.createComment("");
-			container.insertBefore(ph, before);
-			cache.set(key, {
-				anchor: ph,
-				cleanup: cl,
-				pos
-			});
-		} else cache.set(key, {
-			anchor: firstMounted,
-			cleanup: cl,
-			pos
-		});
-		cleanupCount++;
-	};
-	const handleFreshRender = (items, n, liveParent) => {
-		const frag = document.createDocumentFragment();
-		const keys = new Array(n);
-		const _seenKeys = /* @__PURE__ */ new Set();
-		for (let i = 0; i < n; i++) {
-			const item = items[i];
-			const key = getKey(item);
-			if (warnForKey(_seenKeys, key)) continue;
-			keys[i] = key;
-			renderInto(item, key, i, frag, null);
-		}
-		liveParent.insertBefore(frag, tailMarker);
-		anchorsRegistered = false;
-		currentKeys = keys;
-	};
-	const collectNewKeys = (items, n) => {
-		const newKeys = new Array(n);
-		const _seenUpdate = /* @__PURE__ */ new Set();
-		for (let i = 0; i < n; i++) {
-			newKeys[i] = getKey(items[i]);
-			warnForKey(_seenUpdate, newKeys[i]);
-		}
-		return newKeys;
-	};
-	const handleReplaceAll = (items, n, newKeys, liveParent) => {
-		if (cleanupCount > 0) {
-			for (const entry of cache.values()) if (entry.cleanup) {
-				_emitCleanup();
-				entry.cleanup();
-			}
-		}
-		cache = /* @__PURE__ */ new Map();
-		cleanupCount = 0;
-		const parentParent = liveParent.parentNode;
-		const canSwap = parentParent && liveParent.firstChild === startMarker && liveParent.lastChild === tailMarker;
-		const frag = document.createDocumentFragment();
-		for (let i = 0; i < n; i++) renderInto(items[i], newKeys[i], i, frag, null);
-		anchorsRegistered = false;
-		if (canSwap) {
-			const fresh = liveParent.cloneNode(false);
-			fresh.appendChild(startMarker);
-			fresh.appendChild(frag);
-			fresh.appendChild(tailMarker);
-			parentParent.replaceChild(fresh, liveParent);
-		} else {
-			clearBetween(startMarker, tailMarker);
-			liveParent.insertBefore(frag, tailMarker);
-		}
-		currentKeys = newKeys;
-	};
-	const removeStaleForEntries = (newKeySet) => {
-		for (const [key, entry] of cache) {
-			if (newKeySet.has(key)) continue;
-			if (entry.cleanup) {
-				_emitCleanup();
-				entry.cleanup();
-				cleanupCount--;
-			}
-			entry.anchor.parentNode?.removeChild(entry.anchor);
-			cache.delete(key);
-		}
-	};
-	const mountNewForEntries = (items, n, newKeys, liveParent) => {
-		for (let i = 0; i < n; i++) {
-			const key = newKeys[i];
-			if (cache.has(key)) continue;
-			renderInto(items[i], key, i, liveParent, tailMarker);
-			const entry = cache.get(key);
-			if (entry) _forAnchors.add(entry.anchor);
-		}
-	};
-	const handleFastClear = (liveParent) => {
-		if (cache.size === 0) return;
-		if (cleanupCount > 0) {
-			for (const entry of cache.values()) if (entry.cleanup) {
-				_emitCleanup();
-				entry.cleanup();
-			}
-		}
-		const pp = liveParent.parentNode;
-		if (pp && liveParent.firstChild === startMarker && liveParent.lastChild === tailMarker) {
-			const fresh = liveParent.cloneNode(false);
-			fresh.appendChild(startMarker);
-			fresh.appendChild(tailMarker);
-			pp.replaceChild(fresh, liveParent);
-		} else clearBetween(startMarker, tailMarker);
-		cache = /* @__PURE__ */ new Map();
-		cleanupCount = 0;
-		currentKeys = [];
-	};
-	const hasAnyKeptKey = (n, newKeys) => {
-		for (let i = 0; i < n; i++) if (cache.has(newKeys[i])) return true;
-		return false;
-	};
-	const handleIncrementalUpdate = (items, n, newKeys, liveParent) => {
-		_reusableKeySet.clear();
-		for (let i = 0; i < newKeys.length; i++) _reusableKeySet.add(newKeys[i]);
-		removeStaleForEntries(_reusableKeySet);
-		mountNewForEntries(items, n, newKeys, liveParent);
-		if (!anchorsRegistered) {
-			for (const entry of cache.values()) _forAnchors.add(entry.anchor);
-			anchorsRegistered = true;
-		}
-		if (trySmallKReorder(n, newKeys, currentKeys, cache, liveParent, tailMarker)) {
-			currentKeys = newKeys;
-			return;
-		}
-		lis = forLisReorder(lis, n, newKeys, cache, liveParent, tailMarker);
-		currentKeys = newKeys;
-	};
-	const e = effect(() => {
-		const liveParent = startMarker.parentNode;
-		if (!liveParent) return;
-		const items = source();
-		const n = items.length;
-		runUntracked(() => {
-			if (n === 0) {
-				handleFastClear(liveParent);
-				return;
-			}
-			if (currentKeys.length === 0) {
-				handleFreshRender(items, n, liveParent);
-				return;
-			}
-			const newKeys = collectNewKeys(items, n);
-			if (!hasAnyKeptKey(n, newKeys)) {
-				handleReplaceAll(items, n, newKeys, liveParent);
-				return;
-			}
-			handleIncrementalUpdate(items, n, newKeys, liveParent);
-		});
-	});
-	return () => {
-		e.dispose();
-		for (const entry of cache.values()) {
-			if (cleanupCount > 0 && entry.cleanup) {
-				_emitCleanup();
-				entry.cleanup();
-			}
-			entry.anchor.parentNode?.removeChild(entry.anchor);
-		}
-		cache = /* @__PURE__ */ new Map();
-		cleanupCount = 0;
-		startMarker.parentNode?.removeChild(startMarker);
-		tailMarker.parentNode?.removeChild(tailMarker);
-	};
-}
-/**
-* Small-k reorder: directly place the k displaced entries without LIS.
-*/
-function smallKPlace(parent, diffs, newKeys, cache, tailMarker) {
-	const diffSet = new Set(diffs);
-	let cursor = tailMarker;
-	let prevDiffIdx = newKeys.length;
-	for (let d = diffs.length - 1; d >= 0; d--) {
-		const i = diffs[d];
-		let nextNonDiff = -1;
-		for (let j = i + 1; j < prevDiffIdx; j++) if (!diffSet.has(j)) {
-			nextNonDiff = j;
-			break;
-		}
-		if (nextNonDiff >= 0) {
-			const nc = cache.get(newKeys[nextNonDiff])?.anchor;
-			if (nc) cursor = nc;
-		}
-		const entry = cache.get(newKeys[i]);
-		if (!entry) {
-			prevDiffIdx = i;
-			continue;
-		}
-		moveEntryBefore(parent, entry.anchor, cursor);
-		cursor = entry.anchor;
-		prevDiffIdx = i;
-	}
-}
-/**
-* Move startNode and all siblings belonging to this entry to just before `before`.
-* Stops at the next entry anchor (identified via WeakSet) or the tail marker.
-*
-* Fast path: if the next sibling is already a boundary (another entry or tail),
-* this entry is a single node — skip the toMove array entirely.
-*/
-function moveEntryBefore(parent, startNode, before) {
-	const next = startNode.nextSibling;
-	if (!next || next === before || next.parentNode === parent && (_forAnchors.has(next) || _keyedAnchors.has(next))) {
-		parent.insertBefore(startNode, before);
-		return;
-	}
-	const toMove = [startNode];
-	let cur = next;
-	while (cur && cur !== before) {
-		const nextNode = cur.nextSibling;
-		toMove.push(cur);
-		cur = nextNode;
-		if (cur && cur.parentNode === parent && (cur === before || _forAnchors.has(cur) || _keyedAnchors.has(cur))) break;
-	}
-	for (const node of toMove) parent.insertBefore(node, before);
-}
-
-//#endregion
-//#region src/props.ts
-const __DEV__$4 = process.env.NODE_ENV !== "production";
-const _countSink$3 = globalThis;
-let _customSanitizer = null;
-/**
-* Set a custom HTML sanitizer used by `innerHTML` and `sanitizeHtml()`.
-* Overrides both the Sanitizer API and the built-in fallback.
-*
-* @example
-* // With DOMPurify:
-* import DOMPurify from "dompurify"
-* setSanitizer((html) => DOMPurify.sanitize(html))
-*
-* // With sanitize-html:
-* import sanitize from "sanitize-html"
-* setSanitizer((html) => sanitize(html))
-*
-* // Reset to built-in:
-* setSanitizer(null)
-*/
-function setSanitizer(fn) {
-	_customSanitizer = fn;
-}
-const SAFE_TAGS = new Set([
-	"a",
-	"abbr",
-	"address",
-	"article",
-	"aside",
-	"b",
-	"bdi",
-	"bdo",
-	"blockquote",
-	"br",
-	"caption",
-	"cite",
-	"code",
-	"col",
-	"colgroup",
-	"dd",
-	"del",
-	"details",
-	"dfn",
-	"div",
-	"dl",
-	"dt",
-	"em",
-	"figcaption",
-	"figure",
-	"footer",
-	"h1",
-	"h2",
-	"h3",
-	"h4",
-	"h5",
-	"h6",
-	"header",
-	"hr",
-	"i",
-	"ins",
-	"kbd",
-	"li",
-	"main",
-	"mark",
-	"nav",
-	"ol",
-	"p",
-	"pre",
-	"q",
-	"rp",
-	"rt",
-	"ruby",
-	"s",
-	"samp",
-	"section",
-	"small",
-	"span",
-	"strong",
-	"sub",
-	"summary",
-	"sup",
-	"table",
-	"tbody",
-	"td",
-	"tfoot",
-	"th",
-	"thead",
-	"time",
-	"tr",
-	"u",
-	"ul",
-	"var",
-	"wbr"
-]);
-const UNSAFE_ATTR_RE = /^on/i;
-/**
-* Fallback tag-stripping sanitizer for environments without the Sanitizer API.
-* Removes all tags not in SAFE_TAGS, strips event handler attributes,
-* and blocks javascript:/data: URLs in href/src/action attributes.
-*/
-function fallbackSanitize(html) {
-	const doc = new DOMParser().parseFromString(html, "text/html");
-	sanitizeNode(doc.body);
-	return doc.body.innerHTML;
-}
-/** Strip unsafe attributes from a single element. */
-function stripUnsafeAttrs(el) {
-	const attrs = Array.from(el.attributes);
-	for (const attr of attrs) if (UNSAFE_ATTR_RE.test(attr.name)) el.removeAttribute(attr.name);
-	else if (URL_ATTRS.has(attr.name) && UNSAFE_URL_RE.test(attr.value)) el.removeAttribute(attr.name);
-}
-function sanitizeNode(node) {
-	const children = Array.from(node.childNodes);
-	for (const child of children) {
-		if (child.nodeType !== 1) continue;
-		const el = child;
-		const tag = el.tagName.toLowerCase();
-		if (!SAFE_TAGS.has(tag)) {
-			const text = document.createTextNode(el.textContent);
-			node.replaceChild(text, el);
-			continue;
-		}
-		stripUnsafeAttrs(el);
-		sanitizeNode(el);
-	}
-}
-/**
-* Sanitize an HTML string using the browser Sanitizer API (Chrome 105+).
-* Falls back to a tag-allowlist sanitizer that strips unsafe elements and attributes.
-*/
-function sanitizeHtml(html) {
-	if (_customSanitizer) return _customSanitizer(html);
-	return fallbackSanitize(html);
-}
-const EVENT_RE = /^on[A-Z]/;
-/**
-* Apply all props to a DOM element.
-* Returns a single chained cleanup (or null if no props need teardown).
-* Uses for-in instead of Object.keys() to avoid allocating a keys array.
-*/
-function applyProps(el, props) {
-	let first = null;
-	let cleanups = null;
-	for (const key in props) {
-		if (key === "key" || key === "ref" || key === "children") continue;
-		const descriptor = Object.getOwnPropertyDescriptor(props, key);
-		let c;
-		if (descriptor?.get) c = renderEffect(() => applyStaticProp(el, key, props[key]));
-		else c = applyProp(el, key, props[key]);
-		if (c) if (!first) first = c;
-		else if (!cleanups) cleanups = [first, c];
-		else cleanups.push(c);
-	}
-	if (cleanups) return () => {
-		for (const c of cleanups) c();
-	};
-	return first;
-}
-/**
-* Apply a single prop.
-*
-* - `onXxx` → addEventListener
-* - `() => value` (non-event function) → reactive via effect
-* - anything else → static attribute / DOM property
-*/
-/**
-* Bind an event handler (onClick → "click") with batching + delegation support.
-*/
-function applyEventProp(el, key, value) {
-	if (__DEV__$4) _countSink$3.__pyreon_count__?.("runtime.applyEvent");
-	if (typeof value !== "function") {
-		if (__DEV__$4 && value != null) console.warn(`[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). Expected a function. Did you mean ${key}={() => ...}?`);
-		return null;
-	}
-	const eventName = (key[2]?.toLowerCase() + key.slice(3)).toLowerCase();
-	const handler = value;
-	if (DELEGATED_EVENTS.has(eventName)) {
-		const prop = delegatedPropName(eventName);
-		el[prop] = (e) => batch(() => handler(e));
-		return () => {
-			el[prop] = void 0;
-		};
-	}
-	const batched = (e) => batch(() => handler(e));
-	el.addEventListener(eventName, batched);
-	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.
-*
-* NOTE on architecture: extracting the special-cased sinks
-* (`innerHTML` / `dangerouslySetInnerHTML`) into this single dispatch
-* function ensures every prop kind goes through the same reactive
-* wrapping at `applyProp`'s entry. Previously each special case had its
-* own early-return branch that needed to remember to handle function
-* values; missing the dance once meant the closure was stringified and
-* set as literal text. The structural fix (one reactive-wrap, then
-* dispatch) eliminates the entire bug class.
-*/
-function applyStaticProp(el, key, value) {
-	if (__DEV__$4 && typeof value === "function") console.warn(`[Pyreon] applyStaticProp received a function for "${key}". This likely means a new special-cased prop sink in applyProp() bypassed the reactive-wrap path. The closure would be stringified and set as a literal value. Verify the dispatch in applyProp().`);
-	if (key === "innerHTML") {
-		const html = String(value ?? "");
-		if (typeof el.setHTML === "function") el.setHTML(html);
-		else el.innerHTML = sanitizeHtml(html);
-		return;
-	}
-	if (key === "dangerouslySetInnerHTML") {
-		el.innerHTML = value?.__html ?? "";
-		return;
-	}
-	setStaticProp(el, key, value);
-}
-function applyProp(el, key, value) {
-	if (__DEV__$4) _countSink$3.__pyreon_count__?.("runtime.applyProp");
-	if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
-	if (typeof value === "function") return renderEffect(() => applyStaticProp(el, key, value()));
-	applyStaticProp(el, key, value);
-	return null;
-}
-const URL_ATTRS = new Set([
-	"href",
-	"src",
-	"action",
-	"formaction",
-	"poster",
-	"cite",
-	"data"
-]);
-const UNSAFE_URL_RE = /^\s*(?:javascript|data):/i;
-const _prevStyleKeys = /* @__PURE__ */ new WeakMap();
-/** Apply a style prop (string or object). */
-function applyStyleProp(el, value) {
-	if (typeof value === "string") {
-		el.style.cssText = value;
-		_prevStyleKeys.delete(el);
-		return;
-	}
-	const prev = _prevStyleKeys.get(el);
-	if (value == null) {
-		if (prev) {
-			for (const propName of prev) el.style.removeProperty(propName);
-			_prevStyleKeys.delete(el);
-		}
-		return;
-	}
-	if (typeof value === "object") {
-		const obj = value;
-		const next = /* @__PURE__ */ new Set();
-		for (const k in obj) {
-			const propName = k.startsWith("--") ? k : toKebabCase(k);
-			next.add(propName);
-			const css = normalizeStyleValue(k, obj[k]);
-			el.style.setProperty(propName, css);
-		}
-		if (prev) {
-			for (const propName of prev) if (!next.has(propName)) el.style.removeProperty(propName);
-		}
-		if (next.size === 0) _prevStyleKeys.delete(el);
-		else _prevStyleKeys.set(el, next);
-	}
-}
-function applyClassProp(el, value) {
-	const resolved = typeof value === "string" ? value : cx(value);
-	el.setAttribute("class", resolved || "");
-}
-function setStaticProp(el, key, value) {
-	if (URL_ATTRS.has(key) && typeof value === "string" && UNSAFE_URL_RE.test(value)) {
-		if (__DEV__$4) console.warn(`[Pyreon] Blocked unsafe URL in "${key}" attribute: ${value}`);
-		return;
-	}
-	if (key === "class" || key === "className") {
-		applyClassProp(el, value);
-		return;
-	}
-	if (key === "style") {
-		applyStyleProp(el, value);
-		return;
-	}
-	if (value == null) {
-		el.removeAttribute(key);
-		return;
-	}
-	if (typeof value === "boolean") {
-		if (value) el.setAttribute(key, "");
-		else el.removeAttribute(key);
-		return;
-	}
-	if (el.namespaceURI && el.namespaceURI !== "http://www.w3.org/1999/xhtml") {
-		el.setAttribute(key, String(value));
-		return;
-	}
-	if (key in el) {
-		el[key] = value;
-		return;
-	}
-	if (el.tagName.includes("-")) {
-		el[key] = value;
-		return;
-	}
-	el.setAttribute(key, String(value));
-}
-
-//#endregion
-//#region src/mount.ts
-const __DEV__$3 = process.env.NODE_ENV !== "production";
-const _countSink$2 = globalThis;
-const noop$1 = () => {};
-let _elementDepth = 0;
-let _mountingStack;
-if (__DEV__$3) _mountingStack = [];
-/**
-* Mount a single child into `parent`, inserting before `anchor` (null = append).
-* Returns a cleanup that removes the node(s) and disposes all reactive effects.
-*
-* This function is the hot path — all child types are handled inline to avoid
-* function call overhead in tight render loops (1000+ calls per list render).
-*/
-function mountChild(child, parent, anchor = null) {
-	if (__DEV__$3) _countSink$2.__pyreon_count__?.("runtime.mountChild");
-	if (typeof child === "function") {
-		const sample = runUntracked(() => child());
-		if (isKeyedArray(sample)) {
-			const prevDepth = _elementDepth;
-			_elementDepth = 0;
-			const cleanup = mountKeyedList(child, parent, anchor, (v, p, a) => mountChild(v, p, a));
-			_elementDepth = prevDepth;
-			return cleanup;
-		}
-		if (typeof sample === "string" || typeof sample === "number" || typeof sample === "boolean") {
-			const text = document.createTextNode(sample === false ? "" : String(sample));
-			parent.insertBefore(text, anchor);
-			const dispose = renderEffect(() => {
-				const v = child();
-				const next = v == null || v === false ? "" : String(v);
-				if (next !== text.data) text.data = next;
-			});
-			if (_elementDepth > 0) return dispose;
-			return () => {
-				dispose();
-				const p = text.parentNode;
-				if (p && p.isConnected !== false) p.removeChild(text);
-			};
-		}
-		const prevDepth = _elementDepth;
-		_elementDepth = 0;
-		const cleanup = mountReactive(child, parent, anchor, mountChild);
-		_elementDepth = prevDepth;
-		return cleanup;
-	}
-	if (Array.isArray(child)) return mountChildren(child, parent, anchor);
-	if (child == null || child === false) return noop$1;
-	if (typeof child !== "object") {
-		parent.insertBefore(document.createTextNode(String(child)), anchor);
-		return noop$1;
-	}
-	if (child.__isNative) {
-		const native = child;
-		parent.insertBefore(native.el, anchor);
-		if (!native.cleanup) {
-			if (_elementDepth > 0) return noop$1;
-			return () => {
-				const p = native.el.parentNode;
-				if (p && p.isConnected !== false) p.removeChild(native.el);
-			};
-		}
-		if (_elementDepth > 0) return native.cleanup;
-		return () => {
-			native.cleanup?.();
-			const p = native.el.parentNode;
-			if (p && p.isConnected !== false) p.removeChild(native.el);
-		};
-	}
-	const vnode = child;
-	if (vnode.type === Fragment) return mountChildren(vnode.children ?? [], parent, anchor);
-	if (vnode.type === ForSymbol) {
-		const props = vnode.props;
-		const initialEach = props.each;
-		const source = typeof initialEach === "function" ? initialEach : (() => props.each);
-		const prevDepth = _elementDepth;
-		_elementDepth = 0;
-		const cleanup = mountFor(source, props.by, props.children, parent, anchor, mountChild);
-		_elementDepth = prevDepth;
-		return cleanup;
-	}
-	if (vnode.type === PortalSymbol) {
-		const { target, children } = vnode.props;
-		if (__DEV__$3 && !target) {
-			console.warn("[Pyreon] <Portal> received a falsy `target`. Provide a valid DOM element.");
-			return noop$1;
-		}
-		if (__DEV__$3 && !(target instanceof Node)) console.warn(`[Pyreon] <Portal> target must be a DOM node. Received ${typeof target}. Use document.getElementById() or a ref to get the target element.`);
-		return mountChild(children, target, null);
-	}
-	if (typeof vnode.type === "function") return mountComponent(vnode, parent, anchor);
-	if (__DEV__$3 && typeof vnode.type !== "string") {
-		console.warn(`[Pyreon] Invalid VNode type: expected a string tag or component function, received ${typeof vnode.type} (${String(vnode.type)}). This usually means you passed an object or class instead of a component function.`);
-		return noop$1;
-	}
-	return mountElement(vnode, parent, anchor);
-}
-const VOID_ELEMENTS = new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-]);
-const SVG_NS = "http://www.w3.org/2000/svg";
-const MATHML_NS = "http://www.w3.org/1998/Math/MathML";
-const SVG_TAGS = new Set([
-	"svg",
-	"circle",
-	"ellipse",
-	"line",
-	"path",
-	"polygon",
-	"polyline",
-	"rect",
-	"g",
-	"defs",
-	"symbol",
-	"use",
-	"text",
-	"tspan",
-	"textPath",
-	"image",
-	"clipPath",
-	"mask",
-	"pattern",
-	"marker",
-	"linearGradient",
-	"radialGradient",
-	"stop",
-	"filter",
-	"feBlend",
-	"feColorMatrix",
-	"feComponentTransfer",
-	"feComposite",
-	"feConvolveMatrix",
-	"feDiffuseLighting",
-	"feDisplacementMap",
-	"feFlood",
-	"feGaussianBlur",
-	"feImage",
-	"feMerge",
-	"feMergeNode",
-	"feMorphology",
-	"feOffset",
-	"feSpecularLighting",
-	"feTile",
-	"feTurbulence",
-	"animate",
-	"animateMotion",
-	"animateTransform",
-	"set",
-	"desc",
-	"title",
-	"metadata",
-	"foreignObject"
-]);
-const MATHML_TAGS = new Set([
-	"math",
-	"mi",
-	"mo",
-	"mn",
-	"ms",
-	"mtext",
-	"mspace",
-	"mrow",
-	"mfrac",
-	"msqrt",
-	"mroot",
-	"msub",
-	"msup",
-	"msubsup",
-	"munder",
-	"mover",
-	"munderover",
-	"mtable",
-	"mtr",
-	"mtd",
-	"mpadded",
-	"mphantom",
-	"menclose"
-]);
-/** Track SVG context depth — children of <svg> inherit the SVG namespace. */
-let _svgDepth = 0;
-let _mathmlDepth = 0;
-function createElementWithNS(tag) {
-	if (_svgDepth > 0 || SVG_TAGS.has(tag)) return document.createElementNS(SVG_NS, tag);
-	if (_mathmlDepth > 0 || MATHML_TAGS.has(tag)) return document.createElementNS(MATHML_NS, tag);
-	return document.createElement(tag);
-}
-function mountElement(vnode, parent, anchor) {
-	const tag = vnode.type;
-	const el = createElementWithNS(tag);
-	const isSvg = tag === "svg";
-	const isMathml = tag === "math";
-	if (isSvg) _svgDepth++;
-	if (isMathml) _mathmlDepth++;
-	if (__DEV__$3 && (vnode.children?.length ?? 0) > 0 && VOID_ELEMENTS.has(vnode.type)) console.warn(`[Pyreon] <${vnode.type}> is a void element and cannot have children. Children passed to void elements will be ignored by the browser.`);
-	const props = vnode.props;
-	const propCleanup = props !== EMPTY_PROPS ? applyProps(el, props) : null;
-	_elementDepth++;
-	const childCleanup = mountChildren(vnode.children ?? [], el, null);
-	_elementDepth--;
-	if (isSvg) _svgDepth--;
-	if (isMathml) _mathmlDepth--;
-	parent.insertBefore(el, anchor);
-	const ref = props.ref;
-	if (ref) if (typeof ref === "function") ref(el);
-	else ref.current = el;
-	if (!propCleanup && childCleanup === noop$1 && !ref) {
-		if (_elementDepth > 0) return noop$1;
-		return () => {
-			const p = el.parentNode;
-			if (p && p.isConnected !== false) p.removeChild(el);
-		};
-	}
-	if (_elementDepth > 0) {
-		if (!ref && !propCleanup) return childCleanup;
-		if (!ref && propCleanup) return () => {
-			propCleanup();
-			childCleanup();
-		};
-		const refToClean = ref;
-		return () => {
-			if (refToClean) if (typeof refToClean === "function") refToClean(null);
-			else refToClean.current = null;
-			if (propCleanup) propCleanup();
-			childCleanup();
-		};
-	}
-	return () => {
-		if (ref) if (typeof ref === "function") ref(null);
-		else ref.current = null;
-		if (propCleanup) propCleanup();
-		childCleanup();
-		const p = el.parentNode;
-		if (p && p.isConnected !== false) p.removeChild(el);
-	};
-}
-function mountComponent(vnode, parent, anchor) {
-	const scope = effectScope();
-	setCurrentScope(scope);
-	let hooks;
-	let output;
-	const componentName = vnode.type.name || "Anonymous";
-	let compId;
-	let devParentId;
-	if (__DEV__$3) {
-		compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`;
-		devParentId = _mountingStack[_mountingStack.length - 1] ?? null;
-		_mountingStack.push(compId);
-	}
-	const children = vnode.children ?? [];
-	const rawProps = children.length > 0 && vnode.props.children === void 0 ? {
-		...vnode.props,
-		children: children.length === 1 ? children[0] : children
-	} : vnode.props;
-	const mergedProps = rawProps === EMPTY_PROPS ? rawProps : makeReactiveProps(rawProps);
-	try {
-		const result = runWithHooks(vnode.type, mergedProps);
-		hooks = result.hooks;
-		output = result.vnode;
-	} catch (err) {
-		if (__DEV__$3) _mountingStack.pop();
-		setCurrentScope(null);
-		scope.stop();
-		reportError({
-			component: componentName,
-			phase: "setup",
-			error: err,
-			timestamp: Date.now(),
-			props: vnode.props
-		});
-		const handled = dispatchToErrorBoundary(err);
-		if (!handled) console.error(`[Pyreon] <${componentName}> threw during setup:`, err);
-		if (__DEV__$3 && !handled) {
-			const overlay = document.createElement("pre");
-			overlay.style.cssText = "color:#e53e3e;background:#fff5f5;padding:12px;border:2px solid #e53e3e;border-radius:6px;font-size:12px;margin:4px;font-family:monospace;white-space:pre-wrap;word-break:break-word";
-			const e = err;
-			overlay.textContent = `[${componentName}] ${e.message ?? err}\n${e.stack ?? ""}`;
-			parent.insertBefore(overlay, anchor);
-			return () => overlay.remove();
-		}
-		return noop$1;
-	} finally {
-		setCurrentScope(null);
-	}
-	if (__DEV__$3 && output != null && typeof output === "object") {
-		if (output instanceof Promise) console.warn(`[Pyreon] Component <${componentName}> returned a Promise. Components must be synchronous — use lazy() + Suspense for async loading, or fetch data in onMount and store it in a signal.`);
-		else if (!("type" in output) && !Array.isArray(output) && !output.__isNative) console.warn(`[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, function, or array.`);
-	}
-	if (hooks.update) for (const fn of hooks.update) scope.addUpdateHook(fn);
-	let subtreeCleanup = noop$1;
-	try {
-		subtreeCleanup = output != null ? mountChild(output, parent, anchor) : noop$1;
-	} catch (err) {
-		if (__DEV__$3) _mountingStack.pop();
-		scope.stop();
-		if (!(propagateError(err, hooks) || dispatchToErrorBoundary(err))) {
-			reportError({
-				component: componentName,
-				phase: "render",
-				error: err,
-				timestamp: Date.now(),
-				props: vnode.props
-			});
-			console.error(`[Pyreon] <${componentName}> threw during render:`, err);
-		}
-		return noop$1;
-	}
-	if (__DEV__$3) {
-		_mountingStack.pop();
-		const firstEl = parent instanceof Element ? parent.firstElementChild : null;
-		registerComponent(compId, componentName, firstEl, devParentId);
-	}
-	let mountCleanups = null;
-	if (hooks.mount) for (const fn of hooks.mount) try {
-		let cleanup;
-		scope.runInScope(() => {
-			cleanup = fn();
-		});
-		if (cleanup) {
-			if (mountCleanups === null) mountCleanups = [];
-			mountCleanups.push(cleanup);
-		}
-	} catch (err) {
-		console.error(`[Pyreon] Error in onMount hook of <${componentName}>:`, err);
-		reportError({
-			component: componentName,
-			phase: "mount",
-			error: err,
-			timestamp: Date.now()
-		});
-	}
-	return () => {
-		if (__DEV__$3) unregisterComponent(compId);
-		scope.stop();
-		subtreeCleanup();
-		if (hooks.unmount) for (const fn of hooks.unmount) try {
-			fn();
-		} catch (err) {
-			console.error(`[Pyreon] Error in onUnmount hook of <${componentName}>:`, err);
-			reportError({
-				component: componentName,
-				phase: "unmount",
-				error: err,
-				timestamp: Date.now()
-			});
-		}
-		if (mountCleanups) for (const fn of mountCleanups) fn();
-	};
-}
-function mountChildren(children, parent, anchor) {
-	if (children.length === 0) return noop$1;
-	if (children.length === 1) {
-		const c = children[0];
-		if (c !== void 0) {
-			if (anchor === null && (typeof c === "string" || typeof c === "number")) {
-				parent.textContent = String(c);
-				return noop$1;
-			}
-			return mountChild(c, parent, anchor);
-		}
-	}
-	if (children.length === 2) {
-		const c0 = children[0];
-		const c1 = children[1];
-		if (c0 !== void 0 && c1 !== void 0) {
-			const d0 = mountChild(c0, parent, anchor);
-			const d1 = mountChild(c1, parent, anchor);
-			if (d0 === noop$1 && d1 === noop$1) return noop$1;
-			if (d0 === noop$1) return d1;
-			if (d1 === noop$1) return d0;
-			return () => {
-				d0();
-				d1();
-			};
-		}
-	}
-	const cleanups = children.map((c) => mountChild(c, parent, anchor));
-	return () => {
-		for (const fn of cleanups) fn();
-	};
-}
-/** Returns true if value is a non-empty array of VNodes that all carry keys. */
-function isKeyedArray(value) {
-	if (!Array.isArray(value) || value.length === 0) return false;
-	return value.every((v) => v !== null && typeof v === "object" && !Array.isArray(v) && v.key !== null && v.key !== void 0);
-}
-
 //#endregion
 //#region src/hydrate.ts
 const noop = () => {};
@@ -1870,62 +273,9 @@ function hydrateRoot(container, vnode) {
 	return cleanup;
 }
 
-//#endregion
-//#region src/keep-alive.ts
-/**
-* KeepAlive — mounts its children once and keeps them alive even when hidden.
-*
-* Unlike conditional rendering (which destroys and recreates component state),
-* KeepAlive CSS-hides the children while preserving all reactive state,
-* scroll position, form values, and in-flight async operations.
-*
-* Children are mounted imperatively on first activation and are never unmounted
-* while the KeepAlive itself is mounted.
-*
-* Multi-slot pattern (one KeepAlive per route):
-* @example
-* h(Fragment, null, [
-*   h(KeepAlive, { active: () => route() === "/a" }, h(RouteA, null)),
-*   h(KeepAlive, { active: () => route() === "/b" }, h(RouteB, null)),
-* ])
-*
-* With JSX:
-* @example
-* <>
-*   <KeepAlive active={() => route() === "/a"}><RouteA /></KeepAlive>
-*   <KeepAlive active={() => route() === "/b"}><RouteB /></KeepAlive>
-* </>
-*/
-function KeepAlive(props) {
-	const containerRef = createRef();
-	let childCleanup = null;
-	let childMounted = false;
-	onMount(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const e = effect(() => {
-			const isActive = props.active?.() ?? true;
-			if (!childMounted) {
-				childCleanup = runUntracked(() => mountChild(props.children ?? null, container, null));
-				childMounted = true;
-			}
-			container.style.display = isActive ? "" : "none";
-		});
-		return () => {
-			e.dispose();
-			childCleanup?.();
-		};
-	});
-	return h("div", {
-		ref: containerRef,
-		style: "display: contents"
-	});
-}
-nativeCompat(KeepAlive);
-
 //#endregion
 //#region src/template.ts
-const __DEV__$2 = process.env.NODE_ENV !== "production";
+const __DEV__$1 = process.env.NODE_ENV !== "production";
 const _countSink$1 = globalThis;
 /**
 * Creates a row/item factory backed by HTML template cloning.
@@ -1982,7 +332,7 @@ function createTemplate(html, bind) {
 * @param node - The Text node to update
 */
 function _bindText(source, node) {
-	if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.bindText");
+	if (__DEV__$1) _countSink$1.__pyreon_count__?.("runtime.bindText");
 	if (source.direct) {
 		const textUpdate = () => {
 			const v = source._v;
@@ -2016,7 +366,7 @@ function _bindText(source, node) {
 * @param updater - Function that reads `source._v` and applies the DOM update
 */
 function _bindDirect(source, updater) {
-	if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.bindDirect");
+	if (__DEV__$1) _countSink$1.__pyreon_count__?.("runtime.bindDirect");
 	if (source.direct) {
 		updater(source._v);
 		return source.direct(() => updater(source._v));
@@ -2050,7 +400,7 @@ const _tplCache = /* @__PURE__ */ new Map();
 * })
 */
 function _tpl(html, bind) {
-	if (__DEV__$2) _countSink$1.__pyreon_count__?.("runtime.tpl");
+	if (__DEV__$1) _countSink$1.__pyreon_count__?.("runtime.tpl");
 	let tpl = _tplCache.get(html);
 	if (!tpl) {
 		tpl = document.createElement("template");
@@ -2175,169 +525,6 @@ function _mountSlot(children, parent, placeholder) {
 	return cleanup;
 }
 
-//#endregion
-//#region src/transition.ts
-const __DEV__$1 = process.env.NODE_ENV !== "production";
-/**
-* Transition — adds CSS enter/leave animation classes to a single child element,
-* controlled by the reactive `show` prop.
-*
-* Class lifecycle:
-*   Enter: {name}-enter-from  → (next frame) → {name}-enter-active + {name}-enter-to → cleanup
-*   Leave: {name}-leave-from  → (next frame) → {name}-leave-active + {name}-leave-to → unmount
-*
-* The child element stays in the DOM during the leave animation and is removed only
-* after the CSS transition / animation completes.
-*
-* @example
-* const visible = signal(false)
-*
-* h(Transition, { name: "fade", show: () => visible() },
-*   h("div", { class: "modal" }, "content")
-* )
-*
-* // CSS:
-* // .fade-enter-from, .fade-leave-to  { opacity: 0; }
-* // .fade-enter-active, .fade-leave-active { transition: opacity 300ms ease; }
-*/
-function Transition(props) {
-	const n = props.name ?? "pyreon";
-	const cls = {
-		ef: props.enterFrom ?? `${n}-enter-from`,
-		ea: props.enterActive ?? `${n}-enter-active`,
-		et: props.enterTo ?? `${n}-enter-to`,
-		lf: props.leaveFrom ?? `${n}-leave-from`,
-		la: props.leaveActive ?? `${n}-leave-active`,
-		lt: props.leaveTo ?? `${n}-leave-to`
-	};
-	const ref = createRef();
-	const isMounted = signal(runUntracked(props.show));
-	let pendingEnterCancel = null;
-	let pendingLeaveCancel = null;
-	let initialized = false;
-	const applyEnter = (el) => {
-		pendingLeaveCancel?.();
-		pendingLeaveCancel = null;
-		pendingEnterCancel?.();
-		pendingEnterCancel = null;
-		props.onBeforeEnter?.(el);
-		el.classList.remove(cls.lf, cls.la, cls.lt);
-		el.classList.add(cls.ef, cls.ea);
-		requestAnimationFrame(() => {
-			el.classList.remove(cls.ef);
-			el.classList.add(cls.et);
-			let safetyTimer = null;
-			const done = () => {
-				el.removeEventListener("transitionend", done);
-				el.removeEventListener("animationend", done);
-				if (safetyTimer !== null) {
-					clearTimeout(safetyTimer);
-					safetyTimer = null;
-				}
-				pendingEnterCancel = null;
-				el.classList.remove(cls.ea, cls.et);
-				props.onAfterEnter?.(el);
-			};
-			pendingEnterCancel = () => {
-				el.removeEventListener("transitionend", done);
-				el.removeEventListener("animationend", done);
-				if (safetyTimer !== null) {
-					clearTimeout(safetyTimer);
-					safetyTimer = null;
-				}
-				el.classList.remove(cls.ef, cls.ea, cls.et);
-			};
-			el.addEventListener("transitionend", done, { once: true });
-			el.addEventListener("animationend", done, { once: true });
-			safetyTimer = setTimeout(done, 5e3);
-		});
-	};
-	const applyLeave = (el) => {
-		pendingEnterCancel?.();
-		pendingEnterCancel = null;
-		props.onBeforeLeave?.(el);
-		el.classList.remove(cls.ef, cls.ea, cls.et);
-		el.classList.add(cls.lf, cls.la);
-		requestAnimationFrame(() => {
-			el.classList.remove(cls.lf);
-			el.classList.add(cls.lt);
-			let safetyTimer = null;
-			const done = () => {
-				el.removeEventListener("transitionend", done);
-				el.removeEventListener("animationend", done);
-				if (safetyTimer !== null) {
-					clearTimeout(safetyTimer);
-					safetyTimer = null;
-				}
-				el.classList.remove(cls.la, cls.lt);
-				pendingLeaveCancel = null;
-				isMounted.set(false);
-				props.onAfterLeave?.(el);
-			};
-			pendingLeaveCancel = () => {
-				el.removeEventListener("transitionend", done);
-				el.removeEventListener("animationend", done);
-				if (safetyTimer !== null) {
-					clearTimeout(safetyTimer);
-					safetyTimer = null;
-				}
-				el.classList.remove(cls.lf, cls.la, cls.lt);
-			};
-			el.addEventListener("transitionend", done, { once: true });
-			el.addEventListener("animationend", done, { once: true });
-			safetyTimer = setTimeout(done, 5e3);
-		});
-	};
-	const handleVisibilityChange = (visible) => {
-		if (visible) {
-			if (!isMounted.peek()) isMounted.set(true);
-			queueMicrotask(() => applyEnter(ref.current));
-			return;
-		}
-		if (!isMounted.peek()) return;
-		const el = ref.current;
-		if (!el) {
-			isMounted.set(false);
-			return;
-		}
-		applyLeave(el);
-	};
-	effect(() => {
-		const visible = props.show();
-		if (!initialized) {
-			initialized = true;
-			if (visible && props.appear) queueMicrotask(() => applyEnter(ref.current));
-			return;
-		}
-		handleVisibilityChange(visible);
-	});
-	onUnmount(() => {
-		pendingEnterCancel?.();
-		pendingEnterCancel = null;
-		pendingLeaveCancel?.();
-		pendingLeaveCancel = null;
-	});
-	const rawChild = props.children;
-	const emptyFragment = h(Fragment, null);
-	return (() => {
-		if (!isMounted()) return emptyFragment;
-		if (!rawChild || typeof rawChild !== "object" || Array.isArray(rawChild)) return rawChild ?? null;
-		const vnode = rawChild;
-		if (typeof vnode.type !== "string") {
-			if (__DEV__$1) console.warn("[Pyreon] Transition child is a component. Wrap it in a DOM element for enter/leave animations to work.");
-			return vnode;
-		}
-		return {
-			...vnode,
-			props: {
-				...vnode.props,
-				ref
-			}
-		};
-	});
-}
-nativeCompat(Transition);
-
 //#endregion
 //#region src/transition-group.ts
 /**