@abide/abide 0.44.1 → 0.46.0

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

@@ -1,16 +1,20 @@
+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 { ResumeEntry } from '../runtime/RESUME.ts'
+import type { DeferMarker, ResumeEntry } from '../runtime/RESUME.ts'
 import { RESUME } from '../runtime/RESUME.ts'
+import { scheduleWake } from '../runtime/scheduleWake.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
 import { state } from '../state.ts'
 import { buildDetachedRange } from './buildDetachedRange.ts'
 import { discardBoundary } from './discardBoundary.ts'
+import { firstElementBetween } from './firstElementBetween.ts'
 import { removeRange } from './removeRange.ts'
 
 /*
@@ -56,8 +60,20 @@ export function awaitBlock(
     let active: { start: Comment; end: Comment; dispose: () => void } | undefined
     let anchor: Node | undefined
     let first = true
-    /* Bumped each run so a prior run's in-flight promise can't clobber a newer one. */
-    let generation = 0
+    /* A deferred (inert-adopted) block schedules a wake (idle or visible); cancel it if the
+       owner tears the block out before it fires, so no late re-run touches a detached anchor. */
+    let cancelWake: (() => void) | undefined
+    /* Bumped each run so a prior run's in-flight promise can't clobber a newer one, AND on
+       owner teardown so an in-flight promise that settles AFTER the enclosing `{#if}`/
+       `{#for}`/component tears this block out is abandoned — otherwise its settle runs
+       `place` on the block's now-detached anchor and `insertBefore` throws NotFoundError.
+       The teardown also cancels a pending wake (above). */
+    const guard = generationGuard(() => cancelWake?.())
+    /* Flipped by a deferred block's wake. Read at the top of the effect so the block subscribes
+       to it and re-runs when it flips — the same re-run path an invalidate takes, so wake needs
+       no bespoke build logic. Never flips for a non-deferred block, so it costs one inert read
+       per run there. */
+    const woken = state(false)
     /* The resolved value, held as a reactive cell so the then-branch reads it through its
        own effects. A re-run that resolves to a NEW value SETS this cell instead of rebuilding
        the branch — the branch (and any keyed `each` inside it) survives and updates in place,
@@ -120,7 +136,7 @@ export function awaitBlock(
 
     /* Render a settled-or-pending result into the current generation. */
     const render = (result: unknown): void => {
-        const gen = generation
+        const gen = guard.token()
         if (!isThenable(result)) {
             settleThen(result) // warm-sync → resolved now, no flash
             return
@@ -140,12 +156,12 @@ export function awaitBlock(
         }
         result.then(
             (value) => {
-                if (gen === generation) {
+                if (guard.live(gen)) {
                     settleThen(value)
                 }
             },
             (error) => {
-                if (gen === generation) {
+                if (guard.live(gen)) {
                     settleError(error)
                 }
             },
@@ -176,6 +192,53 @@ 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)
+        /* Wake the inert branch — it's a boot-frame optimization, never a lasting mode. The
+           wake flips `woken`, re-running the effect through its normal `render` path: the
+           lazily-seeded cache reads warm, so the branch materializes live and interactive with
+           no fetch. Closes the "deferred grid stays inert until invalidate" gap.
+
+           Position picks the trigger ('auto'): a branch with an element wakes on VISIBLE (a
+           below-the-fold grid decodes only when scrolled to, one never reached costs nothing);
+           an empty branch or a DOM with no observer wakes on IDLE — never lingering inert. */
+        cancelWake = scheduleWake('auto', firstElementBetween(firstKept, close), () => {
+            woken.value = true
+        })
+    }
+
     /* 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 => {
@@ -205,21 +268,34 @@ export function awaitBlock(
        didn't round-trip (e.g. a non-serializable Response) throws while building the
        branch — fall back to the live promise, which reads the properly-reconstructed
        warm cache (or re-fetches) instead of crashing hydration. */
-    const firstHydrate = (result: unknown): void => {
+    const firstHydrate = (): void => {
         const cursor = hydration as NonNullable<typeof hydration>
         const open = claimChild(cursor, parent)
         /* 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. */
         const raw = RESUME[id]
-        let entry: ResumeEntry | undefined
+        let decoded: ResumeEntry | DeferMarker | undefined
         if (raw !== undefined) {
             try {
-                entry = decodeRefJson(raw) as ResumeEntry
+                decoded = decodeRefJson(raw) as ResumeEntry | DeferMarker
             } catch {
-                entry = undefined
+                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. */
+        const result = promiseThunk()
+        const entry = decoded as ResumeEntry | undefined
         if (entry !== 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
@@ -278,30 +354,27 @@ export function awaitBlock(
     }
 
     effect(() => {
-        generation += 1
-        /* Read the promise EVERY run, including the first hydrate run, so the block
-           subscribes to its reactive source (a cache key). A cache-remote read is warm
-           on resume — it serves the snapshot without a network round-trip, so adoption
-           stays no-flash AND a later cache.invalidate re-runs the block. Without this
-           read a resume-adopted block has no deps and invalidate is a no-op.
-
-           ONLY the promise read is tracked. The warm-sync resolve, the hydration adopt,
-           and the pending render all BUILD the branch through `scope`, which builds
-           untracked — so the branch's own reactive reads don't subscribe THIS effect
-           (otherwise the whole block re-runs and re-suspends on any branch-state change,
-           e.g. a sibling route param updating in place). The branch's own child effects
-           still track normally; the block re-runs only when the promise source does. */
-        const result = promiseThunk()
+        /* Subscribe to the wake cell every run (including the first, before it can flip) so a
+           deferred block's idle wake re-runs this effect. Inert for non-deferred blocks. */
+        woken.value
+        guard.renew()
         if (first) {
             first = false
             if (hydration !== undefined) {
-                firstHydrate(result)
+                /* 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()
                 return
             }
             anchor = document.createTextNode('')
             parent.insertBefore(anchor, before)
         }
-        render(result)
+        /* Read the promise every subsequent run so an invalidate re-runs the block. ONLY this
+           read is tracked (the branch builds untracked via `scope`), so the block re-runs only
+           when its promise source does, not on any branch-state change. */
+        render(promiseThunk())
     })
 }
 

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

@@ -1,6 +1,6 @@
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
-import { OWNER } from '../runtime/OWNER.ts'
+import { generationGuard } from '../runtime/generationGuard.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
 import type { State } from '../runtime/types/State.ts'
@@ -74,12 +74,16 @@ export function eachAsync<T>(
         }
     }
 
-    /* Bumped each run so a superseded drain stops appending and pruning. */
-    let generation = 0
     let iterator: AsyncIterator<T> | undefined
+    /* Bumped each run so a superseded drain stops appending and pruning, and on owner teardown
+       — which also `return()`s the live iterator to release the source (rows and the error
+       branch are disposed by the group, whose scopes were tracked). */
+    const guard = generationGuard(() => {
+        iterator?.return?.(undefined)?.catch(() => undefined)
+        iterator = undefined
+    })
     effect(() => {
-        generation += 1
-        const generationAtStart = generation
+        const generationAtStart = guard.renew()
         iterator?.return?.(undefined)?.catch(() => undefined) // close the superseded run's iterator before re-streaming
         iterator = undefined
         clearError() // a fresh run drops a prior error branch
@@ -92,7 +96,7 @@ export function eachAsync<T>(
             while (true) {
                 const result = await active.next()
                 /* A re-run or teardown bumped the generation while we awaited. */
-                if (generationAtStart !== generation) {
+                if (!guard.live(generationAtStart)) {
                     return
                 }
                 if (result.done === true) {
@@ -126,7 +130,7 @@ export function eachAsync<T>(
             }
         }
         drain().catch((error: unknown) => {
-            if (generationAtStart !== generation) {
+            if (!guard.live(generationAtStart)) {
                 return
             }
             /* No catch branch → surface the rejection (mirrors `<template await>`). */
@@ -137,15 +141,4 @@ export function eachAsync<T>(
             errorRange = insertRange((host) => renderCatch(host, error))
         })
     })
-
-    /* Stop the live stream when the enclosing scope tears down: bump the generation so
-       the drain abandons its loop and `return()` the iterator to release the source. The
-       rows and error branch are disposed by the group (their scopes were tracked). */
-    if (OWNER.current !== undefined) {
-        OWNER.current.push(() => {
-            generation += 1
-            iterator?.return?.(undefined)?.catch(() => undefined)
-            iterator = undefined
-        })
-    }
 }

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

@@ -0,0 +1,14 @@
+import { isElement } from './isElement.ts'
+
+/* The first Element in the sibling run `[start, end)` — the node a visible-wake observes for a
+   deferred region (await branch or component island). Undefined when the run holds no element
+   (text/comment only), so the caller falls back to an idle wake. Element detection is
+   method-based (`isElement`), not `nodeType`, so the walk runs under the test mini-dom too. */
+export function firstElementBetween(start: Node | null, end: Node | null): Element | undefined {
+    for (let node = start; node !== null && node !== end; node = node.nextSibling) {
+        if (isElement(node)) {
+            return node
+        }
+    }
+    return undefined
+}

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

@@ -29,16 +29,19 @@ export function mountChild(
     props: Parameters<UiComponent>[1],
     before: Node | null = null,
     label?: string,
+    /* `client:idle` / `client:visible` on the tag → hydrate this child as an island (server
+       markup kept, build deferred to the trigger). Undefined = hydrate eagerly, as before. */
+    clientTrigger?: 'idle' | 'visible',
 ): void {
     const moduleId = factory.__abideId
     if (!__ABIDE_DEV__ || !hotReloadEnabled.current || moduleId === undefined) {
-        mountRange(parent, factory.build, props, before, label)
+        mountRange(parent, factory.build, props, before, label, clientTrigger)
         return
     }
     /* Capture the component's model alongside its mount handle, so a later swap can
        carry its state across (see `hotReplace`). */
     const { value: handle, model } = captureModelDoc(() =>
-        mountRange(parent, factory.build, props, before, label),
+        mountRange(parent, factory.build, props, before, label, clientTrigger),
     )
     const instance = {
         factory,

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

@@ -1,9 +1,15 @@
+import { claimChild } from '../runtime/claimChild.ts'
 import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { scheduleWake } from '../runtime/scheduleWake.ts'
 import { scope } from '../runtime/scope.ts'
 import type { UiProps } from '../runtime/types/UiProps.ts'
+import { clearBetween } from './clearBetween.ts'
+import { commentData } from './commentData.ts'
 import { disposeRange } from './disposeRange.ts'
 import { fillRange } from './fillRange.ts'
+import { firstElementBetween } from './firstElementBetween.ts'
+import { markerDepthDelta } from './markerDepthDelta.ts'
 import { openMarker } from './openMarker.ts'
 import { withScope } from './withScope.ts'
 
@@ -22,6 +28,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.
+
+`clientTrigger` marks the component an ISLAND: on hydrate its server markup is kept
+verbatim and its build is SKIPPED, then run on the trigger (`'idle'`/`'visible'`) —
+so a below-the-fold widget ships as HTML and wires no effects until scrolled to (or
+the first idle gap), off the critical boot path. Create ignores it (there is no server
+markup to keep — an island is a hydration-cost optimization). See `adoptIsland`.
 */
 // @documentation plumbing
 export function mountRange(
@@ -30,6 +42,7 @@ export function mountRange(
     props: UiProps | undefined,
     before: Node | null = null,
     label: string | undefined = undefined,
+    clientTrigger: 'idle' | 'visible' | undefined = undefined,
 ): { start: Comment; end: Comment; dispose: () => void } {
     const hydration = RENDER.hydration
     const start = openMarker(parent, RANGE_OPEN, before)
@@ -37,6 +50,9 @@ export function mountRange(
         const end = openMarker(parent, RANGE_CLOSE, before)
         return fillRange(start, end, build, props, label)
     }
+    if (clientTrigger !== undefined) {
+        return adoptIsland(parent, start, build, props, label, clientTrigger, hydration)
+    }
     /* 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. */
@@ -44,3 +60,62 @@ export function mountRange(
     const end = openMarker(parent, RANGE_CLOSE)
     return { start, end, dispose: disposeRange(scoped, start, end) }
 }
+
+/*
+Island hydration: keep the server markup, skip the build, wake it later on the trigger. Scan the
+child's server nodes to THIS range's depth-matched close (`markerDepthDelta` balances nested
+`[`…`]` / `abide:` ranges) — keeping them and advancing the claim cursor past them, so the rest
+of the page hydrates around the skipped subtree — then claim the close marker. No scope is built,
+so the inert disposer only clears the kept nodes; the wake clears them and builds the child fresh
+(hydration off) between the same markers, exactly like a create-path mount.
+*/
+function adoptIsland(
+    parent: Node,
+    start: Comment,
+    build: (host: Node, props?: UiProps) => void,
+    props: UiProps | undefined,
+    label: string | undefined,
+    trigger: 'idle' | 'visible',
+    hydration: NonNullable<(typeof RENDER)['hydration']>,
+): { start: Comment; end: Comment; dispose: () => void } {
+    const firstKept = claimChild(hydration, parent)
+    let node = firstKept
+    let depth = 0
+    while (node !== null) {
+        const data = commentData(node)
+        if (data !== undefined) {
+            const delta = markerDepthDelta(data)
+            /* A depth-0 close is THIS range's own; anything nested balances out first. */
+            if (delta === -1 && depth === 0) {
+                break
+            }
+            depth += delta
+        }
+        node = node.nextSibling
+    }
+    hydration.next.set(parent, node)
+    const end = openMarker(parent, RANGE_CLOSE)
+
+    /* Inert: no scope/effects for the kept nodes, so disposal only evicts the range. The wake
+       swaps in a real build whose own disposer replaces this one. */
+    let disposeContent = (): void => clearBetween(start, end)
+    const wake = (): void => {
+        disposeContent()
+        const previous = RENDER.hydration
+        RENDER.hydration = undefined
+        try {
+            disposeContent = fillRange(start, end, build, props, label).dispose
+        } finally {
+            RENDER.hydration = previous
+        }
+    }
+    const cancelWake = scheduleWake(trigger, firstElementBetween(firstKept, end), wake)
+    return {
+        start,
+        end,
+        dispose: () => {
+            cancelWake()
+            disposeContent()
+        },
+    }
+}

package/src/lib/ui/installHotBridge.ts

@@ -1,4 +1,5 @@
 import { snippet } from '../shared/snippet.ts'
+import { deferResume } from './deferResume.ts'
 import { anchorCursor } from './dom/anchorCursor.ts'
 import { appendSnippet } from './dom/appendSnippet.ts'
 import { appendStatic } from './dom/appendStatic.ts'
@@ -68,6 +69,7 @@ export function installHotBridge(): void {
         eachAsync,
         when,
         awaitBlock,
+        deferResume,
         tryBlock,
         switchBlock,
         mountSlot,

package/src/lib/ui/matchRoute.ts

@@ -52,6 +52,18 @@ export function matchRoute(
     return best === undefined ? undefined : { route: best.route, params: best.params }
 }
 
+/* Percent-decodes a captured `[name]` value. Bun's `req.params` decoding is
+   lenient (malformed sequences pass through), so mirror that by falling back to
+   the raw value rather than throwing on a malformed `%` a page navigation would
+   otherwise crash on. */
+function decodeParam(value: string): string {
+    try {
+        return decodeURIComponent(value)
+    } catch {
+        return value
+    }
+}
+
 /* Matches one parsed pattern against the path's segments, capturing params;
    undefined on mismatch. A catch-all consumes every remaining segment. */
 function matchSegments(
@@ -81,7 +93,12 @@ function matchSegments(
             if (value === '') {
                 return undefined
             }
-            params[segment.name] = value
+            /* `url()` encodes a `[name]` value whole, and Bun decodes `req.params`
+               server-side, so decode here to hand the page the same value SSR does
+               (e.g. `The%20Daily%20Show` → `The Daily Show`). The catch-all above
+               stays raw to match the server, which reconstructs it from the raw
+               pathname. */
+            params[segment.name] = decodeParam(value)
         }
     }
     /* No catch-all consumed the tail, so the path must have no extra segments. */

package/src/lib/ui/remoteProxy.ts

@@ -53,11 +53,21 @@ HttpError; and once a backlog exists, a fresh call parks straight to the TAIL
 the app owns when to replay. `rpc.outbox()` exposes the queue.
 */
 // @documentation plumbing
+export function remoteProxy<Args, Return>(
+    method: HttpMethod,
+    url: string,
+    durable: DurableOptions & { outbox: true },
+): RemoteFunction<Args, Return, Record<never, never>, true>
+export function remoteProxy<Args, Return>(
+    method: HttpMethod,
+    url: string,
+    durable?: DurableOptions,
+): RemoteFunction<Args, Return>
 export function remoteProxy<Args, Return>(
     method: HttpMethod,
     url: string,
     durable?: DurableOptions,
-): RemoteFunction<Args, Return> {
+): RemoteFunction<Args, Return, Record<never, never>, boolean> {
     /* Assigned after `createRemoteFunction` so the invoke closure (which runs later, per
        call) parks through the shared queue; undefined leaves the plain fetch path. */
     let queue: OutboxQueue<Args> | undefined

package/src/lib/ui/renderToStream.ts

@@ -1,5 +1,6 @@
+import { deferResume } from './deferResume.ts'
 import { resumeSeedScript } from './resumeSeedScript.ts'
-import type { ResumeEntry } from './runtime/RESUME.ts'
+import type { DeferMarker, ResumeEntry } from './runtime/RESUME.ts'
 import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 import { tryEncodeResume } from './tryEncodeResume.ts'
 
@@ -39,8 +40,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> => {
-        const delta: Record<number, ResumeEntry> = {}
+    const resumeDelta = (): Record<number, ResumeEntry | DeferMarker> => {
+        const delta: Record<number, ResumeEntry | DeferMarker> = {}
         for (const [key, entry] of Object.entries(resume)) {
             const id = Number(key)
             if (!seededResume.has(id)) {
@@ -83,18 +84,22 @@ export async function* renderToStream(
     }
 }
 
-type Settled = { id: number; html: string; resume: ResumeEntry }
+type Settled = { id: number; html: string; resume: ResumeEntry | DeferMarker }
 
 /* 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. */
+   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. */
 function settle(block: SsrAwait): Promise<Settled> {
-    return Promise.resolve(block.promise()).then(
+    /* Keep the promise: cache() tagged it with its key, which `deferResume` reads to defer. */
+    const pending = block.promise()
+    return Promise.resolve(pending).then(
         async (value) => ({
             id: block.id,
             html: await block.then(value),
-            resume: { ok: true, value },
+            resume: deferResume(pending, value),
         }),
         async (error) => {
             /* No catch branch → surface the rejection (500 before the first flush,
@@ -118,6 +123,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, id: number): string | undefined {
+function encodeStreamResume(resume: ResumeEntry | DeferMarker, 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 { ResumeEntry } from './runtime/RESUME.ts'
+import type { DeferMarker, 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>): string {
+export function resumeSeedScript(resume: Record<number, ResumeEntry | DeferMarker>): 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/runtime/CURRENT_SCOPE.ts

@@ -1,4 +1,5 @@
 import type { Scope } from '../types/Scope.ts'
+import { ambientScopeBacking } from './ambientScopeBacking.ts'
 
 /*
 The ambient lexical scope. The compiler establishes one per lexical level (a
@@ -6,5 +7,17 @@ component, a control-flow branch) by setting `current` around the build, so the
 bare `scope()` accessor and the scope-bound primitives resolve "where they are"
 with no handle threaded. Undefined outside any scope, where `scope()` mints a
 detached root on first use.
+
+`current` reads/writes through a SWAPPABLE backing (`ambientScopeBacking`) rather
+than a raw field: the default is a module variable, but the server installs an
+AsyncLocalStorage-backed holder so concurrent async SSR renders don't clobber one
+shared global across the inline `await`s they suspend on. See `ambientScopeBacking`.
 */
-export const CURRENT_SCOPE: { current: Scope | undefined } = { current: undefined }
+export const CURRENT_SCOPE: { current: Scope | undefined } = {
+    get current(): Scope | undefined {
+        return ambientScopeBacking.active.get()
+    },
+    set current(value: Scope | undefined) {
+        ambientScopeBacking.active.set(value)
+    },
+}

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

@@ -16,6 +16,12 @@
    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

@@ -0,0 +1,26 @@
+import type { Scope } from '../types/Scope.ts'
+
+/*
+The swappable backing behind `CURRENT_SCOPE.current`. The default is a module
+variable — correct on the client (one render tree) and on the server outside any
+request. The server swaps in an AsyncLocalStorage-backed holder at boot
+(`installAmbientScopeStore`), because SSR is partly async: a render brackets itself
+with `enterScope`/`exitScope` and `await`s inline between them (blocking `{#await}`,
+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
+indirection cost lands at build/effect-creation time, never on the signal hot path.
+*/
+type ScopeBacking = { get(): Scope | undefined; set(value: Scope | undefined): void }
+
+let moduleCurrent: Scope | undefined
+
+export const ambientScopeBacking: { active: ScopeBacking } = {
+    active: {
+        get: () => moduleCurrent,
+        set: (value) => {
+            moduleCurrent = value
+        },
+    },
+}

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

@@ -1,3 +1,5 @@
+import { CURRENT_SCOPE } from './CURRENT_SCOPE.ts'
+import { inScope } from './inScope.ts'
 import { NODE_STATE } from './NODE_STATE.ts'
 import { OWNER } from './OWNER.ts'
 import { runNode } from './runNode.ts'
@@ -23,13 +25,17 @@ export function createEffectNode(fn: () => EffectResult): () => void {
        ReactiveNode so signals and computeds — which share the node shape and the
        read/write hot path — pay nothing for a feature only effects use. */
     let cleanup: Teardown | undefined
+    /* The teardown fires deferred (before a re-run, on dispose) when the ambient scope
+       has moved on; pin the one current at creation so an ambient `scope()` inside it
+       resolves the owning component, matching how `attach` pins its teardown. */
+    const captured = CURRENT_SCOPE.current
     /* Runs the previous run's teardown before re-running and on dispose, exactly
        once each. */
     const runCleanup = (): void => {
         if (cleanup !== undefined) {
             const teardown = cleanup
             cleanup = undefined
-            teardown()
+            inScope(captured, teardown)
         }
     }
     const node: ReactiveNode = {