@abide/abide 0.48.0 → 0.50.0

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

@@ -1,15 +1,14 @@
 /*
 The abide-ui runtime names every compiled component module depends on, each
-paired with its package subpath (after the package name). One source of truth so
-three things can't drift: the normal module's import block (`compileModule`), the
-hot module's `window.__abide` destructure (dev component HMR), and the dev bridge
-that populates `window.__abide`. Order is the emit order.
+paired with its package subpath (after the package name). One source of truth for
+the import block `compileModule` emits at the head of every component module, so the
+emitted imports can't drift from the real package exports (a test checks each
+resolves). Order is the emit order.
 
 `alias` (when set) is the LOCAL name codegen emits — a `$$`-prefixed form reserved
 for the compiler so a user variable of the helper's bare name can never collide
-(`each as $$each`). It defaults to `name`; the dev bridge keys stay bare (the import
-source), so a hot module destructures `{ name: alias }`. As each helper's emit sites
-flip to its `$$` alias, set `alias` here in lockstep.
+(`each as $$each`). It defaults to `name`. As each helper's emit sites flip to its
+`$$` alias, set `alias` here in lockstep.
 */
 export const UI_RUNTIME_IMPORTS: { name: string; specifier: string; alias?: string }[] = [
     { name: 'snippet', specifier: 'shared/snippet', alias: '$$snippet' },
@@ -44,14 +43,43 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string; alias?: stri
     { name: 'mountSlot', specifier: 'ui/dom/mountSlot', alias: '$$mountSlot' },
     { name: 'outlet', specifier: 'ui/dom/outlet', alias: '$$outlet' },
     { name: 'mountChild', specifier: 'ui/dom/mountChild', alias: '$$mountChild' },
+    {
+        name: 'mountStreamedChild',
+        specifier: 'ui/dom/mountStreamedChild',
+        alias: '$$mountStreamedChild',
+    },
     { name: 'mergeProps', specifier: 'ui/dom/mergeProps', alias: '$$mergeProps' },
     { name: 'spreadProps', specifier: 'ui/dom/spreadProps', alias: '$$spreadProps' },
     { name: 'restProps', specifier: 'ui/dom/restProps', alias: '$$restProps' },
+    { name: 'bindProp', specifier: 'ui/dom/bindProp', alias: '$$bindProp' },
+    { name: 'bindableProp', specifier: 'ui/dom/bindableProp', alias: '$$bindableProp' },
     { name: 'spreadAttrs', specifier: 'ui/dom/spreadAttrs', alias: '$$spreadAttrs' },
     { name: 'readCall', specifier: 'ui/dom/readCall', alias: '$$readCall' },
+    { name: 'readCell', specifier: 'ui/dom/readCell', alias: '$$readCell' },
+    { name: 'cellPending', specifier: 'ui/dom/cellPending', alias: '$$cellPending' },
+    { name: 'withPath', specifier: 'ui/runtime/withPath', alias: '$$withPath' },
+    { name: 'settleAsyncCells', specifier: 'ui/settleAsyncCells', alias: '$$settleAsyncCells' },
+    { name: 'flight', specifier: 'ui/flight', alias: '$$flight' },
+    {
+        name: 'isolateCellBarrier',
+        specifier: 'ui/isolateCellBarrier',
+        alias: '$$isolateCellBarrier',
+    },
+    { name: 'renderPath', specifier: 'ui/runtime/renderPath', alias: '$$renderPath' },
+    {
+        name: 'finalizeStreamedChildren',
+        specifier: 'ui/finalizeStreamedChildren',
+        alias: '$$finalizeStreamedChildren',
+    },
+    {
+        name: 'mutateDocContainer',
+        specifier: 'ui/dom/mutateDocContainer',
+        alias: '$$mutateDocContainer',
+    },
     { name: 'hydrate', specifier: 'ui/dom/hydrate', alias: '$$hydrate' },
     { name: 'escapeKey', specifier: 'ui/runtime/escapeKey', alias: '$$escapeKey' },
     { name: 'nextBlockId', specifier: 'ui/runtime/nextBlockId', alias: '$$nextBlockId' },
+    { name: 'blockId', specifier: 'ui/runtime/blockId', alias: '$$blockId' },
     {
         name: 'enterRenderPass',
         specifier: 'ui/runtime/enterRenderPass',

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

@@ -4,8 +4,11 @@ import { isLayoutFile } from '../../shared/isLayoutFile.ts'
 import { messageFromError } from '../../shared/messageFromError.ts'
 import { AbideCompileError } from './AbideCompileError.ts'
 import { compileModule } from './compileModule.ts'
+import type { ShadowProgram } from './createShadowProgram.ts'
+import { interpolationClassifierForRoot } from './interpolationClassifierForRoot.ts'
 import { nearestProjectRoot } from './nearestProjectRoot.ts'
 import { offsetToLineColumn } from './offsetToLineColumn.ts'
+import { seedTypeClassifierForRoot } from './seedTypeClassifierForRoot.ts'
 
 /*
 Bun plugin that loads `.abide` single-file components: compiles each to the ES
@@ -38,11 +41,25 @@ export const abideUiPlugin: BunPlugin = {
         /* Scoped CSS keyed by its virtual specifier, filled as each `.abide` loads and
            read back when Bun resolves the matching `abide-style:` import (browser only). */
         const cssByVirtual = new Map<string, string>()
+        /* One WARM shadow program per project root (ADR-0019, Stage B): the checker +
+           per-file mappings type-directed lowering needs, built lazily on first `.abide`
+           in a root and reused for every component there — not rebuilt per module. */
+        const shadowByRoot = new Map<string, ShadowProgram | undefined>()
 
         build.onLoad({ filter: /\.abide$/ }, async (args) => {
             const source = await Bun.file(args.path).text()
-            const moduleId = relative(nearestProjectRoot(args.path, process.cwd()), args.path)
+            const root = nearestProjectRoot(args.path, process.cwd())
+            const moduleId = relative(root, args.path)
             const isLayout = isLayoutFile(args.path)
+            /* The classifier for this file over its root's warm shadow program. Fail-open:
+               a program that can't build (or a file with no shadow) yields `undefined`, so
+               the module compiles exactly as before. */
+            const classify = interpolationClassifierForRoot(shadowByRoot, root, args.path)
+            /* The seed classifier for this file over the SAME warm shadow program (ADR-0023):
+               reuses the `shadowByRoot` cache `classify` just warmed, so no second program is
+               built. Fail-open identically — a no-marker `computed(seed)` routes by type when
+               it resolves, else by the `isBareCallComputed` syntax heuristic. */
+            const seedClassify = seedTypeClassifierForRoot(shadowByRoot, root, args.path)
             /* Bun frames a plugin throw at `<file>:0` regardless of the real spot, so
                carry the component path + resolved line:col in the message — otherwise a
                control-flow / compile error reads as `:0` and (in deep imports) can look
@@ -66,7 +83,7 @@ export const abideUiPlugin: BunPlugin = {
                the styles come from the analysis `compileModule` already ran, so the loader no
                longer re-analyzes the source just to recover them. */
             const { code, styles } = compileAbide(() =>
-                compileModule(source, { isLayout, moduleId }),
+                compileModule(source, { isLayout, moduleId, classify, seedClassify }),
             )
             /* Browser build with `<style>`(s): concatenate every scoped block's CSS and
                pull it into the bundle via one virtual import, keyed by `moduleId` so the

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

@@ -1,8 +1,13 @@
+import { lowerAsyncInterpolations } from './lowerAsyncInterpolations.ts'
 import { lowerScript } from './lowerScript.ts'
 import { parseTemplate } from './parseTemplate.ts'
 import { scopeCss } from './scopeCss.ts'
+import { LEADING_SCRIPT } from './templateStartOffset.ts'
 import type { AnalyzedComponent } from './types/AnalyzedComponent.ts'
+import type { InterpolationClassifier } from './types/InterpolationClassifier.ts'
+import type { SeedTypeClassifier } from './types/SeedTypeClassifier.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
+import { writtenTemplateNames } from './writtenTemplateNames.ts'
 
 /*
 The shared compile front-end: splits the leading `<script>` off the template,
@@ -20,21 +25,89 @@ component+position identity, not CSS text: an edit to a `<style>` keeps the same
 `data-a-…`, so the live elements still match and the CSS can hot-swap in place.
 Absent (direct compile calls / tests) it falls back to hashing the style body.
 */
-export function analyzeComponent(source: string, scopeSeed?: string): AnalyzedComponent {
+export function analyzeComponent(
+    source: string,
+    scopeSeed?: string,
+    classify?: InterpolationClassifier,
+    /* Type-directed SEED classifier (ADR-0023): resolves a no-marker `computed(seed)`'s
+       async-ness from the seed's checker type over the SAME warm shadow program `classify`
+       uses. Optional and fail-open — absent, every seed routes by the `isBareCallComputed`
+       syntax heuristic (today's behavior). */
+    seedClassify?: SeedTypeClassifier,
+): AnalyzedComponent {
     /* Only the LEADING `<script>` is the component script; scripts nested in the
        template (scoped reactive blocks) survive into the parsed nodes. The `<style>`
        is left in the template for the parser to extract structurally (below), so a
        `<style>` quoted inside an expression is never mistaken for the component's. */
-    const scriptMatch = source.match(/^\s*<script[^>]*>([\s\S]*?)<\/script>/)
-    const scriptBody = (scriptMatch?.[1] ?? '').trim()
-    const template = source.replace(/^\s*<script[^>]*>[\s\S]*?<\/script>/, '').trim()
+    const scriptMatch = source.match(LEADING_SCRIPT)
+    const rawScriptBody = scriptMatch?.[1] ?? ''
+    const scriptBody = rawScriptBody.trim()
+    /* Absolute `.abide` source offset where the TRIMMED `<script>` body begins — the base that
+       maps a desugared `computed(seed)` node (offset-relative to the trimmed body) back to an
+       original source location, so the type-directed seed classifier (ADR-0023) resolves it
+       against the shadow's source→shadow `mappings`, exactly as `templateBase` anchors each
+       interpolation's `loc`. `indexOf('>')` lands just past the opening `<script …>` (matching
+       `compileShadow`'s `scriptStart`); the trim delta re-adds the leading whitespace the parsed
+       script dropped. */
+    const scriptContentBase =
+        (scriptMatch ? source.indexOf('>', scriptMatch.index) + 1 : 0) +
+        (rawScriptBody.length - rawScriptBody.trimStart().length)
+    const afterScript = scriptMatch ? source.slice(scriptMatch[0].length) : source
+    const template = afterScript.trim()
+    /* Absolute source offset of the trimmed template's first char (script length + the
+       remainder's leading whitespace). Passed as the parse base so each interpolation's
+       `loc` is an offset into the ORIGINAL source — the coordinate the shadow's
+       source→shadow `mappings` use, so a type-directed classifier resolves against it.
+       The runtime back-ends ignore `loc`, so this only affects the classifier's lookup. */
+    const templateBase =
+        (scriptMatch ? scriptMatch[0].length : 0) +
+        (afterScript.length - afterScript.trimStart().length)
 
     /* Parse the template first so the nested branch `<script>`s are in hand before the
        leading script lowers: their raw code feeds the dead-import usage check, keeping a
        reactive import (`state`) alive when only a nested branch uses it (its
        `state.computed(...)` stays literal, unlike the desugared leading script). */
-    const { nodes } = parseTemplate(template)
+    const parsed = parseTemplate(template, templateBase)
+    /* Type-directed async lowering (ADR-0032): lift every promise/`AsyncIterable`-typed
+       (sub)expression — in content AND value positions — to an injected peek-cell, rewriting it
+       in place to a bare `{__vN}` reference BEFORE the script lowers and scopes annotate, so it
+       reads `undefined` while pending and composes with `??`/`?.`. Runs unconditionally: with no
+       classifier only syntactic `await`s lift (fail-open), so a value-position `{await …}` still
+       works while a bare async position degrades to today's plain binding. */
+    const { nodes, cells } = lowerAsyncInterpolations(parsed.nodes, classify)
+    /* Each lifted async (sub)expression was rewritten to a bare `{__vN}` reference; APPEND a
+       matching `const __vN = computed(<seed>)` to the script so the seed's author-signal reads
+       lower through the normal pipeline and the declaration desugars to a `trackedComputed` cell
+       (read via `$$readCell(__vN)`). `computed` here is a bare, unimported callee — `desugarSignals`
+       recognizes it by the injected name (`injectedCellNames`), not by import resolution. A
+       BLOCKING cell (author `await`, `blockingCellNames`) joins the SSR barrier; a streaming one
+       ships pending. Appended (after the author's `state(...)` inits, not before) so a signal-arg
+       seed `{getStream(count)}` reads the INITIALIZED `count`; the cell only feeds the render,
+       which runs after the whole script, so end-of-script placement is safe. */
+    const injectedCellNames = new Set(cells.map((cell) => cell.name))
+    const blockingCellNames = new Set(
+        cells.filter((cell) => cell.blocking).map((cell) => cell.name),
+    )
+    /* A promise seed is wrapped as an async thunk `async () => await (<code>)` — inside an async
+       arrow `await` is a keyword and the parens are unambiguous (a bare-text `computed(await (X))`
+       reparsed at module scope reads `await(X)` as a call). A stream seed stays a bare
+       `computed(<code>)` (byte-identical to an explicit `state.computed(getStream())`). */
+    const injectedScript = cells.map((cell) =>
+        cell.kind === 'promise'
+            ? `const ${cell.name} = computed(async () => await (${cell.code}));`
+            : `const ${cell.name} = computed(${cell.code});`,
+    )
+    const fullScriptBody =
+        injectedScript.length === 0
+            ? scriptBody
+            : scriptBody.length > 0
+              ? `${scriptBody}\n${injectedScript.join('\n')}`
+              : injectedScript.join('\n')
     const nestedScriptCode = collectNestedScriptCode(nodes)
+    /* Names the markup writes or forwards as a `bind:` target — unioned (in `desugarSignals`)
+       with the script's own writes so a `props()` binding used two-way desugars to a writable
+       cell (`bindableProp`) rather than a read-only derive. */
+    const templateWrittenNames = writtenTemplateNames(nodes)
     /* `lowerScript` parses the script ONCE and chains signal desugaring, reference
        renaming, and doc-access lowering over that single tree, then hoists top-level
        imports off the tree structurally — imports live at module scope, not inside the
@@ -46,8 +119,17 @@ export function analyzeComponent(source: string, scopeSeed?: string): AnalyzedCo
         stateNames,
         derivedNames,
         computedNames,
+        cellReadNames,
         droppedReactiveImports,
-    } = lowerScript(scriptBody, nestedScriptCode)
+    } = lowerScript(
+        fullScriptBody,
+        nestedScriptCode,
+        injectedCellNames,
+        blockingCellNames,
+        templateWrittenNames,
+        seedClassify,
+        scriptContentBase,
+    )
     /* `annotateScopes` mutates the tree — assigning each style its scope attribute and
        stamping covered elements — and returns the scoped CSS per block for the bundler. */
     const styles = annotateScopes(nodes, [], scopeSeed, { count: 0 })
@@ -59,6 +141,7 @@ export function analyzeComponent(source: string, scopeSeed?: string): AnalyzedCo
         stateNames,
         derivedNames,
         computedNames,
+        cellReadNames,
         nodes,
         styles,
         /* Hydration adopts every block in place — including `await`, which resumes

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

@@ -0,0 +1,54 @@
+import ts from 'typescript'
+
+/*
+Collects every identifier NAME that is written somewhere in `source` — the target of
+an assignment (`x = …`, `x += …`, and every compound form) or the operand of a `++`/`--`
+update. A write to a member (`x.foo = …`, `x[i]++`) counts as a write to its root object
+identifier (`x`), since mutating the object the prop holds still needs a writable cell.
+Reads never count. Used to decide which props a component actually writes, so only those
+are upgraded from a read-only derive to a writable cell (`bindableProp`).
+
+Accumulates into `into` so several fragments (the script, each template expression) can
+feed one set. Best-effort and syntactic — it does not resolve scope, so a shadowing local
+of the same name is conservatively treated as a write to the prop; that only ever upgrades
+a prop needlessly, never drops a real write.
+*/
+export function assignmentTargetNames(source: ts.SourceFile, into: Set<string>): void {
+    const rootIdentifier = (node: ts.Expression): string | undefined => {
+        let current: ts.Expression = node
+        /* Peel member/element access and parens down to the base object identifier — every
+           one of these node kinds exposes the inner expression as `.expression`. */
+        while (
+            ts.isPropertyAccessExpression(current) ||
+            ts.isElementAccessExpression(current) ||
+            ts.isParenthesizedExpression(current) ||
+            ts.isNonNullExpression(current)
+        ) {
+            current = current.expression
+        }
+        return ts.isIdentifier(current) ? current.text : undefined
+    }
+    const visit = (node: ts.Node): void => {
+        if (
+            ts.isBinaryExpression(node) &&
+            node.operatorToken.kind >= ts.SyntaxKind.FirstAssignment &&
+            node.operatorToken.kind <= ts.SyntaxKind.LastAssignment
+        ) {
+            const name = rootIdentifier(node.left)
+            if (name !== undefined) {
+                into.add(name)
+            }
+        } else if (
+            (ts.isPrefixUnaryExpression(node) || ts.isPostfixUnaryExpression(node)) &&
+            (node.operator === ts.SyntaxKind.PlusPlusToken ||
+                node.operator === ts.SyntaxKind.MinusMinusToken)
+        ) {
+            const name = rootIdentifier(node.operand as ts.Expression)
+            if (name !== undefined) {
+                into.add(name)
+            }
+        }
+        ts.forEachChild(node, visit)
+    }
+    visit(source)
+}

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

@@ -0,0 +1,152 @@
+import { attrLiftPosition } from './attrLiftPosition.ts'
+import type { AsyncInterpolationField } from './types/AsyncInterpolationField.ts'
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* No control-flow subject to record — the writeback for a content/attribute field. */
+const NO_OP = (): void => {}
+
+/*
+Enumerates the async-liftable interpolation fields of ONE template node — content text parts,
+value-position attributes (`attrLiftPosition`), and the control-flow subjects — as the single shared
+reading both compile front-ends lower from. It mirrors `ifPlan`/`awaitPlan` (a per-node structural
+plan the two back-ends read), applied to interpolations: the runtime lifts each field to an injected
+`computed` cell and `write`s the rewritten `__vN` reference back — marking `setAsyncSubject` when a
+whole subject collapsed to one bare cell — while the shadow reads the same `code`/`loc`/`position` to
+peek-wrap its value-typed projection. Neither can disagree on WHICH interpolations are async or their
+position.
+
+Fields are yielded in source order (text parts / attributes before the control-flow subject) so the
+runtime's global `__vN` cell numbering stays deterministic. The node's children are NOT descended —
+each front-end recurses on its own. A `{#for await}` source is the sanctioned `AsyncIterable`, drained
+unchanged, so it is never lifted (excluded); `await` / `component` / `snippet` / `try` carry no lifted
+field (an `await`'s promise and a component's props route through their own lowerings).
+*/
+export function asyncInterpolationFields(node: TemplateNode): AsyncInterpolationField[] {
+    const fields: AsyncInterpolationField[] = []
+    switch (node.kind) {
+        case 'text':
+            for (const part of node.parts) {
+                if (part.kind === 'expression' && part.loc !== undefined) {
+                    fields.push({
+                        code: part.code,
+                        loc: part.loc,
+                        position: 'content',
+                        subject: false,
+                        write: (code) => {
+                            part.code = code
+                        },
+                        setAsyncSubject: NO_OP,
+                    })
+                }
+            }
+            return fields
+        case 'element':
+            for (const attr of node.attrs) {
+                if (attr.kind === 'interpolated') {
+                    for (const part of attr.parts) {
+                        if (part.kind === 'expression' && part.loc !== undefined) {
+                            fields.push({
+                                code: part.code,
+                                loc: part.loc,
+                                position: 'attribute',
+                                subject: false,
+                                write: (code) => {
+                                    part.code = code
+                                },
+                                setAsyncSubject: NO_OP,
+                            })
+                        }
+                    }
+                    continue
+                }
+                /* Only `expression` attributes lift (directives evaluate to a handler/lvalue, not a
+                   rendered value) — `attrLiftPosition` is the shared gate. */
+                const position = attrLiftPosition(attr)
+                if (
+                    position !== undefined &&
+                    attr.kind === 'expression' &&
+                    attr.loc !== undefined
+                ) {
+                    fields.push({
+                        code: attr.code,
+                        loc: attr.loc,
+                        position,
+                        subject: false,
+                        write: (code) => {
+                            attr.code = code
+                        },
+                        setAsyncSubject: NO_OP,
+                    })
+                }
+            }
+            return fields
+        case 'if':
+            if (node.loc !== undefined) {
+                fields.push({
+                    code: node.condition,
+                    loc: node.loc,
+                    position: 'if',
+                    subject: true,
+                    write: (code) => {
+                        node.condition = code
+                    },
+                    setAsyncSubject: (asyncSubject) => {
+                        node.asyncSubject = asyncSubject
+                    },
+                })
+            }
+            return fields
+        case 'switch':
+            if (node.loc !== undefined) {
+                fields.push({
+                    code: node.subject,
+                    loc: node.loc,
+                    position: 'switch',
+                    subject: true,
+                    write: (code) => {
+                        node.subject = code
+                    },
+                    setAsyncSubject: (asyncSubject) => {
+                        node.asyncSubject = asyncSubject
+                    },
+                })
+            }
+            return fields
+        case 'case':
+            /* An `{:elseif}` condition — a truthy-tested control-flow subject, lifted like an
+               `{#if}` head so a bare async `{:elseif}` holds the cond-chain while it loads. */
+            if (node.condition !== undefined && node.loc !== undefined) {
+                fields.push({
+                    code: node.condition,
+                    loc: node.loc,
+                    position: 'if',
+                    subject: true,
+                    write: (code) => {
+                        node.condition = code
+                    },
+                    setAsyncSubject: (asyncSubject) => {
+                        node.asyncSubject = asyncSubject
+                    },
+                })
+            }
+            return fields
+        case 'each':
+            /* A plain `{#for}` source lifts (a promise-of-iterable → empty while pending); a
+               `{#for await}` source is the sanctioned `AsyncIterable`, never lifted. */
+            if (node.loc !== undefined && !node.async) {
+                fields.push({
+                    code: node.items,
+                    loc: node.loc,
+                    position: 'each',
+                    subject: false,
+                    write: (code) => {
+                        node.items = code
+                    },
+                    setAsyncSubject: NO_OP,
+                })
+            }
+            return fields
+        default:
+            return fields
+    }
+}

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

@@ -0,0 +1,21 @@
+import type { InterpolationKind } from './types/InterpolationKind.ts'
+import type { ValuePositionInterpolation } from './types/ValuePositionInterpolation.ts'
+
+/*
+The narrowed value-position guard (ADR-0032): a promise/`AsyncIterable` (sub)expression now LIFTS
+to a peek-cell in every position — an attribute, an `{#if}`/`{#switch}` subject, a plain `{#for}`
+source — reading `undefined` while pending. The ONE remaining error is a raw `AsyncIterable`
+driving a PLAIN `{#for}`: a frame is not a collection, so iterate its frames with `{#for await}`
+(the `for await` position is exempt). Everything else (promises everywhere, streams in attribute/
+`{#if}`/`{#switch}`/content) is allowed. Shared by the build front-end (`liftAsyncSubExpressions`
+throws the same message) and `abide check` (`collectAbideDiagnostics`).
+*/
+export function asyncValuePositionError(
+    kind: InterpolationKind,
+    position: ValuePositionInterpolation['position'],
+): string | undefined {
+    if (kind !== 'asyncIterable' || position !== 'each') {
+        return undefined
+    }
+    return "[abide] an `AsyncIterable` can't drive a plain `{#for}` — iterate its frames with `{#for await}`."
+}

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

@@ -0,0 +1,64 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+import type { ValuePositionInterpolation } from './types/ValuePositionInterpolation.ts'
+
+/*
+Collects every interpolation sitting in a NON-content value position across a parsed
+template — the positions Stage E guards (ADR-0019): an attribute value, an `{#if}` /
+`{#switch}` head, and a `{#each}`/`{#for}` iterable. Text-child positions are NOT
+collected: promise/asyncIterable text interpolations lower to a streaming await /
+stream cell (Stages C+D), so they render fine. A `{#for await}` iterable is included
+but tagged `for await` so the caller allows an `AsyncIterable` there.
+
+Shared by both guard sites: the build front-end (`lowerAsyncInterpolations`, which
+classifies each and throws) and `abide check` (`collectAbideDiagnostics`, which
+classifies each and pushes a diagnostic). Only positions the parser tracked an offset
+for are collected — an untracked span (`loc === undefined`) has no classifier key.
+*/
+export function asyncValuePositionInterpolations(
+    nodes: TemplateNode[],
+): ValuePositionInterpolation[] {
+    const found: ValuePositionInterpolation[] = []
+    collect(nodes, found)
+    return found
+}
+
+/* Recursive walk: pushes each node's value-position interpolations, then descends
+   into its children so nested elements and blocks are reached. */
+function collect(nodes: TemplateNode[], found: ValuePositionInterpolation[]): void {
+    for (const node of nodes) {
+        if (node === undefined) {
+            continue
+        }
+        if (node.kind === 'element') {
+            for (const attr of node.attrs) {
+                /* `name={expr}` — a plain reactive value bind. */
+                if (attr.kind === 'expression' && attr.loc !== undefined) {
+                    found.push({ loc: attr.loc, code: attr.code, position: 'attribute' })
+                    continue
+                }
+                /* `name="… {expr} …"` — each interpolated part stringifies into the value. */
+                if (attr.kind === 'interpolated') {
+                    for (const part of attr.parts) {
+                        if (part.kind === 'expression' && part.loc !== undefined) {
+                            found.push({ loc: part.loc, code: part.code, position: 'attribute' })
+                        }
+                    }
+                }
+            }
+        } else if (node.kind === 'if' && node.loc !== undefined) {
+            found.push({ loc: node.loc, code: node.condition, position: 'if' })
+        } else if (node.kind === 'switch' && node.loc !== undefined) {
+            found.push({ loc: node.loc, code: node.subject, position: 'switch' })
+        } else if (node.kind === 'each' && node.loc !== undefined) {
+            /* `{#for await}` is the sanctioned async iterable; a sync `{#each}` is not. */
+            found.push({
+                loc: node.loc,
+                code: node.items,
+                position: node.async ? 'for await' : 'each',
+            })
+        }
+        if ('children' in node) {
+            collect(node.children, found)
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+import type { LiftPosition } from './liftAsyncSubExpressions.ts'
+import type { TemplateAttr } from './types/TemplateAttr.ts'
+
+/* The value position an attribute's authored expression occupies for async lowering, or undefined
+   when the attribute carries no async-liftable expression. Only `name={code}` (`expression`) and
+   `name="… {code} …"` (`interpolated`) bind a rendered value a promise/stream sub-expression may sit
+   in and lift to a peek-cell — every element value position is `'attribute'`. The directive
+   attributes (`on*` event, `bind:`, `class:`, `style:`, `attach`, `{...}` spread) evaluate to a
+   handler / lvalue / attachment / spread object, not a rendered value, so their expressions are NOT
+   lifted; a `static` literal carries no expression at all. Both compile front-ends read this so the
+   runtime's injected cells and the shadow's peek-wrap cover the SAME attribute set — the two can
+   never silently disagree on which attribute expressions are async. */
+export function attrLiftPosition(attr: TemplateAttr): LiftPosition | undefined {
+    if (attr.kind === 'expression' || attr.kind === 'interpolated') {
+        return 'attribute'
+    }
+    return undefined
+}

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

@@ -2,18 +2,17 @@
 The DOM event a generic two-way `bind:<property>` listens on to write the bound
 path back. Most form fields report edits via `input`, but a few properties are
 driven by their own event and never fire `input` — `<details open>` fires
-`toggle`, a checkbox/radio `checked` fires `change`, and a `<select>` settles its
-`value` on `change`. Picking the wrong event silently breaks the write-back.
+`toggle` and a checkbox/radio `checked` fires `change`. `<select value>` is NOT
+handled here: generateBuild intercepts it before this function and routes it to
+`bindSelectValue` (a MutationObserver-based helper that re-applies on late
+options), so this function never sees that case.
 */
-export function bindListenEvent(property: string, tag: string): string {
+export function bindListenEvent(property: string): string {
     if (property === 'open') {
         return 'toggle'
     }
     if (property === 'checked') {
         return 'change'
     }
-    if (property === 'value' && tag === 'select') {
-        return 'change'
-    }
     return 'input'
 }

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

@@ -0,0 +1,40 @@
+import ts from 'typescript'
+
+/*
+One parsed `ts.SourceFile` per (fileName, exact text, options signature), shared across
+every `ts.Program` this process builds. `ts.createProgram` re-parses all ~90 default
+`lib.*.d.ts` files (~3MB) plus every resolved dependency on each call — negligible for the
+one-shot `abide check` CLI, but the LSP rebuilds a program per edit and the test suite builds
+dozens over identical inputs. A `SourceFile` is a pure function of its text and the
+parse/bind-affecting compiler options, so reuse is safe — the same reuse TS performs for the
+source files it carries forward from an incremental `oldProgram`. Keying on the EXACT text
+means any content change re-parses (never a stale AST); the `signature` keeps two projects
+with different targets/libs from sharing a file; one entry per fileName bounds the cache to a
+single program's footprint.
+*/
+
+type CacheEntry = { text: string; signature: string; sourceFile: ts.SourceFile }
+
+const CACHE = new Map<string, CacheEntry>()
+
+export function cachedSourceFile(
+    fileName: string,
+    text: string,
+    languageVersionOrOptions: ts.ScriptTarget | ts.CreateSourceFileOptions,
+    signature: string,
+    scriptKind?: ts.ScriptKind,
+): ts.SourceFile {
+    const existing = CACHE.get(fileName)
+    if (existing && existing.text === text && existing.signature === signature) {
+        return existing.sourceFile
+    }
+    const sourceFile = ts.createSourceFile(
+        fileName,
+        text,
+        languageVersionOrOptions,
+        true,
+        scriptKind,
+    )
+    CACHE.set(fileName, { text, signature, sourceFile })
+    return sourceFile
+}

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

@@ -1,8 +1,10 @@
 import type { Binding } from './types/Binding.ts'
 
-/* A block's `catch` branch binding — the error name bound `plain`, or none when the block
-   has no catch branch. Shared by the await/each/try plans so the one catch-binding shape
-   stays single-source. */
-export function catchBinding(catchAs: string, hasCatch: boolean): Binding[] {
-    return hasCatch ? [{ name: catchAs, classification: 'plain' }] : []
+/* A block's `catch` branch binding — the error name, or none when the block has no catch
+   branch. Shared by the await/each/try plans so the one catch-binding shape stays
+   single-source. `reactive` binds the error as a `.value` cell the runtime can update in
+   place (the reactive `{#try}` — a catch→catch error swaps in place, no rebuild); the
+   await/each catches leave it `plain` (they pass the error by value). */
+export function catchBinding(catchAs: string, hasCatch: boolean, reactive = false): Binding[] {
+    return hasCatch ? [{ name: catchAs, classification: reactive ? 'reactive' : 'plain' }] : []
 }