@abide/abide 0.37.0 → 0.38.0

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

@@ -1,4 +1,5 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { asOutlet } from './asOutlet.ts'
 import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
@@ -18,6 +19,17 @@ import { VOID_TAGS } from './VOID_TAGS.ts'
 const RANGE_OPEN = '<!--[-->'
 const RANGE_CLOSE = '<!--]-->'
 
+/* The `then`/`catch`/`finally` branch child of an await/try block, or undefined. */
+function branchNamed(
+    children: TemplateNode[],
+    which: 'then' | 'catch' | 'finally',
+): Extract<TemplateNode, { kind: 'branch' }> | undefined {
+    return children.find(
+        (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
+            child.kind === 'branch' && child.branch === which,
+    )
+}
+
 /*
 Server code generator: turns the parsed template into statements that push HTML
 fragments onto an output array, reading the document synchronously (no DOM, no
@@ -64,11 +76,17 @@ export function generateSSR(
         return children.map((child) => generate(child, target)).join('')
     }
 
+    /* In a layout, rewrite `<slot/>` outlets to `OUTLET_TAG` elements up front (the same shared
+       `asOutlet` the client back-end runs), then drive both the skeleton context and the
+       traversal from this tree — one decision site for the outlet, and the outlet emitted bare
+       through the generic element path exactly as the client clones it. */
+    const rootNodes = isLayout ? nodes.map(asOutlet) : nodes
+
     /* Per-node skeleton position, computed once. Both back-ends read this single source of
        truth so their `<!--a-->` anchor placement cannot drift — the fresh-context boundaries
        (control-flow branches, component/slot/snippet content) are enumerated there, not
        re-tracked here as mutable state that a forgotten reset could leak past. */
-    const { inSkeleton, markText } = skeletonContext(nodes)
+    const { inSkeleton, markText } = skeletonContext(rootNodes)
 
     /* A control-flow branch's content, generated exactly like a normal child list so
        a branch holds ANY content (components, text, nested blocks). `generate` emits
@@ -214,8 +232,10 @@ export function generateSSR(
             )
         }
         if (node.kind === 'element' && node.tag === 'slot') {
-            /* A layout's `<slot/>` is the router's page outlet: emit an empty
-               placeholder the chain composer folds the child layer's html into. */
+            /* `asOutlet` already rewrote a layout's top-level/element-nested `<slot/>` to an
+               `OUTLET_TAG` element (handled by the generic path below), so a `slot` node reaching
+               here in a layout is control-flow-nested — emit the same bare outlet placeholder the
+               client's nested-slot path clones, which the chain composer folds the child into. */
             if (isLayout) {
                 return push(target, `<${OUTLET_TAG}></${OUTLET_TAG}>`)
             }
@@ -291,17 +311,12 @@ export function generateSSR(
        an empty boundary — its resolved branch is the children bound to `node.as` — and
        flags the entry so `renderToStream` settles it before the first flush. */
     function generateAwait(node: Extract<TemplateNode, { kind: 'await' }>, target: string): string {
-        const branchOf = (which: 'then' | 'catch' | 'finally') =>
-            node.children.find(
-                (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                    child.kind === 'branch' && child.branch === which,
-            )
-        const catchBranch = branchOf('catch')
-        const finallyChildren = branchOf('finally')?.children ?? []
+        const catchBranch = branchNamed(node.children, 'catch')
+        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
         /* Resolved branch + its bound value: the children directly when blocking, the
            `then` child when streaming. Pending (streaming only) is the non-branch
            children. */
-        const thenBranch = branchOf('then')
+        const thenBranch = branchNamed(node.children, 'then')
         const resolvedChildren = node.blocking
             ? node.children.filter((child) => child.kind !== 'branch')
             : (thenBranch?.children ?? [])
@@ -342,13 +357,8 @@ export function generateSSR(
        an enclosing boundary / the 500 / the stream). Boundary comments let hydration
        discard the server content if the client adoption fails. */
     function generateTry(node: Extract<TemplateNode, { kind: 'try' }>, target: string): string {
-        const branchOf = (which: 'catch' | 'finally') =>
-            node.children.find(
-                (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                    child.kind === 'branch' && child.branch === which,
-            )
-        const catchBranch = branchOf('catch')
-        const finallyChildren = branchOf('finally')?.children ?? []
+        const catchBranch = branchNamed(node.children, 'catch')
+        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const errName = catchBranch?.as ?? '_error'
         const id = nextVar('$tid')
@@ -371,5 +381,5 @@ export function generateSSR(
         return code
     }
 
-    return generateInto(nodes, '$out')
+    return generateInto(rootNodes, '$out')
 }

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

@@ -148,7 +148,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 } else {
                     attrs.push({ kind: 'expression', name, code, loc })
                 }
-            } else {
+            } else if (source.charAt(cursor) === '"' || source.charAt(cursor) === "'") {
                 const quote = source.charAt(cursor)
                 cursor += 1
                 let value = ''
@@ -158,6 +158,15 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 }
                 cursor += 1 // past closing quote
                 attrs.push({ kind: 'static', name, value })
+            } else {
+                /* Unquoted value (`<input type=text>`): runs to the next whitespace or
+                   `>`, per the HTML unquoted-attribute rule. No delimiter to consume. */
+                let value = ''
+                while (cursor < source.length && !/[\s>]/.test(source.charAt(cursor))) {
+                    value += source.charAt(cursor)
+                    cursor += 1
+                }
+                attrs.push({ kind: 'static', name, value })
             }
         }
         return attrs

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

@@ -35,8 +35,15 @@ export function renameSignalRefs(
         if (ts.isPropertyAccessExpression(node)) {
             skip.add(node.name)
         }
-        if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name)) {
-            skip.add(node.name)
+        /* A declaration name is a binding, not a value read. A plain identifier is
+           skipped directly; a destructuring pattern's leaf names are collected so a
+           bound name shadowing a signal (`const { count } = …`) is never rewritten. */
+        if (ts.isVariableDeclaration(node)) {
+            if (ts.isIdentifier(node.name)) {
+                skip.add(node.name)
+            } else {
+                collectBindingIdentifiers(node.name, skip)
+            }
         }
         if (ts.isParameter(node) && ts.isIdentifier(node.name)) {
             skip.add(node.name)
@@ -180,6 +187,22 @@ function collectStatementBindings(statement: ts.Statement, into: Set<string>): v
     }
 }
 
