@abide/abide 0.43.1 → 0.44.0

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

@@ -10,22 +10,27 @@ import {
 import { asOutlet } from './asOutlet.ts'
 import { awaitPlan } from './awaitPlan.ts'
 import { composeProps } from './composeProps.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 { isAnchorPositioned } from './isAnchorPositioned.ts'
 import { lowerContext } from './lowerContext.ts'
 import { makeVarNamer } from './makeVarNamer.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 { stripEffects } from './stripEffects.ts'
 import { switchPlan } from './switchPlan.ts'
 import { tryPlan } from './tryPlan.ts'
-import type { TemplateAttr } from './types/TemplateAttr.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 range boundary comments a control-flow block emits around its content. Sourced
    from the SAME wire-alphabet constants the client's `document.createComment` markers
@@ -70,9 +75,15 @@ export function generateSSR(
         expression: lowerExpression,
         statement,
         withNestedScripts,
+        withShadow,
         bindRead,
     } = lowerContext(stateNames, derivedNames, computedNames)
 
+    /* SSR has no cells, so every plan `Binding` — `reactive` or `plain` — renders as a `plain`
+       shadow (a real JS local / loop var / arrow param, read as the bare identifier). The one
+       mapping `withBindings` registers every binding through on this back-end. */
+    const ssrBindingKind = (_binding: Binding): ShadowKind => 'plain'
+
     /* A scoped-script body for SSR: the shared lowering, then strip effects
        (client-only lifecycle that emits no HTML) — the one SSR-side asymmetry. */
     const lowerScript = (code: string): string => stripEffects(statement(code))
@@ -248,14 +259,19 @@ export function generateSSR(
             return ''
         }
         if (node.kind === 'snippet') {
+            const plan = snippetPlan(node)
             /* A hoisted function returning the snippet's `$snip`-branded HTML string;
-               `{name(args)}` pushes it via `$text`, which wraps it in markers. */
-            const body = generateInto(node.children, '$o')
+               `{name(args)}` pushes it via `$text`, which wraps it in markers. `args` are plain
+               call parameters — `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, ssrBindingKind, () =>
+                generateInto(plan.children, '$o'),
+            )
             /* `async` only when the body produces an `await` (it inlines a child component) — then
                call sites `await` it (`$text(await frag())`). A sync snippet stays a plain function
                called inline, preserving the sync render contract. */
-            const keyword = asyncSnippets.has(node.name) ? 'async function' : 'function'
-            return `${keyword} ${node.name}(${node.params ?? ''}) {\nconst $o = [];\n${body}return $snip($o.join(''));\n}\n`
+            const keyword = asyncSnippets.has(plan.name) ? 'async function' : 'function'
+            return `${keyword} ${plan.name}(${plan.params ?? ''}) {\nconst $o = [];\n${body}return $snip($o.join(''));\n}\n`
         }
         if (node.kind === 'script') {
             /* A scoped reactive block: re-seed its local signals (lowered, in scope)
@@ -268,22 +284,35 @@ export function generateSSR(
             return ''
         }
         if (node.kind === 'each') {
+            const plan = eachPlan(node)
             /* Async each (`await`) is drained on the client — render no rows on the
                server (an infinite stream would hang SSR); the client inserts its anchor
                before the next sibling during hydration, like an empty sync each. In a
                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) {
+            if (plan.async) {
                 return anchor
             }
-            const rowBody = `${openRange(target)}${branchContent(node.children, target)}${closeRange(target)}`
+            /* The row item (and index) are real `for`-loop locals, so the body must lower
+               references to them as the bare identifier — `withBindings` registers the plan's
+               row bindings (under `plain`, SSR's only kind) so a row binding that shadows a
+               same-named component signal reads the loop value, not the (whole-list) signal it
+               shadows. The names come straight from `plan.bindings` (the single source the
+               client also reads); the items expression stays outside the shadow. */
+            const rowBody = withBindings(
+                withShadow,
+                plan.bindings,
+                ssrBindingKind,
+                () =>
+                    `${openRange(target)}${branchContent(plan.children, target)}${closeRange(target)}`,
+            )
             /* `index="i"` binds the row position. SSR reads it as a plain number from
                `entries()` over a materialized array; the client reads the same number from a
                cell, so first paint is congruent. No index → a plain `for…of` over the items. */
             const header =
-                node.index === undefined
-                    ? `for (const ${node.as} of (${lowerExpression(node.items)}))`
-                    : `for (const [${node.index}, ${node.as}] of [...(${lowerExpression(node.items)})].entries())`
+                plan.index === undefined
+                    ? `for (const ${plan.as} of (${lowerExpression(plan.items)}))`
+                    : `for (const [${plan.index}, ${plan.as}] of [...(${lowerExpression(plan.items)})].entries())`
             return `${anchor}${header} {\n${rowBody}}\n`
         }
         if (node.kind === 'await') {
@@ -369,30 +398,33 @@ export function generateSSR(
         for (const scope of node.scopes ?? []) {
             code += push(target, scopeAttr(scope))
         }
-        /* `class:`/`style:` directives collapse with any static `class`/`style` into a SINGLE
-           merged attribute (a duplicate attribute would be invalid and ignored). The client's
-           classList.toggle / style.setProperty effects re-apply the same values on hydrate, so
-           the merged SSR value already matches the post-mount DOM — no flash, no desync. */
-        const classDirectives = node.attrs.filter(
-            (attr): attr is Extract<TemplateAttr, { kind: 'class' }> => attr.kind === 'class',
-        )
-        const styleDirectives = node.attrs.filter(
-            (attr): attr is Extract<TemplateAttr, { kind: 'style' }> => attr.kind === 'style',
-        )
-        for (const attr of node.attrs) {
+        /* The shared per-element emission DECISION (one site, consulted by the build back-end
+           too): each attribute classified + tagged with its merge status, the class/style/
+           directive merge folded in, and void-tag status. `class:`/`style:` directives collapse
+           with any static/interpolated `class`/`style` base into a SINGLE merged attribute (a
+           duplicate attribute would be invalid and ignored). SSR must always emit one attribute
+           string, so it merges whenever a directive exists (`mergeClass`/`mergeStyle`); those
+           attrs are tagged `mergedSSR` and skipped below. The client's classList.toggle /
+           style.setProperty effects re-apply the same values on hydrate, so the merged SSR value
+           already matches the post-mount DOM — no flash, no desync. SSR RENDERS each kind below
+           as an escaped string. */
+        const plan = elementPlan(node, lowerExpression)
+        const merge = plan.merge
+        for (const { attr, mergedSSR } of plan.attrs) {
+            /* Skip attrs folded into the merged class/style string below. */
+            if (mergedSSR) {
+                continue
+            }
             if (attr.kind === 'static') {
-                /* A static class/style is folded into the merge below when directives exist. */
-                if (
-                    (attr.name === 'class' && classDirectives.length > 0) ||
-                    (attr.name === 'style' && styleDirectives.length > 0)
-                ) {
-                    continue
-                }
                 code += push(target, staticAttr(attr.name, attr.value))
             } else if (attr.kind === 'expression') {
                 /* present/absent semantics matching the client `attr` binding:
                    false/null/undefined drops it, true emits the bare attribute. */
                 code += `${target}.push($attr(${JSON.stringify(attr.name)}, ${lowerExpression(attr.code)}));\n`
+            } else if (attr.kind === 'interpolated') {
+                /* A string-valued attribute, always present (a merged class/style was skipped
+                   above). */
+                code += `${target}.push($attr(${JSON.stringify(attr.name)}, ${lowerExpression(interpolatedTemplateLiteral(attr.parts))}));\n`
             } else if (attr.kind === 'spread') {
                 /* `{...expr}` element spread: each key as an attribute, functions (event
                    handlers) skipped — the client `spreadAttrs` wires those on hydrate. Keys
@@ -415,38 +447,16 @@ export function generateSSR(
                 code += `${target}.push(${JSON.stringify(` ${attr.property}="`)} + $esc(${bindRead(attr.code)}) + '"');\n`
             }
         }
-        /* Merged class: static value + each directive's name when its expression is truthy. */
-        if (classDirectives.length > 0) {
-            const staticClass = node.attrs.find(
-                (attr): attr is Extract<TemplateAttr, { kind: 'static' }> =>
-                    attr.kind === 'static' && attr.name === 'class',
-            )
-            const parts = [
-                ...(staticClass ? [JSON.stringify(staticClass.value)] : []),
-                ...classDirectives.map(
-                    (dir) => `((${lowerExpression(dir.code)}) ? ${JSON.stringify(dir.name)} : "")`,
-                ),
-            ]
-            code += `${target}.push(' class="' + $esc([${parts.join(', ')}].filter(Boolean).join(' ')) + '"');\n`
+        /* Merged class/style: the same composed parts the build effect uses (from the plan),
+           joined and escaped into one attribute string. */
+        if (merge.mergeClass) {
+            code += `${target}.push(' class="' + $esc([${merge.classParts.join(', ')}].filter(Boolean).join(' ')) + '"');\n`
         }
-        /* Merged style: static value + each directive's `prop:value` (String()-coerced, matching
-           the client's style.setProperty). */
-        if (styleDirectives.length > 0) {
-            const staticStyle = node.attrs.find(
-                (attr): attr is Extract<TemplateAttr, { kind: 'static' }> =>
-                    attr.kind === 'static' && attr.name === 'style',
-            )
-            const parts = [
-                ...(staticStyle ? [JSON.stringify(staticStyle.value)] : []),
-                ...styleDirectives.map(
-                    (dir) =>
-                        `(${JSON.stringify(`${dir.property}:`)} + String(${lowerExpression(dir.code)}))`,
-                ),
-            ]
-            code += `${target}.push(' style="' + $esc([${parts.join(', ')}].filter(Boolean).join(';')) + '"');\n`
+        if (merge.mergeStyle) {
+            code += `${target}.push(' style="' + $esc([${merge.styleParts.join(', ')}].filter(Boolean).join(';')) + '"');\n`
         }
         code += push(target, '>')
-        if (!VOID_TAGS.has(node.tag)) {
+        if (!plan.isVoid) {
             /* Each child's skeleton position (whether its reactive text interleaves into an
                anchor, whether a nested block anchors) is already recorded by `skeletonContext`
                — read per node, not tracked here. A `<script>` child scopes its bindings to
@@ -470,15 +480,13 @@ export function generateSSR(
         anchor: string,
     ): string {
         const wrap = inSkeleton.get(node)
-        const fallback = generateInto(node.children, target)
         /* `$children` is an async builder the parent passes lazily; `await` it here so the
-           slot content's block ids allocate AT the `<slot>` position — the same order the
+           slot content's block ids allocate AT the slot position — the same order the
            client builds slot content — keeping hydration congruent. The `await` makes a
-           component with a `<slot>` an async render (its caller already `await`s `render()`). */
-        const body =
-            fallback.trim() === ''
-                ? `if ($props && $props.$children) { ${target}.push(await $props.$children()); }\n`
-                : `if ($props && $props.$children) { ${target}.push(await $props.$children()); } else {\n${fallback}}\n`
+           component with a slot an async render (its caller already `await`s `render()`).
+           A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot node
+           carries no children. */
+        const body = `if ($props && $props.$children) { ${target}.push(await $props.$children()); }\n`
         if (!wrap) {
             return body
         }
@@ -511,19 +519,37 @@ export function generateSSR(
     ): string {
         const plan = awaitPlan(node)
         const id = nextVar('$aid')
+        /* The resolved value lands in a synthetic var FIRST, then the author binding is
+           declared from it inside a nested block. Two reasons: the promise expression is
+           lowered in the outer scope where the binding name is not yet declared, so
+           `{#await foo then foo}` reads the outer `foo` (no temporal-dead-zone crash on a
+           same-named binding); and the nested block is the lexical scope the branch's
+           `withBindings` shadow models, so a reference to the binding reads the plain
+           local rather than the (unresolved) component signal it shadows. */
+        const resolved = nextVar('$av')
         let code = `const ${id} = $ctx.next++;\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += `try {\n`
-        code += `const ${plan.resolvedAs} = await (${lowerExpression(node.promise)});\n`
-        code += branchContent(plan.resolvedChildren, target)
+        code += `const ${resolved} = await (${lowerExpression(node.promise)});\n`
+        code += `{\n`
+        code += `const ${plan.resolvedAs} = ${resolved};\n`
+        code += withBindings(withShadow, plan.resolvedBindings, ssrBindingKind, () =>
+            branchContent(plan.resolvedChildren, target),
+        )
+        /* `finally` does not bind the resolved value, so it is lowered OUTSIDE the `then`
+           shadow — matching the catch branch below, so a finally expression naming the
+           same identifier as the `then` binding reads the component signal, not the local. */
         code += branchContent(plan.finallyChildren, target)
         code += `$resume[${id}] = { ok: true, value: ${plan.resolvedAs} };\n`
+        code += `}\n`
         if (plan.surfaceRejection) {
             /* No catch/finally → let the rejection surface instead of an empty branch. */
             code += `} catch (_error) { throw _error; }\n`
         } else {
             code += `} catch (${plan.catchAs}) {\n`
-            code += branchContent(plan.catchChildren, target)
+            code += withBindings(withShadow, plan.catchBindings, ssrBindingKind, () =>
+                branchContent(plan.catchChildren, target),
+            )
             code += branchContent(plan.finallyChildren, target)
             code += `$resume[${id}] = { ok: false, error: String(${plan.catchAs}) };\n`
             code += `}\n`
@@ -549,15 +575,26 @@ export function generateSSR(
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += branchContent(plan.pending, target)
         code += `${target}.push("<!--/abide:await:" + ${id} + "-->");\n`
-        const settled = (binding: string, children: TemplateNode[]) =>
-            `async (${binding}) => { const $o = []; ${branchContent(children, '$o')}${branchContent(plan.finallyChildren, '$o')}return $o.join(''); }`
+        /* The settled renderer takes the resolved/error value as a real arrow parameter
+           (`async (foo) => …`), so its body must lower references to that name as the plain
+           local — `withBindings` registers the plan's bindings (under `plain`, SSR's only kind)
+           so a binding that shadows a same-named component signal reads the value, not the
+           signal. The arrow param is the binding's author name; the names enter scope from the
+           same `plan.*Bindings` the client reads. */
+        const settled = (param: string, bindings: Binding[], children: TemplateNode[]) =>
+            `async (${param}) => { const $o = []; ${withBindings(
+                withShadow,
+                bindings,
+                ssrBindingKind,
+                () => branchContent(children, '$o'),
+            )}${branchContent(plan.finallyChildren, '$o')}return $o.join(''); }`
         const catchProp = plan.surfaceRejection
             ? ''
-            : `catch: ${settled(plan.catchAs, plan.catchChildren)} `
+            : `catch: ${settled(plan.catchAs, plan.catchBindings, plan.catchChildren)} `
         code +=
             `$awaits.push({ id: ${id}, ` +
             `promise: () => (${lowerExpression(node.promise)}), ` +
-            `then: ${settled(plan.resolvedAs, plan.resolvedChildren)}, ` +
+            `then: ${settled(plan.resolvedAs, plan.resolvedBindings, plan.resolvedChildren)}, ` +
             `${catchProp}});\n`
         return code
     }
@@ -580,7 +617,9 @@ export function generateSSR(
         code += branchContent(plan.finallyChildren, target)
         code += `} catch (${plan.catchAs}) {\n${target}.length = ${mark};\n`
         if (plan.hasCatch) {
-            code += branchContent(plan.catchChildren, target)
+            code += withBindings(withShadow, plan.catchBindings, ssrBindingKind, () =>
+                branchContent(plan.catchChildren, target),
+            )
             code += branchContent(plan.finallyChildren, target)
         } else {
             code += `throw ${plan.catchAs};\n`

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

@@ -1,10 +1,13 @@
+import type { Binding } from './types/Binding.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 
 type Case = Extract<TemplateNode, { kind: 'case' }>
 
 /* The structural shape of an `if` chain, resolved once so the build and SSR back-ends share
    one partition of its children and only own emission. Both previously recomputed the
-   then-content / branch split and the elseif/else classification. */
+   then-content / branch split and the elseif/else classification. An `if`/`elseif`/`else`
+   introduces no names, so `bindings` is empty — present so every block plan answers the
+   single binding source uniformly. */
 export type IfPlan = {
     /* The `then` content — every child that is not an `elseif`/`else` branch. */
     thenChildren: TemplateNode[]
@@ -16,6 +19,8 @@ export type IfPlan = {
     hasElseif: boolean
     /* The match-less `else` branch, if present. */
     elseBranch: Case | undefined
+    /* An `if` chain binds no names. */
+    bindings: Binding[]
 }
 
 /* Partitions an `if` node's children into the shared structural plan. */
@@ -26,5 +31,6 @@ export function ifPlan(node: Extract<TemplateNode, { kind: 'if' }>): IfPlan {
         branches,
         hasElseif: branches.some((branch) => branch.condition !== undefined),
         elseBranch: branches.find((branch) => branch.condition === undefined),
+        bindings: [],
     }
 }

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

@@ -0,0 +1,25 @@
+import type { TextPart } from './types/TextPart.ts'
+
+/* Escapes a literal attribute chunk for embedding in a JS template literal: a
+   backslash, backtick, or `${` would otherwise start an escape/expression. */
+function escapeTemplateChunk(value: string): string {
+    return value.replace(/[\\`]/g, '\\$&').replace(/\$\{/g, '\\${')
+}
+
+/*
+Builds the RAW (un-lowered) template-literal source for an interpolated attribute
+or prop value — static parts escaped, each `{expr}` spliced as `${code}`. The caller
+lowers the whole result through its signal transformer, so the embedded expressions
+are rewritten exactly like any other template expression. Both back-ends and the
+component-prop path share this one builder, so server markup, client binding, and
+prop value can't diverge on the concatenation. Always yields a string, so an
+interpolated attribute is always present.
+*/
+export function interpolatedTemplateLiteral(parts: TextPart[]): string {
+    const body = parts
+        .map((part) =>
+            part.kind === 'static' ? escapeTemplateChunk(part.value) : `\${${part.code}}`,
+        )
+        .join('')
+    return `\`${body}\``
+}

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

