@abide/abide 0.111.0 → 0.113.0

package/src/server/createApp.ts

@@ -7,6 +7,7 @@ import { existsSync } from 'node:fs' // bun exposes no sync existence check of i
 import { resolve } from 'node:path' // bun exposes no path helpers of its own
 import { FAILURE_STATUS_TEXT } from '#shared/FAILURE_STATUS_TEXT.ts'
 import { framingOf } from '#shared/framing.ts'
+import { IN_PROCESS_ORIGIN } from '#shared/IN_PROCESS_ORIGIN.ts'
 import { LONGEST_DELAY } from '#shared/LONGEST_DELAY.ts'
 import { namedLogger } from '#shared/log.ts'
 import { compose } from '#shared/Middleware.ts'
@@ -32,6 +33,7 @@ import { IDLE_TIMEOUT_SECONDS } from './IDLE_TIMEOUT_SECONDS.ts'
 import { installServer } from './installServer.ts'
 import { admitsMux, muxSocketOptions, upgraded } from './muxUpgrade.ts'
 import { plainAnswer } from './plainAnswer.ts'
+import { presumePrincipal } from './principal.ts'
 import { realOrAsGiven } from './realOrAsGiven.ts'
 import {
     type AnsweringApp,
@@ -60,7 +62,7 @@ export interface App {
     fetch(request: Request): Promise<Response>
     run<Result>(
         fn: () => Result | Promise<Result>,
-        options?: { request?: Request },
+        options?: { request?: Request; principal?: Record<string, unknown> },
     ): Promise<Result>
     listen(options?: {
         port?: number
@@ -289,11 +291,21 @@ export async function bootEntered(
     let stopping = false
     let bound: Bun.Server<unknown> | undefined
 
-    const run = async <Result>(
-        fn: () => Result | Promise<Result>,
-        options?: { request?: Request },
-    ): Promise<Result> =>
-        inReleasedScope(options?.request, async () => await fn(), answering)
+    const run: App['run'] = async (fn, options) => {
+        const claims = options?.principal
+        // 42.19 — a principal is a request's, so one given alone is given a request to be.
+        const request =
+            options?.request ??
+            (claims === undefined ? undefined : new Request(IN_PROCESS_ORIGIN))
+        return inReleasedScope(
+            request,
+            async () => {
+                if (claims !== undefined) presumePrincipal(claims)
+                return await fn()
+            },
+            answering,
+        )
+    }
 
     const fetch = async (given: Request): Promise<Response> => {
         if (stopping) return plainAnswer('the app is stopping', 503)

package/src/server/preload.ts

@@ -5,8 +5,13 @@
 // one place that runs first. The build is `createApp`'s own under `bun test` (42.16), so a test that
 // boots the app afterwards reuses it rather than building twice.
 
+import { addDerived } from './config.ts'
 import { appRoot, servedBuild } from './createApp.ts'
 
+// 38.120 — a sign-in seals under test where the app declared no secret: derived, so the app's
+// `onConfig` default and the env both still win (27.2), where an env value would beat the default.
+addDerived({ ABIDE_PRINCIPAL_SECRET: 'abide-test-principal-secret' })
+
 const root = appRoot(undefined)
 // A run from a directory that holds no app preloads nothing — nor from a workspace's root, whose
 // packages' `.abide` files are each their own app's rather than one app laid out across them.

package/src/server/principal.ts

@@ -195,6 +195,20 @@ function resolvePrincipal(): Promise<Principal> {
     return scope.principal
 }
 
+/**
+ * This request's principal, resolved from `claims` as a sealed cookie's are, with no cookie written.
+ *
+ * 42.19 — `App.run`'s `principal`, which is why it throws where `principal.set` does.
+ */
+export function presumePrincipal(claims: Record<string, unknown>): void {
+    const scope = within('App.run principal')
+    if (!isRecord(claims))
+        throw new Error(
+            'abide: App.run takes a principal of claims, as principal.set does. RULEBOOK 26.11.',
+        )
+    scope.principal = documentOf(claims, Date.now() + ttl())
+}
+
 /**
  * Signs this caller in with `claims`, sealing them into the cookie.
  *

package/src/server/render.ts

@@ -117,10 +117,10 @@ export async function composePage(
  * 39.4, 39.11 — THE DEEPEST CONTRIBUTOR WINS, and the markup is in tree order — the shell's head
  * (its outermost contributor), then each level's, outermost first — so the deepest is the last.
  * Written end to end instead, a shell's or a layout's `<title>` stands ahead of its page's and a
- * browser reads the first. The compiler merges within a file (39.12) and `applyHead` across a
+ * browser reads the first. The compiler merges within a file (39.12) and `reconcileHead` across a
  * navigation; this is the same grammar across the contributors of one render.
  *
- * TOP LEVEL OF THE HEAD ONLY, as `applyHead` keys the head's children and nothing inside them.
+ * TOP LEVEL OF THE HEAD ONLY, as `reconcileHead` keys the head's children and nothing inside them.
  * The attribute is the one WRITTEN rather than decoded — a shell's escaping and the compiler's
  * agree on every key a shell and a page would plausibly share.
  *

package/src/shared/ASCII_WHITESPACE.ts

@@ -0,0 +1,6 @@
+/**
+ * A run of ASCII whitespace, which is what a `class` value is split into tokens on — read by the
+ * compiler finding the classes a static `class` holds and by the runtime writing a `class={expr}`'s
+ * tokens (32.71), so both split one way.
+ */
+export const ASCII_WHITESPACE = /[\t\n\f\r ]+/

package/src/shared/FOREIGN_ATTRIBUTES.ts

@@ -0,0 +1,24 @@
+const XLINK = 'http://www.w3.org/1999/xlink'
+const XML = 'http://www.w3.org/XML/1998/namespace'
+const XMLNS = 'http://www.w3.org/2000/xmlns/'
+
+/**
+ * The attributes the HTML parser puts in a namespace on an SVG or MathML element — its "adjust
+ * foreign attributes" table — each to that namespace. Every other attribute it writes has none.
+ *
+ * A leaf, because the compiler reads it to know which built attribute needs the client's
+ * `addAttribute`, and the client reads it to write one.
+ */
+export const FOREIGN_ATTRIBUTES: ReadonlyMap<string, string> = new Map([
+    ['xlink:actuate', XLINK],
+    ['xlink:arcrole', XLINK],
+    ['xlink:href', XLINK],
+    ['xlink:role', XLINK],
+    ['xlink:show', XLINK],
+    ['xlink:title', XLINK],
+    ['xlink:type', XLINK],
+    ['xml:lang', XML],
+    ['xml:space', XML],
+    ['xmlns', XMLNS],
+    ['xmlns:xlink', XMLNS],
+])

package/src/shared/INTEGRATION_POINTS.ts

@@ -0,0 +1,20 @@
+/**
+ * The SVG and MathML elements whose children the HTML parser reads as HTML again — the
+ * integration points — less `annotation-xml`, which is one only by the encoding it declares.
+ *
+ * A leaf, because the client's parse and build read it (`namespaceUnder`) and the compiler reads
+ * it to know a built element below one is HTML's, whatever its parent's namespace.
+ */
+export const INTEGRATION_POINTS: ReadonlySet<string> = new Set([
+    'foreignObject',
+    'desc',
+    'title',
+    'mi',
+    'mo',
+    'mn',
+    'ms',
+    'mtext',
+])
+
+/** HTML's namespace: what the parser gives an element outside SVG and MathML, and below an integration point. */
+export const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml'

package/src/shared/IN_PROCESS_ORIGIN.ts

@@ -0,0 +1,5 @@
+// The origin a request made in process is addressed to, where no listener names a real one: an
+// rpc's `raw` answered by the app this process holds, a CLI command asking the app it booted, and
+// an `App.run` given a principal and no request (42.19). A leaf, because the server and the shared
+// rpc both build one.
+export const IN_PROCESS_ORIGIN = 'http://app.internal'

package/src/shared/reactive/Keyed.ts

@@ -34,6 +34,7 @@ import {
     refuseBothCaps,
     signalMoved,
     startDeferred,
+    unwatchStore,
 } from './Reactive.ts'
 import {
     detach,
@@ -46,6 +47,7 @@ import {
     type Tracked,
     trackProbe,
 } from './tracking.ts'
+import { owned, owning } from './watch.ts'
 
 /**
  * The keyed face: one `Reactive` per `Args` key, plus the probes and triggers over its entries.
@@ -262,27 +264,22 @@ class StartWindow {
 }
 
 /**
- * `body` behind the `args` gate: validate, then run the body with what the gate accepted.
- *
- * 11.27's LAST TWO STEPS as one body. The gate runs on every run of the entry — a refresh
- * re-validates — and throws the refusal, which is what a body failing already does: the entry's
- * `error` holds it and its read throws it (2.2), and the body the gate stands in front of is never
- * called. What it accepts is what the body is handed (11.68).
+ * `body` handed what the `args` gate accepted for one entry (11.68), rather than the args it was
+ * reached with.
  *
  * A STREAM STAYS A STREAM FROM CONSTRUCTION. 9.6 reads the body's KIND, so the wrapper around an
  * async generator is an async generator, or a gated keyed stream would be one only from its first
  * run.
  */
-function gated<Args>(
+function handed<Args>(
     body: (args: Args) => unknown,
-    gate: Schema<Args>,
+    accepted: Args,
 ): (args: Args) => unknown {
-    const check = (args: Args): Args => checkArgs(gate, args)
     if (isStreamBody(body))
-        return async function* (args: Args) {
-            yield* (body as (args: Args) => AsyncIterable<unknown>)(check(args))
+        return async function* () {
+            yield* (body as (args: Args) => AsyncIterable<unknown>)(accepted)
         }
-    return (args: Args): unknown => body(check(args))
+    return (): unknown => body(accepted)
 }
 
 /**
@@ -348,7 +345,7 @@ export function createKeyed<
                   (throttle ?? debounce) as number,
               )
     const lifetime = ttl === undefined ? null : new Lifetime(ttl)
-    const entryBody = heldOnce(gate === undefined ? body : gated(body, gate))
+    const entryBody = heldOnce(body)
     // 11.27, 11.29 — the defaults are applied before the key is taken, so the entry is one for a
     // call that wrote them and one that left them to the parameter. Read once, here: a body with
     // none pays a `null` test per reach.
@@ -358,6 +355,12 @@ export function createKeyed<
     // there were, so the key that starts loading next — search-as-you-type — never woke it. One
     // signal per `Keyed`, moved where an entry is reached and where one is released.
     const membership = newTracked()
+    // 8.21 — A `Keyed` BUILT IN A SETUP OR A REQUEST ends with it, and every store its entries
+    // watch is stopped then: the entries are the cache's, so no owner of their own stops them.
+    if (options?.store !== undefined && owning())
+        owned(() => {
+            for (const entry of entries.values()) unwatchStore(entry)
+        })
 
     function askMembership(): void {
         const reader = TRACKING.reader
@@ -372,6 +375,7 @@ export function createKeyed<
     ): void {
         entries.delete(key)
         leaveSelections(created)
+        unwatchStore(created)
         signalMoved(membership)
     }
 
@@ -385,9 +389,32 @@ export function createKeyed<
             if (failedTransiently(standing)) standing.refresh()
             return standing
         }
+        // 11.27's VALIDATE, ONCE PER ENTRY AND BEFORE IT IS FILED: a refused `Args` is answered by a
+        // value holding the refusal (2.2) that no map keeps, so args nobody should have sent never
+        // take a place among the entries — on a `global` value, a place nothing but `invalidate`
+        // would take back (11.35). Built with none of the options: a `store` would restore a value
+        // over the refusal and watch for an entry nothing releases.
+        let run: (args: Args) => unknown = entryBody
+        if (gate !== undefined) {
+            let accepted: Args
+            try {
+                accepted = checkArgs(gate, args)
+            } catch (refusal) {
+                return createReactive<Stored, Accepted, Failures>(
+                    `${label}(${key})`,
+                    () => {
+                        throw refusal
+                    },
+                    args,
+                    undefined,
+                    undefined,
+                )
+            }
+            run = handed(entryBody, accepted)
+        }
         const created = createReactive<Stored, Accepted, Failures>(
             `${label}(${key})`,
-            entryBody as (args: unknown) => unknown,
+            run as (args: unknown) => unknown,
             args,
             undefined,
             entryOptions as ReactiveOptions<Accepted, Stored, Failures>,

package/src/shared/reactive/Reactive.ts

@@ -75,6 +75,7 @@ export type Transformer<Accepted, Stored, Failures = never> = (
 export type Store<Stored> = {
     get: () => Stored | undefined | Promise<Stored | undefined>
     set: (value: Stored, retention: { ttl: number }) => void | Promise<void>
+    watch?: (changed: () => void) => () => void
 }
 
 /**
@@ -366,6 +367,8 @@ type Persisted = {
      * what `pending` sends next, and what 8.18 serves a re-read in place of calling `get`.
      */
     unconfirmed: unknown
+    /** What stops the store's `watch`, where it has one (8.21). */
+    unwatch: (() => void) | null
 }
 
 /**
@@ -891,6 +894,7 @@ class Cell {
                       writing: false,
                       pending: false,
                       unconfirmed: undefined,
+                      unwatch: null,
                   }
         this.by = (options?.by ?? null) as
             | string
@@ -3801,6 +3805,32 @@ function rereadStore(cell: Cell, persisted: Persisted): void {
     )
 }
 
+/**
+ * Follows what the store says changed outside this process, re-reading it each time.
+ *
+ * 8.20 — A RE-READ, NEVER THE BODY: an edit made where the value lives is the store's news, so it
+ * is read back as a refresh of a value whose only producer is its store would read it, and 8.18
+ * still has a write the app made stand over it. 8.21 — stopped with the value: by its owner here,
+ * and by its `Keyed` through `unwatchStore` where an entry is evicted.
+ */
+function watchStore(cell: Cell, persisted: Persisted, cached: boolean): void {
+    const watch = persisted.store.watch
+    if (watch === undefined) return
+    persisted.unwatch = watch(() => {
+        rereadStore(cell, persisted)
+    })
+    if (!cached && owning()) owned(() => unwatchStore(cell.callable))
+}
+
+/** Stops the store's `watch` on `value`, once (8.21). */
+export function unwatchStore(value: unknown): void {
+    const persisted = (value as Callable)[CELL].store
+    if (persisted === null || persisted.unwatch === null) return
+    const unwatch = persisted.unwatch
+    persisted.unwatch = null
+    unwatch()
+}
+
 /**
  * Lands a store re-read, letting an unconfirmed write win.
  *
@@ -4693,8 +4723,10 @@ export function createReactive<
     // (2.2, 4.14) rather than serving an `undefined` its own type says is a `Stored`.
     // 8.3 AND 8.14: a store answers first, where the value is constructed, and whatever it misses
     // falls back to what the value would have done without one.
-    if (cell.store !== null) restoreFirst(cell, cell.store, initial)
-    else if (body === null) {
+    if (cell.store !== null) {
+        restoreFirst(cell, cell.store, initial)
+        watchStore(cell, cell.store, cached)
+    } else if (body === null) {
         if (initial === undefined) landOpening(cell)
         else if (initial !== NO_INITIAL) open(cell, initial)
     } else if (deferred) cell.loading = true

package/src/shared/rpc.ts

@@ -16,6 +16,7 @@
 import { type Failed, isFailedNamed } from './Failed.ts'
 import { GLOBAL_GETS } from './GLOBAL_GETS.ts'
 import { HandlerRoute } from './HandlerRoute.ts'
+import { IN_PROCESS_ORIGIN } from './IN_PROCESS_ORIGIN.ts'
 import { compose, type Middleware } from './Middleware.ts'
 import { principalRotated } from './principalRotated.ts'
 import { RPC_SERVER } from './RPC_SERVER.ts'
@@ -442,7 +443,7 @@ export function declare(method: Method): Declare {
                 if (RPC_SERVER.raw !== null)
                     return RPC_SERVER.raw(
                         new Request(
-                            new URL(asked.url, 'http://app.internal'),
+                            new URL(asked.url, IN_PROCESS_ORIGIN),
                             given,
                         ),
                     )

package/src/ui/Level.ts

@@ -6,7 +6,7 @@ import {
 } from '#shared/reactive/share.ts'
 import { untracked } from '#shared/reactive/tracking.ts'
 import { type Disposer, watchTracked } from '#shared/reactive/watch.ts'
-import { applyHead, withdrawHead } from './applyHead.ts'
+import { reconciled, reconcileHead } from './reconcileHead.ts'
 import { isEmptyRegion, type Region } from './regions.ts'
 import type { Scope } from './Scope.ts'
 
@@ -43,10 +43,10 @@ export class Level {
      */
     share: ShareScope | null = null
     /**
-     * The head the components built on the client contributed while this level mounts, applied
-     * once its `mount` returns; `undefined` outside one, where a contribution applies at once.
+     * Whether a component built on the client contributed a head while this level mounts, which is
+     * reconciled once its `mount` returns; `undefined` outside one, where it is reconciled at once.
      */
-    unapplied: string | undefined = undefined
+    unapplied: boolean | undefined = undefined
     /**
      * This level's own head markup as it reads now; `undefined` for a level with no `<head>`.
      *
@@ -82,11 +82,31 @@ export class Level {
         this.share = share
     }
 
-    /** The level's head as it reads now: its own, then every component's, deepest last (39.4). */
-    headMarkup(): string {
-        let markup = this.head?.() ?? ''
-        for (const one of this.contributed) markup += one.head()
-        return markup
+    /** Reconciles the document head from the chain this level stands in (`reconcileHead`). */
+    reconcile(): void {
+        Level.reconcile(this.levels)
+    }
+
+    /**
+     * Reconciles the document head from `levels`: each level's own head, then every component's in
+     * the order they mounted, outermost first — so the deepest wins by key (39.4). Read untracked:
+     * a head read here is followed by its own watch, not by whatever wrote.
+     */
+    static reconcile(levels: Level[]): void {
+        reconcileHead(untracked(Level.chain, levels, undefined))
+    }
+
+    /** Every contributor in `levels` and the head it reads now, outermost first. */
+    static chain(
+        levels: Level[],
+        _?: undefined,
+    ): [who: object, text: string][] {
+        const chain: [object, string][] = []
+        for (const level of levels) {
+            if (level.head !== undefined) chain.push([level, level.head()])
+            for (const one of level.contributed) chain.push([one, one.head()])
+        }
+        return chain
     }
 
     /**
@@ -100,78 +120,18 @@ export class Level {
         const contribution = new HeadContribution(this, head)
         this.contributed.add(contribution)
         contribution.dispose = watchTracked(() => contribution.follow())
-        // Batched while this level mounts; applied at once by an arm or a row mounted after it,
-        // under whatever is deeper (39.4) — only the levels below, since it was added last here.
-        const text = contribution.last ?? ''
+        // Batched while this level mounts; reconciled at once for an arm or a row mounted after it.
         if (isEmptyRegion(region))
-            if (this.unapplied !== undefined) this.unapplied += text
-            else
-                applyHead(
-                    text,
-                    untracked(Level.headsOf, this.levels, this.at + 1),
-                )
+            if (this.unapplied !== undefined) this.unapplied = true
+            else this.reconcile()
         return contribution
     }
 
-    /**
-     * Writes `text` over the `last` that `contributor` in this level wrote.
-     *
-     * 39.4 — IT YIELDS TO EVERY CONTRIBUTOR DEEPER, read as they stand at the write and untracked:
-     * the components that contributed after it, then every level below, so a layout's
-     * `<title>{site}</title>` moving does not write over the page's `<title>`, and the page's head
-     * moving wakes only the page's own watch. 39.15 — its keyless nodes replace the ones it wrote.
-     */
-    reapply(text: string, last: string, contributor: HeadContribution): void {
-        applyHead(
-            text,
-            untracked(Level.headsAfter, this, contributor),
-            last,
-            // Read only where a key `last` held is withdrawn.
-            () => untracked(Level.headsBefore, this, contributor),
-        )
-    }
-
-    /**
-     * The heads either side of `contribution` in `level` (`headsBefore`, `headsAfter`). One `level`
-     * does not hold is the level's own head (`followHead`), which stands before every component's.
-     */
-    static headsAround(
-        level: Level,
-        contribution: HeadContribution,
-    ): [string, string] {
-        return [
-            Level.headsBefore(level, contribution),
-            Level.headsAfter(level, contribution),
-        ]
-    }
-
-    /** Every level above `level`, then what stands before `contribution` in it. */
-    static headsBefore(level: Level, contribution: HeadContribution): string {
-        let outer = Level.headsOf(level.levels, 0, level.at)
-        if (!level.contributed.has(contribution)) return outer
-        outer += level.head?.() ?? ''
-        for (const one of level.contributed) {
-            if (one === contribution) break
-            outer += one.head()
-        }
-        return outer
-    }
-
-    /** What stands after `contribution` in `level`, then every level below it. */
-    static headsAfter(level: Level, contribution: HeadContribution): string {
-        let inner = ''
-        let past = !level.contributed.has(contribution)
-        for (const one of level.contributed)
-            if (past) inner += one.head()
-            else if (one === contribution) past = true
-        return inner + Level.headsOf(level.levels, level.at + 1)
-    }
-
     /**
      * 39.13 — A HEAD THAT READS A VALUE FOLLOWS IT for as long as the level is mounted, which is
      * `scope`'s life. The first run only subscribes: the head it would write is already there,
      * written by the server or applied by the level's mount ahead of its fill (39.6). Followed as a
-     * component's is, by a contribution the level does not hold (`headsAround`).
+     * component's is, by a contribution the level does not hold.
      */
     followHead(scope: Scope): void {
         const own = new HeadContribution(this, this.head as () => string)
@@ -190,8 +150,8 @@ export class Level {
             values: new Map(),
             level: this,
         })
-        this.unapplied = ''
-        let unapplied: string
+        this.unapplied = false
+        let unapplied: boolean
         let result: Result
         try {
             result = run()
@@ -200,20 +160,9 @@ export class Level {
             this.unapplied = undefined
             leaveShare(back)
         }
-        // 39.4 — under whatever a level below wrote while this one was mounting: the page in a
-        // layout's `<slot/>` applied its own head ahead of the components that layout holds.
-        if (unapplied !== '')
-            applyHead(unapplied, Level.headsOf(this.levels, this.at + 1))
+        if (unapplied) this.reconcile()
         return result
     }
-
-    /** The heads of `levels` from `from` to `to`, outermost first. */
-    static headsOf(levels: Level[], from: number, to = levels.length): string {
-        let markup = ''
-        for (let at = from; at < to; at += 1)
-            markup += (levels[at] as Level).headMarkup()
-        return markup
-    }
 }
 
 /**
@@ -236,24 +185,23 @@ export class HeadContribution {
     follow(): void {
         const text = this.head()
         const last = this.last
-        if (last !== undefined && text !== last)
-            this.level.reapply(text, last, this)
         this.last = text
+        if (last !== undefined && text !== last) this.level.reconcile()
     }
 
     /**
-     * 39.14 — WITHDRAWN AS A LEAVING LEVEL'S IS, its keys going back to what stands outside it and
-     * staying where something deeper holds them. Nothing where the level is leaving too: the router
-     * withdraws the whole level once, and cleared its contributions before stopping it.
+     * 39.14 — WITHDRAWN AS A LEAVING LEVEL'S IS: the chain is reconciled without it. Adopted first
+     * where the server painted it and nothing has reconciled since, so what it painted is known to
+     * be its own. Nothing where the level is leaving too: the router reconciles the whole chain
+     * once, and cleared its contributions before stopping it.
      */
     stop(): void {
         this.dispose?.()
         const level = this.level
         if (!level.contributed.has(this)) return
-        withdrawHead(this.last ?? '', () =>
-            untracked(Level.headsAround, level, this),
-        )
+        if (!reconciled(this)) level.reconcile()
         level.contributed.delete(this)
+        level.reconcile()
     }
 }
 

package/src/ui/Router.ts

@@ -10,7 +10,6 @@ import { arrive, route } from '#shared/route.ts'
 import { rankRoutes, type Segment } from '#shared/routePattern.ts'
 import { setUpLevels } from '#shared/setUpLevels.ts'
 import { paintedCallsLanded } from '#shared/takeEarlyCall.ts'
-import { withdrawHead } from './applyHead.ts'
 import { LAYER_MOUNT, LAYER_NAVIGATE } from './LAYER_NAMES.ts'
 import { Level } from './Level.ts'
 import { beginLayer, endLayer } from './measureLayer.ts'
@@ -469,12 +468,9 @@ export class Router {
             // table written by hand may answer with a fresh record each call. The function a module
             // exports is the same function either way.
             const shared = this.sharedLevels(arriving)
-            // READ BEFORE THE STOP, while the leaving levels' heads read what they read on screen.
-            const leaving = Level.headsOf(
-                this.levels,
-                shared,
-                this.levels.length,
-            )
+            // RECONCILED BEFORE THE STOP, while the leaving levels' heads read what they read on
+            // screen: what the server painted for them is adopted as theirs, so it leaves with them.
+            Level.reconcile(this.levels)
             const left: Scroll = [scrollX, scrollY]
             this.stopFrom(shared)
             // The region the arriving part goes into: the page region where nothing is kept, and
@@ -495,11 +491,8 @@ export class Router {
             // outermost first; a kept layout is not mounted again, so neither is its head.
             this.mountChain(target, found, arriving, shared, into)
             // 39.14 — what the leaving levels keyed and the arriving ones did not goes back to the
-            // nearest kept layout's, else leaves.
-            withdrawHead(leaving, () => [
-                Level.headsOf(this.levels, 0, shared),
-                Level.headsOf(this.levels, shared, this.levels.length),
-            ])
+            // nearest kept layout's, else leaves; their keyless nodes leave with them (39.16).
+            Level.reconcile(this.levels)
             // 30.29 — where the entry was left, on a history step; else the top of the page, or —
             // as the browser does on a load — the fragment's element.
             if (step.scroll !== undefined)
@@ -542,11 +535,13 @@ export class Router {
     private stopFrom(at: number): void {
         for (let index = this.levels.length - 1; index >= at; index -= 1) {
             const level = this.levels[index] as Level
+            // OUT OF THE CHAIN BEFORE IT STOPS, so a slot stop it fires on the way finds it gone
+            // (`release`) and leaves the head to whoever stopped it.
+            this.levels.length = index
             // The level's head leaves whole, so none of its components withdraws its own.
             level.contributed.clear()
             level.scope?.stop()
         }
-        this.levels.length = at
     }
 
     /**
@@ -629,7 +624,11 @@ export class Router {
     private release(level: Level, at: number): void {
         if (this.levels[at] !== level) return
         level.slot = undefined
+        // 39.14, 39.16 — THE LEVELS BELOW LEAVE WITH THE SLOT'S REGION, and their head with them:
+        // reconciled first, so what the server painted for them is adopted as theirs.
+        Level.reconcile(this.levels)
         this.stopFrom(at + 1)
+        Level.reconcile(this.levels)
     }
 
     /**