@abide/abide 0.43.1 → 0.44.1

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

@@ -1,14 +1,25 @@
 import { decodeHtmlEntities } from './decodeHtmlEntities.ts'
+import { interpolatedTemplateLiteral } from './interpolatedTemplateLiteral.ts'
 import { isWhitespaceText } from './isWhitespaceText.ts'
 import type { TemplateAttr } from './types/TemplateAttr.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import type { TextPart } from './types/TextPart.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
+/* Compiled once — the parser tests these per source character, so a per-call literal
+   would recompile them across the whole template scan. */
+const WHITESPACE = /\s/
+const WHITESPACE_OR_GT = /[\s>]/
+const ATTR_NAME_END = /[\s=>/]/
+const TAG_NAME_END = /[\s>/]/
+const UPPERCASE_START = /^[A-Z]/
+const AWAIT_PREFIX = /^await\b/
+const LEADING_KEYWORD = /^\s*(\S+)/
+
 /*
 A minimal compile-time parser for the abide template subset: elements, text with
 `{expr}` interpolation, static/`{expr}`/`on<event>={expr}` attributes, and
-`<template each as key>` control flow. Not a full HTML parser — it covers what
+`{#if}/{#for}/{#await}/{#switch}/{#try}` block control flow. Not a full HTML parser — it covers what
 components need and reads brace expressions with quote/nesting awareness so an
 expression containing `<`, `>`, or `}` parses intact. Void elements self-close.
 `<!-- … -->` comments are dropped (no node emitted) so they leave no trace in the
@@ -73,7 +84,9 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
     /* True when `cursor` is on a `<style>` open tag — read raw (`readStyle`) so its
        CSS braces never misparse as `{expr}` interpolations. */
     function atStyleTag(): boolean {
-        return source.startsWith('<style', cursor) && /[\s>]/.test(source.charAt(cursor + 6))
+        return (
+            source.startsWith('<style', cursor) && WHITESPACE_OR_GT.test(source.charAt(cursor + 6))
+        )
     }
 
     /* Reads a `<style>…</style>` block into a `style` node carrying its CSS body; an
@@ -97,6 +110,19 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         return source.charAt(cursor) === '{' && source.charAt(cursor + 1) === '#'
     }
 
+    /* `{children()}` is the slot fill point — the content a parent passed (a component)
+       or the route chain below (a layout). It parses to the SAME node the retired `<slot>`
+       element produced, so every downstream helper that branches on `tag === 'slot'` is
+       unchanged. */
+    const CHILDREN_CALL = /^\{\s*children\s*\(\s*\)\s*\}/
+    function atChildrenCall(): boolean {
+        return source.charAt(cursor) === '{' && CHILDREN_CALL.test(source.slice(cursor))
+    }
+    function readChildrenCall(): TemplateNode {
+        cursor = source.indexOf('}', cursor) + 1 // consume `{children()}`
+        return { kind: 'element', tag: 'slot', attrs: [], children: [] }
+    }
+
     /* Reads a `{#…}` / `{:…}` / `{/…}` token starting on `{`. Tracks string literals
        and nested braces (same scan as readBracedExpression) so a brace/quote inside an
        expression (`{#if obj.has('}')}`) doesn't end the token early. Returns the sigil,
@@ -132,13 +158,14 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
     /* The leading keyword of a directive body (`if`, `for`, `await`, `switch`, `try`,
        `else`, `then`, `catch`, `finally`, `case`, `default`). */
     function headKeyword(body: string): string {
-        const match = body.match(/^\s*(\S+)/)
+        const match = body.match(LEADING_KEYWORD)
         return match?.[1] ?? ''
     }
 
     /* Reads a `{#…}` control block: the open token, its children up to a continuation
-       `{:…}` (a branch) or close `{/…}`, recursing. Emits the same nodes toControlFlow
-       does today (if/each/await/switch/try + case/branch children). */
+       `{:…}` (a branch) or close `{/…}`, recursing. Emits `if`/`each`/`await`/`switch`/`try`
+       nodes with their `case`/`branch` children — the same TemplateNode kinds the back-ends
+       and `skeletonContext` consume. */
     function readBlock(): TemplateNode {
         const open = readBlockToken() // sigil is '#'
         const keyword = headKeyword(open.body)
@@ -207,8 +234,32 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             const children = readBlockChildren('try')
             return { kind: 'try', children }
         }
