@abide/abide 0.43.1 → 0.44.1

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

@@ -1,15 +1,20 @@
+import type { Binding } from './types/Binding.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
 type Case = Extract<TemplateNode, { kind: 'case' }>
 
 /* The structural shape of a `switch`, resolved once so the build and SSR back-ends share one
    reading of its cases and only own emission. Both previously recomputed the `case` filter;
-   SSR additionally located the match-less default. */
+   SSR additionally located the match-less default. A `switch` introduces no names, so
+   `bindings` is empty — present so every block plan answers the single binding source
+   uniformly. */
 export type SwitchPlan = {
     /* The `case` branches in source order (`match` set; the default leaves it unset). */
     cases: Case[]
     /* The match-less default branch, if present. */
     fallback: Case | undefined
+    /* A `switch` binds no names. */
+    bindings: Binding[]
 }
 
 /* Resolves a `switch` node's cases into the shared structural plan. */
@@ -18,5 +23,6 @@ export function switchPlan(node: Extract<TemplateNode, { kind: 'switch' }>): Swi
     return {
         cases,
         fallback: cases.find((branch) => branch.match === undefined),
+        bindings: [],
     }
 }

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

@@ -1,4 +1,6 @@
+import { catchBinding } from './catchBinding.ts'
 import { resolveBranches } from './resolveBranches.ts'
+import type { Binding } from './types/Binding.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
 /* The structural shape of a `try` error boundary, resolved once so the build and SSR
@@ -14,16 +16,21 @@ export type TryPlan = {
     finallyChildren: TemplateNode[]
     /* No catch → a throw propagates to the enclosing boundary (re-throw / `undefined` thunk). */
     hasCatch: boolean
+    /* The catch branch's binding (`catchAs`, `plain`); empty when no catch branch. The
+       guarded and `finally` branches bind nothing. */
+    catchBindings: Binding[]
 }
 
 /* Resolves a `try` node's branches into the shared structural plan. */
 export function tryPlan(node: Extract<TemplateNode, { kind: 'try' }>): TryPlan {
     const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
+    const catchAs = catchBranch?.as ?? '_error'
     return {
         guarded: node.children.filter((child) => child.kind !== 'branch'),
         catchChildren: catchBranch?.children ?? [],
-        catchAs: catchBranch?.as ?? '_error',
+        catchAs,
         finallyChildren: finallyBranch?.children ?? [],
         hasCatch: catchBranch !== undefined,
+        catchBindings: catchBinding(catchAs, catchBranch !== undefined),
     }
 }

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

@@ -25,7 +25,7 @@ export type AnalyzedComponent = {
        CSS to bundle. A top-level `<style>` covers the whole component; a nested one
        covers only its sibling subtree. Empty for a component with no style. */
     styles: { attribute: string; css: string }[]
-    /* False when the template contains an `await` block (not adoptable yet) — the
-       router mounts (re-renders) rather than hydrates such a page. */
+    /* Always `true` — hydration adopts every block in place, including `await`
+       (streamed value seeded through the resume manifest). */
     hydratable: boolean
 }

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

@@ -0,0 +1,24 @@
+/*
+A name a block introduces into a body's scope, carried on its Plan and classified
+ONCE as the single source of truth both back-ends read. `name` is the author param
+as written (a plain identifier or a destructuring pattern — `item`, `i`, `_error`,
+`{ a, b }`); its leaf names are derived where it is registered (`withBindings`),
+never re-derived in a back-end. `classification` decides how each back-end RENDERS
+the binding — the only per-back-end choice left:
+
+- `reactive` — an `await` `then` value, an `each` item / index. The client binds a
+  `.value` cell the runtime can update in place (read as a deref via `reactiveBinding`);
+  SSR has no cells, so it renders it as a plain shadow.
+- `plain` — a `catch` error, `snippet` args. A real JS local on both back-ends, read
+  as the bare identifier.
+
+A binding that mis-lowers to the enclosing component signal is the `block-binding-shadow`
+bug this model designs out: there is one name set and one classification per block, and
+one registration loop (`withBindings`).
+*/
+export type Binding = {
+    /* The author param as written — a plain identifier or a destructuring pattern. */
+    name: string
+    /* How each back-end renders it: a reactive `.value` cell (client) vs a plain local. */
+    classification: 'reactive' | 'plain'
+}

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