@@ -0,0 +1,7 @@
+/* Compiled once at module load — re-evaluating the literal per call would recompile it. */
+const PLAIN_IDENTIFIER = /^[A-Za-z_$][A-Za-z0-9_$]*$/
+
+/* Matches a JS identifier — a plain binding `as`/index that reads/keys directly, vs a
+   destructuring pattern that re-applies per read. Shared by `reactiveBinding` (cell deref)
+   and `each` key derivation so the one identifier test stays single-source. */
+export const isPlainIdentifier = (name: string): boolean => PLAIN_IDENTIFIER.test(name)

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

@@ -2,13 +2,14 @@ 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 `isControlFlow` and `skeletonable`.
+The anchor-placement decision for reactive text: `skeletonContext` consults this once and
+records the result in `markText`; both back-ends read that map 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 `isControlFlow` and `skeletonable`.
 */
 export function isTextLeaf(node: Extract<TemplateNode, { kind: 'element' }>): boolean {
     return node.children.every((child) => child.kind === 'text' || child.kind === 'style')

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

@@ -1,4 +1,5 @@
 import ts from 'typescript'
+import { createShadowScope } from './createShadowScope.ts'
 import { docAccessTransformer } from './lowerDocAccess.ts'
 import { nestedBindingNames } from './prepareNestedScript.ts'
 import { signalRefsTransformer } from './renameSignalRefs.ts'
@@ -6,6 +7,9 @@ import { TS_PRINTER } from './TS_PRINTER.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
 import { unwrapParens } from './unwrapParens.ts'
 
+/* Compiled once — strips the trailing `;` off every lowered expression. */
+const TRAILING_SEMICOLON = /;$/
+
 /*
 The shared expression-lowering context both back-ends build on: the signal→`model`
 rewrite and doc-access lowering that turns the signal surface the author writes
@@ -22,12 +26,14 @@ export function lowerContext(
     derivedNames: ReadonlySet<string>,
     computedNames: ReadonlySet<string> = new Set(),
 ) {
-    /* Branch-scoped signal bindings (from nested `<script>`s, and the block value params
-       pushed by `withLocalDerived`) — they deref to `.value` like a `computed`, and as a
-       nearer lexical scope they SHADOW a same-named component signal. Pushed while a
-       branch's script + markup compile, popped after, so they shadow only within that
-       subtree. */
-    const localDerived = new Set<string>()
+    /* The typed branch-local shadow stack: one auto-popping value owning both kinds.
+       `derived` names deref to `.value` like a `computed` (block value params the client
+       binds as a reactive cell, and nested-`<script>` bindings); `plain` names deref as
+       the bare identifier (block value params SSR binds as a real JS local). Both, as a
+       nearer lexical scope, SHADOW a same-named component signal. `withShadow` pushes on
+       entry and pops in a `finally`, so a branch's shadows cannot outlive the branch even
+       if its body throws — the leak the old hand-written pop allowed. */
+    const scope = createShadowScope()
 
     /* Parse `code` once and chain the reference rename and doc-access lowering over the
        one tree — the two string passes would each parse + reprint. `localDerived` is
@@ -36,8 +42,14 @@ export function lowerContext(
     function lowerOnce(code: string): string {
         const source = ts.createSourceFile('expr.ts', code, ts.ScriptTarget.Latest, true)
         const result = ts.transform(source, [
-            signalRefsTransformer(stateNames, derivedNames, computedNames, new Set(localDerived)),
-            docAccessTransformer('model'),
+            signalRefsTransformer(
+                stateNames,
+                derivedNames,
+                computedNames,
+                new Set(scope.names('derived')),
+                new Set(scope.names('plain')),
+            ),
+            docAccessTransformer('$$model'),
         ])
         const output = TS_PRINTER.printFile(result.transformed[0] as ts.SourceFile).trim()
         result.dispose()
@@ -48,7 +60,7 @@ export function lowerContext(
        literal (`{ a: 1 }`) parses as an expression, not a block of labeled statements,
        through the rewrite; the wrapper is then peeled back off. */
     function expression(code: string): string {
-        return unwrapParens(lowerOnce(`(${code})`).replace(/;$/, ''))
+        return unwrapParens(lowerOnce(`(${code})`).replace(TRAILING_SEMICOLON, ''))
     }
 
     /* As above but keeps the trailing `;` for a statement/handler body. */
@@ -93,45 +105,23 @@ export function lowerContext(
     }
 
     /* Adds any `<script>` children's binding names to the deref scope (so the script
-       bodies and the branch's markup auto-deref them), runs `body` within that scope,
-       then pops the names it added. Returns whatever `body` produces. */
+       bodies and the branch's markup auto-deref them) for the duration of `body`. */
     function withNestedScripts<T>(children: TemplateNode[], body: () => T): T {
-        const added: string[] = []
-        for (const child of children) {
-            if (child.kind === 'script') {
-                for (const name of nestedBindingNames(child.code)) {
-                    if (!localDerived.has(name)) {
-                        localDerived.add(name)
-                        added.push(name)
-                    }
-                }
-            }
-        }
-        const result = body()
-        for (const name of added) {
-            localDerived.delete(name)
-        }
-        return result
+        const names = children.flatMap((child) =>
+            child.kind === 'script' ? [...nestedBindingNames(child.code)] : [],
+        )
+        return scope.withShadow(names, 'derived', body)
     }
 
-    /* Pushes explicit names into the deref scope for `body` then pops them — the
-       programmatic counterpart to `withNestedScripts`, used to bind a block's value param
-       (an `await` `then` value, a keyed `each` item) as a reactive `.value` cell so the
-       branch reads it reactively and re-runs in place when the block sets the cell. */
-    function withLocalDerived<T>(names: string[], body: () => T): T {
-        const added: string[] = []
-        for (const name of names) {
-            if (!localDerived.has(name)) {
-                localDerived.add(name)
-                added.push(name)
-            }
-        }
-        const result = body()
-        for (const name of added) {
-            localDerived.delete(name)
-        }
-        return result
+    return {
+        expression,
+        statement,
+        withNestedScripts,
+        /* The raw branch-local shadow registration both back-ends drive `withBindings`
+           through: a block's bindings flow to a `ShadowKind` only via that one shared loop,
+           never through a per-block `scope.withShadow` call here. */
+        withShadow: scope.withShadow,
+        bindRead,
+        bindWrite,
     }
-
-    return { expression, statement, withNestedScripts, withLocalDerived, bindRead, bindWrite }
 }

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

@@ -191,7 +191,7 @@ export function docAccessTransformer(docName: string): ts.TransformerFactory<ts.
                        naming the authored scope path and member — the key and member are both
                        in hand here, the `.abide` location comes free off the mapped stack. */
                     return ts.factory.createCallExpression(
-                        ts.factory.createIdentifier('readCall'),
+                        ts.factory.createIdentifier('$$readCall'),
                         undefined,
                         [
                             read,
@@ -268,7 +268,7 @@ function buildPath(segments: Segment[]): ts.Expression {
                key holding `/`|`~` (a date, a composite id) addresses one segment, not many. */
             fragments.push(
                 ts.factory.createCallExpression(
-                    ts.factory.createIdentifier('escapeKey'),
+                    ts.factory.createIdentifier('$$escapeKey'),
                     undefined,
                     [segment.node],
                 ),

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

@@ -34,7 +34,7 @@ export function lowerScript(scriptBody: string): {
     const result = ts.transform(source, [
         transformer,
         signalRefsTransformer(stateNames, derivedNames, computedNames),
-        docAccessTransformer('model'),
+        docAccessTransformer('$$model'),
     ])
     const transformed = result.transformed[0] as ts.SourceFile
     /* Top-level imports must live at module scope, not inside the mount/render