@pyreon/runtime-dom 0.1.0

package/lib/types/index.d.ts

@@ -0,0 +1,1845 @@
+import { EMPTY_PROPS, ForSymbol, Fragment, PortalSymbol, createRef, dispatchToErrorBoundary, h, onMount, onUnmount, propagateError, reportError, runWithHooks } from "@pyreon/core";
+import { batch, effect, effectScope, renderEffect, runUntracked, setCurrentScope, signal } from "@pyreon/reactivity";
+
+//#region src/hydration-debug.ts
+/**
+* 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()
+*/
+
+function enableHydrationWarnings() {
+  _enabled = true;
+}
+function disableHydrationWarnings() {
+  _enabled = false;
+}
+/**
+* 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}`);
+}
+
+//#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
+
+/**
+* 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 warnDuplicateKeys = (seen, key) => {
+    if (!__DEV__$4 || !seen) return;
+    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);
+      warnDuplicateKeys(_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]);
+      warnDuplicateKeys(_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);
+  };
+}
+/**
+* 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
+
+/**
+* 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;
+}
+/**
+* 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);
+}
+/**
+* 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 cleanup = null;
+  for (const key in props) {
+    if (key === "key" || key === "ref") continue;
+    const c = applyProp(el, key, props[key]);
+    if (c) if (!cleanup) cleanup = c;else {
+      const prev = cleanup;
+      cleanup = () => {
+        prev();
+        c();
+      };
+    }
+  }
+  return cleanup;
+}
+/**
+* Apply a single prop.
+*
+* - `onXxx` → addEventListener
+* - `() => value` (non-event function) → reactive via effect
+* - anything else → static attribute / DOM property
+*/
+function applyProp(el, key, value) {
+  if (EVENT_RE.test(key)) {
+    const eventName = key[2]?.toLowerCase() + key.slice(3);
+    const handler = value;
+    const batched = e => batch(() => handler(e));
+    el.addEventListener(eventName, batched);
+    return () => el.removeEventListener(eventName, batched);
+  }
+  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") Object.assign(el.style, value);
+}
+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));
+}
+
+//#endregion
+//#region src/mount.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) return noop$1;
+    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);
+  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 && typeof ref === "object") 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" && !("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 && node.data.trim() === "") {
+      node = node.nextSibling;
+      continue;
+    }
+    return node;
+  }
+  return null;
+}
+/** Advance past a node, skipping whitespace-only text and comments */
+function nextReal(node) {
+  return firstReal(node.nextSibling);
+}
+/**
+* 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;
+    const e = effect(() => {
+      const v = child();
+      textNode.data = v == null ? "" : String(v);
+    });
+    return [() => e.dispose(), 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 && typeof ref === "object") 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") {
+  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];
+}
+/**
+* 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) {
+  const [cleanup] = hydrateChild(vnode, firstReal(container.firstChild), container, null);
+  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;
+    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"
+  });
+}
+
+//#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)
+    };
+  };
+}
+/**
+* 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)
+  };
+}
+
+//#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
+      }
+    };
+  };
+}
+
+//#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
+  });
+}
+
+//#endregion
+//#region src/index.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();
+  container.innerHTML = "";
+  return mountChild(root, container, null);
+}
+/** Alias for `mount` */
+
+//#endregion
+export { KeepAlive, Transition, TransitionGroup, _tpl, applyProp, applyProps, createTemplate, disableHydrationWarnings, enableHydrationWarnings, hydrateRoot, mount, mountChild, render, sanitizeHtml, setSanitizer };
+//# sourceMappingURL=index.d.ts.map