@abide/abide 0.38.0 → 0.38.1

package/AGENTS.md

@@ -162,7 +162,7 @@ Test suites compile `.abide` and rewrite verbs under `bun test` via `preload = [
 - `abide/ui/enterScope`, `abide/ui/exitScope` — push/pop the lexical scope around an SSR render.
 - `abide/ui/router`, `abide/ui/startClient`, `abide/ui/renderToStream` — the client router, the official client entry (reads `window.__SSR__`, seeds cache, starts the router), and the out-of-order SSR streamer.
 - `abide/ui/remoteProxy`, `abide/ui/socketProxy` — the bundler-emitted client substitutes that swap a server verb/socket import for a `fetch` proxy / ws-multiplexed `Socket`.
-- `abide/ui/dom/*` — the compiled-template DOM runtime (one node-builder per construct): `mount`, `mountChild`, `mountSlot`, `hydrate`, `skeleton`, `cloneStatic`, `anchorCursor`, `text`, `appendText`, `appendTextAt`, `appendSnippet`, `appendStatic`, `attr`, `on`, `attach`, `each`, `eachAsync`, `when`, `awaitBlock`, `tryBlock`, `switchBlock`, `applyResolved`.
+- `abide/ui/dom/*` — the compiled-template DOM runtime (one node-builder per construct): `mount`, `mountChild`, `mountSlot`, `outlet`, `hydrate`, `skeleton`, `cloneStatic`, `anchorCursor`, `text`, `appendText`, `appendTextAt`, `appendSnippet`, `appendStatic`, `attr`, `on`, `attach`, `each`, `eachAsync`, `when`, `awaitBlock`, `tryBlock`, `switchBlock`, `applyResolved`. `outlet` is the marker-range a layout `<slot/>` compiles to (no wrapper element — the router fills it with the next chain layer as a direct child).
 - `abide/ui/runtime/*` — render-pass helpers: `escapeKey` (JSON-Pointer key escaping), `nextBlockId`, `enterRenderPass`, `exitRenderPass`.
 
 ## Build / tooling — @documentation building

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # abide
 
+## 0.38.1
+
+### Patch Changes
+
+- [`67ac25f`](https://github.com/briancray/abide/commit/67ac25faf78b029d0b14659df1e4ec1a05ae7a10) - document outlet marker-range in AGENTS.md surface map ([`ab23673`](https://github.com/briancray/abide/commit/ab236733ee1f81e19ce09ee35fe44624e955a6e4))
+
+- [`67ac25f`](https://github.com/briancray/abide/commit/67ac25faf78b029d0b14659df1e4ec1a05ae7a10) - unify pages/layouts/outlets on marker-range model ([`df1c95f`](https://github.com/briancray/abide/commit/df1c95f89ff8d6d6806606dbece531c6be7aabdf))
+
 ## 0.38.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.38.0",
+    "version": "0.38.1",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",
@@ -89,6 +89,7 @@
         "./ui/dom/skeleton": "./src/lib/ui/dom/skeleton.ts",
         "./ui/dom/anchorCursor": "./src/lib/ui/dom/anchorCursor.ts",
         "./ui/dom/mountSlot": "./src/lib/ui/dom/mountSlot.ts",
+        "./ui/dom/outlet": "./src/lib/ui/dom/outlet.ts",
         "./ui/dom/attr": "./src/lib/ui/dom/attr.ts",
         "./ui/dom/on": "./src/lib/ui/dom/on.ts",
         "./ui/dom/attach": "./src/lib/ui/dom/attach.ts",

package/src/lib/ui/COMPONENT_WRAPPER_PREFIX.ts

@@ -1,4 +1,5 @@
-/* The tag prefix every component instance mounts into (`abide-<name>`). One source
-   for the compiler (componentWrapperTag) and the runtime opacity checks (skeleton,
-   scopeLabel) so the wrapper convention can't drift between build and hydrate. */
+/* The `abide-` tag prefix on framework-owned custom elements (the router's
+   `abide-outlet`, the streaming `abide-resolve`/`abide-cache` fragments). `scopeLabel`
+   strips it to read the outlet host's bare name. Child components no longer mount into
+   an `abide-<name>` wrapper — they build as marker ranges (see `mountRange`). */
 export const COMPONENT_WRAPPER_PREFIX = 'abide-'

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

