@pyreon/runtime-dom 0.5.6 → 0.5.7

package/lib/types/index.d.ts

@@ -1,1967 +1,418 @@
-import { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
-import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, createRef, dispatchToErrorBoundary, h, normalizeStyleValue, onMount, onUnmount, propagateError, reportError, runWithHooks, toKebabCase } from "@pyreon/core";
+import { NativeItem, Props, VNode, VNodeChild } from "@pyreon/core";
 
-//#region src/delegate.ts
+//#region src/delegate.d.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)
-*/
+ * 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.
-*/
-
+ * Events that are delegated (common bubbling events).
+ * Non-bubbling events (focus, blur, mouseenter, mouseleave, load, error, scroll)
+ * are NOT delegated — they must use addEventListener.
+ */
+declare const DELEGATED_EVENTS: Set<string>;
 /**
-* 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}`;
-}
+ * Property name used on DOM elements to store delegated event handlers.
+ * Format: `__ev_{eventName}` e.g. `__ev_click`, `__ev_input`
+ */
+declare function delegatedPropName(eventName: string): string;
 /**
-* 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 (handler) {
-          batch(() => handler(e));
-          if (e.cancelBubble) break;
-        }
-        el = el.parentElement;
-      }
-    });
-  }
-}
-
+ * Install delegation listeners on a container element.
+ * Called once from mount(). Idempotent — safe to call multiple times.
+ */
+declare function setupDelegation(container: Element): void;
 //#endregion
-//#region src/hydration-debug.ts
-
-function enableHydrationWarnings() {
-  _enabled = true;
-}
-function disableHydrationWarnings() {
-  _enabled = false;
-}
+//#region src/devtools.d.ts
 /**
-* Emit a hydration mismatch warning.
-* @param type  - Kind of mismatch
-* @param expected - What the VNode expected
-* @param actual   - What the DOM had
-* @param path     - Human-readable path in the tree, e.g. "root > div > span"
-*/
-function warnHydrationMismatch(_type, _expected, _actual, _path) {
-  if (!_enabled) return;
-  console.warn(`[Pyreon] Hydration mismatch (${_type}): expected ${String(_expected)}, got ${String(_actual)} at ${_path}`);
+ * 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;
+  /** First DOM element produced by this component, if any */
+  el: Element | null;
+  parentId: string | null;
+  childIds: string[];
+}
+interface PyreonDevtools {
+  readonly version: string;
+  getComponentTree(): DevtoolsComponentEntry[];
+  getAllComponents(): DevtoolsComponentEntry[];
+  highlight(id: string): void;
+  onComponentMount(cb: (entry: DevtoolsComponentEntry) => void): () => void;
+  onComponentUnmount(cb: (id: string) => void): () => void;
+  /** Toggle the component inspector overlay (also: Ctrl+Shift+P) */
+  enableOverlay(): void;
+  disableOverlay(): void;
 }
-
 //#endregion
-//#region src/devtools.ts
-
-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);
-}
-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;
-}
-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
-  };
-  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 = {
-    components: () => devtools.getAllComponents(),
-    tree: () => devtools.getComponentTree(),
-    highlight: id => devtools.highlight(id),
-    inspect: () => {
-      if (_overlayActive) disableOverlay();else enableOverlay();
-    },
-    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
-      };
-    },
-    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
-
+//#region src/hydrate.d.ts
 /**
-* 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;
-  }
-}
-/**
-* 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) {
-  const marker = document.createComment("pyreon");
-  parent.insertBefore(marker, anchor);
-  let currentCleanup = () => {};
-  let generation = 0;
-  const e = effect(() => {
-    const myGen = ++generation;
-    runUntracked(() => currentCleanup());
-    currentCleanup = () => {};
-    const value = accessor();
-    if (__DEV__$4 && typeof value === "function") console.warn("[Pyreon] Reactive accessor returned a function instead of a value. Did you forget to call the signal?");
-    if (value != null && value !== false) {
-      const cleanup = mount(value, parent, marker);
-      if (myGen === generation) currentCleanup = cleanup;else cleanup();
-    }
-  });
-  return () => {
-    e.dispose();
-    currentCleanup();
-    marker.parentNode?.removeChild(marker);
-  };
-}
-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;
-  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;
-      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++;
-  }
-  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;
-      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;
-    if (n === 0 && cache.size > 0) {
-      for (const entry of cache.values()) 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()) {
-      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. */
-
-/** 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;
-  for (let i = 0; i < n; i++) {
-    const key = newKeys[i];
-    const v = cache.get(key)?.pos ?? 0;
-    let lo = 0;
-    let hi = lisLen;
-    while (lo < hi) {
-      const mid = lo + hi >> 1;
-      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++;
-  }
-  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 = [];
-  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 (!__DEV__$4 || !seen) return;
-    if (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)) console.warn(`[Pyreon] Duplicate key "${String(key)}" in <For> list. Keys must be unique.`);
-    seen.add(key);
-  };
-  /** 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 = __DEV__$4 ? /* @__PURE__ */new Set() : null;
-    for (let i = 0; i < n; i++) {
-      const item = items[i];
-      const key = getKey(item);
-      warnForKey(_seenKeys, key);
-      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 = __DEV__$4 ? /* @__PURE__ */new Set() : null;
-    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) 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) {
-        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) 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) => {
-    removeStaleForEntries(new Set(newKeys));
-    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;
-    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) entry.cleanup();
-      entry.anchor.parentNode?.removeChild(entry.anchor);
-    }
-    cache = /* @__PURE__ */new Map();
-    cleanupCount = 0;
-    startMarker.parentNode?.removeChild(startMarker);
-    tailMarker.parentNode?.removeChild(tailMarker);
-  };
-}
+ * Hydrate a server-rendered container with a Pyreon VNode tree.
+ *
+ * Reuses existing DOM elements for static structure, attaches event listeners
+ * and reactive effects without re-rendering. Falls back to fresh mount for
+ * dynamic content (reactive conditionals, For lists).
+ *
+ * @example
+ * // Server:
+ * const html = await renderToString(h(App, null))
+ *
+ * // Client:
+ * const unmount = hydrateRoot(document.getElementById("app")!, h(App, null))
+ */
+declare function hydrateRoot(container: Element, vnode: VNodeChild): () => void;
+//#endregion
+//#region src/hydration-debug.d.ts
 /**
-* 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;
-  }
+ * Hydration mismatch warnings.
+ *
+ * Enabled automatically in development (NODE_ENV !== "production").
+ * Can be toggled manually for testing or verbose production debugging.
+ *
+ * @example
+ * import { enableHydrationWarnings } from "@pyreon/runtime-dom"
+ * enableHydrationWarnings()
+ */
+declare function enableHydrationWarnings(): void;
+declare function disableHydrationWarnings(): void;
+//#endregion
+//#region src/keep-alive.d.ts
+interface KeepAliveProps extends Props {
+  /**
+   * Accessor that returns true when this slot's children should be visible.
+   * When false, children are CSS-hidden but remain mounted — effects and
+   * signals stay alive.
+   * Defaults to true (always visible / always mounted).
+   */
+  active?: () => boolean;
+  children?: VNodeChild;
 }
 /**
-* 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);
-}
-
+ * 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>
+ * </>
+ */
+declare function KeepAlive(props: KeepAliveProps): VNodeChild;
 //#endregion
