@abide/abide 0.42.0 → 0.43.0

package/src/lib/ui/compile/tryPlan.ts

@@ -0,0 +1,29 @@
+import { resolveBranches } from './resolveBranches.ts'
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* The structural shape of a `try` error boundary, resolved once so the build and SSR
+   back-ends share one reading and only own emission. Both previously recomputed branch
+   resolution, the `finallyChildren` default, the guarded (children-minus-branch) split, and
+   the catch binding / presence. */
+export type TryPlan = {
+    /* The guarded content — every child except the `catch`/`finally` branch nodes. */
+    guarded: TemplateNode[]
+    /* The catch content + its bound name (`_error` default); empty when no catch branch. */
+    catchChildren: TemplateNode[]
+    catchAs: string
+    finallyChildren: TemplateNode[]
+    /* No catch → a throw propagates to the enclosing boundary (re-throw / `undefined` thunk). */
+    hasCatch: boolean
+}
+
+/* Resolves a `try` node's branches into the shared structural plan. */
+export function tryPlan(node: Extract<TemplateNode, { kind: 'try' }>): TryPlan {
+    const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+    return {
+        guarded: node.children.filter((child) => child.kind !== 'branch'),
+        catchChildren: catchBranch?.children ?? [],
+        catchAs: catchBranch?.as ?? '_error',
+        finallyChildren: finallyBranch?.children ?? [],
+        hasCatch: catchBranch !== undefined,
+    }
+}

package/src/lib/ui/compile/types/TemplateAttr.ts

@@ -13,9 +13,15 @@ absolute offset of `code` in the original `.abide` source (see TextPart) —
 optional, set only when the parser tracks positions for the type-checking shadow.
 */
 export type TemplateAttr =
-    | { kind: 'static'; name: string; value: string; bare?: true }
-    | { kind: 'expression'; name: string; code: string; loc?: number }
+    | { kind: 'static'; name: string; value: string; bare?: true; nameLoc?: number }
+    | { kind: 'expression'; name: string; code: string; loc?: number; nameLoc?: number }
     | { kind: 'event'; event: string; code: string; loc?: number }
     | { kind: 'bind'; property: string; code: string; loc?: number }
+    /* `class:<name>={code}` — toggles the class on/off by `code`'s truthiness, written
+       surgically (classList.toggle) without re-rendering the element. */
+    | { kind: 'class'; name: string; code: string; loc?: number }
+    /* `style:<property>={code}` — writes one inline style/custom property (style.setProperty)
+       reactively, again without a re-render. `property` may be a CSS custom prop (`--pct`). */
+    | { kind: 'style'; property: string; code: string; loc?: number }
     | { kind: 'attach'; code: string; loc?: number }
     | { kind: 'spread'; code: string; loc?: number }

package/src/lib/ui/compile/types/TemplateNode.ts

@@ -72,9 +72,13 @@ export type TemplateNode =
     | {
           kind: 'component'
           name: string
+          /* Source offset of the tag name — the anchor for a whole-mount diagnostic
+             (a missing required prop, which has no supplied expression to point at). */
+          loc?: number
           /* Each authored attribute as a prop. A `spread` entry (`{...code}`) carries no
-             `name`; its keys merge in at runtime (`mergeProps`/`spreadProps`). */
-          props: { name: string; code: string; loc?: number; spread?: boolean }[]
+             `name`; its keys merge in at runtime (`mergeProps`/`spreadProps`). `nameLoc` is
+             the prop name's source offset — the anchor for an excess-prop diagnostic. */
+          props: { name: string; code: string; loc?: number; nameLoc?: number; spread?: boolean }[]
           children: TemplateNode[]
       }
     | { kind: 'switch'; subject: string; children: TemplateNode[]; loc?: number }

package/src/lib/ui/createScope.ts

@@ -1,4 +1,5 @@
 import { computed } from './computed.ts'
+import { effect } from './effect.ts'
 import { history } from './history.ts'
 import { linked } from './linked.ts'
 import { persist as persistDoc } from './persist.ts'
