@abide/abide 0.34.2 → 0.36.0

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

@@ -9,6 +9,13 @@ touched — declaration names, parameter names, and property names are collected
 into a skip set first, and object shorthand (`{ count }`) is expanded to
 `{ count: model.count }`. This is the bridge from the signal surface the author
 writes to the patch substrate underneath.
+
+The rewrite is lexically scope-aware: a reference whose name is re-bound by an
+enclosing scope (a function/arrow parameter or a nested local declaration) refers
+to that inner binding, not the component signal, so it is left untouched. Without
+this, a callback like `list.map(option => option.toUpperCase())` in a component
+that also has an `option` prop (`const { option } = props()`) would have its loop
+variable rewritten to `option()` and blow up at runtime (`option is not a function`).
 */
 export function renameSignalRefs(
     code: string,
@@ -18,6 +25,10 @@ export function renameSignalRefs(
 ): string {
     const source = ts.createSourceFile('component.ts', code, ts.ScriptTarget.Latest, true)
 
+    /* The signal names that a nested binding can shadow — only these matter for
+       scope tracking, so we ignore every other local binding. */
+    const signalNames = new Set<string>([...stateNames, ...derivedNames, ...computedNames])
+
     /* Identifier nodes that are names, not value reads — never rewritten. */
     const skip = new Set<ts.Node>()
     const collect = (node: ts.Node): void => {
@@ -45,33 +56,47 @@ export function renameSignalRefs(
 
     const result = ts.transform(source, [
         (context) => (root) => {
-            const visit = (node: ts.Node): ts.Node => {
-                /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`. */
-                if (ts.isShorthandPropertyAssignment(node)) {
-                    const replacement = referenceFor(
-                        node.name.text,
-                        stateNames,
-                        derivedNames,
-                        computedNames,
-                    )
-                    if (replacement !== undefined) {
-                        return ts.factory.createPropertyAssignment(node.name.text, replacement)
+            /* Each visitor carries the set of signal names shadowed by the scopes it sits
+               inside; entering a scope that re-binds a signal name produces a fresh visitor
+               with that name added, so shadowing is per-branch (a sibling scope is unaffected). */
+            const makeVisitor = (shadowed: ReadonlySet<string>): ts.Visitor => {
+                const visit = (node: ts.Node): ts.Node => {
+                    /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`,
+                       unless a nearer scope shadows the name. */
+                    if (ts.isShorthandPropertyAssignment(node) && !shadowed.has(node.name.text)) {
+                        const replacement = referenceFor(
+                            node.name.text,
+                            stateNames,
+                            derivedNames,
+                            computedNames,
+                        )
+                        if (replacement !== undefined) {
+                            return ts.factory.createPropertyAssignment(node.name.text, replacement)
+                        }
                     }
-                }
-                if (ts.isIdentifier(node) && !skip.has(node)) {
-                    const replacement = referenceFor(
-                        node.text,
-                        stateNames,
-                        derivedNames,
-                        computedNames,
-                    )
-                    if (replacement !== undefined) {
-                        return replacement
+                    if (ts.isIdentifier(node) && !skip.has(node) && !shadowed.has(node.text)) {
+                        const replacement = referenceFor(
+                            node.text,
+                            stateNames,
+                            derivedNames,
+                            computedNames,
+                        )
+                        if (replacement !== undefined) {
+                            return replacement
+                        }
                     }
+                    /* Recurse with the scope this node introduces folded in (same visitor when
+                       it adds no shadowing name, so unscoped subtrees allocate nothing extra). */
+                    const inner = extendShadowed(node, shadowed, signalNames)
+                    return ts.visitEachChild(
+                        node,
+                        inner === shadowed ? visit : makeVisitor(inner),
+                        context,
+                    )
                 }
-                return ts.visitEachChild(node, visit, context)
+                return visit
             }
-            return ts.visitNode(root, visit) as ts.SourceFile
+            return ts.visitNode(root, makeVisitor(new Set())) as ts.SourceFile
         },
     ])
     const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
@@ -80,6 +105,111 @@ export function renameSignalRefs(
     return output
 }
 
+/* The shadowed-name set for `node`'s children: the parent set plus any signal name
+   that `node` re-binds as a new scope. Returns the parent set unchanged (same
+   reference) when `node` introduces no colliding binding, so the caller can skip
+   allocating a new visitor. */
+function extendShadowed(
+    node: ts.Node,
+    shadowed: ReadonlySet<string>,
+    signalNames: ReadonlySet<string>,
+): ReadonlySet<string> {
+    const introduced = new Set<string>()
+    collectScopeBindings(node, introduced)
+    const added = [...introduced].filter((name) => signalNames.has(name) && !shadowed.has(name))
+    if (added.length === 0) {
+        return shadowed
+    }
+    return new Set<string>([...shadowed, ...added])
+}
+
+/* The names `node` binds when it opens a lexical scope — function/arrow parameters
+   (and the function's own name), block-level `let`/`const`/`function`/`class`,
+   `for`-header declarations, and the `catch` binding. Only names bound directly at
+   this scope; deeper scopes are folded in as the walk descends into them. */
+function collectScopeBindings(node: ts.Node, into: Set<string>): void {
+    const parameters = functionParameters(node)
+    if (parameters !== undefined) {
+        for (const parameter of parameters) {
+            collectBindingNames(parameter.name, into)
+        }
+        if (
+            (ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node)) &&
+            node.name !== undefined
+        ) {
+            into.add(node.name.text)
+        }
+        return
+    }
+    if (ts.isBlock(node) || ts.isModuleBlock(node) || ts.isCaseBlock(node)) {
+        const statements = ts.isCaseBlock(node)
+            ? node.clauses.flatMap((clause) => [...clause.statements])
+            : node.statements
+        for (const statement of statements) {
+            collectStatementBindings(statement, into)
+        }
+        return
+    }
+    if (ts.isCatchClause(node) && node.variableDeclaration !== undefined) {
+        collectBindingNames(node.variableDeclaration.name, into)
+        return
+    }
+    if (ts.isForStatement(node) || ts.isForInStatement(node) || ts.isForOfStatement(node)) {
+        const initializer = node.initializer
+        if (initializer !== undefined && ts.isVariableDeclarationList(initializer)) {
+            for (const declaration of initializer.declarations) {
+                collectBindingNames(declaration.name, into)
+            }
+        }
+    }
+}
+
+/* The names a single block-level statement binds: `var`/`let`/`const`, and named
+   `function`/`class` declarations. */
+function collectStatementBindings(statement: ts.Statement, into: Set<string>): void {
+    if (ts.isVariableStatement(statement)) {
+        for (const declaration of statement.declarationList.declarations) {
+            collectBindingNames(declaration.name, into)
+        }
+    }
+    if (
+        (ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) &&
+        statement.name !== undefined
+    ) {
+        into.add(statement.name.text)
+    }
+}
+
+/* Every identifier bound by a binding name — a plain identifier or the leaves of a
+   destructuring pattern (object/array, including rest elements). */
+function collectBindingNames(name: ts.BindingName, into: Set<string>): void {
+    if (ts.isIdentifier(name)) {
+        into.add(name.text)
+        return
+    }
+    for (const element of name.elements) {
+        if (ts.isBindingElement(element)) {
+            collectBindingNames(element.name, into)
+        }
+    }
+}
+
+/* The parameter list of a function-like node, or undefined if `node` is not one. */
+function functionParameters(node: ts.Node): ts.NodeArray<ts.ParameterDeclaration> | undefined {
+    if (
+        ts.isArrowFunction(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isMethodDeclaration(node) ||
+        ts.isConstructorDeclaration(node) ||
+        ts.isGetAccessorDeclaration(node) ||
+        ts.isSetAccessorDeclaration(node)
+    ) {
+        return node.parameters
+    }
+    return undefined
+}
+
 /* `model.<name>` for a state binding, `<name>()` for a computed doc-slot (the
    string-free reader `scope().derive` returns), `<name>.value` for a runtime cell
    (linked / lens / transform-state), else undefined. */

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

@@ -1,5 +1,7 @@
 /*
-An element attribute. `static` is a literal; `expression` is `name={code}` bound
+An element attribute. `static` is a literal — `bare` marks a valueless attribute
+(`disabled`, not `disabled=""`), letting a component coerce it to `true` while a
+native element still serialises it as `name=""`; `expression` is `name={code}` bound
 reactively; `event` is `on<event>={code}` where `code` evaluates to the handler;
 `bind` is `bind:<property>={lvalue}`, a two-way binding whose `code` is the
 writable doc path read into the property and written back on input; `attach` is
@@ -9,7 +11,7 @@ absolute offset of `code` in the original `.abide` source (see TextPart) —
 optional, set only when the parser tracks positions for the type-checking shadow.
 */
 export type TemplateAttr =
-    | { kind: 'static'; name: string; value: string }
+    | { kind: 'static'; name: string; value: string; bare?: true }
     | { kind: 'expression'; name: string; code: string; loc?: number }
     | { kind: 'event'; event: string; code: string; loc?: number }
     | { kind: 'bind'; property: string; code: string; loc?: number }

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

@@ -1,13 +1,23 @@
 import { RESUME } from '../runtime/RESUME.ts'
+import { seedStreamedResolution } from '../seedStreamedResolution.ts'
 
 /*
-Client consumer of an SSR stream fragment. Parses a streamed
-`<abide-resolve data-id="ID"><script type="application/json">…</script>…</abide-resolve>`
-frame, registers its serialized value in the resume manifest (for later hydration), finds the
-matching `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary in `root`, removes
-the pending nodes between the markers, and inserts the resolved content in their
-place. The pending shell painted instantly; this swaps in each value as it
-arrives — completing the out-of-order streaming loop on the client.
+Bundle-side consumer of an SSR stream chunk, the counterpart of the doc stream's inline
+vanilla scripts (SSR_SWAP_SCRIPT's `__abideSwap` + `__abideResolve`) for a stream the
+running bundle consumes itself — streaming SPA navigation, socket-delivered SSR. It routes
+the two chunk kinds the stream interleaves:
+
+  - `<abide-cache>{StreamedResolution}</abide-cache>` → seed the streamed cache partition.
+    A script set via innerHTML never runs, so the cache channel rides a data frame here
+    (not the doc stream's `<script>__abideResolve(…)</script>`); seeding it keeps the
+    pending {#await} read warm instead of cold-missing to the network.
+  - `<abide-resolve data-id="ID"><script type="application/json">…</script>…</abide-resolve>`
+    → register the value in the resume manifest (for hydration), find the matching
+    `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary in `root`, remove the pending
+    nodes between the markers, and insert the resolved content in their place.
+
+The pending shell painted instantly; this swaps in each value as it arrives — completing
+the out-of-order streaming loop on the client.
 */
 // @documentation plumbing
 export function applyResolved(root: Element, frame: string): void {
@@ -17,6 +27,16 @@ export function applyResolved(root: Element, frame: string): void {
     if (resolved === null || resolved.getAttribute === undefined) {
         return
     }
+    /* A cache-seed frame warms the streamed cache partition — paired with the DOM swap so a
+       bundle-consumed stream can't adopt a resolved branch while dropping its cache key. */
+    if (resolved.nodeName === 'ABIDE-CACHE') {
+        try {
+            seedStreamedResolution(JSON.parse(resolved.textContent ?? 'null'))
+        } catch {
+            /* malformed payload — leave unseeded; the read falls back to a live fetch */
+        }
+        return
+    }
     const id = resolved.getAttribute('data-id')
     if (id === null) {
         return

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

@@ -3,6 +3,7 @@ import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { RESUME } from '../runtime/RESUME.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { discardBoundary } from './discardBoundary.ts'
 import { enterNamespace } from './enterNamespace.ts'
 
@@ -41,6 +42,9 @@ export function awaitBlock(
     before: Node | null = null,
 ): void {
     const hydration = RENDER.hydration
+    /* The live branch's scope, registered with the owner so it disposes on owner
+       teardown — not only when a settle/re-run swaps branches via detach. */
+    const group = scopeGroup()
     let active: { nodes: Node[]; dispose: () => void } | undefined
     let anchor: Node | undefined
     let first = true
@@ -67,8 +71,8 @@ export function awaitBlock(
     const place = (build: (parent: Node) => void): void => {
         detach()
         const fragment = document.createDocumentFragment()
-        const dispose = enterNamespace(anchor?.parentNode ?? parent, () =>
-            scope(() => build(fragment)),
+        const dispose = group.track(
+            enterNamespace(anchor?.parentNode ?? parent, () => scope(() => build(fragment))),
         )
         const nodes = [...fragment.childNodes]
         ;(anchor?.parentNode ?? parent).insertBefore(fragment, anchor ?? null)
@@ -112,7 +116,7 @@ export function awaitBlock(
     const adopt = (open: Node | null, build: (parent: Node) => void): void => {
         const cursor = hydration as NonNullable<typeof hydration>
         cursor.next.set(parent, open?.nextSibling ?? null)
-        const dispose = scope(() => build(parent))
+        const dispose = group.track(scope(() => build(parent)))
         const close = claimChild(cursor, parent)
         cursor.next.set(parent, close?.nextSibling ?? null)
         const nodes: Node[] = []

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

@@ -1,9 +1,9 @@
 import { effect } from '../effect.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { claimExpected } from '../runtime/claimExpected.ts'
-import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { enterNamespace } from './enterNamespace.ts'
 import { moveRange } from './moveRange.ts'
 import { removeRange } from './removeRange.ts'
@@ -36,6 +36,9 @@ export function each<T>(
     before: Node | null = null,
 ): void {
     const rows = new Map<string, EachRow>()
+    /* Each row's scope, registered with the owner so every live row disposes on owner
+       teardown (the effect's own disposer only unsubscribes it from `items()`). */
+    const group = scopeGroup()
 
     /* Build a row's range. Hydrate mode (only while the claim cursor is active —
        read fresh, since a row built by a post-hydration reconcile must create, not
@@ -47,7 +50,7 @@ export function each<T>(
         if (hydration !== undefined) {
             const start = claimExpected(hydration, parent, 'each row start marker')
             hydration.next.set(parent, start.nextSibling)
-            const dispose = scope(() => render(parent, item))
+            const dispose = group.track(scope(() => render(parent, item)))
             const end = claimExpected(hydration, parent, 'each row end marker')
             hydration.next.set(parent, end.nextSibling)
             return { start, end, dispose }
@@ -58,7 +61,9 @@ export function each<T>(
         pending.appendChild(start)
         /* Build under `parent`'s foreign namespace so foreign row elements (svg/math)
            built into the detached fragment are namespaced, not built as HTML. */
-        const dispose = enterNamespace(parent, () => scope(() => render(pending, item)))
+        const dispose = group.track(
+            enterNamespace(parent, () => scope(() => render(pending, item))),
+        )
         pending.appendChild(end)
         return { start, end, dispose, pending }
     }
@@ -146,16 +151,4 @@ export function each<T>(
             RENDER.hydration = previousHydration
         }
     })
-
-    /* Dispose every row still live when the enclosing scope tears down (the effect's
-       own disposer only unsubscribes it from `items()`). The host's DOM is cleared by
-       `mount`, so disposal need not remove the nodes. */
-    if (OWNER.current !== undefined) {
-        OWNER.current.push(() => {
-            for (const row of rows.values()) {
-                row.dispose()
-            }
-            rows.clear()
-        })
-    }
 }

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

@@ -3,6 +3,7 @@ import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { enterNamespace } from './enterNamespace.ts'
 import { removeRange } from './removeRange.ts'
 import type { EachRow } from './types/EachRow.ts'
@@ -32,6 +33,9 @@ export function eachAsync<T>(
     before: Node | null = null,
 ): void {
     const rows = new Map<string, EachRow>()
+    /* Each row's (and the error branch's) scope, registered with the owner so they
+       dispose on owner teardown; the block's own teardown only stops the stream. */
+    const group = scopeGroup()
     const hydration = RENDER.hydration
     const anchor = document.createTextNode('')
     if (hydration !== undefined) {
@@ -46,8 +50,8 @@ export function eachAsync<T>(
         const end = document.createComment(']')
         const fragment = document.createDocumentFragment()
         fragment.appendChild(start)
-        const dispose = enterNamespace(anchor.parentNode ?? parent, () =>
-            scope(() => build(fragment)),
+        const dispose = group.track(
+            enterNamespace(anchor.parentNode ?? parent, () => scope(() => build(fragment))),
         )
         fragment.appendChild(end)
         /* Insert via the anchor's LIVE parent: when this `each` is a bare child of a
@@ -127,18 +131,13 @@ export function eachAsync<T>(
     })
 
     /* Stop the live stream when the enclosing scope tears down: bump the generation so
-       the drain abandons its loop, `return()` the iterator to release the source, drop
-       the error branch, and dispose every surviving row. */
+       the drain abandons its loop and `return()` the iterator to release the source. The
+       rows and error branch are disposed by the group (their scopes were tracked). */
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => {
             generation += 1
             iterator?.return?.(undefined)?.catch(() => undefined)
             iterator = undefined
-            clearError()
-            for (const row of rows.values()) {
-                row.dispose()
-            }
-            rows.clear()
         })
     }
 }

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

@@ -1,6 +1,7 @@
 import { effect } from '../effect.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { clearBetween } from './clearBetween.ts'
 import { fillBefore } from './fillBefore.ts'
 import { openMarker } from './openMarker.ts'
@@ -26,6 +27,9 @@ export function switchBlock(
     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 clearBetween. */
+    const group = scopeGroup()
     let dispose: (() => void) | undefined
     let activeIndex: number
     let end: Comment
@@ -46,7 +50,7 @@ export function switchBlock(
         activeIndex = select(subject())
         const chosen = caseAt(activeIndex)
         if (chosen !== undefined) {
-            dispose = scope(() => chosen.render(parent)) // claim the SSR nodes in place
+            dispose = group.track(scope(() => chosen.render(parent))) // claim the SSR nodes in place
         }
         end = openMarker(parent, ']')
     } else {
@@ -54,7 +58,7 @@ export function switchBlock(
         activeIndex = select(subject())
         const chosen = caseAt(activeIndex)
         if (chosen !== undefined) {
-            dispose = fillBefore(end, (p) => chosen.render(p))
+            dispose = group.track(fillBefore(end, (p) => chosen.render(p)))
         }
     }
 
@@ -68,7 +72,7 @@ export function switchBlock(
         activeIndex = index
         const chosen = caseAt(index)
         if (chosen !== undefined) {
-            dispose = fillBefore(end, (p) => chosen.render(p))
+            dispose = group.track(fillBefore(end, (p) => chosen.render(p)))
         }
     })
 }

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

@@ -1,6 +1,7 @@
 import { claimChild } from '../runtime/claimChild.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { RENDER } from '../runtime/RENDER.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { discardBoundary } from './discardBoundary.ts'
 import { enterNamespace } from './enterNamespace.ts'
 
@@ -28,20 +29,30 @@ export function tryBlock(
     renderCatch?: (parent: Node, error: unknown) => void,
     before: Node | null = null,
 ): void {
-    /* Run a void build under a fresh ownership scope; on throw, tear down the partial
-       effects/listeners it registered and rethrow so the caller can fall back. */
+    /* The guarded subtree's scope, registered with the owner so it disposes on owner
+       teardown. The block renders once, so there is at most one tracked subtree (the
+       try branch, or the catch branch if try threw). */
+    const group = scopeGroup()
+    /* Run a void build under a fresh ownership scope. On success, hand its disposers to
+       the group so the subtree tears down with the owner (they were previously dropped —
+       the leak). On throw, tear down the partial build now and rethrow so the caller can
+       fall back to the catch branch. */
     const guard = (build: () => void): void => {
         const previous = OWNER.current
         const disposers: Array<() => void> = []
         OWNER.current = disposers
+        const disposeAll = (): void => {
+            for (let index = disposers.length - 1; index >= 0; index -= 1) {
+                disposers[index]?.()
+            }
+        }
         try {
             build()
             OWNER.current = previous
+            group.track(disposeAll)
         } catch (error) {
             OWNER.current = previous
-            for (let index = disposers.length - 1; index >= 0; index -= 1) {
-                disposers[index]?.()
-            }
+            disposeAll()
             throw error
         }
     }

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

@@ -1,6 +1,7 @@
 import { effect } from '../effect.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
+import { scopeGroup } from '../runtime/scopeGroup.ts'
 import { clearBetween } from './clearBetween.ts'
 import { fillBefore } from './fillBefore.ts'
 import { openMarker } from './openMarker.ts'
@@ -28,6 +29,9 @@ export function when(
 ): void {
     const hydration = RENDER.hydration
     const chosenFor = (branch: 'then' | 'else') => (branch === 'then' ? render : renderElse)
+    /* The live branch's scope, registered with the owner so it disposes on owner
+       teardown — not only on a branch flip via clearBetween. */
+    const group = scopeGroup()
     let dispose: (() => void) | undefined
     let activeBranch: 'then' | 'else'
     let end: Comment
@@ -40,7 +44,7 @@ export function when(
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
         if (chosen !== undefined) {
-            dispose = scope(() => chosen(parent)) // content claims the SSR nodes in place
+            dispose = group.track(scope(() => chosen(parent))) // content claims the SSR nodes in place
         }
         end = openMarker(parent, ']')
     } else {
@@ -48,7 +52,7 @@ export function when(
         activeBranch = condition() ? 'then' : 'else'
         const chosen = chosenFor(activeBranch)
         if (chosen !== undefined) {
-            dispose = fillBefore(end, chosen)
+            dispose = group.track(fillBefore(end, chosen))
         }
     }
 
@@ -62,7 +66,7 @@ export function when(
         activeBranch = branch
         const chosen = chosenFor(branch)
         if (chosen !== undefined) {
-            dispose = fillBefore(end, chosen)
+            dispose = group.track(fillBefore(end, chosen))
         }
     })
 }

package/src/lib/ui/installHotBridge.ts

@@ -24,6 +24,7 @@ import { effect } from './effect.ts'
 import { enterScope } from './enterScope.ts'
 import { exitScope } from './exitScope.ts'
 import { enterRenderPass } from './runtime/enterRenderPass.ts'
+import { escapeKey } from './runtime/escapeKey.ts'
 import { exitRenderPass } from './runtime/exitRenderPass.ts'
 import { hotReloadEnabled } from './runtime/hotReloadEnabled.ts'
 import { hotReplace } from './runtime/hotReplace.ts'
@@ -68,6 +69,7 @@ export function installHotBridge(): void {
         mountSlot,
         mountChild,
         hydrate,
+        escapeKey,
         nextBlockId,
         enterRenderPass,
         exitRenderPass,

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