@abide/abide 0.41.1 → 0.43.0

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

@@ -91,6 +91,10 @@ export function compileShadow(source: string): CompiledShadow {
    pre-assembled scope line carrying its own embedded segments. */
 type Builder = {
     raw: (text: string) => void
+    /* Appends `text` verbatim and maps it back to source, WITHOUT the `expr`
+       parens — for binding names and other spans that must stay bare TS syntax
+       (`for (const NAME of …)`). `text` must equal the source at `sourceLoc`. */
+    mapped: (text: string, sourceLoc: number | undefined) => void
     expr: (code: string, sourceLoc: number | undefined) => void
     stmt: (code: string, sourceLoc: number | undefined) => void
     flush: (line: ScopeLine) => void
@@ -115,6 +119,16 @@ function createBuilder(): Builder {
         raw(text) {
             code += text
         },
+        mapped(text, sourceLoc) {
+            if (sourceLoc !== undefined) {
+                mappings.push({
+                    shadowStart: code.length,
+                    sourceStart: sourceLoc,
+                    length: text.length,
+                })
+            }
+            code += text
+        },
         expr(exprCode, sourceLoc) {
             code += '('
             if (sourceLoc !== undefined) {
@@ -268,6 +282,14 @@ function scopeLineFor(
         propsShapes.push(shape === undefined ? 'Record<string, any>' : verbatim(shape))
         return { text: `const ${verbatim(declaration)};`, segments: [span(declaration, 6)] }
     }
+    /* The rewrite drops the callee from the line, so hovering `state`/`computed`/
+       `linked` at its call site has nothing to resolve. Append the callee as a
+       trailing reference statement (`…; state;`), mapped back to its source span,
+       so it resolves to the same primitive the destructure does. */
+    const withCalleeRef = (line: ScopeLine): ScopeLine => ({
+        text: `${line.text} ${verbatim(call.expression)};`,
+        segments: [...line.segments, span(call.expression, line.text.length + 1)],
+    })
     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. */
@@ -283,13 +305,16 @@ function scopeLineFor(
                then correctly flagged possibly-undefined; a guard narrows cleanly. */
             const valueType = annotation === '' ? ': unknown' : `${annotation} | undefined`
             /* 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)] }
+            return withCalleeRef({
+                text: `let ${name}!${valueType};`,
+                segments: [span(declaration.name, 4)],
+            })
         }
         const prefix = `let ${name}${annotation} = (`
-        return {
+        return withCalleeRef({
             text: `${prefix}${verbatim(init)});`,
             segments: [span(declaration.name, 4), span(init, prefix.length)],
-        }
+        })
     }
     /* computed<T>(compute) / linked<T>(seed) — the only callees left: T is the value
        type — the call's first arg is a thunk, so invoking it yields the value. Annotate
@@ -303,16 +328,16 @@ function scopeLineFor(
     /* binding-name map offset = past the keyword + space (`let ` = 4, `const ` = 6) */
     const keywordOffset = keyword.length + 1
     if (fn === undefined) {
-        return {
+        return withCalleeRef({
             text: `${keyword} ${name} = undefined;`,
             segments: [span(declaration.name, keywordOffset)],
-        }
+        })
     }
     const prefix = `${keyword} ${name}${annotation} = (`
-    return {
+    return withCalleeRef({
         text: `${prefix}${verbatim(fn)})();`,
         segments: [span(declaration.name, keywordOffset), span(fn, prefix.length)],
-    }
+    })
 }
 
 /* Emits a sibling list — each node standalone via `emitNode`. */
@@ -345,23 +370,29 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             emitNodes(node.children, builder)
             return
         case 'component': {
-            /* Check each prop against the child's declared type. The imported tag
-               resolves (via the shadow host) to the child's `(props: Props) => …`
-               default, so `Parameters<typeof Child>[0]["name"]` is that prop's type;
-               assigning the mapped value to it lands a mismatch diagnostic on the
-               offending expression (an annotated target reports the error on the RHS,
-               unlike an object literal which reports it on the key). */
-            for (const prop of node.props) {
-                /* Lead with a defensive `;`: this IIFE is the one shadow emission that
-                   starts with `(`, so without it a preceding scope statement left
-                   unterminated (a script ending in a call with no trailing semicolon,
-                   e.g. `effect(() => …)`) merges across the newline into `effect(…)(…)`
-                   — a spurious "not callable" on the author's last statement. */
+            /* The imported tag resolves (via the shadow host) to the child's
+               `(props: Props) => …` default, so `Parameters<typeof Child>[0]` is its prop
+               shape. `on*` / `bind:` / `attach` props are framework-handled passthrough
+               (not part of the declared shape), so they are checked leniently — each value
+               against its own declared key type — never flagged as excess. */
+            const handled = (prop: { name: string; spread?: boolean }): boolean =>
+                prop.spread === true ||
+                prop.name.startsWith('on') ||
+                prop.name.startsWith('bind:') ||
+                prop.name.startsWith('class:') ||
+                prop.name.startsWith('style:') ||
+                prop.name === 'attach'
+            const hasSpread = node.props.some((prop) => prop.spread)
+            for (const prop of node.props.filter(handled)) {
+                /* Lead with a defensive `;`: an IIFE/object-literal arg starts with `(` or
+                   `{`, so without it a preceding scope statement left unterminated (a script
+                   ending in a call with no trailing semicolon, e.g. `effect(() => …)`)
+                   merges across the newline into `effect(…)(…)` — a spurious "not callable". */
                 if (prop.spread) {
                     /* A `{...expr}` spread contributes a SUBSET of the props (required ones
                        may come from another spread/explicit prop), so check it against
-                       `Partial<Props>` — every key it does carry must match the child's
-                       declared type, without demanding completeness. */
+                       `Partial<Props>` — every key it does carry must match, without
+                       demanding completeness. */
                     builder.raw(`;((__spread: Partial<Parameters<typeof ${node.name}>[0]>) => {})(`)
                 } else {
                     builder.raw(
@@ -371,6 +402,43 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                 builder.expr(prop.code, prop.loc)
                 builder.raw(');\n')
             }
+            /* The plain data props as one object-literal argument typed to the child's whole
+               prop shape: a missing required prop errors on the literal (anchored at the tag
+               via the mapped `{`), an unknown prop errors on its key, a wrong type on its
+               value. Skipped when a spread is present — a spread may supply required props,
+               so completeness can't be demanded; the data props fall back to lenient per-key
+               checks instead. */
+            const dataProps = node.props.filter((prop) => !handled(prop))
+            if (hasSpread) {
+                for (const prop of dataProps) {
+                    builder.raw(
+                        `;((__prop: Parameters<typeof ${node.name}>[0][${JSON.stringify(prop.name)}]) => {})(`,
+                    )
+                    builder.expr(prop.code, prop.loc)
+                    builder.raw(');\n')
+                }
+            } else {
+                builder.raw(`;((__c: Parameters<typeof ${node.name}>[0]): void => { void __c })({`)
+                /* A zero-length anchor right after `{`, pointing at the tag: a missing-
+                   required-prop error spans the literal from `{`, so it overlaps this and
+                   maps to the tag (an empty span trivially satisfies the source-text ==
+                   shadow-text invariant). */
+                builder.mapped('', node.loc)
+                builder.raw('\n')
+                for (const prop of dataProps) {
+                    /* The key mapped to its source name (excess-prop errors land on the key);
+                       the value verbatim-mapped (wrong-type errors land on the value). */
+                    if (prop.nameLoc !== undefined) {
+                        builder.mapped(prop.name, prop.nameLoc)
+                    } else {
+                        builder.raw(prop.name)
+                    }
+                    builder.raw(': ')
+                    builder.expr(prop.code, prop.loc)
+                    builder.raw(',\n')
+                }
+                builder.raw('});\n')
+            }
             emitNodes(node.children, builder)
             return
         }
@@ -408,19 +476,24 @@ function emitNode(node: TemplateNode, builder: Builder): void {
         }
         case 'each':
             /* `for await` over an async each's AsyncIterable, plain `for…of` otherwise —
-               so the item binds to the element type under either iteration protocol. */
-            builder.raw(
-                node.async ? `for await (const ${node.as} of ` : `for (const ${node.as} of `,
-            )
+               so the item binds to the element type under either iteration protocol. The
+               binding name is `mapped` (not `raw`) so hover/highlighting land on it. */
+            builder.raw(node.async ? 'for await (const ' : 'for (const ')
+            builder.mapped(node.as, node.asLoc)
+            builder.raw(' of ')
             builder.expr(node.items, node.loc)
             builder.raw(') {\n')
             if (node.key !== undefined) {
-                builder.raw(`void (${node.key});\n`)
+                builder.raw('void ')
+                builder.expr(node.key, node.keyLoc)
+                builder.raw(';\n')
             }
             /* `index="i"` binds the row's position — always a number (the row ordinal,
                or an async stream's arrival count). Declare it so body references check. */
             if (node.index !== undefined) {
-                builder.raw(`const ${node.index}: number = 0;\n`)
+                builder.raw('const ')
+                builder.mapped(node.index, node.indexLoc)
+                builder.raw(': number = 0;\n')
             }
             emitNodes(node.children, builder)
             builder.raw('}\n')
@@ -439,7 +512,9 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             const pending = node.children.filter((child) => child.kind !== 'branch')
             const branches = node.children.filter((child) => child.kind === 'branch')
             if (node.blocking && node.as !== undefined) {
-                builder.raw(`{\nconst ${node.as} = ${resolved};\n`)
+                builder.raw('{\nconst ')
+                builder.mapped(node.as, node.asLoc)
+                builder.raw(` = ${resolved};\n`)
                 emitNodes(pending, builder)
                 builder.raw('}\n')
             } else {
@@ -451,9 +526,13 @@ function emitNode(node: TemplateNode, builder: Builder): void {
                 }
                 builder.raw('{\n')
                 if (branch.branch === 'then' && branch.as !== undefined) {
-                    builder.raw(`const ${branch.as} = ${resolved};\n`)
+                    builder.raw('const ')
+                    builder.mapped(branch.as, branch.asLoc)
+                    builder.raw(` = ${resolved};\n`)
                 } else if (branch.branch === 'catch' && branch.as !== undefined) {
-                    builder.raw(`const ${branch.as} = undefined as any;\n`)
+                    builder.raw('const ')
+                    builder.mapped(branch.as, branch.asLoc)
+                    builder.raw(' = undefined as any;\n')
                 }
                 emitNodes(branch.children, builder)
                 builder.raw('}\n')
@@ -508,7 +587,14 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('}\n')
             return
         case 'snippet':
-            builder.raw(`const ${node.name} = (${node.params ?? ''}) => {\n`)
+            /* `args={…}` is the parameter list; `mapped` (not `raw`) so hover/highlighting
+               land on the binding. `loc` is the `args` expression's offset (see
+               toSnippetOrTemplate). The name is a static attribute with no tracked offset. */
+            builder.raw(`const ${node.name} = (`)
+            if (node.params !== undefined) {
+                builder.mapped(node.params, node.loc)
+            }
+            builder.raw(') => {\n')
             emitNodes(node.children, builder)
             builder.raw('};\n')
             return

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

@@ -1,6 +1,7 @@
 import { resolve } from 'node:path'
 import ts from 'typescript'
 import { messageFromError } from '../../shared/messageFromError.ts'
+import { mapTsClassification } from './ABIDE_SEMANTIC_TOKENS_LEGEND.ts'
 import { assetModulesFile } from './assetModulesFile.ts'
 import { compileShadow } from './compileShadow.ts'
 import { loadShadowTsConfig } from './loadShadowTsConfig.ts'
@@ -10,6 +11,7 @@ import { shadowNaming } from './shadowNaming.ts'
 import { sourceToShadowOffset } from './sourceToShadowOffset.ts'
 import type { AbideDiagnostic } from './types/AbideDiagnostic.ts'
 import type { CompiledShadow } from './types/CompiledShadow.ts'
+import type { SemanticToken } from './types/SemanticToken.ts'
 
 const { suffixed, isShadow, sourceOf } = shadowNaming
 
@@ -27,6 +29,8 @@ export type ShadowLanguageService = {
     /* Hover info at a source offset, or undefined if the offset isn't a checked
        expression (markup, whitespace) or TypeScript has nothing to report. */
     quickInfo: (abidePath: string, sourceOffset: number) => ShadowQuickInfo | undefined
+    /* Type-aware semantic tokens for every checked expression, in source coords. */
+    semanticClassifications: (abidePath: string) => SemanticToken[]
 }
 
 /*
@@ -194,5 +198,49 @@ export function createShadowLanguageService(cwd: string): ShadowLanguageService
                 length: span?.length ?? 1,
             }
         },
+        semanticClassifications(abidePath) {
+            const fileName = suffixed(abidePath)
+            /* Compile first so the mappings cache is current. */
+            shadowText(abidePath)
+            const shadow = shadows.get(abidePath)
+            if (shadow === undefined) {
+                return []
+            }
+            const { spans } = service.getEncodedSemanticClassifications(
+                fileName,
+                { start: 0, length: shadow.code.length },
+                ts.SemanticClassificationFormat.TwentyTwenty,
+            )
+            /* `spans` is flat triples [start, length, classification, …] in shadow
+               coords; keep only those overlapping a mapped expression segment. */
+            const tokens: SemanticToken[] = []
+            for (let index = 0; index + 2 < spans.length; index += 3) {
+                const spanStart = spans[index]
+                const spanLength = spans[index + 1]
+                const classification = spans[index + 2]
+                if (
+                    spanStart === undefined ||
+                    spanLength === undefined ||
+                    classification === undefined
+                ) {
+                    continue
+                }
+                const mapped = mapTsClassification(classification)
+                if (mapped === undefined) {
+                    continue
+                }
+                const located = remapShadowDiagnostic(shadow.mappings, spanStart, spanLength)
+                if (located === undefined) {
+                    continue
+                }
+                tokens.push({
+                    start: located.start,
+                    length: located.length,
+                    type: mapped.type,
+                    modifiers: mapped.modifiers,
+                })
+            }
+            return tokens
+        },
     }
 }

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

@@ -4,20 +4,56 @@ import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
 const factory = ts.factory
 
 /* The reactive primitives that must be reached through a scope. 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'])
+   these is a compile error: a reactive primitive is owned by a scope and the surface must
+   show it (`scope().state(...)`), so a reader always sees the scope interaction. `effect`
+   is here too — a reaction is scope-owned (it tears down with the scope), so it joins the
+   one surface; unlike the cells it stays a runtime call (`scope().effect(...)` passes
+   through to the `effect` helper), not a doc slot. */
+const SCOPE_PRIMITIVES: ReadonlySet<string> = new Set(['state', 'linked', 'computed', 'effect'])
+
+/* The primitive names a top-level `const { state, computed } = scope()` destructure binds.
+   Such a name is scope-bound — its bare call below is the destructured method, not a stray
+   global — so it is exempt from the bare-primitive error. Only a destructure of a `scope()`
+   call counts (receiver-agnostic on the callee name, matching signalCallee); an aliased
+   binding (`{ state: s }`) is not recognised, so the canonical name must be kept. */
+function scopeDestructuredPrimitives(source: ts.SourceFile): Set<string> {
+    const bound = new Set<string>()
+    for (const statement of source.statements) {
+        if (!ts.isVariableStatement(statement)) {
+            continue
+        }
+        for (const declaration of statement.declarationList.declarations) {
+            if (
+                signalCallee(declaration) === 'scope' &&
+                ts.isObjectBindingPattern(declaration.name)
+            ) {
+                for (const element of declaration.name.elements) {
+                    if (
+                        element.propertyName === undefined &&
+                        ts.isIdentifier(element.name) &&
+                        SCOPE_PRIMITIVES.has(element.name.text)
+                    ) {
+                        bound.add(element.name.text)
+                    }
+                }
+            }
+        }
+    }
+    return bound
+}
 
 /* Throws on a bare scope primitive (`state(0)` instead of `scope().state(0)`) or on the
    removed `prop(...)` reader — props are now read by destructuring `props()`. Walks all
-   calls, so a stray one nested in a function is caught too, not just top-level declarations. */
+   calls, so a stray one nested in a function is caught too, not just top-level declarations.
+   A primitive destructured from `scope()` at the top is scope-bound and exempt. */
 function assertScopedPrimitives(source: ts.SourceFile): void {
+    const scopeBound = scopeDestructuredPrimitives(source)
     const visit = (node: ts.Node): void => {
         if (ts.isCallExpression(node) && ts.isIdentifier(node.expression)) {
             const name = node.expression.text
-            if (SCOPE_PRIMITIVES.has(name)) {
+            if (SCOPE_PRIMITIVES.has(name) && !scopeBound.has(name)) {
                 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}(...)\`).`,
+                    `abide: bare \`${name}(...)\` is not allowed — a reactive primitive lives on a scope. Use \`scope().${name}(...)\` (or a captured handle: \`const s = scope(); s.${name}(...)\`).`,
                 )
             }
             if (name === 'prop') {

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

@@ -0,0 +1,37 @@
+import { ABIDE_SEMANTIC_TOKENS_LEGEND } from './ABIDE_SEMANTIC_TOKENS_LEGEND.ts'
+import { offsetToPosition } from './offsetToPosition.ts'
+import type { SemanticToken } from './types/SemanticToken.ts'
+
+/*
+Encodes source-coordinate tokens into the LSP semantic-tokens `data` array: five
+integers per token (deltaLine, deltaStartChar, length, tokenTypeIndex,
+modifierBitset), each position relative to the previous token. Tokens are sorted
+by start; tokens with an unknown legend type, and any token overlapping the one
+before it, are dropped — the protocol requires a strictly non-overlapping,
+positionally-ordered stream.
+*/
+export function encodeSemanticTokens(text: string, tokens: SemanticToken[]): number[] {
+    const sorted = [...tokens].sort((a, b) => a.start - b.start || a.length - b.length)
+    const data: number[] = []
+    let previousLine = 0
+    let previousCharacter = 0
+    let previousEnd = -1
+    for (const token of sorted) {
+        const typeIndex = ABIDE_SEMANTIC_TOKENS_LEGEND.tokenTypes.indexOf(token.type)
+        if (typeIndex < 0 || token.start < previousEnd) {
+            continue
+        }
+        const modifierBitset = token.modifiers.reduce((bits, name) => {
+            const bit = ABIDE_SEMANTIC_TOKENS_LEGEND.tokenModifiers.indexOf(name)
+            return bit < 0 ? bits : bits | (1 << bit)
+        }, 0)
+        const { line, character } = offsetToPosition(text, token.start)
+        const deltaLine = line - previousLine
+        const deltaCharacter = deltaLine === 0 ? character - previousCharacter : character
+        data.push(deltaLine, deltaCharacter, token.length, typeIndex, modifierBitset)
+        previousLine = line
+        previousCharacter = character
+        previousEnd = token.start + token.length
+    }
+    return data
+}

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

@@ -3,19 +3,24 @@ import { HOLE_ATTRIBUTE } from '../runtime/HOLE_ATTRIBUTE.ts'
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { ANCHOR } from '../runtime/RANGE_MARKER.ts'
 import { asOutlet } from './asOutlet.ts'
+import { awaitPlan } from './awaitPlan.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
 import { composeProps } from './composeProps.ts'
 import { destructureBindingNames } from './destructureBindingNames.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { ifPlan } from './ifPlan.ts'
 import { isControlFlow } from './isControlFlow.ts'
 import { isWhitespaceText } from './isWhitespaceText.ts'
 import { lowerContext } from './lowerContext.ts'
+import { makeVarNamer } from './makeVarNamer.ts'
 import { resolveBranches } from './resolveBranches.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
 import { spreadExcludedNames } from './spreadExcludedNames.ts'
 import { staticAttr } from './staticAttr.ts'
 import { staticTextPart } from './staticTextPart.ts'
+import { switchPlan } from './switchPlan.ts'
+import { tryPlan } from './tryPlan.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
 
@@ -61,8 +66,7 @@ export function generateBuild(
     computedNames: ReadonlySet<string>,
     isLayout = false,
 ): string {
-    let counter = 0
-    const nextVar = (prefix: string): string => `${prefix}${counter++}`
+    const nextVar = makeVarNamer()
 
     /* 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`
@@ -143,7 +147,7 @@ export function generateBuild(
         node: Extract<TemplateNode, { kind: 'element' }>,
         attr: Extract<
             (typeof node.attrs)[number],
-            { kind: 'expression' | 'event' | 'attach' | 'bind' }
+            { kind: 'expression' | 'event' | 'attach' | 'bind' | 'class' | 'style' }
         >,
         varName: string,
     ): string {
@@ -156,6 +160,15 @@ export function generateBuild(
         if (attr.kind === 'attach') {
             return `attach(${varName}, (${lowerExpression(attr.code)}));\n`
         }
+        /* `class:<name>` — toggle the class by truthiness; surgical, no element re-render.
+           Layers on top of any static `class="…"` in the skeleton (classList is additive). */
+        if (attr.kind === 'class') {
+            return `effect(${namedThunk(`class_${attr.name}`, `${varName}.classList.toggle(${JSON.stringify(attr.name)}, !!(${lowerExpression(attr.code)}));`)});\n`
+        }
+        /* `style:<property>` — write one inline style / custom property reactively. */
+        if (attr.kind === 'style') {
+            return `effect(${namedThunk(`style_${attr.property}`, `${varName}.style.setProperty(${JSON.stringify(attr.property)}, String(${lowerExpression(attr.code)}));`)});\n`
+        }
         if (attr.property === 'group') {
             /* Grouped two-way: radio binds the path to the single checked `value`;
                checkbox treats the path as an array, adding/removing `value` on toggle.
@@ -471,11 +484,8 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const cases = node.children
-            .filter(
-                (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
-            )
-            .map((branch) => {
+        const cases = switchPlan(node)
+            .cases.map((branch) => {
                 const match =
                     branch.match === undefined
                         ? 'undefined'
@@ -534,45 +544,26 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const [thenBranch, catchBranch, finallyBranch] = resolveBranches(
-            node,
-            'then',
-            'catch',
-            'finally',
-        )
-        const finallyChildren = finallyBranch?.children ?? []
-        /* Blocking: no pending, the children are the resolved branch bound to `node.as`.
-           Streaming: pending is the non-branch children, resolved is the `then` child. */
-        const pending = node.blocking
-            ? []
-            : node.children.filter((child) => child.kind !== 'branch')
+        const plan = awaitPlan(node)
         /* The resolved value is reactive: a re-settle updates it in place rather than
-           rebuilding the branch (see awaitBlock). The branch reads it as a `.value` cell. */
-        const thenThunk = node.blocking
-            ? branchThunk(
-                  node.children.filter((child) => child.kind !== 'branch'),
-                  node.as ?? '_value',
-                  finallyChildren,
-                  true,
-              )
-            : branchThunk(
-                  thenBranch?.children ?? [],
-                  thenBranch?.as ?? '_value',
-                  finallyChildren,
-                  true,
-              )
+           rebuilding the branch (see awaitBlock). The branch reads it as a `.value` cell.
+           Build settles blocking and streaming uniformly through `awaitBlock`, so the plan's
+           resolved content/binding feeds one thunk regardless of mode. */
+        const thenThunk = branchThunk(
+            plan.resolvedChildren,
+            plan.resolvedAs,
+            plan.finallyChildren,
+            true,
+        )
         /* Neither catch nor finally → pass `undefined` so awaitBlock re-throws the
            rejection (surfacing it) instead of rendering an empty branch. A finally-only
            block keeps a catch thunk that renders just finally. */
-        const catchThunk =
-            catchBranch === undefined && finallyChildren.length === 0
-                ? 'undefined'
-                : branchThunk(
-                      catchBranch?.children ?? [],
-                      catchBranch?.as ?? '_error',
-                      finallyChildren,
-                  )
-        const pendingThunk = hasRenderableContent(pending) ? branchThunk(pending) : 'undefined'
+        const catchThunk = plan.surfaceRejection
+            ? 'undefined'
+            : branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+        const pendingThunk = hasRenderableContent(plan.pending)
+            ? branchThunk(plan.pending)
+            : 'undefined'
         return (
             `awaitBlock(${parentVar}, nextBlockId(), () => (${lowerExpression(node.promise)}), ` +
             `${pendingThunk}, ` +
@@ -638,14 +629,11 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        const [catchBranch, finallyBranch] = resolveBranches(node, 'catch', 'finally')
-        const finallyChildren = finallyBranch?.children ?? []
-        const guarded = node.children.filter((child) => child.kind !== 'branch')
-        const tryThunk = branchThunk(guarded, undefined, finallyChildren)
-        const catchThunk =
-            catchBranch === undefined
-                ? 'undefined'
-                : branchThunk(catchBranch.children, catchBranch.as ?? '_error', finallyChildren)
+        const plan = tryPlan(node)
+        const tryThunk = branchThunk(plan.guarded, undefined, plan.finallyChildren)
+        const catchThunk = plan.hasCatch
+            ? branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+            : 'undefined'
         return `tryBlock(${parentVar}, nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
     }
 
@@ -658,25 +646,20 @@ export function generateBuild(
     ): string {
         /* The `case` children are the chain's `elseif`/`else` branches in source order;
            the rest are the `then` content. */
-        const branches = node.children.filter(
-            (child): child is Extract<TemplateNode, { kind: 'case' }> => child.kind === 'case',
-        )
-        const thenChildren = node.children.filter((child) => child.kind !== 'case')
-        const hasElseif = branches.some((branch) => branch.condition !== undefined)
+        const plan = ifPlan(node)
         /* Fast path: a plain `if` (with optional `else`) is the binary `when` runtime. */
-        if (!hasElseif) {
-            const elseBranch = branches.find((branch) => branch.condition === undefined)
-            const thenThunk = branchThunk(thenChildren)
+        if (!plan.hasElseif) {
+            const thenThunk = branchThunk(plan.thenChildren)
             const elseThunk =
-                elseBranch === undefined ? 'undefined' : branchThunk(elseBranch.children)
+                plan.elseBranch === undefined ? 'undefined' : branchThunk(plan.elseBranch.children)
             return `when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
         }
         /* if/elseif/else is a cond-chain — reuse `switchBlock` over a constant `true`
            subject with `Boolean`-coerced match thunks, so the first truthy branch wins
            (`else` is the match-less default). */
         const entries = [
-            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(thenChildren)} }`,
-            ...branches.map((branch) =>
+            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(plan.thenChildren)} }`,
+            ...plan.branches.map((branch) =>
                 branch.condition !== undefined
                     ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
                     : `{ match: undefined, render: ${branchThunk(branch.children)} }`,