-//#region src/props.ts
-
-/**
-* 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;
-}
+//#region src/mount.d.ts
+type Cleanup$1 = () => void;
 /**
-* 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);
-  }
-}
+ * 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).
+ */
+declare function mountChild(child: VNodeChild | VNodeChild[] | (() => VNodeChild | VNodeChild[]), parent: Node, anchor?: Node | null): Cleanup$1;
+//#endregion
+//#region src/props.d.ts
+type Cleanup = () => void;
 /**
-* 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);
-}
+ * Directive function signature.
+ * Receives the element and an `addCleanup` callback to register teardown logic.
+ *
+ * @example
+ * const nFocus: Directive = (el) => { el.focus() }
+ *
+ * // With reactive value (via closure):
+ * const nTooltip = (text: () => string): Directive => (el, addCleanup) => {
+ *   const e = effect(() => { el.title = text() })
+ *   addCleanup(() => e.dispose())
+ * }
+ *
+ * // Usage:
+ * h("input", { "n-focus": nFocus })
+ * h("div",   { "n-tooltip": nTooltip(() => label()) })
+ */
+type Directive = (el: HTMLElement, addCleanup: (fn: Cleanup) => void) => void;
+type SanitizeFn = (html: string) => string;
 /**
-* 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") continue;
-    const 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;
-}
+ * 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)
+ */
+declare function setSanitizer(fn: SanitizeFn | null): void;
 /**
-* Apply a single prop.
-*
-* - `onXxx` → addEventListener
-* - `() => value` (non-event function) → reactive via effect
-* - anything else → static attribute / DOM property
-*/
+ * Sanitize an HTML string using the browser Sanitizer API (Chrome 105+).
+ * Falls back to a tag-allowlist sanitizer that strips unsafe elements and attributes.
+ */
+declare function sanitizeHtml(html: string): string;
 /**
-* Bind an event handler (onClick → "click") with batching + delegation support.
-*/
-function applyEventProp(el, key, value) {
-  if (__DEV__$3 && typeof value !== "function") {
-    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);
-  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);
-}
-function applyProp(el, key, value) {
-  if (EVENT_RE.test(key)) return applyEventProp(el, key, value);
-  if (key === "innerHTML") {
-    if (typeof el.setHTML === "function") el.setHTML(value);else el.innerHTML = sanitizeHtml(value);
-    return null;
-  }
-  if (key === "dangerouslySetInnerHTML") {
-    if (__DEV__$3) console.warn("[Pyreon] dangerouslySetInnerHTML bypasses sanitization. Ensure the HTML is trusted.");
-    el.innerHTML = value.__html;
-    return null;
-  }
-  if (key === "n-show") return renderEffect(() => {
-    const visible = value();
-    el.style.display = visible ? "" : "none";
-  });
-  if (key.startsWith("n-")) {
-    const directive = value;
-    const cleanups = [];
-    directive(el, fn => cleanups.push(fn));
-    return cleanups.length > 0 ? () => {
-      for (const fn of cleanups) fn();
-    } : null;
-  }
-  if (typeof value === "function") return renderEffect(() => setStaticProp(el, key, value()));
-  setStaticProp(el, key, value);
-  return null;
-}
-/** Apply a style prop (string or object). */
-function applyStyleProp(el, value) {
-  if (typeof value === "string") el.style.cssText = value;else if (value != null && typeof value === "object") {
-    const obj = value;
-    for (const k in obj) {
-      const css = normalizeStyleValue(k, obj[k]);
-      el.style.setProperty(k.startsWith("--") ? k : toKebabCase(k), css);
-    }
-  }
-}
-function setStaticProp(el, key, value) {
-  if (URL_ATTRS.has(key) && typeof value === "string" && UNSAFE_URL_RE.test(value)) {
-    if (__DEV__$3) console.warn(`[Pyreon] Blocked unsafe URL in "${key}" attribute: ${value}`);
-    return;
-  }
-  if (key === "class" || key === "className") {
-    el.setAttribute("class", value == null ? "" : String(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 (key in el) {
-    el[key] = value;
-    return;
-  }
-  el.setAttribute(key, String(value));
-}
-
+ * 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.
+ */
+declare function applyProps(el: Element, props: Props): Cleanup | null;
+declare function applyProp(el: Element, key: string, value: unknown): Cleanup | null;
 //#endregion
-//#region src/mount.ts
-
+//#region src/template.d.ts
 /**
-* 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 (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 == null || sample === false ? "" : String(sample));
-      parent.insertBefore(text, anchor);
-      const dispose = renderEffect(() => {
-        const v = child();
-        text.data = v == null || v === false ? "" : String(v);
-      });
-      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 {
-      each,
-      by,
-      children
-    } = vnode.props;
-    const prevDepth = _elementDepth;
-    _elementDepth = 0;
-    const cleanup = mountFor(each, by, children, parent, anchor, mountChild);
-    _elementDepth = prevDepth;
-    return cleanup;
-  }
-  if (vnode.type === PortalSymbol) {
-    const {
-      target,
-      children
-    } = vnode.props;
-    if (__DEV__$2 && !target) {
-      console.warn("[Pyreon] <Portal> received a falsy `target`. Provide a valid DOM element.");
-      return noop$1;
-    }
-    if (__DEV__$2 && !(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);
-  return mountElement(vnode, parent, anchor);
-}
-function mountElement(vnode, parent, anchor) {
-  const el = document.createElement(vnode.type);
-  if (__DEV__$2 && vnode.children.length > 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--;
-  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 && typeof refToClean === "object") refToClean.current = null;
-      if (propCleanup) propCleanup();
-      childCleanup();
-    };
-  }
-  return () => {
-    if (ref && typeof ref === "object") 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";
-  const compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`;
-  const parentId = _mountingStack[_mountingStack.length - 1] ?? null;
-  _mountingStack.push(compId);
-  const mergedProps = vnode.children.length > 0 && vnode.props.children === void 0 ? {
-    ...vnode.props,
-    children: vnode.children.length === 1 ? vnode.children[0] : vnode.children
-  } : vnode.props;
-  try {
-    const result = runWithHooks(vnode.type, mergedProps);
-    hooks = result.hooks;
-    output = result.vnode;
-  } catch (err) {
-    _mountingStack.pop();
-    setCurrentScope(null);
-    scope.stop();
-    reportError({
-      component: componentName,
-      phase: "setup",
-      error: err,
-      timestamp: Date.now(),
-      props: vnode.props
-    });
-    dispatchToErrorBoundary(err);
-    return noop$1;
-  } finally {
-    setCurrentScope(null);
-  }
-  if (__DEV__$2 && 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)) console.warn(`[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, or function.`);
-  }
-  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) {
-    _mountingStack.pop();
-    scope.stop();
-    if (!(propagateError(err, hooks) || dispatchToErrorBoundary(err))) reportError({
-      component: componentName,
-      phase: "render",
-      error: err,
-      timestamp: Date.now(),
-      props: vnode.props
-    });
-    return noop$1;
-  }
-  _mountingStack.pop();
-  registerComponent(compId, componentName, parent instanceof Element ? parent.firstElementChild : null, parentId);
-  const mountCleanups = [];
-  for (const fn of hooks.mount) try {
-    let cleanup;
-    scope.runInScope(() => {
-      cleanup = fn();
-    });
-    if (cleanup) 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 () => {
-    unregisterComponent(compId);
-    scope.stop();
-    subtreeCleanup();
-    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()
-      });
-    }
-    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
-
-/** Skip comment and whitespace-only text nodes, return first "real" node */
-function firstReal(initialNode) {
-  let node = initialNode;
-  while (node) {
-    if (node.nodeType === Node.COMMENT_NODE) {
-      node = node.nextSibling;
-      continue;
-    }
-    if (node.nodeType === Node.TEXT_NODE && isWhitespaceOnly(node.data)) {
-      node = node.nextSibling;
-      continue;
-    }
-    return node;
-  }
-  return null;
-}
-/** Check if a string is whitespace-only without allocating a trimmed copy. */
-function isWhitespaceOnly(s) {
-  for (let i = 0; i < s.length; i++) {
-    const c = s.charCodeAt(i);
-    if (c !== 32 && c !== 9 && c !== 10 && c !== 13 && c !== 12) return false;
-  }
-  return true;
-}
-/** Advance past a node, skipping whitespace-only text and comments */
-function nextReal(node) {
-  return firstReal(node.nextSibling);
-}
+ * Creates a row/item factory backed by HTML template cloning.
+ *
+ * - The HTML string is parsed exactly once via <template>.innerHTML.
+ * - Each call to the returned factory clones the root element via
+ *   cloneNode(true) — ~5-10x faster than createElement + setAttribute.
+ * - `bind` receives the cloned element and the item; it should wire up
+ *   reactive effects and return a cleanup function.
+ * - Returns a NativeItem directly (no VNode wrapper) — saves 2 allocations
+ *   per row vs the old VNode + props-object + children-array approach.
+ *
+ * @example
+ * const rowTemplate = createTemplate<Row>(
+ *   "<tr><td></td><td></td></tr>",
+ *   (el, row) => {
+ *     const td1 = el.firstChild as HTMLElement
+ *     const td2 = td1.nextSibling as HTMLElement
+ *     td1.textContent = String(row.id)
+ *     const text = td2.firstChild as Text
+ *     text.data = row.label()
+ *     const unsub = row.label.subscribe(() => { text.data = row.label() })
+ *     return unsub
+ *   }
+ * )
+ */
+declare function createTemplate<T>(html: string, bind: (el: HTMLElement, item: T) => (() => void) | null): (item: T) => NativeItem;
 /**
-* Hydrate a single VNodeChild against the DOM subtree starting at `domNode`.
-* Returns [cleanup, nextDomSibling].
-*/
-/** Insert a comment marker before domNode (or append if domNode is null). */
-function insertMarker(parent, domNode, text) {
-  const marker = document.createComment(text);
-  if (domNode) parent.insertBefore(marker, domNode);else parent.appendChild(marker);
-  return marker;
-}
-/** Hydrate a reactive accessor (function child). */
-function hydrateReactiveChild(child, domNode, parent, anchor, path) {
-  const initial = runUntracked(child);
-  if (initial == null || initial === false) return [mountReactive(child, parent, insertMarker(parent, domNode, "pyreon"), mountChild), domNode];
-  if (typeof initial === "string" || typeof initial === "number" || typeof initial === "boolean") return hydrateReactiveText(child, domNode, parent, anchor, path);
-  return [mountReactive(child, parent, insertMarker(parent, domNode, "pyreon"), mountChild), domNode ? nextReal(domNode) : null];
-}
-/** Hydrate a reactive text binding against an existing text node. */
-function hydrateReactiveText(child, domNode, parent, anchor, path) {
-  if (domNode?.nodeType === Node.TEXT_NODE) {
-    const textNode = domNode;
-    return [renderEffect(() => {
-      const v = child();
-      textNode.data = v == null ? "" : String(v);
-    }), nextReal(domNode)];
-  }
-  warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > reactive`);
-  return [mountChild(child, parent, anchor), domNode];
-}
-/** Hydrate a VNode (fragment, For, Portal, component, element). */
-function hydrateVNode(vnode, domNode, parent, anchor, path) {
-  if (vnode.type === Fragment) return hydrateChildren(vnode.children, domNode, parent, anchor, path);
-  if (vnode.type === ForSymbol) return [mountChild(vnode, parent, insertMarker(parent, domNode, "pyreon-for")), null];
-  if (vnode.type === PortalSymbol) return [mountChild(vnode, parent, anchor), domNode];
-  if (typeof vnode.type === "function") return hydrateComponent(vnode, domNode, parent, anchor, path);
-  if (typeof vnode.type === "string") return hydrateElement(vnode, domNode, parent, anchor, path);
-  return [noop, domNode];
-}
-function hydrateChild(child, domNode, parent, anchor, path = "root") {
-  if (Array.isArray(child)) {
-    const cleanups = [];
-    let cursor = domNode;
-    for (const c of child) {
-      const [cleanup, next] = hydrateChild(c, cursor, parent, anchor, path);
-      cleanups.push(cleanup);
-      cursor = next;
-    }
-    return [() => {
-      for (const c of cleanups) c();
-    }, cursor];
-  }
-  if (child == null || child === false) return [noop, domNode];
-  if (typeof child === "function") return hydrateReactiveChild(child, domNode, parent, anchor, path);
-  if (typeof child === "string" || typeof child === "number") {
-    if (domNode?.nodeType === Node.TEXT_NODE) return [() => domNode.remove(), nextReal(domNode)];
-    warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > text`);
-    return [mountChild(child, parent, anchor), domNode];
-  }
-  return hydrateVNode(child, domNode, parent, anchor, path);
-}
-function hydrateElement(vnode, domNode, parent, anchor, path = "root") {
-  const elPath = `${path} > ${vnode.type}`;
-  if (domNode?.nodeType === Node.ELEMENT_NODE && domNode.tagName.toLowerCase() === vnode.type) {
-    const el = domNode;
-    const cleanups = [];
-    const propCleanup = applyProps(el, vnode.props);
-    if (propCleanup) cleanups.push(propCleanup);
-    const firstChild = firstReal(el.firstChild);
-    const [childCleanup] = hydrateChildren(vnode.children, firstChild, el, null, elPath);
-    cleanups.push(childCleanup);
-    const ref = vnode.props.ref;
-    if (ref) if (typeof ref === "function") ref(el);else ref.current = el;
-    const cleanup = () => {
-      if (ref && typeof ref === "object") ref.current = null;
-      for (const c of cleanups) c();
-      el.remove();
-    };
-    return [cleanup, nextReal(domNode)];
-  }
-  const actual = domNode?.nodeType === Node.ELEMENT_NODE ? domNode.tagName.toLowerCase() : domNode?.nodeType ?? "null";
-  warnHydrationMismatch("tag", vnode.type, actual, elPath);
-  return [mountChild(vnode, parent, anchor), domNode];
-}
-function hydrateChildren(children, domNode, parent, anchor, path = "root") {
-  if (children.length === 0) return [noop, domNode];
-  if (children.length === 1) return hydrateChild(children[0], domNode, parent, anchor, path);
-  const cleanups = [];
-  let cursor = domNode;
-  for (const child of children) {
-    const [cleanup, next] = hydrateChild(child, cursor, parent, anchor, path);
-    cleanups.push(cleanup);
-    cursor = next;
-  }
-  return [() => {
-    for (const c of cleanups) c();
-  }, cursor];
-}
-function hydrateComponent(vnode, domNode, parent, anchor, path = "root") {
-  const scope = effectScope();
-  setCurrentScope(scope);
-  let subtreeCleanup = noop;
-  const mountCleanups = [];
-  let nextDom = domNode;
-  const componentName = vnode.type.name || "Anonymous";
-  const mergedProps = vnode.children.length > 0 && vnode.props.children === void 0 ? {
-    ...vnode.props,
-    children: vnode.children.length === 1 ? vnode.children[0] : vnode.children
-  } : vnode.props;
-  let result;
-  try {
-    result = runWithHooks(vnode.type, mergedProps);
-  } catch (err) {
-    setCurrentScope(null);
-    scope.stop();
-    console.error(`[Pyreon] Error hydrating component <${componentName}>:`, err);
-    reportError({
-      component: componentName,
-      phase: "setup",
-      error: err,
-      timestamp: Date.now(),
-      props: vnode.props
-    });
-    dispatchToErrorBoundary(err);
-    return [noop, domNode];
-  }
-  setCurrentScope(null);
-  const {
-    vnode: output,
-    hooks
-  } = result;
-  for (const fn of hooks.update) scope.addUpdateHook(fn);
-  if (output != null) {
-    const [childCleanup, next] = hydrateChild(output, domNode, parent, anchor, path);
-    subtreeCleanup = childCleanup;
-    nextDom = next;
-  }
-  for (const fn of hooks.mount) try {
-    let c;
-    scope.runInScope(() => {
-      c = fn();
-    });
-    if (c) mountCleanups.push(c);
-  } catch (err) {
-    reportError({
-      component: componentName,
-      phase: "mount",
-      error: err,
-      timestamp: Date.now()
-    });
-  }
-  const cleanup = () => {
-    scope.stop();
-    subtreeCleanup();
-    for (const fn of hooks.unmount) fn();
-    for (const fn of mountCleanups) fn();
-  };
-  return [cleanup, nextDom];
-}
+ * Compiler-emitted direct text binding for single-signal text nodes.
+ *
+ * When the compiler detects `{signal()}` as the only reactive expression
+ * in a text binding, it emits `_bindText(signal, textNode)` instead of
+ * `_bind(() => { textNode.data = signal() })`.
+ *
+ * This bypasses the effect system entirely:
+ * - No deps array allocation
+ * - No withTracking / setDepsCollector overhead
+ * - No `run` closure
+ * - Signal.subscribe is used directly (O(1) subscribe + unsubscribe)
+ *
+ * @param source - A signal (anything with `._v` and `.direct`)
+ * @param node - The Text node to update
+ */
+declare function _bindText(source: {
+  _v: unknown;
+  direct: (fn: () => void) => () => void;
+}, node: Text): () => void;
 /**
-* Hydrate a server-rendered container with a Pyreon VNode tree.
-*
-* Reuses existing DOM elements for static structure, attaches event listeners
-* and reactive effects without re-rendering. Falls back to fresh mount for
-* dynamic content (reactive conditionals, For lists).
-*
-* @example
-* // Server:
-* const html = await renderToString(h(App, null))
-*
-* // Client:
-* const unmount = hydrateRoot(document.getElementById("app")!, h(App, null))
-*/
-function hydrateRoot(container, vnode) {
-  setupDelegation(container);
-  const [cleanup] = hydrateChild(vnode, firstReal(container.firstChild), container, null);
-  return cleanup;
-}
-
-//#endregion
-//#region src/keep-alive.ts
+ * Compiler-emitted direct binding for single-signal reactive expressions.
+ *
+ * Like _bindText but for arbitrary DOM updates (attributes, className, style).
+ * When the compiler detects that a reactive expression depends on exactly one
+ * signal call, it emits `_bindDirect(signal, updater)` instead of
+ * `_bind(() => { updater() })`.
+ *
+ * Uses signal.direct() for zero-overhead registration:
+ * - Flat array instead of Set (no hashing)
+ * - Index-based disposal (no Set.delete)
+ * - No deps array, no withTracking, no run closure
+ *
+ * @param source - A signal (anything with `._v` and `.direct`)
+ * @param updater - Function that reads `source._v` and applies the DOM update
+ */
+declare function _bindDirect(source: {
+  _v: unknown;
+  direct: (fn: () => void) => () => void;
+}, updater: (value: unknown) => void): () => void;
 /**
-* 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;
-    const e = effect(() => {
-      const isActive = props.active?.() ?? true;
-      if (!childMounted) {
-        childCleanup = 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"
-  });
-}
-
+ * Compiler-emitted template instantiation.
+ *
+ * Parses `html` into a <template> element once (cached), then cloneNode(true)
+ * for each call. The `bind` function wires up dynamic attributes, text content,
+ * and event listeners on the cloned element tree. Returns a NativeItem that
+ * mountChild can insert directly — no VNode allocation.
+ *
+ * This is the runtime half of the compiler's template optimisation. The compiler
+ * detects static JSX element trees and emits `_tpl(html, bindFn)` instead of
+ * nested `h()` calls. Benefits:
+ * - cloneNode(true) is ~5-10x faster than sequential createElement + setAttribute
+ * - Zero VNode / props-object / children-array allocations per instance
+ * - Static attributes are baked into the HTML string (no runtime prop application)
+ *
+ * @example
+ * // Compiler output for: <div class="box"><span>{text()}</span></div>
+ * _tpl('<div class="box"><span></span></div>', (__root) => {
+ *   const __e0 = __root.children[0];
+ *   const __d0 = _re(() => { __e0.textContent = text(); });
+ *   return () => { __d0(); };
+ * })
+ */
+declare function _tpl(html: string, bind: (el: HTMLElement) => (() => void) | null): NativeItem;
 //#endregion
-//#region src/template.ts
-/**
-* Creates a row/item factory backed by HTML template cloning.
-*
-* - The HTML string is parsed exactly once via <template>.innerHTML.
-* - Each call to the returned factory clones the root element via
-*   cloneNode(true) — ~5-10x faster than createElement + setAttribute.
-* - `bind` receives the cloned element and the item; it should wire up
-*   reactive effects and return a cleanup function.
-* - Returns a NativeItem directly (no VNode wrapper) — saves 2 allocations
-*   per row vs the old VNode + props-object + children-array approach.
-*
-* @example
-* const rowTemplate = createTemplate<Row>(
-*   "<tr><td></td><td></td></tr>",
-*   (el, row) => {
-*     const td1 = el.firstChild as HTMLElement
-*     const td2 = td1.nextSibling as HTMLElement
-*     td1.textContent = String(row.id)
-*     const text = td2.firstChild as Text
-*     text.data = row.label()
-*     const unsub = row.label.subscribe(() => { text.data = row.label() })
-*     return unsub
-*   }
-* )
-*/
-function createTemplate(html, bind) {
-  const tmpl = document.createElement("template");
-  tmpl.innerHTML = html;
-  const proto = tmpl.content.firstElementChild;
-  return item => {
-    const el = proto.cloneNode(true);
-    return {
-      __isNative: true,
-      el,
-      cleanup: bind(el, item)
-    };
-  };
+//#region src/transition.d.ts
+interface TransitionProps {
+  /**
+   * CSS class name prefix.
+   * "fade" → fade-enter-from, fade-enter-active, fade-enter-to, fade-leave-from, …
+   * Default: "pyreon"
+   */
+  name?: string;
+  /** Reactive boolean controlling whether the child is shown. */
+  show: () => boolean;
+  /**
+   * If true, runs the enter transition on the initial mount (instead of
+   * appearing immediately). Default: false.
+   */
+  appear?: boolean;
+  enterFrom?: string;
+  enterActive?: string;
+  enterTo?: string;
+  leaveFrom?: string;
+  leaveActive?: string;
+  leaveTo?: string;
+  onBeforeEnter?: (el: HTMLElement) => void;
+  onAfterEnter?: (el: HTMLElement) => void;
+  onBeforeLeave?: (el: HTMLElement) => void;
+  onAfterLeave?: (el: HTMLElement) => void;
+  /**
+   * The single child element to animate.
+   * Must be a direct DOM element VNode (not a component) for class injection to work.
+   */
+  children?: VNodeChild;
 }
 /**
-* Compiler-emitted direct text binding for single-signal text nodes.
-*
-* When the compiler detects `{signal()}` as the only reactive expression
-* in a text binding, it emits `_bindText(signal, textNode)` instead of
-* `_bind(() => { textNode.data = signal() })`.
-*
-* This bypasses the effect system entirely:
-* - No deps array allocation
-* - No withTracking / setDepsCollector overhead
-* - No `run` closure
-* - Signal.subscribe is used directly (O(1) subscribe + unsubscribe)
-*
-* @param source - A signal (anything with `._v` and `.direct`)
-* @param node - The Text node to update
-*/
-function _bindText(source, node) {
-  const update = () => {
-    const v = source._v;
-    node.data = v == null || v === false ? "" : String(v);
-  };
-  update();
-  return source.direct(update);
-}
-/**
-* Compiler-emitted direct binding for single-signal reactive expressions.
-*
-* Like _bindText but for arbitrary DOM updates (attributes, className, style).
-* When the compiler detects that a reactive expression depends on exactly one
-* signal call, it emits `_bindDirect(signal, updater)` instead of
-* `_bind(() => { updater() })`.
-*
-* Uses signal.direct() for zero-overhead registration:
-* - Flat array instead of Set (no hashing)
-* - Index-based disposal (no Set.delete)
-* - No deps array, no withTracking, no run closure
-*
-* @param source - A signal (anything with `._v` and `.direct`)
-* @param updater - Function that reads `source._v` and applies the DOM update
-*/
-function _bindDirect(source, updater) {
-  updater(source._v);
-  return source.direct(() => updater(source._v));
-}
-/**
-* Compiler-emitted template instantiation.
-*
-* Parses `html` into a <template> element once (cached), then cloneNode(true)
-* for each call. The `bind` function wires up dynamic attributes, text content,
-* and event listeners on the cloned element tree. Returns a NativeItem that
-* mountChild can insert directly — no VNode allocation.
-*
-* This is the runtime half of the compiler's template optimisation. The compiler
-* detects static JSX element trees and emits `_tpl(html, bindFn)` instead of
-* nested `h()` calls. Benefits:
-* - cloneNode(true) is ~5-10x faster than sequential createElement + setAttribute
-* - Zero VNode / props-object / children-array allocations per instance
-* - Static attributes are baked into the HTML string (no runtime prop application)
-*
-* @example
-* // Compiler output for: <div class="box"><span>{text()}</span></div>
-* _tpl('<div class="box"><span></span></div>', (__root) => {
-*   const __e0 = __root.children[0];
-*   const __d0 = _re(() => { __e0.textContent = text(); });
-*   return () => { __d0(); };
-* })
-*/
-function _tpl(html, bind) {
-  let tpl = _tplCache.get(html);
-  if (!tpl) {
-    tpl = document.createElement("template");
-    tpl.innerHTML = html;
-    _tplCache.set(html, tpl);
-  }
-  const el = tpl.content.firstElementChild?.cloneNode(true);
-  return {
-    __isNative: true,
-    el,
-    cleanup: bind(el)
-  };
-}
-
+ * 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; }
+ */
+declare function Transition(props: TransitionProps): VNodeChild;
 //#endregion
-//#region src/transition.ts
-
-/**
-* 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 pendingLeaveCancel = null;
-  let initialized = false;
-  const applyEnter = el => {
-    pendingLeaveCancel?.();
-    pendingLeaveCancel = 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);
-      const done = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.ea, cls.et);
-        props.onAfterEnter?.(el);
-      };
-      el.addEventListener("transitionend", done, {
-        once: true
-      });
-      el.addEventListener("animationend", done, {
-        once: true
-      });
-    });
-  };
-  const applyLeave = el => {
-    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);
-      const done = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.la, cls.lt);
-        pendingLeaveCancel = null;
-        isMounted.set(false);
-        props.onAfterLeave?.(el);
-      };
-      pendingLeaveCancel = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.lf, cls.la, cls.lt);
-      };
-      el.addEventListener("transitionend", done, {
-        once: true
-      });
-      el.addEventListener("animationend", done, {
-        once: true
-      });
-    });
-  };
-  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(() => {
-    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
-      }
-    };
-  };
+//#region src/transition-group.d.ts
+interface TransitionGroupProps<T = unknown> {
+  /** Wrapper element tag. Default: "div" */
+  tag?: string;
+  /** CSS class prefix. Default: "pyreon" */
+  name?: string;
+  /** Animate items on initial mount. Default: false */
+  appear?: boolean;
+  enterFrom?: string;
+  enterActive?: string;
+  enterTo?: string;
+  leaveFrom?: string;
+  leaveActive?: string;
+  leaveTo?: string;
+  /** Class applied during FLIP move animation. Default: "{name}-move" */
+  moveClass?: string;
+  /** Reactive list source */
+  items: () => T[];
+  /** Stable key extractor */
+  keyFn: (item: T, index: number) => string | number;
+  /**
+   * Render a single DOM-element VNode for each item.
+   * Must return a VNode whose `type` is a string (e.g. "div", "li") so
+   * the component can inject a ref and read the underlying DOM node.
+   */
+  render: (item: T, index: number) => VNode;
+  onBeforeEnter?: (el: HTMLElement) => void;
+  onAfterEnter?: (el: HTMLElement) => void;
+  onBeforeLeave?: (el: HTMLElement) => void;
+  onAfterLeave?: (el: HTMLElement) => void;
 }
