@abide/abide 0.45.0 → 0.47.0

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

@@ -4,6 +4,7 @@ import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { appendSnippet } from './appendSnippet.ts'
+import { assertClaimedText } from './assertClaimedText.ts'
 import { isComment } from './isComment.ts'
 import { parseRawNodes } from './parseRawNodes.ts'
 
@@ -49,6 +50,12 @@ export function appendText(parent: Node, read: () => unknown, splitAlways = fals
         const node = (
             isText ? claimed : parent.insertBefore(document.createTextNode(''), claimed)
         ) as Text
+        /* The claimed SSR node must begin with this binding's value, or the split below
+           lands mid-run and orphans the tail — throw legibly at the divergence instead. A
+           synthesized empty node is this binding's own, so there's nothing to disagree. */
+        if (isText) {
+            assertClaimedText(node, value)
+        }
         /* Peel this binding's text off the merged SSR node. A non-final binding in a
            run (`splitAlways`) splits even when it consumes the whole node, leaving an
            empty node for the next binding — otherwise an interpolation that renders to
@@ -87,12 +94,17 @@ function appendRawHtml(parent: Node, read: () => unknown): void {
     let nodes: Node[] = []
 
     const set = (value: string): void => {
+        /* Insert/remove via the anchor's LIVE parent, not the build-time `parent` — when
+           this interpolation 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 (same reason each/awaitBlock use the anchor's parentNode). */
+        const liveParent = anchor.parentNode ?? parent
         for (const node of nodes) {
-            parent.removeChild(node)
+            liveParent.removeChild(node)
         }
-        nodes = parseRawNodes(parent, value)
+        nodes = parseRawNodes(liveParent, value)
         for (const node of nodes) {
-            parent.insertBefore(node, anchor)
+            liveParent.insertBefore(node, anchor)
         }
     }
 

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

@@ -0,0 +1,20 @@
+/*
+A text claim that MUST match the server's rendered text. On hydrate,
+appendStatic/appendText adopt a merged SSR text node and split it at the CLIENT
+value's length, trusting the client renders the same string the server did. When
+they diverge — a binding whose value only materializes client-side (a peeked cache
+value, `Date.now()`, a random) — the split lands mid-run and orphans the tail,
+silently corrupting the DOM several nodes downstream. This turns that into a legible
+desync AT the divergence, the text counterpart of `claimExpected` for structure.
+
+The claimed node's data must BEGIN with this binding's value: a merged run appends
+the following siblings' text AFTER it, so the value is exactly the leading slice. A
+mismatch means SSR and the client build disagree on the text here.
+*/
+export function assertClaimedText(node: Text, value: string): void {
+    if (!node.data.startsWith(value)) {
+        throw new Error(
+            `[abide] hydration desync: expected server text beginning with ${JSON.stringify(value)} here, but the server DOM had ${JSON.stringify(node.data)} — SSR markup and the client build disagree on the text at this position.`,
+        )
+    }
+}

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