@@ -12,4 +12,16 @@ an offset in no mapping is synthesised scaffolding and its diagnostic is dropped
 */
 export type ShadowMapping = { shadowStart: number; sourceStart: number; length: number }
 
-export type CompiledShadow = { code: string; mappings: ShadowMapping[] }
+/*
+A diagnostic the shadow compiler raises itself (not from `tsc`), already located
+in `.abide` source coordinates — `start`/`length` are an offset range in the
+original file, so it needs no segment remap. Used for author rules the type
+system can't express, e.g. importing a compiler-internal runtime helper.
+*/
+export type ShadowDiagnostic = { start: number; length: number; message: string }
+
+export type CompiledShadow = {
+    code: string
+    mappings: ShadowMapping[]
+    diagnostics?: ShadowDiagnostic[]
+}

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

@@ -0,0 +1,43 @@
+import type { ClassStyleMergePlan } from '../classStyleMergePlan.ts'
+import type { TemplateAttr } from './TemplateAttr.ts'
+
+/*
+The per-element shared compile decision both back-ends render from — the element-level
+sibling of `skeletonContext`'s tree-level positional model, layered over it (ADR-0013).
+It centralizes the DECISIONS the two code-gen back-ends (`generateBuild`, `generateSSR`)
+previously made twice in hand-mirrored per-attribute dispatch: each attribute's kind, the
+class/style/directive merge, which attrs are folded into that merge (so both skip them),
+and whether the tag is void. Each back-end still RENDERS per kind — build wires live
+effects/thunks, SSR escapes strings — but consults ONE classification, so the markup the
+client clones and the server emits can never drift on the attribute set or merge logic.
+
+The positional holes/anchors are NOT recomputed here — they stay in `skeletonContext` and
+each back-end reads `elIndex`/`anIndex`/`markText` from it. `elementPlan` is the decision
+on TOP of that positional pass, not a second positional model.
+*/
+
+/* One classified attribute on an element. `attr` is the original `TemplateAttr`; `merged*`
+   flags it as folded into the class/style merge for that back-end (so the back-end skips it
+   in its per-attr dispatch). The merge TRIGGERS differ — build merges only when the base is
+   interpolated (a static base stays in the cloned skeleton with surgical toggles), SSR merges
+   whenever a directive exists (it must emit one attribute string) — so each side reads its own
+   flag. */
+export type ElementPlanAttr = {
+    attr: TemplateAttr
+    /* Folded into the class/style merge on the build back-end (skip in build's dispatch). */
+    mergedBuild: boolean
+    /* Folded into the class/style merge on the SSR back-end (skip in SSR's dispatch). */
+    mergedSSR: boolean
+}
+
+export type ElementPlan = {
+    /* Every attribute classified in author order, each tagged with its per-back-end merge
+       status. Both back-ends iterate this one list and render per `attr.kind`. */
+    attrs: ElementPlanAttr[]
+    /* The class/style/directive merge decision (`classStyleMergePlan`) folded in as this
+       plan's class/style branch — both back-ends render the merged value from its parts. */
+    merge: ClassStyleMergePlan
+    /* A void tag (`<img>`, `<input>`) has no closing tag and no children — both back-ends
+       emit the open tag only. From the shared `VOID_TAGS` set. */
+    isVoid: boolean
+}

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

@@ -0,0 +1,9 @@
+/*
+Which deref a branch-local shadow name lowers to. A block value param either binds
+as a reactive `.value` cell (`derived` — read as `name.value`, the client back-end's
+keyed-each item / `await then` value) or as a plain JS local holding the resolved
+value (`plain` — read as the bare identifier, the SSR back-end's inline `await` value
+and both back-ends' snippet/catch params). A name MUST be registered under the kind
+its emitted code reads it as, or it mis-lowers to the component signal it shadows.
+*/
+export type ShadowKind = 'derived' | 'plain'

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

