@abide/abide 0.43.0 → 0.44.0

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

@@ -6,23 +6,30 @@ 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 { eachPlan } from './eachPlan.ts'
+import { elementPlan } from './elementPlan.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { ifPlan } from './ifPlan.ts'
+import { interpolatedTemplateLiteral } from './interpolatedTemplateLiteral.ts'
 import { isControlFlow } from './isControlFlow.ts'
+import { isPlainIdentifier } from './isPlainIdentifier.ts'
 import { isWhitespaceText } from './isWhitespaceText.ts'
 import { lowerContext } from './lowerContext.ts'
 import { makeVarNamer } from './makeVarNamer.ts'
-import { resolveBranches } from './resolveBranches.ts'
+import { reactiveBinding } from './reactiveBinding.ts'
 import { scopeAttr } from './scopeAttr.ts'
 import { skeletonContext } from './skeletonContext.ts'
+import { snippetPlan } from './snippetPlan.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 { Binding } from './types/Binding.ts'
+import type { ShadowKind } from './types/ShadowKind.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { VOID_TAGS } from './VOID_TAGS.ts'
+import { withBindings } from './withBindings.ts'
 
 /* The skeleton positioning anchor a control-flow block / component / slot / outlet
    stamps into its skeleton markup, sourced from the same `ANCHOR` wire-alphabet constant
@@ -36,8 +43,9 @@ attributes, reactive `attr`/`text` bindings, `on` listeners, keyed `each`, and
 conditional `when`. Every embedded expression is first rewritten from the signal
 surface (`count` → `model.count`) and then lowered to the doc patch/read API
 (cell-hoisting runs over the whole result afterwards). The output operates on
-`hostVar` and expects the dom bindings, `doc`, `effect`, and the component's
-`model` in scope — the body the component compiler wraps and hoists cells into.
+`hostVar` and expects the `$$`-aliased dom bindings (`$$effect`, `$$each`, …)
+and the component's `$$model` (emitted by `desugarSignals`) in scope — the body
+the component compiler wraps and hoists cells into.
 */
 
 /* A JS-identifier-safe frame name from an authored construct label (an attribute name
@@ -97,49 +105,17 @@ export function generateBuild(
         expression: lowerExpression,
         statement: lowerStatement,
         withNestedScripts,
-        withLocalDerived,
+        withShadow,
         bindRead,
         bindWrite,
     } = lowerContext(stateNames, derivedNames, computedNames)
 
-    /* A value binding the runtime can update in place (an `await` `then` value, a keyed `each`
-       item) is passed as a reactive `.value` cell; the consuming branch/row reads its NAME(s)
-       as a deref so it re-runs in place when a re-settle/re-key sets the cell. */
-    const isPlainIdentifier = (name: string | undefined): name is string =>
-        name !== undefined && /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name)
-
-    /* How a reactive value param binds: `param` is the thunk's value parameter (the cell),
-       `prefix` declares any per-leaf readers, `localNames` 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). The caller lowers the body with `localNames` derived. */
-    function reactiveBinding(authorParam: string): {
-        param: string
-        prefix: string
-        localNames: string[]
-    } {
-        if (isPlainIdentifier(authorParam)) {
-            return { param: authorParam, prefix: '', localNames: [authorParam] }
-        }
-        const cellParam = nextVar('aw')
-        const deriveVar = nextVar('ad')
-        const leaves = destructureBindingNames(authorParam)
-        /* Lower the destructure declaration so a default/computed-key initializer that
-           references a component signal (`{ label = fallback }`, `{ [key]: v }`) is rewritten
-           to its `model`/cell form — the bound leaf names are name-slots and stay untouched.
-           A pattern with no such initializer lowers to itself, so the common case is unchanged
-           and SSR (which lowers the same declaration) stays congruent. */
-        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 }
-    }
+    /* Maps a plan `Binding`'s classification to the client `ShadowKind`: a `reactive` value
+       derefs as a `.value` cell (`derived`), a `plain` value as the bare local (`plain`). The
+       injected mapping `withBindings` registers every binding through — the one place a name's
+       kind is chosen on this back-end. */
+    const buildBindingKind = (binding: Binding): ShadowKind =>
+        binding.classification === 'reactive' ? 'derived' : 'plain'
 
     /* 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`. */