+/* The identifier NODES a binding name binds — a plain identifier or the leaves of a
+   destructuring pattern (object/array, including nested patterns and rest elements).
+   For `{ a: b }` only the bound name `b` is a binding; `a` is the source property.
+   Feeds the skip set so a destructured name shadowing a signal is never rewritten. */
+function collectBindingIdentifiers(name: ts.BindingName, into: Set<ts.Node>): void {
+    if (ts.isIdentifier(name)) {
+        into.add(name)
+        return
+    }
+    for (const element of name.elements) {
+        if (ts.isBindingElement(element)) {
+            collectBindingIdentifiers(element.name, into)
+        }
+    }
+}
+
 /* 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 {

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

@@ -5,74 +5,137 @@ import type { SkeletonContext } from './types/SkeletonContext.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
 /*
-The single source of truth for where skeleton markers go. One top-down walk records,
-per node, whether it sits inside a parser-backed skeleton clone (`inSkeleton`) and
-whether its reactive text is interleaved (`markText`) — the two facts that decide
-`<!--a-->` anchor placement. Both back-ends read this instead of re-deriving the
-position (the client structurally, the server as mutable traversal state), which is
-what let them drift: a fresh-context boundary the server forgot to reset leaked an
-anchor the client never emitted, desyncing hydration.
+The single source of truth for where skeleton markers go AND what their hole indices are.
+One top-down walk records, per node, whether it sits inside a parser-backed skeleton clone
+(`inSkeleton`) and whether its reactive text is interleaved (`markText`) — the two facts
+that decide `<!--a-->` anchor placement — and assigns each hole its `el`/`an` index.
+`generateBuild` reads these indices instead of threading its own counter through a second
+document-order walk, so the numbering cannot drift from the decisions: one walk owns both.
 
-A fresh-context boundary resets to NOT-in-skeleton, because the content there is
-built by its own runtime (a control-flow block's branch, a component's slot content,
-a `<slot>`'s fallback, a snippet's body) — never cloned by the enclosing skeleton —
-so an enclosing skeletonable subtree must not stamp markers onto it. Enumerating
-every such boundary HERE, once, makes "forgetting to reset one" impossible.
+The index assignment is scoped per skeleton root (a `skeletonable` element not already in a
+skeleton — the unit `generateSkeleton` instantiates with `{ el: 0, an: 0 }`; a standalone
+component roots its own skeleton too). `el` numbers element holes in pre-order; `an` numbers
+anchor holes (interleaved reactive text PARTS, control-flow blocks, `<slot>` outlets) in
+document order — the orders the runtime's `indexElementHoles`/`scanAnchors` re-derive from
+the realized DOM, so the compile-time numbers and the runtime positions line up.
+
+A fresh-context boundary resets to NOT-in-skeleton (and to no active counter), because the
+content there is built by its own runtime (a control-flow block's branch, a component's slot
+content, a `<slot>`'s fallback, a snippet's body) — never cloned by the enclosing skeleton.
 */
 export function skeletonContext(nodes: TemplateNode[]): SkeletonContext {
     const inSkeleton = new WeakMap<TemplateNode, boolean>()
     const markText = new WeakMap<TemplateNode, boolean>()
+    /* Element holes keyed by node; anchor holes keyed by node (control-flow/slot) OR by the
+       reactive text PART object (a text node carries one anchor per reactive part). */
+    const elIndex = new WeakMap<TemplateNode, number>()
+    const anIndex = new WeakMap<object, number>()
+
+    type Counter = { el: number; an: number }
 
-    /* Walk `node` carrying the context that applies AT it; recurse into children with the
-       context that applies to THEM. */
-    function visit(node: TemplateNode, nodeInSkeleton: boolean, nodeMarkText: boolean): void {
+    /* Walk `node` carrying the context AND the active skeleton counter that apply AT it
+       (`counter === undefined` outside any skeleton — no holes are numbered there). */
+    function visit(
+        node: TemplateNode,
+        nodeInSkeleton: boolean,
+        nodeMarkText: boolean,
+        counter: Counter | undefined,
+    ): void {
         inSkeleton.set(node, nodeInSkeleton)
         markText.set(node, nodeMarkText)
 
-        /* Control-flow branches, component slot content, and snippet bodies are fresh build
-           contexts — their children re-enter the skeleton only via their own skeletonable
-           elements, so reset both flags. (A standalone branch/case is reached as a child of
-           its control-flow node and likewise resets.) */
+        /* Control-flow blocks, components, and snippets are fresh build contexts. The node
+           ITSELF is a hole in the enclosing skeleton (an anchor for a block, an element hole
+           for a component); its children re-enter the skeleton only via their own roots. */
         if (isControlFlow(node) || node.kind === 'component' || node.kind === 'snippet') {
+            /* A control-flow block takes an anchor only inside an enclosing skeleton (a
+               standalone block routes through `generateIf`/etc, not the skeleton path). */
+            if (counter !== undefined && isControlFlow(node)) {
+                anIndex.set(node, counter.an++)
+            }
+            /* A component is its OWN element hole either way: in the enclosing skeleton's
+               counter when nested, else as the root (index 0) of its own standalone skeleton
+               (`generateChild` routes a lone component through `generateSkeleton` too). */
+            if (node.kind === 'component') {
+                const componentCounter = counter ?? { el: 0, an: 0 }
+                elIndex.set(node, componentCounter.el++)
+            }
             for (const child of childrenOf(node)) {
-                visit(child, false, false)
+                visit(child, false, false, undefined)
             }
             return
         }
-        /* A `branch`/`case` is a transparent grouping inside its control-flow block (its
-           children are generated directly, the wrapper never emits markup) — pass the
-           already-reset context through so a skeletonable element inside it re-enters. */
+        /* A `branch`/`case` is a transparent grouping inside its control-flow block — pass the
+           already-reset context (and absent counter) through so a skeletonable element inside
+           it opens its own skeleton. */
         if (node.kind === 'branch' || node.kind === 'case') {
             for (const child of node.children) {
-                visit(child, nodeInSkeleton, nodeMarkText)
+                visit(child, nodeInSkeleton, nodeMarkText, counter)
+            }
+            return
+        }
+        if (node.kind === 'text') {
+            /* Interleaved reactive text (markText true): each reactive part takes an `<!--a-->`
+               anchor, numbered in document order. A text-leaf's text (markText false) binds
+               marker-free via the element, so its parts take no anchor. */
+            if (counter !== undefined && nodeMarkText) {
+                for (const part of node.parts) {
+                    if (part.kind !== 'static') {
+                        anIndex.set(part, counter.an++)
+                    }
+                }
             }
             return
         }
         if (node.kind !== 'element') {
-            return // text / script / style carry no skeleton children
+            return // script / style carry no skeleton children and no hole
         }
         if (node.tag === 'slot') {
-            /* The slot's own children are its fallback — a fresh context built by `mountSlot`,
-               not the enclosing clone. */
+            /* The slot outlet is an anchor hole in the enclosing skeleton; its children are
+               the fallback — a fresh context built by `mountSlot`. */
+            if (counter !== undefined) {
+                anIndex.set(node, counter.an++)
+            }
             for (const child of node.children) {
-                visit(child, false, false)
+                visit(child, false, false, undefined)
             }
             return
         }
-        /* A skeletonable element not already in a skeleton opens one; its descendants are in
-           skeleton. Reactive text interleaves (takes an anchor) unless this element is a
-           text-leaf (only text/style children), which binds its text marker-free. */
+        /* A skeletonable element not already in a skeleton OPENS one (a fresh counter — the
+           `generateSkeleton` unit). An element already in a skeleton uses the enclosing
+           counter. A static element outside any skeleton numbers nothing. */
+        const opensSkeleton = !nodeInSkeleton && skeletonable(node)
         const childInSkeleton = nodeInSkeleton || skeletonable(node)
+        const effectiveCounter = nodeInSkeleton
+            ? counter
+            : opensSkeleton
+              ? { el: 0, an: 0 }
+              : undefined
         const childMarkText = childInSkeleton && !isTextLeaf(node)
+
+        if (effectiveCounter !== undefined) {
+            /* The element is a located hole when it carries a reactive attr/listener/bind, or
+               binds text-leaf reactive text on itself. Take its `el` index BEFORE recursing,
+               so holes number in pre-order — the order the runtime's path walk produces them. */
+            const hasReactiveAttr = node.attrs.some((attr) => attr.kind !== 'static')
+            const reactiveTextChild = node.children.find(
+                (child) =>
+                    child.kind === 'text' && child.parts.some((part) => part.kind !== 'static'),
+            )
+            const textLeafBind = reactiveTextChild !== undefined && isTextLeaf(node)
+            if (hasReactiveAttr || textLeafBind) {
+                elIndex.set(node, effectiveCounter.el++)
+            }
+        }
         for (const child of node.children) {
-            visit(child, childInSkeleton, childMarkText)
+            visit(child, childInSkeleton, childMarkText, effectiveCounter)
         }
     }
 
     for (const node of nodes) {
-        visit(node, false, false)
+        visit(node, false, false, undefined)
     }
-    return { inSkeleton, markText }
+    return { inSkeleton, markText, elIndex, anIndex }
 }
 
 /* The child list of any node that has one (control-flow, component, snippet, element);

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

@@ -12,4 +12,10 @@ filled by one shared `skeletonContext` pass over the parsed tree.
 export type SkeletonContext = {
     inSkeleton: WeakMap<TemplateNode, boolean>
     markText: WeakMap<TemplateNode, boolean>
+    /* Per-hole indices assigned in the same walk, so `generateBuild` reads its `sk.el`/`sk.an`
+       numbering rather than re-deriving it. `elIndex` keyed by element/component node;
+       `anIndex` keyed by control-flow/slot node OR by a reactive text PART object (a text node
+       carries one anchor per reactive part). */
+    elIndex: WeakMap<TemplateNode, number>
+    anIndex: WeakMap<object, number>
 }

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

