@abide/abide 0.48.0 → 0.49.0

package/src/lib/ui/compile/generateSSR.ts

@@ -184,15 +184,17 @@ export function generateSSR(
         })
 
     /* Snippet names whose body produces an `await`, so the snippet must be an `async function`
-       and its `{name(...)}` call sites awaited: it inlines a child component / holds an await
-       block (a structural scan), OR it text-calls another async snippet. The latter is a
-       dependency between snippets, so resolve it to a fixpoint — seed with the structural set,
-       then keep adding any snippet that calls an already-async one until nothing changes. */
+       and its `{name(...)}` call sites awaited: it inlines a child component, holds an await
+       block, or emits a `{children()}` slot fill (all `await $props.$children()` in SSR) — a
+       structural scan — OR it text-calls another async snippet. The latter is a dependency
+       between snippets, so resolve it to a fixpoint — seed with the structural set, then keep
+       adding any snippet that calls an already-async one until nothing changes. */
     const subtreeAwaits = (children: TemplateNode[]): boolean =>
         children.some(
             (child) =>
                 child.kind === 'component' ||
                 child.kind === 'await' ||
+                (child.kind === 'element' && child.tag === 'slot') ||
                 ('children' in child && subtreeAwaits(child.children)),
         )
     const snippetDefs = new Map<string, TemplateNode[]>()
@@ -223,14 +225,20 @@ export function generateSSR(
             }
         }
     }
