@abide/abide 0.38.0 → 0.39.0

package/src/lib/ui/renderToStream.ts

@@ -1,88 +1,96 @@
+import { resumeSeedScript } from './resumeSeedScript.ts'
 import type { ResumeEntry } from './runtime/RESUME.ts'
 import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 
 /*
-Out-of-order SSR streaming. Yields the pending shell first (so the browser paints
-immediately), then one resolved fragment per await block as its promise settles —
-in completion order, not source order, so a slow read never blocks a fast one.
-Each resolved fragment is a `<abide-resolve data-id="ID"><script type="application/json">
-…</script>…</abide-resolve>` that `applyResolved` swaps into the matching
-`<!--abide:await:ID-->` boundary; the leading script holds the JSON-serialized value,
-registered for hydration so an `await` block adopts the resolved branch on resume
-instead of re-running.
+Out-of-order SSR streaming. Yields the shell first (so the browser paints
+immediately), then one resolved fragment per STREAMING await block as its promise
+settles — in completion order, not source order, so a slow read never blocks a fast
+one. Each resolved fragment is a `<abide-resolve data-id="ID"><script
+type="application/json">…</script>…</abide-resolve>` that `applyResolved` swaps into
+the matching `<!--abide:await:ID-->` boundary; the leading script holds the
+JSON-serialized value, registered for hydration so an `await` block adopts the
+resolved branch on resume instead of re-running.
 
 This is the await-block-streams half of the cache rule: a top-level `await` in the
-script would have blocked the shell (inlined), but an await *block* flushes its
-shell now and streams the value when ready. Driven by a plain `render()` result,
+script would have blocked the shell (inlined), but a streaming await *block* flushes
+its shell now and streams the value when ready. Driven by an async `render()` result,
 so it composes with any transport (HTTP chunked, a socket frame, a test).
 
-A `then` on the `await` tag makes the block BLOCKING: it settles before the first
-flush, its resolved branch spliced into its (empty) boundary and its value seeded
-into the resume manifest inline — so the value is in the first paint, no pending
-shell, no swap. The first yield therefore awaits all blocking blocks; only the
-remaining streaming blocks flush out of order after it.
+A `then` on the `await` tag makes the block BLOCKING: it is NOT streamed — it renders
+inline during the async render pass (depth-first, matching the client) and its value
+lands in `render().resume`. The shell already carries the resolved branch, so the
+first yield just seeds those values into the manifest; only streaming blocks flush
+out of order after it.
 */
 // @documentation plumbing
