@abide/abide 0.38.0 → 0.39.0

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

@@ -0,0 +1,32 @@
+import type { UiProps } from '../runtime/types/UiProps.ts'
+
+/*
+The rest of a component's props — `const { foo, ...rest } = props()` — as a live
+object of the UNCONSUMED prop values. A child receives prop THUNKS, so `rest.key`
+unwraps them (`$props[key]?.()`), tracking as a reactive dependency; a top-level
+page/layout instead receives its route params as PLAIN values, so a non-function
+value is returned as-is rather than called (which would throw `value is not a
+function`). The explicitly-destructured keys and the `$children` slot are excluded.
+Enumerable (`ownKeys`/`for…in`/`Object.keys`), so `{...rest}` can forward the
+remaining props onto a child or a native element. Key membership is live, but a
+consumer that captures the key SET (a `{...rest}` spread) snapshots it at that point.
+*/
+// @documentation plumbing
+export function restProps(props: UiProps, consumed: string[]): Record<string, unknown> {
+    const skip = new Set([...consumed, '$children'])
+    const bag = props as Record<string, unknown>
+    const visible = (key: string | symbol): key is string =>
+        typeof key === 'string' && !skip.has(key) && key in bag
+    const read = (key: string): unknown =>
+        typeof bag[key] === 'function' ? (bag[key] as () => unknown)() : bag[key]
+    return new Proxy(
+        {},
+        {
+            get: (_target, key) => (visible(key) ? read(key) : undefined),
+            has: (_target, key) => visible(key),
+            ownKeys: () => Reflect.ownKeys(bag).filter(visible),
+            getOwnPropertyDescriptor: (_target, key) =>
+                visible(key) ? { enumerable: true, configurable: true } : undefined,
+        },
+    )
+}

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

@@ -1,10 +1,12 @@
 /*
-The human-readable name for the scope a mount/hydrate establishes, derived from
-its host element's tag. A nested component mounts into its `abide-<name>` wrapper
-(see `componentWrapperTag`), so stripping the `abide-` prefix recovers the
-component name; any other host (a page/layout outlet) yields its lowercased tag.
-Dev-only — feeds the inspector's Reactive tab so a scope reads `<Counter>` rather
-than an opaque counter id. Returns undefined when there's no element to name from.
+The human-readable name for the scope the direct-mount entry (`mount`/`hydrate`)
+establishes, derived from its host element's tag. The router instead fills layers into
+marker boundaries with no host element, so it passes each layer's route key as an
+explicit label (`fillBoundary`); a nested child likewise passes its component name (see
+`mountRange`). The `abide-` prefix strip turns a framework host tag like `abide-resolve`
+into `resolve`; any other host yields its lowercased tag. Dev-only — feeds the
+inspector's Reactive tab a readable scope name. Returns undefined when there's no element
+to name from.
 */
 import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
 

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

@@ -1,7 +1,7 @@
-import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { commentData } from './commentData.ts'
 import { foreignWrapperTag } from './foreignWrapperTag.ts'
 import type { SkeletonHoles } from './types/SkeletonHoles.ts'
 
@@ -27,28 +27,6 @@ function isElement(node: Node): node is Element {
     return typeof (node as Element).hasAttribute === 'function'
 }
 