@@ -1,34 +1,74 @@
 import { snippetPayload } from '../../shared/snippet.ts'
-import { claimChild } from '../runtime/claimChild.ts'
+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'
 
 /*
-A `{snippet(args)}` interpolation: mount the branded builder's nodes at this
-position. The builder builds straight into `parent` — sequential build order
-places it correctly among siblings, and its effects join the surrounding
-component scope (so they tear down with it). The body's reactive reads update
-fine-grained via those effects; an enclosing `each` re-mounts on list changes.
+A `{snippet(args)}` interpolation: mount the branded builder's nodes in a range
+bounded by two comment markers. The content builds straight into `parent` —
+sequential build order places it correctly among siblings — and its effects join
+the surrounding component scope, so the body's reactive reads update fine-grained.
+
+The CALL is reactive in its arguments: an effect re-reads `read()` so a change in
+the argument expression (e.g. `{row(items())}`) tears the range down and rebuilds
+with fresh args. `read()` returns a fresh builder closing over freshly-evaluated
+args each call, so there is nothing to diff — the snippet re-mounts as a unit, the
+same coarse model as `when`/`each` (args behave like props). The body's own reads
+stay fine-grained within a single mount; the outer effect tracks only the args,
+since `fillBefore` wraps the body in its own scope.
 
 On hydrate the builder runs against the server-rendered nodes between the
 `<!--abide:snippet-->`/`<!--/abide:snippet-->` markers — its `skeleton`/`appendText`
-claim them in place. The cursor is advanced past the open marker before, and past
-the close marker after, so the markers themselves are skipped.
+claim them in place — and the effect's first run is a no-op that only subscribes to
+the args; a later argument change rebuilds fresh (the SSR markers stay as the range).
 */
 // @documentation plumbing
 export function appendSnippet(parent: Node, read: () => unknown): void {
-    const builder = snippetPayload(read())
-    if (typeof builder !== 'function') {
-        return
-    }
-    const mount = builder as (host: Node) => void
     const hydration = RENDER.hydration
+    /* Mount scopes register with the owner so they dispose on owner teardown, not
+       only on an argument-driven rebuild via clearBetween. */
+    const group = scopeGroup()
+    let dispose: (() => void) | undefined
+
+    /* The branded builder, or undefined for anything else (a non-snippet value
+       mounts nothing — the range stays empty until the args yield a builder). */
+    const builderOf = (): ((host: Node) => void) | undefined => {
+        const payload = snippetPayload(read())
+        return typeof payload === 'function' ? (payload as (host: Node) => void) : undefined
+    }
+
+    let open: Comment
+    let close: Comment
     if (hydration !== undefined) {
-        const open = claimChild(hydration, parent)
-        hydration.next.set(parent, open === null ? null : open.nextSibling)
-        mount(parent)
-        const close = claimChild(hydration, parent)
-        hydration.next.set(parent, close === null ? null : close.nextSibling)
-        return
+        open = openMarker(parent, 'abide:snippet')
+        const builder = builderOf()
+        if (builder !== undefined) {
+            dispose = group.track(scope(() => builder(parent))) // content claims the SSR nodes in place
+        }
+        close = openMarker(parent, '/abide:snippet')
+    } else {
+        open = openMarker(parent, 'abide:snippet')
+        close = openMarker(parent, '/abide:snippet')
+        const builder = builderOf()
+        if (builder !== undefined) {
+            dispose = group.track(fillBefore(close, builder))
+        }
     }
-    mount(parent)
+
+    /* The initial mount is built above (create or hydrate); the first effect run only
+       subscribes to the args via `builderOf`, then later argument changes rebuild. */
+    let first = true
+    effect(() => {
+        const builder = builderOf()
+        if (first) {
+            first = false
+            return
+        }
+        clearBetween(open, close, dispose)
+        dispose = builder !== undefined ? group.track(fillBefore(close, builder)) : undefined
+    })
 }

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

