@abide/abide 0.33.1 → 0.34.0

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

@@ -6,23 +6,25 @@ import type { CompiledShadow, ShadowMapping } from './types/CompiledShadow.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
 /*
-Framework callables the `.abide` loader injects into a component's scope, imported
-into the shadow with their real types so author calls (`effect`, `html`, …)
-type-check. `state`/`derived` are imported too as a fallback for stray uses; their
-declarations are rewritten to value types so the import is normally unused (fine —
-the shadow program disables noUnusedLocals). `prop` has no runtime export, so it
-never appears here — every `prop()` declaration is rewritten away. `$props` is the
-legacy untyped prop bag (pre-`prop()` sugar) made available raw.
+Framework callables the `.abide` loader injects into a component's scope. `effect`,
+`html`, `snippet`, and `scope` keep their real published types via imports so author
+calls type-check — `scope()` is the authored reactive surface (`scope().state(...)` /
+`.computed(...)` / `.undo()` …), so it must resolve like any import. `state`/`linked`/
+`computed` are ALSO declared ambiently as a fallback for the rare bare/nested use the
+top-level rewrite doesn't project (their top-level declarations become value types, so
+these are normally unused — fine, the shadow disables noUnusedLocals). `prop` is sugar
+too, but every `prop()` declaration is rewritten away, so it never appears here.
+`$props` is the legacy untyped prop bag (pre-`prop()` sugar) made available raw.
 */
-const SHADOW_PREAMBLE = `import { state } from '${ABIDE_PACKAGE_NAME}/ui/state'
-import { linked } from '${ABIDE_PACKAGE_NAME}/ui/linked'
-import { derived } from '${ABIDE_PACKAGE_NAME}/ui/derived'
-import { effect } from '${ABIDE_PACKAGE_NAME}/ui/effect'
-import { doc } from '${ABIDE_PACKAGE_NAME}/ui/doc'
+const SHADOW_PREAMBLE = `import { effect } from '${ABIDE_PACKAGE_NAME}/ui/effect'
 import { html } from '${ABIDE_PACKAGE_NAME}/shared/html'
 import { snippet } from '${ABIDE_PACKAGE_NAME}/shared/snippet'
+import { scope } from '${ABIDE_PACKAGE_NAME}/ui/scope'
+declare function state<T>(initial?: T, transform?: (next: T, previous: T) => T): { value: T }
+declare function linked<T>(seed: () => T, transform?: (next: T, previous: T) => T): { value: T }
+declare function computed<T>(compute: () => T): { readonly value: T }
 declare const $props: Record<string, (() => unknown) | undefined>