@@ -0,0 +1,19 @@
+import type { ShadowKind } from './ShadowKind.ts'
+
+/*
+The typed branch-local shadow stack both lowering back-ends thread through. Replaces
+the two loose `Set`s reached via closure with one value owning both kinds, and the
+manual push-then-pop with a single structured `withShadow` that pushes on entry and
+pops in a `finally` — so a branch's shadows cannot outlive the branch even if the body
+throws (the SSR `await then` TDZ path threw mid-body and leaked under the old hand pop).
+
+`names` snapshots a kind for the expression transformer: a binding pushed mid-compile
+must be honoured AND shadow a same-named component signal.
+*/
+export type ShadowScope = {
+    /* Push the names not already present (under `kind`) for the duration of `body`, then
+       pop exactly what was added — in a `finally`, so a throw cannot leak the shadow. */
+    withShadow: <T>(names: Iterable<string>, kind: ShadowKind, body: () => T) => T
+    /* A snapshot of the names currently shadowing under `kind`, for the transformer. */
+    names: (kind: ShadowKind) => ReadonlySet<string>
+}

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

@@ -1,3 +1,5 @@
+import type { TextPart } from './TextPart.ts'
+
 /*
 An element attribute. `static` is a literal — `bare` marks a valueless attribute
 (`disabled`, not `disabled=""`), letting a component coerce it to `true` while a
@@ -15,6 +17,11 @@ optional, set only when the parser tracks positions for the type-checking shadow
 export type TemplateAttr =
     | { kind: 'static'; name: string; value: string; bare?: true; nameLoc?: number }
     | { kind: 'expression'; name: string; code: string; loc?: number; nameLoc?: number }
+    /* `name="literal {expr}"` — a quoted value mixing literal text with `{expr}`
+       interpolations (the text-node `parts` model on an attribute). Bound reactively
+       as the template-literal concatenation of its parts; always yields a string, so
+       the attribute is always present. */
+    | { kind: 'interpolated'; name: string; parts: TextPart[]; nameLoc?: number }
     | { kind: 'event'; event: string; code: string; loc?: number }
     | { kind: 'bind'; property: string; code: string; loc?: number }
     /* `class:<name>={code}` — toggles the class on/off by `code`'s truthiness, written

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

@@ -3,8 +3,8 @@ import type { TextPart } from './TextPart.ts'
 
 /*
 A parsed template node. `text` carries interpolation parts; `element` carries
-attributes and children; `each` is the `<template each as key>` control flow over
-a list; `if`/`await`/`switch`/`try` are its control-flow siblings.
+attributes and children; `each` is the `{#for items as item}` control flow over a
+list; `if`/`await`/`switch`/`try` are its control-flow siblings.
 
 `loc` (where present) is the absolute offset of the node's primary expression in
 the original `.abide` source — additive, set only when the parser tracks
@@ -12,7 +12,7 @@ positions for the type-checking shadow, ignored by the runtime back-ends.
 */
 export type TemplateNode =
     | { kind: 'text'; parts: TextPart[] }
-    | { kind: 'script'; code: string }
+    | { kind: 'script'; code: string; loc?: number }
     /* A `<style>` declared in the template. `css` is its raw body, read structurally
        so a `<style>` inside an expression isn't mistaken for one. The node stays in
        place: it scopes its sibling subtree, so the front-end derives each scope
@@ -50,9 +50,9 @@ export type TemplateNode =
     | {
           kind: 'await'
           promise: string
-          /* `then` riding the `await` tag (`<template await={p} then={v}>`) makes the
-             block BLOCKING: no pending branch, children are the resolved content bound
-             to `as`, SSR settles before the first flush. Absent → streaming. */
+          /* `then` in the await head (`{#await p then v}`) makes the block BLOCKING:
+             no pending branch, children are the resolved content bound to `as`, SSR
+             settles before the first flush. Absent → streaming. */
           blocking: boolean
           as: string | undefined
           children: TemplateNode[]
@@ -93,9 +93,9 @@ export type TemplateNode =
           children: TemplateNode[]
           loc?: number
       }