-    /* A text-part expression that calls an async snippet, so its value is `await`ed before
-       `$text`. */
-    const callsAsyncSnippet = (code: string): boolean => {
-        // The common no-async-snippet component pays zero regex work per text part.
-        if (asyncSnippets.size === 0) {
+    /* A text-part expression whose value may be a Promise, so `$text` must `await` it:
+       either it calls an async snippet declared HERE, or it CALLS a computed-backed
+       binding. The latter covers a snippet handed down as a prop and called by its prop
+       name (`{item(label)}`) — that prop lowers to a computed, so it never appears in this
+       component's own `asyncSnippets`, yet the parent's snippet body may be async and the
+       call returns a Promise (the `[object Promise]` bug). A computed READ (`{full}`) is not
+       a call, so plain interpolation stays sync; only `name(...)` on a computed is awaited. */
+    const awaitableCallNames = new Set<string>([...asyncSnippets, ...computedNames])
+    const callsAwaitable = (code: string): boolean => {
+        // The common component with no async snippet and no computed pays zero regex work.
+        if (awaitableCallNames.size === 0) {
             return false
         }
-        for (const name of asyncSnippets) {
+        for (const name of awaitableCallNames) {
             if (callPattern(name).test(code)) {
                 return true
             }
@@ -285,7 +293,7 @@ export function generateSSR(
                        Plain expressions stay sync, so a component with only interpolation keeps a
                        sync render. */
                     const lowered = lowerExpression(part.code)
-                    const value = callsAsyncSnippet(part.code)
+                    const value = callsAwaitable(part.code)
                         ? `$text(await (${lowered}))`
                         : `$text(${lowered})`
                     return markText.get(node)
@@ -396,7 +404,7 @@ export function generateSSR(
             /* Server-render the child via its `render` and inline the HTML inside the same
                `[ … ]` marker range the client mounts into (`mountRange`) — no wrapper element,
                so SSR and client agree and the child's root lays out as a direct child. Props
-               pass as thunks; slot content passes as a string-returning `$children` the child
+               pass as thunks; slot content passes as a string-returning `children` the child
                invokes from its <slot>. */
             /* Slot content is a fresh build context — the child's `<slot>` mounts it via
                `mountSlot`, not the parent skeleton clone, and the client builds it through
@@ -404,19 +412,22 @@ export function generateSSR(
                records it reset, so its children emit no enclosing-skeleton anchors the client
                slot builder would lack. */
             const slotCode = generateInto(node.children, '$slot')
-            /* `$children` is an ASYNC builder the child `await`s at its `<slot>` position
-               (`generateSlot`), NOT a pre-resolved string. Pre-resolving here would run the
-               slot's `$ctx.next++` block ids BEFORE the child render's own, but the client
-               builds slot content lazily at the `<slot>` site — so a child with an await/try
-               before its `<slot>` would allocate ids in the opposite order and desync hydration.
-               Keeping the slot lazy makes the slot's ids draw at the `<slot>` site on both
-               sides. The builder shares the enclosing render's `$ctx`/`$awaits`/`$resume` (a
-               closure), so nested awaits register and number correctly during the child render.
-               A child with a `<slot>` is therefore always an async render. */
+            /* Slot content rides the `children` prop key as a `Snippet`: a zero-arg callable
+               returning an ASYNC builder the child `await`s at its `{children()}` position
+               (`generateSlot`), whose resolved value is a `$snip`-branded string — so it renders
+               through the same `$text` snippet-marker path as any `{snippet(args)}` and unifies
+               with a passed `children={snippet}`. It is NOT pre-resolved: pre-resolving here would
+               run the slot's `$ctx.next++` block ids BEFORE the child render's own, but the client
+               builds slot content lazily at the `{children()}` site — so a child with an await/try
+               before its slot would allocate ids in the opposite order and desync hydration.
+               Keeping the slot lazy draws its ids at the `{children()}` site on both sides. The
+               builder shares the enclosing render's `$ctx`/`$awaits`/`$resume` (a closure), so
+               nested awaits register and number correctly during the child render. A child with a
+               slot fill is therefore always an async render. */
             const slotPart =
                 slotCode.trim() === ''
                     ? undefined
-                    : `"$children": async () => { const $slot = []; ${slotCode}return $slot.join(''); }`
+                    : `"children": () => (async () => { const $slot = []; ${slotCode}return $snip($slot.join('')); })`
             /* The same last-wins layering the client build emits (`composeProps`), so SSR
                and hydration read the same prop bag. */
             const propsExpr = composeProps(node.props, lowerExpression, slotPart)
@@ -430,7 +441,11 @@ export function generateSSR(
             return (
                 anchor +
                 push(target, RANGE_OPEN) +
-                `const ${result} = await ${node.name}.render(${propsExpr}, $ctx);\n` +
+                /* The tag lowers like any reference (see generateBuild): a static import
+                   is left bare, a reactive/loop/await binding derefs — SSR registers such
+                   a binding as `plain`, so it reads the bare local holding the resolved
+                   component, keeping SSR and client congruent. */
+                `const ${result} = await ${lowerExpression(node.name)}.render(${propsExpr}, $ctx);\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +
                 `Object.assign($resume, ${result}.resume);\n` +
@@ -572,26 +587,23 @@ export function generateSSR(
         return code
     }
 
-    /* A `<slot>` outlet: emit the parent-provided content (`$children`), falling back to the
-       slot's own children when none was supplied. Inside a skeleton the slot is positioned
-       by an `<!--a-->` anchor and its content bounded by a `[ … ]` range (matching the
-       client's `mountSlot`), so it can sit among static siblings. The fallback is a fresh,
-       non-skeleton build context — the client builds it via `mountSlot`/`fillBefore`, not the
-       skeleton clone — so its reactive text takes no anchor (`skeletonContext` records the
-       fallback children reset). */
+    /* A component `{children()}` fill point: render the `children` prop (a `Snippet`) as a
+       snippet text part. `children()()` reads the destructured `children` computed and calls
+       it → a Promise of a `$snip`-branded string; `await` it and push through `$text`, which
+       wraps the branded string in `<!--abide:snippet-->` markers — the same range the client's
+       appendText→appendSnippet emits and claims, so hydration stays congruent. Inside a skeleton
+       the slot is positioned by an `<!--a-->` anchor and bounded by a `[ … ]` range (matching the
+       client's `mountSlot`); outside one it emits just the snippet markers (matching the client's
+       direct `appendText`). The `await` makes a component with a slot an async render (its caller
+       already `await`s `render()`). A fallback is now an authored `{#if children}…{:else}…{/if}`,
+       so the slot node carries no children. */
     function generateSlot(
         node: Extract<TemplateNode, { kind: 'element' }>,
         target: string,
         anchor: string,
     ): string {
         const wrap = inSkeleton.get(node)
-        /* `$children` is an async builder the parent passes lazily; `await` it here so the
-           slot content's block ids allocate AT the slot position — the same order the
-           client builds slot content — keeping hydration congruent. The `await` makes a
-           component with a slot an async render (its caller already `await`s `render()`).
-           A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot node
-           carries no children. */
-        const body = `if ($props && $props.$children) { ${target}.push(await $props.$children()); }\n`
+        const body = `${target}.push($text(await (${lowerExpression('children()')})));\n`
         if (!wrap) {
             return body
         }

package/src/lib/ui/compile/isWhitespaceText.ts

@@ -1,11 +1,19 @@
 import type { TemplateNode } from './types/TemplateNode.ts'
 
+/* Only HTML-collapsible whitespace — space, tab, LF, CR, FF. Deliberately EXCLUDES
+   U+00A0 (` `), which browsers neither collapse nor trim; `.trim()`/`\s` would
+   wrongly count it, so a `<span>&nbsp;</span>` spacer would be dropped as blank. */
+const COLLAPSIBLE_WHITESPACE = /[^ \t\n\r\f]/
+
 /* A text node that is purely whitespace (no interpolation, only blank static
    parts). Both back-ends drop it, so it neither contributes markup nor breaks a
-   static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. */
+   static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. A part
+   holding a non-breaking space is renderable content, not blank. */
 export function isWhitespaceText(node: TemplateNode): boolean {
     return (
         node.kind === 'text' &&
-        node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
+        node.parts.every(
+            (part) => part.kind === 'static' && !COLLAPSIBLE_WHITESPACE.test(part.value),
+        )
     )
 }

package/src/lib/ui/compile/lowerDocAccess.ts

@@ -39,6 +39,22 @@ type Segment = { kind: 'literal'; value: string } | { kind: 'expression'; node:
 /* Maps a compound-assignment operator to its plain binary counterpart. Logical
    assignments (`||=`/`&&=`/`??=`) lower to an unconditional replace of the
    combined value — consistent with how `+=` lowers (the patch always writes). */
+/* Array methods that mutate the receiver in place. Called on a doc-rooted array
+   these can't lower to a bare `readCall` (which would mutate the live tree by
+   reference and never emit a patch — no re-render, no undo/persistence/sync);
+   they route through `$$mutateDocArray`, which clones-applies-replaces so a real
+   patch fires. `push` is handled separately above (fine-grained `add` patches). */
+const MUTATING_ARRAY_METHODS = new Set([
+    'pop',
+    'shift',
+    'unshift',
+    'splice',
+    'sort',
+    'reverse',
+    'fill',
+    'copyWithin',
+])
+
 const COMPOUND_OPERATORS = new Map<ts.SyntaxKind, ts.BinaryOperator>([
     [ts.SyntaxKind.PlusEqualsToken, ts.SyntaxKind.PlusToken],
     [ts.SyntaxKind.MinusEqualsToken, ts.SyntaxKind.MinusToken],
@@ -162,10 +178,32 @@ export function docAccessTransformer(docName: string): ts.TransformerFactory<ts.
                 const access = node.expression
                 const segments = pathSegments(access.expression)
                 if (segments) {
-                    const read = docCall(docName, 'read', [buildPath(segments)])
                     const args = node.arguments.map(
                         (arg) => ts.visitNode(arg, visit) as ts.Expression,
                     )
+                    /* An in-place-mutating array method on a doc path → route through
+                       `$$mutateDocArray(doc, path, member, [args])` so the mutation lands as a
+                       patch instead of silently mutating the live tree by reference. Optional
+                       chaining (`model.items?.splice(…)`) keeps the bare-call semantics below —
+                       skip-if-absent is the author's explicit choice, and a nullish array has
+                       nothing to mutate. */
+                    if (
+                        MUTATING_ARRAY_METHODS.has(access.name.text) &&
+                        !access.questionDotToken &&
+                        !node.questionDotToken
+                    ) {
+                        return ts.factory.createCallExpression(
+                            ts.factory.createIdentifier('$$mutateDocArray'),
+                            undefined,
+                            [
+                                ts.factory.createIdentifier(docName),
+                                buildPath(segments),
+                                ts.factory.createStringLiteral(access.name.text),
+                                ts.factory.createArrayLiteralExpression(args),
+                            ],
+                        )
+                    }
+                    const read = docCall(docName, 'read', [buildPath(segments)])
                     /* Optional chaining is the author's explicit skip-if-absent: a nullish
                        read short-circuits the whole call to `undefined`. Keep it bare —
                        routing it through the throwing guard would invert that semantics.

package/src/lib/ui/compile/parseTemplate.ts

@@ -590,7 +590,9 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                     value += source.charAt(cursor)
                     cursor += 1
                 }
-                attrs.push({ kind: 'static', name, value })
+                /* Decode entities like the quoted path does — a real HTML parser decodes
+                   unquoted attribute values too, so `value=a&b` is the value `a&b`. */
+                attrs.push({ kind: 'static', name, value: decodeHtmlEntities(value) })
             }
         }
         return attrs

package/src/lib/ui/compile/renameSignalRefs.ts

@@ -61,11 +61,6 @@ export function signalRefsTransformer(
         ...derivedNames,
         ...computedNames,
         ...blockLocal,
-        /* The reserved slot reader (`{#if children}` → `$props?.$children`) is rewritten
-           through `referenceFor` like a signal, so it inherits the same lexical-scope
-           tracking: a `{#snippet row(children)}` arg, a `{#for children of …}` item, a
-           script param named `children` re-binds it for that subtree and is left untouched. */
-        'children',
         /* `scope` is the author-facing reactive entry (`scope().state(...)`), lowered to the
            reserved `$$scope` import so a user variable named `scope` can never collide — but
            shadowably: a `const scope`/param `scope` re-binds it for that subtree and is left
@@ -332,10 +327,11 @@ function functionParameters(node: ts.Node): ts.NodeArray<ts.ParameterDeclaration
 
 /* `$$model.<name>` for a state binding, `<name>()` for a computed doc-slot (the
    string-free reader `scope().derive` returns), `<name>.value` for a runtime cell
-   (linked / lens / transform-state), `$props?.$children` for the reserved slot reader,
-   else undefined. A `blockLocal` binding shadows any same-named component signal — it is
-   a nearer lexical scope — so it derefs as a cell (`<name>.value`) regardless of a
-   colliding `state`/`computed`/`derived`, and ahead of the `children` slot reader. */
+   (linked / lens / transform-state), else undefined. A `blockLocal` binding shadows
+   any same-named component signal — it is a nearer lexical scope — so it derefs as a
+   cell (`<name>.value`) regardless of a colliding `state`/`computed`/`derived`.
+   `children` is an ordinary destructured prop now — it rewrites via the `derivedNames`
+   branch below like any other, with no special case. */
 function referenceFor(
     name: string,
     stateNames: ReadonlySet<string>,
@@ -346,15 +342,6 @@ function referenceFor(
     if (blockLocal.has(name)) {
         return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier(name), 'value')
     }
-    /* `{children()}` is a slot NODE the parser handles; any other bare `children` read
-       (notably `{#if children}`) is the reserved reader. `?.` guards a propless mount. */
-    if (name === 'children') {
-        return ts.factory.createPropertyAccessChain(
-            ts.factory.createIdentifier('$props'),
-            ts.factory.createToken(ts.SyntaxKind.QuestionDotToken),
-            ts.factory.createIdentifier('$children'),
-        )
-    }
     /* The author-facing reactive entry `scope` lowers to its reserved `$$scope` import (the
        value read only — a `.scope` member or a shadowing local is never reached here). */
     if (name === 'scope') {

package/src/lib/ui/compile/resolveReactiveExport.ts

@@ -9,9 +9,7 @@ export type ReactivePrimitive = 'state' | 'linked' | 'computed' | 'effect' | 'wa
 
 /* The `abide/ui/*` specifier each importable reactive primitive is published at,
    mapped to its canonical name. Built from the package name so a rename is one edit.
-   `linked`/`computed` are members of `state`, not standalone imports; `props` is
-   ambient sugar today (no module) — kept here so a future `abide/ui/props` resolves
-   with no code change. */
+   `linked`/`computed` are members of `state`, not standalone imports. */
 const REACTIVE_SPECIFIERS: Record<string, ReactivePrimitive> = {
     [`${ABIDE_PACKAGE_NAME}/ui/state`]: 'state',
     [`${ABIDE_PACKAGE_NAME}/ui/effect`]: 'effect',
@@ -39,6 +37,7 @@ export const NESTED_REACTIVE_BINDINGS: ReactiveImportBindings = {
         ['state', 'state'],
         ['effect', 'effect'],
         ['watch', 'watch'],
+        ['props', 'props'],
     ]),
     stateRoots: new Set(['state']),
 }
@@ -70,9 +69,7 @@ export function reactiveImportBindings(source: ts.SourceFile): ReactiveImportBin
     return { direct, stateRoots }
 }
 
-/* The reactive primitive a call's callee resolves to, or undefined. A bare `props`
-   identifier is always the ambient prop reader — the one primitive with no runtime module
-   (pure compiler sugar), so it resolves with no import. Every other bare identifier
+/* The reactive primitive a call's callee resolves to, or undefined. Every bare identifier
    resolves through the direct import bindings (alias-safe); a `stateRoot.linked` /
    `.computed` member call resolves off a local bound to `state`. Every other callee is
    undefined (a user's own function, an unrelated member access). */
@@ -81,7 +78,7 @@ export function resolveReactiveExport(
     bindings: ReactiveImportBindings,
 ): ReactivePrimitive | undefined {
     if (ts.isIdentifier(callee)) {
-        return callee.text === 'props' ? 'props' : bindings.direct.get(callee.text)
+        return bindings.direct.get(callee.text)
     }
     if (
         ts.isPropertyAccessExpression(callee) &&

package/src/lib/ui/compile/scopeCss.ts

@@ -79,12 +79,35 @@ function scopeSelector(selector: string, attribute: string): string {
     if (selector === '') {
         return selector
     }
-    const match = selector.match(/^(.*?)([^\s>+~]+)$/)
-    if (match === null) {
+    /* The last compound begins just after the final combinator (whitespace / `>` / `+` / `~`)
+       at bracket depth zero. Bracket-aware so a space inside a quoted attribute value
+       (`[data-label="Read more"]`) is NOT mistaken for a descendant combinator — a plain
+       `/\s/` split there desyncs pseudoIndex's bracket count and drops the whole rule. */
+    let depth = 0
+    let lastCompoundStart = 0
+    for (let index = 0; index < selector.length; index += 1) {
+        const char = selector[index] as string
+        if (char === '[') {
+            depth += 1
+        } else if (char === ']') {
+            depth -= 1
+        } else if (
+            depth === 0 &&
+            (char === ' ' ||
+                char === '\t' ||
+                char === '\n' ||
+                char === '>' ||
+                char === '+' ||
+                char === '~')
+        ) {
+            lastCompoundStart = index + 1
+        }
+    }
+    const prefix = selector.slice(0, lastCompoundStart)
+    const last = selector.slice(lastCompoundStart)
+    if (last === '') {
         return `${selector}[${attribute}]`
     }
-    const prefix = match[1] ?? ''
-    const last = match[2] ?? ''
     const pseudo = pseudoIndex(last)
     const scopedLast =
         pseudo === -1

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

@@ -1,6 +1,6 @@
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
-import { claimChild } from '../runtime/claimChild.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'
@@ -9,6 +9,7 @@ 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 { discardBoundary } from './discardBoundary.ts'
@@ -89,6 +90,18 @@ export function awaitBlock(
        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)
@@ -166,18 +179,53 @@ export function awaitBlock(
         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 }
+        /* 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
+            }
+            /* 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)
+            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
+        }
     }
 
     /* Discard the SSR boundary and (re)build the block from the live promise, fresh
@@ -195,13 +243,7 @@ export function awaitBlock(
         )
         anchor = document.createTextNode('')
         parent.insertBefore(anchor, after)
-        const previous = RENDER.hydration
-        RENDER.hydration = undefined
-        try {
-            render(promiseThunk())
-        } finally {
-            RENDER.hydration = previous
-        }
+        withoutHydration(() => render(promiseThunk()))
     }
 
     /* The first run when hydrating: adopt by precedence (resume / warm-sync), else
@@ -211,7 +253,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. */
@@ -283,15 +327,9 @@ export function awaitBlock(
         anchor = document.createTextNode('')
         parent.insertBefore(anchor, 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(() => {

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

@@ -5,6 +5,7 @@ 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 { state } from '../state.ts'
 import { buildDetachedRange } from './buildDetachedRange.ts'
 import { moveRange } from './moveRange.ts'
@@ -144,11 +145,9 @@ 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 {
+           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]
             const keys = list.map(keyOf)
             generation += 1
@@ -183,6 +182,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 +206,6 @@ export function each<T>(
                 placeBefore(row, cursor)
                 cursor = row.start
             }
-        } finally {
-            RENDER.hydration = previousHydration
-        }
+        })
     })
 }

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