@@ -37,6 +38,10 @@ export function createScope(
     const data = (): Doc => (document ??= createDoc({}))
     const id = parent === undefined ? `scope-${nextId++}` : `${parent.id}.${nextId++}`
     const children: Scope[] = []
+    /* Adopted build teardowns (the reactivity stopper from the mount core). Disposed
+       first and in reverse on teardown, before children and capabilities — so the one
+       `dispose` runs the order the call sites hand-composed as `stop(); lexical.dispose()`. */
+    const owned: Array<() => void> = []
     /* Context values shared down the tree, held apart from the reactive doc (which
        a child does not inherit): keyed by name, read by the closest ancestor walk. */
     const shared = new Map<string, unknown>()
@@ -56,11 +61,17 @@ export function createScope(
         cell: (path) => data().cell(path),
         derive: (path, compute) => data().derive(path, compute),
         snapshot: () => data().snapshot(),
-        /* The `.value`-cell signal forms, namespaced under the scope — standalone
-           non-serializing cells (owned by the render scope), reached only here. */
+        /* The reactive primitives — namespaced under the scope but AMBIENT-bound, not
+           receiver-bound: each binds whatever scope is rendering and the finest ambient
+           build window (branch/row), so the handle is namespacing, not a binding target.
+           Binding to the receiver would leak branch-local cells (see ADR-0012). */
         state,
         linked,
         computed,
+        effect,
+        own: (dispose) => {
+            owned.push(dispose)
+        },
         child: (childInitial = {}) => {
             const created = createScope(childInitial, self)
             children.push(created)
@@ -91,6 +102,13 @@ export function createScope(
         canUndo: () => past?.canUndo() ?? false,
         canRedo: () => past?.canRedo() ?? false,
         dispose: () => {
+            /* Stop the build's reactivity first (reverse order), before tearing down nested
+               children and the boundary-crossing capabilities — the order the call sites
+               hand-composed as `stop(); lexical.dispose()`. */
+            for (let index = owned.length - 1; index >= 0; index -= 1) {
+                owned[index]?.()
+            }
+            owned.length = 0
             for (const created of children) {
                 created.dispose()
             }

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

@@ -3,18 +3,14 @@ import { clearBetween } from './clearBetween.ts'
 
 /*
 The standard teardown for a marker-bounded range (component, layout/page boundary,
-slot): stop the content's reactivity, dispose its lexical scope, and clear the nodes
-between the markers — leaving the markers in place so a hot swap rebuilds the range.
-Shared by every range mount (`fillRange`, `mountRange`, `fillBoundary`) so the one
-disposer contract lives in a single place.
+slot): dispose its lexical scope (which stops the content's reactivity first, then its
+nested children and capabilities), and clear the nodes between the markers — leaving the
+markers in place so a hot swap rebuilds the range. Shared by every range mount
+(`fillRange`, `mountRange`, `fillBoundary`) so the one disposer contract lives in a
+single place.
 */
-export function disposeRange(
-    scoped: { stop: () => void; lexical: Scope },
-    start: Comment,
-    end: Comment,
-): () => void {
+export function disposeRange(scoped: { lexical: Scope }, start: Comment, end: Comment): () => void {
     return () => {
-        scoped.stop()
         scoped.lexical.dispose()
         clearBetween(start, end)
     }

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

@@ -29,11 +29,8 @@ export function hydrate(
     try {
         /* Same shared mount core as `mount` (see `withScope`) — a hydrated component owns a
            scope too, adopting the model its build adopts — run with the claim cursor active. */
-        const { stop, lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
-        return () => {
-            stop()
-            lexical.dispose()
-        }
+        const { lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
+        return () => lexical.dispose()
     } finally {
         RENDER.hydration = previous
     }

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

@@ -23,9 +23,8 @@ export function mount(
     /* Establish this component's lexical scope (nested, `awaiting` so it adopts the model
        doc the build's first `doc()` creates) and render pass, run the build under it, and
        restore the previous scope — the shared mount core (see `withScope`). */
-    const { stop, lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
+    const { lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
     return () => {
-        stop()
         lexical.dispose()
         host.textContent = ''
     }

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

@@ -11,23 +11,20 @@ under the current one in `awaiting` mode — so it adopts the model doc its firs
 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.
+`fillBefore`), which the lexical scope ADOPTS (`own`) so the scope has a single teardown:
+the caller wraps its own DOM teardown (clear host vs clear range) around one
+`lexical.dispose()`, no longer composing a separate `stop()` at every site.
 */
-export function withScope(
-    label: string | undefined,
-    build: () => () => void,
-): { stop: () => void; lexical: Scope } {
+export function withScope(label: string | undefined, build: () => () => 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()
+        lexical.own(build())
     } finally {
         exitRenderPass()
         CURRENT_SCOPE.current = parentScope
     }
-    return { stop, lexical }
+    return { lexical }
 }

package/src/lib/ui/effect.ts

@@ -10,9 +10,11 @@ dispose — and may be async (its teardown then runs once the promise settles, b
 only the reads before its first `await` are tracked). Returns a dispose that runs
 the final teardown and detaches it from the graph. This is abide's from-scratch
 effect primitive: the open-on-first-read / close-on-last-reader lifecycle,
-grounded in abide's own reactive core.
+grounded in abide's own reactive core. Authored as `scope().effect(...)` (the bare
+name is reserved); this module export stays for the generated binding code that
+calls it directly (and for the SSR strip), so it carries no standalone demo.
 */
-// @documentation effect
+// @documentation plumbing
 export function effect(fn: () => EffectResult): () => void {
     /* Re-runs fire after the build, so pin the scope this effect was created under
        (the dep-tracking observer is managed separately, so this can't disturb it). */

package/src/lib/ui/navigate.ts

@@ -1,3 +1,6 @@
+import { parseRouteSegments } from '../shared/parseRouteSegments.ts'
+import type { PageRoutes, PathParams } from '../shared/url.ts'
+import { url } from '../shared/url.ts'
 import { historyEntries } from './runtime/historyEntries.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
 
@@ -8,21 +11,19 @@ export type NavigateOptions = {
     keepScroll?: boolean
 }
 
-/* Navigates to `path`: writes a history entry (when available) and updates the
-   reactive route, which re-mounts the matching page via `router`. `replace` swaps
-   the current entry instead of pushing — used when honouring a server redirect, so
-   the blocked URL isn't left behind in history. Each entry carries a monotonic
-   `abideEntry` id so the router can bucket/restore its scroll offset across the page
-   teardown the rebuild does. A push leaves the current entry behind — its scroll is
-   bucketed so back restores it — and mints a fresh id. A replace destroys the current
-   entry and lands fresh content (a redirect), so its saved scroll no longer applies:
+/* Writes an ALREADY-RESOLVED path into history + the reactive route. The router uses this
+   for paths it built from a real URL (a clicked link, a popstate, a server redirect) — they
+   already carry the mount base, so they must NOT pass through `url()` again. Each entry
+   carries a monotonic `abideEntry` id so the router can bucket/restore its scroll offset
+   across the page teardown the rebuild does. A push leaves the current entry behind — its
+   scroll is bucketed so back restores it — and mints a fresh id. A replace destroys the
+   current entry and lands fresh content (a redirect), so its saved scroll no longer applies:
    the bucket is discarded and the id kept, so the new page restores to top/anchor.
    `keepScroll` opts the destination out of that reset — for an in-page URL swap (e.g.
-   selecting another episode on the same detail page) where a top jump is jarring: the
-   live offset is bucketed under the destination entry id, so the post-rebuild `restore`
-   reapplies it instead of scrolling to top. */
-// @documentation navigate
-export function navigate(
+   selecting another episode on the same detail page) where a top jump is jarring: the live
+   offset is bucketed under the destination entry id, so the post-rebuild `restore` reapplies
+   it instead of scrolling to top. */
+export function navigatePath(
     path: string,
     { replace = false, keepScroll = false }: NavigateOptions = {},
 ): void {
@@ -48,3 +49,29 @@ export function navigate(
     }
     runtimePath.value = path
 }
+
+/* Navigates to a typed in-app path: a route literal with `[name]` segments takes its params
+   first (`navigate('/p/[id]', { id })`), then options; a paramless or already-interpolated
+   path takes options directly (`navigate('/p', { replace })`). The path is built through
+   `url()` — base-correct, params interpolated — exactly as a link href would be, so a
+   dynamic `/p/${x}` falls through url()'s paramless branch and is base-prefixed too. */
+// @documentation navigate
+export function navigate<P extends keyof PageRoutes | (string & {})>(
+    path: P,
+    ...rest: keyof PathParams<P> extends never
+        ? [options?: NavigateOptions]
+        : [params: PathParams<P>, options?: NavigateOptions]
+): void {
+    /* A path declaring `[name]` segments takes params first, options second — mirroring
+       url()'s own arg discrimination; otherwise the first arg is options. */
+    const hasParams = parseRouteSegments(path).some((segment) => segment.kind === 'param')
+    const [first, second] = rest as [unknown, NavigateOptions?]
+    /* Params ride url()'s first vararg slot — a path with `[name]` segments interpolates
+       them, a paramless one ignores undefined and just base-prefixes. Widen `path` to
+       string so url() takes its plain-path overload; its runtime keys off the segments. */
+    const params = hasParams
+        ? (first as Record<string, string | number | boolean | undefined>)
+        : undefined
+    const options = (hasParams ? second : (first as NavigateOptions | undefined)) ?? {}
+    navigatePath(url(path as string, params), options)
+}

package/src/lib/ui/outbox.ts

@@ -1,115 +1,35 @@
-import { online as systemOnline } from '../shared/online.ts'
-import { effect } from './effect.ts'
-import { persist } from './persist.ts'
-import { createDoc as doc } from './runtime/createDoc.ts'
-import type { Outbox } from './types/Outbox.ts'
-import type { PersistenceStore } from './types/PersistenceStore.ts'
+import type { OutboxEntry } from '../shared/types/OutboxEntry.ts'
+import type { RemoteFunction } from '../shared/types/RemoteFunction.ts'
+import { outboxRegistry } from './rpcOutbox/outboxRegistry.ts'
 
-/* One queued mutation: a stable id plus the serializable payload to replay. */
-type OutboxEntry<T> = { id: string; payload: T }
+/* One entry in the global outbox, tagged with the RPC it belongs to. */
+export type GlobalOutboxEntry = OutboxEntry<unknown> & { rpc: RemoteFunction<unknown, unknown> }
+
+/* The global outbox: callable for the flat entry list, awaitable `retry()` to drain every
+   queue (resolves when every replay settles). */
+export type GlobalOutbox = (() => GlobalOutboxEntry[]) & { retry: () => Promise<void> }
+
+function list(): GlobalOutboxEntry[] {
+    return outboxRegistry.all().flatMap(({ rpc, queue }) =>
+        queue.entries().map((entry) => ({
+            ...entry,
+            rpc: rpc as RemoteFunction<unknown, unknown>,
+        })),
+    )
+}
 
 /*
-A durable, FIFO mutation queue for local-first writes. Built on `doc` + `persist`,
-so the queue IS a persisted document — it survives a reload with no extra
-machinery — and on the patch bus the same as everything else. `enqueue` appends a
-payload and tries to drain; the drain sends entries head-first while `online()`
-holds:
-  - success → dequeue and continue;
-  - rejected while now offline → keep the head, retry when connectivity returns
-    (the effect below re-drains on the online edge);
-  - rejected while still online → a real server/validation failure: drop the entry
-    so the queue can't wedge, and report it via `onDrop` so the caller can roll back
-    the optimistic change it applied (e.g. `history().undo()` or a `cache.patch`).
-Delivery is at-least-once (a crash between a successful send and its dequeue
-re-sends on reload), so `send` should be idempotent. Reconnect RESYNC of reads is
-`cache.on`'s job, not this. Client-intended: `send` performs a network mutation.
+The global, reactive view of every durable RPC's outbox — a flat list of undelivered
+entries across all `outbox` rpcs, each tagged with its `rpc`. Reactive: reading it in a
+template/effect subscribes to each registered queue, so it updates as writes park, drain,
+fail, or cancel. Use it for an app-wide "N unsynced" badge or a sync panel; cancel a
+pending write through `entry.controller.abort()`, retry one through `entry.retry()`, or
+drain everything through `outbox.retry()`. A single rpc's slice is `rpc.outbox`. Server-
+side there are no client queues, so it returns an empty list.
 */
 // @documentation ui
-export function outbox<T>({
-    key,
-    send,
-    store,
-    online = systemOnline,
-    onDrop,
-}: {
-    key: string
-    send: (payload: T) => Promise<void>
-    store?: PersistenceStore
-    online?: () => boolean
-    onDrop?: (payload: T, error: unknown) => void
-}): Outbox<T> {
-    const queue = doc({ items: [] as OutboxEntry<T>[] })
-    /* `debounce: 0` because the queue writes itself synchronously below — a queued
-       mutation must be durable the instant it's recorded, not after a debounce
-       window where a crash could lose it. */
-    const persistence = persist(queue, key, { store, debounce: 0 })
-    /* Drop the head and make the dequeue durable at once, so a reload never re-sends
-       an entry already acknowledged. */
-    const dequeue = (): void => {
-        queue.remove('items/0')
-        persistence.flush()
-    }
-
-    /* At most one drain runs at a time; `settled` lets a caller await the active one.
-       A drain re-reads the queue each step, so entries enqueued mid-drain are picked
-       up by the running loop. An empty drain finishes synchronously (it hits no
-       `await`), so `draining` is back to false before the next `enqueue` — there is no
-       resolved-but-still-flagged window for a new entry to fall into. */
-    let draining = false
-    let settled: Promise<void> = Promise.resolve()
-    const flush = (): Promise<void> => {
-        if (draining) {
-            return settled
-        }
-        draining = true
-        settled = (async () => {
-            try {
-                while (online()) {
-                    const { items } = queue.snapshot() as { items: OutboxEntry<T>[] }
-                    const head = items[0]
-                    if (head === undefined) {
-                        break
-                    }
-                    try {
-                        await send(head.payload)
-                    } catch (error) {
-                        /* Went offline mid-send → keep the head, retry on reconnect. */
-                        if (!online()) {
-                            break
-                        }
-                        /* Online but rejected → permanent: drop it, report for rollback. */
-                        dequeue()
-                        onDrop?.(head.payload, error)
-                        continue
-                    }
-                    dequeue()
-                }
-            } finally {
-                draining = false
-            }
-        })()
-        return settled
-    }
-
-    /* Re-drain whenever connectivity returns — reading `online()` subscribes this
-       effect, so the offline→online edge fires it. */
-    const stop = effect(() => {
-        if (online()) {
-            void flush()
-        }
-    })
-
-    return {
-        enqueue: (payload: T) => {
-            queue.add('items/-', { id: crypto.randomUUID(), payload })
-            persistence.flush() // durable before we attempt the network
-            void flush()
-        },
-        pending: () => (queue.read('items') as OutboxEntry<T>[]).map((entry) => entry.payload),
-        flush,
-        dispose: () => {
-            stop()
-            persistence.dispose()
-        },
-    }
-}
+export const outbox: GlobalOutbox = Object.assign(list, {
+    async retry(): Promise<void> {
+        await Promise.all(outboxRegistry.all().map(({ queue }) => queue.retry()))
+    },
+})

package/src/lib/ui/remoteProxy.ts

@@ -6,17 +6,34 @@ import { HttpError } from '../shared/HttpError.ts'
 import { OFFLINE_HEADER } from '../shared/OFFLINE_HEADER.ts'
 import { rpcTimeoutSlot } from '../shared/rpcTimeoutSlot.ts'
 import { trace } from '../shared/trace.ts'
-import type { HttpVerb } from '../shared/types/HttpVerb.ts'
+import type { HttpMethod } from '../shared/types/HttpMethod.ts'
+import type { Outbox } from '../shared/types/Outbox.ts'
 import type { RemoteFunction } from '../shared/types/RemoteFunction.ts'
 import type { RpcOptions } from '../shared/types/RpcOptions.ts'
+import { UNREACHABLE_STATUSES } from '../shared/UNREACHABLE_STATUSES.ts'
 import { withBase } from '../shared/withBase.ts'
+import { createOutboxQueue, type OutboxQueue } from './rpcOutbox/createOutboxQueue.ts'
+import { outboxRegistry } from './rpcOutbox/outboxRegistry.ts'
 import { currentAbortSignal } from './runtime/currentAbortSignal.ts'
 import { REQUEST_SUPERSEDED } from './runtime/REQUEST_SUPERSEDED.ts'
+import type { PersistenceStore } from './types/PersistenceStore.ts'
+
+/* The framework-reserved `HttpError.kind` for a request the durable outbox parked because
+   the server was unreachable — distinct from a handler-declared error name. Lets a caller
+   branch with `error instanceof HttpError && error.kind === 'queued'`. */
+const QUEUED = 'queued'
+
+/* A durable RPC's per-call options. `outbox: true` parks an unreachable call for replay;
+   `store` exists for testing — production uses the default persistence store. */
+export type DurableOptions = {
+    outbox?: boolean
+    store?: PersistenceStore
+}
 
 /*
-Client-side substitute for a verb-defined handler. The bundler emits one
-call per verb export inside an `$rpc/**` module (GET / POST / …): server
-target uses defineVerb (real handler), browser target uses remoteProxy
+Client-side substitute for a rpc-defined handler. The bundler emits one
+call per rpc export inside an `$rpc/**` module (GET / POST / …): server
+target uses defineRpc (real handler), browser target uses remoteProxy
 (fetch over the network). Both paths produce identical RemoteFunction
 shapes and identical WeakMap metadata so cache() works the same on either
 side.
@@ -25,13 +42,26 @@ side.
 the query string (GET/DELETE/HEAD). Plain `fn(args)` decodes the Response
 by Content-Type and throws HttpError on non-2xx; `.raw(args)` is the
 escape hatch that returns the Response untouched.
+
+A durable (`outbox: true`) rpc is still a normal RemoteFunction — it fetches and
+throws exactly the same. The differences: when the server can't be reached
+(a transport failure, or a 502/503/504/52x), the request is `park`ed onto the
+RPC's app-owned outbox as a SIDE-EFFECT and the throw is a `kind: 'queued'`
+HttpError; and once a backlog exists, a fresh call parks straight to the TAIL
+(no fetch) so writes can't land out of order. The parked write waits for
+`rpc.outbox.retry()` (or the global `outbox.retry()`) — there is no auto-drain;
+the app owns when to replay. `rpc.outbox()` exposes the queue.
 */
 // @documentation plumbing
 export function remoteProxy<Args, Return>(
-    method: HttpVerb,
+    method: HttpMethod,
     url: string,
+    durable?: DurableOptions,
 ): RemoteFunction<Args, Return> {
-    return createRemoteFunction<Args, Return>({
+    /* 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
+    const fn = createRemoteFunction<Args, Return>({
         method,
         url,
         clients: browserClientFlags,
@@ -49,12 +79,132 @@ export function remoteProxy<Args, Return>(
                 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.
+        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. On a durable rpc, an unreachable result parks a pristine CLONE and throws a
+        `queued`-tagged HttpError — `fetch` consumes the original (its body stream is read
+        and locked), so parking that same instance would leave the queue a request a resend
+        can't reconstruct and a capture can't read. The clone is parked, the original is
+        sent. The throw lets the caller branch on `error.kind === 'queued'` (parked, will
+        retry) vs. a real server rejection; `error.data` is the parked entry, so a caller
+        can `await (error.data as OutboxEntry).settled` for the eventual outcome.
         */
-        invoke: (_args, getRequest, opts) => fetchWithTimeout(getRequest(), opts),
+        invoke: (args, getRequest, opts) => {
+            if (queue === undefined) {
+                return fetchWithTimeout(getRequest(), opts)
+            }
+            /* A non-empty queue means an undelivered backlog: park this call at the TAIL
+               and throw, rather than let a live fetch leapfrog the older writes and land
+               out of order. `retry()` then flushes the whole queue FIFO. */
+            if (queue.size() > 0) {
+                return Promise.reject(
+                    queuedThrow(
+                        queue,
+                        args as Args,
+                        getRequest().clone(),
+                        unreachableResponse(),
+                        undefined,
+                    ),
+                )
+            }
+            const request = getRequest()
+            const parkable = request.clone()
+            return fetchWithTimeout(request, opts).then(
+                (response) => {
+                    if (UNREACHABLE_STATUSES.has(response.status)) {
+                        throw queuedThrow(
+                            queue,
+                            args as Args,
+                            parkable,
+                            response,
+                            new HttpError(response.clone()),
+                        )
+                    }
+                    return response
+                },
+                (error: unknown) => {
+                    if (shouldParkRejection(error)) {
+                        const response =
+                            error instanceof HttpError ? error.response : unreachableResponse()
+                        throw queuedThrow(queue, args as Args, parkable, response, error)
+                    }
+                    throw error
+                },
+            )
+        },
     })
+    if (durable?.outbox === true) {
+        queue = getOrCreateOutboxQueue<Args, Return>(url, fn, durable)
+        Object.assign(fn, { outbox: outboxFace(queue) })
+    }
+    return fn
+}
+
+/* The synthetic "unreachable" Response a park reuses when there is no real one — a
+   transport failure (fetch rejected) or a backlog park that never fetched. */
+function unreachableResponse(): Response {
+    return new Response('queued', { status: 503, statusText: 'Service Unavailable' })
+}
+
+/* Park the unreachable request (`cause` becomes the entry's parked reason, `entry.error`)
+   and return the `kind: 'queued'` HttpError to throw — its `.data` is the parked entry, so
+   a caller can `await (error.data as OutboxEntry).settled` for the eventual delivered
+   result or server refusal. */
+function queuedThrow<Args>(
+    queue: OutboxQueue<Args> | undefined,
+    args: Args,
+    request: Request,
+    response: Response,
+    cause: unknown,
+): HttpError {
+    const entry = queue?.park(args, request, cause)
+    return new HttpError(response, QUEUED, entry)
+}
+
+/* A fetch REJECTION (no Response) the durable rpc should park: a transport failure or
+   the synthesized client-timeout 504. NOT a caller/scope abort — that's a deliberate
+   cancel, not the server being unreachable. (HTTP error STATUSES never reject — `fetch`
+   resolves with them — so 4xx/500 are classified on the response, not here.) */
+function shouldParkRejection(error: unknown): boolean {
+    if (error === REQUEST_SUPERSEDED) {
+        return false
+    }
+    if (error instanceof DOMException && error.name === 'AbortError') {
+        return false
+    }
+    if (error instanceof HttpError) {
+        return UNREACHABLE_STATUSES.has(error.response.status)
+    }
+    return true
+}
+
+/* The single app-owned queue for a durable RPC url — created + registered on first use
+   so every call site (and the global `outbox()`) shares one queue. The send is a plain
+   `fetch`; createOutboxQueue rides the entry's abort signal on the resent Request and
+   keeps scope-abort + the client timeout out. */
+function getOrCreateOutboxQueue<Args, Return>(
+    url: string,
+    rpc: RemoteFunction<Args, Return>,
+    durable: DurableOptions,
+): OutboxQueue<Args> {
+    const existing = outboxRegistry.get(url)
+    if (existing !== undefined) {
+        return existing as OutboxQueue<Args>
+    }
+    const queue = createOutboxQueue<Args>({
+        url,
+        send: (request) => fetch(request),
+        store: durable.store,
+    })
+    outboxRegistry.register(url, queue as OutboxQueue<unknown>, rpc)
+    return queue
+}
+
+/* The `.outbox` face: callable for the live entries, `retry()` to drain on demand. */
+function outboxFace<Args>(queue: OutboxQueue<Args>): Outbox<Args> {
+    const face = (() => queue.entries()) as Outbox<Args>
+    face.retry = () => queue.retry()
+    return face
 }
 
 /*