sibujs 4.14.0 → 4.15.0

package/dist/index.cjs

@@ -135,6 +135,7 @@ __export(index_exports, {
   lazyIsland: () => lazyIsland,
   legend: () => legend,
   li: () => li,
+  lifecycleScope: () => lifecycleScope,
   line: () => line,
   linearGradient: () => linearGradient,
   link: () => link,
@@ -168,6 +169,7 @@ __export(index_exports, {
   param: () => param,
   path: () => path,
   pattern: () => pattern,
+  pendingContent: () => pendingContent,
   picture: () => picture,
   polygon: () => polygon,
   polyline: () => polyline,
@@ -194,6 +196,7 @@ __export(index_exports, {
   runInSSRContext: () => runInSSRContext,
   s: () => s,
   samp: () => samp,
+  scopeOwner: () => scopeOwner,
   script: () => script,
   section: () => section,
   select: () => select,
@@ -202,7 +205,7 @@ __export(index_exports, {
   setRuntimeErrorHandler: () => setRuntimeErrorHandler,
   show: () => show,
   signal: () => signal,
-  slot: () => slot2,
+  slot: () => slot3,
   small: () => small,
   source: () => source,
   span: () => span,
@@ -360,6 +363,12 @@ function reportError(error, context2) {
   });
 }
 
+// src/utils/globalSingleton.ts
+function globalSingleton(key, create) {
+  const g2 = globalThis;
+  return g2[key] ?? (g2[key] = create());
+}
+
 // src/core/dev.ts
 var DEV = typeof __SIBU_DEV__ !== "undefined" ? !!__SIBU_DEV__ : typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
   // safe default: off in browser, on in test/dev Node
@@ -460,7 +469,12 @@ function holdHydration(sessions, entry) {
 }
 
 // src/core/rendering/dispose.ts
-var elementDisposers = /* @__PURE__ */ new WeakMap();
+var state2 = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.disposers.v1"), () => ({
+  disposers: /* @__PURE__ */ new WeakMap(),
+  captures: [],
+  bindings: { count: 0 }
+}));
+var elementDisposers = state2.disposers;
 var MAX_DRAIN_TEARDOWNS = 1e4;
 function reportDrainRunaway(label2, executed, remaining) {
   if (typeof console === "undefined") return;
@@ -469,13 +483,13 @@ function reportDrainRunaway(label2, executed, remaining) {
     { executed, remaining }
   );
 }
-var activeBindingCount = 0;
+var bindings = state2.bindings;
 function resolveCapture(capture) {
   let frame = capture;
   while (frame?.closed) frame = frame.forwardTo;
   return frame ?? null;
 }
-var registrationCaptures = [];
+var registrationCaptures = state2.captures;
 function currentDisposerCapture() {
   return resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
 }
@@ -494,7 +508,7 @@ function registerDisposer(node, teardown) {
     elementDisposers.set(node, disposers);
   }
   disposers.push(teardown);
-  if (DEV) activeBindingCount++;
+  if (DEV) bindings.count++;
   const capture = resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
   if (capture) capture.entries.push([node, teardown]);
 }
@@ -547,7 +561,7 @@ function unregisterDisposer(node, teardown) {
   const index = disposers.indexOf(teardown);
   if (index === -1) return false;
   disposers.splice(index, 1);
-  if (DEV) activeBindingCount--;
+  if (DEV) bindings.count--;
   if (disposers.length === 0) elementDisposers.delete(node);
   return true;
 }
@@ -571,17 +585,17 @@ function disposeNodeOwn(node) {
   let executed = 0;
   let runaway = false;
   while (!runaway) {
-    const pending = elementDisposers.get(node);
-    if (!pending || pending.length === 0) break;
-    const snapshot = pending.slice();
+    const pending2 = elementDisposers.get(node);
+    if (!pending2 || pending2.length === 0) break;
+    const snapshot = pending2.slice();
     elementDisposers.delete(node);
-    if (DEV) activeBindingCount -= snapshot.length;
+    if (DEV) bindings.count -= snapshot.length;
     for (let i2 = 0; i2 < snapshot.length; i2++) {
       if (executed >= MAX_DRAIN_TEARDOWNS) {
         const rest = snapshot.slice(i2);
         const added = elementDisposers.get(node);
         elementDisposers.set(node, added ? rest.concat(added) : rest);
-        if (DEV) activeBindingCount += rest.length;
+        if (DEV) bindings.count += rest.length;
         reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
         runaway = true;
         break;
@@ -620,14 +634,51 @@ function replaceChildrenSafely(parent, ...next) {
   }
   parent.replaceChildren(...next);
 }
+function stageReplaceChildren(parent, next) {
+  const done = /* @__PURE__ */ new Set();
+  const adopted = () => {
+    if (!isHydrating() || next.length === 0 || next[0] !== parent.firstChild) return false;
+    for (let i2 = 1; i2 < next.length; i2++) if (next[i2 - 1].nextSibling !== next[i2]) return false;
+    return true;
+  };
+  const outgoing = () => {
+    if (adopted()) {
+      const out = [];
+      for (let n = next[next.length - 1].nextSibling; n !== null; n = n.nextSibling) out.push(n);
+      return out;
+    }
+    for (let i2 = 0; i2 < next.length; i2++) next[i2].parentNode?.removeChild(next[i2]);
+    return Array.from(parent.childNodes);
+  };
+  return {
+    teardown: () => {
+      let ran = false;
+      for (const node of outgoing()) {
+        if (done.has(node)) continue;
+        done.add(node);
+        ran = true;
+        dispose(node);
+      }
+      return ran;
+    },
+    insert: () => {
+      if (!adopted()) {
+        parent.replaceChildren(...next);
+        return;
+      }
+      const last = next[next.length - 1];
+      while (last.nextSibling) parent.removeChild(last.nextSibling);
+    }
+  };
+}
 function checkLeaks(warnThreshold = 0) {
   if (!DEV) return 0;
-  if (warnThreshold > 0 && activeBindingCount > warnThreshold) {
+  if (warnThreshold > 0 && bindings.count > warnThreshold) {
     devWarn(
-      `checkLeaks: ${activeBindingCount} active DOM bindings detected. Expected \u2264${warnThreshold}. This may indicate a component was removed from the DOM without calling dispose().`
+      `checkLeaks: ${bindings.count} active DOM bindings detected. Expected \u2264${warnThreshold}. This may indicate a component was removed from the DOM without calling dispose().`
     );
   }
-  return activeBindingCount;
+  return bindings.count;
 }
 
 // src/utils/sanitize.ts
@@ -1228,8 +1279,8 @@ function commitSafeAttribute(el, name, value, options) {
     else el.removeAttribute(name);
     return false;
   }
-  const pending = value == null || value === false ? null : value === true ? "" : String(value);
-  const refusal = contextualAttributeRefusal(el, name, pending, options.reactive ? "reactive" : "runtime");
+  const pending2 = value == null || value === false ? null : value === true ? "" : String(value);
+  const refusal = contextualAttributeRefusal(el, name, pending2, options.reactive ? "reactive" : "runtime");
   if (refusal !== ContextualRefusal.None) {
     warnContextualRefusal(options.label ?? "setSafeAttribute", name, refusal);
     if (ns) el.removeAttributeNS(ns, localName);
@@ -1469,6 +1520,201 @@ function bindOwnerScope(fn) {
   return (...args) => runWithOwnerScope(scope, () => fn(...args));
 }
 var currentStructOwner = null;
+var frozenOwners = 0;
+var ACTIVE = 0;
+var PAUSED = 1;
+var ENDED = 2;
+var NOOP = () => {
+};
+var skippedWhileHeld = /* @__PURE__ */ new Set();
+var waiters = /* @__PURE__ */ new Set();
+var heldRoots = /* @__PURE__ */ new Set();
+function ownerState(tok) {
+  let state4 = ACTIVE;
+  for (let t = tok; t !== null; ) {
+    const o = t.sub;
+    if (o === null) return ENDED;
+    if (o._frozen === true) state4 = PAUSED;
+    t = o._owner ?? null;
+  }
+  return state4;
+}
+var endWatchers = /* @__PURE__ */ new Set();
+var stateWatchers = /* @__PURE__ */ new Set();
+var stateCheckQueued = false;
+function queueStateCheck() {
+  if (stateCheckQueued || stateWatchers.size === 0) return;
+  stateCheckQueued = true;
+  queueMicrotask(() => {
+    stateCheckQueued = false;
+    for (const watcher of [...stateWatchers]) {
+      if (!stateWatchers.has(watcher)) continue;
+      const state4 = watcher.check.state();
+      if (state4 === ENDED) stateWatchers.delete(watcher);
+      if (state4 === ENDED || state4 === watcher.last) continue;
+      watcher.last = state4;
+      try {
+        watcher.listener(state4);
+      } catch (err) {
+        reportError(err, { phase: "effect" });
+      }
+    }
+  });
+}
+var ALWAYS_ACTIVE = Object.assign(() => false, {
+  state: () => ACTIVE,
+  wait: (onActive) => {
+    onActive();
+    return NOOP;
+  },
+  onEnd: () => NOOP,
+  run: (fn) => fn(),
+  onChange: () => NOOP,
+  within: () => false
+});
+function captureFrozen() {
+  const tok = currentStructOwner;
+  if (tok === null) return ALWAYS_ACTIVE;
+  const state4 = () => ownerState(tok);
+  const check = Object.assign(() => state4() !== ACTIVE, {
+    state: state4,
+    wait: (onActive, onEnd) => {
+      const now2 = state4();
+      if (now2 !== PAUSED) {
+        (now2 === ACTIVE ? onActive : onEnd)();
+        return NOOP;
+      }
+      const waiter = { check, onActive, onEnd };
+      waiters.add(waiter);
+      return () => {
+        waiters.delete(waiter);
+      };
+    },
+    onEnd: (onEnd) => {
+      if (state4() === ENDED) {
+        onEnd();
+        return NOOP;
+      }
+      const watcher = { check, onActive: NOOP, onEnd };
+      endWatchers.add(watcher);
+      return () => {
+        endWatchers.delete(watcher);
+      };
+    },
+    run: (fn) => {
+      const prev = currentStructOwner;
+      currentStructOwner = tok.sub === null ? null : tok;
+      try {
+        return fn();
+      } finally {
+        currentStructOwner = prev;
+      }
+    },
+    onChange: (listener) => {
+      const last = state4();
+      if (last === ENDED) return NOOP;
+      const watcher = { check, last, listener };
+      stateWatchers.add(watcher);
+      return () => {
+        stateWatchers.delete(watcher);
+      };
+    },
+    within: (owner) => {
+      const target = owner.run(() => currentStructOwner);
+      if (target === null) return false;
+      for (let t = tok; t !== null; ) {
+        if (t === target) return true;
+        const o = t.sub;
+        if (o === null) return false;
+        t = o._owner ?? null;
+      }
+      return false;
+    }
+  });
+  return check;
+}
+function holdSubtree(root) {
+  heldRoots.add(root);
+  return () => {
+    if (heldRoots.delete(root)) settleHeld();
+  };
+}
+function isHeld(sub2) {
+  if (frozenOwners !== 0 && hasFrozenOwner(sub2)) return true;
+  if (heldRoots.size !== 0) {
+    const node = sub2._errorNode;
+    if (node != null) {
+      for (const root of heldRoots) if (root.contains(node)) return true;
+    }
+  }
+  return false;
+}
+function notifyEnded() {
+  for (const watcher of stateWatchers) if (watcher.check.state() === ENDED) stateWatchers.delete(watcher);
+  let ended = null;
+  for (const watcher of endWatchers) {
+    if (watcher.check.state() !== ENDED) continue;
+    endWatchers.delete(watcher);
+    (ended ?? (ended = [])).push(watcher);
+  }
+  if (ended === null) return;
+  for (const watcher of ended) {
+    try {
+      watcher.onEnd();
+    } catch (err) {
+      reportError(err, { phase: "cleanup" });
+    }
+  }
+}
+function dropReleasedSkipped() {
+  for (const sub2 of skippedWhileHeld) {
+    if (sub2._disposed === true || sub2.depsHead == null) skippedWhileHeld.delete(sub2);
+  }
+}
+function settleHeld() {
+  for (const sub2 of skippedWhileHeld) {
+    if (sub2._disposed === true) skippedWhileHeld.delete(sub2);
+    else if (!isHeld(sub2)) {
+      skippedWhileHeld.delete(sub2);
+      if (!pendingSet.has(sub2)) {
+        pendingSet.add(sub2);
+        pendingQueue.push(sub2);
+      }
+    }
+  }
+  if (frozenOwners === 0 && heldRoots.size === 0) skippedWhileHeld.clear();
+  let ready = null;
+  for (const waiter of waiters) {
+    if (waiter.check.state() === PAUSED) continue;
+    waiters.delete(waiter);
+    (ready ?? (ready = [])).push(waiter);
+  }
+  if (ready !== null) {
+    const settle = ready;
+    queueMicrotask(() => {
+      for (const waiter of settle) {
+        const state4 = waiter.check.state();
+        if (state4 === PAUSED) waiters.add(waiter);
+        else
+          try {
+            (state4 === ACTIVE ? waiter.onActive : waiter.onEnd)();
+          } catch (err) {
+            reportError(err, { phase: "effect" });
+          }
+      }
+    });
+  }
+  if (pendingQueue.length > 0) drainNotificationQueue();
+}
+function hasFrozenOwner(sub2) {
+  for (let t = sub2._owner ?? null; t !== null; ) {
+    const o = t.sub;
+    if (o === null) return false;
+    if (o._frozen === true) return true;
+    t = o._owner ?? null;
+  }
+  return false;
+}
 var subscriberEpochCounter = 0;
 function retrack(effectFn, subscriber) {
   const prev = currentSubscriber;
@@ -1576,6 +1822,20 @@ function structuralBinding(commit, ownerNode) {
       } finally {
         currentStructOwner = prev;
       }
+    },
+    freeze: () => {
+      const s2 = sub2;
+      if (s2._disposed || s2._frozen) return;
+      s2._frozen = true;
+      frozenOwners++;
+      queueStateCheck();
+    },
+    thaw: () => {
+      if (!sub2._frozen) return;
+      sub2._frozen = false;
+      frozenOwners--;
+      queueStateCheck();
+      settleHeld();
     }
   };
 }
@@ -1604,20 +1864,34 @@ function createBinding(commit, ownerNode, structural) {
   subscriber._errorNode = ownerNode;
   subscriber._tok = null;
   subscriber._owner = null;
+  subscriber._frozen = false;
   if (structural) subscriber._tok = { sub: subscriber };
   try {
     run();
   } catch (err) {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
-    if (subscriber._tok != null) subscriber._tok.sub = null;
+    if (subscriber._tok != null) {
+      subscriber._tok.sub = null;
+      if (endWatchers.size !== 0 || stateWatchers.size !== 0) notifyEnded();
+    }
     cleanup(subscriber);
     throw err;
   }
   subscriber._dispose = () => {
     subscriber._disposed = true;
+    const wasFrozen = subscriber._frozen === true;
+    if (wasFrozen) {
+      subscriber._frozen = false;
+      frozenOwners--;
+    }
     subscriber._errorNode = void 0;
-    if (subscriber._tok != null) subscriber._tok.sub = null;
+    if (subscriber._tok != null) {
+      subscriber._tok.sub = null;
+      if (endWatchers.size !== 0 || stateWatchers.size !== 0) notifyEnded();
+      if (skippedWhileHeld.size !== 0) dropReleasedSkipped();
+      if (wasFrozen || waiters.size !== 0) settleHeld();
+    }
     cleanup(subscriber);
   };
   return subscriber;
@@ -1727,6 +2001,10 @@ function runPendingOwners(sub2) {
   }
 }
 function runQueued(sub2) {
+  if ((frozenOwners !== 0 || heldRoots.size !== 0) && isHeld(sub2)) {
+    skippedWhileHeld.add(sub2);
+    return;
+  }
   if (quarantined.size > 0 && quarantined.has(sub2)) return;
   if (sub2._hasComputedDep === true && !depsChanged(sub2)) return;
   if (tickRepeat(sub2)) {
@@ -1874,7 +2152,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.14.0" : "dev";
+var _runtimeVersion = true ? "4.15.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -1910,6 +2188,8 @@ function resolveReactiveApi() {
     runWithOwnerScope,
     bindOwnerScope,
     structuralBinding,
+    captureFrozen,
+    holdSubtree,
     version: _runtimeVersion
   };
   g2[REGISTRY_KEY] = local;
@@ -1937,6 +2217,22 @@ var getOwnerScope2 = API.getOwnerScope ?? getOwnerScope;
 var runWithOwnerScope2 = API.runWithOwnerScope ?? runWithOwnerScope;
 var bindOwnerScope2 = API.bindOwnerScope ?? bindOwnerScope;
 var structuralBinding2 = API.structuralBinding ?? ((commit, ownerNode) => ({ stop: API.reactiveBinding(commit, ownerNode), run: (fn) => fn() }));
+var captureFrozen2 = API.captureFrozen ?? (() => Object.assign(() => false, {
+  state: () => 0,
+  wait: (onActive) => {
+    onActive();
+    return () => {
+    };
+  },
+  onEnd: () => () => {
+  },
+  run: (fn) => fn(),
+  onChange: () => () => {
+  },
+  within: () => false
+}));
+var holdSubtree2 = API.holdSubtree ?? (() => () => {
+});
 
 // src/reactivity/bindAttribute.ts
 function bindAttribute(el, attr, getter) {
@@ -2065,7 +2361,7 @@ function restoreFocusWithin(snapshot, nodes, where, policy) {
   const active = document.activeElement;
   if (active === snapshot.el) return;
   if (active && active !== document.body && active !== document.documentElement) return;
-  if (snapshot.el.isConnected) {
+  if (snapshot.el.isConnected && !snapshot.el.closest("[inert]")) {
     refocus(snapshot.el, snapshot);
     return;
   }
@@ -2092,141 +2388,475 @@ function restoreFocusWithin(snapshot, nodes, where, policy) {
   });
 }
 
-// src/reactivity/bindChildNode.ts
-function bindChildNode(placeholder, getter) {
-  let lastNodes = [];
-  const scope = captureScope();
-  function commit() {
-    let result;
-    try {
-      result = inScope(scope, getter);
-    } catch (err) {
-      reportError(err, { phase: "binding", name: "bindChildNode", node: placeholder });
-      return;
-    }
-    const focused = captureFocusWithin(lastNodes);
-    if (result == null || typeof result === "boolean") {
-      for (let i2 = 0; i2 < lastNodes.length; i2++) {
-        const node = lastNodes[i2];
-        dispose(node);
-        if (node.parentNode) node.parentNode.removeChild(node);
-      }
-      lastNodes.length = 0;
-      restoreFocusWithin(focused, lastNodes, "bindChildNode");
-      return;
-    }
-    const parent = placeholder.parentNode;
-    if (!parent) {
-      lastNodes.length = 0;
-      return;
-    }
-    let newNodes;
-    if (Array.isArray(result)) {
-      newNodes = [];
-      const seen = /* @__PURE__ */ new Set();
-      for (let i2 = 0; i2 < result.length; i2++) {
-        const item = result[i2];
-        if (item == null || typeof item === "boolean") continue;
-        const node = item instanceof Node ? item : document.createTextNode(String(item));
-        if (seen.has(node)) {
-          if (DEV) devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
-          continue;
-        }
-        seen.add(node);
-        newNodes.push(node);
-      }
-    } else {
-      const node = result instanceof Node ? result : document.createTextNode(String(result));
-      newNodes = [node];
-    }
-    let reused;
-    if (lastNodes.length > 0 && newNodes.length > 0) {
-      const lastSet = new Set(lastNodes);
-      reused = /* @__PURE__ */ new Set();
-      for (let i2 = 0; i2 < newNodes.length; i2++) {
-        if (lastSet.has(newNodes[i2])) reused.add(newNodes[i2]);
-      }
-    }
-    for (let i2 = 0; i2 < lastNodes.length; i2++) {
-      const node = lastNodes[i2];
-      if (reused?.has(node)) continue;
-      dispose(node);
-      if (node.parentNode) node.parentNode.removeChild(node);
-    }
-    let prev = placeholder;
-    for (let i2 = 0; i2 < newNodes.length; i2++) {
-      const node = newNodes[i2];
-      if (prev.nextSibling !== node) {
-        parent.insertBefore(node, prev.nextSibling);
+// src/core/rendering/streamBoundary.ts
+var _a2;
+var slot2 = globalThis[_a2 = /* @__PURE__ */ Symbol.for("sibujs.streamBoundary.v1")] ?? (globalThis[_a2] = { hook: null, current: null });
+function openBoundary(container) {
+  return slot2.hook ? slot2.hook(container) : null;
+}
+function currentBoundary() {
+  return slot2.current;
+}
+
+// src/core/ssr-context.ts
+var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
+function detectSSRShared() {
+  let detected = null;
+  try {
+    if (typeof process !== "undefined" && process.versions && process.versions.node) {
+      let mod = null;
+      const getBuiltin = process.getBuiltinModule;
+      if (typeof getBuiltin === "function") {
+        mod = getBuiltin("node:async_hooks");
+      } else if (typeof require === "function") {
+        mod = require("async_hooks");
       }
-      prev = node;
+      if (mod) detected = new mod.AsyncLocalStorage();
     }
-    lastNodes = newNodes;
-    restoreFocusWithin(focused, newNodes, "bindChildNode");
+    const globalAls = globalThis.AsyncLocalStorage;
+    if (!detected && typeof globalAls === "function") detected = new globalAls();
+  } catch {
+    detected = null;
   }
-  return reactiveBinding2(commit, placeholder, true);
+  return {
+    als: detected,
+    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
+    fallbackDepth: 0
+  };
 }
-
-// src/core/rendering/requireDocument.ts
-function noDocument() {
-  throw new Error(
-    "[SibuJS] renderToString needs a DOM: register happy-dom or jsdom globals first." + (DEV ? ' There is no global `document`, and SibuJS builds live DOM nodes, on the server too. For example: import { GlobalRegistrator } from "@happy-dom/global-registrator"; GlobalRegistrator.register(); See SSR in AGENTS.md \xA710.' : "")
+var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
+var als = _shared.als;
+var fallbackStore = _shared.fallbackStore;
+_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
+var _alsWarned = false;
+function warnMissingAsyncLocalStorage() {
+  if (_alsWarned || als) return;
+  const isNode = typeof process !== "undefined" && !!process.versions?.node;
+  if (!isNode) return;
+  _alsWarned = true;
+  const version = process.versions.node;
+  devWarn(
+    `SSR request isolation is UNAVAILABLE on this runtime (Node ${version}). AsyncLocalStorage could not be loaded, so concurrent requests share one SSR store: request state and the query cache can bleed between them. Node >= 22.3 is required for isolated SSR under ESM; the CommonJS build works on older versions. A fully synchronous render is unaffected.`
   );
 }
-function requireDocument() {
-  if (typeof document === "undefined") noDocument();
+function getSSRStore() {
+  if (als) {
+    const s2 = als.getStore();
+    if (s2) return s2;
+  }
+  return fallbackStore;
 }
-
-// src/core/rendering/tagFactory.ts
-var SVG_NS3 = "http://www.w3.org/2000/svg";
-var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
-  "config",
-  "location",
-  "history",
-  "document",
-  "window",
-  "navigator",
-  "name",
-  "top",
-  "parent",
-  "self",
-  "frames"
-]);
-var warnedLoneStrings = /* @__PURE__ */ new Set();
-var MAX_WARNED_LONE_STRINGS = 100;
-var loneStringCapAnnounced = false;
-var kebabCache = /* @__PURE__ */ new Map();
-function toKebab(prop) {
-  let cached = kebabCache.get(prop);
-  if (cached !== void 0) return cached;
-  cached = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-  kebabCache.set(prop, cached);
-  return cached;
+function getRequestStore() {
+  if (als) return als.getStore() ?? null;
+  return _shared.fallbackDepth > 0 ? fallbackStore : null;
 }
-function applyStyle(el, style2) {
-  if (typeof style2 === "function") {
-    const getter = style2;
-    let written = [];
-    let wroteString = false;
-    const teardown = reactiveBinding2(() => {
-      const value = getter();
-      if (value === null || typeof value !== "object") {
-        written = [];
-        wroteString = true;
-        el.setAttribute("style", sanitizeStyleAttribute(String(value), { element: el }));
-        return;
-      }
-      const decl = el.style;
-      if (wroteString) {
-        el.removeAttribute("style");
-        wroteString = false;
-      }
-      const next = [];
-      for (const prop in value) {
+function isSSR() {
+  return getSSRStore().ssr;
+}
+function getRequestScopedCache(name) {
+  if (!isSSR()) return null;
+  const store2 = getSSRStore();
+  const caches = store2.caches ?? (store2.caches = /* @__PURE__ */ new Map());
+  let c = caches.get(name);
+  if (!c) {
+    c = /* @__PURE__ */ new Map();
+    caches.set(name, c);
+  }
+  return c;
+}
+var PRERENDER_HOST = /* @__PURE__ */ Symbol.for("sibujs.prerender.v1");
+function isServer() {
+  return getSSRStore().ssr || globalThis[PRERENDER_HOST] !== void 0;
+}
+function isClient() {
+  return !isServer();
+}
+function enableSSR() {
+  getSSRStore().ssr = true;
+}
+function disableSSR() {
+  getSSRStore().ssr = false;
+}
+function runInSSRContext(fn) {
+  const store2 = {
+    ssr: true,
+    suspenseIdCounter: 0,
+    idCounter: 0,
+    locale: void 0,
+    pending: /* @__PURE__ */ new Set(),
+    wake: null
+  };
+  if (als) {
+    return als.run(store2, fn);
+  }
+  warnMissingAsyncLocalStorage();
+  const prev = { ...fallbackStore };
+  Object.assign(fallbackStore, store2);
+  _shared.fallbackDepth++;
+  try {
+    return fn();
+  } finally {
+    _shared.fallbackDepth--;
+    for (const key of Object.keys(fallbackStore)) {
+      if (!(key in prev)) delete fallbackStore[key];
+    }
+    Object.assign(fallbackStore, prev);
+  }
+}
+function trackPending(promise, label2, hydration = true) {
+  const store2 = getRequestStore();
+  const pending2 = store2?.pending;
+  const sessions = pending2 || !hydration ? [] : hydrationOwners();
+  if (!pending2 && sessions.length === 0) return promise;
+  const entry = { label: label2, since: Date.now(), boundary: currentBoundary() ?? void 0 };
+  pending2?.add(entry);
+  const release = holdHydration(sessions, entry);
+  const done = () => {
+    pending2?.delete(entry);
+    store2?.wake?.();
+    release();
+  };
+  try {
+    Promise.resolve(promise).then(done, done);
+  } catch {
+    done();
+  }
+  return promise;
+}
+function withSSR(fn) {
+  const store2 = getSSRStore();
+  const wasSSR = store2.ssr;
+  store2.ssr = true;
+  try {
+    return fn();
+  } finally {
+    if (!wasSSR) store2.ssr = false;
+  }
+}
+
+// src/core/rendering/range.ts
+var state3 = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.ranges.v1"), () => ({
+  ends: /* @__PURE__ */ new WeakMap(),
+  pending: /* @__PURE__ */ new WeakMap(),
+  registrations: /* @__PURE__ */ new Set(),
+  listeners: /* @__PURE__ */ new Set(),
+  notice: { queued: false, batch: [] }
+}));
+var ends = state3.ends;
+function registerRange(start, last) {
+  ends.set(start, last);
+}
+var pending = state3.pending;
+var NOTHING = () => {
+};
+function queueFirstRender(anchor, render, held) {
+  if (held) {
+    const unguarded = render;
+    render = () => {
+      held.wait(unguarded, NOTHING);
+    };
+  }
+  pending.set(anchor, true);
+  queueMicrotask(() => {
+    if (pending.get(anchor) !== true) return;
+    if (anchor.parentNode === null) {
+      pending.set(anchor, render);
+      return;
+    }
+    pending.delete(anchor);
+    render();
+  });
+}
+function resumePending(nodes) {
+  for (const node of nodes) {
+    const render = pending.get(node);
+    if (typeof render !== "function") continue;
+    pending.delete(node);
+    render();
+  }
+}
+function anyPending(nodes) {
+  for (const node of nodes) if (pending.has(node)) return true;
+  return false;
+}
+var registrations = state3.registrations;
+var loadListeners = state3.listeners;
+var notice = state3.notice;
+function notifyLoad(settled) {
+  if (loadListeners.size === 0) return;
+  if (settled !== null) notice.batch.push(settled);
+  if (notice.queued) return;
+  notice.queued = true;
+  queueMicrotask(() => {
+    notice.queued = false;
+    const batch2 = notice.batch;
+    notice.batch = [];
+    for (const listener of [...loadListeners]) listener(batch2);
+  });
+}
+function beginPending(at, held) {
+  const entry = { at, held, settled: false, cancelled: false, committed: null };
+  registrations.add(entry);
+  notifyLoad(null);
+  const settle = (cancelled, committed) => {
+    if (entry.settled) return;
+    entry.settled = true;
+    entry.cancelled = cancelled;
+    entry.committed = committed;
+    registrations.delete(entry);
+    notifyLoad(entry);
+  };
+  return {
+    entry,
+    done: (committed) => settle(false, committed ?? null),
+    cancel: () => settle(true, null)
+  };
+}
+var INERT = { done: NOTHING, cancel: NOTHING };
+function beginLoading(anchor) {
+  if (isServer()) return INERT;
+  const { done, cancel } = beginPending(anchor, null);
+  return { done: () => done(), cancel };
+}
+function pendingWithin(entry, nodes, owner) {
+  const at = entry.at;
+  if (at !== null) {
+    for (let i2 = 0; i2 < nodes.length; i2++) if (nodes[i2] === at || nodes[i2].contains(at)) return true;
+    return false;
+  }
+  return owner !== null && entry.held?.within(owner) === true;
+}
+function loadingWithin(nodes, owner) {
+  const found = [];
+  if (registrations.size === 0) return found;
+  for (const entry of registrations) if (pendingWithin(entry, nodes, owner)) found.push(entry);
+  return found;
+}
+function settledContent(entry) {
+  if (!entry.settled || entry.cancelled) return [];
+  let nodes;
+  if (entry.committed !== null) nodes = entry.committed;
+  else if (entry.at === null) return [];
+  else if (entry.at.nodeType === 1) nodes = Array.from(entry.at.childNodes);
+  else nodes = collectRange([entry.at]);
+  const out = [];
+  for (let i2 = 0; i2 < nodes.length; i2++) if (nodes[i2].nodeType === 1) out.push(nodes[i2]);
+  return out;
+}
+function onLoaded(listener) {
+  loadListeners.add(listener);
+  return () => {
+    loadListeners.delete(listener);
+  };
+}
+function settledSinceNotify() {
+  return notice.batch;
+}
+function hasRange(node) {
+  return ends.has(node);
+}
+function registerNodesRange(anchor, nodes) {
+  registerRange(anchor, () => {
+    const parent = anchor.parentNode;
+    const wanted = nodes().filter((n) => n !== null && n.parentNode === parent);
+    let last = null;
+    let left = wanted.length;
+    for (let n = anchor.nextSibling; n !== null && left > 0; n = n.nextSibling) {
+      if (wanted.includes(n)) {
+        last = n;
+        left--;
+      }
+    }
+    return last;
+  });
+}
+function rangeEnd(node) {
+  let cur = node;
+  for (let get = ends.get(cur); get !== void 0; get = ends.get(cur)) {
+    const next = get();
+    if (next === null || next === cur || next.parentNode !== node.parentNode) break;
+    cur = next;
+  }
+  return cur;
+}
+function collectRange(starts) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const start of starts) {
+    if (start.parentNode === null) continue;
+    const end = rangeEnd(start);
+    let node = start;
+    let span2 = [start];
+    while (node !== end) {
+      node = node.nextSibling;
+      if (node === null) {
+        span2 = [start];
+        break;
+      }
+      span2.push(node);
+    }
+    for (const n of span2) {
+      if (!seen.has(n)) {
+        seen.add(n);
+        out.push(n);
+      }
+    }
+  }
+  return out;
+}
+
+// src/reactivity/bindChildNode.ts
+function bindChildNode(placeholder, getter, exposeNodes) {
+  let lastNodes = [];
+  const scope = captureScope();
+  function commit() {
+    let result;
+    try {
+      result = inScope(scope, getter);
+    } catch (err) {
+      reportError(err, { phase: "binding", name: "bindChildNode", node: placeholder });
+      return;
+    }
+    const focused = captureFocusWithin(lastNodes);
+    if (result == null || typeof result === "boolean") {
+      for (let i2 = 0; i2 < lastNodes.length; i2++) {
+        const node = lastNodes[i2];
+        dispose(node);
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }
+      lastNodes.length = 0;
+      restoreFocusWithin(focused, lastNodes, "bindChildNode");
+      return;
+    }
+    const parent = placeholder.parentNode;
+    if (!parent) {
+      lastNodes.length = 0;
+      return;
+    }
+    let newNodes;
+    if (Array.isArray(result)) {
+      newNodes = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (let i2 = 0; i2 < result.length; i2++) {
+        const item = result[i2];
+        if (item == null || typeof item === "boolean") continue;
+        const node = item instanceof Node ? item : document.createTextNode(String(item));
+        if (seen.has(node)) {
+          if (DEV) devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
+          continue;
+        }
+        seen.add(node);
+        newNodes.push(node);
+      }
+    } else {
+      const node = result instanceof Node ? result : document.createTextNode(String(result));
+      newNodes = [node];
+    }
+    let reused;
+    if (lastNodes.length > 0 && newNodes.length > 0) {
+      const lastSet = new Set(lastNodes);
+      reused = /* @__PURE__ */ new Set();
+      for (let i2 = 0; i2 < newNodes.length; i2++) {
+        if (lastSet.has(newNodes[i2])) reused.add(newNodes[i2]);
+      }
+    }
+    for (let i2 = 0; i2 < lastNodes.length; i2++) {
+      const node = lastNodes[i2];
+      if (reused?.has(node)) continue;
+      dispose(node);
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
+    let prev = placeholder;
+    for (let i2 = 0; i2 < newNodes.length; i2++) {
+      const node = newNodes[i2];
+      if (prev.nextSibling !== node) {
+        parent.insertBefore(node, prev.nextSibling);
+      }
+      prev = node;
+    }
+    lastNodes = newNodes;
+    restoreFocusWithin(focused, newNodes, "bindChildNode");
+  }
+  if (exposeNodes) {
+    registerRange(placeholder, () => {
+      for (let i2 = lastNodes.length - 1; i2 >= 0; i2--) if (lastNodes[i2].parentNode !== null) return lastNodes[i2];
+      return null;
+    });
+  }
+  return reactiveBinding2(commit, placeholder, true);
+}
+
+// src/utils/styleKey.ts
+var EXCEPTIONS = { cssFloat: "float" };
+var VENDOR_PREFIX = /^(webkit|moz|ms|o)-/;
+var cache = /* @__PURE__ */ new Map();
+var CACHE_MAX = 1e3;
+function styleKeyToProperty(key) {
+  let name = cache.get(key);
+  if (name !== void 0) return name;
+  if (key.startsWith("--")) name = key;
+  else if (Object.hasOwn(EXCEPTIONS, key)) name = EXCEPTIONS[key];
+  else {
+    name = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    if (VENDOR_PREFIX.test(name)) name = `-${name}`;
+  }
+  if (cache.size >= CACHE_MAX) cache.clear();
+  cache.set(key, name);
+  return name;
+}
+
+// src/core/rendering/requireDocument.ts
+function noDocument() {
+  throw new Error(
+    "[SibuJS] renderToString needs a DOM: register happy-dom or jsdom globals first." + (DEV ? ' There is no global `document`, and SibuJS builds live DOM nodes, on the server too. For example: import { GlobalRegistrator } from "@happy-dom/global-registrator"; GlobalRegistrator.register(); See SSR in AGENTS.md \xA710.' : "")
+  );
+}
+function requireDocument() {
+  if (typeof document === "undefined") noDocument();
+}
+
+// src/core/rendering/tagFactory.ts
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
+  "config",
+  "location",
+  "history",
+  "document",
+  "window",
+  "navigator",
+  "name",
+  "top",
+  "parent",
+  "self",
+  "frames"
+]);
+var warnedLoneStrings = /* @__PURE__ */ new Set();
+var MAX_WARNED_LONE_STRINGS = 100;
+var loneStringCapAnnounced = false;
+function applyStyle(el, style2) {
+  if (typeof style2 === "function") {
+    const getter = style2;
+    let written = [];
+    let wroteString = false;
+    const teardown = reactiveBinding2(() => {
+      const value = getter();
+      if (value === null || typeof value !== "object") {
+        written = [];
+        wroteString = true;
+        el.setAttribute("style", sanitizeStyleAttribute(String(value), { element: el }));
+        return;
+      }
+      const decl = el.style;
+      if (wroteString) {
+        el.removeAttribute("style");
+        wroteString = false;
+      }
+      const next = [];
+      for (const prop in value) {
         if (!Object.hasOwn(value, prop)) continue;
         const val = value[prop];
         if (val == null) continue;
-        const name = toKebab(prop);
+        const name = styleKeyToProperty(prop);
         next.push(name);
         decl.setProperty(name, sanitizeCSSDeclaration(name, String(val), { element: el }));
       }
@@ -2246,7 +2876,7 @@ function applyStyle(el, style2) {
   for (const prop in style2) {
     if (!Object.hasOwn(style2, prop)) continue;
     const val = style2[prop];
-    const name = toKebab(prop);
+    const name = styleKeyToProperty(prop);
     if (typeof val === "function") {
       const getter = val;
       const teardown = reactiveBinding2(() => {
@@ -2568,7 +3198,7 @@ var details = tagFactory("details");
 var dialog = tagFactory("dialog");
 var menu = tagFactory("menu");
 var summary = tagFactory("summary");
-var slot2 = tagFactory("slot");
+var slot3 = tagFactory("slot");
 var template = tagFactory("template");
 var base = tagFactory("base");
 var link = tagFactory("link");
@@ -2597,152 +3227,63 @@ var marker = tagFactory("marker", SVG_NS3);
 var center = tagFactory("center");
 var font = tagFactory("font");
 var marquee = tagFactory("marquee");
-var customElement = (tagName) => tagFactory(tagName);
-
-// src/core/rendering/streamBoundary.ts
-var _a2;
-var slot3 = globalThis[_a2 = /* @__PURE__ */ Symbol.for("sibujs.streamBoundary.v1")] ?? (globalThis[_a2] = { hook: null, current: null });
-function openBoundary(container) {
-  return slot3.hook ? slot3.hook(container) : null;
-}
-function currentBoundary() {
-  return slot3.current;
-}
-
-// src/core/ssr-context.ts
-var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
-function detectSSRShared() {
-  let detected = null;
-  try {
-    if (typeof process !== "undefined" && process.versions && process.versions.node) {
-      let mod = null;
-      const getBuiltin = process.getBuiltinModule;
-      if (typeof getBuiltin === "function") {
-        mod = getBuiltin("node:async_hooks");
-      } else if (typeof require === "function") {
-        mod = require("async_hooks");
-      }
-      if (mod) detected = new mod.AsyncLocalStorage();
-    }
-    const globalAls = globalThis.AsyncLocalStorage;
-    if (!detected && typeof globalAls === "function") detected = new globalAls();
-  } catch {
-    detected = null;
-  }
-  return {
-    als: detected,
-    fallbackStore: { ssr: false, suspenseIdCounter: 0, locale: void 0 },
-    fallbackDepth: 0
+var customElement = (tagName) => tagFactory(tagName);
+
+// src/core/rendering/heldCommit.ts
+var NOOP2 = () => {
+};
+function commitWhenActive(slot4, c) {
+  let over = false;
+  let unhold = null;
+  let drop = NOOP2;
+  const finish = () => {
+    over = true;
+    if (slot4.cancel === cancel) slot4.cancel = NOOP2;
+    drop();
+    drop = NOOP2;
   };
-}
-var _shared = globalThis[SSR_KEY] ?? (globalThis[SSR_KEY] = detectSSRShared());
-var als = _shared.als;
-var fallbackStore = _shared.fallbackStore;
-_shared.fallbackDepth ?? (_shared.fallbackDepth = 0);
-var _alsWarned = false;
-function warnMissingAsyncLocalStorage() {
-  if (_alsWarned || als) return;
-  const isNode = typeof process !== "undefined" && !!process.versions?.node;
-  if (!isNode) return;
-  _alsWarned = true;
-  const version = process.versions.node;
-  devWarn(
-    `SSR request isolation is UNAVAILABLE on this runtime (Node ${version}). AsyncLocalStorage could not be loaded, so concurrent requests share one SSR store: request state and the query cache can bleed between them. Node >= 22.3 is required for isolated SSR under ESM; the CommonJS build works on older versions. A fully synchronous render is unaffected.`
-  );
-}
-function getSSRStore() {
-  if (als) {
-    const s2 = als.getStore();
-    if (s2) return s2;
-  }
-  return fallbackStore;
-}
-function getRequestStore() {
-  if (als) return als.getStore() ?? null;
-  return _shared.fallbackDepth > 0 ? fallbackStore : null;
-}
-function isSSR() {
-  return getSSRStore().ssr;
-}
-function getRequestScopedCache(name) {
-  if (!isSSR()) return null;
-  const store2 = getSSRStore();
-  const caches = store2.caches ?? (store2.caches = /* @__PURE__ */ new Map());
-  let c = caches.get(name);
-  if (!c) {
-    c = /* @__PURE__ */ new Map();
-    caches.set(name, c);
-  }
-  return c;
-}
-var PRERENDER_HOST = /* @__PURE__ */ Symbol.for("sibujs.prerender.v1");
-function isServer() {
-  return getSSRStore().ssr || globalThis[PRERENDER_HOST] !== void 0;
-}
-function isClient() {
-  return !isServer();
-}
-function enableSSR() {
-  getSSRStore().ssr = true;
-}
-function disableSSR() {
-  getSSRStore().ssr = false;
-}
-function runInSSRContext(fn) {
-  const store2 = {
-    ssr: true,
-    suspenseIdCounter: 0,
-    idCounter: 0,
-    locale: void 0,
-    pending: /* @__PURE__ */ new Set(),
-    wake: null
+  const cancel = () => {
+    if (over) return;
+    finish();
+    const release = unhold;
+    unhold = null;
+    try {
+      c.discard();
+    } finally {
+      release?.();
+    }
   };
-  if (als) {
-    return als.run(store2, fn);
-  }
-  warnMissingAsyncLocalStorage();
-  const prev = { ...fallbackStore };
-  Object.assign(fallbackStore, store2);
-  _shared.fallbackDepth++;
-  try {
-    return fn();
-  } finally {
-    _shared.fallbackDepth--;
-    for (const key of Object.keys(fallbackStore)) {
-      if (!(key in prev)) delete fallbackStore[key];
+  const attempt = () => {
+    drop = NOOP2;
+    let clean = false;
+    while (!over) {
+      const state4 = c.held.state();
+      if (state4 === 2 || c.owned !== void 0 && !c.owned()) {
+        cancel();
+        return;
+      }
+      if (state4 === 1) {
+        if (c.node !== null && unhold === null) unhold = holdSubtree2(c.node);
+        drop = c.held.wait(attempt, attempt);
+        return;
+      }
+      if (unhold !== null) {
+        const release = unhold;
+        unhold = null;
+        release();
+        continue;
+      }
+      if (!clean) {
+        clean = c.teardown?.() !== true;
+        continue;
+      }
+      finish();
+      c.insert();
+      return;
     }
-    Object.assign(fallbackStore, prev);
-  }
-}
-function trackPending(promise, label2, hydration = true) {
-  const store2 = getRequestStore();
-  const pending = store2?.pending;
-  const sessions = pending || !hydration ? [] : hydrationOwners();
-  if (!pending && sessions.length === 0) return promise;
-  const entry = { label: label2, since: Date.now(), boundary: currentBoundary() ?? void 0 };
-  pending?.add(entry);
-  const release = holdHydration(sessions, entry);
-  const done = () => {
-    pending?.delete(entry);
-    store2?.wake?.();
-    release();
   };
-  try {
-    Promise.resolve(promise).then(done, done);
-  } catch {
-    done();
-  }
-  return promise;
-}
-function withSSR(fn) {
-  const store2 = getSSRStore();
-  const wasSSR = store2.ssr;
-  store2.ssr = true;
-  try {
-    return fn();
-  } finally {
-    if (!wasSSR) store2.ssr = false;
-  }
+  slot4.cancel = cancel;
+  attempt();
 }
 
 // src/core/rendering/lazy.ts
@@ -2768,100 +3309,296 @@ function takePendingError(node) {
   }
   return void 0;
 }
+var NOOP3 = () => {
+};
 function lazy(importFn) {
   let cached = null;
+  const instance = (component) => {
+    const own = structuralBinding2(NOOP3);
+    try {
+      return [withDisposerRollback(() => own.run(component)), own];
+    } catch (err) {
+      own.stop();
+      throw err;
+    }
+  };
+  const ending = (root, own) => root.nodeType === 11 ? () => {
+    disposeNodeOwn(root);
+    own.stop();
+  } : own.stop;
   return function LazyComponent() {
     if (cached && !inAdoptScope()) {
-      return cached();
+      const [root, own] = instance(cached);
+      const type = root?.nodeType;
+      if (type === 11) {
+        const box = div({ class: "sibu-lazy" });
+        registerDisposer(box, ending(root, own));
+        box.appendChild(root);
+        return box;
+      }
+      if (typeof type === "number") registerDisposer(root, own.stop);
+      return root;
     }
     const container = div({ class: "sibu-lazy" });
     const scope = captureScope();
     const boundary = currentBoundary();
-    let disposed = false;
     const loading = inScope(null, () => span("sibu-lazy-loading", "Loading..."));
     if (cached) {
       const loaded = cached;
-      replaceChildrenSafely(container, inScope(scope, () => loaded()));
+      let rendered;
+      try {
+        const [root, own] = instance(() => inScope(scope, () => loaded()));
+        registerDisposer(container, ending(root, own));
+        rendered = root;
+      } catch (err) {
+        dispose(container);
+        throw err;
+      }
+      replaceChildrenSafely(container, rendered);
       return container;
     }
-    trackPending(importFn(), "lazy").then(
-      // The component renders after the import resolves, in the owner scope
-      // of whoever rendered the placeholder.
-      bindOwnerScope2((mod) => {
-        if (disposed) return;
-        cached = mod.default;
-        const component = cached;
-        const build = () => inScope(scope, () => component());
-        const rendered = boundary ? boundary.enter(build) : build();
-        replaceChildrenSafely(container, rendered);
-      })
-    ).catch((err) => {
-      if (disposed) return;
-      const errorObj = err instanceof Error ? err : new Error(String(err));
-      replaceChildrenSafely(
-        container,
-        div({ class: "sibu-lazy-error" }, `Failed to load component: ${errorObj.message}`)
-      );
-      dispatchPropagate(container, errorObj);
-    });
-    if (!(isHydrating() && container.firstChild)) container.appendChild(loading);
+    const held = captureFrozen2();
+    const inOwner = bindOwnerScope2((fn) => fn());
+    const ready = beginLoading(container);
+    let disposed = false;
+    const live = () => !disposed;
+    let owner = null;
+    const waiting = { cancel: NOOP3 };
     registerDisposer(container, () => {
       disposed = true;
+      waiting.cancel();
+      ready.cancel();
+      const end = owner;
+      owner = null;
+      end?.();
     });
+    if (!(isHydrating() && container.firstChild)) container.appendChild(loading);
+    const show2 = (view, release, claim, shown, failed) => {
+      const swap = stageReplaceChildren(container, [view]);
+      commitWhenActive(waiting, {
+        held,
+        node: view,
+        owned: live,
+        teardown: swap.teardown,
+        insert: () => {
+          claim();
+          try {
+            swap.insert();
+          } catch (err) {
+            release();
+            failed(err);
+            return;
+          }
+          if (!disposed) shown();
+        },
+        discard: () => {
+          release();
+          ready.cancel();
+        }
+      });
+    };
+    const later = (fn) => commitWhenActive(waiting, { held, node: null, owned: live, insert: () => inOwner(fn), discard: ready.cancel });
+    const fail = (err) => {
+      if (disposed) return;
+      const error = err instanceof Error ? err : new Error(String(err));
+      const view = div({ class: "sibu-lazy-error" }, `Failed to load component: ${error.message}`);
+      show2(
+        view,
+        () => dispose(view),
+        NOOP3,
+        () => {
+          ready.done();
+          dispatchPropagate(container, error);
+        },
+        (insertError) => {
+          ready.cancel();
+          reportError(insertError, { phase: "render", name: "lazy" });
+        }
+      );
+    };
+    const build = (component) => {
+      if (disposed) return;
+      let rendered;
+      let own;
+      try {
+        const render = () => held.run(() => instance(() => inScope(scope, () => component())));
+        [rendered, own] = boundary ? boundary.enter(render) : render();
+      } catch (err) {
+        fail(err);
+        return;
+      }
+      const end = ending(rendered, own);
+      show2(
+        rendered,
+        () => {
+          if (owner === end) owner = null;
+          own.stop();
+          dispose(rendered);
+        },
+        () => {
+          owner = end;
+        },
+        () => ready.done(),
+        fail
+      );
+    };
+    let imported;
+    try {
+      imported = importFn();
+    } catch (err) {
+      dispose(container);
+      throw err;
+    }
+    trackPending(imported, "lazy").then(
+      (mod) => {
+        if (disposed) return;
+        cached = mod.default;
+        const component = cached;
+        later(() => build(component));
+      },
+      (err) => {
+        if (!disposed) later(() => fail(err));
+      }
+    );
     return container;
   };
 }
 function Suspense({ nodes, fallback }) {
   const container = div({ class: "sibu-suspense" });
   const scope = captureScope();
+  const held = captureFrozen2();
+  const inOwner = bindOwnerScope2((fn) => fn());
   const boundary = openBoundary(container);
-  const commit = (el) => {
-    replaceChildrenSafely(container, el);
-    boundary?.done();
-  };
-  const fallbackEl = inScope(null, fallback);
-  if (isHydrating() && container.firstChild) dispose(fallbackEl);
-  else container.appendChild(fallbackEl);
+  const ready = beginLoading(container);
   let suspenseDisposed = false;
+  const live = () => !suspenseDisposed;
   let observer = null;
   let childEl = null;
+  let contentOwner = null;
+  const endContent = () => {
+    const own = contentOwner;
+    contentOwner = null;
+    own?.stop();
+  };
+  const fallbackOwn = structuralBinding2(NOOP3);
+  let fallbackOwner = fallbackOwn;
+  const endFallback = () => {
+    const own = fallbackOwner;
+    fallbackOwner = null;
+    own?.stop();
+  };
+  const waiting = { cancel: NOOP3 };
   registerDisposer(container, () => {
     suspenseDisposed = true;
+    waiting.cancel();
+    ready.cancel();
     if (observer) {
       observer.disconnect();
       observer = null;
     }
     if (childEl && !container.contains(childEl)) dispose(childEl);
+    endFallback();
+    endContent();
   });
-  const renderContent = bindOwnerScope2(() => {
-    if (suspenseDisposed) return;
-    try {
-      const el = boundary ? boundary.enter(() => inScope(scope, nodes)) : inScope(scope, nodes);
-      childEl = el;
-      if (el.classList.contains("sibu-lazy")) {
-        if (!el.querySelector(".sibu-lazy-loading")) {
-          commit(el);
+  let fallbackEl;
+  try {
+    fallbackEl = inScope(null, () => withDisposerRollback(() => fallbackOwn.run(fallback)));
+  } catch (err) {
+    boundary?.done();
+    dispose(container);
+    throw err;
+  }
+  if (isHydrating() && container.firstChild) {
+    dispose(fallbackEl);
+    endFallback();
+  } else container.appendChild(fallbackEl);
+  const commit = (el) => {
+    const swap = stageReplaceChildren(container, [el]);
+    commitWhenActive(waiting, {
+      held,
+      node: el,
+      owned: live,
+      teardown: () => {
+        if (swap.teardown()) return true;
+        if (fallbackOwner === null) return false;
+        endFallback();
+        return true;
+      },
+      // `el` is the container's content already (`childEl`): disposing the
+      // container from its `connectedCallback`, during the insertion,
+      // disposes it — in the container, or as the orphan `childEl` is.
+      insert: () => {
+        try {
+          swap.insert();
+        } catch (err) {
+          if (childEl === el) childEl = null;
+          dispose(el);
+          endContent();
+          ready.cancel();
+          boundary?.done();
+          dispatchPropagate(container, err instanceof Error ? err : new Error(String(err)));
           return;
         }
-        observer = new MutationObserver(() => {
-          if (suspenseDisposed) return;
-          const loading = el.querySelector(".sibu-lazy-loading");
-          if (!loading) {
-            observer?.disconnect();
-            observer = null;
-            commit(el);
-          }
-        });
-        observer.observe(el, { childList: true, subtree: true });
-      } else {
-        commit(el);
+        boundary?.done();
+        ready.done();
+      },
+      discard: () => {
+        if (childEl === el) childEl = null;
+        dispose(el);
+        endContent();
+        ready.cancel();
       }
+    });
+  };
+  const renderContent = () => {
+    if (suspenseDisposed) return;
+    const own = held.run(() => structuralBinding2(NOOP3));
+    contentOwner = own;
+    let el;
+    try {
+      const build = () => withDisposerRollback(() => own.run(() => inScope(scope, nodes)));
+      el = boundary ? boundary.enter(build) : build();
     } catch (err) {
+      endContent();
       const errorObj = err instanceof Error ? err : new Error(String(err));
+      ready.cancel();
       dispatchPropagate(container, errorObj);
+      return;
+    }
+    childEl = el;
+    if (suspenseDisposed) {
+      childEl = null;
+      dispose(el);
+      return;
+    }
+    if (el.classList.contains("sibu-lazy")) {
+      if (!el.querySelector(".sibu-lazy-loading")) {
+        commit(el);
+        return;
+      }
+      observer = new MutationObserver(() => {
+        if (suspenseDisposed) return;
+        const loading = el.querySelector(".sibu-lazy-loading");
+        if (!loading) {
+          observer?.disconnect();
+          observer = null;
+          commit(el);
+        }
+      });
+      observer.observe(el, { childList: true, subtree: true });
+    } else {
+      commit(el);
     }
+  };
+  queueMicrotask(() => {
+    commitWhenActive(waiting, {
+      held,
+      node: null,
+      owned: live,
+      insert: () => inOwner(renderContent),
+      discard: ready.cancel
+    });
   });
-  queueMicrotask(renderContent);
   return container;
 }
 
@@ -3319,7 +4056,7 @@ var isBatching = API2.isBatching;
 // src/core/signals/signal.ts
 var _g2 = globalThis;
 function signal(initial, options) {
-  const state2 = {
+  const state4 = {
     value: initial,
     __v: 0,
     __sc: 0,
@@ -3332,57 +4069,57 @@ function signal(initial, options) {
   };
   const debugName = DEV ? options?.name : void 0;
   const equalsFn = options?.equals;
-  if (debugName) state2.__name = debugName;
+  if (debugName) state4.__name = debugName;
   function get() {
-    recordDependency2(state2);
-    return state2.value;
+    recordDependency2(state4);
+    return state4.value;
   }
-  get.__signal = state2;
+  get.__signal = state4;
   if (debugName) get.__name = debugName;
   let set;
   if (equalsFn) {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state4.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (equalsFn(prev, newValue)) return;
-      state2.value = newValue;
-      state2.__v++;
+      state4.value = newValue;
+      state4.__v++;
       if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        if (hook) emitDevtools(hook, "signal:update", { signal: state4, name: debugName, oldValue: prev, newValue });
       }
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      if (!enqueueBatchedSignal(state4)) {
+        notifySubscribers2(state4);
       }
     };
   } else if (DEV) {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state4.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state2.value = newValue;
-      state2.__v++;
+      state4.value = newValue;
+      state4.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      if (hook) emitDevtools(hook, "signal:update", { signal: state4, name: debugName, oldValue: prev, newValue });
+      if (!enqueueBatchedSignal(state4)) {
+        notifySubscribers2(state4);
       }
     };
   } else {
     set = (next) => {
-      const prev = state2.value;
+      const prev = state4.value;
       const newValue = typeof next === "function" ? next(prev) : next;
       if (Object.is(newValue, prev)) return;
-      state2.value = newValue;
-      state2.__v++;
-      if (!enqueueBatchedSignal(state2)) {
-        notifySubscribers2(state2);
+      state4.value = newValue;
+      state4.__v++;
+      if (!enqueueBatchedSignal(state4)) {
+        notifySubscribers2(state4);
       }
     };
   }
   if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
+    if (hook) emitDevtools(hook, "signal:create", { signal: state4, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
@@ -4106,8 +4843,8 @@ function ErrorBoundary(optionsOrChildren, maybeChildren) {
     const collected = [];
     let node = walker.currentNode;
     while (node) {
-      const pending = takePendingError(node);
-      if (pending) collected.push(pending);
+      const pending2 = takePendingError(node);
+      if (pending2) collected.push(pending2);
       node = walker.nextNode();
     }
     if (collected.length === 1) {
@@ -4408,6 +5145,202 @@ function setGlobalErrorHandler(handler) {
   globalErrorHandler = handler;
 }
 
+// src/core/rendering/branchTransition.ts
+var HARD_CAP_MS = 5e3;
+function now() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+var SLACK_MS = 50;
+var INSTANT_MS = 1;
+var FALLBACK_EVENTS = ["transitionend", "transitioncancel", "animationend", "animationcancel"];
+function parseList(list, fallback) {
+  return (list?.trim() ? list : fallback).split(",").map((part) => part.trim());
+}
+function parseTimes(list) {
+  return parseList(list, "0s").map((v) => (Number.parseFloat(v) || 0) * (v.endsWith("ms") ? 1 : 1e3));
+}
+function measure(el) {
+  if (typeof getComputedStyle !== "function") return null;
+  const cs = getComputedStyle(el);
+  if (cs.display === "none") return null;
+  const timing = { total: 0, transitions: /* @__PURE__ */ new Map(), animations: /* @__PURE__ */ new Map(), pending: 0 };
+  const expect = (map2, names, durations, delays, iterations) => {
+    for (let i2 = 0; i2 < names.length; i2++) {
+      const duration = durations[i2 % durations.length];
+      if (names[i2] === "none" || duration <= 0) continue;
+      const count = iterations[i2 % iterations.length];
+      const runs = count === "infinite" ? Number.POSITIVE_INFINITY : Number.parseFloat(count) || 1;
+      timing.total = Math.max(timing.total, delays[i2 % delays.length] + duration * runs);
+      map2.set(names[i2], (map2.get(names[i2]) ?? 0) + 1);
+      timing.pending++;
+    }
+  };
+  expect(
+    timing.transitions,
+    parseList(cs.transitionProperty, "all"),
+    parseTimes(cs.transitionDuration),
+    parseTimes(cs.transitionDelay),
+    ["1"]
+  );
+  expect(
+    timing.animations,
+    parseList(cs.animationName, "none"),
+    parseTimes(cs.animationDuration),
+    parseTimes(cs.animationDelay),
+    parseList(cs.animationIterationCount, "1")
+  );
+  return timing.total <= INSTANT_MS ? null : timing;
+}
+function matchEntry(map2, name) {
+  if (typeof name !== "string" || name === "") return map2.keys().next().value;
+  if (map2.has(name)) return name;
+  for (const key of map2.keys()) if (name.startsWith(`${key}-`)) return key;
+  return map2.has("all") ? "all" : void 0;
+}
+function insideAnimating(animating, el) {
+  for (const a2 of animating) if (a2 !== el && a2.contains(el)) return true;
+  return false;
+}
+function runPhase(nodes, cls, custom, maxDuration, onDone, name, open = 0) {
+  const cap = Math.min(typeof maxDuration === "number" && maxDuration >= 0 ? maxDuration : HARD_CAP_MS, HARD_CAP_MS);
+  const elements = [];
+  for (let i2 = 0; i2 < nodes.length; i2++) if (nodes[i2].nodeType === 1) elements.push(nodes[i2]);
+  let finished = false;
+  let timer = null;
+  const cleanups = [];
+  const finish = (complete) => {
+    if (finished) return;
+    finished = true;
+    if (timer !== null) clearTimeout(timer);
+    for (let i2 = 0; i2 < cleanups.length; i2++) cleanups[i2]();
+    if (complete) onDone();
+  };
+  const report = (error) => reportError(error, { phase: "async", name, node: elements[0] });
+  if (custom) {
+    let result;
+    try {
+      result = custom(nodes);
+    } catch (error) {
+      report(error);
+    }
+    const pending2 = adoptThenable(result);
+    if (pending2 === null) {
+      onDone();
+      return null;
+    }
+    pending2.then(
+      () => finish(true),
+      (error) => {
+        report(error);
+        finish(true);
+      }
+    );
+    timer = setTimeout(() => finish(true), cap);
+    return { cancel: () => finish(false) };
+  }
+  let holding = open > 0;
+  if (!cls || elements.length === 0 && !holding) {
+    onDone();
+    return null;
+  }
+  for (let i2 = 0; i2 < elements.length; i2++) elements[i2].classList.add(cls);
+  cleanups.push(() => {
+    for (let i2 = 0; i2 < elements.length; i2++) elements[i2].classList.remove(cls);
+  });
+  const capAt = now() + cap;
+  let deadline = 0;
+  const arm = (until) => {
+    const at = Math.min(until, capAt);
+    if (timer !== null && at <= deadline) return;
+    if (timer !== null) clearTimeout(timer);
+    deadline = at;
+    timer = setTimeout(() => finish(true), Math.max(0, at - now()));
+  };
+  let waiting = 0;
+  const animating = /* @__PURE__ */ new Set();
+  const enroll = (el) => {
+    const timing = measure(el);
+    if (timing === null) return -1;
+    const running = typeof el.getAnimations === "function" ? el.getAnimations() : null;
+    if (running !== null) {
+      if (running.length === 0) return -1;
+      waiting++;
+      animating.add(el);
+      let left = running.length;
+      const settle2 = () => {
+        if (left === 0 || --left !== 0) return;
+        animating.delete(el);
+        if (!finished && --waiting === 0 && !holding) finish(true);
+      };
+      for (const animation of running) animation.finished.then(settle2, settle2);
+      return timing.total;
+    }
+    waiting++;
+    animating.add(el);
+    let done = false;
+    let estimate = null;
+    const settle = () => {
+      if (done) return;
+      done = true;
+      if (estimate !== null) clearTimeout(estimate);
+      animating.delete(el);
+      if (!finished && --waiting === 0 && !holding) finish(true);
+    };
+    const onEnd = (event) => {
+      if (event.target !== el || done || timing.pending === 0) return;
+      const transition2 = event.type === "transitionend" || event.type === "transitioncancel";
+      const map2 = transition2 ? timing.transitions : timing.animations;
+      const key = matchEntry(
+        map2,
+        event[transition2 ? "propertyName" : "animationName"]
+      );
+      if (key === void 0) return;
+      const left = map2.get(key) - 1;
+      if (left > 0) map2.set(key, left);
+      else map2.delete(key);
+      if (--timing.pending === 0) settle();
+    };
+    for (const type of FALLBACK_EVENTS) el.addEventListener(type, onEnd);
+    if (Number.isFinite(timing.total)) estimate = setTimeout(settle, timing.total + SLACK_MS);
+    cleanups.push(() => {
+      if (estimate !== null) clearTimeout(estimate);
+      for (const type of FALLBACK_EVENTS) el.removeEventListener(type, onEnd);
+    });
+    return timing.total;
+  };
+  let longest = -1;
+  for (let i2 = 0; i2 < elements.length; i2++) longest = Math.max(longest, enroll(elements[i2]));
+  if (waiting === 0 && !holding) {
+    finish(true);
+    return null;
+  }
+  if (waiting > 0) arm(now() + longest + SLACK_MS);
+  const close = () => {
+    holding = false;
+    if (!finished && waiting === 0) finish(true);
+  };
+  if (holding) {
+    arm(now() + open);
+    const openTimer = setTimeout(close, Math.max(0, Math.min(now() + open, capAt) - now()));
+    cleanups.push(() => clearTimeout(openTimer));
+  }
+  return {
+    cancel: () => finish(false),
+    close,
+    add: (late) => {
+      if (finished) return;
+      for (let i2 = 0; i2 < late.length; i2++) {
+        const el = late[i2];
+        if (elements.includes(el) || insideAnimating(animating, el)) continue;
+        el.classList.add(cls);
+        elements.push(el);
+        const total = enroll(el);
+        if (total >= 0) arm(now() + total + SLACK_MS);
+      }
+    }
+  };
+}
+
 // src/core/rendering/directives.ts
 function show(condition, element) {
   const resolved = typeof element === "function" ? element() : element;
@@ -4420,9 +5353,15 @@ function show(condition, element) {
 function isDirectiveOptions(value) {
   return typeof value === "object" && value !== null && !(value instanceof Node);
 }
-function attachBranch(parent, anchor, branch, attachedOnce, where) {
+var fragmentStarts = /* @__PURE__ */ new WeakMap();
+var detachedRanges = /* @__PURE__ */ new WeakMap();
+var parked = /* @__PURE__ */ new WeakMap();
+var ENTER_WAIT_TURNS = 8;
+var NOOP4 = () => {
+};
+function resolveBranch(branch, attachedOnce, where) {
   const result = typeof branch === "function" ? branch() : branch;
-  if (result == null || typeof result === "boolean") return { node: null, owned: false };
+  if (result == null || typeof result === "boolean") return null;
   const node = result instanceof Node ? result : document.createTextNode(String(result));
   const handedIn = node === branch;
   const seenBefore = attachedOnce.has(node);
@@ -4433,64 +5372,603 @@ function attachBranch(parent, anchor, branch, attachedOnce, where) {
       () => `${where}: ${handedIn ? "a branch was given as an element rather than a function" : "a branch factory returned a node it had already returned"}, so the SAME node is being re-attached \u2014 any state it accumulated while detached (input value, scroll position, classes set imperatively) comes back with it. Its reactive bindings are left intact rather than disposed, because the node is not this directive's to tear down. Return a FRESH node per call (\`() => div(\u2026)\`) for rebuild semantics, or keep this form deliberately when the reuse is what you want.`
     );
   }
-  if (anchor.nextSibling !== node) parent.insertBefore(node, anchor.nextSibling);
-  return { node, owned };
+  let starts;
+  if (node.nodeType === 11) {
+    if (node.firstChild) {
+      starts = Array.from(node.childNodes);
+      fragmentStarts.set(node, starts);
+    } else {
+      starts = fragmentStarts.get(node) ?? [];
+    }
+  } else {
+    starts = [node];
+  }
+  const park = owned ? void 0 : parked.get(node);
+  const nodes = park?.firstChild ? Array.from(park.childNodes) : !owned && starts.every((start) => start.parentNode === null) && detachedRanges.get(node) || attachedRanges(starts);
+  if (nodes.length === 0 && !owned) return null;
+  return {
+    source: node,
+    starts,
+    nodes,
+    owned,
+    owner: null,
+    phase: null,
+    restore: null,
+    unhold: null,
+    waiting: false,
+    released: false,
+    inserting: false
+  };
 }
-function releaseBranchNode(node, owned) {
-  if (owned) dispose(node);
-  node.parentNode?.removeChild(node);
+function attachedRanges(starts) {
+  if (!starts.some(hasRange)) return starts;
+  return [...new Set(starts.flatMap((start) => start.parentNode === null ? [start] : collectRange([start])))];
 }
-function when(condition, thenBranch, elseBranch, options) {
-  requireDocument();
-  if (isDirectiveOptions(elseBranch)) {
-    options = elseBranch;
-    elseBranch = void 0;
+function refreshNodes(branch) {
+  const starts = branch.starts;
+  if (starts.length === 1 && (!hasRange(starts[0]) || starts[0].parentNode === null)) return;
+  const live = collectRange(starts);
+  branch.nodes = branch.owned && branch.inserting ? [.../* @__PURE__ */ new Set([...branch.nodes, ...live])] : live;
+  if (!branch.owned) detachedRanges.set(branch.source, branch.nodes);
+}
+function insertBranch(anchor, nodes, live) {
+  let prev = anchor;
+  for (let i2 = 0; i2 < nodes.length; i2++) {
+    if (!live()) return false;
+    const parent = anchor.parentNode;
+    if (parent === null) return false;
+    const node = nodes[i2];
+    if (prev.parentNode !== parent) prev = anchor;
+    if (prev.nextSibling !== node) parent.insertBefore(node, prev.nextSibling);
+    prev = node;
+  }
+  return live();
+}
+function releaseBranch(branch) {
+  if (branch.released) return;
+  branch.released = true;
+  refreshNodes(branch);
+  if (branch.phase !== null) {
+    branch.phase.cancel();
+    branch.phase = null;
+  }
+  if (branch.restore !== null) {
+    branch.restore();
+    branch.restore = null;
+  }
+  const nodes = branch.nodes;
+  let park;
+  if (!branch.owned && (branch.source.nodeType === 11 || branch.starts.some(hasRange))) {
+    park = parked.get(branch.source);
+    if (park === void 0) parked.set(branch.source, park = document.createDocumentFragment());
   }
-  const elseNode = elseBranch;
+  for (let i2 = 0; i2 < nodes.length; i2++) {
+    const node = nodes[i2];
+    if (branch.owned) dispose(node);
+    if (park !== void 0) park.appendChild(node);
+    else node.parentNode?.removeChild(node);
+  }
+  if (branch.owned && branch.source.nodeType === 11) dispose(branch.source);
+  if (branch.owner !== null) {
+    if (branch.owned) branch.owner.stop();
+    else branch.owner.thaw?.();
+    branch.owner = null;
+  }
+  if (branch.unhold !== null) {
+    branch.unhold();
+    branch.unhold = null;
+  }
+}
+function makeInert(branch, onLate) {
+  const saved = [];
+  const marked = /* @__PURE__ */ new Set();
+  const mark2 = (nodes) => {
+    for (let i2 = 0; i2 < nodes.length; i2++) {
+      if (nodes[i2].nodeType !== 1 || marked.has(nodes[i2])) continue;
+      const el = nodes[i2];
+      marked.add(el);
+      saved.push([el, el.getAttribute("inert"), el.getAttribute("aria-hidden")]);
+      el.setAttribute("inert", "");
+      el.setAttribute("aria-hidden", "true");
+    }
+  };
+  const active = typeof document !== "undefined" ? document.activeElement : null;
+  mark2(branch.nodes);
+  const initial = saved.length;
+  for (let i2 = 0; i2 < initial; i2++) {
+    const el = saved[i2][0];
+    if (active && (el === active || el.contains(active))) {
+      active.blur?.();
+      break;
+    }
+  }
+  const unwatch = watchRange(branch, (late) => {
+    const before = saved.length;
+    mark2(late);
+    if (saved.length > before) onLate(saved.slice(before).map((entry) => entry[0]));
+  });
+  return () => {
+    unwatch();
+    for (let i2 = 0; i2 < saved.length; i2++) {
+      const [el, inert, hidden] = saved[i2];
+      if (inert === null) el.removeAttribute("inert");
+      else el.setAttribute("inert", inert);
+      if (hidden === null) el.removeAttribute("aria-hidden");
+      else el.setAttribute("aria-hidden", hidden);
+    }
+  };
+}
+function watchRange(branch, onLate) {
+  const parent = branch.nodes[0]?.parentNode;
+  if (!parent || typeof MutationObserver !== "function" || !branch.starts.some(hasRange)) return NOOP4;
+  const seen = new Set(branch.nodes);
+  const observer = new MutationObserver(() => {
+    refreshNodes(branch);
+    const late = [];
+    for (const node of branch.nodes) {
+      if (seen.has(node)) continue;
+      seen.add(node);
+      if (node.nodeType === 1) late.push(node);
+    }
+    if (late.length > 0) onLate(late);
+  });
+  observer.observe(parent, { childList: true });
+  return () => observer.disconnect();
+}
+function readyWindow(ms) {
+  const endAt = now() + ms;
+  const win = {
+    expired: false,
+    remaining: () => win.expired ? 0 : Math.max(0, Math.min(ms, endAt - now())),
+    onExpire: null,
+    stop: () => {
+      clearTimeout(timer);
+      win.onExpire = null;
+    }
+  };
+  const timer = setTimeout(() => {
+    win.expired = true;
+    const expire = win.onExpire;
+    win.onExpire = null;
+    expire?.();
+  }, ms);
+  return win;
+}
+function watchMembership(branch, onChange) {
+  if (typeof MutationObserver !== "function") return null;
+  const observer = new MutationObserver(onChange);
+  const watched = /* @__PURE__ */ new Set();
+  const refresh = () => {
+    const parent = branch.nodes[0]?.parentNode;
+    if (parent && !watched.has(parent)) {
+      watched.add(parent);
+      observer.observe(parent, { childList: true });
+    }
+    for (const node of branch.nodes) {
+      if (node.nodeType !== 1 || watched.has(node)) continue;
+      watched.add(node);
+      observer.observe(node, { childList: true, subtree: true });
+    }
+  };
+  refresh();
+  return {
+    refresh,
+    stop: () => {
+      observer.disconnect();
+      watched.clear();
+    }
+  };
+}
+function directive(name, read, pick, options) {
   const focusPolicy = options?.focus;
-  const anchor = document.createComment("when");
+  const tr2 = options?.transition !== void 0 && !isServer() ? options.transition : void 0;
+  const anchor = document.createComment(name);
   const scope = captureScope();
-  let currentNode = null;
-  let lastCondition;
+  const frozen = captureFrozen2();
+  let current2 = null;
+  let last;
   let initialized = false;
   let disposed = false;
   const attachedOnce = /* @__PURE__ */ new WeakSet();
-  let currentNodeOwned = false;
+  const leaving = [];
+  let deferred = false;
+  let deferredFocus = null;
+  let dropDeferredWait = NOOP4;
+  const build = (branch, owns) => {
+    const owner = structuralBinding2(NOOP4, anchor);
+    const inBranch = (fn) => owner.run(() => untracked2(() => inScope(scope, fn)));
+    let built;
+    try {
+      built = inBranch(() => resolveBranch(branch, attachedOnce, name));
+    } catch (err) {
+      owner.stop();
+      throw err;
+    }
+    if (built === null) {
+      owner.stop();
+      return null;
+    }
+    const ownsOwner = built.owned;
+    if (ownsOwner) built.owner = owner;
+    if (disposed || !owns() || current2 !== null) {
+      releaseBranch(built);
+      if (!ownsOwner) owner.stop();
+      return null;
+    }
+    let reclaimed = null;
+    if (tr2) {
+      for (let i2 = 0; i2 < leaving.length; i2++) {
+        if (leaving[i2].source !== built.source) continue;
+        reclaimed = leaving.splice(i2, 1)[0];
+        built.owner = reclaimed.owner;
+        reclaimed.owner = null;
+        break;
+      }
+    }
+    current2 = built;
+    built.inserting = true;
+    let complete = false;
+    try {
+      if (reclaimed !== null) {
+        const prev = reclaimed;
+        if (prev.phase !== null) prev.phase.cancel();
+        prev.phase = null;
+        if (prev.restore !== null) prev.restore();
+        prev.restore = null;
+        const unhold = prev.unhold;
+        prev.unhold = null;
+        built.owner?.thaw?.();
+        unhold?.();
+        if (!built.released) refreshNodes(built);
+      }
+      const live = () => !disposed && owns() && current2 === built && !built.released;
+      complete = live() && inBranch(() => insertBranch(anchor, built.nodes, live));
+    } catch (err) {
+      built.inserting = false;
+      if (current2 === built) current2 = null;
+      releaseBranch(built);
+      if (!ownsOwner) owner.stop();
+      throw err;
+    }
+    built.inserting = false;
+    if (complete) inBranch(() => resumePending(built.nodes));
+    if (!ownsOwner) owner.stop();
+    return current2 === built && !built.released && owns() ? built : null;
+  };
+  const playPhase = (branch, start, onEnd, onCancel = NOOP4) => {
+    let valid = true;
+    let run = null;
+    const invalidate = () => {
+      if (!valid) return;
+      valid = false;
+      onCancel();
+    };
+    const handle = {
+      cancel: () => {
+        invalidate();
+        run?.cancel();
+      }
+    };
+    branch.phase = handle;
+    run = start(() => {
+      if (!valid || branch.phase !== handle) return;
+      valid = false;
+      branch.phase = null;
+      onEnd();
+    });
+    if (valid && branch.phase === handle && !branch.released && !disposed && run !== null) {
+      handle.add = run.add;
+      handle.close = run.close;
+      return handle;
+    }
+    invalidate();
+    if (branch.phase === handle) branch.phase = null;
+    run?.cancel();
+    return null;
+  };
+  const startLeave = (branch) => {
+    branch.waiting = false;
+    if (branch.released || disposed) return;
+    const t = tr2;
+    playPhase(
+      branch,
+      (done) => runPhase(branch.nodes, t.leaveClass, t.leave, t.maxDuration, done, `${name}(leave)`),
+      () => finishLeave(branch)
+    );
+  };
+  const startWaitingLeaves = () => {
+    for (const branch of [...leaving]) {
+      if (disposed) return;
+      if (branch.waiting) startLeave(branch);
+    }
+  };
+  const beginLeave = (branch) => {
+    if (branch.released) return;
+    const t = tr2;
+    if (branch.phase !== null) {
+      branch.phase.cancel();
+      branch.phase = null;
+    }
+    refreshNodes(branch);
+    if (branch.owner !== null) {
+      branch.owner.freeze?.();
+      branch.unhold = holdSubtree2({
+        contains: (node) => branch.nodes.some((n) => n === node || n.contains(node))
+      });
+    }
+    const restore = makeInert(branch, (late) => branch.phase?.add?.(late));
+    if (branch.released) {
+      restore();
+      return;
+    }
+    branch.restore = restore;
+    if (t.mode === "in-out") {
+      startWaitingLeaves();
+      branch.waiting = true;
+      leaving.push(branch);
+      return;
+    }
+    leaving.push(branch);
+    startLeave(branch);
+  };
+  const finishLeave = (branch) => {
+    const index = leaving.indexOf(branch);
+    if (index !== -1) leaving.splice(index, 1);
+    releaseBranch(branch);
+    if (deferred && leaving.length === 0 && !disposed) buildDeferred();
+  };
+  const afterInsert = (first, superseded) => {
+    if (superseded()) return;
+    const t = tr2;
+    const entering = current2;
+    if (entering !== null && (!first || t.appear === true)) {
+      enterWhenReady(entering);
+      if (superseded()) return;
+      if (entering.phase !== null) return;
+    }
+    if (t.mode === "in-out") startWaitingLeaves();
+  };
+  const enterWhenReady = (entering) => {
+    const t = tr2;
+    const budget = typeof t.waitForContent === "number" && t.waitForContent > 0 ? t.waitForContent : 0;
+    const ready = budget > 0 ? readyWindow(Math.min(budget, HARD_CAP_MS)) : null;
+    const contentReady = () => t.enter === void 0 || ready === null || ready.expired || loadingWithin(entering.nodes, entering.owner).length === 0;
+    if (!frozen() && !anyPending(entering.nodes) && contentReady()) {
+      startEnter(entering, ready);
+      return;
+    }
+    let cancelled = false;
+    let waiting = false;
+    let dropWait = NOOP4;
+    let dropLoaded = NOOP4;
+    let membership = null;
+    let turns = 0;
+    const stopWaiting = () => {
+      dropWait();
+      dropWait = NOOP4;
+      dropLoaded();
+      dropLoaded = NOOP4;
+      membership?.stop();
+      membership = null;
+      if (ready !== null) ready.onExpire = null;
+    };
+    const placeholder = {
+      cancel: () => {
+        cancelled = true;
+        stopWaiting();
+        ready?.stop();
+      }
+    };
+    entering.phase = placeholder;
+    const step = () => {
+      if (cancelled || disposed || current2 !== entering || entering.phase !== placeholder) return;
+      if (frozen()) {
+        dropWait();
+        dropWait = frozen.wait(step, NOOP4);
+        return;
+      }
+      refreshNodes(entering);
+      if (anyPending(entering.nodes) && ++turns < ENTER_WAIT_TURNS) {
+        queueMicrotask(step);
+        return;
+      }
+      if (!contentReady()) {
+        if (!waiting) {
+          waiting = true;
+          dropLoaded = onLoaded(() => {
+            turns = 0;
+            step();
+          });
+          membership = watchMembership(entering, step);
+          ready.onExpire = step;
+        } else membership?.refresh();
+        return;
+      }
+      stopWaiting();
+      entering.phase = null;
+      startEnter(entering, ready);
+    };
+    if (frozen()) step();
+    else queueMicrotask(step);
+  };
+  const startEnter = (entering, ready) => {
+    const t = tr2;
+    const open = t.enter === void 0 && ready !== null && !ready.expired ? ready.remaining() : 0;
+    const waitingFor = open > 0 ? loadingWithin(entering.nodes, entering.owner) : [];
+    if (waitingFor.length === 0) ready?.stop();
+    let stopWatching = NOOP4;
+    const run = playPhase(
+      entering,
+      (done) => runPhase(
+        entering.nodes,
+        t.enterClass,
+        t.enter,
+        t.maxDuration,
+        done,
+        `${name}(enter)`,
+        waitingFor.length > 0 ? open : 0
+      ),
+      () => {
+        stopWatching();
+        if (t.mode === "in-out" && !disposed) startWaitingLeaves();
+      },
+      () => stopWatching()
+    );
+    const add = run?.add;
+    if (run === null || add === void 0) {
+      ready?.stop();
+      return;
+    }
+    const unwatch = watchRange(entering, add);
+    let dropLoaded = NOOP4;
+    let membership = null;
+    const stopLoading = () => {
+      dropLoaded();
+      dropLoaded = NOOP4;
+      membership?.stop();
+      membership = null;
+      ready?.stop();
+    };
+    if (waitingFor.length > 0) {
+      const win = ready;
+      const reconcile = (settled) => {
+        if (win.expired || dropLoaded === NOOP4) {
+          stopLoading();
+          return;
+        }
+        refreshNodes(entering);
+        const inBranch = (el) => entering.nodes.some((n) => n === el || n.contains(el));
+        for (const entry of settled) {
+          if (entry.cancelled || !pendingWithin(entry, entering.nodes, entering.owner)) continue;
+          const content = settledContent(entry).filter(inBranch);
+          if (content.length > 0) add(content);
+        }
+        if (loadingWithin(entering.nodes, entering.owner).length === 0) {
+          stopLoading();
+          run.close?.();
+        } else membership?.refresh();
+      };
+      dropLoaded = onLoaded(reconcile);
+      membership = watchMembership(entering, () => reconcile(settledSinceNotify()));
+      win.onExpire = stopLoading;
+    }
+    stopWatching = () => {
+      unwatch();
+      stopLoading();
+    };
+  };
+  const buildDeferred = bindOwnerScope2(() => {
+    if (disposed || !deferred) return;
+    if (frozen()) {
+      dropDeferredWait();
+      dropDeferredWait = frozen.wait(() => {
+        dropDeferredWait = NOOP4;
+        if (deferred && !disposed) buildDeferred();
+      }, NOOP4);
+      return;
+    }
+    deferred = false;
+    const focused = deferredFocus;
+    deferredFocus = null;
+    const gen = deferredGen;
+    const superseded = () => disposed || gen !== generation;
+    if (superseded() || !anchor.parentNode || current2 !== null) return;
+    let built;
+    try {
+      built = binding.run(() => build(pick(last), () => !superseded()));
+    } catch (err) {
+      reportError(err, { phase: "render", name, node: anchor });
+      return;
+    }
+    if (superseded()) return;
+    restoreFocusWithin(focused, built !== null ? built.nodes : [], name, focusPolicy);
+    afterInsert(false, superseded);
+  });
+  let generation = 0;
+  let deferredGen = 0;
   const update = () => {
     if (disposed) return;
-    const show2 = condition();
-    const parent = anchor.parentNode;
-    if (!parent) return;
-    if (initialized && Object.is(show2, lastCondition)) return;
-    lastCondition = show2;
-    const focused = currentNode ? captureFocusWithin([currentNode]) : null;
-    if (currentNode?.parentNode) {
-      releaseBranchNode(currentNode, currentNodeOwned);
-      currentNode = null;
-    }
-    const branch = show2 ? thenBranch : elseNode !== void 0 ? elseNode : null;
-    const attached = untracked2(() => inScope(scope, () => attachBranch(parent, anchor, branch, attachedOnce, "when")));
-    currentNode = attached.node;
-    currentNodeOwned = attached.owned;
-    restoreFocusWithin(focused, currentNode ? [currentNode] : [], "when", focusPolicy);
+    const value = read();
+    if (!anchor.parentNode) return;
+    if (initialized && Object.is(value, last)) return;
+    last = value;
+    const first = !initialized;
     initialized = true;
+    const gen = ++generation;
+    const superseded = () => disposed || gen !== generation;
+    if (current2 !== null) refreshNodes(current2);
+    const focused = current2 !== null ? captureFocusWithin(current2.nodes) : null;
+    if (current2 !== null) {
+      const outgoing = current2;
+      if (tr2) beginLeave(outgoing);
+      else releaseBranch(outgoing);
+      if (current2 === outgoing) current2 = null;
+      if (superseded()) return;
+    }
+    const branch = pick(value);
+    if (tr2?.mode === "out-in" && leaving.length > 0) {
+      let reclaim = false;
+      for (let i2 = 0; i2 < leaving.length && !reclaim; i2++) reclaim = leaving[i2].source === branch;
+      if (!reclaim) {
+        deferred = true;
+        deferredGen = gen;
+        deferredFocus ?? (deferredFocus = focused);
+        return;
+      }
+    }
+    deferred = false;
+    build(branch, () => !superseded());
+    if (superseded()) return;
+    restoreFocusWithin(focused, current2 !== null ? current2.nodes : [], name, focusPolicy);
+    if (tr2) afterInsert(first, superseded);
   };
   const binding = structuralBinding2(update, anchor);
+  registerRange(anchor, () => {
+    for (let i2 = 0; i2 <= leaving.length; i2++) {
+      const branch = i2 < leaving.length ? leaving[i2] : current2;
+      if (branch === null) break;
+      const nodes = collectRange(branch.starts);
+      if (nodes.length > 0) return nodes[nodes.length - 1];
+    }
+    return null;
+  });
   registerDisposer(anchor, () => {
     disposed = true;
+    deferred = false;
+    deferredFocus = null;
+    dropDeferredWait();
+    dropDeferredWait = NOOP4;
     binding.stop();
-    if (currentNode) releaseBranchNode(currentNode, currentNodeOwned);
-    currentNode = null;
+    if (current2 !== null) releaseBranch(current2);
+    current2 = null;
+    const rest = leaving.splice(0);
+    for (let i2 = 0; i2 < rest.length; i2++) releaseBranch(rest[i2]);
   });
   if (!initialized) {
-    queueMicrotask(
+    queueFirstRender(
+      anchor,
       bindOwnerScope2(() => {
         if (!disposed && !initialized && anchor.parentNode) binding.run(update);
-      })
+      }),
+      frozen
     );
   }
   return anchor;
 }
+function when(condition, thenBranch, elseBranch, options) {
+  requireDocument();
+  if (isDirectiveOptions(elseBranch)) {
+    options = elseBranch;
+    elseBranch = void 0;
+  }
+  const elseNode = elseBranch;
+  return directive(
+    "when",
+    condition,
+    (show2) => show2 ? thenBranch : elseNode !== void 0 ? elseNode : null,
+    options
+  );
+}
 function match(value, cases, fallback, options) {
   requireDocument();
   if (isDirectiveOptions(fallback)) {
@@ -4498,51 +5976,14 @@ function match(value, cases, fallback, options) {
     fallback = void 0;
   }
   const fallbackNode = fallback;
-  const focusPolicy = options?.focus;
-  const anchor = document.createComment("match");
-  const scope = captureScope();
-  let currentNode = null;
-  let lastKey;
-  let initialized = false;
-  let disposed = false;
-  const attachedOnce = /* @__PURE__ */ new WeakSet();
-  let currentNodeOwned = false;
-  const update = () => {
-    if (disposed) return;
-    const key = String(value());
-    const parent = anchor.parentNode;
-    if (!parent) return;
-    if (initialized && key === lastKey) return;
-    lastKey = key;
-    const focused = currentNode ? captureFocusWithin([currentNode]) : null;
-    if (currentNode?.parentNode) {
-      releaseBranchNode(currentNode, currentNodeOwned);
-      currentNode = null;
-    }
-    const branch = Object.hasOwn(cases, key) ? cases[key] : fallbackNode;
-    const attached = untracked2(
-      () => inScope(scope, () => attachBranch(parent, anchor, branch ?? null, attachedOnce, "match"))
-    );
-    currentNode = attached.node;
-    currentNodeOwned = attached.owned;
-    restoreFocusWithin(focused, currentNode ? [currentNode] : [], "match", focusPolicy);
-    initialized = true;
-  };
-  const binding = structuralBinding2(update, anchor);
-  registerDisposer(anchor, () => {
-    disposed = true;
-    binding.stop();
-    if (currentNode) releaseBranchNode(currentNode, currentNodeOwned);
-    currentNode = null;
-  });
-  if (!initialized) {
-    queueMicrotask(
-      bindOwnerScope2(() => {
-        if (!disposed && !initialized && anchor.parentNode) binding.run(update);
-      })
-    );
-  }
-  return anchor;
+  return directive(
+    "match",
+    () => String(value()),
+    // `Object.hasOwn` rather than `||` so a case whose value is legitimately
+    // falsy (an empty string, 0) still wins over the fallback.
+    (key) => Object.hasOwn(cases, key) ? cases[key] : fallbackNode ?? null,
+    options
+  );
 }
 
 // src/core/rendering/clientOnly.ts
@@ -4615,12 +6056,6 @@ function __resetIdCounter() {
   _counter.n = 0;
 }
 
-// src/utils/globalSingleton.ts
-function globalSingleton(key, create) {
-  const g2 = globalThis;
-  return g2[key] ?? (g2[key] = create());
-}
-
 // src/core/rendering/dynamic.ts
 var componentRegistry = globalSingleton(
   /* @__PURE__ */ Symbol.for("sibujs.components.registry.v1"),
@@ -4707,6 +6142,14 @@ function longestIncreasingSubsequence(arr, len) {
   }
   return result;
 }
+var renderingRow = null;
+var warnedReadSites = /* @__PURE__ */ new Set();
+function withPeek(get) {
+  const state4 = get.__signal;
+  const cell = get;
+  cell.peek = () => state4.value;
+  return cell;
+}
 function each(getArray, render, options) {
   devAssert(typeof getArray === "function", "each: first argument must be a function that returns an array.");
   devAssert(typeof render === "function", "each: second argument must be a render function.");
@@ -4785,13 +6228,40 @@ function each(getArray, render, options) {
       } else {
         const [itemGetter, setItem] = signal(arr[i2]);
         const [indexGetter, setIndex] = signal(i2);
+        const item = withPeek(itemGetter);
+        const index = withPeek(indexGetter);
+        let reads = null;
+        let renderItem = item;
+        let renderIndex = index;
+        let outerRow = null;
+        devWarnLazy(() => {
+          const rowReads = { item: null, index: null };
+          const recording = (get, slot4) => {
+            const read = (() => {
+              if (renderingRow === rowReads && rowReads[slot4] === null && isTrackingSuspended2()) {
+                rowReads[slot4] = new Error();
+              }
+              return get();
+            });
+            read.peek = get.peek;
+            read.__signal = get.__signal;
+            return read;
+          };
+          reads = rowReads;
+          renderItem = recording(item, "item");
+          renderIndex = recording(index, "index");
+          return "";
+        });
         let node;
         try {
           suspendTracking2();
+          outerRow = renderingRow;
+          renderingRow = reads;
           try {
-            node = resolveNodeChild(inScope(keyedScope(scope, key), () => render(itemGetter, indexGetter)));
+            node = resolveNodeChild(inScope(keyedScope(scope, key), () => render(renderItem, renderIndex)));
           } finally {
             resumeTracking2();
+            renderingRow = outerRow;
           }
         } catch (err) {
           const key2 = newKeys[i2];
@@ -4804,7 +6274,7 @@ function each(getArray, render, options) {
             });
           });
         }
-        row = { node, item: itemGetter, setItem, index: indexGetter, setIndex };
+        row = { node, item, setItem, index, setIndex, reads };
       }
       workMap.set(key, row);
       newNodes[i2] = row.node;
@@ -4882,6 +6352,7 @@ function each(getArray, render, options) {
     batch(() => {
       for (let i2 = 0; i2 < count; i2++) {
         const row = pendingRows[i2];
+        if (row.reads !== null) warnStaleRead(row, pendingItems[i2], pendingIndices[i2]);
         row.setItem(pendingItems[i2]);
         row.setIndex(pendingIndices[i2]);
         pendingRows[i2] = void 0;
@@ -4889,7 +6360,29 @@ function each(getArray, render, options) {
       }
     });
   }
-  const binding = structuralBinding2(update);
+  function warnStaleRead(row, nextItem, nextIndex) {
+    devWarnLazy(() => {
+      const reads = row.reads;
+      let site = null;
+      let which = "";
+      if (reads.item !== null && !Object.is(row.item.peek(), nextItem)) {
+        site = reads.item;
+        which = "item";
+        reads.item = null;
+      } else if (reads.index !== null && row.index.peek() !== nextIndex) {
+        site = reads.index;
+        which = "index";
+        reads.index = null;
+      }
+      if (site === null) return "";
+      const frames = (site.stack ?? "").split("\n").filter((line2) => /^\s*at\s|@/.test(line2));
+      const at = (frames[1] ?? frames[0] ?? "").trim().replace(/^at\s+/, "") || "unknown location";
+      if (warnedReadSites.has(at)) return "";
+      if (warnedReadSites.size < 100) warnedReadSites.add(at);
+      return `each(): the row for key "${String(keyFn(nextItem))}" read ${which}() directly while rendering, so it will not show the new value. Read it inside a binding (\`() => ${which}().x\`) or an effect, or include the changing field in the key. For an intentional one-time read, use ${which}.peek(). (render at ${at})`;
+    });
+  }
+  const binding = structuralBinding2(update, anchor);
   const untrack = binding.stop;
   const disposeRange = () => {
     if (rangeDisposed) return;
@@ -4912,13 +6405,15 @@ function each(getArray, render, options) {
     pendingCount = 0;
   };
   registerDisposer(anchor, disposeRange);
+  registerRange(anchor, () => sentinelInserted ? end : null);
   if (!initialized) {
-    queueMicrotask(
+    const frozen = captureFrozen2();
+    queueFirstRender(
+      anchor,
       bindOwnerScope2(() => {
-        if (!initialized && !rangeDisposed && anchor.parentNode) {
-          binding.run(update);
-        }
-      })
+        if (!initialized && !rangeDisposed && anchor.parentNode) binding.run(update);
+      }),
+      frozen
     );
   }
   return anchor;
@@ -4962,7 +6457,7 @@ function appendChild(frag, child) {
   if (typeof child === "function") {
     const placeholder = document.createComment("");
     frag.appendChild(placeholder);
-    registerDisposer(placeholder, bindChildNode(placeholder, child));
+    registerDisposer(placeholder, bindChildNode(placeholder, child, true));
     return;
   }
   frag.appendChild(document.createTextNode(String(child)));
@@ -5008,7 +6503,7 @@ var SVG_TAGS = /* @__PURE__ */ new Set([
   "symbol",
   "marker"
 ]);
-var cache = /* @__PURE__ */ new WeakMap();
+var cache2 = /* @__PURE__ */ new WeakMap();
 function parseTemplate(strings) {
   const exprCount = strings.length - 1;
   let template2 = strings[0];
@@ -5295,10 +6790,10 @@ function executeElement(tmpl, values) {
   return el;
 }
 function html2(strings, ...values) {
-  let tmpl = cache.get(strings);
+  let tmpl = cache2.get(strings);
   if (!tmpl) {
     tmpl = parseTemplate(strings);
-    cache.set(strings, tmpl);
+    cache2.set(strings, tmpl);
   }
   return renderTemplate(tmpl, values);
 }
@@ -5354,7 +6849,7 @@ function renderTemplate(tmpl, values) {
 function KeepAlive(activeKey, cases, options) {
   requireDocument();
   const anchor = document.createComment("keep-alive");
-  const cache2 = /* @__PURE__ */ new Map();
+  const cache3 = /* @__PURE__ */ new Map();
   const lruOrder = [];
   const max = options?.max ?? 10;
   if (max === 0 && isDev()) {
@@ -5374,7 +6869,7 @@ function KeepAlive(activeKey, cases, options) {
       parent.removeChild(currentNode);
     }
     currentKey = key;
-    let node = cache2.get(key);
+    let node = cache3.get(key);
     if (!node) {
       const factory = cases[key];
       if (!factory) {
@@ -5389,15 +6884,15 @@ function KeepAlive(activeKey, cases, options) {
         wrapper.appendChild(node);
         node = wrapper;
       }
-      cache2.set(key, node);
+      cache3.set(key, node);
       lruOrder.push(key);
       if (max > 0 && lruOrder.length > max) {
         const evictKey = lruOrder.shift();
-        const evictNode = cache2.get(evictKey);
+        const evictNode = cache3.get(evictKey);
         if (evictNode) {
           dispose(evictNode);
           if (evictNode.parentNode) evictNode.parentNode.removeChild(evictNode);
-          cache2.delete(evictKey);
+          cache3.delete(evictKey);
         }
       }
     } else {
@@ -5411,23 +6906,27 @@ function KeepAlive(activeKey, cases, options) {
     currentNode = node;
     initialized = true;
   };
-  const binding = structuralBinding2(update);
+  const binding = structuralBinding2(update, anchor);
+  registerNodesRange(anchor, () => [currentNode]);
   const untrack = binding.stop;
   if (!initialized) {
-    queueMicrotask(
+    const frozen = captureFrozen2();
+    queueFirstRender(
+      anchor,
       bindOwnerScope2(() => {
         if (!initialized && anchor.parentNode) binding.run(update);
-      })
+      }),
+      frozen
     );
   }
   registerDisposer(anchor, () => {
     disposed = true;
     untrack();
-    for (const node of cache2.values()) {
+    for (const node of cache3.values()) {
       dispose(node);
       if (node.parentNode) node.parentNode.removeChild(node);
     }
-    cache2.clear();
+    cache3.clear();
     lruOrder.length = 0;
     currentNode = null;
   });
@@ -5445,8 +6944,8 @@ function mount(component, container) {
     typeof component === "function" || component instanceof Node,
     "mount: first argument must be a component function or a DOM Node."
   );
-  const now = () => typeof performance !== "undefined" ? performance.now() : 0;
-  const startTime = now();
+  const now2 = () => typeof performance !== "undefined" ? performance.now() : 0;
+  const startTime = now2();
   let range = null;
   const attach = (built) => {
     if (built instanceof DocumentFragment) {
@@ -5469,7 +6968,7 @@ function mount(component, container) {
     node = component;
     attach(node);
   }
-  const duration = now() - startTime;
+  const duration = now2() - startTime;
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   if (hook) emitDevtools(hook, "app:init", { rootElement: node, container, duration });
   const mounted = range;
@@ -5517,6 +7016,153 @@ function unmountRange(start, end) {
   end.parentNode?.removeChild(end);
 }
 
+// src/core/signals/watch.ts
+function watch(getter, callback) {
+  devAssert(typeof getter === "function", "watch: first argument must be a getter function.");
+  devAssert(typeof callback === "function", "watch: second argument must be a callback function.");
+  if (isSSR()) return () => {
+  };
+  let oldValue;
+  let first = true;
+  const subscriber = () => {
+    const newValue = getter();
+    if (first) {
+      oldValue = newValue;
+      first = false;
+      return;
+    }
+    if (!Object.is(newValue, oldValue)) {
+      const prev = oldValue;
+      oldValue = newValue;
+      suspendTracking2();
+      try {
+        callback(newValue, prev);
+      } finally {
+        resumeTracking2();
+      }
+    }
+  };
+  const teardown = track2(subscriber);
+  return teardown;
+}
+
+// src/core/signals/lifecycleScope.ts
+var STATES = ["active", "paused", "ended"];
+var ENDED2 = 2;
+var NOOP5 = () => {
+};
+var scopeOwners = globalSingleton(
+  /* @__PURE__ */ Symbol.for("sibujs.lifecycleScope.owners.v1"),
+  () => /* @__PURE__ */ new WeakMap()
+);
+function scopeOwner(scope) {
+  return scopeOwners.get(scope);
+}
+function lifecycleScope() {
+  const held = captureFrozen2();
+  const inOwnerScope = bindOwnerScope2((fn) => fn());
+  const ended = () => held.state() === ENDED2;
+  const own = (register) => {
+    let disposed = false;
+    let stop2 = null;
+    let dropWait = NOOP5;
+    let dropEnd = NOOP5;
+    const dispose2 = () => {
+      if (disposed) return;
+      disposed = true;
+      dropWait();
+      dropEnd();
+      const running = stop2;
+      stop2 = null;
+      running?.();
+    };
+    const start = () => {
+      dropWait = NOOP5;
+      if (disposed) return;
+      dropEnd = held.onEnd(dispose2);
+      if (disposed) return;
+      let created;
+      try {
+        created = held.run(() => inOwnerScope(register));
+      } catch (err) {
+        disposed = true;
+        dropEnd();
+        dropEnd = NOOP5;
+        throw err;
+      }
+      if (disposed) created();
+      else stop2 = created;
+    };
+    const state4 = held.state();
+    if (state4 === ENDED2) disposed = true;
+    else if (state4 === 1) dropWait = held.wait(start, dispose2);
+    else start();
+    return dispose2;
+  };
+  const onState = (want, callback) => held.onChange((state4) => {
+    if (state4 === want) held.run(() => inOwnerScope(callback));
+  });
+  const scope = {
+    state: () => STATES[held.state()],
+    own,
+    onPause: (callback) => onState(1, callback),
+    onResume: (callback) => onState(0, callback),
+    // The guards are the liveness check of a registration whose owner ended
+    // while its own run was in progress (a body that ends its branch and
+    // re-runs itself); `own` disposes it as soon as that run returns.
+    effect: (fn, options) => own(
+      () => effect((onCleanup2) => {
+        if (!ended()) fn(onCleanup2);
+      }, options)
+    ),
+    watch: (getter, callback) => own(
+      () => watch(getter, (value, prev) => {
+        if (!ended()) callback(value, prev);
+      })
+    )
+  };
+  scopeOwners.set(scope, held);
+  return scope;
+}
+
+// src/core/rendering/pendingContent.ts
+var INERT2 = { done: () => {
+}, cancel: () => {
+}, settled: true };
+function pendingContent(at) {
+  if (isServer()) return INERT2;
+  const isNode = typeof at.nodeType === "number";
+  const held = isNode ? null : scopeOwner(at) ?? null;
+  if (!isNode && (held === null || held.state() === 2)) return INERT2;
+  const { entry, done, cancel: cancelEntry } = beginPending(isNode ? at : null, held);
+  let drop = () => {
+  };
+  const cancel = () => {
+    if (entry.settled) return;
+    drop();
+    cancelEntry();
+  };
+  if (isNode) {
+    registerDisposer(at, cancel);
+    drop = () => {
+      unregisterDisposer(at, cancel);
+    };
+  } else drop = held.onEnd(cancel);
+  return {
+    done: (committed) => {
+      if (entry.settled) return;
+      drop();
+      done(
+        committed === void 0 ? null : typeof committed.nodeType === "number" ? [committed] : [...committed]
+      );
+    },
+    cancel,
+    get settled() {
+      return entry.settled;
+    }
+  };
+}
+
 // src/core/rendering/portal.ts
 function Portal(nodes, target) {
   requireDocument();
@@ -6145,36 +7791,6 @@ function store(initialState) {
   return [store2, { setState, reset, subscribe, subscribeKey, getSnapshot }];
 }
 
-// src/core/signals/watch.ts
-function watch(getter, callback) {
-  devAssert(typeof getter === "function", "watch: first argument must be a getter function.");
-  devAssert(typeof callback === "function", "watch: second argument must be a callback function.");
-  if (isSSR()) return () => {
-  };
-  let oldValue;
-  let first = true;
-  const subscriber = () => {
-    const newValue = getter();
-    if (first) {
-      oldValue = newValue;
-      first = false;
-      return;
-    }
-    if (!Object.is(newValue, oldValue)) {
-      const prev = oldValue;
-      oldValue = newValue;
-      suspendTracking2();
-      try {
-        callback(newValue, prev);
-      } finally {
-        resumeTracking2();
-      }
-    }
-  };
-  const teardown = track2(subscriber);
-  return teardown;
-}
-
 // src/core/signals/writable.ts
 function writable(get, set, options) {
   const getter = derived(get, options);
@@ -6428,10 +8044,10 @@ function enhance(target, setup) {
         });
       });
     },
-    model: (t, state2, options) => {
+    model: (t, state4, options) => {
       bind("model", t, (el) => {
         const control = el;
-        const [get, set] = state2;
+        const [get, set] = state4;
         const evt = options?.event ?? (control instanceof HTMLSelectElement || control instanceof HTMLInputElement && (control.type === "checkbox" || control.type === "radio") ? "change" : "input");
         teardowns.push(
           bindNode(el, () => {
@@ -6676,17 +8292,17 @@ var DEFAULT_MAX_SSR_BYTES = 1024 * 1024;
 // src/reactivity/concurrent.ts
 function defer(getter) {
   const [value, setValue] = signal(getter());
-  let pending = false;
+  let pending2 = false;
   let disposed = false;
   let latest = value();
   const flush = () => {
-    pending = false;
+    pending2 = false;
     if (disposed) return;
     setValue(latest);
   };
   const schedule2 = () => {
-    if (pending) return;
-    pending = true;
+    if (pending2) return;
+    pending2 = true;
     queueMicrotask(() => {
       if (typeof requestAnimationFrame === "function") {
         requestAnimationFrame(flush);
@@ -6721,7 +8337,7 @@ function scheduleIdle(fn) {
   setTimeout(fn, IDLE_FALLBACK_MS);
 }
 function transition() {
-  const [pending, setPending] = signal(false);
+  const [pending2, setPending] = signal(false);
   let outstanding = 0;
   function start(fn) {
     outstanding++;
@@ -6746,7 +8362,7 @@ function transition() {
       }
     });
   }
-  return { pending, start };
+  return { pending: pending2, start };
 }
 
 // src/reactivity/nextTick.ts
@@ -6878,6 +8494,7 @@ function nextTick() {
   lazyIsland,
   legend,
   li,
+  lifecycleScope,
   line,
   linearGradient,
   link,
@@ -6911,6 +8528,7 @@ function nextTick() {
   param,
   path,
   pattern,
+  pendingContent,
   picture,
   polygon,
   polyline,
@@ -6937,6 +8555,7 @@ function nextTick() {
   runInSSRContext,
   s,
   samp,
+  scopeOwner,
   script,
   section,
   select,