@@ -30,6 +30,7 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string }[] = [
     { name: 'tryBlock', specifier: 'ui/dom/tryBlock' },
     { name: 'switchBlock', specifier: 'ui/dom/switchBlock' },
     { name: 'mountSlot', specifier: 'ui/dom/mountSlot' },
+    { name: 'outlet', specifier: 'ui/dom/outlet' },
     { name: 'mountChild', specifier: 'ui/dom/mountChild' },
     { name: 'hydrate', specifier: 'ui/dom/hydrate' },
     { name: 'escapeKey', specifier: 'ui/runtime/escapeKey' },

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

@@ -8,11 +8,12 @@ structure AND lets BOTH back-ends feed the same tree to `skeletonContext` — on
 for "a layout slot is an outlet, not an anchor", instead of the client running `asOutlet` while
 SSR mirrors it with an inline special-case.
 
-The outlet is a structural mount container, not styled content, so it carries NO attrs and NO
-style scope — keeping it byte-identical to the placeholder `renderChain` folds the child layer
-into (an exact `<abide-outlet></abide-outlet>` string match). Stripping `scopes` is what makes
-the two back-ends agree: the SSR special-case emitted the outlet bare, but the client clone read
-the slot's annotated `scopes` and stamped them — a hydration mismatch for any scoped layout.
+The outlet is a structural mount point, not styled content, so it carries NO attrs and NO style
+scope — both back-ends lower it to the bare `<!--abide:outlet-->`…`<!--/abide:outlet-->` boundary
+`renderChain` folds the child layer into (matching its `OUTLET_PLACEHOLDER`). Stripping `scopes`
+is what makes the two back-ends agree: SSR emits the boundary bare, but without this the client
+clone would read the slot's annotated `scopes` and stamp them — a hydration mismatch for any
+scoped layout.
 
 Control-flow children are fresh build contexts (their own runtime mounts a nested slot), so they
 are not descended into — a `<slot>` inside an `{#if}` stays a slot node, handled at its own

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

@@ -42,11 +42,13 @@ export function compileModule(
         const id = JSON.stringify(options.moduleId)
         return `const { ${names}, hotReplace } = window.__abide
 ${userImports}
-function component(host, $props) {
-    return mount(host, (host) => {
+function build(host, $props) {
 ${body}
-    })
 }
+function component(host, $props) {
+    return mount(host, build, $props)
+}
+component.build = build
 component.__abideId = ${id}
 if (!hotReplace(${id}, component)) location.reload()
 `
@@ -61,17 +63,17 @@ if (!hotReplace(${id}, component)) location.reload()
        exactly which names it emitted, so it filters here. A name absent from the body
        is unreferenced; erring toward inclusion (a stray match in user script) only
        keeps a harmless unused import, never drops a needed one. */
-    const moduleBody = `export default function component(host, $props) {
-    return mount(host, (host) => {
+    const moduleBody = `function build(host, $props) {
 ${body}
-    })
+}
+
+export default function component(host, $props) {
+    return mount(host, build, $props)
 }
 
 /* Adopt the server-rendered DOM in place instead of rebuilding it. */
 export function hydrateInto(host, $props) {
-    return hydrate(host, (host) => {
-${body}
-    })
+    return hydrate(host, build, $props)
 }
 
 export function render($props) {
@@ -80,6 +82,8 @@ ${ssrBody}
 
 component.render = render
 component.hydrate = hydrateInto
+/* The bare build, so a parent can range-mount this as a nested child (no wrapper). */
+component.build = build
 component.hydratable = ${analyzed.hydratable}
 ${options.moduleId === undefined ? '' : `component.__abideId = ${JSON.stringify(options.moduleId)}\n`}`
     /* Scope each name to the surface that genuinely references it. The SSR body

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

@@ -2,7 +2,6 @@ import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { asOutlet } from './asOutlet.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
-import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { lowerContext } from './lowerContext.ts'
@@ -125,6 +124,16 @@ export function generateBuild(
        block or slot drops an `<!--a-->` anchor at its position and mounts there (see
        `anchorCursor`), so it can sit ANYWHERE among static siblings. Static descendants are
        plain markup. */
+    /* The skeleton anchor var for an anchor-positioned node: declares `an<n> = sk.an[i]` as
+       a bind and returns the var name. The three anchored kinds (control-flow/component,
+       outlet, slot) all mount at this `<!--a-->` anchor, so they number through this ONE
+       site (`anIndex`) — no per-branch copy of the lookup to drift from the runtime scan. */
+    function anchorVarAt(node: TemplateNode, skVar: string, binds: string[]): string {
+        const anchorVar = nextVar('an')
+        binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+        return anchorVar
+    }
+
     function skeletonMarkup(node: TemplateNode, skVar: string, binds: string[]): string {
         if (node.kind === 'text') {
             /* Reactive text reached here is INTERLEAVED with element siblings (a text-leaf
@@ -143,25 +152,17 @@ export function generateBuild(
                 })
                 .join('')
         }
-        if (isControlFlow(node)) {
-            /* A control-flow block at its position: an `<!--a-->` anchor in the clone, the
-               block mounted at it. `anchorCursor` parks the hydrate cursor past the anchor
-               and returns the create insertion reference; the block's parent is the located
-               element the anchor was cloned into (`anchor.parentNode`). */
-            const anchorVar = nextVar('an')
-            binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+        if (isControlFlow(node) || node.kind === 'component') {
+            /* A control-flow block OR a child component at its position: an `<!--a-->` anchor
+               in the clone, its content mounted as a marker-bounded range at it. `anchorCursor`
+               parks the hydrate cursor past the anchor and returns the create insertion
+               reference; the parent is the located element the anchor was cloned into
+               (`anchor.parentNode`). A component takes an anchor like a block — no wrapper
+               element — so its root lays out as a true direct child of `anchor.parentNode`. */
+            const anchorVar = anchorVarAt(node, skVar, binds)
             binds.push(generateChild(node, `${anchorVar}.parentNode`, `anchorCursor(${anchorVar})`))
             return '<!--a-->'
         }
-        if (node.kind === 'component') {
-            /* The wrapper element is a positioned hole in the skeleton; the child mounts
-               into the located node. display:contents (idempotent, static so it lives in
-               the markup) keeps the wrapper out of layout — a pure mount host. */
-            const tag = componentWrapperTag(node.name)
-            const { code } = mountComponent(node, `${skVar}.el[${holeIndex(elIndex, node)}]`)
-            binds.push(code)
-            return `<${tag} ${HOLE_ATTRIBUTE} style="display:contents"></${tag}>`
-        }
         if (node.kind === 'script') {
             /* A nested `<script>` (scoped reactive block) emits no markup — its lowered body
                runs as a bind, in document order, so its signals are declared before the later
@@ -179,11 +180,18 @@ export function generateBuild(
         if (node.kind !== 'element') {
             return '' // <style> emits no markup
         }
+        if (node.tag === OUTLET_TAG) {
+            /* A layout's router fill point at its position: an `<!--a-->` anchor, an empty
+               `outlet` boundary the router fills with the next chain layer (`fillBoundary`).
+               No wrapper element — the filled child lays out as a direct child of the parent. */
+            const anchorVar = anchorVarAt(node, skVar, binds)
+            binds.push(`outlet(${anchorVar}.parentNode, anchorCursor(${anchorVar}));\n`)
+            return '<!--a-->'
+        }
         if (node.tag === 'slot') {
             /* A `<slot>` outlet at its position: an `<!--a-->` anchor, the slot's content
                mounted as a marker-bounded range (`mountSlot`) so it positions like a block. */
-            const anchorVar = nextVar('an')
-            binds.push(`const ${anchorVar} = ${skVar}.an[${holeIndex(anIndex, node)}];\n`)
+            const anchorVar = anchorVarAt(node, skVar, binds)
             const hostVar = nextVar('host')
             binds.push(
                 `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
@@ -246,7 +254,7 @@ export function generateBuild(
        skeleton string (parsed once, cloned per mount) plus each hole's wiring against
        its located node. */
     function generateSkeleton(
-        node: Extract<TemplateNode, { kind: 'element' | 'component' }>,
+        node: Extract<TemplateNode, { kind: 'element' }>,
         parentVar: string,
     ): string {
         const skVar = nextVar('sk')
@@ -283,14 +291,19 @@ export function generateBuild(
                 })
                 .join('')
         }
+        if (node.kind === 'element' && node.tag === OUTLET_TAG) {
+            /* A standalone layout outlet (a top-level/element-nested `<slot/>` rewritten by
+               `asOutlet`, reached outside any skeleton): an empty `outlet` boundary at
+               `before`, no anchor — the router fills it with the next chain layer. */
+            return `outlet(${parentVar}, ${before});\n`
+        }
         if (node.kind === 'element' && node.tag === 'slot') {
-            /* In a layout, `<slot/>` is the router's page outlet: a bare empty `OUTLET_TAG`
-               element the router mounts the next chain layer into, cloned (create) / claimed
-               (hydrate) so it matches the SSR placeholder. (Top-level/nested-in-element layout
-               slots are rewritten to `OUTLET_TAG` up front by `asOutlet`; this covers a slot
-               reached inside a control-flow branch.) */
+            /* In a layout, `<slot/>` is the router's page outlet (`outlet` boundary the
+               router fills with the next chain layer). Top-level/element-nested layout slots
+               are rewritten to `OUTLET_TAG` up front by `asOutlet` and handled above; this
+               covers a layout slot reached inside a control-flow branch. */
             if (isLayout) {
-                return `cloneStatic(${parentVar}, ${JSON.stringify(`<${OUTLET_TAG}></${OUTLET_TAG}>`)});\n`
+                return `outlet(${parentVar}, ${before});\n`
             }
             return generateSlot(node, parentVar)
         }
@@ -314,10 +327,10 @@ export function generateBuild(
             return '' // branches are consumed by their await block, never standalone
         }
         if (node.kind === 'component') {
-            /* A standalone component builds through the skeleton too — its wrapper element
-               is a located hole, the child mounts into it (same as a component nested in a
-               skeletonable element). */
-            return generateSkeleton(node, parentVar)
+            /* A standalone component (top-level, or a bare child of a branch/row/slot) mounts
+               directly as a marker range on `parentVar` at `before` — no anchor, no wrapper,
+               same as a standalone control-flow block routes through `generateIf`/etc. */
+            return generateChildComponent(node, parentVar, before)
         }
         if (node.kind === 'switch') {
             return generateSwitch(node, parentVar, before)
@@ -402,8 +415,6 @@ export function generateBuild(
         return `if ($props && $props.$children) { ${invoke}; } else {\n${fallback}}\n`
     }
 
-    /* Mounts a child component into a wrapper element, passing each prop as a
-       reactive thunk so the child re-reads when the parent expression changes. */
     /* The prop + slot thunks a child mount receives — its props as value thunks and
        its slot content as a host-taking builder (`$children`). */
     function componentParts(node: Extract<TemplateNode, { kind: 'component' }>): string[] {
@@ -417,18 +428,18 @@ export function generateBuild(
         return parts
     }
 
-    /* Mounts a child into a wrapper obtained via `varExpr` (a skeleton-located node).
-       Hydration stays active, so the child adopts its server markup inside the wrapper.
-       Returns the wrapper var. */
-    function mountComponent(
+    /* Mounts a child component as a marker-bounded range on `parentVar`, positioned at
+       `before` (a skeleton anchor's `anchorCursor`, or `null` for a standalone child).
+       `mountRange` opens the `[`/`]` markers and builds the child between them — no
+       wrapper element — so the child's root is a true direct child of `parentVar`.
+       Hydration stays ambient, so the child claims its server range in place. The
+       component name passes as the scope label (the inspector's `<Counter>` name). */
+    function generateChildComponent(
         node: Extract<TemplateNode, { kind: 'component' }>,
-        varExpr: string,
-    ): { code: string; varName: string } {
-        const wrapper = nextVar('cmp')
-        const code =
-            `const ${wrapper} = ${varExpr};\n` +
-            `mountChild(${wrapper}, ${node.name}, { ${componentParts(node).join(', ')} });\n`
-        return { code, varName: wrapper }
+        parentVar: string,
+        before: string,
+    ): string {
+        return `mountChild(${parentVar}, ${node.name}, { ${componentParts(node).join(', ')} }, ${before}, ${JSON.stringify(node.name)});\n`
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a
@@ -633,7 +644,7 @@ imperative. Static text and elements nested INSIDE a qualifying element are fine
 enclosed by its tags.
 */
 function isStaticCloneableElement(node: TemplateNode): boolean {
-    if (node.kind !== 'element' || node.tag === 'slot') {
+    if (node.kind !== 'element' || node.tag === 'slot' || node.tag === OUTLET_TAG) {
         return false
     }
     if (node.attrs.some((attr) => attr.kind !== 'static')) {

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

@@ -1,8 +1,8 @@
+import { OUTLET_CLOSE, OUTLET_OPEN } from '../runtime/OUTLET_MARKER.ts'
 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'
+import { isAnchorPositioned } from './isAnchorPositioned.ts'
 import { lowerContext } from './lowerContext.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
@@ -111,12 +111,12 @@ export function generateSSR(
         inSkeleton.get(node) ? push(target, '<!--a-->') : ''
 
     function generate(node: TemplateNode, target: string): string {
-        /* A control-flow block is positioned by an `<!--a-->` anchor when in a skeleton
-           context. Emit it ONCE here — one decision site gated by the shared `isControlFlow`,
-           mirroring the client's single `skeletonMarkup` control-flow branch — rather than
-           prefixing each block kind's own `anchorMark` call (six sites that had to stay in
-           lock-step). `anchorMark` no-ops outside a skeleton, so non-block nodes ignore it. */
-        const anchor = isControlFlow(node) ? anchorMark(node, target) : ''
+        /* Every kind that mounts as a marker range is positioned by an `<!--a-->` anchor when
+           in a skeleton context: control-flow blocks, child components, and a layout's outlet /
+           a component's `<slot>` (both elements). `isAnchorPositioned` is the ONE decision site
+           (mirrored by the client's `skeletonMarkup`); `anchorMark` no-ops outside a skeleton,
+           so non-anchored nodes ignore the precomputed `anchor`. */
+        const anchor = isAnchorPositioned(node) ? anchorMark(node, target) : ''
         if (node.kind === 'text') {
             return node.parts
                 .map((part) => {
@@ -198,11 +198,11 @@ export function generateSSR(
             return ''
         }
         if (node.kind === 'component') {
-            /* Server-render the child via its `render` and inline the HTML inside
-               the same wrapper the client mounts into, so SSR and client agree.
-               Props pass as thunks; slot content passes as a string-returning
-               `$children` the child invokes from its <slot>. */
-            const tag = componentWrapperTag(node.name)
+            /* Server-render the child via its `render` and inline the HTML inside the same
+               `[ … ]` marker range the client mounts into (`mountRange`) — no wrapper element,
+               so SSR and client agree and the child's root lays out as a direct child. Props
+               pass as thunks; slot content passes as a string-returning `$children` the child
+               invokes from its <slot>. */
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
@@ -224,22 +224,30 @@ export function generateSSR(
                the enclosing render body, including from branch closures.) */
             const result = nextVar('$child')
             return (
-                push(target, `<${tag} style="display:contents">`) +
+                anchor +
+                push(target, RANGE_OPEN) +
                 `const ${result} = ${node.name}.render({ ${parts.join(', ')} });\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +
-                push(target, `</${tag}>`)
+                push(target, RANGE_CLOSE)
             )
         }
+        if (node.kind === 'element' && node.tag === OUTLET_TAG) {
+            /* A layout's router fill point (`asOutlet` rewrote its `<slot/>`): an `<!--a-->`
+               anchor (in a skeleton) + an empty `<!--abide:outlet-->`…`<!--/abide:outlet-->`
+               boundary the chain composer folds the child layer into (`renderChain`) and the
+               client router fills/hydrates (`outlet`/`fillBoundary`) — no wrapper element. */
+            return anchor + push(target, `<!--${OUTLET_OPEN}--><!--${OUTLET_CLOSE}-->`)
+        }
         if (node.kind === 'element' && node.tag === 'slot') {
             /* `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. */
+               `OUTLET_TAG` element (handled above), so a `slot` node reaching here in a layout
+               is control-flow-nested — emit the same empty outlet boundary the client's
+               control-flow-nested path builds, which the chain composer folds the child into. */
             if (isLayout) {
-                return push(target, `<${OUTLET_TAG}></${OUTLET_TAG}>`)
+                return push(target, `<!--${OUTLET_OPEN}--><!--${OUTLET_CLOSE}-->`)
             }
-            return generateSlot(node, target)
+            return generateSlot(node, target, anchor)
         }
         let code = push(target, `<${node.tag}`)
         /* Every `<style>` active at this element (own siblings + ancestors) — same set
@@ -292,6 +300,7 @@ export function generateSSR(
     function generateSlot(
         node: Extract<TemplateNode, { kind: 'element' }>,
         target: string,
+        anchor: string,
     ): string {
         const wrap = inSkeleton.get(node)
         const fallback = generateInto(node.children, target)
@@ -302,7 +311,7 @@ export function generateSSR(
         if (!wrap) {
             return body
         }
-        return `${anchorMark(node, target)}${openRange(target)}${body}${closeRange(target)}`
+        return `${anchor}${openRange(target)}${body}${closeRange(target)}`
     }
 
     /* Boundary markers + a `$awaits` registration carrying the promise and

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

@@ -0,0 +1,19 @@
+import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { isControlFlow } from './isControlFlow.ts'
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/*
+The node kinds that mount as a marker range and so take an `<!--a-->` anchor when in a
+skeleton — control-flow, child component, and the two outlet elements (a layout's
+`OUTLET_TAG`, a component's `<slot>`). The single positioning predicate every back-end
+shares — `generateSSR` gates its anchor emission on it, `skeletonContext` gates its anchor
+indexing on it — so SSR, the client clone, and the shared numberer cannot disagree on which
+nodes anchor.
+*/
+export function isAnchorPositioned(node: TemplateNode): boolean {
+    return (
+        isControlFlow(node) ||
+        node.kind === 'component' ||
+        (node.kind === 'element' && (node.tag === OUTLET_TAG || node.tag === 'slot'))
+    )
+}

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

@@ -5,7 +5,9 @@ A control-flow block — `if`/`each`/`await`/`switch`/`try`. In a skeleton each
 `<!--a-->` anchor cloned into its located parent at the block's position (see `anchorCursor`),
 so a block can sit ANYWHERE among static siblings. The shared classification under block
 anchor placement: both back-ends — and `skeletonable` — consult this so they agree on which
-nodes are anchor-positioned, the way `componentWrapperTag`/`isTextLeaf` already are.
+nodes are anchor-positioned. A child component is anchor-positioned too (it mounts as a
+`[`…`]` range like a block, see `mountRange`); the back-ends OR this with `kind ===
+'component'` rather than folding it in here, since a standalone component routes differently.
 */
 export function isControlFlow(node: TemplateNode): boolean {
     return (

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

@@ -8,7 +8,7 @@ located element (`generateBuild`) / emits it without an `<!--a-->` prefix (`gene
 reactive text interleaved with element children is anchor-positioned instead. Computing it
 once keeps the SSR string and the client skeleton from disagreeing about a `<!--a-->` — the
 first slice of lifting the positional model out of the two parallel traversals, alongside
-the already-shared `componentWrapperTag` and `skeletonable`.
+the already-shared `isControlFlow` and `skeletonable`.
 */
 export function isTextLeaf(node: Extract<TemplateNode, { kind: 'element' }>): boolean {
     return node.children.every((child) => child.kind === 'text' || child.kind === 'style')

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/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)
+    }
+}