sibujs 4.14.0 → 4.15.0

package/dist/{chunk-QS6GMWDD.js → chunk-YAFITBOK.js}

@@ -1,3 +1,6 @@
+import {
+  commitWhenActive
+} from "./chunk-DS5V2PRE.js";
 import {
   a,
   abbr,
@@ -135,45 +138,56 @@ import {
   use,
   var_,
   video
-} from "./chunk-7ILEHTVX.js";
+} from "./chunk-4AEFGRYW.js";
 import {
   trustHTML
-} from "./chunk-BOYKGGVD.js";
+} from "./chunk-DRWOD7RZ.js";
 import {
   watch
-} from "./chunk-RVR5NPFL.js";
+} from "./chunk-2VKTFA7C.js";
 import {
   __resetIdCounter,
   createId,
   domBinding
-} from "./chunk-CCKUNHVU.js";
+} from "./chunk-DAEXQJQA.js";
 import {
   SVG_NS,
+  anyPending,
+  beginLoading,
+  beginPending,
   bindChildNode,
   captureFocusWithin,
+  collectRange,
+  hasRange,
+  loadingWithin,
+  onLoaded,
+  pendingWithin,
+  queueFirstRender,
+  registerNodesRange,
+  registerRange,
   restoreFocusWithin,
+  resumePending,
+  settledContent,
+  settledSinceNotify,
   tagFactory
-} from "./chunk-CJ7KS3DF.js";
+} from "./chunk-VSTX3XSX.js";
 import {
   bindAttribute,
   bindDynamic,
   requireDocument,
   setSafeAttribute,
   setTrustedAttribute
-} from "./chunk-HQIAL7F2.js";
+} from "./chunk-XPDZ2LDR.js";
 import {
   isCodeTextElement
 } from "./chunk-RVWJGWCL.js";
 import {
   derived
-} from "./chunk-N7A6FKWW.js";
-import {
-  globalSingleton
-} from "./chunk-7ZHH77QA.js";
+} from "./chunk-D44TAGCT.js";
 import {
   effect,
   on
-} from "./chunk-AE32RGWX.js";
+} from "./chunk-LGUXYHTZ.js";
 import {
   currentBoundary,
   disableSSR,
@@ -198,10 +212,13 @@ import {
   external,
   isBatching,
   signal
-} from "./chunk-4FJSAUKB.js";
+} from "./chunk-IUBV5WO5.js";
 import {
   bindOwnerScope,
+  captureFrozen,
   getOwnerScope,
+  holdSubtree,
+  isTrackingSuspended,
   notifySubscribers,
   reactiveBinding,
   recordDependency,
@@ -213,21 +230,24 @@ import {
   suspendTracking,
   track,
   untracked
-} from "./chunk-MIRKTVH4.js";
+} from "./chunk-GFM5WWPU.js";
 import {
   MAX_DRAIN_TEARDOWNS,
   checkLeaks,
   dispose,
+  disposeNodeOwn,
   getRuntimeErrorHandler,
+  globalSingleton,
   normalizeError,
   registerDisposer,
   replaceChildrenSafely,
   reportDrainRunaway,
   reportError,
   setRuntimeErrorHandler,
+  stageReplaceChildren,
   unregisterDisposer,
   withDisposerRollback
-} from "./chunk-S37PZD6I.js";
+} from "./chunk-BF3WBJJQ.js";
 import {
   DEV,
   afterHydration,
@@ -364,6 +384,7 @@ __export(index_exports, {
   lazyIsland: () => lazyIsland,
   legend: () => legend,
   li: () => li,
+  lifecycleScope: () => lifecycleScope,
   line: () => line,
   linearGradient: () => linearGradient,
   link: () => link,
@@ -397,6 +418,7 @@ __export(index_exports, {
   param: () => param,
   path: () => path,
   pattern: () => pattern,
+  pendingContent: () => pendingContent,
   picture: () => picture,
   polygon: () => polygon,
   polyline: () => polyline,
@@ -423,6 +445,7 @@ __export(index_exports, {
   runInSSRContext: () => runInSSRContext,
   s: () => s,
   samp: () => samp,
+  scopeOwner: () => scopeOwner,
   script: () => script,
   section: () => section,
   select: () => select,
@@ -503,100 +526,296 @@ function takePendingError(node) {
   }
   return void 0;
 }
+var NOOP = () => {
+};
 function lazy(importFn) {
   let cached = null;
+  const instance = (component) => {
+    const own = structuralBinding(NOOP);
+    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.
-      bindOwnerScope((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 = captureFrozen();
+    const inOwner = bindOwnerScope((fn) => fn());
+    const ready = beginLoading(container);
+    let disposed = false;
+    const live = () => !disposed;
+    let owner = null;
+    const waiting = { cancel: NOOP };
     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),
+        NOOP,
+        () => {
+          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 = captureFrozen();
+  const inOwner = bindOwnerScope((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 = structuralBinding(NOOP);
+  let fallbackOwner = fallbackOwn;
+  const endFallback = () => {
+    const own = fallbackOwner;
+    fallbackOwner = null;
+    own?.stop();
+  };
+  const waiting = { cancel: NOOP };
   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 = bindOwnerScope(() => {
-    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(() => structuralBinding(NOOP));
+    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;
 }
 
@@ -1832,6 +2051,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 pending = adoptThenable(result);
+    if (pending === null) {
+      onDone();
+      return null;
+    }
+    pending.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;
@@ -1844,9 +2259,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 NOOP2 = () => {
+};
+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);
@@ -1857,64 +2278,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;
   }
-  const elseNode = elseBranch;
+  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());
+  }
+  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 NOOP2;
+  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 = captureFrozen();
+  let current = 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 = NOOP2;
+  const build = (branch, owns) => {
+    const owner = structuralBinding(NOOP2, anchor);
+    const inBranch = (fn) => owner.run(() => untracked(() => 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() || current !== 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;
+      }
+    }
+    current = 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() && current === built && !built.released;
+      complete = live() && inBranch(() => insertBranch(anchor, built.nodes, live));
+    } catch (err) {
+      built.inserting = false;
+      if (current === built) current = null;
+      releaseBranch(built);
+      if (!ownsOwner) owner.stop();
+      throw err;
+    }
+    built.inserting = false;
+    if (complete) inBranch(() => resumePending(built.nodes));
+    if (!ownsOwner) owner.stop();
+    return current === built && !built.released && owns() ? built : null;
+  };
+  const playPhase = (branch, start, onEnd, onCancel = NOOP2) => {
+    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 = holdSubtree({
+        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 = current;
+    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 = NOOP2;
+    let dropLoaded = NOOP2;
+    let membership = null;
+    let turns = 0;
+    const stopWaiting = () => {
+      dropWait();
+      dropWait = NOOP2;
+      dropLoaded();
+      dropLoaded = NOOP2;
+      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 || current !== entering || entering.phase !== placeholder) return;
+      if (frozen()) {
+        dropWait();
+        dropWait = frozen.wait(step, NOOP2);
+        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 = NOOP2;
+    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 = NOOP2;
+    let membership = null;
+    const stopLoading = () => {
+      dropLoaded();
+      dropLoaded = NOOP2;
+      membership?.stop();
+      membership = null;
+      ready?.stop();
+    };
+    if (waitingFor.length > 0) {
+      const win = ready;
+      const reconcile = (settled) => {
+        if (win.expired || dropLoaded === NOOP2) {
+          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 = bindOwnerScope(() => {
+    if (disposed || !deferred) return;
+    if (frozen()) {
+      dropDeferredWait();
+      dropDeferredWait = frozen.wait(() => {
+        dropDeferredWait = NOOP2;
+        if (deferred && !disposed) buildDeferred();
+      }, NOOP2);
+      return;
+    }
+    deferred = false;
+    const focused = deferredFocus;
+    deferredFocus = null;
+    const gen = deferredGen;
+    const superseded = () => disposed || gen !== generation;
+    if (superseded() || !anchor.parentNode || current !== 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 = untracked(() => 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 (current !== null) refreshNodes(current);
+    const focused = current !== null ? captureFocusWithin(current.nodes) : null;
+    if (current !== null) {
+      const outgoing = current;
+      if (tr2) beginLeave(outgoing);
+      else releaseBranch(outgoing);
+      if (current === outgoing) current = 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, current !== null ? current.nodes : [], name, focusPolicy);
+    if (tr2) afterInsert(first, superseded);
   };
   const binding = structuralBinding(update, anchor);
+  registerRange(anchor, () => {
+    for (let i2 = 0; i2 <= leaving.length; i2++) {
+      const branch = i2 < leaving.length ? leaving[i2] : current;
+      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 = NOOP2;
     binding.stop();
-    if (currentNode) releaseBranchNode(currentNode, currentNodeOwned);
-    currentNode = null;
+    if (current !== null) releaseBranch(current);
+    current = null;
+    const rest = leaving.splice(0);
+    for (let i2 = 0; i2 < rest.length; i2++) releaseBranch(rest[i2]);
   });
   if (!initialized) {
-    queueMicrotask(
+    queueFirstRender(
+      anchor,
       bindOwnerScope(() => {
         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)) {
@@ -1922,51 +2882,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 = untracked(
-      () => 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 = structuralBinding(update, anchor);
-  registerDisposer(anchor, () => {
-    disposed = true;
-    binding.stop();
-    if (currentNode) releaseBranchNode(currentNode, currentNodeOwned);
-    currentNode = null;
-  });
-  if (!initialized) {
-    queueMicrotask(
-      bindOwnerScope(() => {
-        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
@@ -2109,6 +3032,14 @@ function longestIncreasingSubsequence(arr, len) {
   }
   return result;
 }
+var renderingRow = null;
+var warnedReadSites = /* @__PURE__ */ new Set();
+function withPeek(get) {
+  const state = get.__signal;
+  const cell = get;
+  cell.peek = () => state.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.");
@@ -2187,13 +3118,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, slot2) => {
+            const read = (() => {
+              if (renderingRow === rowReads && rowReads[slot2] === null && isTrackingSuspended()) {
+                rowReads[slot2] = 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 {
           suspendTracking();
+          outerRow = renderingRow;
+          renderingRow = reads;
           try {
-            node = resolveNodeChild(inScope(keyedScope(scope, key), () => render(itemGetter, indexGetter)));
+            node = resolveNodeChild(inScope(keyedScope(scope, key), () => render(renderItem, renderIndex)));
           } finally {
             resumeTracking();
+            renderingRow = outerRow;
           }
         } catch (err) {
           const key2 = newKeys[i2];
@@ -2206,7 +3164,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;
@@ -2284,6 +3242,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;
@@ -2291,7 +3250,29 @@ function each(getArray, render, options) {
       }
     });
   }
-  const binding = structuralBinding(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 = structuralBinding(update, anchor);
   const untrack = binding.stop;
   const disposeRange = () => {
     if (rangeDisposed) return;
@@ -2314,13 +3295,15 @@ function each(getArray, render, options) {
     pendingCount = 0;
   };
   registerDisposer(anchor, disposeRange);
+  registerRange(anchor, () => sentinelInserted ? end : null);
   if (!initialized) {
-    queueMicrotask(
+    const frozen = captureFrozen();
+    queueFirstRender(
+      anchor,
       bindOwnerScope(() => {
-        if (!initialized && !rangeDisposed && anchor.parentNode) {
-          binding.run(update);
-        }
-      })
+        if (!initialized && !rangeDisposed && anchor.parentNode) binding.run(update);
+      }),
+      frozen
     );
   }
   return anchor;
@@ -2364,7 +3347,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)));
@@ -2813,13 +3796,17 @@ function KeepAlive(activeKey, cases, options) {
     currentNode = node;
     initialized = true;
   };
-  const binding = structuralBinding(update);
+  const binding = structuralBinding(update, anchor);
+  registerNodesRange(anchor, () => [currentNode]);
   const untrack = binding.stop;
   if (!initialized) {
-    queueMicrotask(
+    const frozen = captureFrozen();
+    queueFirstRender(
+      anchor,
       bindOwnerScope(() => {
         if (!initialized && anchor.parentNode) binding.run(update);
-      })
+      }),
+      frozen
     );
   }
   registerDisposer(anchor, () => {
@@ -2847,8 +3834,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) {
@@ -2871,7 +3858,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;
@@ -2919,6 +3906,123 @@ function unmountRange(start, end) {
   end.parentNode?.removeChild(end);
 }
 
+// src/core/signals/lifecycleScope.ts
+var STATES = ["active", "paused", "ended"];
+var ENDED = 2;
+var NOOP3 = () => {
+};
+var scopeOwners = globalSingleton(
+  /* @__PURE__ */ Symbol.for("sibujs.lifecycleScope.owners.v1"),
+  () => /* @__PURE__ */ new WeakMap()
+);
+function scopeOwner(scope) {
+  return scopeOwners.get(scope);
+}
+function lifecycleScope() {
+  const held = captureFrozen();
+  const inOwnerScope = bindOwnerScope((fn) => fn());
+  const ended = () => held.state() === ENDED;
+  const own = (register) => {
+    let disposed = false;
+    let stop2 = null;
+    let dropWait = NOOP3;
+    let dropEnd = NOOP3;
+    const dispose2 = () => {
+      if (disposed) return;
+      disposed = true;
+      dropWait();
+      dropEnd();
+      const running = stop2;
+      stop2 = null;
+      running?.();
+    };
+    const start = () => {
+      dropWait = NOOP3;
+      if (disposed) return;
+      dropEnd = held.onEnd(dispose2);
+      if (disposed) return;
+      let created;
+      try {
+        created = held.run(() => inOwnerScope(register));
+      } catch (err) {
+        disposed = true;
+        dropEnd();
+        dropEnd = NOOP3;
+        throw err;
+      }
+      if (disposed) created();
+      else stop2 = created;
+    };
+    const state = held.state();
+    if (state === ENDED) disposed = true;
+    else if (state === 1) dropWait = held.wait(start, dispose2);
+    else start();
+    return dispose2;
+  };
+  const onState = (want, callback) => held.onChange((state) => {
+    if (state === 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 INERT = { done: () => {
+}, cancel: () => {
+}, settled: true };
+function pendingContent(at) {
+  if (isServer()) return INERT;
+  const isNode = typeof at.nodeType === "number";
+  const held = isNode ? null : scopeOwner(at) ?? null;
+  if (!isNode && (held === null || held.state() === 2)) return INERT;
+  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();
@@ -4047,6 +5151,9 @@ export {
   __renderParsedTemplate,
   KeepAlive,
   mount,
+  scopeOwner,
+  lifecycleScope,
+  pendingContent,
   Portal,
   getSlot,
   array,