-void [state, linked, derived, effect, doc, html, snippet]
+void [effect, html, snippet, scope]
 `
 
 /*
@@ -35,10 +37,10 @@ returned segments.
 
 The script's signal surface is rewritten to value types:
   let count = state(0)            →  let count = (0)
-  const total = derived(() => …)  →  const total = (() => …)()
+  const total = computed(() => …)  →  const total = (() => …)()
   let title = prop<string>('t')   →  Props field + `let title = props['t']`
 Everything else (functions, plain consts, imports) is emitted verbatim, so
-expressions inside it (e.g. a derived's compute body) are checked and mapped too.
+expressions inside it (e.g. a computed's compute body) are checked and mapped too.
 */
 export function compileShadow(source: string): CompiledShadow {
     const builder = createBuilder()
@@ -188,7 +190,7 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
    projects the leading script's scope: reactive declarations become their value
    type, every other statement stays verbatim. Returns the projected source text
    (unmapped — nested scripts carry no source offset yet), so a branch's markup
-   reads a nested signal as its value type instead of the raw `State`/`Derived`. */
+   reads a nested signal as its value type instead of the raw `State`/`Computed`. */
 function projectNestedScript(code: string): string {
     const file = ts.createSourceFile('nested.ts', code, ts.ScriptTarget.Latest, true)
     const verbatim = (node: ts.Node): string => code.slice(node.getStart(file), node.getEnd())
@@ -205,7 +207,7 @@ function projectNestedScript(code: string): string {
         .join('\n')
 }
 
-/* The `state`/`derived`/`prop` declarations in a variable statement, or undefined
+/* The `state`/`computed`/`prop` declarations in a variable statement, or undefined
    if it isn't one declaring them (so the caller emits it verbatim). A statement
    mixing reactive and plain declarations is rare; treated as all-verbatim. */
 function reactiveDeclarations(statement: ts.Statement): ts.VariableDeclaration[] | undefined {
@@ -217,19 +219,21 @@ function reactiveDeclarations(statement: ts.Statement): ts.VariableDeclaration[]
     return reactive.length === declarations.length && reactive.length > 0 ? reactive : undefined
 }
 
-/* The callee name of a `NAME = state(...)` / `linked(...)` / `derived(...)` /
-   `prop(...)` decl. */
+/* The callee name of a `NAME = state(...)` / `linked(...)` / `computed(...)` /
+   `prop(...)` decl — bare or the explicit scope form (`scope().state(...)` / `c.state(...)`),
+   receiver-agnostic (the method name marks it reactive). */
 function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     const initializer = declaration.initializer
-    if (
-        initializer !== undefined &&
-        ts.isCallExpression(initializer) &&
-        ts.isIdentifier(initializer.expression) &&
-        REACTIVE_CALLEES.has(initializer.expression.text)
-    ) {
-        return initializer.expression.text
+    if (initializer === undefined || !ts.isCallExpression(initializer)) {
+        return undefined
     }
-    return undefined
+    const callee = initializer.expression
+    const name = ts.isIdentifier(callee)
+        ? callee.text
+        : ts.isPropertyAccessExpression(callee)
+          ? callee.name.text
+          : undefined
+    return name !== undefined && REACTIVE_CALLEES.has(name) ? name : undefined
 }
 
 /* Builds one scope line for a reactive declaration, projecting it to its value
@@ -242,7 +246,10 @@ function scopeLineFor(
 ): ScopeLine {
     const name = ts.isIdentifier(declaration.name) ? declaration.name.text : '_'
     const call = declaration.initializer as ts.CallExpression
-    const callee = (call.expression as ts.Identifier).text
+    /* Bare callee (`state`) or member callee (`scope().state` / `c.state`). */
+    const callee = ts.isPropertyAccessExpression(call.expression)
+        ? call.expression.name.text
+        : (call.expression as ts.Identifier).text
     if (callee === 'state') {
         /* state<T>(initial): T is the value type — carry it onto the `let` so an
            explicit annotation isn't lost to `any`/`any[]` inference of the initial. */
@@ -257,23 +264,31 @@ function scopeLineFor(
                a guard like `x !== undefined` collapse to `never`). Unguarded access is
                then correctly flagged possibly-undefined; a guard narrows cleanly. */
             const valueType = annotation === '' ? ': unknown' : `${annotation} | undefined`
-            return { text: `let ${name}!${valueType};`, segments: [] }
+            /* map the binding name (offset 4, past `let `) so hover/go-to resolve on it */
+            return { text: `let ${name}!${valueType};`, segments: [span(declaration.name, 4)] }
         }
         const prefix = `let ${name}${annotation} = (`
-        return { text: `${prefix}${verbatim(init)});`, segments: [span(init, prefix.length)] }
+        return {
+            text: `${prefix}${verbatim(init)});`,
+            segments: [span(declaration.name, 4), span(init, prefix.length)],
+        }
     }
-    if (callee === 'derived' || callee === 'linked') {
-        /* derived<T>(compute) / linked<T>(seed): T is the value type — the call's
+    if (callee === 'computed' || callee === 'linked') {
+        /* computed<T>(compute) / linked<T>(seed): T is the value type — the call's
            first arg is a thunk, so invoking it yields the value. Annotate so an
            explicit type argument isn't lost to inference of the thunk's return. */
         const typeNode = call.typeArguments?.[0]
         const annotation = typeNode === undefined ? '' : `: ${verbatim(typeNode)}`
         const fn = call.arguments[0]
         if (fn === undefined) {
-            return { text: `const ${name} = undefined;`, segments: [] }
+            /* map the binding name (offset 6, past `const `) for hover/go-to */
+            return { text: `const ${name} = undefined;`, segments: [span(declaration.name, 6)] }
         }
         const prefix = `const ${name}${annotation} = (`
-        return { text: `${prefix}${verbatim(fn)})();`, segments: [span(fn, prefix.length)] }
+        return {
+            text: `${prefix}${verbatim(fn)})();`,
+            segments: [span(declaration.name, 6), span(fn, prefix.length)],
+        }
     }
     /* prop<T>('key'): Props field `key[?]: T`, scope binding read from props. */
     const key = call.arguments[0]
@@ -282,7 +297,10 @@ function scopeLineFor(
     const typeText = typeNode === undefined ? 'unknown' : verbatim(typeNode)
     const optional = typeNode === undefined || /\bundefined\b/.test(typeText)
     props.push(`    ${JSON.stringify(keyText)}${optional ? '?' : ''}: ${typeText}`)
-    return { text: `let ${name} = props[${JSON.stringify(keyText)}];`, segments: [] }
+    return {
+        text: `let ${name} = props[${JSON.stringify(keyText)}];`,
+        segments: [span(declaration.name, 4)],
+    }
 }
 
 /* Emits a sibling list — each node standalone via `emitNode`. */
@@ -464,7 +482,7 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             return
         case 'script':
             /* A scoped reactive `<script>`: value-project its reactive declarations to
-               their value types (`derived(…)` → the computed value, `state(…)` → the
+               their value types (`computed(…)` → the computed value, `state(…)` → the
                initial) exactly as the leading script's scope lines are, so the branch's
                markup type-checks a nested signal as its value — matching the runtime,
                which derefs nested-script signals through the rest of the branch. Emitted

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

@@ -2,20 +2,46 @@ import ts from 'typescript'
 import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 import { renameSignalRefs } from './renameSignalRefs.ts'
 
+/* The reactive primitives that must be reached through a scope (`prop` is excluded — it
+   reads parent-passed props, not scope data, so it stays a bare call). A bare call to one
+   of these is a compile error: reactive state is owned by a scope and the surface must show
+   it (`scope().state(...)`), so a reader always sees the scope interaction. */
+const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed'])
+
+/* Throws if the script calls a scope primitive bare (`state(0)`) instead of through a scope
+   (`scope().state(0)` / `c.state(0)`). Walks all calls, so a stray one nested in a function
+   is caught too, not just top-level declarations. */
+function assertScopedPrimitives(source: ts.SourceFile): void {
+    const visit = (node: ts.Node): void => {
+        if (
+            ts.isCallExpression(node) &&
+            ts.isIdentifier(node.expression) &&
+            SCOPE_PRIMITIVES.has(node.expression.text)
+        ) {
+            const name = node.expression.text
+            throw new Error(
+                `abide: bare \`${name}(...)\` is not allowed — reactive state lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
+            )
+        }
+        ts.forEachChild(node, visit)
+    }
+    visit(source)
+}
+
 /*
 Desugars the signal surface into the document form. A component's `<script>`
 declares reactive state as signals:
 
   let count = state(0)
   let items = state([])
-  const total = derived(() => count + items.length)
+  const total = computed(() => count + items.length)
 
 This collects the binding names, turns each plain `state(initial)` declaration
 into an initialising assignment on a shared `model` document (in source order, so
 a later state can read an earlier one), keeps the rest, then renames every
 reference through `renameSignalRefs`. Plain `state` becomes `model.x` access that
 `lowerDocAccess` lowers to patches/reads — the document substrate's deep,
-fine-grained, serializable reactivity for free. `linked`, `derived`, and
+fine-grained, serializable reactivity for free. `linked`, `computed`, and
 `state(initial, transform)` stay verbatim as runtime `.value` cells (referenced
 as `name.value`): they own no doc slot, so they reseed/recompute on resume rather
 than serialize. No reactive declarations → the script is returned untouched (the
@@ -25,10 +51,13 @@ export function desugarSignals(scriptBody: string): {
     code: string
     stateNames: Set<string>
     derivedNames: Set<string>
+    computedNames: Set<string>
 } {
     const source = ts.createSourceFile('script.ts', scriptBody, ts.ScriptTarget.Latest, true)
+    assertScopedPrimitives(source)
     const stateNames = new Set<string>()
     const derivedNames = new Set<string>()
+    const computedNames = new Set<string>()
     for (const statement of source.statements) {
         if (!ts.isVariableStatement(statement)) {
             continue
@@ -41,39 +70,129 @@ export function desugarSignals(scriptBody: string): {
             if (isPlainStateSlot(declaration)) {
                 /* Plain `state(initial)` → a serializable `model` doc slot. */
                 stateNames.add(declaration.name.text)
+            } else if (isComputedSlot(declaration)) {
+                /* Read-only `computed(compute)` / `prop` → a computed `scope().derive`
+                   doc slot, referenced as `name()` (its string-free reader): a function
+                   of other paths, recomputed via the graph, never stored/serialized. */
+                computedNames.add(declaration.name.text)
             } else if (callee !== undefined && REACTIVE_CALLEES.has(callee)) {
-                /* `.value` cells, referenced as `name.value`: `linked`, `derived`, a
-                   `prop` (reads like a read-only derived), and `state(initial, transform)`
-                   (the transform must run on writes, so it can't be a bare doc slot). */
+                /* `.value` cells: `linked` and `state(initial, transform)` — they own
+                   a local store, so they stay cells (`computed` is always the read-only
+                   slot above; there is no writable-computed cell). */
                 derivedNames.add(declaration.name.text)
             }
         }
     }
-    if (stateNames.size === 0 && derivedNames.size === 0) {
-        return { code: scriptBody, stateNames, derivedNames }
+    if (stateNames.size === 0 && derivedNames.size === 0 && computedNames.size === 0) {
+        return { code: scriptBody, stateNames, derivedNames, computedNames }
     }
 
     const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed })
     const lines: string[] = []
     if (stateNames.size > 0) {
-        lines.push('const model = doc({})')
+        lines.push('const model = scope()')
     }
     for (const statement of source.statements) {
         const stateAssignments = stateDeclarationAssignments(statement, printer, source)
+        const computedDeclarations = computedDeclarationLines(statement, printer, source)
         const propDeclarations = propDeclarationLines(statement, printer, source)
+        const cellDeclarations = cellDeclarationLines(statement, printer, source)
         if (stateAssignments !== undefined) {
             lines.push(...stateAssignments)
+        } else if (computedDeclarations !== undefined) {
+            lines.push(...computedDeclarations)
         } else if (propDeclarations !== undefined) {
             lines.push(...propDeclarations)
+        } else if (cellDeclarations !== undefined) {
+            lines.push(...cellDeclarations)
         } else {
             lines.push(printer.printNode(ts.EmitHint.Unspecified, statement, source))
         }
     }
     return {
-        code: renameSignalRefs(lines.join('\n'), stateNames, derivedNames),
+        code: renameSignalRefs(lines.join('\n'), stateNames, derivedNames, computedNames),
         stateNames,
         derivedNames,
+        computedNames,
+    }
+}
+
+/* True for a read-only computed slot — `computed(compute)` with no write-through
+   `set`, or a `prop` (a read-only computed over the parent thunk). The writable
+   `computed(compute, set)` lens keeps a `.value` cell (handled by the caller). */
+function isComputedSlot(declaration: ts.VariableDeclaration): boolean {
+    const callee = signalCallee(declaration)
+    if (callee === 'prop') {
+        return true
+    }
+    const initializer = declaration.initializer
+    return (
+        callee === 'computed' &&
+        initializer !== undefined &&
+        ts.isCallExpression(initializer) &&
+        initializer.arguments.length === 1
+    )
+}
+
+/* A `.value`-cell signal declaration — a `linked` or a `state(initial, transform)` —
+   routed onto the scope: `linked(seed)` → `const x = scope().linked(seed)`. The cell
+   stays a standalone non-serializing cell (its refs stay `name.value`); the rewrite only
+   removes the bare runtime import so the sole reactive surface is `scope()`. */
+function cellDeclarationLines(
+    statement: ts.Statement,
+    printer: ts.Printer,
+    source: ts.SourceFile,
+): string[] | undefined {
+    if (!ts.isVariableStatement(statement)) {
+        return undefined
+    }
+    const lines: string[] = []
+    for (const declaration of statement.declarationList.declarations) {
+        const callee = signalCallee(declaration)
+        if (
+            !ts.isIdentifier(declaration.name) ||
+            (callee !== 'linked' && callee !== 'state') ||
+            isPlainStateSlot(declaration)
+        ) {
+            return undefined
+        }
+        const args = (declaration.initializer as ts.CallExpression).arguments
+            .map((argument) => printer.printNode(ts.EmitHint.Unspecified, argument, source))
+            .join(', ')
+        lines.push(`const ${declaration.name.text} = scope().${callee}(${args})`)
+    }
+    return lines
+}
+
+/* `let total = computed(compute)` → `const total = scope().derive("total", compute)`
+   — a computed doc slot whose reader the references lower to `total()`. */
+function computedDeclarationLines(
+    statement: ts.Statement,
+    printer: ts.Printer,
+    source: ts.SourceFile,
+): string[] | undefined {
+    if (!ts.isVariableStatement(statement)) {
+        return undefined
+    }
+    const lines: string[] = []
+    for (const declaration of statement.declarationList.declarations) {
+        if (
+            !ts.isIdentifier(declaration.name) ||
+            signalCallee(declaration) !== 'computed' ||
+            !isComputedSlot(declaration)
+        ) {
+            return undefined
+        }
+        const compute = (declaration.initializer as ts.CallExpression).arguments[0]
+        const computeText =
+            compute === undefined
+                ? '() => undefined'
+                : printer.printNode(ts.EmitHint.Unspecified, compute, source)
+        lines.push(
+            `const ${declaration.name.text} = scope().derive(${JSON.stringify(declaration.name.text)}, ${computeText})`,
+        )
     }
+    return lines
 }
 
 /* True for `state(initial, transform)` — the write-coercion transform forces a
@@ -94,20 +213,28 @@ function isPlainStateSlot(declaration: ts.VariableDeclaration): boolean {
     return signalCallee(declaration) === 'state' && !hasTransform(declaration)
 }
 
-/* The callee name of a `NAME = state(...)` / `derived(...)` declaration, else undefined. */
+/* The callee name of a reactive declaration, else undefined. Recognises both the bare
+   form (`NAME = state(...)`) and the explicit scope form (`NAME = scope().state(...)` or
+   `NAME = c.state(...)` for any scope handle `c`) — receiver-agnostic: the METHOD name is
+   what marks the binding reactive. Since `scope()` is the ambient scope (one object per
+   level), the receiver is irrelevant to lowering — the slot keys off the binding name and
+   lands on the same `model`, so the explicit form lowers exactly like the bare one. */
 function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
     const initializer = declaration.initializer
-    if (
-        initializer !== undefined &&
-        ts.isCallExpression(initializer) &&
-        ts.isIdentifier(initializer.expression)
-    ) {
-        return initializer.expression.text
+    if (initializer === undefined || !ts.isCallExpression(initializer)) {
+        return undefined
+    }
+    const callee = initializer.expression
+    if (ts.isIdentifier(callee)) {
+        return callee.text
+    }
+    if (ts.isPropertyAccessExpression(callee)) {
+        return callee.name.text
     }
     return undefined
 }
 
-/* If `statement` declares `prop(...)` bindings, returns a reactive derived over
+/* If `statement` declares `prop(...)` bindings, returns a reactive computed over
    the parent-supplied `$props` thunk for each; otherwise undefined. The optional
    call (`?.()`) tolerates an omitted prop. */
 function propDeclarationLines(
@@ -126,7 +253,9 @@ function propDeclarationLines(
         const key = (declaration.initializer as ts.CallExpression).arguments[0]
         const keyText =
             key === undefined ? "''" : printer.printNode(ts.EmitHint.Unspecified, key, source)
-        lines.push(`const ${declaration.name.text} = derived(() => $props[${keyText}]?.())`)
+        lines.push(
+            `const ${declaration.name.text} = scope().derive(${JSON.stringify(declaration.name.text)}, () => $props[${keyText}]?.())`,
+        )
     }
     return lines
 }

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

@@ -3,6 +3,8 @@ import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
 import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { isControlFlow } from './isControlFlow.ts'
+import { isTextLeaf } from './isTextLeaf.ts'
 import { lowerContext } from './lowerContext.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { staticAttr } from './staticAttr.ts'
@@ -24,6 +26,7 @@ export function generateBuild(
     hostVar: string,
     stateNames: ReadonlySet<string>,
     derivedNames: ReadonlySet<string>,
+    computedNames: ReadonlySet<string>,
     isLayout = false,
 ): string {
     let counter = 0
@@ -34,7 +37,9 @@ export function generateBuild(
         expression: lowerExpression,
         statement: lowerStatement,
         withNestedScripts,
-    } = lowerContext(stateNames, derivedNames)
+        bindRead,
+        bindWrite,
+    } = lowerContext(stateNames, derivedNames, computedNames)
 
     /* Emits the wiring for one non-static attribute against an already-obtained skeleton
        element var — reactive `attr`, `on` listener, `attach`, or a two-way `bind`. */
@@ -75,14 +80,15 @@ export function generateBuild(
                 `on(${varName}, "change", () => { const $groupValue = ${value}; if (${varName}.checked) { if (!(${lowerExpression(attr.code)}).includes($groupValue)) { ${lowerStatement(`${attr.code}.push($groupValue)`)} } } else { const $groupIndex = (${lowerExpression(attr.code)}).indexOf($groupValue); if ($groupIndex !== -1) { ${lowerStatement(`delete ${attr.code}[$groupIndex]`)} } } });\n`
             )
         }
-        /* Two-way: drive the property from the path, and write the path back on the
+        /* Two-way: drive the property from the bind target, and write it back on the
            property's native event (`input` for most fields, but `toggle` for
-           `<details open>`, `change` for checked/select). The path is an lvalue, so
-           the write lowers to an assignment. */
+           `<details open>`, `change` for checked/select). An lvalue target reads as
+           itself and writes by assignment; an accessor object (`{ get, set }`) reads via
+           `.get()` and writes via `.set(v)` — see `bindRead`/`bindWrite`. */
         const event = bindListenEvent(attr.property, node.tag)
         return (
-            `effect(() => { ${varName}.${attr.property} = ${lowerExpression(attr.code)}; });\n` +
-            `on(${varName}, ${JSON.stringify(event)}, () => { ${lowerStatement(`${attr.code} = ${varName}.${attr.property}`)} });\n`
+            `effect(() => { ${varName}.${attr.property} = ${bindRead(attr.code)}; });\n` +
+            `on(${varName}, ${JSON.stringify(event)}, () => { ${bindWrite(attr.code, `${varName}.${attr.property}`)} });\n`
         )
     }
 
@@ -117,7 +123,7 @@ export function generateBuild(
                 })
                 .join('')
         }
-        if (isControlFlowNode(node)) {
+        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
@@ -172,10 +178,7 @@ export function generateBuild(
         /* A text-leaf (only text/style children) with reactive text binds marker-free via
            `generateChildren` on the located element; otherwise reactive text is interleaved
            and uses `<!--a-->` anchors during the child recursion below. */
-        const isTextLeaf = node.children.every(
-            (child) => child.kind === 'text' || child.kind === 'style',
-        )
-        const textLeafBind = hasReactiveText && isTextLeaf
+        const textLeafBind = hasReactiveText && isTextLeaf(node)
         let openTag = `<${node.tag}`
         let elVar = ''
         if (hasReactiveAttr || textLeafBind) {
@@ -496,11 +499,7 @@ export function generateBuild(
             (child) =>
                 child.kind === 'element' ||
                 child.kind === 'component' ||
-                child.kind === 'if' ||
-                child.kind === 'each' ||
-                child.kind === 'await' ||
-                child.kind === 'try' ||
-                child.kind === 'switch' ||
+                isControlFlow(child) ||
                 child.kind === 'snippet' ||
                 (child.kind === 'text' && !isWhitespaceText(child)),
         )
@@ -603,18 +602,6 @@ export function generateBuild(
     return generateChildren(isLayout ? nodes.map(asOutlet) : nodes, hostVar)
 }
 
-/* A control-flow block — `if`/`each`/`await`/`switch`/`try`. In a skeleton each mounts at
-   an `<!--a-->` anchor cloned into its located parent at the block's position. */
-function isControlFlowNode(node: TemplateNode): boolean {
-    return (
-        node.kind === 'if' ||
-        node.kind === 'each' ||
-        node.kind === 'await' ||
-        node.kind === 'switch' ||
-        node.kind === 'try'
-    )
-}
-
 /* A text node that is purely whitespace (no interpolation, only blank static
    parts). Both back-ends drop it, so it neither contributes markup nor breaks a
    static clone run — it stays transparent so `<a/>\n<b/>` still coalesces. */

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

@@ -1,6 +1,8 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { isControlFlow } from './isControlFlow.ts'
+import { isTextLeaf } from './isTextLeaf.ts'
 import { lowerContext } from './lowerContext.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonable } from './skeletonable.ts'
@@ -35,6 +37,7 @@ export function generateSSR(
     nodes: TemplateNode[],
     stateNames: ReadonlySet<string>,
     derivedNames: ReadonlySet<string>,
+    computedNames: ReadonlySet<string>,
     isLayout = false,
 ): string {
     /* Compile-time counter for unique temp var names (runtime block ids, child render
@@ -47,7 +50,8 @@ export function generateSSR(
         expression: lowerExpression,
         statement,
         withNestedScripts,
-    } = lowerContext(stateNames, derivedNames)
+        bindRead,
+    } = lowerContext(stateNames, derivedNames, computedNames)
 
     /* A scoped-script body for SSR: the shared lowering, then strip effects
        (client-only lifecycle that emits no HTML) — the one SSR-side asymmetry. */
@@ -98,6 +102,12 @@ export function generateSSR(
     const anchorMark = (target: string): string => (inSkeleton ? 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(target) : ''
         if (node.kind === 'text') {
             return node.parts
                 .map((part) => {
@@ -119,7 +129,7 @@ export function generateSSR(
             if (elseBranch !== undefined && elseBranch.kind === 'case') {
                 code += ` else {\n${branchContent(elseBranch.children, target)}}`
             }
-            return `${anchorMark(target)}${openRange(target)}${code}\n${closeRange(target)}`
+            return `${anchor}${openRange(target)}${code}\n${closeRange(target)}`
         }
         if (node.kind === 'switch') {
             const cases = node.children.filter(
@@ -137,7 +147,7 @@ export function generateSSR(
             if (fallback !== undefined) {
                 code += `${started ? 'else ' : ''}{\n${branchContent(fallback.children, target)}}\n`
             }
-            return `${anchorMark(target)}${openRange(target)}${code}}\n${closeRange(target)}`
+            return `${anchor}${openRange(target)}${code}}\n${closeRange(target)}`
         }
         if (node.kind === 'case') {
             return ''
@@ -165,15 +175,15 @@ export function generateSSR(
                skeleton the `<!--a-->` anchor still marks its position (the client mounts
                there); no range markers, since there are no server rows to claim. */
             if (node.async) {
-                return anchorMark(target)
+                return anchor
             }
-            return `${anchorMark(target)}for (const ${node.as} of (${lowerExpression(node.items)})) {\n${openRange(target)}${branchContent(node.children, target)}${closeRange(target)}}\n`
+            return `${anchor}for (const ${node.as} of (${lowerExpression(node.items)})) {\n${openRange(target)}${branchContent(node.children, target)}${closeRange(target)}}\n`
         }
         if (node.kind === 'await') {
-            return `${anchorMark(target)}${generateAwait(node, target)}`
+            return `${anchor}${generateAwait(node, target)}`
         }
         if (node.kind === 'try') {
-            return `${anchorMark(target)}${generateTry(node, target)}`
+            return `${anchor}${generateTry(node, target)}`
         }
         if (node.kind === 'branch') {
             return ''
@@ -239,9 +249,9 @@ export function generateSSR(
             } else if (attr.kind === 'bind' && attr.property === 'checked') {
                 /* A boolean property — its mere presence means checked, so emit the
                    attribute only when truthy (a string `checked="false"` still checks). */
-                code += `${target}.push((${lowerExpression(attr.code)}) ? ' checked' : '');\n`
+                code += `${target}.push((${bindRead(attr.code)}) ? ' checked' : '');\n`
             } else if (attr.kind === 'bind') {
-                code += `${target}.push(${JSON.stringify(` ${attr.property}="`)} + $esc(${lowerExpression(attr.code)}) + '"');\n`
+                code += `${target}.push(${JSON.stringify(` ${attr.property}="`)} + $esc(${bindRead(attr.code)}) + '"');\n`
             }
         }
         code += push(target, '>')
@@ -254,10 +264,7 @@ export function generateSSR(
                 inSkeleton = true
             }
             const previousMark = markText
-            const isTextLeaf = node.children.every(
-                (child) => child.kind === 'text' || child.kind === 'style',
-            )
-            markText = inSkeleton && !isTextLeaf
+            markText = inSkeleton && !isTextLeaf(node)
             /* A `<script>` child scopes its bindings to this element's subtree. */
             code += withNestedScripts(node.children, () => generateInto(node.children, target))
             markText = previousMark

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

@@ -0,0 +1,18 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/*
+A control-flow block — `if`/`each`/`await`/`switch`/`try`. In a skeleton each mounts at an
+`<!--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.
+*/
+export function isControlFlow(node: TemplateNode): boolean {
+    return (
+        node.kind === 'if' ||
+        node.kind === 'each' ||
+        node.kind === 'await' ||
+        node.kind === 'switch' ||
+        node.kind === 'try'
+    )
+}

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

@@ -0,0 +1,15 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/*
+An element whose children are ONLY text and `<style>` — the common `<h1>{x}</h1>` shape.
+The shared anchor-placement decision for reactive text: BOTH back-ends consult this so they
+agree on where a text anchor goes. A text-leaf binds its reactive text marker-free on the
+located element (`generateBuild`) / emits it without an `<!--a-->` prefix (`generateSSR`);
+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`.
+*/
+export function isTextLeaf(node: Extract<TemplateNode, { kind: 'element' }>): boolean {
+    return node.children.every((child) => child.kind === 'text' || child.kind === 'style')
+}