-export async function* renderToStream(render: () => SsrRender): AsyncGenerator<string> {
-    const { html, awaits } = render()
-    /* Blocking awaits (a `then` on the `await` tag) settle BEFORE the first flush:
-       their resolved branch is spliced into its empty boundary and its value registered
-       inline, so the first paint already has the value — no pending, no swap. */
-    const blocking = awaits.filter((block) => block.blocking === true)
-    let shell = html
-    const resumed: Record<number, ResumeEntry> = {}
-    for (const settled of await Promise.all(blocking.map(settle))) {
-        shell = spliceResolved(shell, settled.id, settled.html)
-        resumed[settled.id] = settled.resume
+export async function* renderToStream(
+    render: () => SsrRender | Promise<SsrRender>,
+): AsyncGenerator<string> {
+    const { html, awaits, resume } = await render()
+    /* The shell already contains every blocking await's resolved branch (rendered
+       inline); seed their values so hydration adopts them without a refetch. */
+    yield html + resumeSeedScript(resume)
+    /* A BLOCKING await nested inside a streaming branch renders inline during `settle`
+       (after the seed above), writing its value onto this same `$resume` object — so the
+       initial seed misses it. Track which resume ids are already seeded and emit the delta
+       alongside each streamed fragment, so the client adopts the nested blocking branch
+       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> = {}
+        for (const [key, entry] of Object.entries(resume)) {
+            const id = Number(key)
+            if (!seededResume.has(id)) {
+                seededResume.add(id)
+                delta[id] = entry
+            }
+        }
+        return delta
     }
-    yield shell + resumeScript(resumed)
-    /* Streaming awaits flush their resolved fragment out of order as each settles. */
+    /* Streaming awaits flush their resolved fragment out of order as each settles. A
+       streaming block's async resolved/error renderer may itself register NESTED streaming
+       awaits — its `branchContent` runs `$awaits.push(...)` onto this same `awaits` array
+       during `settle`, AFTER the initial scan. So re-scan for newly-appended blocks after
+       every settle (tracking which ids are already enqueued), composing to any depth. */
     const inflight = new Map<number, Promise<Settled>>()
-    for (const block of awaits) {
-        if (block.blocking !== true) {
-            inflight.set(block.id, settle(block))
+    const enqueued = new Set<number>()
+    const enqueueNew = (): void => {
+        for (const block of awaits) {
+            if (!enqueued.has(block.id)) {
+                enqueued.add(block.id)
+                inflight.set(block.id, settle(block))
+            }
         }
     }
+    enqueueNew()
     while (inflight.size > 0) {
         const resolved = await Promise.race(inflight.values())
         inflight.delete(resolved.id)
-        const resume = encodeResume(resolved.resume)
-        yield `<abide-resolve data-id="${resolved.id}">` +
-            `<script type="application/json">${resume}</script>` +
+        enqueueNew()
+        const encoded = encodeResume(resolved.resume)
+        yield resumeSeedScript(resumeDelta()) +
+            `<abide-resolve data-id="${resolved.id}">` +
+            `<script type="application/json">${encoded}</script>` +
             `${resolved.html}</abide-resolve>`
     }
 }
 
-/* Inserts a blocking await's resolved markup into its (empty) boundary in the shell,
-   between the open and close markers. */
-function spliceResolved(shell: string, id: number, resolved: string): string {
-    const open = `<!--abide:await:${id}-->`
-    const close = `<!--/abide:await:${id}-->`
-    /* A function replacement, so a `$&`/`$\`` etc. in the rendered value is inserted
-       literally rather than interpreted as a special replacement pattern. */
-    return shell.replace(`${open}${close}`, () => `${open}${resolved}${close}`)
-}
-
-/* A self-contained script seeding the resume manifest with the blocking values, so
-   client hydration adopts each resolved branch instead of re-running the promise.
-   Empty when no blocking awaits settled. */
-function resumeScript(resumed: Record<number, ResumeEntry>): string {
-    if (Object.keys(resumed).length === 0) {
-        return ''
-    }
-    const payload = JSON.stringify(resumed).replace(/</g, '\\u003c')
-    return `<script>Object.assign(window.__abideResume=window.__abideResume||{},${payload})</script>`
-}
-
 type Settled = { id: number; html: string; resume: ResumeEntry }
 
-/* Awaits one block's promise and renders the resolved or error branch to HTML,
-   capturing the value (serializable) for the resume manifest. Errors serialize as
-   their message — enough for the catch branch, without leaking a stack. */
+/* 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. */
 function settle(block: SsrAwait): Promise<Settled> {
     return Promise.resolve(block.promise()).then(
-        (value) => ({ id: block.id, html: block.then(value), resume: { ok: true, value } }),
-        (error) => {
+        async (value) => ({
+            id: block.id,
+            html: await block.then(value),
+            resume: { ok: true, value },
+        }),
+        async (error) => {
             /* No catch branch → surface the rejection (500 before the first flush,
                mid-stream error after) instead of swallowing it into an empty fragment. */
             if (block.catch === undefined) {
@@ -90,7 +98,7 @@ function settle(block: SsrAwait): Promise<Settled> {
             }
             return {
                 id: block.id,
-                html: block.catch(error),
+                html: await block.catch(error),
                 resume: { ok: false, error: String(error) },
             }
         },

package/src/lib/ui/resumeSeedScript.ts

@@ -0,0 +1,17 @@
+import { safeJsonForScript } from '../shared/safeJsonForScript.ts'
+import type { ResumeEntry } from './runtime/RESUME.ts'
+
+/* A self-contained `<script>` seeding the await-resume manifest with the blocking
+   values rendered inline on the server, so client hydration adopts each resolved
+   branch instead of re-running its promise. Empty when nothing blocking resolved.
+   The payload runs as JS (`Object.assign`), so it's encoded via `safeJsonForScript`
+   — escaping `<`, `-->`, and U+2028/U+2029 so a serialized body value can't close
+   the script 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 {
+    if (Object.keys(resume).length === 0) {
+        return ''
+    }
+    return `<script>Object.assign(window.__abideResume=window.__abideResume||{},${safeJsonForScript(resume)})</script>`
+}

package/src/lib/ui/router.ts

@@ -1,12 +1,15 @@
 import { layoutChainForRoute } from '../shared/layoutChainForRoute.ts'
+import { fillBoundary } from './dom/fillBoundary.ts'
+import { outlet } from './dom/outlet.ts'
 import { effect } from './effect.ts'
 import { matchRoute } from './matchRoute.ts'
 import { navigate } from './navigate.ts'
 import { clientPage } from './runtime/clientPage.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
-import { firstOutlet } from './runtime/firstOutlet.ts'
 import { historyEntries } from './runtime/historyEntries.ts'
+import { PENDING_OUTLET } from './runtime/PENDING_OUTLET.ts'
+import { RENDER } from './runtime/RENDER.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
 import type { AbideHistoryState } from './runtime/types/AbideHistoryState.ts'
 import type { NavVerdict } from './runtime/types/NavVerdict.ts'
@@ -14,13 +17,15 @@ import type { Route } from './runtime/types/Route.ts'
 import type { RouteLoader } from './runtime/types/RouteLoader.ts'
 import { untrack } from './runtime/untrack.ts'
 
-/* A layout mounted in the active chain: its route key (the directory URL — its
-   identity for the diff), the disposer that stops its reactivity, and the outlet
-   element the next layer mounts into. */
-type MountedLayout = { key: string; dispose: () => void; outlet: Element }
+/* An outlet boundary — the `<!--abide:outlet-->`…`<!--/abide:outlet-->` marker pair a
+   layer's content lives between (a layout's `<slot/>`, or the router's root boundary in
+   the mount host). The next chain layer fills it; no `<abide-outlet>` element. */
+type Boundary = { open: Comment; close: Comment }
 
-/* A layout mount that returns no disposer still needs one for the chain teardown. */
-const noop = (): void => {}
+/* A layout mounted in the active chain: its route key (the directory URL — its identity
+   for the diff), the disposer that stops its reactivity and clears its content, and the
+   boundary of its own `<slot/>` — where the next layer mounts. */
+type MountedLayout = { key: string; dispose: () => void; slot: Boundary }
 
 /* The destination URL for a navigation `path`. On the server / headless there is no
    `location`, so resolve against a localhost origin; in the browser, against the real
@@ -68,6 +73,10 @@ export function router(
     /* The mounted layout chain (outermost first) + the page disposer. */
     const mountedLayouts: MountedLayout[] = []
     let disposePage: (() => void) | undefined
+    /* The root outlet boundary in `host` (`#app`) the outermost layer fills — established
+       once on the first mount (claimed from the SSR DOM when hydrating, created otherwise)
+       and reused across navigations, since `#app` itself never re-mounts. */
+    let rootBoundary: Boundary | undefined
     const patterns = Object.keys(loaders).filter((key) => key !== '*')
     const layoutKeys = Object.keys(layoutLoaders)
 
@@ -90,60 +99,94 @@ export function router(
     const resolvePage = resolver(loaders)
     const resolveLayout = resolver(layoutLoaders)
 
-    /* Tear down the page and every layout from `index` inward (innermost first), then
-       return the container the rebuild mounts into — the surviving layout's outlet, or
-       `host` when the whole chain goes. */
-    const disposeFrom = (index: number): Element => {
+    /* Tear down the page and every layout from `index` inward (innermost first). Each
+       layer's disposer stops its reactivity and clears its content from its boundary
+       (the outermost cleared range removes the inner DOM too — harmless double-clears).
+       Leaves the boundary markers in place so the rebuild fills the same boundary. */
+    const disposeFrom = (index: number): void => {
         disposePage?.()
         disposePage = undefined
         for (let depth = mountedLayouts.length - 1; depth >= index; depth -= 1) {
             mountedLayouts[depth]?.dispose()
         }
-        const base = index === 0 ? host : (mountedLayouts[index - 1] as MountedLayout).outlet
         mountedLayouts.length = index
-        return base
     }
 
-    /* Mount (or hydrate) the chain tail — layouts `[index..]` then the page — into
-       `base`, threading each layer into the previous one's outlet. Hydration brackets
-       ONE render pass across all layers so await/try block ids stay unique and aligned
-       with the SSR stream; a fresh mount needs no shared pass. */
+    /* The outlet boundary the layer at `index` fills: the root boundary for the outermost
+       layer, else the surviving parent layout's `<slot/>`. */
+    const baseBoundary = (index: number): Boundary =>
+        index === 0 ? (rootBoundary as Boundary) : (mountedLayouts[index - 1] as MountedLayout).slot
+
+    /* Build (or hydrate) the chain tail — layouts `[index..]` then the page — filling each
+       layer into the previous one's `<slot/>` boundary (the root boundary for the
+       outermost). `outlet()` records each layer's own slot in `PENDING_OUTLET` as the
+       layer builds, so the next layer knows where to mount — no DOM scan. Hydration
+       brackets ONE render pass + claim cursor across all layers so await/try block ids
+       stay unique and aligned with the SSR stream; a fresh mount needs no shared pass. */
     const buildFrom = (
-        base: Element,
         index: number,
         chainKeys: string[],
         layoutViews: Route[],
         pageView: Route | undefined,
+        pageKey: string,
         params: Record<string, string>,
         hydrating: boolean,
     ): void => {
         const run = (): void => {
-            let container = base
+            /* Establish the root boundary on the first mount — `outlet(host)` claims the
+               SSR root boundary (hydrating) or creates it (fresh), recording it in
+               `PENDING_OUTLET`. Reused across navigations thereafter. A fresh first mount
+               (no claim cursor — e.g. a non-hydratable page whose SSR shell can't be
+               adopted) discards whatever the server put in `#app` first, so the created
+               boundary is the only content. */
+            if (rootBoundary === undefined) {
+                if (RENDER.hydration === undefined) {
+                    host.textContent = ''
+                }
+                outlet(host)
+                rootBoundary = PENDING_OUTLET.current as Boundary
+            }
+            let boundary = baseBoundary(index)
             for (let depth = index; depth < layoutViews.length; depth += 1) {
                 const view = layoutViews[depth] as Route
-                const dispose = hydrating
-                    ? (view.hydrate as NonNullable<Route['hydrate']>)(container, params)
-                    : (view(container, params) ?? noop)
-                const outlet = firstOutlet(container)
-                if (outlet === undefined) {
+                PENDING_OUTLET.current = undefined
+                const { dispose } = fillBoundary(
+                    boundary.open,
+                    boundary.close,
+                    view.build,
+                    params,
+                    /* The layout's route key names its scope in the inspector's Reactive tab
+                       (no host element to read a tag from — see `scopeLabel`). */
+                    chainKeys[depth],
+                )
+                const slot = PENDING_OUTLET.current
+                if (slot === undefined) {
                     throw new Error('[abide] a layout.abide must contain a <slot/> outlet')
                 }
-                mountedLayouts.push({ key: chainKeys[depth] as string, dispose, outlet })
-                container = outlet
+                mountedLayouts.push({ key: chainKeys[depth] as string, dispose, slot })
+                boundary = slot
             }
             if (pageView === undefined) {
                 return
             }
-            disposePage = hydrating
-                ? (pageView.hydrate as NonNullable<Route['hydrate']>)(container, params)
-                : (pageView(container, params) ?? undefined)
+            disposePage = fillBoundary(
+                boundary.open,
+                boundary.close,
+                pageView.build,
+                params,
+                /* The page's route key names its scope in the inspector (see above). */
+                pageKey,
+            ).dispose
         }
         if (hydrating) {
+            const previous = RENDER.hydration
+            RENDER.hydration = { next: new Map() }
             enterRenderPass()
             try {
                 run()
             } finally {
                 exitRenderPass()
+                RENDER.hydration = previous
             }
             return
         }
@@ -181,8 +224,10 @@ export function router(
             return
         }
         const target = event.target as Element
+        /* `closest?.` is undefined when the target is a non-Element (text node, document)
+           that has no `closest`; `== null` catches both that and a genuine no-match null. */
         const link = target.closest?.('a[href]') as HTMLAnchorElement | null
-        if (link === null) {
+        if (link == null) {
             return
         }
         /* Defer to the browser for links it should own: a new-tab target, a
@@ -298,79 +343,104 @@ export function router(
                 resolvePage(key),
                 Promise.all(chainKeys.map((layoutKey) => resolveLayout(layoutKey))),
                 verdict,
-            ]).then(([pageView, resolvedLayouts, decision]) => {
-                if (token !== sequence || disposed) {
-                    return
-                }
-                /* handle() redirected: go where it pointed, replacing the blocked
+            ])
+                .then(([pageView, resolvedLayouts, decision]) => {
+                    if (token !== sequence || disposed) {
+                        return
+                    }
+                    /* handle() redirected: go where it pointed, replacing the blocked
                    URL so back doesn't trap on it. The router re-probes the target. */
-                if (decision.kind === 'redirect') {
-                    navigate(decision.path, true)
-                    return
-                }
-                /* handle() blocked it / redirected off-origin / the probe failed:
+                    if (decision.kind === 'redirect') {
+                        navigate(decision.path, true)
+                        return
+                    }
+                    /* handle() blocked it / redirected off-origin / the probe failed:
                    let the browser load the server's real response. */
-                if (decision.kind === 'reload') {
-                    if (typeof location !== 'undefined') {
-                        location.href = decision.url
+                    if (decision.kind === 'reload') {
+                        if (typeof location !== 'undefined') {
+                            location.href = decision.url
+                        }
+                        return
                     }
-                    return
-                }
-                const layoutViews = resolvedLayouts.filter(
-                    (view): view is Route => view !== undefined,
-                )
-                /* The shared prefix of layouts (same route key at the same depth) stays
+                    const layoutViews = resolvedLayouts.filter(
+                        (view): view is Route => view !== undefined,
+                    )
+                    /* The shared prefix of layouts (same route key at the same depth) stays
                    mounted; the first divergence and everything inward is rebuilt. */
-                let divergence = 0
-                while (
-                    divergence < mountedLayouts.length &&
-                    divergence < chainKeys.length &&
-                    mountedLayouts[divergence]?.key === chainKeys[divergence]
-                ) {
-                    divergence += 1
-                }
-                const hydrating =
-                    first && pageView?.hydratable === true && pageView.hydrate !== undefined
-                first = false
-                /* The DOM mutation a navigation makes: tear the divergent chain down,
-                   clear its DOM (a fresh mount; hydration adopts in place), rebuild. */
-                const swap = (): void => {
-                    /* Tear the outgoing page + divergent layouts down BEFORE publishing the
+                    let divergence = 0
+                    while (
+                        divergence < mountedLayouts.length &&
+                        divergence < chainKeys.length &&
+                        mountedLayouts[divergence]?.key === chainKeys[divergence]
+                    ) {
+                        divergence += 1
+                    }
+                    const hydrating = first && pageView?.hydratable === true
+                    first = false
+                    /* The DOM mutation a navigation makes: tear the divergent chain down
+                   (clearing its content from its boundary) and rebuild into the same
+                   boundary (hydration adopts in place). */
+                    const swap = (): void => {
+                        /* `startViewTransition` runs this callback in a later frame, so a newer
+                           navigation may have superseded this one since the token guard above —
+                           re-check before mutating, or a stale swap clobbers the newer page. */
+                        if (token !== sequence || disposed) {
+                            return
+                        }
+                        /* Tear the outgoing page + divergent layouts down BEFORE publishing the
                        new snapshot. Publishing first would re-run the doomed leaf page's
                        computeds against the new route's params (a missing `[id]` reads back
                        `undefined`, e.g. `Number(page.params.id)` → NaN → a bogus request)
                        while it's still mounted. Disposing first kills that scope; surviving
                        prefix layouts then update in place on publish. */
-                    const base = disposeFrom(divergence)
-                    const url = resolveUrl(path)
-                    clientPage.value = { route: chainRoute, params, url, navigating: false }
-                    if (!hydrating) {
-                        base.textContent = ''
-                    }
-                    buildFrom(base, divergence, chainKeys, layoutViews, pageView, params, hydrating)
-                    /* Reapply the destination entry's scroll once its DOM exists — a
+                        disposeFrom(divergence)
+                        const url = resolveUrl(path)
+                        clientPage.value = { route: chainRoute, params, url, navigating: false }
+                        buildFrom(
+                            divergence,
+                            chainKeys,
+                            layoutViews,
+                            pageView,
+                            key,
+                            params,
+                            hydrating,
+                        )
+                        /* Reapply the destination entry's scroll once its DOM exists — a
                        back/forward restores its offset, a fresh nav scrolls to the `#hash`
                        anchor (now built) or the top. Runs on the initial paint too: with
                        `scrollRestoration='manual'` the browser does NOT restore a reload's
                        offset, so first paint recovers it from the persisted `history.state`
                        (a fresh load with no persisted offset falls through to hash/top). */
-                    historyEntries.restore(url.hash)
-                }
-                /* Wrap the swap in a View Transition where the browser supports it, so
+                        historyEntries.restore(url.hash)
+                    }
+                    /* Wrap the swap in a View Transition where the browser supports it, so
                    the page change cross-fades (and shared `view-transition-name` elements
                    morph) — the synchronous swap is exactly the mutation the API snapshots
                    around. Skipped while hydrating: the first paint adopts SSR DOM in place,
                    not animate. CSS owns opting out (e.g. prefers-reduced-motion). */
-                if (
-                    !hydrating &&
-                    typeof document !== 'undefined' &&
-                    'startViewTransition' in document
-                ) {
-                    document.startViewTransition(swap)
-                } else {
-                    swap()
-                }
-            })
+                    if (
+                        !hydrating &&
+                        typeof document !== 'undefined' &&
+                        'startViewTransition' in document
+                    ) {
+                        document.startViewTransition(swap)
+                    } else {
+                        swap()
+                    }
+                })
+                .catch(() => {
+                    /* A page/layout chunk import (or the probe) rejected — offline, a hashed
+                   chunk filename rotated by a deploy, or a transient asset 5xx. Without
+                   this the navigating:true latched above never clears (a bound spinner
+                   spins forever) and the rejection surfaces as an unhandledrejection.
+                   Fall back to a full browser load so the server serves the target. */
+                    if (token !== sequence || disposed) {
+                        return
+                    }
+                    if (typeof location !== 'undefined') {
+                        location.href = resolveUrl(path).href
+                    }
+                })
         })
     })
 

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

@@ -0,0 +1,10 @@
+/* The comment-marker boundary a layout's `<slot/>` outlet lowers to — replacing the old
+   `<abide-outlet>` ELEMENT, so the next chain layer the router fills in lays out as a true
+   direct child of the slot's parent (no wrapper box breaking the layout's flex/grid/`:first-child`).
+
+   `abide:outlet` / `/abide:outlet` deliberately match `skeleton`'s `isOpenMarker`/`isCloseMarker`
+   (the `abide:` / `/abide:` convention), so a layout's own hole-scanning treats the outlet's
+   future child content as a balanced range and skips it — exactly like an `await`/`try` boundary.
+   The router fills the boundary with the next layer (see `outlet`/`fillBoundary`). */
+export const OUTLET_OPEN = 'abide:outlet'
+export const OUTLET_CLOSE = '/abide:outlet'

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

@@ -1,8 +1,7 @@
-/* The element a layout's `<slot/>` lowers to: an empty structural container the
-   router fills with the next layer of the route's layout chain (the nested layout
-   or the page). SSR emits it empty so the renderer can fold the child's html into
-   it; on the client the router mounts/hydrates the child into it and finds it by
-   tag. Shared by both compiler back-ends, the SSR chain composer, and the router so
-   they all agree on the marker. */
+/* The compile-time AST tag a layout's `<slot/>` is rewritten to (`asOutlet`). It is a
+   sentinel only — never a rendered element: both compiler back-ends lower it to an empty
+   `<!--abide:outlet-->`…`<!--/abide:outlet-->` comment boundary (`outlet` on the client,
+   the marker string in SSR) the router fills with the next chain layer. Shared by both
+   back-ends and `skeletonContext` so they all agree which node is the outlet. */
 // @documentation plumbing
 export const OUTLET_TAG = 'abide-outlet'

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

@@ -0,0 +1,8 @@
+/* The outlet boundary the most recent `outlet()` call established (a layout's `<slot/>`
+   fill point, or the router's root boundary in `#app`). The router reads it right after
+   building/claiming a layer — synchronously, so it is exactly that layer's single slot —
+   to learn where the NEXT chain layer mounts, without scanning the DOM. A layer with no
+   slot (the leaf page) leaves it whatever the router reset it to. */
+export const PENDING_OUTLET: { current: { open: Comment; close: Comment } | undefined } = {
+    current: undefined,
+}

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

@@ -2,28 +2,27 @@ import { PATCH_BUS } from './PATCH_BUS.ts'
 import type { Doc } from './types/Doc.ts'
 
 /*
-Runs a component `build` and returns its disposer alongside the component's own
-`model` document — the serializable `state` doc, needed so a hot swap can carry
-its value across (see `hotReplace`). The model is found, not threaded: a component
-seeds its `model` first (the desugared `const model = doc({})` + its init patches
-run before any child mounts or control-flow blocks), so the FIRST patch announced
-on the bus during the build names it. A component with no `state` mints no model
-and emits nothing first — `model` is then `undefined` and there is nothing to
-preserve. Used only on the hot path; the subscription is torn down with the build.
+Runs a component `build` and returns its result (the mount handle / disposer)
+alongside the component's own `model` document — the serializable `state` doc,
+needed so a hot swap can carry its value across (see `hotReplace`). The model is
+found, not threaded: a component seeds its `model` first (the desugared
+`const model = doc({})` + its init patches run before any child mounts or
+control-flow blocks), so the FIRST patch announced on the bus during the build names
+it. A component with no `state` mints no model and emits nothing first — `model` is
+then `undefined` and there is nothing to preserve. Used only on the hot path; the
+subscription is torn down with the build.
 */
-export function captureModelDoc(build: () => () => void): {
-    dispose: () => void
+export function captureModelDoc<T>(build: () => T): {
+    value: T
     model: Doc | undefined
 } {
     let model: Doc | undefined
     const unsubscribe = PATCH_BUS.subscribe((event) => {
         model ??= event.doc
     })
-    let dispose: () => void = () => undefined
     try {
-        dispose = build()
+        return { value: build(), model }
     } finally {
         unsubscribe()
     }
-    return { dispose, model }
 }

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

@@ -49,6 +49,11 @@ export function createEffectNode(fn: () => EffectResult): () => void {
     const dispose = () => {
         runCleanup()
         unlinkDeps(node)
+        /* Clearing compute makes runNode a no-op: an effect disposed mid-flush (by an
+           earlier effect in the same batch) is still in flushEffects' snapshot array
+           after pendingEffects.delete, so it would otherwise re-run its body and
+           re-link into the graph — a disposed effect resurrected. */
+        node.compute = undefined
         REACTIVE_CONTEXT.pendingEffects.delete(node)
     }
     if (OWNER.current !== undefined) {