-/* A child component's mount wrapper (`abide-<name>`, see `componentWrapperTag`). Its
-   content is a SEPARATE skeleton (the child's own), so the parent's walks must treat it
-   as opaque: in the shallow skeleton it's an empty leaf, so the compiler counts no
-   anchors inside it; on hydrate it's populated, so a descent would over-collect the
-   child's anchors and shift every parent index past it (same hazard as a block range,
-   but bounded by the wrapper element instead of `[`…`]` markers). */
-function isComponentWrapper(node: Node): boolean {
-    return (
-        isElement(node) && (node.tagName ?? '').toLowerCase().startsWith(COMPONENT_WRAPPER_PREFIX)
-    )
-}
-
-/* A comment node's data, or undefined for elements/text. A comment is a node that is
-   neither an element (`hasAttribute`) nor a text node (`splitText`); the mini-dom
-   exposes no `nodeType`, so detect by method. */
-function commentData(node: Node): string | undefined {
-    if (isElement(node) || typeof (node as Text).splitText === 'function') {
-        return undefined
-    }
-    return (node as Comment).data
-}
-
 /* Block-range boundary markers. A control-flow block's rendered content sits between an
    OPEN and CLOSE comment: `[`…`]` for each rows / if / switch / slot ranges, and named
    `abide:…`…`/abide:…` boundaries for await / try / snippet / html. The skeleton's own
@@ -116,19 +94,22 @@ function indexElementHoles(container: Node, prefix: number[], paths: number[][])
    In hydrate mode the claimed tree is FULLY EXPANDED — a nested block's rendered content
    (each rows, branches, await/try boundaries) sits inline — so a naive descent would also
    collect the inner block's anchors, which belong to that block's OWN skeleton, shifting
-   every index past the first block. Block content is bounded by range markers, so track
-   depth per sibling list and take an anchor (and recurse into an element) only at depth 0,
-   where the skeleton's own structure lives. In create mode the clone is shallow (the blocks
-   have not built yet — no markers), so depth stays 0 and this is a plain document scan. */
+   every index past the first block. Block AND child-component content is bounded by range
+   markers (a component mounts as a `[`…`]` range at its anchor, like a block — see
+   `mountRange`), so track depth per sibling list and take an anchor (and recurse into an
+   element) only at depth 0, where the skeleton's own structure lives. In create mode the
+   clone is shallow (the ranges have not built yet — no markers), so depth stays 0 and this
+   is a plain document scan. */
 function scanAnchors(nodes: ArrayLike<Node>, anchors: Node[]): void {
     let depth = 0
     for (let index = 0; index < nodes.length; index += 1) {
         const node = nodes[index] as Node
         const data = commentData(node)
         if (data === undefined) {
-            /* Recurse into this skeleton's own elements, but NOT a child component's
-               wrapper — its anchors belong to the child's skeleton (see above). */
-            if (isElement(node) && depth === 0 && !isComponentWrapper(node)) {
+            /* Recurse into this skeleton's own elements at depth 0. A child component's
+               content sits inside its `[`…`]` range (depth > 0), so it is skipped like any
+               block range — its anchors belong to the child's own skeleton. */
+            if (isElement(node) && depth === 0) {
                 scanAnchors(node.childNodes, anchors)
             }
         } else if (isCloseMarker(data)) {

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

@@ -0,0 +1,34 @@
+import { attr } from './attr.ts'
+import { on } from './on.ts'
+
+/*
+Spreads an object's keys onto a native element — the `<div {...rest}>` runtime. `source`
+is a thunk over the spread expression; its keys are enumerated ONCE (so the attribute set
+is fixed at build, not reactively added/removed), but each value stays live: an `on<event>`
+key holding a function attaches as that event listener (mirroring `onclick={…}` on an
+element), and every other key binds as a reactive attribute (`attr`, re-reading the source
+per change, with the same present/absent semantics — `false`/`null`/`undefined` removes it,
+`true` sets it bare). A function under a non-`on` key is skipped (no attribute for it). A key
+in `exclude` is skipped — the element names it explicitly, and an explicit attribute wins
+over a spread key (the same set SSR's `$spread` skips, keeping the two sides congruent).
+*/
+// @documentation plumbing
+export function spreadAttrs(
+    element: Element,
+    source: () => Record<string, unknown>,
+    exclude: string[] = [],
+): void {
+    const skip = new Set(exclude)
+    const object = source()
+    for (const key in object) {
+        if (skip.has(key)) {
+            continue
+        }
+        const value = object[key]
+        if (key.startsWith('on') && typeof value === 'function') {
+            on(element, key.slice(2), value as EventListener)
+        } else if (typeof value !== 'function') {
+            attr(element, key, () => source()[key])
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+/*
+Wraps a `{...source}` spread layer so every key resolves to a live value thunk —
+the same `() => value` shape an explicit `name={expr}` prop compiles to, so a child
+reads a spread key exactly like an authored one (`$props[key]?.()`). `source` is a
+THUNK over the spread expression (not its value), re-evaluated on each key read and
+membership test, so a reactive source stays live both when its keys mutate and when
+the whole object is replaced — and the read registers as the reader's dependency. A
+nullish source spreads nothing. The reserved `$children` slot key is never surfaced —
+a source happening to carry one must not masquerade as slot content.
+*/
+// @documentation plumbing
+export function spreadProps(
+    source: () => Record<string, unknown> | null | undefined,
+): Record<string, () => unknown> {
+    /* A spread key the merged bag exposes — present on the current source and not the
+       reserved `$children` slot key (a source carrying one must not become slot content). */
+    const carries = (key: string | symbol): boolean =>
+        key !== '$children' && key in (source() ?? {})
+    return new Proxy(
+        {},
+        {
+            /* Each read returns a fresh thunk that re-evaluates the source for the key. */
+            get: (_target, key) => () => source()?.[key as string],
+            /* Live membership: whether the current source object carries the key. */
+            has: (_target, key) => carries(key),
+            /* Enumerable over the current source, so a merged bag reports spread keys. */
+            ownKeys: () => Reflect.ownKeys(source() ?? {}).filter(carries),
+            getOwnPropertyDescriptor: (_target, key) =>
+                carries(key) ? { enumerable: true, configurable: true } : undefined,
+        },
+    ) as Record<string, () => unknown>
+}

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

@@ -0,0 +1,33 @@
+import { createScope } from '../createScope.ts'
+import { CURRENT_SCOPE } from '../runtime/CURRENT_SCOPE.ts'
+import { enterRenderPass } from '../runtime/enterRenderPass.ts'
+import { exitRenderPass } from '../runtime/exitRenderPass.ts'
+import type { Scope } from '../types/Scope.ts'
+
+/*
+The shared mount core every page/layout/component build path runs (`mount`, `hydrate`,
+`fillRange`, `mountRange`, `fillBoundary`). Establishes the layer's lexical scope nested
+under the current one in `awaiting` mode — so it adopts the model doc its first `doc()`
+creates — brackets a render pass — so its `await`/`try` block ids draw from the shared
+counter in SSR-stream order — runs `build`, then restores the previous scope (synchronous
+build, so the restore is exact). `build` returns its reactivity stopper (from `scope` or
+`fillBefore`); the caller composes its own DOM teardown (clear host vs clear range) around
+the returned `stop`/`lexical`, keeping the one scope/render-pass contract in a single place.
+*/
+export function withScope(
+    label: string | undefined,
+    build: () => () => void,
+): { stop: () => void; lexical: Scope } {
+    const parentScope = CURRENT_SCOPE.current
+    const lexical = createScope({}, parentScope, true, label)
+    enterRenderPass()
+    CURRENT_SCOPE.current = lexical
+    let stop: () => void = () => undefined
+    try {
+        stop = build()
+    } finally {
+        exitRenderPass()
+        CURRENT_SCOPE.current = parentScope
+    }
+    return { stop, lexical }
+}

package/src/lib/ui/installHotBridge.ts

@@ -12,11 +12,17 @@ import { cloneStatic } from './dom/cloneStatic.ts'
 import { each } from './dom/each.ts'
 import { eachAsync } from './dom/eachAsync.ts'
 import { hydrate } from './dom/hydrate.ts'
+import { mergeProps } from './dom/mergeProps.ts'
 import { mount } from './dom/mount.ts'
 import { mountChild } from './dom/mountChild.ts'
 import { mountSlot } from './dom/mountSlot.ts'
 import { on } from './dom/on.ts'
+import { outlet } from './dom/outlet.ts'
+import { readCall } from './dom/readCall.ts'
+import { restProps } from './dom/restProps.ts'
 import { skeleton } from './dom/skeleton.ts'
+import { spreadAttrs } from './dom/spreadAttrs.ts'
+import { spreadProps } from './dom/spreadProps.ts'
 import { switchBlock } from './dom/switchBlock.ts'
 import { tryBlock } from './dom/tryBlock.ts'
 import { when } from './dom/when.ts'
@@ -67,7 +73,13 @@ export function installHotBridge(): void {
         tryBlock,
         switchBlock,
         mountSlot,
+        outlet,
         mountChild,
+        mergeProps,
+        spreadProps,
+        restProps,
+        spreadAttrs,
+        readCall,
         hydrate,
         escapeKey,
         nextBlockId,

package/src/lib/ui/remoteProxy.ts

@@ -1,5 +1,6 @@
 import { browserClientFlags } from '../shared/browserClientFlags.ts'
 import { buildRpcRequest } from '../shared/buildRpcRequest.ts'
+import { cacheManagedSlot } from '../shared/cacheManagedSlot.ts'
 import { createRemoteFunction } from '../shared/createRemoteFunction.ts'
 import { HttpError } from '../shared/HttpError.ts'
 import { OFFLINE_HEADER } from '../shared/OFFLINE_HEADER.ts'
@@ -7,6 +8,7 @@ import { rpcTimeoutSlot } from '../shared/rpcTimeoutSlot.ts'
 import { trace } from '../shared/trace.ts'
 import type { HttpVerb } from '../shared/types/HttpVerb.ts'
 import type { RemoteFunction } from '../shared/types/RemoteFunction.ts'
+import type { RpcOptions } from '../shared/types/RpcOptions.ts'
 import { withBase } from '../shared/withBase.ts'
 import { currentAbortSignal } from './runtime/currentAbortSignal.ts'
 import { REQUEST_SUPERSEDED } from './runtime/REQUEST_SUPERSEDED.ts'
@@ -38,41 +40,51 @@ export function remoteProxy<Args, Return>(
         proxy (/v2/rpc/…); the cache key keeps the bare `url` (keyForRemoteCall
         reads fn.url), so SSR snapshots round-trip base-independently.
         */
-        buildRequest: (args) =>
+        buildRequest: (args, opts) =>
             buildRpcRequest({
                 method,
                 url: withBase(url),
                 args,
                 baseUrl: window.location.href,
-                headers: rpcHeaders(),
+                headers: rpcHeaders(opts?.headers),
             }),
         /*
         Forcing `getRequest()` once builds the Request and seeds the
         cache meta thunk in createRemoteFunction with the same instance,
         so cache() readers don't reconstruct it.
         */
-        invoke: (_args, getRequest) => fetchWithTimeout(getRequest()),
+        invoke: (_args, getRequest, opts) => fetchWithTimeout(getRequest(), opts),
     })
 }
 
 /*
-Fetches under two optional aborts: the reactive scope that fired the call (so a
-superseded/torn-down read cancels its in-flight request — currentAbortSignal) and
-the env-configured client timeout (ABIDE_CLIENT_TIMEOUT, ms). Neither present →
-the unbounded fetch, exactly as before. A timeout surfaces as a 504 HttpError so a
-consumer reads an honest status instead of a raw DOMException → 500. Our scope abort
-(reason REQUEST_SUPERSEDED) is swallowed into a never-settling promise: the reactive
-owner is gone, so the result must neither resolve into a dead tree nor surface as a
-rejection. Other rejections (genuine network failure) propagate untouched.
+Fetches under three optional aborts: the reactive scope that fired the call (so a
+superseded/torn-down read cancels its in-flight request — currentAbortSignal), the
+caller-supplied opts.signal, and the env-configured client timeout
+(ABIDE_CLIENT_TIMEOUT, ms). None present and no transport opts → the unbounded
+fetch, exactly as before. A timeout surfaces as a 504 HttpError so a consumer reads
+an honest status instead of a raw DOMException → 500. Our scope abort (reason
+REQUEST_SUPERSEDED) is swallowed into a never-settling promise: the reactive owner is
+gone, so the result must neither resolve into a dead tree nor surface as a rejection.
+Other rejections (genuine network failure) propagate untouched. The caller's
+keepalive/priority/cache opts pass through to fetch unchanged.
 */
-function fetchWithTimeout(request: Request): Promise<Response> {
+function fetchWithTimeout(request: Request, opts?: RpcOptions): Promise<Response> {
     const timeout = rpcTimeoutSlot.ms
     const timeoutSignal = timeout === undefined ? undefined : AbortSignal.timeout(timeout)
-    const signal = combineSignals(currentAbortSignal(), timeoutSignal)
-    if (signal === undefined) {
+    /*
+    A cache-managed flight is shared across readers (cache() owns its lifetime), so a
+    single caller's signal must not abort it for the others — the same opt-out
+    currentAbortSignal makes for the scope signal. keepalive/priority/cache are
+    harmless to keep there.
+    */
+    const callerSignal = cacheManagedSlot.active ? undefined : (opts?.signal ?? undefined)
+    const signal = combineSignals(currentAbortSignal(), callerSignal, timeoutSignal)
+    const init = fetchInit(signal, opts)
+    if (init === undefined) {
         return fetch(request)
     }
-    return fetch(request, { signal }).catch((error: unknown) => {
+    return fetch(request, init).catch((error: unknown) => {
         if (error === REQUEST_SUPERSEDED) {
             return new Promise<Response>(() => {})
         }
@@ -85,39 +97,59 @@ function fetchWithTimeout(request: Request): Promise<Response> {
     })
 }
 
-/* One AbortSignal from the scope-abort and timeout sources: whichever is present,
-   AbortSignal.any when both, or undefined when neither (the unbounded fetch). */
-function combineSignals(
-    scopeSignal: AbortSignal | undefined,
-    timeoutSignal: AbortSignal | undefined,
-): AbortSignal | undefined {
-    if (scopeSignal === undefined) {
-        return timeoutSignal
+/*
+The fetch init from the merged abort signal plus the caller's transport opts
+(keepalive/priority/cache). headers are deliberately absent — they live on the
+Request built in buildRequest, since fetch(request, { headers }) replaces rather than
+merges. undefined when nothing applies, preserving the allocation-free unbounded
+fetch for the common reactive-free call.
+*/
+function fetchInit(signal: AbortSignal | undefined, opts?: RpcOptions): RequestInit | undefined {
+    const init: RequestInit = {}
+    if (signal !== undefined) {
+        init.signal = signal
+    }
+    if (opts?.keepalive !== undefined) {
+        init.keepalive = opts.keepalive
+    }
+    if (opts?.priority !== undefined) {
+        init.priority = opts.priority
     }
-    if (timeoutSignal === undefined) {
-        return scopeSignal
+    if (opts?.cache !== undefined) {
+        init.cache = opts.cache
+    }
+    return Object.keys(init).length === 0 ? undefined : init
+}
+
+/* One AbortSignal merging the scope abort, the caller signal, and the timeout:
+   AbortSignal.any over those present, the lone one when one, undefined when none
+   (the unbounded fetch). */
+function combineSignals(...signals: Array<AbortSignal | undefined>): AbortSignal | undefined {
+    const present = signals.filter((signal): signal is AbortSignal => signal !== undefined)
+    if (present.length <= 1) {
+        return present[0]
     }
-    return AbortSignal.any([scopeSignal, timeoutSignal])
+    return AbortSignal.any(present)
 }
 
 /*
-abide's per-RPC headers: the page traceparent (continues the server trace) and,
-only while offline, the offline marker so the handler's online() reflects the
-caller's connectivity. Returns undefined when neither applies so the
-allocation-free fetch path stays the common case.
+abide's per-RPC headers, merged onto the caller's opts.headers: the page traceparent
+(continues the server trace) and, only while offline, the offline marker so the
+handler's online() reflects the caller's connectivity. Caller headers go in first and
+the framework's are set last, so a caller adds transport metadata (idempotency-key,
+authorization) but can never overwrite traceparent or the offline marker; content-type
+stays owned by buildRpcRequest. Returns undefined when neither caller nor framework set
+a header, so the allocation-free fetch path stays the common case.
 */
-function rpcHeaders(): Headers | undefined {
-    const headers = new Headers()
-    let any = false
+function rpcHeaders(callerHeaders?: HeadersInit): Headers | undefined {
+    const headers = new Headers(callerHeaders)
     const traceparent = trace()
     if (traceparent) {
         headers.set('traceparent', traceparent)
-        any = true
     }
     /* Presence = offline; absence = online/unknown. navigator.onLine's offline signal is the reliable direction. */
     if (typeof navigator !== 'undefined' && navigator.onLine === false) {
         headers.set(OFFLINE_HEADER, '1')
-        any = true
     }
-    return any ? headers : undefined
+    return headers.keys().next().done ? undefined : headers
 }

package/src/lib/ui/renderChain.ts

@@ -1,50 +1,60 @@
-import { enterRenderPass } from './runtime/enterRenderPass.ts'
-import { exitRenderPass } from './runtime/exitRenderPass.ts'
-import { OUTLET_TAG } from './runtime/OUTLET_TAG.ts'
+import { OUTLET_CLOSE, OUTLET_OPEN } from './runtime/OUTLET_MARKER.ts'
+import type { RenderContext } from './runtime/types/RenderContext.ts'
 import type { SsrRender } from './runtime/types/SsrRender.ts'
 import type { UiComponent } from './runtime/types/UiComponent.ts'
 
-const OUTLET_OPEN = `<${OUTLET_TAG}>`
-const OUTLET_CLOSE = `</${OUTLET_TAG}>`
-const OUTLET_PLACEHOLDER = `${OUTLET_OPEN}${OUTLET_CLOSE}`
+const OPEN = `<!--${OUTLET_OPEN}-->`
+const CLOSE = `<!--${OUTLET_CLOSE}-->`
+/* A layout's empty outlet boundary, before the child layer is folded in. */
+const OUTLET_PLACEHOLDER = `${OPEN}${CLOSE}`
 
 /*
 Server-renders a route's layout chain wrapped around its page into one SsrRender.
-`views` is ordered outermost layout → … → page. The whole chain renders under a
-SINGLE render pass: one outer `enterRenderPass` resets the block-id counter, then
-each `render()` runs nested (depth > 0, no reset), so every `await`/`try` block
-across all layers draws a unique id from the shared counter — in the same
-layer-sequential order the client hydrates them, keeping the streamed fragments and
-the resume manifest aligned.
+`views` is ordered outermost layout → … → page. The whole chain shares ONE request-local
+block-id counter (`$ctx`): each `render()` is awaited sequentially (render is async), so
+every `await`/`try` block across all layers draws a unique id from the shared counter — in
+the same layer-sequential order the client hydrates them, keeping the streamed fragments
+and the resume manifest aligned. Sequential (not `Promise.all`) so the counter advances
+deterministically and the reactive scopes never interleave.
 
-The html nests inner-to-outer: each parent's empty `<abide-outlet>` is filled with
-the accumulated child html — the outlet ELEMENT is kept (it stays the live mount
-container the client router fills/hydrates the child into, found by tag), so the
-SSR DOM and the client-nested DOM match exactly. Awaits concatenate (already
-uniquely numbered); state merges. A single component renders unchanged — its own
-render with no wrapping. A layout missing its `<slot/>` is a build error surfaced here.
+The html nests inner-to-outer: each parent layout's empty outlet boundary
+(`<!--abide:outlet--><!--/abide:outlet-->`) is filled with the accumulated child html —
+no `<abide-outlet>` ELEMENT, so the filled child lays out as a direct child of the
+slot's parent (the router mounts/hydrates it as a marker range, see `outlet`/`fillBoundary`).
+The whole chain is wrapped in a ROOT boundary the router fills into `#app`. Awaits
+concatenate (already uniquely numbered); state and inline blocking `resume` values merge.
+A layout missing its `<slot/>` is a build error surfaced here.
 */
-export function renderChain(views: UiComponent[], params: Record<string, string>): SsrRender {
-    enterRenderPass()
-    try {
-        const renders = views.map((view) => view.render(params))
-        let html = renders[renders.length - 1]?.html ?? ''
-        for (let index = renders.length - 2; index >= 0; index -= 1) {
-            const parent = renders[index] as SsrRender
-            if (!parent.html.includes(OUTLET_PLACEHOLDER)) {
-                throw new Error('[abide] a layout.abide must contain exactly one <slot/> outlet')
-            }
-            /* Fill the outlet element (keep it), function replacement so `$&`/`$\`` in
-               the child html insert literally. */
-            const child = html
-            html = parent.html.replace(OUTLET_PLACEHOLDER, () => OUTLET_OPEN + child + OUTLET_CLOSE)
-        }
-        return {
-            html,
-            awaits: renders.flatMap((render) => render.awaits),
-            state: Object.assign({}, ...renders.map((render) => render.state)),
+export async function renderChain(
+    views: UiComponent[],
+    params: Record<string, string>,
+): Promise<SsrRender> {
+    const ctx: RenderContext = { next: 0 }
+    const renders: SsrRender[] = []
+    for (const view of views) {
+        renders.push(await view.render(params, ctx))
+    }
+    let html = renders[renders.length - 1]?.html ?? ''
+    for (let index = renders.length - 2; index >= 0; index -= 1) {
+        const parent = renders[index] as SsrRender
+        /* EXACTLY one outlet, not at-least-one: `.replace` fills only the first, and
+           the client router fills the LAST `outlet()` call's boundary (`PENDING_OUTLET`),
+           so a second outlet would mount the SSR child and the hydrated child into
+           DIFFERENT slots — a silent desync. Throw at build instead. */
+        if (parent.html.split(OUTLET_PLACEHOLDER).length - 1 !== 1) {
+            throw new Error('[abide] a layout.abide must contain exactly one <slot/> outlet')
         }
-    } finally {
-        exitRenderPass()
+        /* Fold the child between the outlet markers (function replacement so `$&`/`$\``
+           in the child html insert literally). */
+        const child = html
+        html = parent.html.replace(OUTLET_PLACEHOLDER, () => OPEN + child + CLOSE)
+    }
+    return {
+        /* Root boundary — the router fills `#app` by claiming/creating this same
+           boundary and mounting the outermost layer (or lone page) into it. */
+        html: OPEN + html + CLOSE,
+        awaits: renders.flatMap((render) => render.awaits),
+        state: Object.assign({}, ...renders.map((render) => render.state)),
+        resume: Object.assign({}, ...renders.map((render) => render.resume)),
     }
 }