@@ -18,6 +18,16 @@ would otherwise make the build helpers claim SSR nodes that don't exist for fres
 content. The same cursor is restored after (mirrors awaitBlock/tryBlock/each).
 */
 export function fillBefore(end: Node, content: (into: Node) => void): () => void {
+    /* A control-flow effect can fire one final time after its block was already
+       detached — e.g. an enclosing await/each block tears the branch down in the same
+       microtask flush that re-ran this effect, before the owner scope disposes it. The
+       end marker then has no live parent, so there is nowhere to build into; inserting
+       a fragment before a parentless comment throws HierarchyRequestError ("would yield
+       an incorrect node tree"). Skip the rebuild — owner teardown disposes this dead
+       block anyway. */
+    if (!end.parentNode) {
+        return () => {}
+    }
     const fragment = document.createDocumentFragment()
     const previousHydration = RENDER.hydration
     RENDER.hydration = undefined

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

@@ -1,5 +1,6 @@
 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'
 
@@ -21,12 +22,16 @@ export function mountSlot(
     before: Node | null = null,
 ): void {
     const hydration = RENDER.hydration
+    /* The slot content's scope, registered with the owner so its effects/listeners
+       dispose on owner teardown (a navigation) — the slot never toggles, so the
+       group only ever tracks this one child. */
+    const group = scopeGroup()
     openMarker(parent, '[', before)
     if (hydration !== undefined) {
-        scope(() => render(parent)) // content claims the SSR range in place
+        group.track(scope(() => render(parent))) // content claims the SSR range in place
         openMarker(parent, ']')
     } else {
         const end = openMarker(parent, ']', before)
-        fillBefore(end, render)
+        group.track(fillBefore(end, render))
     }
 }

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

@@ -6,10 +6,14 @@ component name; any other host (a page/layout outlet) yields its lowercased tag.
 Dev-only — feeds the inspector's Reactive tab so a scope reads `<Counter>` rather
 than an opaque counter id. Returns undefined when there's no element to name from.
 */
+import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
+
 export function scopeLabel(host: Element): string | undefined {
     const tag = host.tagName?.toLowerCase()
     if (tag === undefined) {
         return undefined
     }
-    return tag.startsWith('abide-') ? tag.slice('abide-'.length) : tag
+    return tag.startsWith(COMPONENT_WRAPPER_PREFIX)
+        ? tag.slice(COMPONENT_WRAPPER_PREFIX.length)
+        : tag
 }

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

@@ -1,3 +1,4 @@
+import { COMPONENT_WRAPPER_PREFIX } from '../COMPONENT_WRAPPER_PREFIX.ts'
 import { claimChild } from '../runtime/claimChild.ts'
 import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { RENDER } from '../runtime/RENDER.ts'
@@ -33,7 +34,9 @@ function isElement(node: Node): node is Element {
    child's anchors and shift every parent index past it (same hazard as a block range,
    but bounded by the wrapper element instead of `[`…`]` markers). */
 function isComponentWrapper(node: Node): boolean {
-    return isElement(node) && (node.tagName ?? '').toLowerCase().startsWith('abide-')
+    return (
+        isElement(node) && (node.tagName ?? '').toLowerCase().startsWith(COMPONENT_WRAPPER_PREFIX)
+    )
 }
 
 /* A comment node's data, or undefined for elements/text. A comment is a node that is

package/src/lib/ui/persist.ts

@@ -1,3 +1,4 @@
+import { escapeKey } from './runtime/escapeKey.ts'
 import { localStoragePersistence } from './runtime/localStoragePersistence.ts'
 import { PATCH_BUS } from './runtime/PATCH_BUS.ts'
 import type { Doc } from './runtime/types/Doc.ts'
@@ -99,8 +100,10 @@ export function persist(
 function restore(doc: Doc, saved: unknown): void {
     const current = doc.snapshot()
     if (isPlainObject(saved) && isPlainObject(current)) {
+        /* `replace` takes a `/`-delimited escaped path, so a top-level key containing
+           `/` or `~` must be escaped to a single segment or it'd be mis-routed. */
         for (const key of Object.keys(saved)) {
-            doc.replace(key, saved[key])
+            doc.replace(escapeKey(key), saved[key])
         }
         return
     }

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

