@abide/abide 0.43.1 → 0.44.1

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

@@ -1,24 +1,16 @@
-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 { fillBefore } from './fillBefore.ts'
-import { openMarker } from './openMarker.ts'
-import { replaceRange } from './replaceRange.ts'
+import { mountSwappableRange } from './mountSwappableRange.ts'
 import type { SwitchCase } from './types/SwitchCase.ts'
 
 /*
-Multi-branch binding — the runtime for `<template switch>`. An effect evaluates the
+Multi-branch binding — the runtime for `{#switch}` blocks and for `{#if}` chains that
+include `{:elseif}` branches (compiled as a switch over `true` with Boolean-coerced
+match thunks so the first truthy branch wins). A swappable range evaluates the
 subject, picks the first case whose `match` equals it (strict `===`), falling back
 to the default (`match` undefined); the chosen case's content lives in a RANGE
 bounded by two comment markers, so a case holds any content. Staying on the same
 case across a subject change leaves it mounted; switching clears the range and
-builds the new case fresh.
-
-On hydrate it adopts the case the server rendered: claim the start marker, run the
-matching case in place, claim the end marker. The effect's first run picks the same
-case and is a no-op; later changes swap the range.
+builds the new case fresh. See `mountSwappableRange` for the shared
+hydrate/swap/teardown semantics — the case index is the swap key.
 */
 // @documentation plumbing
 export function switchBlock(
@@ -27,59 +19,21 @@ export function switchBlock(
     cases: SwitchCase[],
     before: Node | null = null,
 ): 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 replaceRange. */
-    const group = scopeGroup()
-    let dispose: (() => void) | undefined
-    let activeIndex: number
-    let end: Comment
-
+    /* Pick the first case matching the subject (`===`), else the default (`match`
+       undefined), else -1 for no match. */
     const select = (value: unknown): number => {
         const matched = cases.findIndex(
             (entry) => entry.match !== undefined && entry.match() === value,
         )
         return matched === -1 ? cases.findIndex((entry) => entry.match === undefined) : matched
     }
-    const caseAt = (index: number): SwitchCase | undefined =>
-        index === -1 ? undefined : cases[index]
-    /* The chosen case builds through `scope` (directly on hydrate, via `fillBefore` on a
-       swap), which builds untracked — so a raw reactive read in the case content doesn't
-       subscribe the swap effect below; only `subject()` (and each case's `match()`) drives
-       the swap. The case's own interpolations still track, each through its own effect. */
-
-    /* `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, 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, RANGE_CLOSE)
-    } else {
-        end = openMarker(parent, RANGE_CLOSE, before)
-        activeIndex = select(subject())
-        const chosen = caseAt(activeIndex)
-        if (chosen !== undefined) {
-            dispose = group.track(fillBefore(end, (p) => chosen.render(p)))
-        }
-    }
-
-    effect(() => {
-        const index = select(subject())
-        if (index === activeIndex) {
-            return
-        }
-        activeIndex = index
-        const chosen = caseAt(index)
-        /* 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
-    })
+    mountSwappableRange(
+        parent,
+        () => select(subject()),
+        (index) => {
+            const chosen = index === -1 ? undefined : cases[index]
+            return chosen && ((p) => chosen.render(p))
+        },
+        before,
+    )
 }

package/src/lib/ui/dom/types/EachRow.ts

@@ -14,4 +14,8 @@ export type EachRow = {
     cell: State<unknown>
     indexCell: State<number>
     pending?: DocumentFragment
+    /* The id of the last reconcile pass that saw this row's key in the source. A row
+       whose `gen` lags the current pass departed and is pruned — an int compare that
+       replaces a per-reconcile `Set` of present keys. */
+    gen?: number
 }

package/src/lib/ui/dom/types/SkeletonHoles.ts