@@ -147,27 +123,36 @@ export function generateBuild(
         node: Extract<TemplateNode, { kind: 'element' }>,
         attr: Extract<
             (typeof node.attrs)[number],
-            { kind: 'expression' | 'event' | 'attach' | 'bind' | 'class' | 'style' }
+            {
+                kind:
+                    'expression' | 'interpolated' | 'event' | 'attach' | 'bind' | 'class' | 'style'
+            }
         >,
         varName: string,
     ): string {
         if (attr.kind === 'expression') {
-            return `attr(${varName}, ${JSON.stringify(attr.name)}, ${namedThunk(`attr_${attr.name}`, `return (${lowerExpression(attr.code)})`)});\n`
+            return `$$attr(${varName}, ${JSON.stringify(attr.name)}, ${namedThunk(`attr_${attr.name}`, `return (${lowerExpression(attr.code)})`)});\n`
+        }
+        /* `name="literal {expr}"` — the template-literal concatenation bound as a reactive
+           string attribute (always present). A class/style with directives is merged
+           upstream of this dispatch, so it never reaches here. */
+        if (attr.kind === 'interpolated') {
+            return `$$attr(${varName}, ${JSON.stringify(attr.name)}, ${namedThunk(`attr_${attr.name}`, `return (${lowerExpression(interpolatedTemplateLiteral(attr.parts))})`)});\n`
         }
         if (attr.kind === 'event') {
-            return `on(${varName}, ${JSON.stringify(attr.event)}, (${lowerExpression(attr.code)}));\n`
+            return `$$on(${varName}, ${JSON.stringify(attr.event)}, (${lowerExpression(attr.code)}));\n`
         }
         if (attr.kind === 'attach') {
-            return `attach(${varName}, (${lowerExpression(attr.code)}));\n`
+            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`
+            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`
+            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`;
@@ -180,13 +165,13 @@ export function generateBuild(
             const value = lowerExpression(valueCode)
             if (isRadio) {
                 return (
-                    `effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}) === (${value});`)});\n` +
-                    `on(${varName}, "change", () => { if (${varName}.checked) { ${lowerStatement(`${attr.code} = ${valueCode}`)} } });\n`
+                    `$$effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}) === (${value});`)});\n` +
+                    `$$on(${varName}, "change", () => { if (${varName}.checked) { ${lowerStatement(`${attr.code} = ${valueCode}`)} } });\n`
                 )
             }
             return (
-                `effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}).includes(${value});`)});\n` +
-                `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`
+                `$$effect(${namedThunk('bind_group', `${varName}.checked = (${lowerExpression(attr.code)}).includes(${value});`)});\n` +
+                `$$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 bind target, and write it back on the
@@ -196,8 +181,8 @@ export function generateBuild(
            `.get()` and writes via `.set(v)` — see `bindRead`/`bindWrite`. */
         const event = bindListenEvent(attr.property, node.tag)
         return (
-            `effect(${namedThunk(`bind_${attr.property}`, `${varName}.${attr.property} = ${bindRead(attr.code)};`)});\n` +
-            `on(${varName}, ${JSON.stringify(event)}, () => { ${bindWrite(attr.code, `${varName}.${attr.property}`)} });\n`
+            `$$effect(${namedThunk(`bind_${attr.property}`, `${varName}.${attr.property} = ${bindRead(attr.code)};`)});\n` +
+            `$$on(${varName}, ${JSON.stringify(event)}, () => { ${bindWrite(attr.code, `${varName}.${attr.property}`)} });\n`
         )
     }
 
@@ -231,7 +216,7 @@ export function generateBuild(
                         return staticTextPart(part.value)
                     }
                     binds.push(
-                        `appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], ${namedThunk('text', `return (${lowerExpression(part.code)})`)});\n`,
+                        `$$appendTextAt(${skVar}.an[${holeIndex(anIndex, part)}], ${namedThunk('text', `return (${lowerExpression(part.code)})`)});\n`,
                     )
                     return ANCHOR_COMMENT
                 })
@@ -245,7 +230,9 @@ export function generateBuild(
                (`anchor.parentNode`). A component takes an anchor like a block — no wrapper
                element — so its root lays out as a true direct child of `anchor.parentNode`. */
             const anchorVar = anchorVarAt(node, skVar, binds)
-            binds.push(generateChild(node, `${anchorVar}.parentNode`, `anchorCursor(${anchorVar})`))
+            binds.push(
+                generateChild(node, `${anchorVar}.parentNode`, `$$anchorCursor(${anchorVar})`),
+            )
             return ANCHOR_COMMENT
         }
         if (node.kind === 'script') {
@@ -270,7 +257,7 @@ export function generateBuild(
                `outlet` boundary the router fills with the next chain layer (`fillBoundary`).
                No wrapper element — the filled child lays out as a direct child of the parent. */
             const anchorVar = anchorVarAt(node, skVar, binds)
-            binds.push(`outlet(${anchorVar}.parentNode, anchorCursor(${anchorVar}));\n`)
+            binds.push(`$$outlet(${anchorVar}.parentNode, $$anchorCursor(${anchorVar}));\n`)
             return ANCHOR_COMMENT
         }
         if (node.tag === 'slot') {
@@ -279,7 +266,7 @@ export function generateBuild(
             const anchorVar = anchorVarAt(node, skVar, binds)
             const hostVar = nextVar('host')
             binds.push(
-                `mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, anchorCursor(${anchorVar}));\n`,
+                `$$mountSlot(${anchorVar}.parentNode, (${hostVar}) => {\n${generateSlot(node, hostVar)}}, $$anchorCursor(${anchorVar}));\n`,
             )
             return ANCHOR_COMMENT
         }
@@ -294,6 +281,12 @@ export function generateBuild(
            SSR back-end also reads, rather than re-deriving leaf-ness via `isTextLeaf` here. */
         const textLeafBind =
             reactiveTextChild !== undefined && markText.get(reactiveTextChild) === false
+        /* The shared per-element emission DECISION (one site both back-ends consult): each
+           attribute classified + tagged with its merge status, the class/style/directive merge
+           folded in, and void-tag status. The composed `classParts`/`styleParts` and the
+           merge triggers come from the same plan SSR renders, so neither the attribute set nor
+           the merged value can drift. Build still RENDERS each kind below as live wiring. */
+        const plan = elementPlan(node, lowerExpression)
         let openTag = `<${node.tag}`
         let elVar = ''
         if (hasReactiveAttr || textLeafBind) {
@@ -303,13 +296,33 @@ export function generateBuild(
             elVar = nextVar('el')
             binds.push(`const ${elVar} = ${skVar}.el[${holeIndex(elIndex, node)}];\n`)
             openTag += ` ${HOLE_ATTRIBUTE}`
-            for (const attr of node.attrs) {
+            /* An interpolated (reactive) class/style base can't layer additive directive toggles
+               on top — re-setting the base would wipe them — so base + its directives collapse
+               into ONE effect computing the whole value (`mergeClassBuild`/`mergeStyleBuild`,
+               the build trigger); their attrs are then skipped (`mergedBuild`) in the dispatch
+               below. A STATIC base keeps the surgical-toggle model (the base sits in the cloned
+               skeleton). */
+            if (plan.merge.mergeClassBuild) {
+                binds.push(
+                    `$$effect(${namedThunk('class_merge', `${elVar}.setAttribute("class", [${plan.merge.classParts.join(', ')}].filter(Boolean).join(' '));`)});\n`,
+                )
+            }
+            if (plan.merge.mergeStyleBuild) {
+                binds.push(
+                    `$$effect(${namedThunk('style_merge', `${elVar}.setAttribute("style", [${plan.merge.styleParts.join(', ')}].filter(Boolean).join(';'));`)});\n`,
+                )
+            }
+            for (const { attr, mergedBuild } of plan.attrs) {
+                /* Skip the attrs already folded into a merged class/style effect. */
+                if (mergedBuild) {
+                    continue
+                }
                 if (attr.kind === 'spread') {
                     /* `{...expr}` onto the element: each key binds as a reactive attribute
                        (or an `on<event>` function as a listener) via `spreadAttrs`, skipping
                        any key explicitly named on the element (the explicit attr wins). */
                     binds.push(
-                        `spreadAttrs(${elVar}, ${namedThunk('spread', `return (${lowerExpression(attr.code)})`)}, ${JSON.stringify(spreadExcludedNames(node.attrs))});\n`,
+                        `$$spreadAttrs(${elVar}, ${namedThunk('spread', `return (${lowerExpression(attr.code)})`)}, ${JSON.stringify(spreadExcludedNames(node.attrs))});\n`,
                     )
                 } else if (attr.kind !== 'static') {
                     binds.push(dynamicAttr(node, attr, elVar))
@@ -319,13 +332,16 @@ export function generateBuild(
         for (const scope of node.scopes ?? []) {
             openTag += scopeAttr(scope)
         }
-        for (const attr of node.attrs) {
-            if (attr.kind === 'static') {
+        /* Static attrs sit in the cloned skeleton markup — emitted here regardless of whether
+           the element is a hole. A static class/style folded into a merged attribute (build
+           trigger) is skipped, since the merge effect re-sets the whole value. */
+        for (const { attr, mergedBuild } of plan.attrs) {
+            if (attr.kind === 'static' && !mergedBuild) {
                 openTag += staticAttr(attr.name, attr.value)
             }
         }
         openTag += '>'
-        if (VOID_TAGS.has(node.tag)) {
+        if (plan.isVoid) {
             return openTag
         }
         if (textLeafBind) {
@@ -352,7 +368,7 @@ export function generateBuild(
         const skVar = nextVar('sk')
         const binds: string[] = []
         const html = skeletonMarkup(node, skVar, binds)
-        return `const ${skVar} = skeleton(${parentVar}, ${JSON.stringify(html)});\n${binds.join('')}`
+        return `const ${skVar} = $$skeleton(${parentVar}, ${JSON.stringify(html)});\n${binds.join('')}`
     }
 
     /* Emits code appending `node` to `parentVar`. */
@@ -378,8 +394,8 @@ export function generateBuild(
                 .map((part, index) => {
                     const splitAlways = index < consumers.length - 1 ? ', true' : ''
                     return part.kind === 'static'
-                        ? `appendStatic(${parentVar}, ${JSON.stringify(part.value)}${splitAlways});\n`
-                        : `appendText(${parentVar}, ${namedThunk('text', `return (${lowerExpression(part.code)})`)}${splitAlways});\n`
+                        ? `$$appendStatic(${parentVar}, ${JSON.stringify(part.value)}${splitAlways});\n`
+                        : `$$appendText(${parentVar}, ${namedThunk('text', `return (${lowerExpression(part.code)})`)}${splitAlways});\n`
                 })
                 .join('')
         }
@@ -387,7 +403,7 @@ export function generateBuild(
             /* A standalone layout outlet (a top-level/element-nested `<slot/>` rewritten by
                `asOutlet`, reached outside any skeleton): an empty `outlet` boundary at
                `before`, no anchor — the router fills it with the next chain layer. */
-            return `outlet(${parentVar}, ${before});\n`
+            return `$$outlet(${parentVar}, ${before});\n`
         }
         if (node.kind === 'element' && node.tag === 'slot') {
             /* In a layout, `<slot/>` is the router's page outlet (`outlet` boundary the
@@ -395,7 +411,7 @@ export function generateBuild(
                are rewritten to `OUTLET_TAG` up front by `asOutlet` and handled above; this
                covers a layout slot reached inside a control-flow branch. */
             if (isLayout) {
-                return `outlet(${parentVar}, ${before});\n`
+                return `$$outlet(${parentVar}, ${before});\n`
             }
             return generateSlot(node, parentVar)
         }
@@ -452,7 +468,7 @@ export function generateBuild(
         let runHtml = ''
         const flush = (): void => {
             if (runHtml !== '') {
-                code += `cloneStatic(${parentVar}, ${JSON.stringify(runHtml)});\n`
+                code += `$$cloneStatic(${parentVar}, ${JSON.stringify(runHtml)});\n`
                 runHtml = ''
             }
         }
@@ -473,8 +489,14 @@ export function generateBuild(
        the component scope (its `model`/cells); `args` are plain parameters bound by
        the call. Appends nothing at the declaration site — `{name(args)}` mounts it. */
     function generateSnippet(node: Extract<TemplateNode, { kind: 'snippet' }>): string {
-        const body = node.children.map((child) => generateChild(child, '$host')).join('')
-        return `function ${node.name}(${node.params ?? ''}) {\nreturn snippet(($host) => {\n${body}});\n}\n`
+        const plan = snippetPlan(node)
+        /* `args` are plain call parameters, not component cells — `withBindings` registers the
+           plan's `plain` bindings so the body reads the bare local, shadowing a same-named
+           component signal rather than reading it. */
+        const body = withBindings(withShadow, plan.bindings, buildBindingKind, () =>
+            plan.children.map((child) => generateChild(child, '$host')).join(''),
+        )
+        return `function ${plan.name}(${plan.params ?? ''}) {\nreturn $$snippet(($host) => {\n${body}});\n}\n`
     }
 
     /* A switch: each `case` is `{ match: () => value, render }`, the default is
@@ -493,21 +515,17 @@ export function generateBuild(
                 return `{ match: ${match}, render: ${branchThunk(branch.children)} }`
             })
             .join(', ')
-        return `switchBlock(${parentVar}, () => (${lowerExpression(node.subject)}), [${cases}], ${before});\n`
+        return `$$switchBlock(${parentVar}, () => (${lowerExpression(node.subject)}), [${cases}], ${before});\n`
     }
 
-    /* A `<slot>` outlet: render the parent-provided content (`$children`), falling
-       back to the slot's own children when the parent supplied none. */
+    /* A `{children()}` slot fill point: render the parent-provided content (`$children`).
+       A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot node never
+       carries children — the invoke is unconditional but guarded against a propless mount. */
     function generateSlot(
-        node: Extract<TemplateNode, { kind: 'element' }>,
+        _node: Extract<TemplateNode, { kind: 'element' }>,
         parentVar: string,
     ): string {
-        const fallback = generateChildren(node.children, parentVar)
-        const invoke = `$props.$children(${parentVar})`
-        if (fallback.trim() === '') {
-            return `if ($props && $props.$children) { ${invoke}; }\n`
-        }
-        return `if ($props && $props.$children) { ${invoke}; } else {\n${fallback}}\n`
+        return `if ($props && $props.$children) { $props.$children(${parentVar}); }\n`
     }
 
     /* The child's slot content as a host-taking builder (`$children`), or undefined when
@@ -534,11 +552,11 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
-        return `mountChild(${parentVar}, ${node.name}, ${propsArg(node)}, ${before}, ${JSON.stringify(node.name)});\n`
+        return `$$mountChild(${parentVar}, ${node.name}, ${propsArg(node)}, ${before}, ${JSON.stringify(node.name)});\n`
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a
-       single-element root; a render thunk returns its node. */
+       void render thunk `(parent[, value]) => void` that builds its content into `parent`. */
     function generateAwait(
         node: Extract<TemplateNode, { kind: 'await' }>,
         parentVar: string,
@@ -551,21 +569,20 @@ export function generateBuild(
            resolved content/binding feeds one thunk regardless of mode. */
         const thenThunk = branchThunk(
             plan.resolvedChildren,
-            plan.resolvedAs,
+            plan.resolvedBindings,
             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 = plan.surfaceRejection
             ? 'undefined'
-            : branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+            : branchThunk(plan.catchChildren, plan.catchBindings, plan.finallyChildren)
         const pendingThunk = hasRenderableContent(plan.pending)
             ? branchThunk(plan.pending)
             : 'undefined'
         return (
-            `awaitBlock(${parentVar}, nextBlockId(), () => (${lowerExpression(node.promise)}), ` +
+            `$$awaitBlock(${parentVar}, $$nextBlockId(), () => (${lowerExpression(node.promise)}), ` +
             `${pendingThunk}, ` +
             `${thenThunk}, ` +
             `${catchThunk}, ${before});\n`
@@ -576,28 +593,33 @@ export function generateBuild(
        builds its children — and an optional trailing `finally` branch — into
        `parent`. The full-range model tracks the built content between markers, so a
        branch holds ANY content (components, text, nested control-flow, snippets) and
-       is generated exactly like a normal child list. `valueParam` binds a resolved /
-       error / item value into scope. Nested `<script>`s are emitted in document order
-       by `generateChildren`; `withNestedScripts` puts their bindings in deref scope. */
+       is generated exactly like a normal child list. `bindings` are the value param(s)
+       the plan declared (an `await` `then` value → `reactive`; a `catch` error → `plain`)
+       — at most one. Names flow to the deref scope ONLY through `withBindings` over the
+       plan's bindings; the cell wiring of a `reactive` binding is arranged by
+       `reactiveBinding`. Nested `<script>`s are emitted in document order by
+       `generateChildren`; `withNestedScripts` puts their bindings in deref scope. */
     function branchThunk(
         children: TemplateNode[],
-        valueParam?: string,
+        bindings: Binding[] = [],
         finallyChildren: TemplateNode[] = [],
-        reactiveValue = false,
     ): string {
         const parentParam = nextVar('p')
-        /* A reactive value (an `await` `then`) arrives as a `.value` cell the runtime can set
-           in place, so the branch re-runs in place on a re-settle instead of being rebuilt. */
-        const binding =
-            reactiveValue && valueParam !== undefined ? reactiveBinding(valueParam) : undefined
-        const param = binding?.param ?? valueParam
-        const prefix = binding?.prefix ?? ''
-        const localNames = binding?.localNames ?? []
+        /* A `reactive` binding arrives as a `.value` cell the runtime can set in place (the
+           branch re-runs in place on a re-settle); `reactiveBinding` renders its cell param +
+           per-leaf reader prefix. A `plain` binding is the author param verbatim — a real arrow
+           parameter `withBindings` registers under `plain`, read as the bare local. */
+        const reactive = bindings.find((binding) => binding.classification === 'reactive')
+        const wiring =
+            reactive === undefined ? undefined : reactiveBinding(reactive, nextVar, lowerStatement)
+        const plainBinding = bindings.find((binding) => binding.classification === 'plain')
+        const param = wiring?.param ?? plainBinding?.name
+        const prefix = wiring?.prefix ?? ''
         const head = param === undefined ? `(${parentParam})` : `(${parentParam}, ${param})`
         const body = withNestedScripts(children, () =>
-            localNames.length === 0
-                ? generateChildren(children, parentParam)
-                : withLocalDerived(localNames, () => generateChildren(children, parentParam)),
+            withBindings(withShadow, bindings, buildBindingKind, () =>
+                generateChildren(children, parentParam),
+            ),
         )
         const finallyBody =
             finallyChildren.length > 0
@@ -630,11 +652,11 @@ export function generateBuild(
         before: string,
     ): string {
         const plan = tryPlan(node)
-        const tryThunk = branchThunk(plan.guarded, undefined, plan.finallyChildren)
+        const tryThunk = branchThunk(plan.guarded, [], plan.finallyChildren)
         const catchThunk = plan.hasCatch
-            ? branchThunk(plan.catchChildren, plan.catchAs, plan.finallyChildren)
+            ? branchThunk(plan.catchChildren, plan.catchBindings, plan.finallyChildren)
             : 'undefined'
-        return `tryBlock(${parentVar}, nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
+        return `$$tryBlock(${parentVar}, $$nextBlockId(), ${tryThunk}, ${catchThunk}, ${before});\n`
     }
 
     /* A conditional with an optional nested `<template else>` (a `case` child). Each
@@ -652,7 +674,7 @@ export function generateBuild(
             const thenThunk = branchThunk(plan.thenChildren)
             const elseThunk =
                 plan.elseBranch === undefined ? 'undefined' : branchThunk(plan.elseBranch.children)
-            return `when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
+            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
@@ -665,7 +687,7 @@ export function generateBuild(
                     : `{ match: undefined, render: ${branchThunk(branch.children)} }`,
             ),
         ]
-        return `switchBlock(${parentVar}, () => true, [${entries.join(', ')}], ${before});\n`
+        return `$$switchBlock(${parentVar}, () => true, [${entries.join(', ')}], ${before});\n`
     }
 
     /* A keyed each. Each row is a content RANGE (any content, tracked between the
@@ -675,6 +697,7 @@ export function generateBuild(
         parentVar: string,
         before: string,
     ): string {
+        const plan = eachPlan(node)
         const rowParam = nextVar('p')
         /* The item is a reactive `.value` cell so a re-key with a changed value updates the row
            in place (no rebuild). `keyOf` receives the RAW item; the key expression is lowered
@@ -683,34 +706,34 @@ export function generateBuild(
            plain `as` returns its name; a destructuring `as` binds a fresh param and returns
            THAT, not the pattern re-wrapped (`[i,crumb]` → `[i,crumb]` would allocate a fresh
            array per reconcile, so keys never match and every row rebuilds). An explicit `key`
-           destructures the item via `node.as` to read its leaves. */
-        const rawItemParam = isPlainIdentifier(node.as) ? node.as : nextVar('k')
-        const keyParam = node.key === undefined ? rawItemParam : node.as
-        const keyExpression = node.key === undefined ? rawItemParam : lowerExpression(node.key)
-        const binding = reactiveBinding(node.as)
-        /* `index="i"` binds the row's position as a third reactive cell param (the runtime
-           always passes it). It is a plain identifier — read as `i.value` — so it enters the
-           body's deref scope alongside the item's leaf names; an unnamed param when absent. */
-        const indexParam = node.index === undefined ? '' : `, ${node.index}`
-        const bodyLocalNames =
-            node.index === undefined ? binding.localNames : [...binding.localNames, node.index]
+           destructures the item via `plan.as` to read its leaves. */
+        const rawItemParam = isPlainIdentifier(plan.as) ? plan.as : nextVar('k')
+        const keyParam = plan.key === undefined ? rawItemParam : plan.as
+        const keyExpression = plan.key === undefined ? rawItemParam : lowerExpression(plan.key)
+        /* The item is the row's `reactive` binding (its `.value` cell + per-leaf reader prefix
+           rendered by `reactiveBinding`); `index="i"` is a second reactive cell param, a plain
+           identifier read as `i.value` (no prefix). The names of BOTH enter the deref scope via
+           `withBindings` over `plan.bindings`, not a hand-built list. */
+        const itemWiring = reactiveBinding(plan.bindings[0] as Binding, nextVar, lowerStatement)
+        const indexParam = plan.index === undefined ? '' : `, ${plan.index}`
         /* The row body builds its children (a `<script>` declares per-row local signals,
            emitted in document order) into the row parent. A `<template catch>` child is
            consumed by the async-each, not the row — `generateChildren` skips it. */
-        const rowBody = withNestedScripts(node.children, () =>
-            withLocalDerived(bodyLocalNames, () => generateChildren(node.children, rowParam)),
+        const rowBody = withNestedScripts(plan.children, () =>
+            withBindings(withShadow, plan.bindings, buildBindingKind, () =>
+                generateChildren(plan.children, rowParam),
+            ),
         )
         /* `await` → the AsyncIterable runtime, drained row-by-row on the client, with an
            optional `<template catch>` branch rendered (after the streamed rows) when the
            iterator rejects. Absent → `undefined`, so the rejection surfaces instead. */
-        const fn = node.async ? 'eachAsync' : 'each'
-        const [catchBranch] = resolveBranches(node, 'catch')
-        const catchArg = node.async
-            ? `, ${catchBranch === undefined ? 'undefined' : branchThunk(catchBranch.children, catchBranch.as ?? '_error')}`
+        const fn = plan.async ? '$$eachAsync' : '$$each'
+        const catchArg = plan.async
+            ? `, ${plan.hasCatch ? branchThunk(plan.catchChildren, plan.catchBindings) : 'undefined'}`
             : ''
         return (
-            `${fn}(${parentVar}, () => (${lowerExpression(node.items)}), ` +
-            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${binding.param}${indexParam}) => {\n${binding.prefix}${rowBody}}${catchArg}, ${before});\n`
+            `${fn}(${parentVar}, () => (${lowerExpression(plan.items)}), ` +
+            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${itemWiring.param}${indexParam}) => {\n${itemWiring.prefix}${rowBody}}${catchArg}, ${before});\n`
         )
     }