-    /* A `<template name="row" args={item}>` snippet: a named, scope-capturing
-       builder declared once and called like a function (`{row(item)}`). `params`
-       is the raw `args` source spliced into the builder's parameter list. */
+    /* A `{#snippet row(item)}` snippet: a named, scope-capturing builder declared
+       once and called like a function (`{row(item)}`). `params` is the raw
+       parameter list from the parens (absent when there are no parameters). */
     | {
           kind: 'snippet'
           name: string

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

@@ -0,0 +1,45 @@
+import { destructureBindingNames } from './destructureBindingNames.ts'
+import type { Binding } from './types/Binding.ts'
+import type { ShadowKind } from './types/ShadowKind.ts'
+import type { ShadowScope } from './types/ShadowScope.ts'
+
+/*
+The ONE shared registration path for a block's bindings, built on `withShadow`. Iterates
+a plan's `Binding[]` once, derives each binding's leaf names (`destructureBindingNames` —
+the single name derivation), and registers them under the `ShadowKind` the injected
+`kindMapping` returns, for the duration of `body`. The back-ends differ ONLY in the
+mapping they inject: the client maps `reactive → derived` (a `.value` cell, its wiring
+arranged separately via `reactiveBinding`) and `plain → plain`; SSR has no cells, so it
+maps every binding → `plain`. A name a block introduces therefore flows to exactly one
+shadow kind, decided by the plan's classification and one mapping — `block-binding-shadow`
+(a name registered on one back-end but not the other, or under the wrong kind) is designed
+out, not test-caught.
+*/
+export function withBindings<T>(
+    withShadow: ShadowScope['withShadow'],
+    bindings: Binding[],
+    kindMapping: (binding: Binding) => ShadowKind,
+    body: () => T,
+): T {
+    /* Group each binding's leaf names by the kind the mapping assigns, so one `withShadow`
+       per kind registers them all (nested, so both kinds shadow simultaneously). */
+    const byKind = new Map<ShadowKind, string[]>()
+    for (const binding of bindings) {
+        const kind = kindMapping(binding)
+        const names = byKind.get(kind) ?? []
+        names.push(...destructureBindingNames(binding.name))
+        byKind.set(kind, names)
+    }
+    /* Fold the per-kind `withShadow` calls around `body` — each pushes its names on entry
+       and pops them in a `finally`, so no branch's shadows outlive the branch. */
+    const entries = [...byKind]
+    const run = (index: number): T => {
+        const entry = entries[index]
+        if (entry === undefined) {
+            return body()
+        }
+        const [kind, names] = entry
+        return withShadow(names, kind, () => run(index + 1))
+    }
+    return run(0)
+}

package/src/lib/ui/createScope.ts

@@ -13,7 +13,7 @@ import type { PersistHandle } from './types/PersistHandle.ts'
 import type { Scope } from './types/Scope.ts'
 
 /* A process-stable counter id. The serialization-stable LEXICAL id (route +
-   component + tree position) that `persistent`/`sync` want across reloads/peers
+   component + tree position) that `persist`/`broadcast` want across reloads/peers
    is stamped by the compiler later; until then a scope's id is unique within a
    run — enough for in-session undo and the bus, and as an explicit key's fallback. */
 let nextId = 0
@@ -23,7 +23,7 @@ Builds a lexical scope. Its data is a document — created eagerly from `initial
 or (when `awaiting`) ADOPTED from the first `doc()` a component body creates under
 it, so a scope can wrap the component's own model without changing the data
 lowering. Data methods mirror `Doc` and delegate to that document; capabilities
-are lazy (`undoable`/`persistent` attach `history`/`persist` to it on first call);
+are lazy (`record`/`persist` attach `history`/`persist` to it on first call);
 `child` nests; `dispose` tears the subtree down children-first.
 */
 export function createScope(

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

@@ -1,6 +1,6 @@
 /*
 The MathML foreign-content namespace — the `<math>` counterpart to `SVG_NAMESPACE`.
-The imperative build reads it to namespace MathML elements the static `skeleton` path
-doesn't cover.
+The runtime reads it to namespace MathML children mounted into a `<math>` parent
+dynamically, where no parser-built ancestor namespaces them for free.
 */
 export const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'

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

@@ -1,7 +1,8 @@
 /*
 The SVG foreign-content namespace. An element created in it (or cloned from a
 parser-built `<svg>` subtree) renders as SVG; the same tag in the HTML namespace
-renders as nothing. The imperative build reads it to namespace foreign elements that
-the static `skeleton` path doesn't cover (a foreign parent with dynamic children).
+renders as nothing. The runtime reads it (via `effectiveChildNamespace`) to namespace
+foreign children mounted into a foreign parent dynamically — at a skeleton anchor or in a
+control-flow fragment — where no parser-built `<svg>` ancestor namespaces them for free.
 */
 export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'

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

@@ -16,7 +16,7 @@ node: created and appended (create), or the server-rendered text node claimed
 claimed node is split at the current value's length — deterministic, because
 `read()` returns the same value the server rendered.
 
-A value branded by `html\`…\`` (see abide/shared/html) inserts raw markup instead:
+A value branded by `html\`…\`` (see abide/ui/html) inserts raw markup instead:
 its parsed nodes go between an anchor (create), or the server-rendered nodes
 between `<!--abide:html-->`/`<!--/abide:html-->` markers are adopted (hydrate), and
 a change re-parses and swaps. A binding is text or raw for its lifetime (decided by

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

@@ -3,7 +3,7 @@ import { isComment } from './isComment.ts'
 
 /*
 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
+vanilla scripts (`SSR_SWAP_SCRIPT`'s `__abideSwap` and `CACHE_RESOLVE_SCRIPT`'s `__abideResolve`) for a stream the
 running bundle consumes itself — streaming SPA navigation, socket-delivered SSR. It routes
 the two chunk kinds the stream interleaves:
 

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

@@ -6,9 +6,10 @@ import { enterNamespace } from './enterNamespace.ts'
 Builds a `[ … ]`-bounded content range into a DETACHED fragment under a fresh reactive
 scope, then returns the markers, the fragment, and the scope disposer — leaving
 INSERTION to the caller. The create-path range builder for the keyed list runtimes
-(`each` / `eachAsync`): `each` holds the fragment in `pending` for deferred placement
-(its reconcile reorders rows), `eachAsync` inserts it immediately at the stream anchor
-(arrival order). Both need the same bracketed-fragment build, so it lives here once.
+(`each` / `eachAsync`) and `awaitBlock` (branch swaps): `each` holds the fragment in
+`pending` for deferred placement (its reconcile reorders rows), `eachAsync` inserts it
+immediately at the stream anchor (arrival order). All need the same bracketed-fragment
+build, so it lives here once.
 
 Unlike `openMarker`, this never touches a live parent or the hydrate claim cursor — the
 markers are created fresh and parked in a fragment — so it is a pure CREATE primitive;

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

@@ -19,8 +19,9 @@ the same top-level node count as the server markup.
 */
 // @documentation plumbing
 export function cloneStatic(parent: Node, html: string): void {
-    /* When `parent` is a foreign element built imperatively, the run's markup has no
-       foreign ancestor of its own, so a bare `<path>` would parse into the HTML
+    /* When `parent` is a foreign element built dynamically (not part of this static
+       run's own parser-built subtree), the run's markup has no foreign ancestor of
+       its own, so a bare `<path>` would parse into the HTML
        namespace. Parse it inside a matching `<svg>`/`<math>` wrapper and clone the
        wrapper's children — the parser namespaces them correctly. */
     const wrapper = foreignWrapperTag(parent)

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

@@ -42,6 +42,10 @@ export function each<T>(
     before: Node | null = null,
 ): void {
     const rows = new Map<string, EachRow>()
+    /* Monotonic reconcile-pass id. Each reconcile stamps every surviving row with the
+       current pass, so prune is a `row.gen !== pass` int compare instead of building a
+       `Set` of present keys every reconcile. */
+    let generation = 0
     /* 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()
@@ -136,11 +140,26 @@ export function each<T>(
         try {
             const list = Array.isArray(source) ? source : [...source]
             const keys = list.map(keyOf)
-            const present = new Set(keys)
-            /* Prune departed rows first so their ranges don't sit between survivors and
-               throw off the in-place sibling checks below. */
+            generation += 1
+            const pass = generation
+            /* Resolve each desired key to its surviving row once, here, stamping it with
+               this pass — so prune below is an int compare (no `Set`) and the placement
+               walk reuses the resolved row instead of a second `rows.get`. Halving the map
+               lookups per reconcile is a real win once the harness's O(n) `nextSibling` no
+               longer swamps it. `undefined` marks a key with no surviving row — a build. */
+            const resolved: (EachRow | undefined)[] = new Array(keys.length)
+            for (let index = 0; index < keys.length; index += 1) {
+                const row = rows.get(keys[index] as string)
+                if (row !== undefined) {
+                    row.gen = pass
+                }
+                resolved[index] = row
+            }
+            /* Prune departed rows first (those the resolve loop didn't reach this pass) so
+               their ranges don't sit between survivors and throw off the in-place sibling
+               checks below. */
             for (const [key, row] of rows) {
-                if (!present.has(key)) {
+                if (row.gen !== pass) {
                     row.dispose()
                     removeRange(row.start, row.end)
                     rows.delete(key)
@@ -151,11 +170,11 @@ export function each<T>(
                freshly built) rows move. */
             let cursor: Node = anchor
             for (let index = list.length - 1; index >= 0; index -= 1) {
-                const key = keys[index] as string
-                let row = rows.get(key)
+                let row = resolved[index]
                 if (row === undefined) {
                     row = buildRow(list[index] as T, index)
-                    rows.set(key, row)
+                    row.gen = pass
+                    rows.set(keys[index] as string, row)
                 } else {
                     /* Surviving key: push the (possibly new) item and position into the row's
                        cells. Both write through `Object.is`, so an unchanged item/position is a

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

@@ -6,8 +6,8 @@ import { SVG_NAMESPACE } from './SVG_NAMESPACE.ts'
 The wrapper tag a static run must be parsed inside so its children land in `parent`'s
 foreign namespace — `svg`/`math`, or undefined for HTML. A bare `<path>` fragment
 parses into the HTML namespace; wrapping it in `<svg>` lets the parser namespace it.
-`cloneStatic` uses this for a static run coalesced under a foreign parent that was
-built imperatively, or under a control-flow block's fragment inside foreign content
+`cloneStatic` uses this for a static run coalesced under a foreign parent built
+dynamically, or under a control-flow block's fragment inside foreign content
 (where `parent`'s effective namespace comes from the ambient context).
 */
 export function foreignWrapperTag(parent: Node): string | undefined {

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

@@ -5,6 +5,13 @@ import { registerHotInstance } from '../runtime/registerHotInstance.ts'
 import type { UiComponent } from '../runtime/types/UiComponent.ts'
 import { mountRange } from './mountRange.ts'
 
+/* Build-time flag the production client defines false (see build.ts `define`) so the hot
+   path below — and its captureModelDoc/registerHotInstance imports — dead-code-eliminate
+   (`!false` folds to a constant the minifier can prove) instead of shipping behind a runtime
+   flag it can't. Dev defines it true; the test preload sets it on globalThis so the bare
+   reference resolves to true there, leaving `hotReloadEnabled` alone in charge as before. */
+declare const __ABIDE_DEV__: boolean
+
 /*
 Mounts a child component as a marker-bounded range at `before` in `parent` — no
 wrapper element, so the child's root is a true direct child of the parent (see
@@ -24,7 +31,7 @@ export function mountChild(
     label?: string,
 ): void {
     const moduleId = factory.__abideId
-    if (!hotReloadEnabled.current || moduleId === undefined) {
+    if (!__ABIDE_DEV__ || !hotReloadEnabled.current || moduleId === undefined) {
         mountRange(parent, factory.build, props, before, label)
         return
     }

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

@@ -0,0 +1,79 @@
+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'
+
+/*
+The shared lifecycle of every single-slot control-flow block (`when`, `switchBlock`):
+a marker-bounded RANGE that holds at most one piece of content at a time, swapped as a
+unit when a `key` changes. The block supplies a `key()` thunk (the identity of the
+chosen branch — `'then'|'else'` for `when`, the case index for `switchBlock`) and a
+`contentFor(key)` resolver returning that branch's builder, or `undefined` for an
+empty branch. This module owns the marker setup, the hydrate-vs-create fork, and the
+swap effect with its reentrancy/teardown dance — the structure both blocks copy-pasted.
+
+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; only `key()` (which reads the block's source) drives the
+toggle. The branch's own interpolations still track, each through its own effect.
+
+On hydrate it adopts the server-rendered range: claim the start marker, run the chosen
+branch in place (its content claims the existing nodes), then claim the end marker. The
+effect's first run sees the same key and is a no-op; later changes clear the range and
+build fresh into a fragment.
+
+`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.
+*/
+export function mountSwappableRange<Key>(
+    parent: Node,
+    key: () => Key,
+    contentFor: (key: Key) => ((parent: Node) => void) | undefined,
+    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 on a branch swap via replaceRange. */
+    const group = scopeGroup()
+    let dispose: (() => void) | undefined
+    let activeKey: Key
+    let end: Comment
+
+    const start = openMarker(parent, RANGE_OPEN, before)
+    if (hydration !== undefined) {
+        activeKey = key()
+        const chosen = contentFor(activeKey)
+        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)
+        activeKey = key()
+        const chosen = contentFor(activeKey)
+        if (chosen !== undefined) {
+            dispose = group.track(fillBefore(end, chosen))
+        }
+    }
+
+    effect(() => {
+        const next = key()
+        if (next === activeKey) {
+            return
+        }
+        activeKey = next
+        const chosen = contentFor(next)
+        /* Null `dispose` before `replaceRange` builds the new branch: a reentrant swap
+           during that build (an effect in the new content writing the source) would
+           otherwise re-enter with the already-disposed disposer and clear it twice. */
+        const prior = dispose
+        dispose = undefined
+        const built = replaceRange(start, end, prior, chosen)
+        dispose = built !== undefined ? group.track(built) : undefined
+    })
+}

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

@@ -1,9 +1,11 @@
 /*
 Guarded method call on a reactive-document read. The doc-access lowering rewrites
-`model.draft.trim()` into `model.read("draft").trim()`; when that read is nullish
-the bare form throws the engine's opaque `undefined is not an object (evaluating
-'…read("draft").trim()')`, naming only the desugared call. This wraps the
-non-optional call so the throw names the authored scope path and member instead —
+a non-optional method call on a reactive-document read — e.g. `model.draft.trim()` —
+directly to `$$readCall(model.read("draft"), "draft", "trim", [...])` rather than
+the naive `model.read("draft").trim()`, which would throw the engine's opaque
+`undefined is not an object (evaluating '…read("draft").trim()')`, naming only the
+desugared call. This wraps the non-optional call so the throw names the authored
+scope path and member instead —
 the source-mapped stack frame still resolves to the `.abide` line, so message and
 location together read in authored terms. Both opaque engine errors are covered: a
 nullish receiver (`undefined is not an object`) AND a present receiver whose member

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

@@ -4,9 +4,9 @@ establishes, derived from its host element's tag. The router instead fills layer
 marker boundaries with no host element, so it passes each layer's route key as an
 explicit label (`fillBoundary`); a nested child likewise passes its component name (see
 `mountRange`). The `abide-` prefix strip turns a framework host tag like `abide-resolve`
-into `resolve`; any other host yields its lowercased tag. Dev-only — feeds the
-inspector's Reactive tab a readable scope name. Returns undefined when there's no element
-to name from.
+into `resolve`; any other host yields its lowercased tag. Feeds the inspector's
+Reactive tab a readable scope name; computed and stored in all builds (only the
+inspector surface is dev-only). Returns undefined when there's no element to name from.
 */
 import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
 

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

@@ -129,10 +129,19 @@ export function skeleton(parent: Node, html: string): SkeletonHoles {
         hydration.next.set(parent, node)
     } else {
         const children = source.childNodes
+        /* Stage clones in a fragment ONLY for a live (connected) parent, where one
+           append reflows once instead of per clone. A detached parent triggers no
+           reflow on append, so the fragment is pure overhead there — skip it and
+           append direct. `topLevel` collects each clone either way for anchor/
+           element-hole resolution. */
+        const target: Node = parent.isConnected ? document.createDocumentFragment() : parent
         for (let index = 0; index < children.length; index += 1) {
             const clone = (children[index] as Node).cloneNode(true)
             topLevel.push(clone)
-            parent.appendChild(clone)
+            target.appendChild(clone)
+        }
+        if (target !== parent) {
+            parent.appendChild(target)
         }
     }
     /* Anchor holes via the ONE shared ordering rule (`walkAnchorOrder`) — the same traversal