+        if (keyword === 'snippet') {
+            const head = open.body.slice(open.body.indexOf('snippet') + 'snippet'.length).trim()
+            const parenAt = head.indexOf('(')
+            const name = (parenAt === -1 ? head : head.slice(0, parenAt)).trim()
+            if (name === '') {
+                throw new Error('[abide] {#snippet} requires a name, e.g. {#snippet row(item)}')
+            }
+            /* Params ride the parens: `{#snippet row({ item })}` → `{ item }`. */
+            const params =
+                parenAt === -1
+                    ? undefined
+                    : head.slice(parenAt + 1, head.lastIndexOf(')')).trim() || undefined
+            const children = readBlockChildren('snippet')
+            return {
+                kind: 'snippet',
+                name,
+                params,
+                children,
+                loc:
+                    parenAt === -1
+                        ? undefined
+                        : exprLoc(open.loc, open.body, open.body.indexOf('(') + 1),
+            }
+        }
         throw new Error(
-            `[abide] unknown control block {#${keyword}} — expected if/for/await/switch/try`,
+            `[abide] unknown control block {#${keyword}} — expected if/for/await/switch/try/snippet`,
         )
     }
 
@@ -227,6 +278,8 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         }
         if (atBlock()) {
             nodes.push(readBlock())
+        } else if (atChildrenCall()) {
+            nodes.push(readChildrenCall())
         } else if (source.startsWith('<!--', cursor)) {
             skipComment()
         } else if (atStyleTag()) {
@@ -243,7 +296,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
        `{:…}` ends the current branch's children and starts a new `case`/`branch` node
        (per construct). The leading children (before the first `{:…}`) are the block's
        own children (the `if`/`await`/`try` then-content). Returns the full children list
-       INCLUDING the case/branch nodes, matching toControlFlow's output. */
+       INCLUDING the case/branch nodes, producing the same TemplateNode tree the back-ends consume. */
     function readBlockChildren(keyword: string): TemplateNode[] {
         const nodes: TemplateNode[] = []
         while (cursor < source.length) {
@@ -403,6 +456,9 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         let literal = ''
         while (cursor < source.length && source.charAt(cursor) !== '<') {
             if (source.charAt(cursor) === '{') {
+                if (atChildrenCall()) {
+                    break // a slot fill point — handled by the enclosing scan loop
+                }
                 const next = source.charAt(cursor + 1)
                 if (next === '#' || next === ':' || next === '/') {
                     break // a block/continuation/close token — not interpolation
@@ -427,7 +483,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
     function readAttributes(): TemplateAttr[] {
         const attrs: TemplateAttr[] = []
         while (cursor < source.length) {
-            while (/\s/.test(source.charAt(cursor))) {
+            while (WHITESPACE.test(source.charAt(cursor))) {
                 cursor += 1
             }
             const char = source.charAt(cursor)
@@ -454,11 +510,11 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             }
             let name = ''
             const nameLoc = baseOffset + cursor // absolute offset of the attribute name
-            while (cursor < source.length && !/[\s=>/]/.test(source.charAt(cursor))) {
+            while (cursor < source.length && !ATTR_NAME_END.test(source.charAt(cursor))) {
                 name += source.charAt(cursor)
                 cursor += 1
             }
-            while (/\s/.test(source.charAt(cursor))) {
+            while (WHITESPACE.test(source.charAt(cursor))) {
                 cursor += 1
             }
             if (source.charAt(cursor) !== '=') {
@@ -466,7 +522,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 continue
             }
             cursor += 1 // past '='
-            while (/\s/.test(source.charAt(cursor))) {
+            while (WHITESPACE.test(source.charAt(cursor))) {
                 cursor += 1
             }
             if (source.charAt(cursor) === '{') {
@@ -487,18 +543,44 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             } else if (source.charAt(cursor) === '"' || source.charAt(cursor) === "'") {
                 const quote = source.charAt(cursor)
                 cursor += 1
-                let value = ''
+                /* Scan the quoted span into static/`{expr}` parts (the text-node model),
+                   reusing the brace/quote-aware expression reader so a `}` inside an
+                   expression doesn't close the value early. */
+                const parts: TextPart[] = []
+                let literal = ''
                 while (cursor < source.length && source.charAt(cursor) !== quote) {
-                    value += source.charAt(cursor)
-                    cursor += 1
+                    if (source.charAt(cursor) === '{') {
+                        if (literal !== '') {
+                            parts.push({ kind: 'static', value: decodeHtmlEntities(literal) })
+                            literal = ''
+                        }
+                        const { code, loc } = readBracedExpression()
+                        parts.push({ kind: 'expression', code, loc })
+                    } else {
+                        literal += source.charAt(cursor)
+                        cursor += 1
+                    }
                 }
                 cursor += 1 // past closing quote
-                attrs.push({ kind: 'static', name, value, nameLoc })
+                if (literal !== '') {
+                    parts.push({ kind: 'static', value: decodeHtmlEntities(literal) })
+                }
+                /* No `{expr}` → a plain static attribute; its literal is entity-decoded
+                   like a text node (SSR/clone re-escape it), so a value such as `&amp;`
+                   round-trips instead of double-escaping. Otherwise an interpolated value. */
+                if (parts.every((part) => part.kind === 'static')) {
+                    const value = parts
+                        .map((part) => (part.kind === 'static' ? part.value : ''))
+                        .join('')
+                    attrs.push({ kind: 'static', name, value, nameLoc })
+                } else {
+                    attrs.push({ kind: 'interpolated', name, parts, nameLoc })
+                }
             } 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))) {
+                while (cursor < source.length && !WHITESPACE_OR_GT.test(source.charAt(cursor))) {
                     /* Stop before a `/` that closes the tag (`<Comp x=y/>`) so the value
                        doesn't swallow the self-closing slash and defeat detection; a `/`
                        elsewhere (e.g. a URL `href=/a/b`) stays part of the value. */
@@ -518,7 +600,7 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
         cursor += 1 // past '<'
         let tag = ''
         const tagStart = cursor // absolute (baseOffset-relative) offset of the tag name
-        while (cursor < source.length && !/[\s>/]/.test(source.charAt(cursor))) {
+        while (cursor < source.length && !TAG_NAME_END.test(source.charAt(cursor))) {
             tag += source.charAt(cursor)
             cursor += 1
         }
@@ -533,6 +615,9 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
            verbatim to its `</script>` (not parsed as markup), scoped by the
            containing branch when compiled. */
         if (tag === 'script' && !selfClosing) {
+            /* Body starts at the current cursor; its absolute source offset lets the shadow
+               map a diagnostic raised inside it (e.g. a top-level await) back to source. */
+            const bodyLoc = baseOffset + cursor
             const close = source.indexOf('</script>', cursor)
             const end = close === -1 ? source.length : close
             const code = source.slice(cursor, end)
@@ -549,11 +634,11 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                     "import statements must live in the component's leading <script>, not a nested <template> script — they hoist to module scope for the whole template. For lazy loading, use a dynamic import() inside an effect.",
                 )
             }
-            return { kind: 'script', code }
+            return { kind: 'script', code, loc: bodyLoc }
         }
         /* A capitalised tag is a child component; its attributes become props and
            its children become slot content (rendered where the child puts <slot>). */
-        if (/^[A-Z]/.test(tag)) {
+        if (UPPERCASE_START.test(tag)) {
             const slotted = selfClosing ? [] : readChildren(tag)
             return {
                 kind: 'component',
@@ -569,6 +654,11 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             throw new Error('[abide] {...expr} spread is not supported on a <template> directive')
         }
         const children = selfClosing || VOID_TAGS.has(tag) ? [] : readChildren(tag)
+        if (tag === 'slot') {
+            throw new Error(
+                '[abide] the <slot> element was removed — render passed content with {children()} (with {#if children}{children()}{:else}…{/if} for a fallback)',
+            )
+        }
         if (tag === 'template') {
             return toSnippetOrTemplate(attrs, children)
         }
@@ -601,6 +691,8 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
                 nodes.push(readStyle())
             } else if (atBlock()) {
                 nodes.push(readBlock())
+            } else if (atChildrenCall()) {
+                nodes.push(readChildrenCall())
             } else if (source.charAt(cursor) === '<') {
                 nodes.push(readElement())
             } else {
@@ -619,6 +711,8 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             roots.push(readStyle())
         } else if (atBlock()) {
             roots.push(readBlock())
+        } else if (atChildrenCall()) {
+            roots.push(readChildrenCall())
         } else if (source.charAt(cursor) === '<') {
             roots.push(readElement())
         } else {
@@ -682,8 +776,8 @@ function keywordAtDepthZero(text: string, word: string): number {
             depth === 0 &&
             text.startsWith(word, i) &&
             i > 0 &&
-            /\s/.test(text.charAt(i - 1)) &&
-            (i + word.length === text.length || /\s/.test(text.charAt(i + word.length)))
+            WHITESPACE.test(text.charAt(i - 1)) &&
+            (i + word.length === text.length || WHITESPACE.test(text.charAt(i + word.length)))
         ) {
             return i
         }
@@ -740,13 +834,13 @@ function parseForHead(
     const leadingSpace = (text: string): number => text.length - text.trimStart().length
     const skipSpace = (i: number): number => {
         let at = i
-        while (at < body.length && /\s/.test(body.charAt(at))) {
+        while (at < body.length && WHITESPACE.test(body.charAt(at))) {
             at += 1
         }
         return at
     }
     let bindingStart = skipSpace(body.indexOf('for') + 3)
-    const isAsync = /^await\b/.test(body.slice(bindingStart))
+    const isAsync = AWAIT_PREFIX.test(body.slice(bindingStart))
     if (isAsync) {
         bindingStart = skipSpace(bindingStart + 'await'.length)
     }
@@ -903,6 +997,15 @@ function toProps(
                 nameLoc: attr.nameLoc,
             }
         }
+        /* `label="hi {name}"` — a string-valued prop, the template-literal concatenation
+           of its parts (lowered downstream like any other prop value). */
+        if (attr.kind === 'interpolated') {
+            return {
+                name: attr.name,
+                code: interpolatedTemplateLiteral(attr.parts),
+                nameLoc: attr.nameLoc,
+            }
+        }
         /* Every non-static kind keeps its `code`/`loc`; only the prop name differs —
            a directive (`event`/`bind`/`class`/`style`/`attach`) round-trips to its written
            name as a passthrough prop. */
@@ -925,24 +1028,6 @@ function toProps(
     })
 }
 
-/* The literal text of an attribute (a static value or an expression's code);
-   undefined for event/bind attributes, which a directive never is. */
-function attrText(attr: TemplateAttr): string | undefined {
-    if (attr.kind === 'static') {
-        return attr.value
-    }
-    if (attr.kind === 'expression') {
-        return attr.code
-    }
-    return undefined
-}
-
-/* The source offset of an attribute expression's code (see TextPart.loc); only
-   expression attributes carry one — a static value isn't a checkable expression. */
-function attrLoc(attr: TemplateAttr | undefined): number | undefined {
-    return attr !== undefined && attr.kind === 'expression' ? attr.loc : undefined
-}
-
 /* The attribute's source name (`on<event>`/`bind:<property>` reconstructed). */
 function attrName(attr: TemplateAttr): string {
     if (attr.kind === 'event') {
@@ -970,7 +1055,6 @@ function attrName(attr: TemplateAttr): string {
     return attr.name
 }
 
-/* Turns a `<template>` directive into a control node (if/each/await + then/catch). */
 /* The control-flow attribute names that used to drive `<template>` directives — now
    moved to `{#…}` blocks. A `<template>` carrying one is a migration error. */
 const CONTROL_DIRECTIVES = new Set([
@@ -988,10 +1072,9 @@ const CONTROL_DIRECTIVES = new Set([
     'try',
 ])
 
-/* A `<template>` is now ONLY a snippet declaration (`name`) or a plain inert
-   `<template>` element. Control flow moved to `{#…}` blocks; a directive attribute
-   (`if`/`each`/`await`/…) is a migration error pointing at the block form. `name`
-   makes the element callable; without it, it stays an inert reusable fragment. */
+/* A `<template>` is now ONLY a plain inert element (e.g. client-side cloning).
+   Snippet declarations moved to `{#snippet name(args)}…{/snippet}` blocks; control
+   flow moved to `{#…}` blocks — both throw migration errors here. */
 function toSnippetOrTemplate(attrs: TemplateAttr[], children: TemplateNode[]): TemplateNode {
     const find = (name: string) => attrs.find((attr) => attrName(attr) === name)
     const directive = attrs.find((attr) => CONTROL_DIRECTIVES.has(attrName(attr)))
@@ -1002,22 +1085,12 @@ function toSnippetOrTemplate(attrs: TemplateAttr[], children: TemplateNode[]): T
             `[abide] <template ${name}> control flow was removed — use the {#${block}…} block instead`,
         )
     }
-    /* `<template name="row" args={item}>` declares a snippet — a named builder. `args`
-       (its parameter list) rides the `{…}` expression slot. */
-    const snippet = find('name')
-    if (snippet !== undefined) {
-        const name = attrText(snippet)
-        if (name === undefined || name === '') {
-            throw new Error('[abide] <template name> requires a snippet name')
-        }
-        const params = find('args')
-        return {
-            kind: 'snippet',
-            name,
-            params: params === undefined ? undefined : attrText(params),
-            children,
-            loc: attrLoc(params),
-        }
+    /* `<template name>` snippet declarations were retired for the `{#snippet name(args)}`
+       block — reject with a migration error. */
+    if (find('name') !== undefined) {
+        throw new Error(
+            '[abide] <template name> snippet declarations were removed — use a {#snippet name(args)}…{/snippet} block',
+        )
     }
     /* A plain inert `<template>` element (e.g. client-side cloning) — keep as an element. */
     return { kind: 'element', tag: 'template', attrs, children }

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

@@ -0,0 +1,47 @@
+import { destructureBindingNames } from './destructureBindingNames.ts'
+import { isPlainIdentifier } from './isPlainIdentifier.ts'
+import type { Binding } from './types/Binding.ts'
+
+/* How the client back-end binds a `reactive` Binding (an `await` `then` value, a keyed
+   `each` item / index): the value arrives as a `.value` cell the runtime can update in
+   place, so the consuming branch/row re-runs in place on a re-settle/re-key rather than
+   being rebuilt. THE RENDERER of a `reactive` classification — it takes the Binding the
+   plan declared, never a raw author param, so a back-end can only render what the plan
+   classified. `param` is the thunk's value parameter (the cell), `prefix` declares any
+   per-leaf readers, `localNames` (the Binding's leaf names) enter the deref scope for the
+   body. A plain identifier reads the cell directly (`item` → `item.value`); a destructure
+   re-applies over the cell per read so each leaf stays reactive (JS handles
+   defaults/rest/rename/nesting). */
+export type ReactiveBindingWiring = {
+    param: string
+    prefix: string
+    localNames: string[]
+}
+
+/* Renders a `reactive` Binding's cell wiring for the client back-end. `nextVar` mints the
+   synthetic cell/derive vars; `lowerStatement` lowers the destructure declaration so a
+   default/computed-key initializer referencing a component signal is rewritten to its
+   `model`/cell form (the bound leaf names are name-slots, untouched). */
+export function reactiveBinding(
+    binding: Binding,
+    nextVar: (hint: string) => string,
+    lowerStatement: (code: string) => string,
+): ReactiveBindingWiring {
+    const authorParam = binding.name
+    if (isPlainIdentifier(authorParam)) {
+        return { param: authorParam, prefix: '', localNames: [authorParam] }
+    }
+    const cellParam = nextVar('aw')
+    const deriveVar = nextVar('ad')
+    const leaves = destructureBindingNames(authorParam)
+    const declaration = lowerStatement(`const ${authorParam} = ${cellParam}.value`)
+    const prefix =
+        `const ${deriveVar} = { get value() { ${declaration} return { ${leaves.join(', ')} }; } };\n` +
+        leaves
+            .map(
+                (leaf) =>
+                    `const ${leaf} = { get value() { return ${deriveVar}.value.${leaf}; } };\n`,
+            )
+            .join('')
+    return { param: cellParam, prefix, localNames: leaves }
+}

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

@@ -3,12 +3,12 @@ import { TS_PRINTER } from './TS_PRINTER.ts'
 
 /*
 Rewrites references to a component's signal bindings into the document form the
-rest of the pipeline understands: a `state` binding `count` becomes `model.count`
+rest of the pipeline understands: a `state` binding `count` becomes `$$model.count`
 (data access `lowerDocAccess` then lowers to a patch/read), and a `computed`
 binding `total` becomes `total.value`. Only value-position identifiers are
 touched — declaration names, parameter names, and property names are collected
 into a skip set first, and object shorthand (`{ count }`) is expanded to
-`{ count: model.count }`. This is the bridge from the signal surface the author
+`{ count: $$model.count }`. This is the bridge from the signal surface the author
 writes to the patch substrate underneath.
 
 The rewrite is lexically scope-aware: a reference whose name is re-bound by an
@@ -37,7 +37,7 @@ export function renameSignalRefs(
 The signal-rewrite as a `ts.TransformerFactory`, so the script pipeline can chain it
 with `docAccessTransformer` over a SINGLE parsed tree (see `lowerScript`) instead of
 print-then-reparse between passes. `renameSignalRefs` is the standalone string wrapper
-kept for per-expression callers (`lowerContext`).
+kept for test and one-off callers.
 */
 export function signalRefsTransformer(
     stateNames: ReadonlySet<string>,
@@ -47,6 +47,12 @@ export function signalRefsTransformer(
        `<script>` declaration) — a nearer lexical scope than the component signals, so a
        name here shadows a same-named `state`/`computed`/`derived` and derefs as a cell. */
     blockLocal: ReadonlySet<string> = new Set(),
+    /* Block-local PLAIN bindings — an SSR `await` `then` value bound as a real JS local
+       holding the plain resolved value, not a reactive cell. Like `blockLocal` it shadows
+       a same-named component signal (it is a nearer lexical scope), but it derefs as the
+       bare identifier, not `.value`: SSR declares `const foo = <resolved>`, so a reference
+       reads the local directly. Seeded into the root shadow set so it is left untouched. */
+    blockLocalPlain: ReadonlySet<string> = new Set(),
 ): ts.TransformerFactory<ts.SourceFile> {
     /* The signal names that a nested binding can shadow — only these matter for
        scope tracking, so we ignore every other local binding. */
@@ -55,6 +61,16 @@ export function signalRefsTransformer(
         ...derivedNames,
         ...computedNames,
         ...blockLocal,
+        /* The reserved slot reader (`{#if children}` → `$props?.$children`) is rewritten
+           through `referenceFor` like a signal, so it inherits the same lexical-scope
+           tracking: a `{#snippet row(children)}` arg, a `{#for children of …}` item, a
+           script param named `children` re-binds it for that subtree and is left untouched. */
+        'children',
+        /* `scope` is the author-facing reactive entry (`scope().state(...)`), lowered to the
+           reserved `$$scope` import so a user variable named `scope` can never collide — but
+           shadowably: a `const scope`/param `scope` re-binds it for that subtree and is left
+           untouched, exactly like a signal name. */
+        'scope',
     ])
     return (context) => (root) => {
         /* The identifier nodes that are names, not value reads — collected by walking
@@ -89,7 +105,7 @@ export function signalRefsTransformer(
                 if (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) {
                     return node
                 }
-                /* Shorthand `{ count }` → `{ count: model.count }` / `{ total: total.value }`,
+                /* Shorthand `{ count }` → `{ count: $$model.count }` / `{ total: total.value }`,
                    unless a nearer scope shadows the name. */
                 if (ts.isShorthandPropertyAssignment(node) && !shadowed.has(node.name.text)) {
                     const replacement = referenceFor(
@@ -126,7 +142,7 @@ export function signalRefsTransformer(
             }
             return visit
         }
-        return ts.visitNode(root, makeVisitor(new Set())) as ts.SourceFile
+        return ts.visitNode(root, makeVisitor(new Set(blockLocalPlain))) as ts.SourceFile
     }
 }
 
@@ -314,11 +330,12 @@ function functionParameters(node: ts.Node): ts.NodeArray<ts.ParameterDeclaration
     return undefined
 }
 
-/* `model.<name>` for a state binding, `<name>()` for a computed doc-slot (the
+/* `$$model.<name>` for a state binding, `<name>()` for a computed doc-slot (the
    string-free reader `scope().derive` returns), `<name>.value` for a runtime cell
-   (linked / lens / transform-state), else undefined. A `blockLocal` binding shadows
-   any same-named component signal — it is a nearer lexical scope — so it derefs as a
-   cell (`<name>.value`) regardless of a colliding `state`/`computed`/`derived`. */
+   (linked / lens / transform-state), `$props?.$children` for the reserved slot reader,
+   else undefined. A `blockLocal` binding shadows any same-named component signal — it is
+   a nearer lexical scope — so it derefs as a cell (`<name>.value`) regardless of a
+   colliding `state`/`computed`/`derived`, and ahead of the `children` slot reader. */
 function referenceFor(
     name: string,
     stateNames: ReadonlySet<string>,
@@ -329,8 +346,25 @@ function referenceFor(
     if (blockLocal.has(name)) {
         return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier(name), 'value')
     }
+    /* `{children()}` is a slot NODE the parser handles; any other bare `children` read
+       (notably `{#if children}`) is the reserved reader. `?.` guards a propless mount. */
+    if (name === 'children') {
+        return ts.factory.createPropertyAccessChain(
+            ts.factory.createIdentifier('$props'),
+            ts.factory.createToken(ts.SyntaxKind.QuestionDotToken),
+            ts.factory.createIdentifier('$children'),
+        )
+    }
+    /* The author-facing reactive entry `scope` lowers to its reserved `$$scope` import (the
+       value read only — a `.scope` member or a shadowing local is never reached here). */
+    if (name === 'scope') {
+        return ts.factory.createIdentifier('$$scope')
+    }
     if (stateNames.has(name)) {
-        return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('model'), name)
+        return ts.factory.createPropertyAccessExpression(
+            ts.factory.createIdentifier('$$model'),
+            name,
+        )
     }
     if (computedNames.has(name)) {
         return ts.factory.createCallExpression(ts.factory.createIdentifier(name), undefined, [])

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

@@ -4,11 +4,11 @@ import type { TemplateNode } from './types/TemplateNode.ts'
 
 /* Whether a subtree is skeleton STRUCTURE — anything the parser-backed clone can carry with
    its holes mounted in place: elements, `<style>`, text (static OR reactive), child
-   components (their wrapper element is positioned in the skeleton), control-flow blocks and
-   `<slot>` outlets (each anchor-mounted at its position), and emit-nothing nodes — a nested
-   `<script>` (a scoped reactive block) and a `<template name>` snippet (a hoisted builder),
-   both of which the skeleton's bind list runs in document order, scoped like
-   `generateElement` does. Only a standalone `branch`/`case` (consumed by its block, never a
+   components (anchor-positioned via an `<!--a-->` marker in the skeleton), control-flow
+   blocks and `<slot>` outlets (each anchor-mounted at its position), and emit-nothing nodes
+   — a nested `<script>` (a scoped reactive block) and a `{#snippet}` block (a hoisted
+   builder), both of which the skeleton's bind list runs in document order, scoped like
+   `generateChild` does. Only a standalone `branch`/`case` (consumed by its block, never a
    loose child) disqualifies. */
 function skeletonStructure(node: TemplateNode): boolean {
     if (isControlFlow(node) || node.kind === 'component') {

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

@@ -0,0 +1,28 @@
+import type { Binding } from './types/Binding.ts'
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* The structural shape of a `snippet` declaration (`<template name="row" args={item}>`),
+   resolved once so the build and SSR back-ends share one reading of it and only own emission.
+   Both previously read the name, the raw `args` source, and the body straight off the node.
+   The `args` params are now classified ONCE here as `bindings` (`plain` — real call
+   parameters, not cells), the single source both back-ends register through `withBindings`. */
+export type SnippetPlan = {
+    /* The snippet's name — the hoisted builder function's identifier and call name. */
+    name: string
+    /* The raw `args` source spliced into the builder's parameter list, or undefined. */
+    params: string | undefined
+    /* The snippet body. */
+    children: TemplateNode[]
+    /* The body's bindings: the `args` params (`plain`); empty when the snippet takes none. */
+    bindings: Binding[]
+}
+
+/* Reads a `snippet` node's structure into the shared structural plan. */
+export function snippetPlan(node: Extract<TemplateNode, { kind: 'snippet' }>): SnippetPlan {
+    return {
+        name: node.name,
+        params: node.params,
+        children: node.children,
+        bindings: node.params === undefined ? [] : [{ name: node.params, classification: 'plain' }],
+    }
+}

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

@@ -7,13 +7,13 @@ both back-ends pass this set to skip those keys from the spread — keeping the
 server string and the client DOM congruent (no duplicate attribute, and no
 SSR-first-wins vs client-spread-wins divergence). Excluding by NAME (not by a
 runtime present/absent check) means the two sides agree regardless of a dynamic
-attribute's runtime value. Static and dynamic (`{expr}`) attrs contribute their
-name, a `bind:` its property, an `on<event>` its `on…` form; `attach`/`spread`
-carry no attribute name.
+attribute's runtime value. Static, dynamic (`{expr}`), and interpolated
+(`"… {expr} …"`) attrs contribute their name, a `bind:` its property, an
+`on<event>` its `on…` form; `attach`/`spread` carry no attribute name.
 */
 export function spreadExcludedNames(attrs: TemplateAttr[]): string[] {
     return attrs.flatMap((attr) => {
-        if (attr.kind === 'static' || attr.kind === 'expression') {
+        if (attr.kind === 'static' || attr.kind === 'expression' || attr.kind === 'interpolated') {
             return [attr.name]
         }
         if (attr.kind === 'bind') {

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

@@ -6,10 +6,9 @@ HTML grammar sees only as text and the shadow program lowers away. A pure scan o
 raw source (independent of a successful parse, so it survives mid-edit), it emits
 an `operator` token for the `{`+sigil opener and a `keyword` token for the block
 word, plus the `of`/`by` connectors inside a `{#for …}` head. Expression interiors
-(and the `{@const}`/`{@html}` tags and bare `{expr}` interpolations) are NOT touched
-here — those are the shadow's job. A keyword allowlist after the sigil prevents
-matching arbitrary `{:foo}` text. Longest phrases first so `for await` beats `for`
-and `else if` beats `else`.
+and bare `{expr}` interpolations are NOT touched here — those are the shadow's job.
+A keyword allowlist after the sigil prevents matching arbitrary `{:foo}` text.
+Longest phrases first so `for await` beats `for` and `else if` beats `else`.
 */
 const BLOCK_KEYWORDS = [
     'for await',