@abide/abide 0.38.0 → 0.39.0

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

@@ -1,3 +1,5 @@
+import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { isAnchorPositioned } from './isAnchorPositioned.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { isTextLeaf } from './isTextLeaf.ts'
 import { skeletonable } from './skeletonable.ts'
@@ -13,9 +15,9 @@ that decide `<!--a-->` anchor placement — and assigns each hole its `el`/`an`
 document-order walk, so the numbering cannot drift from the decisions: one walk owns both.
 
 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
+skeleton — the unit `generateSkeleton` instantiates with `{ el: 0, an: 0 }`). `el` numbers
+element holes in pre-order; `an` numbers anchor holes (interleaved reactive text PARTS,
+control-flow blocks, child components, `<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.
 
@@ -26,8 +28,8 @@ content, a `<slot>`'s fallback, a snippet's body) — never cloned by the enclos
 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). */
+    /* Element holes keyed by node; anchor holes keyed by node (control-flow/component/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>()
 
@@ -45,21 +47,16 @@ export function skeletonContext(nodes: TemplateNode[]): SkeletonContext {
         markText.set(node, nodeMarkText)
 
         /* 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. */
+           ITSELF is a hole in the enclosing skeleton (an `<!--a-->` anchor for a block OR a
+           component — both mount as a marker-bounded range at that anchor); 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)) {
+            /* A block or a component takes an anchor only inside an enclosing skeleton (a
+               standalone one routes through `generateIf`/`mountChild`, not the skeleton path);
+               a snippet declares a builder and is never anchor-positioned (`isAnchorPositioned`). */
+            if (counter !== undefined && isAnchorPositioned(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, undefined)
             }
@@ -90,9 +87,11 @@ export function skeletonContext(nodes: TemplateNode[]): SkeletonContext {
         if (node.kind !== 'element') {
             return // script / style carry no skeleton children and no hole
         }
-        if (node.tag === 'slot') {
-            /* The slot outlet is an anchor hole in the enclosing skeleton; its children are
-               the fallback — a fresh context built by `mountSlot`. */
+        if (node.tag === 'slot' || node.tag === OUTLET_TAG) {
+            /* A component `<slot>` content fill OR a layout's `OUTLET_TAG` router fill point
+               (`asOutlet`) is an anchor hole in the enclosing skeleton — both mount a marker
+               range at the anchor (`mountSlot` / `outlet`). A `<slot>`'s children are its
+               fallback (a fresh context); an outlet has none. */
             if (counter !== undefined) {
                 anIndex.set(node, counter.an++)
             }

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

@@ -1,3 +1,4 @@
+import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
@@ -22,7 +23,7 @@ function skeletonStructure(node: TemplateNode): boolean {
     if (node.kind !== 'element') {
         return false // standalone branch|case
     }
-    if (node.tag === 'slot') {
+    if (node.tag === 'slot' || node.tag === OUTLET_TAG) {
         return true
     }
     return node.children.every(skeletonStructure)
@@ -43,7 +44,7 @@ function hasHole(node: TemplateNode): boolean {
         return node.parts.some((part) => part.kind !== 'static')
     }
     if (node.kind === 'element') {
-        if (node.tag === 'slot') {
+        if (node.tag === 'slot' || node.tag === OUTLET_TAG) {
             return true
         }
         return node.attrs.some((attr) => attr.kind !== 'static') || node.children.some(hasHole)

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

@@ -0,0 +1,27 @@
+import type { TemplateAttr } from './types/TemplateAttr.ts'
+
+/*
+The explicitly-authored attribute names on a native element that also carries a
+`{...spread}`. An explicit attribute wins over a spread key of the same name, so
+both back-ends pass this set to skip those keys from the spread — keeping the
+server string and the client DOM congruent (no duplicate attribute, and no
+SSR-first-wins vs client-spread-wins divergence). Excluding by NAME (not by a
+runtime present/absent check) means the two sides agree regardless of a dynamic
+attribute's runtime value. Static and dynamic (`{expr}`) attrs contribute their
+name, a `bind:` its property, an `on<event>` its `on…` form; `attach`/`spread`
+carry no attribute name.
+*/
+export function spreadExcludedNames(attrs: TemplateAttr[]): string[] {
+    return attrs.flatMap((attr) => {
+        if (attr.kind === 'static' || attr.kind === 'expression') {
+            return [attr.name]
+        }
+        if (attr.kind === 'bind') {
+            return [attr.property]
+        }
+        if (attr.kind === 'event') {
+            return [`on${attr.event}`]
+        }
+        return []
+    })
+}

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

@@ -1,4 +1,4 @@
-import { escapeHtml } from './escapeHtml.ts'
+import { escapeHtml } from '../../shared/escapeHtml.ts'
 
 /*
 Serializes one static attribute to its markup fragment, leading space included.

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

@@ -1,4 +1,4 @@
-import { escapeHtml } from './escapeHtml.ts'
+import { escapeHtml } from '../../shared/escapeHtml.ts'
 
 /*
 Serializes one static text part to its markup: whitespace-only parts drop (both

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

@@ -6,7 +6,9 @@ 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
 `attach={code}` where `code` evaluates to an attachment `(node) => teardown` run
-at build with node-lifetime teardown. `loc` is the
+at build with node-lifetime teardown; `spread` is `{...code}` where `code`
+evaluates to an object whose own keys each become a prop on a component or an
+attribute on a native element. `loc` is the
 absolute offset of `code` in the original `.abide` source (see TextPart) —
 optional, set only when the parser tracks positions for the type-checking shadow.
 */
@@ -16,3 +18,4 @@ export type TemplateAttr =
     | { kind: 'event'; event: string; code: string; loc?: number }
     | { kind: 'bind'; property: string; code: string; loc?: number }
     | { kind: 'attach'; code: string; loc?: number }
+    | { kind: 'spread'; code: string; loc?: number }

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

@@ -61,7 +61,9 @@ export type TemplateNode =
     | {
           kind: 'component'
           name: string
-          props: { name: string; code: string; loc?: number }[]
+          /* Each authored attribute as a prop. A `spread` entry (`{...code}`) carries no
+             `name`; its keys merge in at runtime (`mergeProps`/`spreadProps`). */
+          props: { name: string; code: string; loc?: number; spread?: boolean }[]
           children: TemplateNode[]
       }
     | { kind: 'switch'; subject: string; children: TemplateNode[]; loc?: number }

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

@@ -0,0 +1,14 @@
+/* A comment node's data, or undefined for elements/text. A comment is a node that is
+   neither an element (`hasAttribute`) nor a text node (`splitText`); the mini-dom
+   exposes no `nodeType`, so detect by method. Shared by every marker-range scan
+   (`skeleton`'s anchor walk, `outlet`'s close-marker skip) so the convention is probed
+   one way everywhere. */
+export function commentData(node: Node): string | undefined {
+    if (
+        typeof (node as Element).hasAttribute === 'function' ||
+        typeof (node as Text).splitText === 'function'
+    ) {
+        return undefined
+    }
+    return (node as Comment).data
+}

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

@@ -0,0 +1,21 @@
+import type { Scope } from '../types/Scope.ts'
+import { clearBetween } from './clearBetween.ts'
+
+/*
+The standard teardown for a marker-bounded range (component, layout/page boundary,
+slot): stop the content's reactivity, dispose its lexical scope, and clear the nodes
+between the markers — leaving the markers in place so a hot swap rebuilds the range.
+Shared by every range mount (`fillRange`, `mountRange`, `fillBoundary`) so the one
+disposer contract lives in a single place.
+*/
+export function disposeRange(
+    scoped: { stop: () => void; lexical: Scope },
+    start: Comment,
+    end: Comment,
+): () => void {
+    return () => {
+        scoped.stop()
+        scoped.lexical.dispose()
+        clearBetween(start, end)
+    }
+}

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

@@ -0,0 +1,38 @@
+import { RENDER } from '../runtime/RENDER.ts'
+import { scope } from '../runtime/scope.ts'
+import type { UiProps } from '../runtime/types/UiProps.ts'
+import { disposeRange } from './disposeRange.ts'
+import { fillRange } from './fillRange.ts'
+import { withScope } from './withScope.ts'
+
+/*
+Mounts a chain layer (layout or page) into an EXISTING outlet boundary — the markers
+a parent layout's `<slot/>` left (`outlet`), or the router's root boundary in `#app`.
+The router fills these boundaries instead of mounting into a host element, so the whole
+page/layout chain composes through one range model (no `<abide-outlet>` wrapper).
+
+Create: build the layer's content into a fragment that lands just before `close`
+(`fillRange`). Hydrate: claim the server content in place — park the parent cursor at
+`open.nextSibling` and let the build adopt the existing nodes (the outlet markers
+themselves are located via `PENDING_OUTLET`, not claimed through the cursor). The disposer
+stops the layer's reactivity and clears the boundary — the router calls it to tear a
+divergent layer down before rebuilding the same boundary.
+*/
+// @documentation plumbing
+export function fillBoundary(
+    open: Comment,
+    close: Comment,
+    build: (host: Node, props?: UiProps) => void,
+    props: UiProps | undefined,
+    label: string | undefined,
+): { dispose: () => void } {
+    const hydration = RENDER.hydration
+    if (hydration === undefined) {
+        return fillRange(open, close, build, props, label)
+    }
+    /* Hydrate: adopt the server content between the markers in place. */
+    const parent = open.parentNode as Node
+    hydration.next.set(parent, open.nextSibling)
+    const scoped = withScope(label, () => scope(() => build(parent, props)))
+    return { dispose: disposeRange(scoped, open, close) }
+}

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

@@ -0,0 +1,30 @@
+import type { UiProps } from '../runtime/types/UiProps.ts'
+import { disposeRange } from './disposeRange.ts'
+import { fillBefore } from './fillBefore.ts'
+import { withScope } from './withScope.ts'
+
+/*
+Builds a component's content fresh between two existing range markers (the create
+path), under the component's own lexical scope and render pass — the range analog of
+`mount` for a nested child. `build` appends into a fragment (via `fillBefore`) that
+lands just before `end`, so the content sits in the `[ … ]` range the child mounts
+into rather than at the parent's tail; that range is what makes a component
+selector-transparent (a true direct child of its parent, no `<abide-name>` wrapper).
+
+Brackets a render pass (a nested child continues the parent's block-id counter) and
+establishes the child's lexical scope in `awaiting` mode so it adopts the model doc
+its first `doc()` creates. The disposer stops the content's reactivity, disposes the
+lexical scope, and clears the range — leaving the markers, so a hot swap rebuilds in
+place. Shared by `mountRange` (create branch) and `hotReplace` (re-fill on edit).
+*/
+// @documentation plumbing
+export function fillRange(
+    start: Comment,
+    end: Comment,
+    build: (host: Node, props?: UiProps) => void,
+    props: UiProps | undefined,
+    label: string | undefined,
+): { start: Comment; end: Comment; dispose: () => void } {
+    const scoped = withScope(label, () => fillBefore(end, (fragment) => build(fragment, props)))
+    return { start, end, dispose: disposeRange(scoped, start, end) }
+}

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

@@ -1,10 +1,7 @@
-import { createScope } from '../createScope.ts'
-import { CURRENT_SCOPE } from '../runtime/CURRENT_SCOPE.ts'
-import { enterRenderPass } from '../runtime/enterRenderPass.ts'
-import { exitRenderPass } from '../runtime/exitRenderPass.ts'
 import { RENDER } from '../runtime/RENDER.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeLabel } from './scopeLabel.ts'
+import { withScope } from './withScope.ts'
 
 /*
 Adopts existing server-rendered DOM instead of rebuilding it. Runs `build(host)`
@@ -15,31 +12,24 @@ focus/scroll). Returns a disposer.
 
 Adopts the server DOM in place across the framework: static structure (elements
 + text + bindings), `if`/`else`, keyed `each`, `switch`, `try`, and child
-components (with slots) — they hydrate automatically because the wrapper is
-claimed while hydration is still active. `await` adopts too when it can resume
+components (with slots) — they hydrate automatically because a child's marker range
+is claimed while hydration is still active (see `mountRange`). `await` adopts too when it can resume
 the value (a streamed `RESUME[id]` or a warm-sync/cache read); only a genuinely-
 pending `await` — no resume, not cache-warm — discards its boundary and builds
 the pending branch fresh (see `awaitBlock`).
 */
 // @documentation plumbing
-export function hydrate(host: Element, build: (host: Element) => void): () => void {
+export function hydrate(
+    host: Element,
+    build: (host: Element, props: unknown) => void,
+    props?: unknown,
+): () => void {
     const previous = RENDER.hydration
     RENDER.hydration = { next: new Map() }
-    enterRenderPass()
-    /* Same lexical scope establishment as `mount` — a hydrated component owns a scope
-       too, adopting the model its build adopts. */
-    const parentScope = CURRENT_SCOPE.current
-    const lexical = createScope({}, parentScope, true, scopeLabel(host))
-    CURRENT_SCOPE.current = lexical
     try {
-        const stop = scope(() => {
-            try {
-                build(host)
-            } finally {
-                exitRenderPass()
-                CURRENT_SCOPE.current = parentScope
-            }
-        })
+        /* Same shared mount core as `mount` (see `withScope`) — a hydrated component owns a
+           scope too, adopting the model its build adopts — run with the claim cursor active. */
+        const { stop, lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
         return () => {
             stop()
             lexical.dispose()

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

@@ -0,0 +1,32 @@
+import type { UiProps } from '../runtime/types/UiProps.ts'
+
+/*
+Composes a child's props from ordered layers — explicit prop runs (`{ name: () =>
+value }` thunk maps), `{...spread}` layers (`spreadProps`), and a trailing slot
+layer (`$children`) — into one prop bag, last layer wins per key (source order, like
+JSX). A key resolves by scanning layers in reverse for the first that carries it, so
+an explicit prop after a spread overrides it and vice-versa. Emitted only when a
+component carries a spread; the plain object literal stays the path otherwise.
+*/
+// @documentation plumbing
+export function mergeProps(layers: Record<string | symbol, unknown>[]): UiProps {
+    return new Proxy(Object.create(null), {
+        get(_target, key) {
+            for (let index = layers.length - 1; index >= 0; index -= 1) {
+                const layer = layers[index]
+                if (layer !== undefined && key in layer) {
+                    return layer[key]
+                }
+            }
+            return undefined
+        },
+        has: (_target, key) => layers.some((layer) => key in layer),
+        /* Enumerable across every layer (deduped), so `restProps` can collect a
+           parent-spread bag's keys. */
+        ownKeys: () => [...new Set(layers.flatMap((layer) => Reflect.ownKeys(layer)))],
+        getOwnPropertyDescriptor: (_target, key) =>
+            layers.some((layer) => key in layer)
+                ? { enumerable: true, configurable: true }
+                : undefined,
+    }) as UiProps
+}

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

@@ -1,38 +1,29 @@
-import { createScope } from '../createScope.ts'
-import { CURRENT_SCOPE } from '../runtime/CURRENT_SCOPE.ts'
-import { enterRenderPass } from '../runtime/enterRenderPass.ts'
-import { exitRenderPass } from '../runtime/exitRenderPass.ts'
 import { scope } from '../runtime/scope.ts'
 import { scopeLabel } from './scopeLabel.ts'
+import { withScope } from './withScope.ts'
 
 /*
-Mounts a component into `host`: runs `build(host)` under an ownership scope so
-every binding it creates is collected, and returns a disposer that stops all
-reactivity and clears the host. `build` appends its nodes to `host` (via the dom
-bindings below). This is the runtime entry the compiler's component output calls.
+Mounts a top-level page/layout into `host` (the router's outlet/root element): runs
+`build(host, props)` under an ownership scope so every binding it creates is
+collected, and returns a disposer that stops all reactivity and clears the host.
+`build` appends its nodes to `host` (via the dom bindings below). This is the runtime
+entry the router calls; a NESTED child instead mounts as a marker range (see
+`mountRange`), so it leaves no wrapper element.
 
 Brackets a render pass so the outermost mount resets the block-id counter and an
 inlined child component's mount continues it — keeping await/try ids aligned with
 the SSR stream (see `enterRenderPass`).
 */
 // @documentation plumbing
-export function mount(host: Element, build: (host: Element) => void): () => void {
-    enterRenderPass()
-    /* Establish this component's lexical scope, nested under the enclosing one, in
-       `awaiting` mode so it adopts the model doc the build's first `doc()` creates.
-       `scope()` and its capabilities resolve to it during the build; the previous
-       scope is restored after (synchronous build, so the restore is exact). */
-    const parentScope = CURRENT_SCOPE.current
-    const lexical = createScope({}, parentScope, true, scopeLabel(host))
-    CURRENT_SCOPE.current = lexical
-    const stop = scope(() => {
-        try {
-            build(host)
-        } finally {
-            exitRenderPass()
-            CURRENT_SCOPE.current = parentScope
-        }
-    })
+export function mount(
+    host: Element,
+    build: (host: Element, props: unknown) => void,
+    props?: unknown,
+): () => void {
+    /* Establish this component's lexical scope (nested, `awaiting` so it adopts the model
+       doc the build's first `doc()` creates) and render pass, run the build under it, and
+       restore the previous scope — the shared mount core (see `withScope`). */
+    const { stop, lexical } = withScope(scopeLabel(host), () => scope(() => build(host, props)))
     return () => {
         stop()
         lexical.dispose()

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

@@ -3,32 +3,45 @@ import { hotReloadEnabled } from '../runtime/hotReloadEnabled.ts'
 import { OWNER } from '../runtime/OWNER.ts'
 import { registerHotInstance } from '../runtime/registerHotInstance.ts'
 import type { UiComponent } from '../runtime/types/UiComponent.ts'
+import { mountRange } from './mountRange.ts'
 
 /*
-Mounts a child component into its wrapper host. Plain path (production, and dev
-without the hot bridge): run the factory — exactly the bare call the compiler used
-to emit. Hot path (hotReloadEnabled and the factory carries a module id): keep the
-mount disposer and record the instance so an edit can dispose + re-run it in place,
-and file a cleanup with the mounting owner so the record and its scope leave
-together when the parent (or branch/row) tears down. The factory already mounts
-under its own scope (see `mount`), so the recorded disposer tears down just this
-instance.
+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
+`mountRange`). Plain path (production, and dev without the hot bridge): just run the
+range mount with the component's own `build`. Hot path (hotReloadEnabled and the
+factory carries a module id): keep the mount handle (its range markers + disposer)
+and record the instance so an edit can re-fill the same range in place (see
+`hotReplace`), and file a cleanup with the mounting owner so the record and its scope
+leave together when the parent (or branch/row) tears down.
 */
 // @documentation plumbing
 export function mountChild(
-    host: Element,
+    parent: Node,
     factory: UiComponent,
     props: Parameters<UiComponent>[1],
+    before: Node | null = null,
+    label?: string,
 ): void {
     const moduleId = factory.__abideId
     if (!hotReloadEnabled.current || moduleId === undefined) {
-        factory(host, props)
+        mountRange(parent, factory.build, props, before, label)
         return
     }
-    /* Capture the component's model alongside its disposer, so a later swap can carry
-       its state across (see `hotReplace`). */
-    const { dispose, model } = captureModelDoc(() => factory(host, props))
-    const instance = { host, factory, props, dispose, model }
+    /* Capture the component's model alongside its mount handle, so a later swap can
+       carry its state across (see `hotReplace`). */
+    const { value: handle, model } = captureModelDoc(() =>
+        mountRange(parent, factory.build, props, before, label),
+    )
+    const instance = {
+        factory,
+        props,
+        label,
+        start: handle.start,
+        end: handle.end,
+        dispose: handle.dispose,
+        model,
+    }
     const remove = registerHotInstance(moduleId, instance)
     OWNER.current?.push(() => {
         instance.dispose()

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

@@ -0,0 +1,45 @@
+import { RENDER } from '../runtime/RENDER.ts'
+import { scope } from '../runtime/scope.ts'
+import type { UiProps } from '../runtime/types/UiProps.ts'
+import { disposeRange } from './disposeRange.ts'
+import { fillRange } from './fillRange.ts'
+import { openMarker } from './openMarker.ts'
+import { withScope } from './withScope.ts'
+
+/*
+Mounts a nested child component as a marker-bounded range — the wrapper-free
+replacement for the old `<abide-name display:contents>` host. A component positions
+and hydrates exactly like a control-flow block: its content lives in a `[ … ]` range,
+so the child's real root is a TRUE direct child of the parent and structural CSS
+(`>`, `:first-child`, `space-x`, grid placement) reaches it with no indirection —
+which `display:contents` could never give, since it hides the wrapper from layout but
+not from the selector tree.
+
+Create fills the range before the end marker (`fillRange`); hydrate claims the server
+range in place (claim the start marker, build claims the content, claim the end
+marker — mirrors `mountSlot`/`when`). `before` (a skeleton-located node, the block's
+`anchorCursor`) places the range among static siblings on create; hydrate ignores it
+(the claim cursor drives placement). Returns the markers + a disposer so the hot path
+can rebuild in place.
+*/
+// @documentation plumbing
+export function mountRange(
+    parent: Node,
+    build: (host: Node, props?: UiProps) => void,
+    props: UiProps | undefined,
+    before: Node | null = null,
+    label: string | undefined = undefined,
+): { start: Comment; end: Comment; dispose: () => void } {
+    const hydration = RENDER.hydration
+    const start = openMarker(parent, '[', before)
+    if (hydration === undefined) {
+        const end = openMarker(parent, ']', before)
+        return fillRange(start, end, build, props, label)
+    }
+    /* Hydrate: adopt the server range in place. Establish the child's lexical scope
+       and render pass (same as `fillRange`), build claiming the existing nodes, then
+       claim the end marker the build's content stops before. */
+    const scoped = withScope(label, () => scope(() => build(parent, props)))
+    const end = openMarker(parent, ']')
+    return { start, end, dispose: disposeRange(scoped, start, end) }
+}

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

@@ -0,0 +1,62 @@
+import { claimExpected } from '../runtime/claimExpected.ts'
+import { OUTLET_CLOSE, OUTLET_OPEN } from '../runtime/OUTLET_MARKER.ts'
+import { PENDING_OUTLET } from '../runtime/PENDING_OUTLET.ts'
+import { RENDER } from '../runtime/RENDER.ts'
+import { commentData } from './commentData.ts'
+
+/*
+A layout's `<slot/>` outlet: an empty `<!--abide:outlet-->`…`<!--/abide:outlet-->`
+boundary the router fills with the next chain layer (`fillBoundary`). No wrapper
+element, so the filled child lays out as a direct child of the slot's parent.
+
+Create: insert the empty boundary at `before` (the anchor's cursor). Hydrate: claim the
+open marker, then SKIP the server-rendered child content — the router re-claims it when
+it fills the boundary — by advancing the parent's claim cursor past the MATCHING close
+(depth-counting nested outlets), so the layout's own claims after the slot stay aligned.
+Records the boundary in `PENDING_OUTLET` (and returns it) so the router learns where the
+next chain layer mounts without scanning the DOM.
+*/
+// @documentation plumbing
+export function outlet(
+    parent: Node,
+    before: Node | null = null,
+): { open: Comment; close: Comment } {
+    const hydration = RENDER.hydration
+    if (hydration === undefined) {
+        const open = document.createComment(OUTLET_OPEN)
+        const close = document.createComment(OUTLET_CLOSE)
+        parent.insertBefore(open, before)
+        parent.insertBefore(close, before)
+        PENDING_OUTLET.current = { open, close }
+        return { open, close }
+    }
+    const open = claimExpected(hydration, parent, 'outlet open marker') as Comment
+    /* Skip to the matching close: depth-count outlet markers (nested child-layer slots
+       are balanced), so a layout wrapping another layout skips its WHOLE subtree. */
+    let depth = 1
+    let node: Node | null = open.nextSibling
+    while (node !== null) {
+        const data = commentData(node)
+        if (data === OUTLET_OPEN) {
+            depth += 1
+        } else if (data === OUTLET_CLOSE) {
+            depth -= 1
+            if (depth === 0) {
+                break
+            }
+        }
+        node = node.nextSibling
+    }
+    /* No matching close — the server stream ended inside the slot (a mid-render error
+       or truncation). Throw AT the divergence like `claimExpected`, rather than store a
+       null close that a later `clearBetween(open, null)` would over-clear to end-of-parent. */
+    if (node === null) {
+        throw new Error(
+            '[abide] hydration desync: outlet open marker has no matching close — the server DOM is truncated inside a layout slot.',
+        )
+    }
+    const close = node as Comment
+    hydration.next.set(parent, close.nextSibling)
+    PENDING_OUTLET.current = { open, close }
+    return { open, close }
+}

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

@@ -0,0 +1,27 @@
+/*
+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 —
+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
+is not callable (`… is not a function`, the misspelled/missing-method case).
+Optional-chained calls are left bare: `?.` means skip-if-absent, not throw, so
+guarding them would change semantics. `.apply(target, …)` preserves the receiver, so
+the method sees the same `this` the bare `target.member(…)` would.
+*/
+// @documentation plumbing
+export function readCall(target: unknown, path: string, member: string, args: unknown[]): unknown {
+    if (target === undefined || target === null) {
+        throw new TypeError(`abide: cannot call .${member}() — scope value "${path}" is ${target}`)
+    }
+    const method = (target as Record<string, unknown>)[member]
+    if (typeof method !== 'function') {
+        throw new TypeError(
+            `abide: cannot call .${member}() — "${path}".${member} is not a function (got ${typeof method})`,
+        )
+    }
+    return (method as (...args: unknown[]) => unknown).apply(target, args)
+}