@abide/abide 0.41.0 → 0.42.0

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

@@ -1,8 +1,15 @@
+import { walkAnchorOrder } from '../compile/walkAnchorOrder.ts'
+import { walkElementOrder } from '../compile/walkElementOrder.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 { depthZeroNodes } from './depthZeroNodes.ts'
+import { domAnchorAdapter } from './domAnchorAdapter.ts'
+import { domElementAdapter } from './domElementAdapter.ts'
 import { foreignWrapperTag } from './foreignWrapperTag.ts'
+import { isElement } from './isElement.ts'
+import { markerDepthDelta } from './markerDepthDelta.ts'
 import type { SkeletonHoles } from './types/SkeletonHoles.ts'
 
 type CompiledSkeleton = {
@@ -21,23 +28,6 @@ type CompiledSkeleton = {
    `templateFor` for the per-document rationale). */
 const CACHES = new WeakMap<object, Map<string, CompiledSkeleton>>()
 
-/* An element carries `hasAttribute`; text/comment nodes do not. Used instead of
-   `nodeType` so the walk runs under the test mini-dom too. */
-function isElement(node: Node): node is Element {
-    return typeof (node as Element).hasAttribute === 'function'
-}
-
-/* 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
-   anchor (`a`) sits OUTSIDE any such range. */
-function isOpenMarker(data: string): boolean {
-    return data === '[' || data.startsWith('abide:')
-}
-function isCloseMarker(data: string): boolean {
-    return data === ']' || data.startsWith('/abide:')
-}
-
 /* The `index`-th depth-0 ELEMENT among `children` — skipping text/comment nodes AND any
    element nested inside a block's rendered range (between `[`…`]` / `abide:…` boundaries),
    which belongs to that block's own skeleton. The compiler indexes element holes over the
@@ -57,69 +47,28 @@ function elementChildAt(children: ArrayLike<Node>, index: number): Element | und
                 }
                 seen += 1
             }
-        } else if (isCloseMarker(data)) {
-            depth -= 1
-        } else if (isOpenMarker(data)) {
-            depth += 1
+            continue
         }
+        depth += markerDepthDelta(data)
     }
     return undefined
 }
 
-/* Records each element hole's element-only path in PRE-ORDER (the `HOLE_ATTRIBUTE`
-   marks which) and strips the marker — the compiler assigns element-hole indices in the
-   same pre-order, so the arrays line up without numbering the markers. */
-function indexElementHoles(container: Node, prefix: number[], paths: number[][]): void {
-    const children = container.childNodes
-    let elementIndex = 0
-    for (let cursor = 0; cursor < children.length; cursor += 1) {
-        const child = children[cursor] as Node
-        if (!isElement(child)) {
-            continue
-        }
-        const path = [...prefix, elementIndex]
-        elementIndex += 1
-        if (child.hasAttribute(HOLE_ATTRIBUTE)) {
-            paths.push(path)
-            child.removeAttribute(HOLE_ATTRIBUTE)
-        }
-        indexElementHoles(child, path, paths)
+/* Walks an element-only path from the top-level node list to the target element. A step
+   that resolves to nothing means the claimed server run is missing an element the skeleton
+   expects here — a hydration desync; throw AT it (naming the path) rather than returning
+   the undefined that derefs in the downstream `mountChild`/`attr`, far from the cause. */
+function resolveElementHole(topLevel: ArrayLike<Node>, path: number[]): Element {
+    let node = elementChildAt(topLevel, path[0] as number)
+    for (let depth = 1; depth < path.length && node !== undefined; depth += 1) {
+        node = elementChildAt(node.childNodes, path[depth] as number)
     }
-}
-
-/* Collects THIS skeleton's own anchor holes (`a` comments) in document order, present in
-   both the cloned skeleton and the server DOM (text-width-independent). The compiler emits
-   anchors in the same order, so the arrays line up.
-
-   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 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 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)) {
-            depth -= 1
-        } else if (isOpenMarker(data)) {
-            depth += 1
-        } else if (data === 'a' && depth === 0) {
-            anchors.push(node)
-        }
+    if (node === undefined) {
+        throw new Error(
+            `[abide] hydration desync: skeleton element hole [${path.join(',')}] resolved to no node — the server DOM is missing an element the client build expects here.`,
+        )
     }
+    return node
 }
 
 /* When `parent` is foreign (or a control-flow fragment inside foreign content), the
@@ -140,31 +89,20 @@ function compile(html: string, wrapper: string | undefined): CompiledSkeleton {
         template.innerHTML = wrapper === undefined ? html : `<${wrapper}>${html}</${wrapper}>`
         const source =
             wrapper === undefined ? template.content : (template.content.firstChild as Node)
+        /* Element holes via the ONE shared rule (`walkElementOrder`) — the same element-only
+           pre-order the compiler numbers `elIndex` with. Record each `HOLE_ATTRIBUTE`
+           element's path and strip the marker so a clone never carries it into the live DOM. */
         const elementPaths: number[][] = []
-        indexElementHoles(source, [], elementPaths)
+        walkElementOrder(Array.from(source.childNodes), domElementAdapter, (node, path) => {
+            elementPaths.push(path)
+            ;(node as Element).removeAttribute(HOLE_ATTRIBUTE)
+        })
         compiled = { source, elementPaths, topLevelCount: source.childNodes.length }
         cache.set(key, compiled)
     }
     return compiled
 }
 
-/* Walks an element-only path from the top-level node list to the target element. A step
-   that resolves to nothing means the claimed server run is missing an element the skeleton
-   expects here — a hydration desync; throw AT it (naming the path) rather than returning
-   the undefined that derefs in the downstream `mountChild`/`attr`, far from the cause. */
-function resolveElementHole(topLevel: ArrayLike<Node>, path: number[]): Element {
-    let node = elementChildAt(topLevel, path[0] as number)
-    for (let depth = 1; depth < path.length && node !== undefined; depth += 1) {
-        node = elementChildAt(node.childNodes, path[depth] as number)
-    }
-    if (node === undefined) {
-        throw new Error(
-            `[abide] hydration desync: skeleton element hole [${path.join(',')}] resolved to no node — the server DOM is missing an element the client build expects here.`,
-        )
-    }
-    return node
-}
-
 /*
 Realizes a compiled skeleton under `parent` and returns its holes: `el` the element
 holes (attribute/listener/bind), in pre-order; `an` the anchor holes (reactive text,
@@ -197,8 +135,13 @@ export function skeleton(parent: Node, html: string): SkeletonHoles {
             parent.appendChild(clone)
         }
     }
+    /* Anchor holes via the ONE shared ordering rule (`walkAnchorOrder`) — the same traversal
+       the compiler numbers `anIndex` with. The top-level list is depth-0-filtered up front (a
+       nested range can sit among the top-level run); the adapter filters each deeper level. */
     const an: Node[] = []
-    scanAnchors(topLevel, an)
+    walkAnchorOrder(depthZeroNodes(topLevel), domAnchorAdapter, (anchor) => {
+        an.push(anchor as Node)
+    })
     return {
         el: elementPaths.map((path) => resolveElementHole(topLevel, path)),
         an,

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

@@ -1,10 +1,11 @@
 import { effect } from '../effect.ts'
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
-import { clearBetween } from './clearBetween.ts'
 import { fillBefore } from './fillBefore.ts'
 import { openMarker } from './openMarker.ts'
+import { replaceRange } from './replaceRange.ts'
 import type { SwitchCase } from './types/SwitchCase.ts'
 
 /*
@@ -28,7 +29,7 @@ export function switchBlock(
 ): void {
     const hydration = RENDER.hydration
     /* The live case's scope, registered with the owner so it disposes on owner
-       teardown — not only when the subject switches cases via clearBetween. */
+       teardown — not only when the subject switches cases via replaceRange. */
     const group = scopeGroup()
     let dispose: (() => void) | undefined
     let activeIndex: number
@@ -49,16 +50,16 @@ export function switchBlock(
 
     /* `before` places the range among static siblings on create (block before a suffix);
        hydrate ignores it and uses the parked claim cursor. */
-    const start = openMarker(parent, '[', before)
+    const start = openMarker(parent, RANGE_OPEN, before)
     if (hydration !== undefined) {
         activeIndex = select(subject())
         const chosen = caseAt(activeIndex)
         if (chosen !== undefined) {
             dispose = group.track(scope(() => chosen.render(parent))) // claim the SSR nodes in place
         }
-        end = openMarker(parent, ']')
+        end = openMarker(parent, RANGE_CLOSE)
     } else {
-        end = openMarker(parent, ']', before)
+        end = openMarker(parent, RANGE_CLOSE, before)
         activeIndex = select(subject())
         const chosen = caseAt(activeIndex)
         if (chosen !== undefined) {
@@ -71,12 +72,14 @@ export function switchBlock(
         if (index === activeIndex) {
             return
         }
-        clearBetween(start, end, dispose)
-        dispose = undefined
         activeIndex = index
         const chosen = caseAt(index)
-        if (chosen !== undefined) {
-            dispose = group.track(fillBefore(end, (p) => chosen.render(p)))
-        }
+        /* Null `dispose` before `replaceRange` builds the new case: a reentrant switch
+           during that build (an effect in the new content writing the subject) would
+           otherwise re-enter with the already-disposed disposer and clear it twice. */
+        const prior = dispose
+        dispose = undefined
+        const next = replaceRange(start, end, prior, chosen && ((p) => chosen.render(p)))
+        dispose = next !== undefined ? group.track(next) : undefined
     })
 }

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

@@ -1,10 +1,11 @@
 import { effect } from '../effect.ts'
+import { RANGE_CLOSE, RANGE_OPEN } from '../runtime/RANGE_MARKER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeGroup } from '../runtime/scopeGroup.ts'
-import { clearBetween } from './clearBetween.ts'
 import { fillBefore } from './fillBefore.ts'
 import { openMarker } from './openMarker.ts'
+import { replaceRange } from './replaceRange.ts'
 
 /*
 Conditional binding — the runtime for `<template if>` (with optional `else`). The
@@ -34,7 +35,7 @@ export function when(
        branch's own interpolations still track, each through its own effect. */
     const chosenFor = (branch: 'then' | 'else') => (branch === 'then' ? render : renderElse)
     /* The live branch's scope, registered with the owner so it disposes on owner
-       teardown — not only on a branch flip via clearBetween. */
+       teardown — not only on a branch flip via replaceRange. */
     const group = scopeGroup()
     let dispose: (() => void) | undefined
     let activeBranch: 'then' | 'else'
@@ -43,16 +44,16 @@ export function when(
     /* `before` (a static node located by the skeleton) places the range among siblings on
        create, so the block sits before a static suffix rather than at the parent's end.
        Hydrate ignores it — the claim cursor (positioned past the prefix) drives placement. */
-    const start = openMarker(parent, '[', before)
+    const start = openMarker(parent, RANGE_OPEN, before)
     if (hydration !== undefined) {
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
         if (chosen !== undefined) {
             dispose = group.track(scope(() => chosen(parent))) // content claims the SSR nodes in place
         }
-        end = openMarker(parent, ']')
+        end = openMarker(parent, RANGE_CLOSE)
     } else {
-        end = openMarker(parent, ']', before)
+        end = openMarker(parent, RANGE_CLOSE, before)
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
         if (chosen !== undefined) {
@@ -65,12 +66,14 @@ export function when(
         if (branch === activeBranch) {
             return
         }
-        clearBetween(start, end, dispose)
-        dispose = undefined
         activeBranch = branch
         const chosen = chosenFor(branch)
-        if (chosen !== undefined) {
-            dispose = group.track(fillBefore(end, chosen))
-        }
+        /* Null `dispose` before `replaceRange` builds the new branch: a reentrant flip
+           during that build (an effect in the new content writing the condition) would
+           otherwise re-enter with the already-disposed disposer and clear it twice. */
+        const prior = dispose
+        dispose = undefined
+        const next = replaceRange(start, end, prior, chosen)
+        dispose = next !== undefined ? group.track(next) : undefined
     })
 }

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

@@ -0,0 +1,16 @@
+/* The comment-marker "wire alphabet" — the single source of truth for the sentinel
+   strings the SSR emit (`generateSSR`) writes into HTML comments and the hydrate scan
+   (`skeleton`) + every range-mount runtime (`when`/`switch`/`each`/`mountRange`/
+   `mountSlot`/`appendSnippet`) creates as `document.createComment` nodes. Both sides
+   reference THESE constants, so a marker the server writes and the marker the client
+   looks for can never drift on a literal.
+
+   A control-flow block's rendered content sits between an OPEN (`[`) and CLOSE (`]`)
+   comment; a snippet interpolation between `abide:snippet` / `/abide:snippet` (matching
+   `skeleton`'s `abide:` / `/abide:` named-boundary convention, like `OUTLET_MARKER`).
+   The skeleton's own positioning anchor (`a`) sits OUTSIDE any such range. */
+export const RANGE_OPEN = '['
+export const RANGE_CLOSE = ']'
+export const ANCHOR = 'a'
+export const SNIPPET_OPEN = 'abide:snippet'
+export const SNIPPET_CLOSE = '/abide:snippet'

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

@@ -0,0 +1,22 @@
+import { flushEffects } from './flushEffects.ts'
+import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
+
+/*
+Runs `fn` with reactive writes coalesced: effects dirtied inside queue once and
+flush a single time when the outermost batch exits, so a burst of writes (e.g. an
+event handler setting several signals) re-runs each dependent effect once instead
+of once per write. Nests safely — only the depth-0 exit flushes — so a batched
+write that calls into another batched write (a handler invoking a doc patch) still
+flushes once, at the top. Same idiom `createDoc`/`clientPage` inline, factored out.
+*/
+export function batch<T>(fn: () => T): T {
+    REACTIVE_CONTEXT.batchDepth += 1
+    try {
+        return fn()
+    } finally {
+        REACTIVE_CONTEXT.batchDepth -= 1
+        if (REACTIVE_CONTEXT.batchDepth === 0) {
+            flushEffects()
+        }
+    }
+}

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

@@ -1,7 +1,6 @@
 import type { PageSnapshot } from '../../shared/types/PageSnapshot.ts'
 import { state } from '../state.ts'
-import { flushEffects } from './flushEffects.ts'
-import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
+import { batch } from './batch.ts'
 import type { State } from './types/State.ts'
 
 /*
@@ -107,15 +106,11 @@ export const clientPage: { value: PageSnapshot } = {
            (e.g. `page.url` + `page.params.id`) re-runs once per field and transiently
            observes a half-updated snapshot (new url, stale id). Same batch idiom as
            `createDoc` — flush once, after every cell is reconciled. */
-        REACTIVE_CONTEXT.batchDepth += 1
-        try {
+        batch(() => {
             routeCell.value = next.route
             urlCell.value = next.url
             navigatingCell.value = next.navigating
             reconcileParams(next.params)
-        } finally {
-            REACTIVE_CONTEXT.batchDepth -= 1
-        }
-        flushEffects()
+        })
     },
 }

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

@@ -1,16 +1,15 @@
 import { applyPatchToTree } from './applyPatchToTree.ts'
+import { batch } from './batch.ts'
 import { createComputedNode } from './createComputedNode.ts'
 import { createSignalNode } from './createSignalNode.ts'
-import { flushEffects } from './flushEffects.ts'
 import { PATCH_BUS } from './PATCH_BUS.ts'
-import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
+import { pathSegments } from './pathSegments.ts'
 import { readNode } from './readNode.ts'
 import { trigger } from './trigger.ts'
 import type { Cell } from './types/Cell.ts'
 import type { Doc } from './types/Doc.ts'
 import type { Patch } from './types/Patch.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
-import { unescapeKey } from './unescapeKey.ts'
 import { walkPath } from './walkPath.ts'
 import { writeNode } from './writeNode.ts'
 
@@ -133,7 +132,7 @@ export function createDoc(initial: unknown): Doc {
     function apply(patch: Patch): void {
         /* Segments index the tree, so they carry the REAL keys (unescaped); the path
            strings (parentPath, node-map keys) stay escaped, re-walked through walkPath. */
-        const segments = patch.path === '' ? [] : patch.path.split('/').map(unescapeKey)
+        const segments = patch.path === '' ? [] : pathSegments(patch.path)
         /* Capture the pre-image only when a consumer is listening (the inverse's only
            cost): a replace/remove inverts to the value it overwrote, an add to a
            remove (computed post-apply, below, to resolve an array append's index). */
@@ -157,8 +156,7 @@ export function createDoc(initial: unknown): Doc {
         const nonShiftingAdd =
             patch.op === 'add' &&
             (!parentIsArray || leafKey === '-' || Number(leafKey) === arrayLength - 1)
-        REACTIVE_CONTEXT.batchDepth += 1
-        try {
+        batch(() => {
             if (segments.length === 0) {
                 wakeSubtree('', true, true)
             } else if (!structural) {
@@ -178,15 +176,13 @@ export function createDoc(initial: unknown): Doc {
             } else {
                 wakeSubtree(parentPath, true, true)
             }
-        } finally {
-            REACTIVE_CONTEXT.batchDepth -= 1
-        }
-        /* Announce the change before flushing effects, so a patch an effect emits in
-           reaction lands AFTER this one on the bus — the journal stays chronological. */
-        if (PATCH_BUS.active) {
-            PATCH_BUS.emit({ doc: self, patch, inverse: inverseOf(patch, before) })
-        }
-        flushEffects()
+            /* Announce the change before effects flush, so a patch an effect emits in
+               reaction lands AFTER this one on the bus — the journal stays chronological.
+               Emitting inside the batch keeps it ahead of the depth-0 flush on batch exit. */
+            if (PATCH_BUS.active) {
+                PATCH_BUS.emit({ doc: self, patch, inverse: inverseOf(patch, before) })
+            }
+        })
     }
 
     /* The patch that undoes `patch`, from the pre-image `before` (a value the change
@@ -224,7 +220,7 @@ export function createDoc(initial: unknown): Doc {
     */
     function cell<T>(path: string): Cell<T> {
         const node = nodeFor(path)
-        const segments = path.split('/').map(unescapeKey)
+        const segments = pathSegments(path)
         const leafKey = segments[segments.length - 1] as string
         /* Auto-vivify missing ancestor objects so binding a nested path on a doc
            booted shallow (e.g. `state({})`) doesn't crash, and a later `set` writes

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

@@ -0,0 +1,10 @@
+import { unescapeKey } from './unescapeKey.ts'
+
+/*
+Splits an escaped JSON-Pointer-style doc path into its REAL key segments
+(each segment unescaped). The path strings (parentPath, node-map keys) stay
+escaped and re-walked through `walkPath`; segments index the live tree.
+*/
+export function pathSegments(path: string): string[] {
+    return path.split('/').map(unescapeKey)
+}

package/src/lib/ui/seedResolved.ts

@@ -0,0 +1,28 @@
+import { RESUME } from './runtime/RESUME.ts'
+import { seedStreamedResolution } from './seedStreamedResolution.ts'
+import type { ResolvedFrame } from './types/ResolvedFrame.ts'
+
+/*
+The single client intake seam for SSR warm-state seeding. Both warm-seed channels —
+the cache-snapshot channel (a settled `cache()` value, keyed by cache key) and the
+await-resume channel (an `await`-block resolved value, keyed by boundary id) — answer
+the same "ship a server-settled value so hydration doesn't re-fetch" question, but land
+in two distinct stores: the cache STORE (read by `cache()`) and the RESUME MANIFEST
+(read by `awaitBlock` on adopt). This routes a discriminated `ResolvedFrame` to the
+matching store so every consumer — startClient's boot drain, the live `__abideResolve`,
+applyResolved's stream swap — registers through ONE call instead of poking each store
+inline. The codecs stay split by source: the cache value is an HTTP body capped at plain
+JSON (it must agree with the live `decodeResponse` read), the resume value is an in-process
+graph carried as ref-json text and decoded lazily at the read site.
+*/
+// @documentation plumbing
+export function seedResolved(frame: ResolvedFrame): void {
+    if (frame.kind === 'cache') {
+        seedStreamedResolution(frame.resolution)
+        return
+    }
+    /* The resume value rides as raw ref-json text; store it unparsed so the inline
+       stream-swap script (vanilla, runs before the bundle's codec loads) can register
+       through this same seam. `awaitBlock` decodes it at the read. */
+    RESUME[frame.id] = frame.resume
+}

package/src/lib/ui/startClient.ts

@@ -11,7 +11,7 @@ import { probeNavigation } from './probeNavigation.ts'
 import { router } from './router.ts'
 import { clientPage } from './runtime/clientPage.ts'
 import type { RouteLoader } from './runtime/types/RouteLoader.ts'
-import { seedStreamedResolution } from './seedStreamedResolution.ts'
+import { seedResolved } from './seedResolved.ts'
 
 /* The server's __SSR__ payload this entry consumes. */
 type SsrPayload = { cache?: CacheSnapshotEntry[]; base?: string }
@@ -65,14 +65,16 @@ export function startClient(
     const streamed =
         (globalThis as { __abideResumeCache?: StreamedResolution[] }).__abideResumeCache ?? []
     for (const resolution of [...(ssr.cache ?? []), ...streamed]) {
-        seedStreamedResolution(resolution)
+        seedResolved({ kind: 'cache', resolution })
     }
     /* Keep the cache channel live past boot: replace the head's buffering collector with
        the store-connected sink so a post-load resolution — streaming SPA navigation or a
        socket-delivered SSR frame, both routed through applyResolved — seeds the store
-       directly instead of pushing to a buffer nothing drains again. */
+       directly instead of pushing to a buffer nothing drains again. The inline doc-stream
+       script only ever hands this a cache `StreamedResolution`, so wrap it as a cache frame
+       through the one intake seam. */
     ;(globalThis as { __abideResolve?: (resolution: StreamedResolution) => void }).__abideResolve =
-        seedStreamedResolution
+        (resolution) => seedResolved({ kind: 'cache', resolution })
 
     return router(target, routes, layoutRoutes, probeNavigation)
 }

package/src/lib/ui/types/ResolvedFrame.ts

@@ -0,0 +1,15 @@
+import type { StreamedResolution } from '../../shared/types/StreamedResolution.ts'
+
+/*
+A warm-state-seed frame for the single client intake (`seedResolved`), discriminated by
+`kind`. Both kinds ship a server-settled value so hydration adopts without a re-fetch,
+but route to distinct stores:
+  - `cache`  — a `StreamedResolution` for the cache store, read by a warm `cache()` call.
+  - `resume` — an `await`-block boundary id plus its ref-json-encoded value STRING for the
+               RESUME manifest, decoded lazily by `awaitBlock` when it adopts the branch.
+The payloads stay distinct (cache snapshot vs boundary-keyed value); the unified thing is
+the intake seam, not the payload.
+*/
+export type ResolvedFrame =
+    | { kind: 'cache'; resolution: StreamedResolution }
+    | { kind: 'resume'; id: number; resume: string }

package/template/.zed/settings.json

@@ -0,0 +1,4 @@
+{
+  "auto_install_extensions": { "abide": true },
+  "semantic_tokens": "combined"
+}

package/template/src/ui/pages/page.abide

@@ -3,17 +3,17 @@
 Root page — served at GET /. Every folder under src/ui/pages/ that contains a
 page.abide mounts at that folder's URL; the root layout.abide wraps it.
 
-The blocking await-block below (the `then` attribute sits ON the <template await>)
+The blocking await-block below (the `then` clause sits in the `{#await}` head)
 resolves on the server during SSR and renders inline — no pending placeholder. The
 decoded body is captured into the per-request cache, serialized into the HTML, and
-replayed on the client during hydration with no second fetch. A `then` *child*
+replayed on the client during hydration with no second fetch. A `{:then}` *branch*
 instead would stream the resolution in out of order.
 */
 import { cache } from '@abide/abide/shared/cache'
 import { getHello } from '$server/rpc/getHello.ts'
 </script>
 
-<template await={cache(getHello)()} then="hello">
+{#await cache(getHello)() then hello}
     <h1>{hello.message}</h1>
-</template>
+{/await}
 <p>Edit <code>src/ui/pages/page.abide</code> and the page hot-reloads.</p>