@@ -1,11 +1,10 @@
-import { activeCacheStore } from '../../shared/activeCacheStore.ts'
 import { decodeRefJson } from '../../shared/decodeRefJson.ts'
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { generationGuard } from '../runtime/generationGuard.ts'
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-import type { DeferMarker, ResumeEntry } from '../runtime/RESUME.ts'
+import type { ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
@@ -181,42 +180,6 @@ export function awaitBlock(
         active = { start, end, dispose }
     }
 
-    /* Inert adoption — a deferred `{#await cache()}` (large payload, shipped as a `{defer,key}`
-       resume marker). Adopt the SSR then-branch WITHOUT building its bindings or materializing
-       the awaited value: the server markup is already correct, so keep it verbatim and skip the
-       payload decode entirely (the boot-path cost deferral targets). Only subscribe THIS block's
-       effect to the cache key — reads, decodes and fetches all wait. A later cache.invalidate
-       re-runs the effect, which then reads the value for real and builds a fresh branch. Sound
-       because a display-first read replaces the whole branch on re-read anyway, so there is no
-       extra flash beyond the swap the re-read already performs. */
-    const adoptInert = (open: Node | null, key: string): void => {
-        const cursor = hydration as NonNullable<typeof hydration>
-        const firstKept = open?.nextSibling ?? null
-        /* Scan to THIS block's close marker, leaving every server node in place. Nested
-           blocks carry different ids, so the first data match is our own close. */
-        let node: Node | null = firstKept
-        while (node !== null && (node as { data?: string }).data !== `/abide:await:${id}`) {
-            node = node.nextSibling
-        }
-        const close = node
-        cursor.next.set(parent, close?.nextSibling ?? null)
-        /* Bracket the kept nodes as a `[`…`]` range + park an anchor, identical to `adopt`,
-           so the first re-run's `place`/`detach` evicts them like any other branch. */
-        const start = document.createComment(RANGE_OPEN)
-        parent.insertBefore(start, firstKept ?? close)
-        const end = document.createComment(RANGE_CLOSE)
-        parent.insertBefore(end, close)
-        anchor = document.createTextNode('')
-        parent.insertBefore(anchor, close)
-        /* No scope/effects were built for the kept nodes, so disposal only evicts the range. */
-        active = { start, end, dispose: () => undefined }
-        /* Not 'then' — the first re-run rebuilds the branch fresh via `place`. */
-        activeKind = 'pending'
-        /* Subscribe without a value read: no clone, no decode, no fetch — just the key, so
-           cache.invalidate re-runs this effect (createSubscriber ties it to the running scope). */
-        activeCacheStore().subscribe(key)
-    }
-
     /* Discard the SSR boundary and (re)build the block from the live promise, fresh
        (hydration off) — the recovery path when adoption can't use the server markup. */
     const rebuildCold = (open: Node | null): void => {
@@ -253,28 +216,28 @@ export function awaitBlock(
            lives. A decode failure (malformed/absent payload) reads as "no resume" — fall
            through to the live promise rather than crash hydration. */
         const raw = RESUME[id]
-        let decoded: ResumeEntry | DeferMarker | undefined
+        let decoded: ResumeEntry | undefined
         if (raw !== undefined) {
             try {
-                decoded = decodeRefJson(raw) as ResumeEntry | DeferMarker
+                decoded = decodeRefJson(raw) as ResumeEntry
             } catch {
                 decoded = undefined
             }
         }
-        /* A deferred marker ships the cache key, not the value — adopt the server branch inert
-           and skip the decode. Intercept before the ok/catch logic. Object-guard the `in`: a
-           corrupt manifest decoding to a primitive/null must read as "no resume" (fall through),
-           not throw past the decode try/catch and crash hydration. */
-        if (typeof decoded === 'object' && decoded !== null && 'defer' in decoded) {
-            adoptInert(open, decoded.key)
-            return
-        }
-        /* Non-deferred: read the promise now so the block subscribes to its reactive source
-           (a cache key) — warm on resume, so no round-trip — then adopt the resume value /
-           warm-sync result below, or discard and build the pending branch fresh. */
+        /* Read the promise now so the block subscribes to its reactive source (a cache key) —
+           warm on resume, so no round-trip — then adopt the resume value / warm-sync result
+           below, or discard and build the pending branch fresh. */
         const result = promiseThunk()
-        const entry = decoded as ResumeEntry | undefined
+        const entry = decoded
         if (entry !== undefined) {
+            /* The resume entry drives the adopted branch below; the live `result` read to
+               subscribe the reactive source is discarded here. Swallow its rejection — a
+               cold-cache warm-seed miss starts a real fetch, and if that fetch rejects it
+               would otherwise surface as an unhandledrejection at boot (process-fatal under
+               Bun) instead of being harmlessly dropped. */
+            if (isThenable(result)) {
+                void (result as PromiseLike<unknown>).then(undefined, () => undefined)
+            }
             /* Build the adopted branch around a value CELL (then) so a later re-run updates
                it in place, exactly like a fresh mount. The `throw` for a catch-less rejection
                stays OUTSIDE the adopt try/catch so it surfaces rather than triggering the
@@ -336,10 +299,8 @@ export function awaitBlock(
         if (first) {
             first = false
             if (hydration !== undefined) {
-                /* firstHydrate reads the promise ITSELF, after checking the resume marker: a
-                   deferred block must not invoke promiseThunk (it would materialize/fetch the
-                   value we're deferring) and subscribes by key instead; every other path reads
-                   it so the block subscribes to its reactive source (a cache key). */
+                /* firstHydrate reads the promise ITSELF so the block subscribes to its reactive
+                   source (a cache key), then adopts the resume value / warm-sync result. */
                 firstHydrate()
                 return
             }

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

@@ -0,0 +1,48 @@
+import { effect } from '../effect.ts'
+import { on } from './on.ts'
+
+/*
+Two-way `bind:value` for a `<select>`. The bound value drives the selection through
+a reactive effect, and the user's pick writes back on `change`. A plain `bind:value`
+would set `el.value` once, up front — but a `<select>`'s options are frequently
+mounted AFTER the binding runs (a `{#for}` child, an async list), and the browser
+silently drops a `value` assignment naming an option that isn't present yet. So a
+`MutationObserver` re-applies the selection whenever the option set changes (its
+callback runs in a microtask before paint, so no visible flash), disconnected on
+teardown. `multiple` switches single-value (`el.value`) semantics for array
+membership: each option's `selected` is set from the bound array, and the write-back
+collects `selectedOptions` back into an array.
+*/
+// @documentation plumbing
+export function bindSelectValue(
+    element: HTMLSelectElement,
+    read: () => unknown,
+    write: (value: unknown) => void,
+    multiple: boolean,
+): void {
+    /* Push the bound value into the DOM selection. */
+    const apply = (): void => {
+        if (multiple) {
+            const selected = (read() as unknown[]) ?? []
+            for (const option of element.options) {
+                option.selected = selected.includes(option.value)
+            }
+        } else {
+            element.value = read() as string
+        }
+    }
+    /* Read the current DOM selection back out for the write. */
+    const collect = (): unknown =>
+        multiple ? Array.from(element.selectedOptions, (option) => option.value) : element.value
+    /* Re-apply whenever the bound value changes (this effect tracks `read`). */
+    effect(apply)
+    /* Re-apply whenever the option set changes — covers `{#for}`/async options that
+       mount after the first apply. This effect reads nothing reactive, so it runs once
+       and only its teardown (disconnect) fires on dispose. */
+    effect(() => {
+        const observer = new MutationObserver(apply)
+        observer.observe(element, { childList: true, subtree: true })
+        return () => observer.disconnect()
+    })
+    on(element, 'change', () => write(collect()))
+}

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

@@ -107,7 +107,18 @@ export function each<T>(
     if (hydration !== undefined) {
         let position = 0
         for (const item of items()) {
-            rows.set(keyOf(item), buildRow(item, position)) // claims the SSR row where it sits
+            const key = keyOf(item)
+            const row = buildRow(item, position) // claims the SSR row where it sits
+            if (rows.has(key)) {
+                /* Duplicate key: this row already claimed its SSR markers, but the map holds
+                   one row per key (create mode keeps the FIRST built row too). Dispose+remove
+                   this later duplicate so it isn't orphaned on screen forever — the reconcile
+                   prune only reaches rows still in the map. */
+                row.dispose()
+                removeRange(row.start, row.end)
+            } else {
+                rows.set(key, row)
+            }
             position += 1
         }
         anchor = document.createTextNode('')

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

@@ -1,3 +1,5 @@
+import { hydratingSlot } from '../../shared/hydratingSlot.ts'
+import { wakeHydrationPeeks } from '../../shared/wakeHydrationPeeks.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeLabel } from './scopeLabel.ts'
@@ -25,7 +27,9 @@ export function hydrate(
     props?: unknown,
 ): () => void {
     const previous = RENDER.hydration
+    const previousHydrating = hydratingSlot.active
     RENDER.hydration = { next: new Map() }
+    hydratingSlot.active = true
     try {
         /* Same shared mount core as `mount` (see `withScope`) — a hydrated component owns a
            scope too, adopting the model its build adopts — run with the claim cursor active. */
@@ -33,5 +37,11 @@ export function hydrate(
         return () => lexical.dispose()
     } finally {
         RENDER.hydration = previous
+        hydratingSlot.active = previousHydrating
+        /* Wake the peeks this pass withheld — only when unwinding the OUTERMOST pass, so a
+           nested child hydrate doesn't fire it early (save/restore, not a bare reset). */
+        if (!previousHydrating) {
+            wakeHydrationPeeks()
+        }
     }
 }

package/src/lib/ui/effect.ts

@@ -10,9 +10,10 @@ dispose — and may be async (its teardown then runs once the promise settles, b
 only the reads before its first `await` are tracked). Returns a dispose that runs
 the final teardown and detaches it from the graph. This is abide's from-scratch
 effect primitive: the open-on-first-read / close-on-last-reader lifecycle,
-grounded in abide's own reactive core. Authored as `scope().effect(...)` (the bare
-name is reserved); this module export stays for the generated binding code that
-calls it directly (and for the SSR strip), so it carries no standalone demo.
+grounded in abide's own reactive core. Imported and called bare
+(`import { effect } from '@abide/abide/ui/effect'`); the compiler resolves the import
+binding (alias-safe) and the SSR back-end strips the call (effects are client
+lifecycle). Generated binding code also calls it directly.
 */
 // @documentation plumbing
 export function effect(fn: () => EffectResult): () => void {

package/src/lib/ui/installHotBridge.ts

@@ -7,6 +7,7 @@ import { appendTextAt } from './dom/appendTextAt.ts'
 import { attach } from './dom/attach.ts'
 import { attr } from './dom/attr.ts'
 import { awaitBlock } from './dom/awaitBlock.ts'
+import { bindSelectValue } from './dom/bindSelectValue.ts'
 import { cloneStatic } from './dom/cloneStatic.ts'
 import { each } from './dom/each.ts'
 import { eachAsync } from './dom/eachAsync.ts'
@@ -25,7 +26,6 @@ import { spreadProps } from './dom/spreadProps.ts'
 import { switchBlock } from './dom/switchBlock.ts'
 import { tryBlock } from './dom/tryBlock.ts'
 import { when } from './dom/when.ts'
-import { deferResume } from './deferResume.ts'
 import { effect } from './effect.ts'
 import { enterScope } from './enterScope.ts'
 import { exitScope } from './exitScope.ts'
@@ -36,6 +36,7 @@ import { hotReloadEnabled } from './runtime/hotReloadEnabled.ts'
 import { hotReplace } from './runtime/hotReplace.ts'
 import { nextBlockId } from './runtime/nextBlockId.ts'
 import { scope } from './scope.ts'
+import { watch } from './watch.ts'
 
 /*
 Dev-only: exposes the abide-ui runtime plus `hotReplace` on `window.__abide`, and
@@ -54,6 +55,7 @@ export function installHotBridge(): void {
         enterScope,
         exitScope,
         effect,
+        watch,
         mount,
         appendText,
         appendTextAt,
@@ -65,11 +67,11 @@ export function installHotBridge(): void {
         attr,
         on,
         attach,
+        bindSelectValue,
         each,
         eachAsync,
         when,
         awaitBlock,
-        deferResume,
         tryBlock,
         switchBlock,
         mountSlot,

package/src/lib/ui/remoteProxy.ts

@@ -17,16 +17,20 @@ import { outboxRegistry } from './rpcOutbox/outboxRegistry.ts'
 import { currentAbortSignal } from './runtime/currentAbortSignal.ts'
 import { REQUEST_SUPERSEDED } from './runtime/REQUEST_SUPERSEDED.ts'
 import type { PersistenceStore } from './types/PersistenceStore.ts'
+import { watch } from './watch.ts'
 
 /* The framework-reserved `HttpError.kind` for a request the durable outbox parked because
    the server was unreachable — distinct from a handler-declared error name. Lets a caller
    branch with `error instanceof HttpError && error.kind === 'queued'`. */
 const QUEUED = 'queued'
 
-/* A durable RPC's per-call options. `outbox: true` parks an unreachable call for replay;
-   `store` exists for testing — production uses the default persistence store. */
+/* Build-time options the bundler stamps onto the client proxy stub. `outbox: true` parks an
+   unreachable call for replay; `streaming: true` (handler returns jsonl()/sse()) makes the bare
+   call return the Subscribable directly; `store` exists for testing (production uses the default
+   persistence store). */
 export type DurableOptions = {
     outbox?: boolean
+    streaming?: boolean
     store?: PersistenceStore
 }
 
@@ -75,6 +79,7 @@ export function remoteProxy<Args, Return>(
         method,
         url,
         clients: browserClientFlags,
+        streaming: durable?.streaming ?? false,
         /*
         The Request URL carries the mount base so the fetch routes through the
         proxy (/v2/rpc/…); the cache key keeps the bare `url` (keyForRemoteCall
@@ -143,6 +148,17 @@ export function remoteProxy<Args, Return>(
             )
         },
     })
+    /* Overwrite the inert `.watch` the shared attach bound: on the client the real reaction
+       sugar routes to the `watch` ui primitive (`fn.watch(handler)` / `fn.watch(args, handler)`).
+       Attached here — not in the shared attach — so `watch` never rides into a server bundle. */
+    Object.assign(fn, {
+        watch: (argsOrHandler: unknown, handler?: unknown) =>
+            (watch as (source: unknown, a?: unknown, b?: unknown) => () => void)(
+                fn,
+                argsOrHandler,
+                handler,
+            ),
+    })
     if (durable?.outbox === true) {
         queue = getOrCreateOutboxQueue<Args, Return>(url, fn, durable)
         Object.assign(fn, { outbox: outboxFace(queue) })

package/src/lib/ui/renderToStream.ts

@@ -1,6 +1,5 @@
-import { deferResume } from './deferResume.ts'
 import { resumeSeedScript } from './resumeSeedScript.ts'
-import type { DeferMarker, ResumeEntry } from './runtime/RESUME.ts'
+import type { ResumeEntry } from './runtime/RESUME.ts'
 import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 import { tryEncodeResume } from './tryEncodeResume.ts'
 
@@ -40,8 +39,8 @@ export async function* renderToStream(
        instead of refetching. (`resume` is the render body's live object, so late writes
        appear here.) */
     const seededResume = new Set<number>(Object.keys(resume).map(Number))
-    const resumeDelta = (): Record<number, ResumeEntry | DeferMarker> => {
-        const delta: Record<number, ResumeEntry | DeferMarker> = {}
+    const resumeDelta = (): Record<number, ResumeEntry> => {
+        const delta: Record<number, ResumeEntry> = {}
         for (const [key, entry] of Object.entries(resume)) {
             const id = Number(key)
             if (!seededResume.has(id)) {
@@ -84,22 +83,19 @@ export async function* renderToStream(
     }
 }
 
-type Settled = { id: number; html: string; resume: ResumeEntry | DeferMarker }
+type Settled = { id: number; html: string; resume: ResumeEntry }
 
 /* Awaits one streaming block's promise and renders the resolved or error branch to
    HTML (the renderers are async so a nested `await` block composes), capturing the
    value (serializable) for the resume manifest. Errors serialize as their message —
-   enough for the catch branch, without leaking a stack. A cache-backed value defers via
-   `deferResume` (a `{defer,key}` marker + lazy body seed) — the client adopts the streamed
-   branch inert instead of decoding the value; a non-cache value ships inline as before. */
+   enough for the catch branch, without leaking a stack. The resolved value ships inline
+   so hydration adopts the streamed branch warm. */
 function settle(block: SsrAwait): Promise<Settled> {
-    /* Keep the promise: cache() tagged it with its key, which `deferResume` reads to defer. */
-    const pending = block.promise()
-    return Promise.resolve(pending).then(
+    return Promise.resolve(block.promise()).then(
         async (value) => ({
             id: block.id,
             html: await block.then(value),
-            resume: deferResume(pending, value),
+            resume: { ok: true, value },
         }),
         async (error) => {
             /* No catch branch → surface the rejection (500 before the first flush,
@@ -123,6 +119,6 @@ function settle(block: SsrAwait): Promise<Settled> {
    strings. `tryEncodeResume` handles the serialize-or-refetch policy (undefined → no
    script → the swap consumers skip registration → hydration re-runs that one promise).
    `applyResolved`/the inline swap script store it via `.textContent`; `awaitBlock` decodes it. */
-function encodeStreamResume(resume: ResumeEntry | DeferMarker, id: number): string | undefined {
+function encodeStreamResume(resume: ResumeEntry, id: number): string | undefined {
     return tryEncodeResume(resume, id)?.replace(/</g, '\\u003c')
 }

package/src/lib/ui/resumeSeedScript.ts

@@ -1,5 +1,5 @@
 import { safeJsonForScript } from '../shared/safeJsonForScript.ts'
-import type { DeferMarker, ResumeEntry } from './runtime/RESUME.ts'
+import type { ResumeEntry } from './runtime/RESUME.ts'
 import { tryEncodeResume } from './tryEncodeResume.ts'
 
 /* A self-contained `<script>` seeding the await-resume manifest with the blocking
@@ -11,7 +11,7 @@ import { tryEncodeResume } from './tryEncodeResume.ts'
    early or parse as a line terminator. Shared by the buffered (`createUiPageRenderer`)
    and streaming (`renderToStream`) paths. */
 // @documentation plumbing
-export function resumeSeedScript(resume: Record<number, ResumeEntry | DeferMarker>): string {
+export function resumeSeedScript(resume: Record<number, ResumeEntry>): string {
     /* ref-json (not JSON) so a value carrying cycles or shared back-references — a
        media tree with parent↔child links — seeds instead of being dropped. `tryEncodeResume`
        drops just an unserializable entry (the client re-runs that one branch's promise),

package/src/lib/ui/router.ts

@@ -1,8 +1,10 @@
+import { hydratingSlot } from '../shared/hydratingSlot.ts'
 import { layoutChainForRoute } from '../shared/layoutChainForRoute.ts'
+import { matchRoute } from '../shared/matchRoute.ts'
+import { wakeHydrationPeeks } from '../shared/wakeHydrationPeeks.ts'
 import { fillBoundary } from './dom/fillBoundary.ts'
 import { outlet } from './dom/outlet.ts'
 import { effect } from './effect.ts'
-import { matchRoute } from './matchRoute.ts'
 import { navigatePath } from './navigate.ts'
 import { CHILD_PRESENT } from './runtime/CHILD_PRESENT.ts'
 import { clientPage } from './runtime/clientPage.ts'
@@ -81,7 +83,8 @@ function clearRecoveryReloads(url: string): void {
 
 /*
 A minimal client router on the History API. `router` matches the current path
-against the route patterns (literal / `[name]` / `[...rest]`, via matchRoute),
+against the route patterns (literal / `[name]` / `[[name]]` / `[...rest]`, via
+the shared matchRoute — the same matcher the server dispatches with),
 imports the matching page's chunk — plus every `layout.abide` chunk that wraps it
 (`layoutChainForRoute`) — on demand, and mounts them as a chain: each layout into
 the previous layout's `<slot/>` outlet, the page into the innermost outlet.
@@ -249,13 +252,21 @@ export function router(
         }
         if (hydrating) {
             const previous = RENDER.hydration
+            const previousHydrating = hydratingSlot.active
             RENDER.hydration = { next: new Map() }
+            hydratingSlot.active = true
             enterRenderPass()
             try {
                 run()
             } finally {
                 exitRenderPass()
                 RENDER.hydration = previous
+                hydratingSlot.active = previousHydrating
+                /* Wake the peeks this pass withheld for SSR congruence, now that the pass is
+                   over and the warm value is congruent to show. Only on the outermost unwind. */
+                if (!previousHydrating) {
+                    wakeHydrationPeeks()
+                }
             }
             return
         }
@@ -428,6 +439,14 @@ export function router(
             ])
                 .then(([pageView, resolvedLayouts, decision]) => {
                     if (token !== sequence || disposed) {
+                        /* Consume the first-paint flag even when superseded: the boot SSR DOM
+                           is valid only for THIS boot navigation. Leaving `first` true would
+                           let a navigation that started before this settled (to a different
+                           page) skip its auth probe and hydrate the boot URL's SSR DOM as its
+                           own — claimExpected then throws and commit swallows it, stranding a
+                           broken page. Cleared here → the superseding nav builds create-mode
+                           (clearing the stale SSR DOM) and runs its probe. */
+                        first = false
                         return
                     }
                     /* handle() redirected: go where it pointed, replacing the blocked

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

@@ -16,12 +16,6 @@
    same reference. */
 export type ResumeEntry = { ok: true; value: unknown } | { ok: false; error: unknown }
 
-/* Deferred-resume marker (Tier 2): a large cache-backed `{#await cache()}` ships this in
-   place of its value — just the cache key, so hydration adopts the server branch inert and
-   pays no value decode. The client seeds that key lazily and materializes it only on a later
-   re-read. Discriminated from a ResumeEntry by the `defer` field. */
-export type DeferMarker = { defer: true; key: string }
-
 const globalScope = globalThis as { __abideResume?: Record<number, string> }
 globalScope.__abideResume ??= {}
 

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

@@ -9,7 +9,7 @@ with `enterScope`/`exitScope` and `await`s inline between them (blocking `{#awai
 child renders, slots, a top-level `await`). A module global held across those awaits
 interleaves across concurrent requests — one render resumes to read another's scope.
 Keying the ambient off the per-request store (which the async context propagates
-correctly) isolates it. Mirrors `requestScopeResolver`'s server-installed slot; the
+correctly) isolates it. Mirrors `requestScopeSlot`'s server-installed slot; the
 indirection cost lands at build/effect-creation time, never on the signal hot path.
 */
 type ScopeBacking = { get(): Scope | undefined; set(value: Scope | undefined): void }

package/src/lib/ui/runtime/types/SsrRender.ts

@@ -1,4 +1,4 @@
-import type { DeferMarker, ResumeEntry } from '../RESUME.ts'
+import type { ResumeEntry } from '../RESUME.ts'
 
 /* One STREAMING await block captured during SSR (no `then` on the `await` tag): its
    boundary id, the promise to await, and the async string-renderers for the resolved
@@ -18,11 +18,10 @@ export type SsrAwait = {
 /* The result of a component's server `render()`: the pending-shell HTML, the
    serializable document snapshot for client resume, the STREAMING await blocks to
    flush out of order, and `resume` — the inline-rendered BLOCKING await values keyed
-   by boundary id, seeded into the manifest so hydration adopts them without a refetch. A
-   deferred (cache-backed) blocking value is a `DeferMarker` in place of the value. */
+   by boundary id, seeded into the manifest so hydration adopts them without a refetch. */
 export type SsrRender = {
     html: string
     state: unknown
     awaits: SsrAwait[]
-    resume: Record<number, ResumeEntry | DeferMarker>
+    resume: Record<number, ResumeEntry>
 }

package/src/lib/ui/scope.ts

@@ -5,10 +5,13 @@ import type { Scope } from './types/Scope.ts'
 /*
 Resolves the current lexical scope — established per lexical level by the compiler,
 so it reads "where you are" with no handle. Outside any scope (boot, a script) it
-mints a detached root once and reuses it. The returned value is passable: hand it to
-a child or a helper and it can read/extend/undo that scope (walk up via `.root()`).
+mints a detached root once and reuses it. Now the INTERNAL lowering host: the author
+reactive surface is the imported `state`/`state.linked`/`state.computed`/`effect`; the
+compiler lowers each onto this scope (`$$scope().derive`/`.linked`/`.effect`), and
+`state.share`/`.shared` route through it. Still published so generated code and the
+type-checking shadow can import it; not part of the author-facing surface.
 */
-// @documentation reactive-state
+// @documentation plumbing
 export function scope(): Scope {
     if (!CURRENT_SCOPE.current) {
         CURRENT_SCOPE.current = createScope()

package/src/lib/ui/seedBootState.ts

@@ -0,0 +1,53 @@
+import { baseSlot } from '../shared/baseSlot.ts'
+import { createTraceContext } from '../shared/createTraceContext.ts'
+import { healthSeedSlot } from '../shared/healthSeedSlot.ts'
+import { requestScopeSlot } from '../shared/requestScopeSlot.ts'
+import { rpcTimeoutSlot } from '../shared/rpcTimeoutSlot.ts'
+import { setAppName } from '../shared/setAppName.ts'
+import type { SsrBootState } from '../shared/types/SsrBootState.ts'
+
+/* Seeds every `__SSR__` boot-state field into its ambient slot. The map is typed
+   EXHAUSTIVELY over `SsrBootState`, so a boot field can't be added to the payload
+   without a seeder here — the compile error is what guarantees a stamped field is
+   never silently dropped client-side. Base is seeded first (object-key order), as the
+   prior hand-written sequence required: the cache seed that follows keys call urls
+   through the base resolver. */
+const SEED: { [K in keyof Required<SsrBootState>]: (value: SsrBootState[K]) => void } = {
+    base: (value) => {
+        baseSlot.resolver = () => value ?? ''
+    },
+    app: (value) => setAppName(value),
+    health: (value) => {
+        healthSeedSlot.payload = value
+    },
+    clientTimeout: (value) => {
+        rpcTimeoutSlot.ms = value
+    },
+    /* Continue the SSR request's trace (or mint a fresh sampled one if the stamp is
+       missing) and publish the browser's request scope: trace(), log line prefixes, and
+       the RPC traceparent header resolve through it. elapsedMs is navigation-relative —
+       exactly what performance.now() measures — and the path tracks client navigations
+       because the resolver reads location per call. */
+    trace: (value) => {
+        const traceContext = createTraceContext(value)
+        requestScopeSlot.resolver = () => ({
+            trace: traceContext,
+            elapsedMs: performance.now(),
+            method: 'GET',
+            path: typeof location === 'undefined' ? '' : location.pathname,
+        })
+    },
+}
+
+/* Applies one seeder to its own field — generic over the key so the seeder and its
+   value stay correlated (a bare `SEED[key](boot[key])` loses the correlation). */
+function seedField<K extends keyof SsrBootState>(key: K, boot: SsrBootState): void {
+    SEED[key](boot[key])
+}
+
+/* Seeds all boot-state slots from the payload, before mount. */
+export function seedBootState(boot: SsrBootState): void {
+    for (const key of Object.keys(SEED) as Array<keyof SsrBootState>) {
+        seedField(key, boot)
+    }
+}

package/src/lib/ui/socketChannel.ts

@@ -1,10 +1,10 @@
-import type { SocketClientFrame } from '../server/sockets/types/SocketClientFrame.ts'
-import type { SocketServerFrame } from '../server/sockets/types/SocketServerFrame.ts'
 import { createSocketSubRegistry } from '../shared/createSocketSubRegistry.ts'
 import { decodeRefJson } from '../shared/decodeRefJson.ts'
 import { encodeRefJson } from '../shared/encodeRefJson.ts'
 import { SOCKETS_PATH } from '../shared/SOCKETS_PATH.ts'
 import type { SocketChannel } from '../shared/types/SocketChannel.ts'
+import type { SocketClientFrame } from '../shared/types/SocketClientFrame.ts'
+import type { SocketServerFrame } from '../shared/types/SocketServerFrame.ts'
 import { withBase } from '../shared/withBase.ts'
 
 let singleton: SocketChannel | undefined