@@ -14,6 +14,13 @@ import { unescapeKey } from './unescapeKey.ts'
 import { walkPath } from './walkPath.ts'
 import { writeNode } from './writeNode.ts'
 
+/* `path` minus its last segment — the parent container's path, '' at the root.
+   The same string `segments.slice(0, -1).join('/')` rebuilds, by one slice. */
+function parentPathOf(path: string): string {
+    const lastSlash = path.lastIndexOf('/')
+    return lastSlash === -1 ? '' : path.slice(0, lastSlash)
+}
+
 /*
 Builds a reactive document over `initial`. Each path read for the first time
 mints a signal node; the node is the notification token, the (mutable) tree is
@@ -132,10 +139,7 @@ export function createDoc(initial: unknown): Doc {
            remove (computed post-apply, below, to resolve an array append's index). */
         const before = PATCH_BUS.active ? walkPath(tree, patch.path) : undefined
         tree = applyPatchToTree(tree, patch, segments)
-        /* parentPath is patch.path minus its last segment — the same string
-           `segments.slice(0, -1).join('/')` rebuilds, taken by one slice instead. */
-        const lastSlash = patch.path.lastIndexOf('/')
-        const parentPath = lastSlash === -1 ? '' : patch.path.slice(0, lastSlash)
+        const parentPath = parentPathOf(patch.path)
         const parentValue = walkPath(tree, parentPath).value
         const leafKey = segments[segments.length - 1] as string | undefined
         /* A structural change (add/remove, or an array element replaced by index)
@@ -194,8 +198,7 @@ export function createDoc(initial: unknown): Doc {
         before: ReturnType<typeof walkPath> | undefined,
     ): Patch | undefined {
         if (patch.op === 'add') {
-            const lastSlash = patch.path.lastIndexOf('/')
-            const parentPath = lastSlash === -1 ? '' : patch.path.slice(0, lastSlash)
+            const parentPath = parentPathOf(patch.path)
             const parent = walkPath(tree, parentPath).value
             const resolved =
                 Array.isArray(parent) && patch.path.endsWith('/-')
@@ -223,9 +226,19 @@ export function createDoc(initial: unknown): Doc {
         const node = nodeFor(path)
         const segments = path.split('/').map(unescapeKey)
         const leafKey = segments[segments.length - 1] as string
+        /* Auto-vivify missing ancestor objects so binding a nested path on a doc
+           booted shallow (e.g. `state({})`) doesn't crash, and a later `set` writes
+           into the LIVE tree (so snapshot/persist see it). Mirrors the container
+           assumption applyPatchToTree makes — except the patch path is authored, this
+           walk is compiler-emitted, so the intermediates may not exist yet. */
         let parent = tree as Record<string, unknown>
         for (const segment of segments.slice(0, -1)) {
-            parent = parent[segment] as Record<string, unknown>
+            let next = parent[segment]
+            if (next === null || typeof next !== 'object') {
+                next = {}
+                parent[segment] = next
+            }
+            parent = next as Record<string, unknown>
         }
         return {
             get: () => readNode(node) as T,

package/src/lib/ui/seedStreamedResolution.ts

@@ -18,5 +18,14 @@ export function seedStreamedResolution(resolution: StreamedResolution): void {
     if ('miss' in resolution) {
         return
     }
-    activeCacheStore().entries.set(resolution.key, cacheEntryFromSnapshot(resolution))
+    /* Only seed when nothing live holds the key — or when the existing entry is itself
+       an unconsumed hydrated seed (`hydrated === true`, cleared by the first cache()
+       read). A live/settled non-hydrated entry is authoritative; clobbering it with a
+       stale snapshot would drop a fresher value (e.g. one a live fetch already wrote). */
+    const { entries } = activeCacheStore()
+    const existing = entries.get(resolution.key)
+    if (existing !== undefined && existing.hydrated !== true) {
+        return
+    }
+    entries.set(resolution.key, cacheEntryFromSnapshot(resolution))
 }