@abide/abide 0.35.0 → 0.37.0

package/src/lib/ui/navigate.ts

@@ -1,16 +1,24 @@
+import { historyEntries } from './runtime/historyEntries.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
 
 /* 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. */
+   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:
+   the bucket is discarded and the id kept, so the new page restores to top/anchor. */
 // @documentation navigate
 export function navigate(path: string, replace = false): void {
     if (typeof history !== 'undefined') {
         if (replace) {
-            history.replaceState({}, '', path)
+            historyEntries.discard()
+            history.replaceState({ abideEntry: historyEntries.current }, '', path)
         } else {
-            history.pushState({}, '', path)
+            historyEntries.save()
+            history.pushState({ abideEntry: historyEntries.next() }, '', path)
         }
     }
     runtimePath.value = path

package/src/lib/ui/remoteProxy.ts

@@ -8,6 +8,8 @@ import { trace } from '../shared/trace.ts'
 import type { HttpVerb } from '../shared/types/HttpVerb.ts'
 import type { RemoteFunction } from '../shared/types/RemoteFunction.ts'
 import { withBase } from '../shared/withBase.ts'
+import { currentAbortSignal } from './runtime/currentAbortSignal.ts'
+import { REQUEST_SUPERSEDED } from './runtime/REQUEST_SUPERSEDED.ts'
 
 /*
 Client-side substitute for a verb-defined handler. The bundler emits one
@@ -54,17 +56,26 @@ export function remoteProxy<Args, Return>(
 }
 
 /*
-Applies the env-configured client timeout (ABIDE_CLIENT_TIMEOUT, ms) when one
-is set; an unset slot fetches unbounded, exactly as before. A timeout abort
-surfaces as a 504 HttpError so a consumer reads an honest status instead of a
-raw DOMException → 500. Other rejections (genuine network failure) propagate untouched.
+Fetches under two optional aborts: the reactive scope that fired the call (so a
+superseded/torn-down read cancels its in-flight request — currentAbortSignal) and
+the env-configured client timeout (ABIDE_CLIENT_TIMEOUT, ms). Neither present →
+the unbounded fetch, exactly as before. A timeout surfaces as a 504 HttpError so a
+consumer reads an honest status instead of a raw DOMException → 500. Our scope abort
+(reason REQUEST_SUPERSEDED) is swallowed into a never-settling promise: the reactive
+owner is gone, so the result must neither resolve into a dead tree nor surface as a
+rejection. Other rejections (genuine network failure) propagate untouched.
 */
 function fetchWithTimeout(request: Request): Promise<Response> {
     const timeout = rpcTimeoutSlot.ms
-    if (timeout === undefined) {
+    const timeoutSignal = timeout === undefined ? undefined : AbortSignal.timeout(timeout)
+    const signal = combineSignals(currentAbortSignal(), timeoutSignal)
+    if (signal === undefined) {
         return fetch(request)
     }
-    return fetch(request, { signal: AbortSignal.timeout(timeout) }).catch((error: unknown) => {
+    return fetch(request, { signal }).catch((error: unknown) => {
+        if (error === REQUEST_SUPERSEDED) {
+            return new Promise<Response>(() => {})
+        }
         if (error instanceof DOMException && error.name === 'TimeoutError') {
             throw new HttpError(
                 new Response('client timeout', { status: 504, statusText: 'Gateway Timeout' }),
@@ -74,6 +85,21 @@ function fetchWithTimeout(request: Request): Promise<Response> {
     })
 }
 
+/* One AbortSignal from the scope-abort and timeout sources: whichever is present,
+   AbortSignal.any when both, or undefined when neither (the unbounded fetch). */
+function combineSignals(
+    scopeSignal: AbortSignal | undefined,
+    timeoutSignal: AbortSignal | undefined,
+): AbortSignal | undefined {
+    if (scopeSignal === undefined) {
+        return timeoutSignal
+    }
+    if (timeoutSignal === undefined) {
+        return scopeSignal
+    }
+    return AbortSignal.any([scopeSignal, timeoutSignal])
+}
+
 /*
 abide's per-RPC headers: the page traceparent (continues the server trace) and,
 only while offline, the offline marker so the handler's online() reflects the

package/src/lib/ui/router.ts

@@ -6,7 +6,9 @@ import { clientPage } from './runtime/clientPage.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
 import { firstOutlet } from './runtime/firstOutlet.ts'
+import { historyEntries } from './runtime/historyEntries.ts'
 import { runtimePath } from './runtime/runtimePath.ts'
+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'
@@ -20,6 +22,15 @@ type MountedLayout = { key: string; dispose: () => void; outlet: Element }
 /* A layout mount that returns no disposer still needs one for the chain teardown. */
 const noop = (): void => {}
 
+/* The destination URL for a navigation `path`. On the server / headless there is no
+   `location`, so resolve against a localhost origin; in the browser, against the real
+   origin — `location` is already updated to `path` by the time a swap reads it, so this
+   matches `new URL(location.href)`. */
+const resolveUrl = (path: string): URL =>
+    typeof location === 'undefined'
+        ? new URL(`http://localhost${path}`)
+        : new URL(path, location.origin)
+
 /*
 A minimal client router on the History API. `router` matches the current path
 against the route patterns (literal / `[name]` / `[...rest]`, via matchRoute),
@@ -34,6 +45,11 @@ is disposed and rebuilt, and the page (always the leaf) re-mounts every time. Th
 reactive `page` proxy means a persisted layout reading route/params updates in place
 without a remount. Each chunk loads only on first visit, cached after.
 
+Scroll restoration is manual (`historyEntries`): because the page is rebuilt after the
+browser would restore scroll, each history entry's offset is bucketed by an `abideEntry`
+id and reapplied once the destination DOM exists — back/forward returns to its offset, a
+fresh navigation scrolls to the top.
+
 `probe` (when given) runs each post-boot navigation's destination through the
 server's app.handle first, so auth/redirect gating applies to client navigation
 just as it does to a fresh load; its verdict either clears the mount, soft-redirects
@@ -134,9 +150,22 @@ export function router(
         run()
     }
 
+    const entryOf = (): number =>
+        (history.state as AbideHistoryState | null)?.abideEntry ?? historyEntries.current
     const onPopState = (): void => {
+        /* Bucket the leaving entry's scroll (current still its id) before adopting the
+           one back/forward landed on; `swap` restores the adopted entry's offset once
+           its DOM is rebuilt. */
+        historyEntries.save()
+        historyEntries.adopt(entryOf())
         runtimePath.value = location.pathname + location.search + location.hash
     }
+    const onPageHide = (): void => {
+        /* Mirror the live scroll into the active entry's state before it unloads, so a
+           reload can recover it — the in-memory bucket is gone and `manual` keeps the
+           browser from restoring. */
+        historyEntries.persist()
+    }
     const onClick = (event: MouseEvent): void => {
         /* Let the browser own anything that isn't a plain primary-button click:
            modified clicks (open in a new tab/window), middle/right buttons, and
@@ -175,7 +204,22 @@ export function router(
         navigate(destination.pathname + destination.search + destination.hash)
     }
     if (typeof window !== 'undefined') {
+        /* Own scroll restoration: the browser would restore against the pre-teardown
+           DOM. Adopt the initial entry's id (survives a reload) and stamp it onto the
+           landing entry — merging so any `scroll` a prior unload persisted into this
+           entry's state stays put for the first-paint `restore` to recover. */
+        if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'manual'
+        }
+        historyEntries.adopt(entryOf())
+        const landingState = (history.state as AbideHistoryState | null) ?? {}
+        history.replaceState(
+            { ...landingState, abideEntry: historyEntries.current },
+            '',
+            location.href,
+        )
         window.addEventListener('popstate', onPopState)
+        window.addEventListener('pagehide', onPageHide)
         document.addEventListener('click', onClick as EventListener)
     }
 
@@ -200,6 +244,29 @@ export function router(
             /* The route matches on the pathname only; the query/hash ride along for
                the probe (so server gating sees them) and for clientPage.url. */
             const pathname = path.split(/[?#]/)[0] ?? path
+            /* A same-document navigation — only the `#hash` (and thus scroll) differs from
+               the mounted page — needs no teardown: the live page stays, page.url
+               republishes (so `page.url.hash` updates in place), and we restore the entry's
+               scroll bucket or scroll to the anchor. A differing pathname or query still
+               rebuilds (a query is page data). Skipped on first paint — nothing is mounted. */
+            const targetUrl = resolveUrl(path)
+            const mountedUrl = clientPage.value.url
+            if (
+                !first &&
+                mountedUrl.pathname === targetUrl.pathname &&
+                mountedUrl.search === targetUrl.search &&
+                mountedUrl.hash !== targetUrl.hash
+            ) {
+                /* Invalidate any in-flight full navigation so its late `.then` can't
+                   rebuild over the page this hash hop keeps mounted (the token guard
+                   only bails on a NEWER sequence). That bailed `.then` is also the only
+                   writer of `navigating: false`, so clear the flag here — a hash hop is
+                   synchronous and settles immediately. */
+                sequence += 1
+                clientPage.value = { ...clientPage.value, url: targetUrl, navigating: false }
+                historyEntries.restore(targetUrl.hash)
+                return
+            }
             const matched = matchRoute(patterns, pathname)
             const key = matched?.route ?? '*'
             const params = matched?.params ?? {}
@@ -209,6 +276,17 @@ export function router(
             const chainKeys = layoutChainForRoute(chainRoute, layoutKeys)
             sequence += 1
             const token = sequence
+            /* Flag the outgoing page as navigating for the resolve window — chunk
+               import + probe + the view transition all run before the swap commits.
+               Published on the CURRENT snapshot (route/params unchanged) so a spinner
+               bound to `page.navigating` shows over the page being left; `swap`
+               republishes with the destination and `navigating: false` on commit.
+               Skipped on first paint — there is no page to leave. An instant SPA hop
+               (chunk cached, no probe) flips it back within the same microtask, so the
+               browser never paints the intermediate state — no flash. */
+            if (!first && !clientPage.value.navigating) {
+                clientPage.value = { ...clientPage.value, navigating: true }
+            }
             /* First paint adopts a document the server already ran handle() on;
                only later navigations re-run it through the probe. */
             const verdict: Promise<NavVerdict> =
@@ -238,16 +316,6 @@ export function router(
                     }
                     return
                 }
-                /* Publish the active page so the `page` proxy resolves route/params/url. */
-                clientPage.value = {
-                    route: chainRoute,
-                    params,
-                    url:
-                        typeof location === 'undefined'
-                            ? new URL(`http://localhost${path}`)
-                            : new URL(location.href),
-                    navigating: false,
-                }
                 const layoutViews = resolvedLayouts.filter(
                     (view): view is Route => view !== undefined,
                 )
@@ -267,11 +335,26 @@ export function router(
                 /* The DOM mutation a navigation makes: tear the divergent chain down,
                    clear its DOM (a fresh mount; hydration adopts in place), rebuild. */
                 const swap = (): void => {
+                    /* Tear the outgoing page + divergent layouts down BEFORE publishing the
+                       new snapshot. Publishing first would re-run the doomed leaf page's
+                       computeds against the new route's params (a missing `[id]` reads back
+                       `undefined`, e.g. `Number(page.params.id)` → NaN → a bogus request)
+                       while it's still mounted. Disposing first kills that scope; surviving
+                       prefix layouts then update in place on publish. */
                     const base = disposeFrom(divergence)
+                    const url = resolveUrl(path)
+                    clientPage.value = { route: chainRoute, params, url, navigating: false }
                     if (!hydrating) {
                         base.textContent = ''
                     }
                     buildFrom(base, divergence, chainKeys, layoutViews, pageView, params, hydrating)
+                    /* Reapply the destination entry's scroll once its DOM exists — a
+                       back/forward restores its offset, a fresh nav scrolls to the `#hash`
+                       anchor (now built) or the top. Runs on the initial paint too: with
+                       `scrollRestoration='manual'` the browser does NOT restore a reload's
+                       offset, so first paint recovers it from the persisted `history.state`
+                       (a fresh load with no persisted offset falls through to hash/top). */
+                    historyEntries.restore(url.hash)
                 }
                 /* Wrap the swap in a View Transition where the browser supports it, so
                    the page change cross-fades (and shared `view-transition-name` elements
@@ -295,6 +378,7 @@ export function router(
         disposed = true
         if (typeof window !== 'undefined') {
             window.removeEventListener('popstate', onPopState)
+            window.removeEventListener('pagehide', onPageHide)
             document.removeEventListener('click', onClick as EventListener)
         }
         stop()

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

@@ -0,0 +1,8 @@
+/*
+The abort reason used to cancel an RPC bound to a reactive computation when that
+computation re-runs (its result is superseded) or its scope disposes. A unique
+symbol so remoteProxy can distinguish OUR cancellation — which it swallows into a
+never-settling promise, never a rejection — from a genuine network fault or a
+caller's own abort.
+*/
+export const REQUEST_SUPERSEDED: unique symbol = Symbol('abide.request.superseded')

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

@@ -0,0 +1,22 @@
+import { REQUEST_SUPERSEDED } from './REQUEST_SUPERSEDED.ts'
+import { reactiveAbortState } from './reactiveAbortState.ts'
+import type { ReactiveNode } from './types/ReactiveNode.ts'
+
+/*
+Aborts the RPC(s) a reactive computation left in flight — called when the node
+re-runs (the prior run's result is superseded) and when its scope disposes (the
+result would land in a torn-down tree). The `armed` gate keeps this a single
+boolean check until some reactive RPC has actually bound a controller. The abort
+reason is REQUEST_SUPERSEDED so remoteProxy can tell our cancellation from a real
+fault and swallow it rather than surface a rejection.
+*/
+export function abortNode(node: ReactiveNode): void {
+    if (!reactiveAbortState.armed) {
+        return
+    }
+    const controller = reactiveAbortState.controllers.get(node)
+    if (controller !== undefined) {
+        reactiveAbortState.controllers.delete(node)
+        controller.abort(REQUEST_SUPERSEDED)
+    }
+}

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

@@ -0,0 +1,26 @@
+import { cacheManagedSlot } from '../../shared/cacheManagedSlot.ts'
+import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
+import { reactiveAbortState } from './reactiveAbortState.ts'
+
+/*
+The AbortSignal bound to the currently-running reactive computation (effect or
+computed), its controller created lazily on first use. An RPC invoked inside a
+reactive read passes this to fetch, so the request aborts when that computation
+re-runs (superseded) or its scope disposes (navigated away). Returns undefined —
+leaving the fetch unbound by scope — in two cases: there is no reactive owner to
+bind to (an event-handler call), or the call is cache-managed (the cache owns the
+shared flight's lifetime; binding it to one reader would abort it for the others).
+*/
+export function currentAbortSignal(): AbortSignal | undefined {
+    const node = REACTIVE_CONTEXT.observer
+    if (node === undefined || cacheManagedSlot.active) {
+        return undefined
+    }
+    let controller = reactiveAbortState.controllers.get(node)
+    if (controller === undefined) {
+        controller = new AbortController()
+        reactiveAbortState.controllers.set(node, controller)
+        reactiveAbortState.armed = true
+    }
+    return controller.signal
+}

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

@@ -0,0 +1,113 @@
+import type { AbideHistoryState } from './types/AbideHistoryState.ts'
+
+/*
+Per-history-entry scroll buckets for manual scroll restoration. The browser's own
+restoration is disabled (`history.scrollRestoration = 'manual'` at router boot)
+because the router tears the page down and rebuilds it AFTER the browser would have
+restored scroll — so the offset is lost against a node that no longer exists. Instead
+each history entry carries a monotonic id (stamped into `history.state.abideEntry` by
+`navigate`), and this module buckets that entry's scroll offset: `save()` records the
+outgoing offset before history moves, `restore()` reapplies the destination entry's
+offset after its DOM is rebuilt (or, for an entry seen for the first time — a fresh
+navigation — honours a `#hash` anchor when one resolves, else scrolls to the top). A
+back/forward `adopt`s the entry id read from history.state; a `replace` `discard`s the
+current bucket (its content is superseded). The in-memory `offsets` Map covers the
+same-session back/forward path; `persist()` also mirrors the live scroll into
+`history.state` (on pagehide, when state still reflects the active entry) so a RELOAD
+— where the Map is gone and `scrollRestoration='manual'` keeps the browser from
+restoring — can still recover it via `restore()`'s `persistedOffset` fallback.
+
+Scroll APIs are reached off `globalThis` (guarded) so the module is a no-op on the
+server and in headless tests that never install a window. Shared mutable singleton on
+one object, reached without a barrel — mirrors `reactiveAbortState`/`clientPage`.
+*/
+
+/* The scroll surface: the real `Window` shape, made `Partial` so every member is
+   optional — the module degrades to a no-op on the server / in headless tests that
+   never install a window. */
+const view = globalThis as unknown as Partial<Window>
+
+/* The active entry's offset persisted in `history.state` — survives a reload (the
+   in-memory `offsets` Map does not). Honoured only when the stored id matches `current`,
+   so a foreign history entry's state never restores the wrong scroll. */
+function persistedOffset(): [number, number] | undefined {
+    const state = view.history?.state as AbideHistoryState | null
+    if (state?.abideEntry === current && Array.isArray(state.scroll)) {
+        return state.scroll
+    }
+    return undefined
+}
+
+/* The element a `#hash` addresses, if the document holds one. */
+function anchorFor(hash: string | undefined): HTMLElement | undefined {
+    if (hash === undefined || hash.length <= 1 || view.document === undefined) {
+        return undefined
+    }
+    return view.document.getElementById(hash.slice(1)) ?? undefined
+}
+
+/* The active entry's scroll offset is buckets.get(current); `seq` mints fresh ids. */
+const offsets = new Map<number, [number, number]>()
+let current = 0
+let seq = 0
+
+export const historyEntries = {
+    /* The active history entry's id — stamped into history.state by `navigate`. */
+    get current(): number {
+        return current
+    },
+    /* Mint the next entry id for a pushed history entry, making it active. */
+    next(): number {
+        current = seq += 1
+        return current
+    },
+    /* A back/forward landed on an existing entry — make it active so the following
+       save/restore target its bucket. Keeps `seq` ahead of any adopted id. */
+    adopt(entry: number): void {
+        current = entry
+        if (entry > seq) {
+            seq = entry
+        }
+    },
+    /* Bucket the active entry's current scroll offset, before history moves away. */
+    save(): void {
+        if (typeof view.scrollTo === 'function') {
+            offsets.set(current, [view.scrollX ?? 0, view.scrollY ?? 0])
+        }
+    },
+    /* Drop the active entry's bucket — a replace lands fresh content, so the saved
+       scroll no longer applies. (The replace's own `replaceState` overwrites the
+       persisted copy in `history.state`, so the durable fallback clears too.) */
+    discard(): void {
+        offsets.delete(current)
+    },
+    /* Mirror the live scroll into the active entry's `history.state` so it survives a
+       reload (the in-memory Map does not). Called on pagehide — when `history.state`
+       still reflects the active entry — merging to keep its `abideEntry` stamp. */
+    persist(): void {
+        if (typeof view.scrollTo !== 'function' || view.history === undefined) {
+            return
+        }
+        const state = (view.history.state as AbideHistoryState | null) ?? {}
+        view.history.replaceState({ ...state, scroll: [view.scrollX ?? 0, view.scrollY ?? 0] }, '')
+    },
+    /* Reapply the active entry's scroll once its DOM exists. A back/forward to a saved
+       entry returns to its offset (in-memory, else the reload-durable persisted copy);
+       a fresh entry honours a `#hash` anchor when one resolves, else scrolls to the top. */
+    restore(hash?: string): void {
+        if (typeof view.scrollTo !== 'function') {
+            return
+        }
+        const offset = offsets.get(current) ?? persistedOffset()
+        if (offset !== undefined) {
+            view.scrollTo(offset[0], offset[1])
+            return
+        }
+        const anchor = anchorFor(hash)
+        if (anchor !== undefined) {
+            anchor.scrollIntoView()
+            return
+        }
+        view.scrollTo(0, 0)
+    },
+}

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

@@ -0,0 +1,15 @@
+import type { Scope } from '../types/Scope.ts'
+
+/*
+Dev-only registry of every live scope, for the inspector's Reactive tab. `scopes`
+stays empty and untouched unless installInspectorBridge flips `enabled` (gated by
+the server-injected `__abideInspect`), so production allocates and tracks nothing.
+createScope adds on construction and removes on dispose; the bridge reconstructs
+the scope forest from each entry's `id` + `parent.id` (the Scope surface exposes
+no children accessor, so the flat set + parent links is the traversal path). One
+mutable singleton object — mirrors `reactiveAbortState`, reached without a barrel.
+*/
+export const liveScopes: { enabled: boolean; scopes: Set<Scope> } = {
+    enabled: false,
+    scopes: new Set(),
+}

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

@@ -0,0 +1,15 @@
+import type { ReactiveNode } from './types/ReactiveNode.ts'
+
+/*
+Shared state for scope-bound RPC abort. `controllers` maps a reactive computation
+(effect/computed) to the AbortController of the RPC(s) it fired, kept OFF
+ReactiveNode — like an effect's cleanup closure — so signals and the read/write hot
+path pay nothing. `armed` flips true the first time an RPC binds a controller and
+gates the runNode/unlinkDeps lookups, so an app that never fires a reactive RPC pays
+only one boolean check per compute run. Mirrors REACTIVE_CONTEXT's single-object
+pattern (shared mutable singletons on one object, reached without a barrel).
+*/
+export const reactiveAbortState: {
+    controllers: WeakMap<ReactiveNode, AbortController>
+    armed: boolean
+} = { controllers: new WeakMap(), armed: false }

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

@@ -1,5 +1,7 @@
+import { abortNode } from './abortNode.ts'
 import { endTracking } from './endTracking.ts'
 import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
+import { reactiveAbortState } from './reactiveAbortState.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
 
 /*
@@ -12,6 +14,13 @@ taken this run leaves its edges past the cursor, so they are dropped here. Retur
 the fresh value (used by lazy computed reads).
 */
 export function runNode(node: ReactiveNode): unknown {
+    /* This run supersedes the prior one — abort any RPC it left in flight before
+       re-tracking, so a stale request never lands after a newer one started. The
+       `armed` gate inlines here so an app that never fires a reactive RPC pays one
+       property read on this hot path, not a call. */
+    if (reactiveAbortState.armed) {
+        abortNode(node)
+    }
     /* Rewind: track() walks forward from here, reusing matching edges in order. */
     node.depsTail = undefined
     const previous = REACTIVE_CONTEXT.observer

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

@@ -0,0 +1,40 @@
+import { OWNER } from './OWNER.ts'
+
+/*
+A set of child-scope disposers that composes with the enclosing owner. `scope()`
+returns a disposer but does NOT self-register, so a control-flow block's live
+children — a branch, a list row — would outlive an owner teardown (a navigation):
+the leak every block otherwise hand-wires against, several incorrectly. A block
+creates one group, then `track`s each child it builds:
+
+  `track(dispose)` adopts a child's disposer and returns a wrapper that disposes it
+  AND drops it from the group — call the wrapper on a flip/prune (it's idempotent, so
+  a second call is a no-op). Whatever stays tracked is disposed once, when the
+  enclosing owner tears down. A swapped-out child is already dropped, so owner
+  teardown only ever runs the children still live.
+
+This is the single mechanism `when`/`switch`/`await`/`try`/`each`/`eachAsync` share
+in place of each re-deriving owner composition (where the divergence bred the leaks).
+*/
+export function scopeGroup(): { track: (dispose: () => void) => () => void } {
+    const live = new Set<() => void>()
+    const track = (dispose: () => void): (() => void) => {
+        live.add(dispose)
+        return () => {
+            if (live.delete(dispose)) {
+                dispose()
+            }
+        }
+    }
+    /* One teardown for the whole group; disposes whatever children are still live when
+       the owner goes. Outside any scope (a standalone block) the group owns nothing. */
+    if (OWNER.current !== undefined) {
+        OWNER.current.push(() => {
+            for (const dispose of live) {
+                dispose()
+            }
+            live.clear()
+        })
+    }
+    return { track }
+}

package/src/lib/ui/runtime/types/AbideHistoryState.ts

@@ -0,0 +1,9 @@
+/* The shape abide stamps into `History.state`: a monotonic `abideEntry` id the router
+   buckets scroll by, and the last `scroll` offset persisted for that entry (so a reload
+   can recover it — the in-memory bucket does not survive). Both optional: a foreign or
+   bare entry (one another script pushed, or the first landing before a stamp) carries
+   neither, which the readers treat as "no abide data". */
+export type AbideHistoryState = {
+    abideEntry?: number
+    scroll?: [number, number]
+}

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

@@ -1,4 +1,6 @@
+import { abortNode } from './abortNode.ts'
 import { detachLink } from './detachLink.ts'
+import { reactiveAbortState } from './reactiveAbortState.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
 
 /*
@@ -9,6 +11,12 @@ dead observer, then empties the node's own list. The `Set`-era equivalent was
 `for (dep of node.deps) dep.observers.delete(node); node.deps.clear()`.
 */
 export function unlinkDeps(node: ReactiveNode): void {
+    /* Disposing tears this computation out of the graph — abort any RPC it left in
+       flight, its result would land in a scope that no longer exists. Gated inline so
+       the common disarmed dispose pays one property read, not a call. */
+    if (reactiveAbortState.armed) {
+        abortNode(node)
+    }
     let link = node.depsHead
     while (link !== undefined) {
         const next = link.nextDep

package/src/lib/ui/startClient.ts

@@ -6,6 +6,7 @@ import { setPageResolver } from '../shared/setPageResolver.ts'
 import type { CacheSnapshotEntry } from '../shared/types/CacheSnapshotEntry.ts'
 import type { StreamedResolution } from '../shared/types/StreamedResolution.ts'
 import { installHotBridge } from './installHotBridge.ts'
+import { installInspectorBridge } from './installInspectorBridge.ts'
 import { probeNavigation } from './probeNavigation.ts'
 import { router } from './router.ts'
 import { clientPage } from './runtime/clientPage.ts'
@@ -42,6 +43,11 @@ export function startClient(
     if ((globalThis as { __abideDev?: boolean }).__abideDev) {
         installHotBridge()
     }
+    /* Inspector only: the server injects `__abideInspect` when ABIDE_ENABLE_INSPECTOR
+       is on, so the scope/router bridge arms before the router builds any scope. */
+    if ((globalThis as { __abideInspect?: boolean }).__abideInspect) {
+        installInspectorBridge()
+    }
     const ssr = (globalThis as { __SSR__?: SsrPayload }).__SSR__ ?? {}
     setBaseResolver(() => ssr.base ?? '')
     /* The `page` proxy reads route/params/url off the router-updated snapshot. */

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

@@ -22,6 +22,9 @@ the ONLY public entry; everything else is a method reached through it (the
 */
 export type Scope = {
     readonly id: string
+    /* Dev-only display name (the host component/element it mounted into) for the
+       inspector's Reactive tab; undefined for SSR/detached/child scopes. */
+    readonly label?: string
     readonly parent: Scope | undefined
     /* data — mirrors Doc */
     read: <T>(path: string) => T