@abide/abide 0.57.0 → 0.58.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # abide
 
+## 0.58.0
+
+### Minor Changes
+
+- 3941314: address every component mount as its own hydration boundary so a structural desync inside a child recovers at that one boundary instead of discarding the whole page (ADR-0049)
+
+    A component's range now ships as `<!--abide:c:PATH-->…<!--/abide:c:PATH-->` (the child's render-path) in place of the anonymous `<!--[-->…<!--]-->`. On a hydration desync inside the child — including a client-true / server-false `{#if}` gating an element's presence (`pending(...)`, `refreshing(...)`, any state fed by a client-only effect) — `mountChild` discards just that boundary and remounts the child fresh, rather than throwing out of hydrate and cold-rebuilding the entire page. Structural gating on client-asymmetric probes is therefore now safe (it degrades to a local remount). `cloneStatic` now verifies its claimed hydration run against the template's top-level shape, so a purely-static gated element throws (and recovers) instead of silently mis-claiming a diverged branch. No public API change; the SSR wire format for component mounts changes (server and client ship together and stay congruent).
+
+## 0.57.1
+
+### Patch Changes
+
+- 866c96d: degrade a mangled **SSR** payload to a cold boot (ADR-0051) ([`adfee02`](https://github.com/briancray/abide/commit/adfee024d570e8bf46230fac1fa2521fcaae056f))
+- 1abc943: Reuse the keyed-list (`{#for}`) reconcile scratch across passes so a steady-state reconcile allocates nothing
+
+    Each `each` reconcile built two fresh arrays per list change — `list.map(keyOf)` for the desired keys and `new Array(n)` for the resolved rows — then threw them away. On a list re-reconciled per keystroke that churn showed up as avoidable minor-GC pressure mid-interaction. The two buffers are now hoisted into persistent per-`each` scratch, reused every pass and cleared down to the live length on shrink (so no disposed-row references are retained). The `keyOf` pass is fused into the resolve loop — still exactly one `keyOf` call per item. Behaviour is unchanged: keyed diffing, in-place row updates, duplicate-key collapse, and prune-before-place all resolve identically; only the per-pass allocation is gone. The `[...source]` materialization for non-array iterables (generators must be drained) is unchanged.
+
+- e137242: `spreadAttrs` — swallow a per-key suspend on a `{...rest}` spread
+
+    A `{...rest}` spread guards its enumeration against a pending blocking `await` read, but not the per-key value read. When `source()` is a restProps proxy (the `<Button {...rest}>` case), its `get` invokes the underlying prop thunk, so a key whose expression reads a still-pending blocking cell suspends inside `bindKeys` — after the enumeration guard has already passed — and the `SuspenseSignal` escaped the render, killing the mount (seen as a crash on a cold client remount, e.g. navigating back to a page whose top-level blocking cells re-fetch and are briefly `pending()`). The per-key read now catches the suspend and binds the key as a deferred attribute (its `attr` effect swallows the signal and fills the value in on settle), matching `attr` and the deferred-enumeration branch; event handlers, whose thunks return a function without reading a cell, never suspend and stay on the listener path.
+
+- 7367a23: SSR hydration payload ships as inert JSON instead of executable JavaScript (ADR-0051)
+
+    The `window.__SSR__` boot payload now ships as `<script type="application/json">` parsed once by the deferred client bundle with `JSON.parse`, rather than a `window.__SSR__ = {…}` statement the browser had to compile and evaluate as a multi-MB program on the critical path. The global still exists for debugging — the bundle republishes it after parsing. Additionally, a json cache body is now seeded pre-parsed (`data`) rather than as a re-escaped JSON string nested in the payload, so it's single-encoded (roughly half the wire bytes and gzip for a json-heavy grid) and read without a second parse. Warm-seed semantics — zero refetch, zero hydration divergence — are unchanged.
+
 ## 0.57.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.57.0",
+    "version": "0.58.0",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

package/src/lib/server/runtime/createUiPageRenderer.ts

@@ -6,6 +6,7 @@ import { formatTraceparent } from '../../shared/formatTraceparent.ts'
 import { hasSeedableRequest } from '../../shared/hasSeedableRequest.ts'
 import { layoutChainForRoute } from '../../shared/layoutChainForRoute.ts'
 import { resolvedCellsSlot } from '../../shared/resolvedCellsSlot.ts'
+import { SSR_SCRIPT_ID } from '../../shared/SSR_SCRIPT_ID.ts'
 import { safeJsonForScript } from '../../shared/safeJsonForScript.ts'
 import { socketTailsSlot } from '../../shared/socketTailsSlot.ts'
 import type { CacheEntry } from '../../shared/types/CacheEntry.ts'
@@ -213,7 +214,11 @@ export function createUiPageRenderer({
             health,
             clientTimeout,
         } satisfies SsrPayload)
-        return `<script>window.__SSR__ = ${payload};</script>`
+        /* Inert JSON data, NOT a `window.__SSR__ = {…}` statement (ADR-0051): the browser never
+           compiles this multi-MB payload as JavaScript on the critical path — the deferred bundle
+           reads it with one `JSON.parse`. `safeJsonForScript` has already `<`-escaped every
+           `<`, so an embedded `</script>` can't close the tag early. */
+        return `<script type="application/json" id="${SSR_SCRIPT_ID}">${payload}</script>`
     }
 
     /* Per-route `<link rel=modulepreload>`s for the route's page + layout-chain chunks

package/src/lib/server/runtime/snapshotEntryFromCache.ts

@@ -87,15 +87,29 @@ export async function snapshotEntryFromCache(
             headers: response.headers,
         }),
     )
-    return {
+    const wire: CacheSnapshotEntry = {
         key: entry.key,
         url: entry.request.url,
         method,
         status: response.status,
         statusText: response.statusText,
         headers: Array.from(response.headers.entries()),
-        body,
     }
+    /* Ship a json body PARSED so it single-encodes in the payload rather than nesting a
+       re-escaped JSON string (ADR-0051 — the double-encoding that ~2.35×'d the wire). On a
+       parse failure ship the raw string under `body`: the client decodes it async exactly as
+       before (warmValueFromSnapshot's own try/catch), so a malformed-but-json-typed body still
+       round-trips rather than throwing here. A text body always ships raw. */
+    if (kind === 'json') {
+        try {
+            wire.data = JSON.parse(body)
+            return wire
+        } catch {
+            /* fall through to the raw-string form */
+        }
+    }
+    wire.body = body
+    return wire
 }
 
 async function readSettled(promise: Promise<Response>): Promise<Response | undefined> {

package/src/lib/shared/SSR_SCRIPT_ID.ts

@@ -0,0 +1,11 @@
+/*
+The id of the `<script type="application/json">` element the server emits the
+`window.__SSR__` payload into and the client (`startClient`) parses back out
+(ADR-0051). Shipping the payload as inert JSON data — not a `window.__SSR__ = {…}`
+executable statement — means the browser never COMPILES a multi-MB object literal
+as JavaScript on the critical path; the deferred client bundle reads it with one
+`JSON.parse` (a restricted grammar parsed several times faster than equivalent JS
+source). Both sides import this constant so the write id and read id can't drift.
+*/
+// @documentation plumbing
+export const SSR_SCRIPT_ID = 'abide-ssr'

package/src/lib/shared/cacheEntryFromSnapshot.ts

@@ -15,7 +15,12 @@ the first cache() read adopts its call site's ttl (see CacheEntry).
 */
 export function cacheEntryFromSnapshot(entry: CacheSnapshotEntry): CacheEntry {
     const headers = new Headers(entry.headers)
-    const response = new Response(entry.body, {
+    /* Body text for async readers / shareable clones. A json body arrives PARSED as `data`
+       (ADR-0051): re-stringify it (compact JSON — value-identical to the server body, whose
+       `json()` also emits compact JSON) so a later `.json()`/`.text()`/`.clone()` still works.
+       A text (or parse-failed json) body arrives raw as `body`. */
+    const bodyText = 'data' in entry ? JSON.stringify(entry.data) : (entry.body ?? '')
+    const response = new Response(bodyText, {
         status: entry.status,
         statusText: entry.statusText,
         headers,
@@ -26,7 +31,7 @@ export function cacheEntryFromSnapshot(entry: CacheSnapshotEntry): CacheEntry {
         request: new Request(entry.url, { method: entry.method }),
         ttl: undefined,
         expiresAt: undefined,
-        value: warmValueFromSnapshot(entry.status, headers, entry.body),
+        value: warmValueFromSnapshot(entry, headers, bodyText),
         settled: true,
         hydrated: true,
     }
@@ -42,19 +47,23 @@ non-2xx, 204 (the status gate below), streaming, binary (the DEFER sentinel) —
 yields no warm value and defers to the async path, which throws HttpError /
 returns the streaming error / blobs exactly as a live call would.
 */
-function warmValueFromSnapshot(status: number, headers: Headers, body: string): unknown {
+function warmValueFromSnapshot(entry: CacheSnapshotEntry, headers: Headers, body: string): unknown {
     /* Status gate is side-specific: an error/204 has no warm value here, but the live
        read throws HttpError / returns undefined for the same status — so it stays out of
        the shared kind mapping. */
-    if (status === 204 || status < 200 || status >= 300) {
+    if (entry.status === 204 || entry.status < 200 || entry.status >= 300) {
         return undefined
     }
     const kind = contentBodyKind(contentTypeOf(headers))
     const value = bodyValueForKind(
         kind,
-        /* The body may still be malformed JSON; fall back to the async path rather than
-           throwing a SyntaxError synchronously during hydration. */
+        /* Pre-parsed json body (`data`, ADR-0051) IS the value — no second parse. A raw json
+           body may still be malformed; fall back to the async path rather than throwing a
+           SyntaxError synchronously during hydration. */
         () => {
+            if ('data' in entry) {
+                return entry.data
+            }
             try {
                 return JSON.parse(body)
             } catch {

package/src/lib/shared/types/CacheSnapshotEntry.ts

@@ -6,6 +6,15 @@ Any entry called inline during render (any method) with a textual Content-Type i
 emitted, so the client hydrates warm instead of re-firing the call after render;
 binary bodies don't survive a JSON round-trip. The seeded value is read warm once
 — it is never auto-replayed (that stays GET-only, see REPLAYABLE_METHODS).
+
+The body travels in ONE of two shapes, never both (ADR-0051): a json-kind body
+ships PARSED as `data` — a live JSON value nested directly in the payload — so the
+whole snapshot serialises once (the payload's own `JSON.stringify`) instead of the
+body being pre-serialised to a string and then re-escaped as a nested string
+literal (the double-encoding that ~2.35×'d the wire and forced the client to parse
+the body a second time). A text-kind body — or a json body the server couldn't
+parse — ships raw as `body`. The client re-derives which from the presence of
+`data` (`cacheEntryFromSnapshot`).
 */
 export type CacheSnapshotEntry = {
     key: string
@@ -14,5 +23,10 @@ export type CacheSnapshotEntry = {
     status: number
     statusText: string
     headers: Array<[string, string]>
-    body: string
+    /* Raw body text — present for a text-kind body, or a json body that failed to parse
+       server-side (shipped raw, decoded async client-side as before). Absent when `data` is. */
+    body?: string
+    /* Pre-parsed json-kind body, single-encoded. Present iff the body was json and parsed;
+       `'data' in entry` is the discriminator (a `null` json body still keys present). */
+    data?: unknown
 }

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

@@ -616,16 +616,22 @@ export function generateSSR(
                 )
             }
             /* Non-hoistable child (off the top-level spine): await inline at its structural position,
-               sequential, as before — never streams. */
+               sequential, as before — never streams. Bracket its html in the ADDRESSED boundary
+               (ADR-0049) `abide:c:CHILDPATH` in place of the anonymous `[`/`]` — CHILDPATH is the
+               child's render-path (`$$renderPath(ordinal)`), the same id the client's `mountChild`
+               composes — so a hydration desync inside the child recovers AT this boundary instead of
+               reaching the router and discarding the whole page. */
             const result = nextVar('$child')
+            const childPath = nextVar('$cpath')
             return (
                 anchor +
-                push(target, RANGE_OPEN) +
+                `const ${childPath} = $$renderPath(${ordinal});\n` +
+                `${target}.push('<!--abide:c:' + ${childPath} + '-->');\n` +
                 `const ${result} = await ${renderExpr};\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +
                 `Object.assign($resume, ${result}.resume);\n` +
-                push(target, RANGE_CLOSE)
+                `${target}.push('<!--/abide:c:' + ${childPath} + '-->');\n`
             )
         }
         if (node.kind === 'element' && node.tag === OUTLET_TAG) {

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

@@ -0,0 +1,27 @@
+import { scope } from '../runtime/scope.ts'
+import type { UiProps } from '../runtime/types/UiProps.ts'
+import { disposeRange } from './disposeRange.ts'
+import { openMarker } from './openMarker.ts'
+import { withScope } from './withScope.ts'
+
+/*
+Adopts a component's server range IN PLACE during hydration, given its already-claimed
+`start` marker and the `closeData` of the marker that ends the range. Establishes the
+child's lexical scope + render pass (`withScope`), builds claiming the existing nodes,
+then claims the end marker the build's content stops before — the hydrate half of
+`mountRange`, factored out so `mountChild`'s ADDRESSED adopt (`abide:c:PATH` brackets,
+ADR-0049) and `mountRange`'s anonymous `[`/`]` adopt share ONE implementation and can't
+drift. A build throw is leak-safe: `withScope`/`scope` dispose the partial scope before
+rethrowing, so the caller's `discardAndRebuild` recovery starts clean.
+*/
+export function adoptRange(
+    parent: Node,
+    build: (host: Node, props?: UiProps) => void,
+    props: UiProps | undefined,
+    start: Comment,
+    closeData: string,
+): { start: Comment; end: Comment; dispose: () => void } {
+    const scoped = withScope(() => scope(() => build(parent, props)))
+    const end = openMarker(parent, closeData)
+    return { start, end, dispose: disposeRange(scoped, start, end) }
+}

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

@@ -1,5 +1,7 @@
+import { CURRENT_PATH } from '../runtime/CURRENT_PATH.ts'
 import { claimRun } from '../runtime/claimRun.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { reportHydrationDivergence } from '../runtime/reportHydrationDivergence.ts'
 import { foreignWrapperTag } from './foreignWrapperTag.ts'
 import { templateFor } from './templateFor.ts'
 
@@ -29,10 +31,39 @@ export function cloneStatic(parent: Node, html: string): void {
     const source = wrapper === undefined ? template.content : (template.content.firstChild as Node)
     const hydration = RENDER.hydration
     if (hydration !== undefined) {
-        claimRun(hydration, parent, source.childNodes.length)
+        /* Claim the run AND verify its top-level shape. A static clone is byte-identical to the
+           server markup, so it can only DIVERGE when a client-asymmetric gate above it (a sync
+           `{#if}`/`{#switch}` whose condition differs SSR↔client — `{#if pending()}`) rendered a
+           different branch on the server, leaving the claim cursor on foreign nodes. Unverified,
+           `claimRun` would SILENTLY adopt them — wrong nodes wired, cursor desynced for every later
+           sibling; assert the node names instead and throw the standard structural desync (like
+           `claimExpected`) so an addressed component boundary (ADR-0049) recovers locally. */
+        const claimed: Node[] = []
+        claimRun(hydration, parent, source.childNodes.length, claimed)
+        assertStaticRun(claimed, source.childNodes)
         return
     }
     for (const child of source.childNodes) {
         parent.appendChild(child.cloneNode(true))
     }
 }
+
+/* Throw a structural hydration desync when a claimed static run doesn't match its template's
+   top-level nodes (a short run, or a differing node at any position — an element vs the comment
+   marker of a diverged branch). Named on the `hydrate` channel first, then thrown so the nearest
+   addressed boundary can discard-and-rebuild. */
+function assertStaticRun(claimed: Node[], expected: NodeListOf<ChildNode>): void {
+    const short = claimed.length !== expected.length
+    for (let index = 0; index < expected.length; index += 1) {
+        const want = (expected[index] as Node).nodeName
+        if (short || (claimed[index] as Node).nodeName !== want) {
+            reportHydrationDivergence('static structure desync', {
+                expected: want,
+                got: short ? '(missing)' : (claimed[index] as Node).nodeName,
+            })
+            throw new Error(
+                `[abide] hydration desync at ${CURRENT_PATH.current || '(root)'}: expected a static ${want} node here, but the server DOM had a different node — SSR markup and the client build disagree on structure at this position.`,
+            )
+        }
+    }
+}

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

@@ -62,6 +62,12 @@ export function each<T>(
     /* Each row's scope, registered with the owner so every live row disposes on owner
        teardown (the effect's own disposer only unsubscribes it from `items()`). */
     const group = scopeGroup()
+    /* Persistent reconcile scratch, reused across passes so a steady-state reconcile
+       allocates nothing: `keys` holds each desired key (one `keyOf` call per item), `resolved`
+       its surviving row (or undefined → build). Both are sized to the current list each pass
+       and their stale tail is cleared, so a shrinking list retains no disposed-row refs. */
+    const keys: string[] = []
+    const resolved: (EachRow | undefined)[] = []
 
     /* 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
@@ -177,22 +183,30 @@ export function each<T>(
         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)
+            const count = list.length
             generation += 1
             const pass = generation
-            /* Resolve each desired key to its surviving row once, here, stamping it with
-               this pass — so prune below is an int compare (no `Set`) and the placement
-               walk reuses the resolved row instead of a second `rows.get`. Halving the map
-               lookups per reconcile is a real win once the harness's O(n) `nextSibling` no
-               longer swamps it. `undefined` marks a key with no surviving row — a build. */
-            const resolved: (EachRow | undefined)[] = new Array(keys.length)
-            for (let index = 0; index < keys.length; index += 1) {
-                const row = rows.get(keys[index] as string)
+            /* Fill the reused scratch and resolve each desired key to its surviving row once,
+               here, stamping it with this pass — so prune below is an int compare (no `Set`)
+               and the placement walk reuses the resolved row instead of a second `rows.get`.
+               Halving the map lookups per reconcile is a real win once the harness's O(n)
+               `nextSibling` no longer swamps it. `undefined` marks a key with no surviving row
+               — a build. One `keyOf` call per item, cached in `keys` for the placement walk. */
+            for (let index = 0; index < count; index += 1) {
+                const key = keyOf(list[index] as T)
+                keys[index] = key
+                const row = rows.get(key)
                 if (row !== undefined) {
                     row.gen = pass
                 }
                 resolved[index] = row
             }
+            /* Drop the previous pass's longer tail so a shrunk list retains no disposed-row
+               refs and the scratch stays sized to the live list. */
+            if (keys.length > count) {
+                keys.length = count
+                resolved.length = count
+            }
             /* Prune departed rows first (those the resolve loop didn't reach this pass) so
                their ranges don't sit between survivors and throw off the in-place sibling
                checks below. */

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

@@ -5,9 +5,9 @@ import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
    `+1` opening a range, `-1` closing one, `0` for any other comment. A control-flow
    block's rendered content sits between an OPEN and CLOSE comment — `[`…`]` for each
    rows / if / switch / slot ranges, named `abide:…`…`/abide:…` for await / try /
-   snippet / html; the skeleton's own anchor (`a`) sits OUTSIDE any range, so it scores
-   `0`. Keeping the rule here means a new marker family updates one place, so the two
-   scans can never disagree on what nests. */
+   snippet / html / component-mount (`abide:c:`, ADR-0049); the skeleton's own anchor
+   (`a`) sits OUTSIDE any range, so it scores `0`. Keeping the rule here means a new
+   marker family updates one place, so the two scans can never disagree on what nests. */
 export function markerDepthDelta(data: string): number {
     if (data === RANGE_CLOSE || data.startsWith('/abide:')) {
         return -1

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

@@ -3,8 +3,10 @@ import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { reportHydrationDivergence } from '../runtime/reportHydrationDivergence.ts'
 import type { UiComponent } from '../runtime/types/UiComponent.ts'
 import { withOptionalPath } from '../runtime/withOptionalPath.ts'
+import { adoptRange } from './adoptRange.ts'
 import { commentData } from './commentData.ts'
 import { discardAndRebuild } from './discardAndRebuild.ts'
 import { mountRange } from './mountRange.ts'
@@ -20,8 +22,12 @@ The server decides per render whether a HOISTABLE child (ADR-0039) inlined (fast
 streamed (still-pending), and the client build can't know which — nor whether this child was
 hoistable at all — so hydrate mode probes the cursor:
 
-  - `<!--[-->` (RANGE_OPEN) next → the server INLINED the child (every non-hoistable child,
-    and a hoistable one whose flight settled); adopt its range in place.
+  - `<!--abide:c:CHILDPATH-->` next → the server INLINED the child in its ADDRESSED boundary
+    (ADR-0049 — every non-streamed child); claim the boundary open, adopt the range in place,
+    claim the close. A structural desync INSIDE the child (a client-true / server-false `{#if}`
+    gating an element's presence) throws through the build — recover by discarding just this
+    boundary and remounting the child fresh (`discardAndRebuild`), so the desync costs one
+    component instead of reaching the router and discarding the whole page.
   - `<!--abide:await:CHILDPATH-->` next → the server STREAMED it; `__abideSwap` has already
     spliced the child's `<!--[-->…<!--]-->` between the boundary markers before the bundle
     ran, so claim the boundary open, adopt the inner range in place, claim the boundary close.
@@ -46,27 +52,56 @@ export function mountChild(
     ordinal?: number,
 ): void {
     const run = <T>(build: () => T): T => withOptionalPath(ordinal, build)
-    const mount = (): { dispose: () => void } =>
-        run(() => mountRange(parent, factory.build, props, before))
+    /* Both boundary ids are the child's render-path, computed here exactly as the server wrote it
+       (`renderPath(ordinal)`), so SSR and client agree with no counter. */
+    const childPath = run(() => CURRENT_PATH.current)
+    const addressed = { open: `abide:c:${childPath}`, close: `/abide:c:${childPath}` }
+    /* Mount the child's range in its ADDRESSED boundary (ADR-0049) — the create path and the
+       inline-recovery rebuild, so a client-only mount is byte-congruent with the SSR markup and a
+       desync has a named close to discard to. */
+    const mountAddressed = (where: Node | null): { dispose: () => void } =>
+        run(() => mountRange(parent, factory.build, props, where, addressed))
+    /* Mount into an anonymous `[ … ]` range — the swapped-in inner range of a STREAMED child, whose
+       own address is the outer `abide:await` pair. */
+    const mountAnon = (where: Node | null): { dispose: () => void } =>
+        run(() => mountRange(parent, factory.build, props, where))
 
     const hydration = RENDER.hydration
     if (hydration === undefined) {
-        /* Call mount() first, THEN register its dispose — `OWNER.current?.push(mount())` would
-           short-circuit the whole expression (never mounting) when there is no owner. */
-        const handle = mount()
+        /* Call mountAddressed() first, THEN register its dispose — pushing the call result inline
+           would short-circuit (never mounting) when there is no owner. */
+        const handle = mountAddressed(before)
         OWNER.current?.push(handle.dispose)
         return
     }
 
-    /* Probe the cursor without consuming it. Streamed iff the next node is this child's boundary. */
-    const childPath = run(() => CURRENT_PATH.current)
+    /* Probe the cursor without consuming it, and classify what the server emitted here by the
+       marker data. */
     const cursor = claimChild(hydration, parent)
-    const streamed = cursor !== null && commentData(cursor) === `abide:await:${childPath}`
+    const marker = cursor !== null ? commentData(cursor) : undefined
 
-    if (!streamed) {
-        /* INLINE — the server inlined the child's `[ … ]` range; adopt it in place. */
-        const handle = mount()
-        OWNER.current?.push(handle.dispose)
+    if (marker !== `abide:await:${childPath}`) {
+        /* INLINE (ADR-0049) — claim the addressed open, adopt the child's range in place. A
+           structural desync inside the child throws through the build; recover by discarding just
+           THIS boundary and remounting fresh, so the desync costs one component, not the page. The
+           partial scope a throwing build stranded is already disposed (`withScope`/`scope`), so the
+           cold rebuild starts clean. */
+        const open = openMarker(parent, addressed.open)
+        try {
+            const handle = run(() =>
+                adoptRange(parent, factory.build, props, open, addressed.close),
+            )
+            OWNER.current?.push(handle.dispose)
+        } catch (error) {
+            reportHydrationDivergence('component boundary recovered — remounting', {
+                path: childPath,
+                error,
+            })
+            const handle = discardAndRebuild(hydration, parent, open, addressed.close, (after) =>
+                mountAddressed(after),
+            )
+            OWNER.current?.push(handle.dispose)
+        }
         return
     }
 
@@ -75,7 +110,7 @@ export function mountChild(
     const inner = claimChild(hydration, parent)
     const warm = inner !== null && commentData(inner) === RANGE_OPEN
     if (warm) {
-        const handle = mount()
+        const handle = mountAnon(before)
         openMarker(parent, `/abide:await:${childPath}`)
         OWNER.current?.push(handle.dispose)
         return
@@ -88,7 +123,7 @@ export function mountChild(
         parent,
         open,
         `/abide:await:${childPath}`,
-        (after) => run(() => mountRange(parent, factory.build, props, after)),
+        (after) => mountAnon(after),
     )
     OWNER.current?.push(handle.dispose)
 }

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

@@ -1,11 +1,9 @@
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-import { scope } from '../runtime/scope.ts'
 import type { UiProps } from '../runtime/types/UiProps.ts'
-import { disposeRange } from './disposeRange.ts'
+import { adoptRange } from './adoptRange.ts'
 import { fillRange } from './fillRange.ts'
 import { openMarker } from './openMarker.ts'
-import { withScope } from './withScope.ts'
 
 /*
 Mounts a nested child component as a marker-bounded range — the wrapper-free
@@ -22,6 +20,12 @@ marker — mirrors `mountSlot`/`when`). `before` (a skeleton-located node, the b
 `anchorCursor`) places the range among static siblings on create; hydrate ignores it
 (the claim cursor drives placement). Returns the markers + a disposer so the hot path
 can rebuild in place.
+
+`bracket` names the range's boundary markers. It defaults to the anonymous `[`/`]` a
+control-flow re-fill and the swapped-in inner range of a streamed child use; `mountChild`
+passes the ADDRESSED `abide:c:PATH` pair (ADR-0049) so a component's range carries its own
+render-path — the same markers on create and SSR (congruent) and a named close a desync can
+discard to.
 */
 // @documentation plumbing
 export function mountRange(
@@ -29,17 +33,16 @@ export function mountRange(
     build: (host: Node, props?: UiProps) => void,
     props: UiProps | undefined,
     before: Node | null = null,
+    bracket: { open: string; close: string } = DEFAULT_BRACKET,
 ): { start: Comment; end: Comment; dispose: () => void } {
     const hydration = RENDER.hydration
-    const start = openMarker(parent, RANGE_OPEN, before)
+    const start = openMarker(parent, bracket.open, before)
     if (hydration === undefined) {
-        const end = openMarker(parent, RANGE_CLOSE, before)
+        const end = openMarker(parent, bracket.close, before)
         return fillRange(start, end, build, props)
     }
-    /* Hydrate: adopt the server range in place. Establish the child's lexical scope
-       and render pass (same as `fillRange`), build claiming the existing nodes, then
-       claim the end marker the build's content stops before. */
-    const scoped = withScope(() => scope(() => build(parent, props)))
-    const end = openMarker(parent, RANGE_CLOSE)
-    return { start, end, dispose: disposeRange(scoped, start, end) }
+    /* Hydrate: adopt the server range in place, claiming `bracket.close` as the end marker. */
+    return adoptRange(parent, build, props, start, bracket.close)
 }
+
+const DEFAULT_BRACKET = { open: RANGE_OPEN, close: RANGE_CLOSE }

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

@@ -70,7 +70,22 @@ function bindKeys(
         if (skip.has(key)) {
             continue
         }
-        const value = object[key]
+        /* Reading the value can itself throw a `SuspenseSignal`: when `source()` is a
+           restProps proxy (the `<Button {...rest}>` case), its `get` invokes the underlying
+           prop thunk, so a key whose expression reads a still-pending blocking `await` suspends
+           HERE — after the `source()` enumeration guard already passed. Classify it as an
+           attribute; `attr`'s own effect swallows the suspend and fills the value in on settle.
+           An event handler never suspends — its thunk returns a function without reading a cell. */
+        let value: unknown
+        try {
+            value = object[key]
+        } catch (signal) {
+            if (!(signal instanceof SuspenseSignal)) {
+                throw signal
+            }
+            attr(element, key, () => source()[key])
+            continue
+        }
         if (key.startsWith('on') && typeof value === 'function') {
             on(element, key.slice(2), value as EventListener)
         } else if (typeof value !== 'function') {

package/src/lib/ui/finalizeStreamedChildren.ts

@@ -1,13 +1,7 @@
 import type { FlightPromise } from './flight.ts'
-import { RANGE_CLOSE, RANGE_OPEN } from './runtime/RANGE_MARKER.ts'
 import type { ResumeEntry } from './runtime/RESUME.ts'
 import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 
-/* Comment-wrapped range markers — imported from the shared constant (not a local literal) so the
-   inline branch below can never drift from `generateSSR`'s own range emit. */
-const OPEN = `<!--${RANGE_OPEN}-->`
-const CLOSE = `<!--${RANGE_CLOSE}-->`
-
 /* One hoistable child render staged by generateSSR: the reserved index in its output array, the
    array itself, the child's render-path (the streamed boundary id), and its in-flight render. */
 export type StagedChild = {
@@ -24,9 +18,9 @@ hoistable child was started as an isolated `$$flight` in the prefix and its outp
 (an empty `$out` slot); here we fill that slot per child:
 
 - A flight that has already SETTLED (a synchronous / warm-cache child, or a fast read) inlines its
-  html into the reserved slot as `<!--[-->…<!--]-->` — BYTE-IDENTICAL to the pre-ADR-0039 inline
-  `await Child.render()` path, so an all-fast page's wire and hydration are unchanged. Its awaits /
-  resume merge exactly as the inline path did.
+  html into the reserved slot in the child's addressed `abide:c:CHILDPATH` boundary (ADR-0049) —
+  the same shape `generateSSR`'s non-hoistable inline path emits, so an all-fast page adopts and
+  recovers uniformly. Its awaits / resume merge exactly as the inline path did.
 - A flight settled REJECTED rethrows here — same as a rejecting inline await (500 before flush).
 - A still-PENDING flight (genuine I/O) STREAMS: the slot gets an empty `abide:await:CHILDPATH`
   boundary, and an html-only SsrAwait is pushed so `renderToStream` flushes the shell now and streams
@@ -53,7 +47,12 @@ export async function finalizeStreamedChildren(
     for (const staged of slots) {
         if (staged.flight.settled && staged.flight.error === undefined) {
             const rendered = staged.flight.value as SsrRender
-            staged.out[staged.slot] = OPEN + rendered.html + CLOSE
+            /* Inline the settled html in the child's ADDRESSED boundary (ADR-0049) — the same
+               `abide:c:CHILDPATH` shape `generateSSR`'s non-hoistable path emits, so the client's
+               `mountChild` adopts a hoistable-settled and a non-hoistable child identically (it can't
+               know which the server chose) and either recovers at this boundary on a desync. */
+            staged.out[staged.slot] =
+                `<!--abide:c:${staged.id}-->${rendered.html}<!--/abide:c:${staged.id}-->`
             mergeChildRender(rendered, awaits, resume)
         } else if (staged.flight.settled) {
             throw staged.flight.error

package/src/lib/ui/runtime/RANGE_MARKER.ts

@@ -7,7 +7,9 @@
 
    A control-flow block's rendered content sits between an OPEN (`[`) and CLOSE (`]`)
    comment; a snippet interpolation between `abide:snippet` / `/abide:snippet` (matching
-   `skeleton`'s `abide:` / `/abide:` named-boundary convention, like `OUTLET_MARKER`).
+   `skeleton`'s `abide:` / `/abide:` named-boundary convention, like `OUTLET_MARKER`); a
+   component mount between the ADDRESSED pair `abide:c:PATH` / `/abide:c:PATH` (PATH the
+   child's render-path — ADR-0049 — so a desync inside recovers at that one boundary).
    The skeleton's own positioning anchor (`a`) sits OUTSIDE any such range. */
 export const RANGE_OPEN = '['
 export const RANGE_CLOSE = ']'

package/src/lib/ui/startClient.ts

@@ -7,6 +7,7 @@ import { cacheStoreSlot } from '../shared/cacheStoreSlot.ts'
 import { createCacheStore } from '../shared/createCacheStore.ts'
 import { pageSlot } from '../shared/pageSlot.ts'
 import { SOCKET_SEED } from '../shared/SOCKET_SEED.ts'
+import { SSR_SCRIPT_ID } from '../shared/SSR_SCRIPT_ID.ts'
 import { sharedCacheStoreSlot } from '../shared/sharedCacheStoreSlot.ts'
 import type { SsrPayload } from '../shared/types/SsrPayload.ts'
 import type { StreamedResolution } from '../shared/types/StreamedResolution.ts'
@@ -32,6 +33,39 @@ navigation — importing each further page's chunk on first visit and probing th
 destination through the server's app.handle so auth/redirect gating still applies.
 Returns a disposer. `target` defaults to `#app`; pass one explicitly in tests.
 */
+/*
+Reads the server's SSR payload. Production ships it as an inert `<script
+type="application/json">` (ADR-0051) parsed once here in the deferred bundle — off the
+critical path, and through the fast JSON grammar rather than a compiled multi-MB JS object
+literal. A pre-set `globalThis.__SSR__` wins first: the uiStartClient tests stamp it
+directly, and it preserves any pre-bundle inline stamp. The parsed payload is republished
+onto `globalThis.__SSR__` for devtools / inspector visibility.
+*/
+function readSsrPayload(): Partial<SsrPayload> {
+    const globalScope = globalThis as { __SSR__?: Partial<SsrPayload> }
+    const preset = globalScope.__SSR__
+    if (preset !== undefined) {
+        return preset
+    }
+    const element = typeof document !== 'undefined' ? document.getElementById(SSR_SCRIPT_ID) : null
+    const text = element?.textContent
+    if (!text) {
+        return {}
+    }
+    /* Degrade a mangled payload to a cold boot rather than throwing out of startClient (a
+       proxy/extension could corrupt the script text). The old inline `window.__SSR__ = {…}`
+       statement failed the same way — its throw left the global undefined and the `?? {}`
+       fallback booted cold — so keep that resilience instead of failing the whole mount. */
+    let parsed: Partial<SsrPayload>
+    try {
+        parsed = JSON.parse(text) as Partial<SsrPayload>
+    } catch {
+        return {}
+    }
+    globalScope.__SSR__ = parsed
+    return parsed
+}
+
 // @documentation plumbing
 export function startClient(
     routes: Record<string, RouteLoader>,
@@ -43,7 +77,7 @@ export function startClient(
     if (target === null) {
         throw new Error('[abide] startClient: missing #app target')
     }
-    const ssr = (globalThis as { __SSR__?: Partial<SsrPayload> }).__SSR__ ?? {}
+    const ssr = readSsrPayload()
     /* Seed the per-page __SSR__ stamps into their shared slots before mount: the mount
        base, app name (default log channel), health payload (so health()'s first probe is
        warm), and the env-configured RPC timeout (ABIDE_CLIENT_TIMEOUT, shipped per