@abide/abide 0.37.0 → 0.38.1

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'
@@ -5,74 +7,134 @@ 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 }`). `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.
+
+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/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>()
+
+    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 `<!--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 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++)
+            }
             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. */
+        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++)
+            }
             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/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/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/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/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/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/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()