@abide/abide 0.48.0 → 0.50.0

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

@@ -1,18 +1,18 @@
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
-import { claimChild } from '../runtime/claimChild.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,
@@ -38,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)
@@ -51,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}`/
@@ -72,31 +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 => {
-        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
@@ -108,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'
     }
 
@@ -135,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
             }
         }
@@ -161,29 +148,36 @@ 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)
-        const dispose = group.track(scope(() => build(parent)))
-        const close = claimChild(cursor, parent)
-        cursor.next.set(parent, close?.nextSibling ?? null)
-        /* Bracket the adopted nodes: `[` before the first claimed node (or before `close`
-           for an empty branch), `]` then the anchor just before `close`. */
-        const start = document.createComment(RANGE_OPEN)
-        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 }
+        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. */
+            const close = claimExpected(cursor, parent, `/abide:await:${id} close marker`)
+            cursor.next.set(parent, close.nextSibling ?? null)
+            /* Bracket the adopted nodes: `[` before the first claimed node (or before `close`
+               for an empty branch), `]` then the anchor just before `close`. */
+            const start = document.createComment(RANGE_OPEN)
+            parent.insertBefore(start, firstAdopted ?? close)
+            const end = document.createComment(RANGE_CLOSE)
+            parent.insertBefore(end, close)
+            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. */
@@ -193,15 +187,10 @@ export function awaitBlock(
             `/abide:await:${id}`,
             hydration as NonNullable<typeof hydration>,
         )
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, after)
-        const previous = RENDER.hydration
-        RENDER.hydration = undefined
-        try {
-            render(promiseThunk())
-        } finally {
-            RENDER.hydration = previous
-        }
+        const anchorNode = document.createTextNode('')
+        branch.anchor = anchorNode
+        parent.insertBefore(anchorNode, after)
+        withoutHydration(() => render(promiseThunk()))
     }
 
     /* The first run when hydrating: adopt by precedence (resume / warm-sync), else
@@ -211,7 +200,9 @@ export function awaitBlock(
        warm cache (or re-fetches) instead of crashing hydration. */
     const firstHydrate = (): void => {
         const cursor = hydration as NonNullable<typeof hydration>
-        const open = claimChild(cursor, parent)
+        /* The await block's open marker is compiler-guaranteed — claimExpected throws a
+           legible desync here rather than propagating a null that over-clears the parent. */
+        const open = claimExpected(cursor, parent, `abide:await:${id} open marker`)
         /* RESUME holds the ref-json-encoded entry STRING; decode here, where the codec
            lives. A decode failure (malformed/absent payload) reads as "no resume" — fall
            through to the live promise rather than crash hydration. */
@@ -280,18 +271,13 @@ 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 (mirrors `rebuildCold`) so its `cloneStatic`/text don't try to
+           the claim cursor (see withoutHydration) so its `cloneStatic`/text don't try to
            claim discarded nodes and silently render nothing. */
-        const previous = RENDER.hydration
-        RENDER.hydration = undefined
-        try {
-            render(result)
-        } finally {
-            RENDER.hydration = previous
-        }
+        withoutHydration(() => render(result))
     }
 
     effect(() => {
@@ -304,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/discardBoundary.ts

@@ -10,14 +10,32 @@ export function discardBoundary(
     closeData: string,
     hydration: NonNullable<(typeof RENDER)['hydration']>,
 ): Node | null {
-    let node = open
-    let after: Node | null = null
+    /* Nothing to discard (no open marker) — park the cursor and return, as before. */
+    if (open === null) {
+        hydration.next.set(parent, null)
+        return null
+    }
+    /* Locate the close marker WITHOUT mutating first. Removing as we walk would, on a
+       marker/id desync (the await/try block-id counter drifting between server and
+       client), delete every remaining sibling before discovering there is no match —
+       silently wiping unrelated later content. Throw AT the divergence like `outlet`
+       instead, rather than over-clear to end-of-parent. */
+    let close: Node | null = open
+    while (close !== null && (close as { data?: string }).data !== closeData) {
+        close = close.nextSibling
+    }
+    if (close === null) {
+        throw new Error(
+            `[abide] hydration desync: boundary open marker has no matching close "${closeData}" — the server DOM is truncated or the block id drifted.`,
+        )
+    }
+    const after = close.nextSibling
+    /* Remove open..close inclusive now that the range is known-bounded. */
+    let node: Node | null = open
     while (node !== null) {
-        const next = node.nextSibling
-        const isClose = (node as { data?: string }).data === closeData
+        const next: Node | null = node.nextSibling
         parent.removeChild(node)
-        if (isClose) {
-            after = next
+        if (node === close) {
             break
         }
         node = next

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,10 +1,13 @@
 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'
 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'
@@ -40,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. */
@@ -65,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 }
@@ -78,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 }
     }
@@ -106,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)) {
@@ -144,12 +166,11 @@ export function each<T>(
            write that reconciles *mid-hydrate* (RENDER.hydration still active — e.g. a
            page setting shared state during the hydrate pass) would otherwise make
            buildRow and its inner row render claim SSR nodes that don't exist for a
-           freshly keyed row. The same `next` Map is restored, so the outer hydration
-           cursor is untouched (mirrors awaitBlock/tryBlock). */
-        const previousHydration = RENDER.hydration
-        RENDER.hydration = undefined
-        try {
-            const list = Array.isArray(source) ? source : [...source]
+           freshly keyed row. withoutHydration restores the outer cursor after, so the
+           enclosing hydrate pass is untouched (mirrors awaitBlock/tryBlock). */
+        withoutHydration(() => {
+            /* 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
@@ -183,6 +204,16 @@ export function each<T>(
             for (let index = list.length - 1; index >= 0; index -= 1) {
                 let row = resolved[index]
                 if (row === undefined) {
+                    /* Duplicate key within this list: a row for this key was already built
+                       earlier in this pass. Building another and rows.set-ing it would
+                       overwrite the map entry for the first, orphaning it — the prune loop
+                       only reaches rows still in the map, so it would leak on screen forever.
+                       Collapse to one row (like the hydration path above), skipping this
+                       index rather than inserting an unreachable duplicate. */
+                    const built = rows.get(keys[index] as string)
+                    if (built !== undefined && built.gen === pass) {
+                        continue
+                    }
                     row = buildRow(list[index] as T, index)
                     row.gen = pass
                     rows.set(keys[index] as string, row)
@@ -197,8 +228,6 @@ export function each<T>(
                 placeBefore(row, cursor)
                 cursor = row.start
             }
-        } finally {
-            RENDER.hydration = previousHydration
-        }
+        })
     })
 }

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/fillBefore.ts

@@ -1,5 +1,5 @@
-import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { withoutHydration } from '../runtime/withoutHydration.ts'
 import { enterNamespace } from './enterNamespace.ts'
 
 /*
@@ -29,15 +29,14 @@ export function fillBefore(end: Node, content: (into: Node) => void): () => void
         return () => {}
     }
     const fragment = document.createDocumentFragment()
-    const previousHydration = RENDER.hydration
-    RENDER.hydration = undefined
-    try {
+    /* `fillBefore` is exclusively the CREATE path, so build with the claim cursor
+       cleared (see withoutHydration): a rebuild that runs mid-hydrate must not claim
+       SSR nodes that don't exist for this fresh content. */
+    return withoutHydration(() => {
         /* Build under the insertion parent's foreign namespace (if any), so foreign
            elements built into the fragment are namespaced off `end`'s live parent. */
         const dispose = enterNamespace(end.parentNode ?? end, () => scope(() => content(fragment)))
         ;(end.parentNode ?? end).insertBefore(fragment, end)
         return dispose
-    } finally {
-        RENDER.hydration = previousHydration
-    }
+    })
 }

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) }
 }