@abide/abide 0.49.0 → 0.50.0

package/src/lib/ui/dom/awaitBlock.ts

@@ -1,19 +1,18 @@
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
+import { CURRENT_BOUNDARY } from '../runtime/CURRENT_BOUNDARY.ts'
 import { claimExpected } from '../runtime/claimExpected.ts'
 import { generationGuard } from '../runtime/generationGuard.ts'
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import type { ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
-import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { withoutHydration } from '../runtime/withoutHydration.ts'
 import { state } from '../state.ts'
-import { buildDetachedRange } from './buildDetachedRange.ts'
+import { anchoredBranch } from './anchoredBranch.ts'
 import { discardBoundary } from './discardBoundary.ts'
-import { removeRange } from './removeRange.ts'
 
 /*
 Async binding — the runtime for `<template await>`. Renders the pending branch,
@@ -39,12 +38,13 @@ parked just before the close marker.
 // @documentation plumbing
 export function awaitBlock(
     parent: Node,
-    id: number,
+    id: string,
     promiseThunk: () => unknown,
     renderPending: ((parent: Node) => void) | undefined,
     renderThen: (parent: Node, value: unknown) => void,
-    /* Absent when the block has no catch branch — a rejection then surfaces (re-throws
-       to the unhandled-rejection path) instead of rendering an empty branch. */
+    /* Absent when the block has no catch branch — a rejection then routes to the enclosing
+       {#try} boundary captured at build (if any), else surfaces (re-throws to the
+       unhandled-rejection path) instead of rendering an empty branch. */
     renderCatch: ((parent: Node, error: unknown) => void) | undefined,
     /* A static node located by the skeleton: the block's anchor inserts before it on
        create (block before a static suffix). Null appends (tail). insertBefore(x, null)
@@ -52,11 +52,16 @@ export function awaitBlock(
     before: Node | null = null,
 ): void {
     const hydration = RENDER.hydration
+    /* The enclosing {#try} boundary ambient at BUILD (like createEffectNode captures it). A
+       catch-less rejection settles LATER, after CURRENT_BOUNDARY has been restored, so we must
+       capture it into this closure now rather than read it at settle time. */
+    const capturedBoundary = CURRENT_BOUNDARY.current
     /* The live branch's scope, registered with the owner so it disposes on owner
        teardown — not only when a settle/re-run swaps branches via detach. */
     const group = scopeGroup()
-    let active: { start: Comment; end: Comment; dispose: () => void } | undefined
-    let anchor: Node | undefined
+    /* The single active branch mounted before an anchor — owns `active`/`detach`/`place`/
+       adopt-strand guard (shared with `tryBlock`); this block keeps its bespoke settlement. */
+    const branch = anchoredBranch(parent, group)
     let first = true
     /* Bumped each run so a prior run's in-flight promise can't clobber a newer one, AND on
        owner teardown so an in-flight promise that settles AFTER the enclosing `{#if}`/
@@ -73,43 +78,6 @@ export function awaitBlock(
        place (then→then) or must build a fresh branch. */
     let activeKind: 'pending' | 'then' | 'catch' | undefined
 
-    const detach = (): void => {
-        if (active !== undefined) {
-            active.dispose()
-            /* `removeRange` evicts the markers AND everything between them via the end
-               marker's LIVE parent — not the captured `parent`, which (when this await is a
-               bare child of a control-flow branch) is the branch's build fragment, emptied
-               into the document once the enclosing block placed it. */
-            removeRange(active.start, active.end)
-            active = undefined
-        }
-    }
-
-    /* Replace the current content with a freshly-built branch, before the anchor. The branch
-       builds into a detached `[`…`]`-bracketed fragment (so any content — components, text,
-       nested blocks — appends freely), the same create primitive the keyed-list runtimes use,
-       which lands as a marker-bounded range the next swap detaches with `removeRange`. */
-    const place = (build: (parent: Node) => void): void => {
-        /* Backstop for a settle whose anchor has been detached from the tree. The
-           generationGuard is the PRIMARY defense — it drops a late settle after the owner
-           tears down — but it only covers teardowns that dispose THIS block's scope. A
-           gap (e.g. a nested hydration `adopt` that aborts to `rebuildCold`, leaving the
-           inner block's range removed while its guard stays live) can still route a late
-           settle here with `anchor` already pulled out of the DOM. Inserting before a
-           node that is no longer a child of any parent throws a `NotFoundError` from
-           `insertBefore` — surfacing as a process-fatal unhandled rejection under Bun. A
-           detached anchor unambiguously means the block is gone, so drop the settle. */
-        if (anchor !== undefined && anchor.parentNode === null) {
-            return
-        }
-        detach()
-        const namespaceParent = anchor?.parentNode ?? parent
-        const { start, end, fragment, dispose } = buildDetachedRange(namespaceParent, build)
-        const tracked = group.track(dispose)
-        namespaceParent.insertBefore(fragment, anchor ?? null)
-        active = { start, end, dispose: tracked }
-    }
-
     /* Settle to a resolved value. then→then updates the cell in place — the branch and its
        inner each survive (no flash); any other prior kind builds a fresh then-branch around
        a new cell. renderThen receives the CELL (not the raw value), so the branch reads it
@@ -121,17 +89,23 @@ export function awaitBlock(
         }
         const cell = state(value)
         valueCell = cell
-        place((host) => renderThen(host, cell))
+        branch.place((host) => renderThen(host, cell))
         activeKind = 'then'
     }
 
-    /* Settle to a rejection: surface it with no catch branch, else swap to the catch branch. */
+    /* Settle to a rejection: with a local catch branch, swap to it. With no local catch, route
+       to the enclosing {#try} boundary captured at build if one was ambient; otherwise surface
+       (unhandled rejection), preserving the prior behaviour when there's no boundary. */
     const settleError = (error: unknown): void => {
         if (renderCatch === undefined) {
+            if (capturedBoundary !== undefined) {
+                capturedBoundary.handle(error)
+                return
+            }
             throw error
         }
         valueCell = undefined
-        place((host) => renderCatch(host, error))
+        branch.place((host) => renderCatch(host, error))
         activeKind = 'catch'
     }
 
@@ -148,10 +122,10 @@ export function awaitBlock(
            shows the pending branch (or detaches) while the promise is in flight. */
         if (activeKind !== 'then') {
             if (renderPending !== undefined) {
-                place((host) => renderPending(host))
+                branch.place((host) => renderPending(host))
                 activeKind = 'pending'
             } else {
-                detach()
+                branch.detach()
                 activeKind = undefined
             }
         }
@@ -174,37 +148,14 @@ export function awaitBlock(
        marker for later swaps. The adopted content is everything the build claimed between
        the open and close markers; bracketing it makes the adopted branch a marker-bounded
        range identical to a freshly-`place`d one, so the FIRST swap detaches it with
-       `removeRange` like every later swap (no node-array special case). */
+       `removeRange` like every later swap (no node-array special case). `adoptStrand` carries
+       the shared strand-dispose guard; the `afterBuild` closure below is await's bespoke
+       bracketing — it runs only after a clean build. */
     const adopt = (open: Node | null, build: (parent: Node) => void): void => {
         const cursor = hydration as NonNullable<typeof hydration>
         const firstAdopted = open?.nextSibling ?? null
         cursor.next.set(parent, firstAdopted)
-        /* Adoption is guarded (see firstHydrate): a build that can't claim the server
-           markup — a resume value that didn't round-trip, a nested-adopt claim desync —
-           throws, and the caller recovers via `rebuildCold`. But the partial build may have
-           already created a live sub-scope (an inner `await`'s effect/guard, a subscription)
-           before it threw; letting the throw escape `scope()` would strand that scope's
-           disposer (unreachable → never disposed), leaking the effect AND leaving its guard
-           un-bumped so a late settle stays "live". So capture the build's error, ALWAYS take
-           the returned disposer, and dispose it on ANY failure before rethrowing — `rebuildCold`
-           then starts from a clean slate. */
-        let dispose: (() => void) | undefined
-        try {
-            let buildFailed = false
-            let buildError: unknown
-            dispose = group.track(
-                scope(() => {
-                    try {
-                        build(parent)
-                    } catch (error) {
-                        buildFailed = true
-                        buildError = error
-                    }
-                }),
-            )
-            if (buildFailed) {
-                throw buildError
-            }
+        branch.adoptStrand(build, () => {
             /* A guaranteed control-flow marker — claimExpected throws on a desync (caught by
                firstHydrate's adopt try/catch → rebuildCold) instead of silently claiming null
                and over-clearing the parent. */
@@ -216,22 +167,17 @@ export function awaitBlock(
             parent.insertBefore(start, firstAdopted ?? close)
             const end = document.createComment(RANGE_CLOSE)
             parent.insertBefore(end, close)
-            anchor = document.createTextNode('')
-            parent.insertBefore(anchor, close)
-            active = { start, end, dispose }
-        } catch (error) {
-            /* `dispose` (the group-tracked wrapper) is idempotent; running it here tears the
-               partial branch scope down and drops it from the group so `rebuildCold` doesn't
-               inherit a stranded scope, then the caller's `catch` falls back to a cold build. */
-            dispose?.()
-            throw error
-        }
+            const anchorNode = document.createTextNode('')
+            parent.insertBefore(anchorNode, close)
+            branch.anchor = anchorNode
+            return { start, end }
+        })
     }
 
     /* Discard the SSR boundary and (re)build the block from the live promise, fresh
        (hydration off) — the recovery path when adoption can't use the server markup. */
     const rebuildCold = (open: Node | null): void => {
-        detach()
+        branch.detach()
         /* Insert at the node AFTER the discarded boundary (its return) — NOT the captured
            `before`, which for a skeleton-anchored block is the open boundary itself and is
            removed here, so reusing it throws `NotFoundError` in a strict DOM. */
@@ -241,8 +187,9 @@ export function awaitBlock(
             `/abide:await:${id}`,
             hydration as NonNullable<typeof hydration>,
         )
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, after)
+        const anchorNode = document.createTextNode('')
+        branch.anchor = anchorNode
+        parent.insertBefore(anchorNode, after)
         withoutHydration(() => render(promiseThunk()))
     }
 
@@ -324,8 +271,9 @@ export function awaitBlock(
         }
         /* Insert at the node after the discarded boundary (see `rebuildCold`). */
         const after = discardBoundary(parent, open, `/abide:await:${id}`, cursor)
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, after)
+        const anchorNode = document.createTextNode('')
+        branch.anchor = anchorNode
+        parent.insertBefore(anchorNode, after)
         /* The boundary's server nodes are gone, so the pending branch builds FRESH — clear
            the claim cursor (see withoutHydration) so its `cloneStatic`/text don't try to
            claim discarded nodes and silently render nothing. */
@@ -342,8 +290,9 @@ export function awaitBlock(
                 firstHydrate()
                 return
             }
-            anchor = document.createTextNode('')
-            parent.insertBefore(anchor, before)
+            const anchorNode = document.createTextNode('')
+            branch.anchor = anchorNode
+            parent.insertBefore(anchorNode, before)
         }
         /* Read the promise every subsequent run so an invalidate re-runs the block. ONLY this
            read is tracked (the branch builds untracked via `scope`), so the block re-runs only

package/src/lib/ui/dom/bindProp.ts

@@ -0,0 +1,22 @@
+/*
+The parent half of a component `bind:prop={target}`: annotates the prop's value
+thunk with a `set` write-back channel, so the same `() => value` entry every prop
+compiles to ALSO carries a setter. A read-only consumer calls the thunk (`$props[key]?.()`)
+and gets the value exactly as for a plain prop — the `set` simply rides along, invisible
+to code that doesn't look for it (`restProps`/`mergeProps`/`spreadProps` pass the thunk
+through untouched). The child upgrades the prop to a writable cell (`bindableProp`) only
+when it writes or forwards it, and reaches this setter through `.set`.
+
+`read`/`write` are the caller's lowered bind accessors — an lvalue target reads as
+itself and writes by assignment, a `{ get, set }` accessor reads via `get()` and writes
+via `set(next)` — so a component bind accepts the same targets an element bind does.
+*/
+// @documentation plumbing
+export function bindProp<T>(
+    read: () => T,
+    write: (next: T) => void,
+): (() => T) & { set: (next: T) => void } {
+    const thunk = read as (() => T) & { set: (next: T) => void }
+    thunk.set = write
+    return thunk
+}

package/src/lib/ui/dom/bindableProp.ts

@@ -0,0 +1,47 @@
+import { linked } from '../linked.ts'
+import type { State } from '../runtime/types/State.ts'
+import type { UiProps } from '../runtime/types/UiProps.ts'
+
+/*
+The child half of a two-way prop: the writable cell a component gets for a prop it
+WRITES or forwards to another `bind:` target. A prop the child only reads stays a
+read-only derive (unchanged, cheap); this upgrade is emitted only for the props the
+compiler sees written, so the common case pays nothing.
+
+Whether the prop is actually two-way is decided at construction from what the parent
+passed:
+  • Bound (`bind:prop` on the parent) — the value thunk carries a `set` (see `bindProp`),
+    so the cell is a pass-through accessor: reads pull the parent's value (tracking its
+    reactive source), writes go straight upstream. The parent's target is the single
+    source of truth, so no local copy is kept.
+  • Unbound (plain `prop={value}`, or the prop was never passed) — no setter exists, so
+    the cell degrades to a local `linked` cell seeded from the parent value: it reseeds
+    when the parent value changes and holds local writes in between. The component still
+    works standalone; its writes just don't flow anywhere.
+
+`fallback` supplies the destructure's `= default` when the prop is absent/undefined,
+matching the read-only derive's `?? default`.
+*/
+// @documentation plumbing
+export function bindableProp<T>(props: UiProps, key: string, fallback?: () => T): State<T> {
+    const entry = (props as Record<string, unknown>)[key]
+    const read = (): T => {
+        const value = typeof entry === 'function' ? (entry as () => T)() : (entry as T)
+        return (value === undefined ? fallback?.() : value) as T
+    }
+    const setter =
+        typeof entry === 'function' ? (entry as { set?: (next: T) => void }).set : undefined
+    if (setter !== undefined) {
+        /* Bound: a pure pass-through to the parent's target — no local store. */
+        return {
+            get value(): T {
+                return read()
+            },
+            set value(next: T) {
+                setter(next)
+            },
+        }
+    }
+    /* Unbound: a local reseeding cell — writes echo locally, reseed on parent change. */
+    return linked(read) as State<T>
+}

package/src/lib/ui/dom/cellPending.ts

@@ -0,0 +1,24 @@
+import { isAsyncCell } from '../../shared/isAsyncCell.ts'
+import type { AsyncComputed } from '../../shared/types/AsyncComputed.ts'
+
+/*
+Whether a control-flow subject (`{#if}`/`{#switch}`) is a still-loading async cell — no
+value yet, no error (`AsyncComputed.pending()`). The compiler pairs it with the value read
+for a bare async subject: while `cellPending(cell)` is true the block renders NO branch, so
+"still loading" never collapses into the falsy branch (`{#if getProfile()}` does not flash
+its `{:else}` before the promise settles). A settled falsy value (or a held value being
+refreshed) is NOT pending, so it still routes to its branch. Non-async subjects (a plain
+value, a sync `computed`) are never pending — the block reads them directly.
+
+Reading `pending()` subscribes the block's effect to the cell's in-flight/has-value facets,
+so the block re-renders when the value arrives. An errored cell is NOT pending: the paired
+value read (`$$readCell`) then throws its `AsyncCellError`, routing the error to the nearest
+`{#try}` exactly as a bare read does.
+*/
+// @documentation plumbing
+export function cellPending(cell: unknown): boolean {
+    if (isAsyncCell(cell)) {
+        return (cell as AsyncComputed<unknown>).pending()
+    }
+    return false
+}

package/src/lib/ui/dom/disposeRange.ts

@@ -5,7 +5,8 @@ import { clearBetween } from './clearBetween.ts'
 The standard teardown for a marker-bounded range (component, layout/page boundary,
 slot): dispose its lexical scope (which stops the content's reactivity first, then its
 nested children and capabilities), and clear the nodes between the markers — leaving the
-markers in place so a hot swap rebuilds the range. Shared by every range mount
+markers in place so a later rebuild (navigation, control-flow re-fill) refills the range.
+Shared by every range mount
 (`fillRange`, `mountRange`, `fillBoundary`) so the one disposer contract lives in a
 single place.
 */

package/src/lib/ui/dom/each.ts

@@ -1,4 +1,5 @@
 import { effect } from '../effect.ts'
+import { CURRENT_PATH } from '../runtime/CURRENT_PATH.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { claimExpected } from '../runtime/claimExpected.ts'
 import { RENDER } from '../runtime/RENDER.ts'
@@ -6,6 +7,7 @@ import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { withoutHydration } from '../runtime/withoutHydration.ts'
+import { withPathFrom } from '../runtime/withPathFrom.ts'
 import { state } from '../state.ts'
 import { buildDetachedRange } from './buildDetachedRange.ts'
 import { moveRange } from './moveRange.ts'
@@ -41,8 +43,17 @@ export function each<T>(
        read them; a direct caller reads `item.value` / `index.value`. */
     render: (parent: Node, item: State<T>, index: State<number>) => void,
     before: Node | null = null,
+    /* Whether the each has an explicit `by` key. A KEYED row takes its stable key as its
+       render-path segment (survives reorders/reloads); a KEYLESS row (no `by`, so `keyOf`
+       returns the raw item identity — unstable) takes its POSITION instead, which is at least
+       deterministic SSR↔client for a single render. Absent → keyless (a direct caller). */
+    keyed = false,
 ): void {
     const rows = new Map<string, EachRow>()
+    /* This each's render-path ancestry, captured at construction; every row builds under
+       `basePath/segment` so a component/cell in a row gets a stable id, re-established on a
+       post-mount reconcile (when the ambient path is gone). */
+    const basePath = CURRENT_PATH.current
     /* Monotonic reconcile-pass id. Each reconcile stamps every surviving row with the
        current pass, so prune is a `row.gen !== pass` int compare instead of building a
        `Set` of present keys every reconcile. */
@@ -66,11 +77,19 @@ export function each<T>(
            reconcile below) instead of rebuilding it. */
         const cell = state(item) as State<unknown>
         const indexCell = state(position)
+        /* Keyed rows key their path on the stable key; keyless on the position. */
+        const segment = keyed ? keyOf(item) : position
         const hydration = RENDER.hydration
         if (hydration !== undefined) {
             const start = claimExpected(hydration, parent, 'each row start marker')
             hydration.next.set(parent, start.nextSibling)
-            const dispose = group.track(scope(() => render(parent, cell as State<T>, indexCell)))
+            const dispose = group.track(
+                scope(() =>
+                    withPathFrom(basePath, segment, () =>
+                        render(parent, cell as State<T>, indexCell),
+                    ),
+                ),
+            )
             const end = claimExpected(hydration, parent, 'each row end marker')
             hydration.next.set(parent, end.nextSibling)
             return { start, end, dispose, cell, indexCell }
@@ -79,7 +98,7 @@ export function each<T>(
            foreign namespace (so svg/math row children are namespaced, not built as HTML),
            held in `pending` until placement inserts it. */
         const { start, end, fragment, dispose } = buildDetachedRange(parent, (host) =>
-            render(host, cell as State<T>, indexCell),
+            withPathFrom(basePath, segment, () => render(host, cell as State<T>, indexCell)),
         )
         return { start, end, dispose: group.track(dispose), cell, indexCell, pending: fragment }
     }
@@ -107,7 +126,9 @@ export function each<T>(
     const hydration = RENDER.hydration
     if (hydration !== undefined) {
         let position = 0
-        for (const item of items()) {
+        /* An undefined source renders an empty list, not a throw — a `{#for x in promise}`
+           whose lifted source peeks undefined while pending (ADR-0032 D3). */
+        for (const item of items() ?? []) {
             const key = keyOf(item)
             const row = buildRow(item, position) // claims the SSR row where it sits
             if (rows.has(key)) {
@@ -148,7 +169,8 @@ export function each<T>(
            freshly keyed row. withoutHydration restores the outer cursor after, so the
            enclosing hydrate pass is untouched (mirrors awaitBlock/tryBlock). */
         withoutHydration(() => {
-            const list = Array.isArray(source) ? source : [...source]
+            /* Undefined source → empty list (see the hydration loop, ADR-0032 D3). */
+            const list = source == null ? [] : Array.isArray(source) ? source : [...source]
             const keys = list.map(keyOf)
             generation += 1
             const pass = generation

package/src/lib/ui/dom/eachAsync.ts

@@ -1,9 +1,12 @@
 import { effect } from '../effect.ts'
+import { CURRENT_BOUNDARY } from '../runtime/CURRENT_BOUNDARY.ts'
+import { CURRENT_PATH } from '../runtime/CURRENT_PATH.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { generationGuard } from '../runtime/generationGuard.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
+import { withPathFrom } from '../runtime/withPathFrom.ts'
 import { state } from '../state.ts'
 import { buildDetachedRange } from './buildDetachedRange.ts'
 import { removeRange } from './removeRange.ts'
@@ -32,11 +35,23 @@ export function eachAsync<T>(
        `each`; the streaming runtime rebuilds the row on a re-yield rather than patching, and
        the position is the stream arrival ordinal (a stream only appends, never reorders). */
     render: (parent: Node, item: State<T>, index: State<number>) => void,
-    /* Absent → an iterator rejection surfaces instead of rendering a catch branch. */
+    /* Absent → an iterator rejection routes to the enclosing {#try} boundary captured at build
+       (if any), else surfaces, instead of rendering a catch branch. */
     renderCatch: ((parent: Node, error: unknown) => void) | undefined,
     before: Node | null = null,
+    /* Explicit `by` key → the row keys its render-path segment on the stable key; else on the
+       stream arrival ordinal (a stream only appends, so the ordinal is stable). */
+    keyed = false,
 ): void {
     const rows = new Map<string, EachRow>()
+    /* This each's render-path ancestry, captured at build; each row builds under
+       `basePath/segment` so a component/cell in a streamed row gets a stable id even though the
+       row arrives after the ambient path is gone. */
+    const basePath = CURRENT_PATH.current
+    /* The enclosing {#try} boundary ambient at BUILD (see `awaitBlock`). A catch-less rejection
+       arrives LATER from the async drain, after CURRENT_BOUNDARY has been restored, so capture
+       it into this closure now rather than read it at settle time. */
+    const capturedBoundary = CURRENT_BOUNDARY.current
     /* Each row's (and the error branch's) scope, registered with the owner so they
        dispose on owner teardown; the block's own teardown only stops the stream. */
     const group = scopeGroup()
@@ -87,6 +102,17 @@ export function eachAsync<T>(
         iterator?.return?.(undefined)?.catch(() => undefined) // close the superseded run's iterator before re-streaming
         iterator = undefined
         clearError() // a fresh run drops a prior error branch
+        /* A reseed streams a FRESH source (e.g. `room(newId)`), so the prior run's rows are stale.
+           Drop them now rather than relying on the drain's completion prune below — a never-
+           completing source (a socket) never reaches that prune, so a key the new stream doesn't
+           re-yield would otherwise leak in the DOM and the `rows` map forever (and mix the old
+           source's rows in with the new). Keys the new stream does re-yield rebuild fresh (the
+           block rebuilds on every re-yield regardless), so nothing reusable is lost. */
+        for (const [, row] of rows) {
+            row.dispose()
+            removeRange(row.start, row.end)
+        }
+        rows.clear()
         const iterable = items() // read (subscribe) synchronously
         const present = new Set<string>()
         let arrivals = 0 // stream arrival ordinal → each row's index
@@ -110,9 +136,14 @@ export function eachAsync<T>(
                 const stale = rows.get(key)
                 const cell = state(result.value) as State<unknown>
                 const indexCell = state(arrivals)
+                const segment = keyed ? key : arrivals
                 arrivals += 1
                 rows.set(key, {
-                    ...insertRange((host) => render(host, cell as State<T>, indexCell)),
+                    ...insertRange((host) =>
+                        withPathFrom(basePath, segment, () =>
+                            render(host, cell as State<T>, indexCell),
+                        ),
+                    ),
                     cell,
                     indexCell,
                 })
@@ -133,8 +164,13 @@ export function eachAsync<T>(
             if (!guard.live(generationAtStart)) {
                 return
             }
-            /* No catch branch → surface the rejection (mirrors `<template await>`). */
+            /* No catch branch → route to the enclosing {#try} boundary captured at build if one
+               was ambient; otherwise surface the rejection (mirrors `<template await>`). */
             if (renderCatch === undefined) {
+                if (capturedBoundary !== undefined) {
+                    capturedBoundary.handle(error)
+                    return
+                }
                 throw error
             }
             /* Keep the streamed rows; render the catch branch after them, at the anchor. */

package/src/lib/ui/dom/fillBoundary.ts

@@ -24,15 +24,14 @@ export function fillBoundary(
     close: Comment,
     build: (host: Node, props?: UiProps) => void,
     props: UiProps | undefined,
-    label: string | undefined,
 ): { dispose: () => void } {
     const hydration = RENDER.hydration
     if (hydration === undefined) {
-        return fillRange(open, close, build, props, label)
+        return fillRange(open, close, build, props)
     }
     /* Hydrate: adopt the server content between the markers in place. */
     const parent = open.parentNode as Node
     hydration.next.set(parent, open.nextSibling)
-    const scoped = withScope(label, () => scope(() => build(parent, props)))
+    const scoped = withScope(() => scope(() => build(parent, props)))
     return { dispose: disposeRange(scoped, open, close) }
 }

package/src/lib/ui/dom/fillRange.ts

@@ -14,8 +14,9 @@ selector-transparent (a true direct child of its parent, no `<abide-name>` wrapp
 Brackets a render pass (a nested child continues the parent's block-id counter) and
 establishes the child's lexical scope in `awaiting` mode so it adopts the model doc
 its first `doc()` creates. The disposer stops the content's reactivity, disposes the
-lexical scope, and clears the range — leaving the markers, so a hot swap rebuilds in
-place. Shared by `mountRange` (create branch) and `hotReplace` (re-fill on edit).
+lexical scope, and clears the range — leaving the markers, so a later rebuild
+(navigation, control-flow re-fill) fills in place. Shared by `mountRange` (create
+branch) and `fillBoundary` (a page/layout outlet boundary).
 */
 // @documentation plumbing
 export function fillRange(
@@ -23,8 +24,7 @@ export function fillRange(
     end: Comment,
     build: (host: Node, props?: UiProps) => void,
     props: UiProps | undefined,
-    label: string | undefined,
 ): { start: Comment; end: Comment; dispose: () => void } {
-    const scoped = withScope(label, () => fillBefore(end, (fragment) => build(fragment, props)))
+    const scoped = withScope(() => fillBefore(end, (fragment) => build(fragment, props)))
     return { start, end, dispose: disposeRange(scoped, start, end) }
 }

package/src/lib/ui/dom/hydrate.ts

@@ -1,8 +1,6 @@
-import { hydratingSlot } from '../../shared/hydratingSlot.ts'
-import { wakeHydrationPeeks } from '../../shared/wakeHydrationPeeks.ts'
+import { hydrationWindow } from '../../shared/hydrationWindow.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
-import { scopeLabel } from './scopeLabel.ts'
 import { withScope } from './withScope.ts'
 
 /*
@@ -27,21 +25,17 @@ export function hydrate(
     props?: unknown,
 ): () => void {
     const previous = RENDER.hydration
-    const previousHydrating = hydratingSlot.active
     RENDER.hydration = { next: new Map() }
-    hydratingSlot.active = true
+    hydrationWindow.enter()
     try {
         /* Same shared mount core as `mount` (see `withScope`) — a hydrated component owns a
            scope too, adopting the model its build adopts — run with the claim cursor active. */
-        const { lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
+        const { lexical } = withScope(() => scope(() => build(host, props)))
         return () => lexical.dispose()
     } finally {
         RENDER.hydration = previous
-        hydratingSlot.active = previousHydrating
-        /* Wake the peeks this pass withheld — only when unwinding the OUTERMOST pass, so a
-           nested child hydrate doesn't fire it early (save/restore, not a bare reset). */
-        if (!previousHydrating) {
-            wakeHydrationPeeks()
-        }
+        /* Outermost exit clears the window and wakes the peeks this pass withheld; a nested
+           child hydrate raises/lowers the depth without firing it early. */
+        hydrationWindow.exit()
     }
 }

package/src/lib/ui/dom/isComment.ts

@@ -1,6 +1,6 @@
 /* A comment node carrying exactly `data`. Empty-child check distinguishes the
    `<!--data-->` marker from an element that happens to expose a `data` property.
-   Shared by the marker-range scanners in appendText/applyResolved. */
+   Shared by the marker-range scanners in appendText. */
 export function isComment(node: Node, data: string): boolean {
     return (node as { data?: string }).data === data && node.childNodes.length === 0
 }

package/src/lib/ui/dom/matchingRangeClose.ts

@@ -0,0 +1,29 @@
+import { commentData } from './commentData.ts'
+import { markerDepthDelta } from './markerDepthDelta.ts'
+
+/*
+The `]` close marker that balances the `[` range opened by `open`, found by a DEPTH-counting
+scan over the following siblings. A branch's content can hold nested `[`…`]` (if/switch/each)
+and `abide:`…`/abide:` (await/try/snippet) ranges — `markerDepthDelta` scores each open `+1`
+and each close `-1`, so an INNER close is skipped and only the one that returns to depth 0 is
+this range's own. Unlike `discardBoundary`'s named-boundary scan (a unique id-suffixed close
+string), the `[`/`]` alphabet is non-unique, so the depth count is what tells nested closes
+apart. Throws on a desync (no balancing close) rather than over-scan to end-of-parent.
+*/
+export function matchingRangeClose(open: Node): Node {
+    let depth = 1
+    let node = open.nextSibling
+    while (node !== null) {
+        const data = commentData(node)
+        if (data !== undefined) {
+            depth += markerDepthDelta(data)
+            if (depth === 0) {
+                return node
+            }
+        }
+        node = node.nextSibling
+    }
+    throw new Error(
+        '[abide] hydration desync: a control-flow range open marker "[" has no balancing close "]" — the server DOM is truncated or a block diverged.',
+    )
+}