@abide/abide 0.31.1 → 0.32.1

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

@@ -3,50 +3,82 @@ import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { moveRange } from './moveRange.ts'
+import { removeRange } from './removeRange.ts'
 import type { EachRow } from './types/EachRow.ts'
 
 /*
-Keyed list binding — the runtime for `<template each key=>`. Rows live in their own
-region, bounded by a trailing anchor so positioning is relative to the each itself,
-never `parent.firstChild` — a sibling before the each (e.g. a static nav link) must
-not be treated as the first row. An effect tracks `items()` and reconciles by key:
-a new key renders a row in its own ownership scope (so the row's bindings dispose
-when it leaves), and a departed key disposes and is removed. Keying by identity
-(not index) lets a row keep its node and inner effects across a reorder.
+Keyed list binding — the runtime for `<template each key=>`. Each row is a content
+RANGE bounded by two comment markers, so a row holds anything — elements,
+components, text, nested control-flow — not just one node. Rows live before a
+trailing anchor so positioning is relative to the each itself. An effect tracks
+`items()` and reconciles by key: a new key builds a row in its own ownership scope,
+a departed key disposes and its range is removed. Keying by identity lets a row
+keep its range and inner effects across a reorder.
 
 Placement walks the desired list *backwards* from the trailing anchor, holding a
-cursor at the node each row should precede; a row already sitting there is left
-untouched, so a stable list does zero DOM moves and an append does exactly one —
-only out-of-place rows are re-inserted (`insertBefore` on an in-place node would
-otherwise remove-then-reinsert it, O(rows) moves per change). Departed rows are
-pruned *before* placement so their nodes can't shift the cursor's sibling checks.
+cursor at the node each row should precede; a row already ending there is left
+untouched, so a stable list does zero DOM moves and an append exactly one — only an
+out-of-place row's range is moved. Departed rows are pruned *before* placement.
 
-On hydrate the SSR rows are already in place and in order: claim each one where it
-sits (no reordering), park the anchor after them, and skip the first reconcile.
+On hydrate the SSR rows are already in place and in order: each row claims its
+markers and content where they sit (no reordering), the anchor parks after them,
+and the first reconcile is skipped.
 */
 // @readme plumbing
 export function each<T>(
     parent: Node,
     items: () => Iterable<T>,
     keyOf: (item: T) => string,
-    render: (parent: Node, item: T) => Node,
+    render: (parent: Node, item: T) => void,
 ): void {
     const rows = new Map<string, EachRow>()
 
-    /* Build one row in its own scope (render claims on hydrate, creates otherwise). */
+    /* Build a row's range. Hydrate mode (only while the claim cursor is active —
+       read fresh, since a row built by a post-hydration reconcile must create, not
+       claim): claim the start marker, build content in place, claim the end marker.
+       Create mode: markers + content in a fragment, held in `pending` until placement
+       inserts it. */
     const buildRow = (item: T): EachRow => {
-        let node: Node | undefined
-        const dispose = scope(() => {
-            node = render(parent, item)
-        })
-        return { node: node as Node, dispose }
+        const hydration = RENDER.hydration
+        if (hydration !== undefined) {
+            const start = claimChild(hydration, parent) as Node
+            hydration.next.set(parent, start.nextSibling)
+            const dispose = scope(() => render(parent, item))
+            const end = claimChild(hydration, parent) as Node
+            hydration.next.set(parent, end.nextSibling)
+            return { start, end, dispose }
+        }
+        const start = document.createComment('[')
+        const end = document.createComment(']')
+        const pending = document.createDocumentFragment()
+        pending.appendChild(start)
+        const dispose = scope(() => render(pending, item))
+        pending.appendChild(end)
+        return { start, end, dispose, pending }
+    }
+
+    /* Place a row so its range ends just before `cursor`: insert a fresh row's
+       fragment, or move an existing range only when it isn't already there. Insert
+       via `cursor`'s LIVE parent, not the captured `parent` — when this `each` is a
+       bare child of a control-flow branch, `parent` is the branch's build fragment,
+       which the enclosing block has since emptied into the document. */
+    const placeBefore = (row: EachRow, cursor: Node): void => {
+        if (row.pending !== undefined) {
+            ;(cursor.parentNode ?? parent).insertBefore(row.pending, cursor)
+            row.pending = undefined
+            return
+        }
+        if (row.end.nextSibling !== cursor) {
+            moveRange(row.start, row.end, cursor)
+        }
     }
 
-    const hydration = RENDER.hydration
     let anchor: Node
     /* When hydrating, the first effect run must NOT reconcile — the rows it would
        build are already adopted in place below. */
     let adopting = false
+    const hydration = RENDER.hydration
     if (hydration !== undefined) {
         for (const item of items()) {
             rows.set(keyOf(item), buildRow(item)) // claims the SSR row where it sits
@@ -61,8 +93,7 @@ export function each<T>(
 
     effect(() => {
         /* Read (subscribe) every run, including the adopting one. Materialize a
-           non-array iterable to an array so a generator yields fresh each run and the
-           list can be safely traversed once for placement, once for pruning. */
+           non-array iterable to an array so a generator yields fresh each run. */
         const source = items()
         if (adopting) {
             adopting = false // rows already adopted in document order; nothing to move
@@ -71,18 +102,18 @@ export function each<T>(
         const list = Array.isArray(source) ? source : [...source]
         const keys = list.map(keyOf)
         const present = new Set(keys)
-        /* Prune departed rows first so their nodes don't sit between survivors and
+        /* Prune departed rows first so their ranges don't sit between survivors and
            throw off the in-place sibling checks below. */
         for (const [key, row] of rows) {
             if (!present.has(key)) {
                 row.dispose()
-                parent.removeChild(row.node)
+                removeRange(row.start, row.end)
                 rows.delete(key)
             }
         }
         /* Walk backwards from the anchor: `cursor` is the node the current row must
-           precede. A row already there keeps its place; only an out-of-order (or
-           freshly built) row is moved. Placement never touches preceding siblings. */
+           precede. A row already ending there keeps its place; only out-of-order (or
+           freshly built) rows move. */
         let cursor: Node = anchor
         for (let index = list.length - 1; index >= 0; index -= 1) {
             const key = keys[index] as string
@@ -91,19 +122,14 @@ export function each<T>(
                 row = buildRow(list[index] as T)
                 rows.set(key, row)
             }
-            if (row.node.nextSibling !== cursor) {
-                parent.insertBefore(row.node, cursor)
-            }
-            cursor = row.node
+            placeBefore(row, cursor)
+            cursor = row.start
         }
     })
 
-    /* Dispose every row still live when the enclosing scope tears down. The effect's
-       own disposer only unsubscribes it from `items()`; it never reaches the per-row
-       ownership scopes, which are pruned only on the departed-key path above. Without
-       this, a row whose binding subscribes to a longer-lived signal (a module store,
-       the cache, `page`) stays in that signal's observers after the list unmounts. The
-       host's DOM is cleared by `mount`, so disposal need not remove the nodes. */
+    /* Dispose every row still live when the enclosing scope tears down (the effect's
+       own disposer only unsubscribes it from `items()`). The host's DOM is cleared by
+       `mount`, so disposal need not remove the nodes. */
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => {
             for (const row of rows.values()) {

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

@@ -3,47 +3,33 @@ import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { removeRange } from './removeRange.ts'
 import type { EachRow } from './types/EachRow.ts'
 
 /*
 Async keyed list — the runtime for `<template each await key=>`. Like `each`, but
-over an AsyncIterable: rows append and reconcile by key as the iterator yields, so
-a live stream (an `async function*` rpc, a socket feed) lands row by row. Keying by
-identity lets a re-yielded key reuse its node and inner effects rather than append a
-duplicate.
+over an AsyncIterable: rows append and reconcile by key as the iterator yields. Each
+row is a content RANGE bounded by comment markers, so a row holds any content.
 
-SSR renders no rows — async sources are client-time (an infinite stream would hang
-SSR) — so hydration just parks the anchor before the next sibling (like an empty
-sync each) and the client drains the iterable. A reactive re-run (a cache
-invalidate, or the iterable expression changing) bumps the generation so a prior
-in-flight drain stops appending; departed keys are pruned once a drain completes
-(an infinite stream never prunes — rows accumulate / update in place).
+SSR renders no rows — async sources are client-time — so hydration just parks the
+anchor before the next sibling (like an empty sync each) and the client drains the
+iterable. A reactive re-run bumps the generation so a prior in-flight drain stops
+appending; departed keys are pruned once a drain completes.
 
 On a mid-stream rejection the already-streamed rows stay and the `<template catch>`
 branch (`renderCatch`) renders after them; absent a catch branch the rejection
-surfaces (re-throws) instead of being swallowed (mirrors `<template await>`).
+surfaces (re-throws), mirroring `<template await>`.
 */
 // @readme plumbing
 export function eachAsync<T>(
     parent: Node,
     items: () => AsyncIterable<T>,
     keyOf: (item: T) => string,
-    render: (parent: Node, item: T) => Node,
+    render: (parent: Node, item: T) => void,
     /* Absent → an iterator rejection surfaces instead of rendering a catch branch. */
-    renderCatch: ((parent: Node, error: unknown) => Node[]) | undefined,
+    renderCatch: ((parent: Node, error: unknown) => void) | undefined,
 ): void {
     const rows = new Map<string, EachRow>()
-
-    /* Build one row in its own scope so its bindings dispose when it leaves. Rows are
-       always created (never on the server), so this runs after hydration has ended. */
-    const buildRow = (item: T): EachRow => {
-        let node: Node | undefined
-        const dispose = scope(() => {
-            node = render(parent, item)
-        })
-        return { node: node as Node, dispose }
-    }
-
     const hydration = RENDER.hydration
     const anchor = document.createTextNode('')
     if (hydration !== undefined) {
@@ -52,30 +38,38 @@ export function eachAsync<T>(
         parent.appendChild(anchor)
     }
 
+    /* Build a content range and insert it just before the anchor (arrival order). */
+    const insertRange = (build: (into: Node) => void): EachRow => {
+        const start = document.createComment('[')
+        const end = document.createComment(']')
+        const fragment = document.createDocumentFragment()
+        fragment.appendChild(start)
+        const dispose = scope(() => build(fragment))
+        fragment.appendChild(end)
+        /* Insert via the anchor's LIVE parent: when this `each` is a bare child of a
+           control-flow branch, the captured `parent` is the branch's build fragment,
+           emptied into the document once the enclosing block placed it. */
+        ;(anchor.parentNode ?? parent).insertBefore(fragment, anchor)
+        return { start, end, dispose }
+    }
+
     /* The mounted `<template catch>` range, disposed when a fresh run re-streams. */
-    let errorRange: { nodes: Node[]; dispose: () => void } | undefined
+    let errorRange: EachRow | undefined
     const clearError = (): void => {
         if (errorRange !== undefined) {
             errorRange.dispose()
-            for (const node of errorRange.nodes) {
-                parent.removeChild(node)
-            }
+            removeRange(errorRange.start, errorRange.end)
             errorRange = undefined
         }
     }
 
     /* Bumped each run so a superseded drain stops appending and pruning. */
     let generation = 0
-    /* The live iterator, held so a re-run or teardown can `return()` it — closing
-       the source (a generator's `finally`, a socket) and resolving any pending
-       `next()`. Bumping `generation` alone can't reach a drain parked on `await
-       iterator.next()`: an idle infinite stream never yields again, so the loop
-       never re-checks `generation` — it dangles on the microtask queue forever. */
     let iterator: AsyncIterator<T> | undefined
     effect(() => {
         generation += 1
         const generationAtStart = generation
-        iterator?.return?.() // close the superseded run's iterator before re-streaming
+        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
         const iterable = items() // read (subscribe) synchronously
@@ -95,20 +89,22 @@ export function eachAsync<T>(
                 const key = keyOf(result.value)
                 present.add(key)
                 /* A re-yielded key rebuilds the row from the new value, swapping the old
-                   node out (v1 has no in-place field patch — rows bind plain snapshots). */
+                   range out (v1 has no in-place field patch — rows bind plain snapshots). */
                 const stale = rows.get(key)
-                const row = buildRow(result.value)
-                rows.set(key, row)
+                const item = result.value
+                rows.set(
+                    key,
+                    insertRange((host) => render(host, item)),
+                )
                 if (stale !== undefined) {
                     stale.dispose()
-                    parent.removeChild(stale.node)
+                    removeRange(stale.start, stale.end)
                 }
-                parent.insertBefore(row.node, anchor) // arrival order, before the anchor
             }
             for (const [key, row] of rows) {
                 if (!present.has(key)) {
                     row.dispose()
-                    parent.removeChild(row.node)
+                    removeRange(row.start, row.end)
                     rows.delete(key)
                 }
             }
@@ -122,26 +118,17 @@ export function eachAsync<T>(
                 throw error
             }
             /* Keep the streamed rows; render the catch branch after them, at the anchor. */
-            let nodes: Node[] = []
-            const dispose = scope(() => {
-                nodes = renderCatch(parent, error)
-            })
-            for (const node of nodes) {
-                parent.insertBefore(node, anchor)
-            }
-            errorRange = { nodes, dispose }
+            errorRange = insertRange((host) => renderCatch(host, error))
         })
     })
 
-    /* Stop the live stream when the enclosing scope tears down. The effect's own
-       disposer only unsubscribes from `items()` — it leaves the running `drain()`
-       pulling rows into a now-detached parent forever. Bump the generation so the
-       drain abandons its loop, `return()` the iterator to release the source and any
-       pending `next()`, drop the error branch, and dispose every surviving row. */
+    /* Stop the live stream when the enclosing scope tears down: bump the generation so
+       the drain abandons its loop, `return()` the iterator to release the source, drop
+       the error branch, and dispose every surviving row. */
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => {
             generation += 1
-            iterator?.return?.()
+            iterator?.return?.(undefined)?.catch(() => undefined)
             iterator = undefined
             clearError()
             for (const row of rows.values()) {

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

@@ -0,0 +1,16 @@
+import { scope } from '../runtime/scope.ts'
+
+/*
+Builds `content` into a fragment under a fresh reactive scope, then inserts it just
+before the `end` marker; returns the scope disposer. Building into a fragment lets
+the content append freely (elements, components, nested blocks all use the normal
+append path) before it lands as a unit. Inserting via the marker's LIVE parent
+(`end.parentNode`) keeps placement correct even after an enclosing block has moved
+the markers from a build-time fragment into the document.
+*/
+export function fillBefore(end: Node, content: (into: Node) => void): () => void {
+    const fragment = document.createDocumentFragment()
+    const dispose = scope(() => content(fragment))
+    ;(end.parentNode ?? end).insertBefore(fragment, end)
+    return dispose
+}

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

@@ -0,0 +1,19 @@
+/*
+Moves a contiguous node range — `start` through `end` inclusive — to sit just
+before `ref`, preserving order. Each node's next sibling is captured before the
+move (insertBefore relocates it, changing `nextSibling`). Used by the keyed `each`
+to reposition a row whose content is a range rather than a single node.
+*/
+export function moveRange(start: Node, end: Node, ref: Node | null): void {
+    const parent = ref?.parentNode ?? end.parentNode
+    if (parent === null) {
+        return
+    }
+    let node: Node | null = start
+    const stop: Node | null = end.nextSibling
+    while (node !== null && node !== stop) {
+        const next: Node | null = node.nextSibling
+        parent.insertBefore(node, ref)
+        node = next
+    }
+}

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

@@ -0,0 +1,22 @@
+import { claimChild } from '../runtime/claimChild.ts'
+import { RENDER } from '../runtime/RENDER.ts'
+
+/*
+Opens a control-flow range boundary: a comment marker. Create mode appends a fresh
+comment to `parent`; hydrate mode claims the server-rendered marker at the parent's
+cursor and advances it. Markers are real comment nodes so they survive in the SSR
+HTML and the block can claim them positionally on hydrate — the boundary that lets
+a branch hold ANY content (components, text, nested blocks, snippets) as a range,
+rather than a list of single nodes.
+*/
+export function openMarker(parent: Node, data: string): Comment {
+    const hydration = RENDER.hydration
+    if (hydration !== undefined) {
+        const node = claimChild(hydration, parent) as unknown as Comment
+        hydration.next.set(parent, node === null ? null : node.nextSibling)
+        return node
+    }
+    const node = document.createComment(data)
+    parent.appendChild(node)
+    return node
+}

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

@@ -0,0 +1,18 @@
+/*
+Removes a contiguous node range — `start` through `end` inclusive — from the DOM.
+Used to evict a departed keyed-`each` row whose content is a range (markers plus
+whatever they bound). Each next sibling is captured before removal.
+*/
+export function removeRange(start: Node, end: Node): void {
+    const parent = end.parentNode
+    if (parent === null) {
+        return
+    }
+    let node: Node | null = start
+    const stop: Node | null = end.nextSibling
+    while (node !== null && node !== stop) {
+        const next: Node | null = node.nextSibling
+        parent.removeChild(node)
+        node = next
+    }
+}

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

@@ -1,34 +1,29 @@
 import { effect } from '../effect.ts'
-import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { clearBetween } from './clearBetween.ts'
+import { fillBefore } from './fillBefore.ts'
+import { openMarker } from './openMarker.ts'
 import type { SwitchCase } from './types/SwitchCase.ts'
 
 /*
-Multi-branch binding — the runtime for `<template switch>`. An effect evaluates
-the subject, picks the first case whose `match` equals it (strict `===`), falling
-back to the default (`match` undefined); the chosen branch renders in its own
-scope, anchored for placement. A branch is a RANGE of element roots, tracked as a
-node array so a multi-root case inserts/removes as a unit. Staying on the same
-branch across a subject change leaves it mounted; switching disposes the old.
+Multi-branch binding — the runtime for `<template switch>`. An effect evaluates the
+subject, picks the first case whose `match` equals it (strict `===`), falling back
+to the default (`match` undefined); the chosen case's content lives in a RANGE
+bounded by two comment markers, so a case holds any content. Staying on the same
+case across a subject change leaves it mounted; switching clears the range and
+builds the new case fresh.
 
-On hydrate it adopts the case the server rendered (in place) and anchors after it;
-the effect's first run picks the same case and is a no-op, later changes swap fresh.
+On hydrate it adopts the case the server rendered: claim the start marker, run the
+matching case in place, claim the end marker. The effect's first run picks the same
+case and is a no-op; later changes swap the range.
 */
 // @readme plumbing
 export function switchBlock(parent: Node, subject: () => unknown, cases: SwitchCase[]): void {
     const hydration = RENDER.hydration
-    let active: { nodes: Node[]; dispose: () => void } | undefined
-    let activeIndex = -1
-    let anchor: Node
-
-    const build = (chosen: SwitchCase): { nodes: Node[]; dispose: () => void } => {
-        let nodes: Node[] = []
-        const dispose = scope(() => {
-            nodes = chosen.render(parent)
-        })
-        return { nodes, dispose }
-    }
+    let dispose: (() => void) | undefined
+    let activeIndex: number
+    let end: Comment
 
     const select = (value: unknown): number => {
         const matched = cases.findIndex(
@@ -36,18 +31,24 @@ export function switchBlock(parent: Node, subject: () => unknown, cases: SwitchC
         )
         return matched === -1 ? cases.findIndex((entry) => entry.match === undefined) : matched
     }
+    const caseAt = (index: number): SwitchCase | undefined =>
+        index === -1 ? undefined : cases[index]
 
+    const start = openMarker(parent, '[')
     if (hydration !== undefined) {
         activeIndex = select(subject())
-        const chosen = activeIndex === -1 ? undefined : cases[activeIndex]
+        const chosen = caseAt(activeIndex)
         if (chosen !== undefined) {
-            active = build(chosen)
+            dispose = scope(() => chosen.render(parent)) // claim the SSR nodes in place
         }
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, claimChild(hydration, parent))
+        end = openMarker(parent, ']')
     } else {
-        anchor = document.createTextNode('')
-        parent.appendChild(anchor)
+        end = openMarker(parent, ']')
+        activeIndex = select(subject())
+        const chosen = caseAt(activeIndex)
+        if (chosen !== undefined) {
+            dispose = fillBefore(end, (p) => chosen.render(p))
+        }
     }
 
     effect(() => {
@@ -55,21 +56,12 @@ export function switchBlock(parent: Node, subject: () => unknown, cases: SwitchC
         if (index === activeIndex) {
             return
         }
-        if (active !== undefined) {
-            active.dispose()
-            for (const node of active.nodes) {
-                parent.removeChild(node)
-            }
-            active = undefined
-        }
+        clearBetween(start, end, dispose)
+        dispose = undefined
         activeIndex = index
-        const chosen = index === -1 ? undefined : cases[index]
-        if (chosen === undefined) {
-            return
-        }
-        active = build(chosen)
-        for (const node of active.nodes) {
-            parent.insertBefore(node, anchor)
+        const chosen = caseAt(index)
+        if (chosen !== undefined) {
+            dispose = fillBefore(end, (p) => chosen.render(p))
         }
     })
 }

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

@@ -6,41 +6,35 @@ import { discardBoundary } from './discardBoundary.ts'
 /*
 Synchronous error boundary — the runtime for `<template try>`. Builds the guarded
 subtree (`renderTry`); if building it throws — including a throw from an initial
-reactive read, since effects run during build — it tears down the partial scope
-and builds `renderCatch(error)` instead. Both branches are a range of element
-roots tracked together. No `renderCatch` (no `<template catch>`) re-throws, so the
-error propagates to the nearest enclosing boundary (or the server 500 / stream).
+reactive read, since effects run during build — it tears down the partial scope and
+builds `renderCatch(error)` instead. Each branch builds its content (any content)
+into the parent. No `renderCatch` (no `<template catch>`) re-throws, so the error
+propagates to the nearest enclosing boundary. The block renders once and never
+re-renders, so its content needs no range markers — an enclosing block's range
+removes it on teardown.
 
-Catches throws during the BUILD of the subtree (mount, hydrate adoption, and the
-initial reactive reads). A throw in a later effect re-run is outside this lexical
-build and is not caught here.
-
-On hydrate it claims the SSR boundary (`<!--abide:try:N-->…<!--/abide:try:N-->`):
-the happy path adopts the guarded nodes in place; a throw discards the boundary's
-server nodes and builds the catch fresh.
+On create the guarded content is built into a fragment first, so a throw mid-build
+discards the partial nodes (they never entered the document) before the catch
+builds. On hydrate it claims the SSR boundary
+(`<!--abide:try:N-->…<!--/abide:try:N-->`): the happy path adopts the guarded nodes
+in place; a throw discards the boundary's server nodes and builds the catch fresh.
 */
 // @readme plumbing
 export function tryBlock(
     parent: Node,
     id: number,
-    renderTry: (parent: Node) => Node[],
-    renderCatch?: (parent: Node, error: unknown) => Node[],
+    renderTry: (parent: Node) => void,
+    renderCatch?: (parent: Node, error: unknown) => void,
 ): void {
-    /* Run a build under a fresh ownership scope; on throw, tear down the partial
-       effects/listeners it registered and rethrow so the caller can fall back.
-       Deliberately not `scope()`: that returns a deferred disposer and leaks the
-       partial scope on throw (it only restores the owner), whereas an error boundary
-       must dispose eagerly when the guarded build throws and hand back the built
-       `Node[]` (not a disposer) on success — those nodes belong to the enclosing
-       scope. Different return type, different throw semantics; merging would be wrong. */
-    const buildScoped = (build: () => Node[]): Node[] => {
+    /* Run a void build under a fresh ownership scope; on throw, tear down the partial
+       effects/listeners it registered and rethrow so the caller can fall back. */
+    const guard = (build: () => void): void => {
         const previous = OWNER.current
         const disposers: Array<() => void> = []
         OWNER.current = disposers
         try {
-            const nodes = build()
+            build()
             OWNER.current = previous
-            return nodes
         } catch (error) {
             OWNER.current = previous
             for (let index = disposers.length - 1; index >= 0; index -= 1) {
@@ -55,12 +49,12 @@ export function tryBlock(
         const open = claimChild(hydration, parent)
         hydration.next.set(parent, open?.nextSibling ?? null) // advance past the open marker
         try {
-            buildScoped(() => renderTry(parent)) // claims the guarded nodes in place
+            guard(() => renderTry(parent)) // claims the guarded nodes in place
             const close = claimChild(hydration, parent) // claim the close marker
             hydration.next.set(parent, close?.nextSibling ?? null)
         } catch (error) {
-            /* The server rendered (or partially built) something that didn't adopt —
-               drop the whole boundary and build the catch fresh in its place. */
+            /* The server markup didn't adopt — drop the whole boundary and build the
+               catch fresh in its place. */
             const after = discardBoundary(parent, open, `/abide:try:${id}`, hydration)
             if (renderCatch === undefined) {
                 throw error
@@ -68,9 +62,9 @@ export function tryBlock(
             const previous = RENDER.hydration
             RENDER.hydration = undefined
             try {
-                for (const node of buildScoped(() => renderCatch(parent, error))) {
-                    parent.insertBefore(node, after)
-                }
+                const fragment = document.createDocumentFragment()
+                guard(() => renderCatch(fragment, error))
+                parent.insertBefore(fragment, after)
             } finally {
                 RENDER.hydration = previous
             }
@@ -78,16 +72,18 @@ export function tryBlock(
         return
     }
 
-    let nodes: Node[]
+    /* Create: build into a fragment so a throw mid-build discards the partial nodes
+       (they never entered the document) before the catch builds. */
     try {
-        nodes = buildScoped(() => renderTry(parent))
+        const fragment = document.createDocumentFragment()
+        guard(() => renderTry(fragment))
+        parent.appendChild(fragment)
     } catch (error) {
         if (renderCatch === undefined) {
             throw error
         }
-        nodes = buildScoped(() => renderCatch(parent, error))
-    }
-    for (const node of nodes) {
-        parent.appendChild(node)
+        const fragment = document.createDocumentFragment()
+        guard(() => renderCatch(fragment, error))
+        parent.appendChild(fragment)
     }
 }