@abide/abide 0.37.0 → 0.38.1

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

@@ -1,7 +1,7 @@
 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'
@@ -32,12 +32,29 @@ export function generateBuild(
     let counter = 0
     const nextVar = (prefix: string): string => `${prefix}${counter++}`
 
+    /* In a layout, `<slot/>` outlets are rewritten to `OUTLET_TAG` elements up front
+       (`asOutlet`) so the static-clone path carries them as ordinary structure. `asOutlet`
+       CLONES every element it descends through and drops the slot's anchor hole, so the
+       shared skeleton context must walk THIS rewritten tree — the one the build traversal
+       below reads — or its node-keyed hole indices key the originals and never match. */
+    const rootNodes = isLayout ? nodes.map(asOutlet) : nodes
+
     /* Per-node skeleton position from the SAME pass the SSR back-end reads — so the client's
        anchor/text-leaf decisions consult one source of truth instead of re-deriving the
-       position structurally (the drift the shared context exists to prevent). `asOutlet`
-       only rewrites layout `<slot>`s and preserves text-node identity, so the original
-       `nodes` key the same text markers the build traversal looks up. */
-    const { markText } = skeletonContext(nodes)
+       position structurally (the drift the shared context exists to prevent). */
+    const { markText, elIndex, anIndex } = skeletonContext(rootNodes)
+
+    /* The hole's index, assigned by the shared skeletonContext walk — the sole numberer. A
+       missing entry means this back-end reached a hole the shared walk didn't number: a
+       structural divergence between the two, surfaced loudly at compile time rather than as a
+       runtime hydration desync. */
+    function holeIndex(map: WeakMap<object, number>, key: object): number {
+        const index = map.get(key)
+        if (index === undefined) {
+            throw new Error('[abide] skeleton hole not numbered by the shared positional walk')
+        }
+        return index
+    }
 
     /* The shared signal→`model` lowering + branch-scoped nested-script deref scope. */
     const {
@@ -107,12 +124,17 @@ 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. */
-    function skeletonMarkup(
-        node: TemplateNode,
-        skVar: string,
-        counter: { el: number; an: number },
-        binds: string[],
-    ): string {
+    /* 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
                is bound via `generateChildren` instead). It can't be element-positioned, so
@@ -124,31 +146,23 @@ export function generateBuild(
                         return staticTextPart(part.value)
                     }
                     binds.push(
-                        `appendTextAt(${skVar}.an[${counter.an++}], () => (${lowerExpression(part.code)}));\n`,
+                        `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], () => (${lowerExpression(part.code)}));\n`,
                     )
                     return '<!--a-->'
                 })
                 .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[${counter.an++}];\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[${counter.el++}]`)
-            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
@@ -166,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[${counter.an++}];\n`)
+            const anchorVar = anchorVarAt(node, skVar, binds)
             const hostVar = nextVar('host')
             binds.push(
                 `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
@@ -195,7 +216,7 @@ export function generateBuild(
                index BEFORE recursing, so holes number in pre-order — the order the runtime's
                path walk produces them. */
             elVar = nextVar('el')
-            binds.push(`const ${elVar} = ${skVar}.el[${counter.el++}];\n`)
+            binds.push(`const ${elVar} = ${skVar}.el[${holeIndex(elIndex, node)}];\n`)
             openTag += ` ${HOLE_ATTRIBUTE}`
             for (const attr of node.attrs) {
                 if (attr.kind !== 'static') {
@@ -224,7 +245,7 @@ export function generateBuild(
         /* A nested `<script>` among the children scopes its bindings to this subtree (its
            later siblings auto-deref them); pop after. */
         const inner = withNestedScripts(node.children, () =>
-            node.children.map((child) => skeletonMarkup(child, skVar, counter, binds)).join(''),
+            node.children.map((child) => skeletonMarkup(child, skVar, binds)).join(''),
         )
         return `${openTag}${inner}</${node.tag}>`
     }
@@ -233,12 +254,12 @@ 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')
         const binds: string[] = []
-        const html = skeletonMarkup(node, skVar, { el: 0, an: 0 }, binds)
+        const html = skeletonMarkup(node, skVar, binds)
         return `const ${skVar} = skeleton(${parentVar}, ${JSON.stringify(html)});\n${binds.join('')}`
     }
 
@@ -270,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)
         }
@@ -301,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)
@@ -389,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[] {
@@ -404,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
@@ -595,20 +619,7 @@ export function generateBuild(
         )
     }
 
-    /* In a layout the `<slot/>` page outlet is a bare empty `OUTLET_TAG` element (the
-       router fills it later) — exactly the SSR placeholder. Rewriting it to an element
-       node up front lets the static-clone path carry it as ordinary structure. */
-    function asOutlet(node: TemplateNode): TemplateNode {
-        if (node.kind !== 'element') {
-            return node
-        }
-        if (node.tag === 'slot') {
-            return { ...node, tag: OUTLET_TAG, attrs: [], children: [] }
-        }
-        return { ...node, children: node.children.map(asOutlet) }
-    }
-
-    return generateChildren(isLayout ? nodes.map(asOutlet) : nodes, hostVar)
+    return generateChildren(rootNodes, hostVar)
 }
 
 /* A text node that is purely whitespace (no interpolation, only blank static
@@ -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,7 +1,8 @@
+import { OUTLET_CLOSE, OUTLET_OPEN } from '../runtime/OUTLET_MARKER.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
-import { componentWrapperTag } from './componentWrapperTag.ts'
+import { asOutlet } from './asOutlet.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'
@@ -18,6 +19,17 @@ import { VOID_TAGS } from './VOID_TAGS.ts'
 const RANGE_OPEN = '<!--[-->'
 const RANGE_CLOSE = '<!--]-->'
 
+/* The `then`/`catch`/`finally` branch child of an await/try block, or undefined. */
+function branchNamed(
+    children: TemplateNode[],
+    which: 'then' | 'catch' | 'finally',
+): Extract<TemplateNode, { kind: 'branch' }> | undefined {
+    return children.find(
+        (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
+            child.kind === 'branch' && child.branch === which,
+    )
+}
+
 /*
 Server code generator: turns the parsed template into statements that push HTML
 fragments onto an output array, reading the document synchronously (no DOM, no
@@ -64,11 +76,17 @@ export function generateSSR(
         return children.map((child) => generate(child, target)).join('')
     }
 
+    /* In a layout, rewrite `<slot/>` outlets to `OUTLET_TAG` elements up front (the same shared
+       `asOutlet` the client back-end runs), then drive both the skeleton context and the
+       traversal from this tree — one decision site for the outlet, and the outlet emitted bare
+       through the generic element path exactly as the client clones it. */
+    const rootNodes = isLayout ? nodes.map(asOutlet) : nodes
+
     /* Per-node skeleton position, computed once. Both back-ends read this single source of
        truth so their `<!--a-->` anchor placement cannot drift — the fresh-context boundaries
        (control-flow branches, component/slot/snippet content) are enumerated there, not
        re-tracked here as mutable state that a forgotten reset could leak past. */
-    const { inSkeleton, markText } = skeletonContext(nodes)
+    const { inSkeleton, markText } = skeletonContext(rootNodes)
 
     /* A control-flow branch's content, generated exactly like a normal child list so
        a branch holds ANY content (components, text, nested blocks). `generate` emits
@@ -93,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) => {
@@ -180,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)})`,
             )
@@ -206,20 +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') {
-            /* A layout's `<slot/>` is the router's page outlet: emit an empty
-               placeholder the chain composer folds the child layer's html into. */
+            /* `asOutlet` already rewrote a layout's top-level/element-nested `<slot/>` to an
+               `OUTLET_TAG` element (handled 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
@@ -272,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)
@@ -282,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
@@ -291,17 +320,12 @@ export function generateSSR(
        an empty boundary — its resolved branch is the children bound to `node.as` — and
        flags the entry so `renderToStream` settles it before the first flush. */
     function generateAwait(node: Extract<TemplateNode, { kind: 'await' }>, target: string): string {
-        const branchOf = (which: 'then' | 'catch' | 'finally') =>
-            node.children.find(
-                (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                    child.kind === 'branch' && child.branch === which,
-            )
-        const catchBranch = branchOf('catch')
-        const finallyChildren = branchOf('finally')?.children ?? []
+        const catchBranch = branchNamed(node.children, 'catch')
+        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
         /* Resolved branch + its bound value: the children directly when blocking, the
            `then` child when streaming. Pending (streaming only) is the non-branch
            children. */
-        const thenBranch = branchOf('then')
+        const thenBranch = branchNamed(node.children, 'then')
         const resolvedChildren = node.blocking
             ? node.children.filter((child) => child.kind !== 'branch')
             : (thenBranch?.children ?? [])
@@ -342,13 +366,8 @@ export function generateSSR(
        an enclosing boundary / the 500 / the stream). Boundary comments let hydration
        discard the server content if the client adoption fails. */
     function generateTry(node: Extract<TemplateNode, { kind: 'try' }>, target: string): string {
-        const branchOf = (which: 'catch' | 'finally') =>
-            node.children.find(
-                (child): child is Extract<TemplateNode, { kind: 'branch' }> =>
-                    child.kind === 'branch' && child.branch === which,
-            )
-        const catchBranch = branchOf('catch')
-        const finallyChildren = branchOf('finally')?.children ?? []
+        const catchBranch = branchNamed(node.children, 'catch')
+        const finallyChildren = branchNamed(node.children, 'finally')?.children ?? []
         const guarded = node.children.filter((child) => child.kind !== 'branch')
         const errName = catchBranch?.as ?? '_error'
         const id = nextVar('$tid')
@@ -371,5 +390,5 @@ export function generateSSR(
         return code
     }
 
-    return generateInto(nodes, '$out')
+    return generateInto(rootNodes, '$out')
 }

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/parseTemplate.ts

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

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

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