@@ -1,7 +1,9 @@
 /* The holes a realized `skeleton` exposes for the build's attach code to wire up:
    `el` the element holes (attribute/listener/bind nodes) in pre-order, `an` the anchor
-   holes (reactive text, control flow, components) in document order. Two arrays so the
-   compiler and SSR only agree on traversal order, never on synchronized indices. */
+   holes (reactive text, control flow, components) in document order. Two arrays because
+   the element and anchor walks follow different traversal rules (`walkElementOrder` vs
+   `walkAnchorOrder`), so their indices are independent series — el[N] and an[N] are
+   unrelated holes, each numbered from 0 by its own walk. */
 export type SkeletonHoles = {
     el: Element[]
     an: Node[]

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

@@ -1,24 +1,13 @@
-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 { fillBefore } from './fillBefore.ts'
-import { openMarker } from './openMarker.ts'
-import { replaceRange } from './replaceRange.ts'
+import { mountSwappableRange } from './mountSwappableRange.ts'
 
 /*
 Conditional binding — the runtime for `<template if>` (with optional `else`). The
 branch's content lives in a RANGE bounded by two comment markers, so a branch may
 hold anything — elements, components, text, nested control-flow, snippets — not
-just element roots. An effect tracks `condition()` and swaps the range's content
-on a truthy↔falsy flip (`render` truthy, `renderElse` falsy); an unchanged
-condition is a no-op.
-
-On hydrate it adopts the server-rendered range: claim the start marker, run the
-matching render in place (its content claims the existing nodes), then claim the
-end marker. The effect's first run sees the same branch and is a no-op; later
-toggles clear the range and build fresh into a fragment.
+just element roots. A 2-case swappable range tracks `condition()` and swaps the
+range's content on a truthy↔falsy flip (`render` truthy, `renderElse` falsy); an
+unchanged condition is a no-op. See `mountSwappableRange` for the shared
+hydrate/swap/teardown semantics.
 */
 // @documentation plumbing
 export function when(
@@ -28,52 +17,10 @@ export function when(
     renderElse?: (parent: Node) => void,
     before: Node | null = null,
 ): void {
-    const hydration = RENDER.hydration
-    /* The chosen branch builds through `scope` (directly on hydrate, via `fillBefore`
-       on a swap), which builds untracked — so a raw reactive read in the branch content
-       doesn't subscribe the swap effect below; only `condition()` drives the toggle. The
-       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 replaceRange. */
-    const group = scopeGroup()
-    let dispose: (() => void) | undefined
-    let activeBranch: 'then' | 'else'
-    let end: Comment
-
-    /* `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, 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, RANGE_CLOSE)
-    } else {
-        end = openMarker(parent, RANGE_CLOSE, before)
-        activeBranch = condition() ? 'then' : 'else'
-        const chosen = chosenFor(activeBranch)
-        if (chosen !== undefined) {
-            dispose = group.track(fillBefore(end, chosen))
-        }
-    }
-
-    effect(() => {
-        const branch = condition() ? 'then' : 'else'
-        if (branch === activeBranch) {
-            return
-        }
-        activeBranch = branch
-        const chosen = chosenFor(branch)
-        /* 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
-    })
+    mountSwappableRange(
+        parent,
+        () => (condition() ? 'then' : 'else'),
+        (branch) => (branch === 'then' ? render : renderElse),
+        before,
+    )
 }

package/src/lib/ui/history.ts

@@ -21,8 +21,7 @@ export function history(doc: Doc, { limit = 100 }: { limit?: number } = {}): His
        — held by an in-progress transaction and by an undo/redo replay. */
     let sink: Patch[] | undefined
 
-    /* Push one finished entry, evicting the oldest past `limit`; a fresh edit (no
-       sink) also invalidates the redo stack. */
+    /* Push one finished entry, evicting the oldest past `limit`. */
     const push = (stack: Patch[][], entry: Patch[]): void => {
         stack.push(entry)
         if (stack.length > limit) {

package/src/lib/ui/html.ts

@@ -0,0 +1,28 @@
+import { RAW_HTML, type RawHtml } from '../shared/html.ts'
+
+/*
+Marks a string as trusted raw HTML so a `{expr}` interpolation inserts its nodes
+instead of escaped text — the abide idiom for raw markup (no `{@html}` mustache).
+Works two ways:
+
+  html(trustedString)        // plain call — insert the string verbatim
+  html`<b>${name}</b>`       // tagged — concatenate parts verbatim
+
+Calling `html` is the explicit opt-in to raw insertion; plain `{value}` always
+escapes. The tag does NOT auto-escape interpolations (it's raw by intent), so only
+build markup from values you trust, or escape them yourself. Imported by the author
+(`import { html } from 'abide/ui/html'`) — it is UI-authoring vocabulary, only ever
+written inside a template, so it lives in `ui/` (the reader, `rawHtmlString`, is the
+isomorphic plumbing and stays in `shared/`).
+*/
+// @documentation templating
+export function html(strings: TemplateStringsArray | string, ...values: unknown[]): RawHtml {
+    if (typeof strings === 'string') {
+        return { [RAW_HTML]: strings }
+    }
+    let markup = strings[0] ?? ''
+    for (let index = 0; index < values.length; index += 1) {
+        markup += String(values[index]) + (strings[index + 1] ?? '')
+    }
+    return { [RAW_HTML]: markup }
+}

package/src/lib/ui/installHotBridge.ts

@@ -1,4 +1,3 @@
-import { html } from '../shared/html.ts'
 import { snippet } from '../shared/snippet.ts'
 import { anchorCursor } from './dom/anchorCursor.ts'
 import { appendSnippet } from './dom/appendSnippet.ts'
@@ -49,7 +48,6 @@ dev (the live-reload script sets `window.__abideDev`).
 */
 export function installHotBridge(): void {
     ;(globalThis as { __abide?: Record<string, unknown> }).__abide = {
-        html,
         snippet,
         scope,
         enterScope,

package/src/lib/ui/renderChain.ts

@@ -1,7 +1,9 @@
+import { CHILD_PRESENT } from './runtime/CHILD_PRESENT.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'
+import type { UiProps } from './runtime/types/UiProps.ts'
 
 const OPEN = `<!--${OUTLET_OPEN}-->`
 const CLOSE = `<!--${OUTLET_CLOSE}-->`
@@ -31,8 +33,19 @@ export async function renderChain(
 ): Promise<SsrRender> {
     const ctx: RenderContext = { next: 0 }
     const renders: SsrRender[] = []
-    for (const view of views) {
-        renders.push(await view.render(params, ctx))
+    /* Route params as thunks (static server-side — only shape parity with the client so
+       `props()` reads `$props["id"]?.()` resolve). A layout (every view but the last) also
+       gets `$children` set to `CHILD_PRESENT` so SSR renders `{#if children}` the same way
+       the client does, keeping hydration congruent. */
+    const paramThunks: UiProps = {}
+    for (const key of Object.keys(params)) {
+        paramThunks[key] = () => params[key]
+    }
+    for (let index = 0; index < views.length; index += 1) {
+        const view = views[index] as UiComponent
+        const hasChild = index < views.length - 1
+        const props: UiProps = hasChild ? { ...paramThunks, $children: CHILD_PRESENT } : paramThunks
+        renders.push(await view.render(props, ctx))
     }
     let html = renders[renders.length - 1]?.html ?? ''
     for (let index = renders.length - 2; index >= 0; index -= 1) {
@@ -42,7 +55,7 @@ export async function renderChain(
            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')
+            throw new Error('[abide] a layout.abide must contain exactly one {children()} outlet')
         }
         /* Fold the child between the outlet markers (function replacement so `$&`/`$\``
            in the child html insert literally). */

package/src/lib/ui/router.ts

@@ -4,6 +4,7 @@ import { outlet } from './dom/outlet.ts'
 import { effect } from './effect.ts'
 import { matchRoute } from './matchRoute.ts'
 import { navigatePath } from './navigate.ts'
+import { CHILD_PRESENT } from './runtime/CHILD_PRESENT.ts'
 import { clientPage } from './runtime/clientPage.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
@@ -15,6 +16,7 @@ import type { AbideHistoryState } from './runtime/types/AbideHistoryState.ts'
 import type { NavVerdict } from './runtime/types/NavVerdict.ts'
 import type { Route } from './runtime/types/Route.ts'
 import type { RouteLoader } from './runtime/types/RouteLoader.ts'
+import type { UiProps } from './runtime/types/UiProps.ts'
 import { untrack } from './runtime/untrack.ts'
 
 /* An outlet boundary — the `<!--abide:outlet-->`…`<!--/abide:outlet-->` marker pair a
@@ -192,6 +194,23 @@ export function router(
                 outlet(host)
                 rootBoundary = PENDING_OUTLET.current as Boundary
             }
+            /* Route params as reactive thunks: reading `clientPage.value.params` inside the
+               thunk tracks the page signal, so an in-place same-route hop (params change, the
+               page stays mounted) re-runs each `props()` derive. The key set is stable across
+               same-route hops, so the bag need not rebuild. A layout also gets `$children`
+               set to `CHILD_PRESENT` when a child layer exists below it, read by
+               `{#if children}` (a layout's `{children()}` lowers to its `outlet()` boundary,
+               so it ignores this value). */
+            const propsBag = (hasChild: boolean): UiProps => {
+                const bag: UiProps = {}
+                for (const key of Object.keys(params)) {
+                    bag[key] = () => clientPage.value.params[key]
+                }
+                if (hasChild) {
+                    bag.$children = CHILD_PRESENT
+                }
+                return bag
+            }
             let boundary = baseBoundary(index)
             for (let depth = index; depth < layoutViews.length; depth += 1) {
                 const view = layoutViews[depth] as Route
@@ -200,14 +219,15 @@ export function router(
                     boundary.open,
                     boundary.close,
                     view.build,
-                    params,
+                    /* A layout always has a child below: a deeper layout, or the page. */
+                    propsBag(depth < layoutViews.length - 1 || pageView !== undefined),
                     /* The layout's route key names its scope in the inspector's Reactive tab
                        (no host element to read a tag from — see `scopeLabel`). */
                     chainKeys[depth],
                 )
                 const slot = PENDING_OUTLET.current
                 if (slot === undefined) {
-                    throw new Error('[abide] a layout.abide must contain a <slot/> outlet')
+                    throw new Error('[abide] a layout.abide must contain a {children()} outlet')
                 }
                 mountedLayouts.push({ key: chainKeys[depth] as string, dispose, slot })
                 boundary = slot
@@ -220,7 +240,8 @@ export function router(
                 boundary.open,
                 boundary.close,
                 pageView.build,
-                params,
+                /* A page is a leaf — no child layer. */
+                propsBag(false),
                 /* The page's route key names its scope in the inspector (see above). */
                 pageKey,
             ).dispose

package/src/lib/ui/rpcOutbox/createOutboxQueue.ts

@@ -41,7 +41,7 @@ const keyFor = (url: string): string => `abide:outbox:${url}`
 /*
 A durable, app-owned FIFO retry queue for one RPC. A call fetches directly and throws as
 before while the queue is empty; when the server can't be reached — a transport failure or
-a 502/503/504/52x — the caller `park`s the request here (a side-effect; the call still
+a 502/503/504/520–527/530 — the caller `park`s the request here (a side-effect; the call still
 throws), and once a backlog exists the caller parks every later call at the tail too, so
 FIFO order is preserved on replay. Built on `doc` + `persist`, so the queue IS a persisted
 document that survives a reload. Draining is manual — the app calls `retry()` (per-entry or

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

@@ -0,0 +1,8 @@
+/*
+A no-op truthiness marker the router (client) and `renderChain` (SSR) set as a layout's
+`$props.$children` when a child layer (a nested layout or the page) exists below it. Read
+only by `{#if children}` (→ `$props?.$children`); a layout's `{children()}` lowers to the
+`outlet()` boundary the router fills, so this value is never invoked — it exists purely so
+`{#if children}` reads a uniform presence signal on both the client and the server.
+*/
+export const CHILD_PRESENT = (_host: Element): void => {}

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

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

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

@@ -1,6 +1,6 @@
 /* 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`/
+   (`skeleton`) + every range-mount runtime (`when`/`switchBlock`/`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.

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

@@ -2,13 +2,19 @@ import type { ReactiveNode } from './types/ReactiveNode.ts'
 
 /*
 Mutable singletons shared by every reactive primitive: the observer currently
-running (so a read can register itself as that observer's dependency), the set
+running (so a read can register itself as that observer's dependency), the queue
 of effects dirtied since the last flush, and the batch depth (writes inside a
 batch queue effects and flush once on exit). Held on one object so signal,
 computed, and effect all reference the same graph state without a barrel.
+
+`pendingEffects` is a plain array, not a `Set`: an effect is enqueued only on its
+CLEAN→dirty transition (`mark`'s `wasClean` gate), so it can be pushed at most once
+per flush cycle — the status machine already guarantees the dedup a `Set` would,
+without hashing every enqueue. The flush double-buffers (swaps in a fresh array) so
+effects re-dirtied mid-flush queue for the next pass.
 */
 export const REACTIVE_CONTEXT: {
     observer: ReactiveNode | undefined
-    pendingEffects: Set<ReactiveNode>
+    pendingEffects: ReactiveNode[]
     batchDepth: number
-} = { observer: undefined, pendingEffects: new Set(), batchDepth: 0 }
+} = { observer: undefined, pendingEffects: [], batchDepth: 0 }

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

@@ -6,7 +6,7 @@ Runs a component `build` and returns its result (the mount handle / disposer)
 alongside the component's own `model` document — the serializable `state` doc,
 needed so a hot swap can carry its value across (see `hotReplace`). The model is
 found, not threaded: a component seeds its `model` first (the desugared
-`const model = doc({})` + its init patches run before any child mounts or
+`const $$model = scope()` + its init `replace` patches (state slots lowered by `lowerDocAccess`) run before any child mounts or
 control-flow blocks), so the FIRST patch announced on the bus during the build names
 it. A component with no `state` mints no model and emits nothing first — `model` is
 then `undefined` and there is nothing to preserve. Used only on the hot path; the

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

@@ -43,6 +43,18 @@ the change.
 export function createDoc(initial: unknown): Doc {
     let tree = initial
     const nodes = new Map<string, ReactiveNode>()
+    /* Prefix index: every path → the set of its DIRECT children that lie on a route
+       to some minted node (a trie over the minted paths' ancestor chains). A
+       structural descend walks this from the change root through actual descendants
+       only, replacing the old O(all live cells) `startsWith` scan over the whole
+       `nodes` map. The links span INTERMEDIATE paths that have no node of their own
+       (e.g. `byId` and `byId/<key>` exist as links even when only `byId/<key>/n` was
+       read), so a descend from any ancestor reaches the leaf. Maintained in lockstep
+       with `nodes`: a node's whole ancestor chain is linked when `nodeFor` mints it,
+       unlinked from the leaf up when `wakeSubtree` evicts it. Membership of a path in
+       `nodes` (does it carry a signal?) is independent of its membership here (is it
+       on a route to one?). */
+    const childKeys = new Map<string, Set<string>>()
     /* Computed slots: a path whose value is a function of other paths, not stored
        truth. Held apart from `nodes` so the structural wake/eviction never touches
        them; their dirtiness is driven entirely by the deps they read (the signal
@@ -54,15 +66,65 @@ export function createDoc(initial: unknown): Doc {
        name the document it came from (reference identity, the undo/persistence key). */
     let self: Doc
 
+    /* Links `path` into the trie under its parent and continues up the ancestor chain.
+       Stops at the first ancestor whose parent set already lists it — that link, and
+       everything above it, is already present (some sibling minted the upper chain). */
+    function linkPath(path: string): void {
+        let child = path
+        for (;;) {
+            const parentPath = parentPathOf(child)
+            const siblings = childKeys.get(parentPath)
+            if (siblings === undefined) {
+                childKeys.set(parentPath, new Set([child]))
+            } else if (siblings.has(child)) {
+                return
+            } else {
+                siblings.add(child)
+            }
+            if (parentPath === '') {
+                return
+            }
+            child = parentPath
+        }
+    }
+
     function nodeFor(path: string): ReactiveNode {
         let node = nodes.get(path)
         if (node === undefined) {
             node = createSignalNode(walkPath(tree, path).value)
             nodes.set(path, node)
+            linkPath(path)
         }
         return node
     }
 
+    /* Drops a node and unlinks it from the trie, pruning each emptied ancestor link up
+       the chain — the eviction half of the lockstep with `nodeFor`. A link is removed
+       only once its child set empties, so an intermediate path with other live
+       descendants keeps its place. */
+    function evict(path: string): void {
+        nodes.delete(path)
+        let child = path
+        for (;;) {
+            const parentPath = parentPathOf(child)
+            const siblings = childKeys.get(parentPath)
+            if (siblings === undefined) {
+                return
+            }
+            siblings.delete(child)
+            /* A parent still listing other children, or still carrying its own node,
+               stays — only a fully empty, node-less link is pruned and walked past. */
+            if (siblings.size > 0) {
+                return
+            }
+            childKeys.delete(parentPath)
+            if (parentPath === '' || nodes.has(parentPath)) {
+                return
+            }
+            child = parentPath
+        }
+    }
+
     function read<T>(path: string): T {
         /* Size-gated so a doc with no computed slots pays nothing on the stored hot
            path — only one `.size` check, not a `.get` per read. */
@@ -109,21 +171,53 @@ export function createDoc(initial: unknown): Doc {
             return
         }
         const prefix = rootPath === '' ? '' : `${rootPath}/`
-        for (const [candidate, node] of nodes) {
-            if (candidate !== rootPath && candidate.startsWith(prefix)) {
-                /* A descendant whose path the mutation removed — a deleted key, an
-                   out-of-range index after a shrink — is woken to undefined, then
-                   dropped from the registry. Without eviction `nodes` grows for the
-                   life of the session over churning keys (items/<uuid>, message ids),
-                   and this very descend scan degrades linearly with it. The woken
-                   reader re-mints a fresh node on its flush if the path ever returns.
-                   Deleting the current entry mid-iteration is safe on a Map. */
-                const walk = walkPath(tree, candidate)
+        /* Walk the prefix index from `rootPath` over its real descendants only — a
+           BFS over the parent→children adjacency map — instead of scanning every live
+           node. `pending` holds parent-paths whose direct children are yet to visit;
+           each visited child that is itself a container is enqueued. The total work is
+           the size of the changed subtree, not the whole doc. */
+        const pending: string[] = [rootPath]
+        while (pending.length > 0) {
+            const parentPath = pending.pop() as string
+            const siblings = childKeys.get(parentPath)
+            if (siblings === undefined) {
+                continue
+            }
+            /* Snapshot the set before iterating: eviction below mutates it, and a
+               deleted child must not skip its successor (Set iteration is order-
+               sensitive to in-place deletes). */
+            for (const candidate of [...siblings]) {
+                /* Walk from the already-resolved container (`rootValue`) using only the
+                   path SUFFIX past the shared prefix, instead of re-walking every
+                   candidate's full path from the tree root — the prefix is walked once
+                   per wake, not once per descendant. */
+                const walk = walkPath(rootValue, candidate.slice(prefix.length))
+                /* An INTERMEDIATE link (a path on a route to a node but carrying none of
+                   its own — e.g. `byId/<key>` when only `byId/<key>/n` was read) has no
+                   signal to wake; it exists only to be descended through. So the
+                   wake/evict touches a node only when one is present, while the descend
+                   decision below is independent of node existence. */
+                const node = nodes.get(candidate)
                 if (walk.exists) {
-                    writeNode(node, walk.value)
+                    if (node !== undefined) {
+                        writeNode(node, walk.value)
+                    }
+                    /* Descend into a container child to reach its own descendants. */
+                    if (walk.value !== null && typeof walk.value === 'object') {
+                        pending.push(candidate)
+                    }
                 } else {
-                    writeNode(node, undefined)
-                    nodes.delete(candidate)
+                    /* A descendant whose path the mutation removed — a deleted key, an
+                       out-of-range index after a shrink — is woken to undefined, then
+                       dropped from the registry. The woken reader re-mints a fresh node
+                       on its flush if the path ever returns. A removed container's own
+                       descendants are still enqueued (whether or not THIS path held a
+                       node) so they too are woken/evicted. */
+                    if (node !== undefined) {
+                        writeNode(node, undefined)
+                        evict(candidate)
+                    }
+                    pending.push(candidate)
                 }
             }
         }

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

@@ -1,6 +1,5 @@
 import { NODE_STATE } from './NODE_STATE.ts'
 import { OWNER } from './OWNER.ts'
-import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
 import { runNode } from './runNode.ts'
 import { toTeardown } from './toTeardown.ts'
 import type { EffectResult } from './types/EffectResult.ts'
@@ -52,11 +51,12 @@ export function createEffectNode(fn: () => EffectResult): () => void {
         runCleanup()
         unlinkDeps(node)
         /* Clearing compute makes runNode a no-op: an effect disposed mid-flush (by an
-           earlier effect in the same batch) is still in flushEffects' snapshot array
-           after pendingEffects.delete, so it would otherwise re-run its body and
-           re-link into the graph — a disposed effect resurrected. */
+           earlier effect in the same batch) is still in the queue flushEffects is
+           draining, so without this it would re-run its body and re-link into the graph
+           — a disposed effect resurrected. This alone neutralizes it; the queue is a
+           plain array (no O(1) delete) and a settled no-op iteration is cheaper than an
+           O(n) splice, so the stale entry is left to be skipped on its flush. */
         node.compute = undefined
-        REACTIVE_CONTEXT.pendingEffects.delete(node)
     }
     if (OWNER.current !== undefined) {
         OWNER.current.push(dispose)