-
-//#endregion
-//#region src/transition-group.ts
 /**
-* TransitionGroup — animates a keyed reactive list with CSS enter/leave and
-* FLIP move animations.
-*
-* Class lifecycle:
-*   Enter: {name}-enter-from → {name}-enter-active + {name}-enter-to → cleanup
-*   Leave: {name}-leave-from → {name}-leave-active + {name}-leave-to → item removed
-*   Move:  {name}-move (applied when an item shifts position)
-*
-* @example
-* const items = signal([{ id: 1 }, { id: 2 }])
-*
-* h(TransitionGroup, {
-*   tag: "ul",
-*   name: "list",
-*   items,
-*   keyFn: (item) => item.id,
-*   render: (item) => h("li", { class: "item" }, item.id),
-* })
-*
-* // CSS:
-* // .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(-10px); }
-* // .list-enter-active, .list-leave-active { transition: all 300ms ease; }
-* // .list-move { transition: transform 300ms ease; }
-*/
-function TransitionGroup(props) {
-  const tag = props.tag ?? "div";
-  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`,
-    mv: props.moveClass ?? `${n}-move`
-  };
-  const containerRef = createRef();
-  const entries = /* @__PURE__ */new Map();
-  const ready = signal(false);
-  let firstRun = true;
-  const applyEnter = el => {
-    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);
-      const done = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.ea, cls.et);
-        props.onAfterEnter?.(el);
-      };
-      el.addEventListener("transitionend", done, {
-        once: true
-      });
-      el.addEventListener("animationend", done, {
-        once: true
-      });
-    });
-  };
-  const applyLeave = (el, onDone) => {
-    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);
-      const done = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.la, cls.lt);
-        props.onAfterLeave?.(el);
-        onDone();
-      };
-      el.addEventListener("transitionend", done, {
-        once: true
-      });
-      el.addEventListener("animationend", done, {
-        once: true
-      });
-    });
-  };
-  /** Start leave animation for removed items. */
-  const processLeaves = newKeys => {
-    for (const [key, entry] of entries) {
-      if (newKeys.has(key) || entry.leaving) continue;
-      entry.leaving = true;
-      const el = entry.ref.current;
-      if (el) applyLeave(el, () => {
-        entry.cleanup();
-        entries.delete(key);
-      });else {
-        entry.cleanup();
-        entries.delete(key);
-      }
-    }
-  };
-  /** Mount new items and return the list of newly created entries. */
-  const mountNewItems = (items, container) => {
-    const newEntries = [];
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const key = props.keyFn(item, i);
-      if (entries.has(key)) continue;
-      const itemRef = createRef();
-      const rawVNode = runUntracked(() => props.render(item, i));
-      const entry = {
-        key,
-        ref: itemRef,
-        cleanup: mountChild(typeof rawVNode.type === "string" ? {
-          ...rawVNode,
-          props: {
-            ...rawVNode.props,
-            ref: itemRef
-          }
-        } : rawVNode, container, null),
-        leaving: false
-      };
-      entries.set(key, entry);
-      newEntries.push(entry);
-    }
-    return newEntries;
-  };
-  const startMoveAnimation = el => {
-    requestAnimationFrame(() => {
-      el.classList.add(cls.mv);
-      el.style.transform = "";
-      el.style.transition = "";
-      const done = () => {
-        el.removeEventListener("transitionend", done);
-        el.removeEventListener("animationend", done);
-        el.classList.remove(cls.mv);
-      };
-      el.addEventListener("transitionend", done, {
-        once: true
-      });
-      el.addEventListener("animationend", done, {
-        once: true
-      });
-    });
-  };
-  const flipEntry = (entry, oldPos) => {
-    if (!entry.ref.current) return;
-    const newPos = entry.ref.current.getBoundingClientRect();
-    const dx = oldPos.left - newPos.left;
-    const dy = oldPos.top - newPos.top;
-    if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
-    const el = entry.ref.current;
-    el.style.transform = `translate(${dx}px, ${dy}px)`;
-    el.style.transition = "none";
-    startMoveAnimation(el);
-  };
-  /** Apply FLIP move animations for items that shifted position. */
-  const applyFlipMoves = oldPositions => {
-    requestAnimationFrame(() => {
-      for (const [key, entry] of entries) {
-        if (entry.leaving) continue;
-        const oldPos = oldPositions.get(key);
-        if (!oldPos) continue;
-        flipEntry(entry, oldPos);
-      }
-    });
-  };
-  const recordOldPositions = () => {
-    const oldPositions = /* @__PURE__ */new Map();
-    for (const [key, entry] of entries) if (!entry.leaving && entry.ref.current) oldPositions.set(key, entry.ref.current.getBoundingClientRect());
-    return oldPositions;
-  };
-  const reorderEntries = (items, container) => {
-    for (let i = 0; i < items.length; i++) {
-      const key = props.keyFn(items[i], i);
-      const entry = entries.get(key);
-      if (!entry || entry.leaving || !entry.ref.current) continue;
-      container.appendChild(entry.ref.current);
-    }
-  };
-  const animateNewEntries = newEntries => {
-    for (const entry of newEntries) queueMicrotask(() => {
-      if (entry.ref.current) applyEnter(entry.ref.current);
-    });
-  };
-  const e = effect(() => {
-    if (!ready()) return;
-    const container = containerRef.current;
-    if (!container) return;
-    const items = props.items();
-    const newKeys = new Set(items.map((item, i) => props.keyFn(item, i)));
-    const isFirst = firstRun;
-    firstRun = false;
-    const oldPositions = recordOldPositions();
-    processLeaves(newKeys);
-    const newEntries = mountNewItems(items, container);
-    reorderEntries(items, container);
-    if (!isFirst || props.appear) animateNewEntries(newEntries);
-    if (!isFirst && oldPositions.size > 0) applyFlipMoves(oldPositions);
-  });
-  onMount(() => {
-    ready.set(true);
-  });
-  onUnmount(() => {
-    e.dispose();
-    for (const entry of entries.values()) entry.cleanup();
-    entries.clear();
-  });
-  return h(tag, {
-    ref: containerRef
-  });
-}
-
+ * TransitionGroup — animates a keyed reactive list with CSS enter/leave and
+ * FLIP move animations.
+ *
+ * Class lifecycle:
+ *   Enter: {name}-enter-from → {name}-enter-active + {name}-enter-to → cleanup
+ *   Leave: {name}-leave-from → {name}-leave-active + {name}-leave-to → item removed
+ *   Move:  {name}-move (applied when an item shifts position)
+ *
+ * @example
+ * const items = signal([{ id: 1 }, { id: 2 }])
+ *
+ * h(TransitionGroup, {
+ *   tag: "ul",
+ *   name: "list",
+ *   items,
+ *   keyFn: (item) => item.id,
+ *   render: (item) => h("li", { class: "item" }, item.id),
+ * })
+ *
+ * // CSS:
+ * // .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(-10px); }
+ * // .list-enter-active, .list-leave-active { transition: all 300ms ease; }
+ * // .list-move { transition: transform 300ms ease; }
+ */
+declare function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VNodeChild;
 //#endregion
-//#region src/index.ts
-
+//#region src/index.d.ts
 /**
-* Mount a VNode tree into a container element.
-* Clears the container first, then mounts the given child.
-* Returns an `unmount` function that removes everything and disposes effects.
-*
-* @example
-* const unmount = mount(h("div", null, "Hello Pyreon"), document.getElementById("app")!)
-*/
-function mount(root, container) {
-  if (__DEV__ && container == null) throw new Error("[pyreon] mount() called with a null/undefined container. Make sure the element exists in the DOM, e.g. document.getElementById(\"app\")");
-  installDevTools();
-  setupDelegation(container);
-  container.innerHTML = "";
-  return mountChild(root, container, null);
-}
+ * Mount a VNode tree into a container element.
+ * Clears the container first, then mounts the given child.
+ * Returns an `unmount` function that removes everything and disposes effects.
+ *
+ * @example
+ * const unmount = mount(h("div", null, "Hello Pyreon"), document.getElementById("app")!)
+ */
+declare function mount(root: VNodeChild, container: Element): () => void;
 /** Alias for `mount` */
-
+declare const render: typeof mount;
 //#endregion
-export { DELEGATED_EVENTS, KeepAlive, Transition, TransitionGroup, _bindDirect, _bindText, _tpl, applyProp, applyProps, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, render, sanitizeHtml, setSanitizer, setupDelegation };
-//# sourceMappingURL=index.d.ts.map
+export { DELEGATED_EVENTS, type DevtoolsComponentEntry, type Directive, KeepAlive, type KeepAliveProps, type PyreonDevtools, type SanitizeFn, Transition, TransitionGroup, type TransitionGroupProps, type TransitionProps, _bindDirect, _bindText, _tpl, applyProp, applyProps, createTemplate, delegatedPropName, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, render, sanitizeHtml, setSanitizer, setupDelegation };
+//# sourceMappingURL=index2.d.ts.map