@abide/abide 0.46.0 → 0.48.0

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

@@ -23,6 +23,7 @@ import { skeletonContext } from './skeletonContext.ts'
 import { snippetPlan } from './snippetPlan.ts'
 import { spreadExcludedNames } from './spreadExcludedNames.ts'
 import { staticAttr } from './staticAttr.ts'
+import { staticAttrValue } from './staticAttrValue.ts'
 import { staticTextPart } from './staticTextPart.ts'
 import { stripEffects } from './stripEffects.ts'
 import { switchPlan } from './switchPlan.ts'
@@ -70,6 +71,12 @@ export function generateSSR(
        allocated separately at runtime via `$ctx.next++`. */
     const nextVar = makeVarNamer()
 
+    /* The enclosing `<select bind:value>`s, innermost last: each carries the JS var holding
+       its bound value and whether it's a `multiple` (array) select, so an `<option>` rendered
+       within can emit `selected` by comparing its own value against the bound one. Pushed when
+       a bound select opens, popped after its children. */
+    const selectBinds: { variable: string; multiple: boolean }[] = []
+
     /* The shared signal→`model` lowering + branch-scoped nested-script deref scope. */
     const {
         expression: lowerExpression,
@@ -92,6 +99,47 @@ export function generateSSR(
         return `${target}.push(${JSON.stringify(literal)});\n`
     }
 
+    /* The JS expression for an `<option>`'s value, to compare against an enclosing bound
+       `<select>`: the `value` attribute (static/expression/interpolated), else the option's
+       static text content (the browser's own fallback, whitespace-trimmed). Returns undefined
+       when the value can't be known at compile time (a dynamic-text option with no `value`
+       attr) — the client selects it on hydrate. */
+    function optionValueForSSR(
+        node: Extract<TemplateNode, { kind: 'element' }>,
+    ): string | undefined {
+        const valueAttr = node.attrs.find(
+            (attr) =>
+                (attr.kind === 'static' ||
+                    attr.kind === 'expression' ||
+                    attr.kind === 'interpolated') &&
+                attr.name === 'value',
+        )
+        if (valueAttr !== undefined) {
+            if (valueAttr.kind === 'static') {
+                return JSON.stringify(valueAttr.value)
+            }
+            if (valueAttr.kind === 'expression') {
+                return lowerExpression(valueAttr.code)
+            }
+            if (valueAttr.kind === 'interpolated') {
+                return lowerExpression(interpolatedTemplateLiteral(valueAttr.parts))
+            }
+        }
+        let staticText = ''
+        for (const child of node.children) {
+            if (child.kind !== 'text') {
+                return undefined
+            }
+            for (const part of child.parts) {
+                if (part.kind !== 'static') {
+                    return undefined
+                }
+                staticText += part.value
+            }
+        }
+        return JSON.stringify(staticText.trim())
+    }
+
     function generateInto(children: TemplateNode[], target: string): string {
         return children.map((child) => generate(child, target)).join('')
     }
@@ -110,8 +158,18 @@ export function generateSSR(
        never matches (`$` is a non-word char, so there is no word boundary before it), which
        would silently miss every `$row(...)` call. A negative lookbehind for word-or-`$`
        matches the same call sites as `\b` for word-leading names while also catching them. */
-    const callPattern = (name: string): RegExp =>
-        new RegExp(`(?<![$\\w])${escapeRegex(name)}\\s*\\(`)
+    /* Memoised per name: the pattern is a pure function of the name but tested across the
+       fixpoint loop below (per snippet × per text part × per iteration), so recompiling the
+       RegExp each test — far costlier than the test itself — dominated the snippet scan. */
+    const callPatternCache = new Map<string, RegExp>()
+    const callPattern = (name: string): RegExp => {
+        let pattern = callPatternCache.get(name)
+        if (pattern === undefined) {
+            pattern = new RegExp(`(?<![$\\w])${escapeRegex(name)}\\s*\\(`)
+            callPatternCache.set(name, pattern)
+        }
+        return pattern
+    }
     /* A subtree call to any of `names` from a TEXT interpolation (`name()` / `name(args)`). */
     const subtreeCalls = (children: TemplateNode[], names: ReadonlySet<string>): boolean =>
         children.some((child) => {
@@ -167,8 +225,18 @@ export function generateSSR(
     }
     /* A text-part expression that calls an async snippet, so its value is `await`ed before
        `$text`. */
-    const callsAsyncSnippet = (code: string): boolean =>
-        [...asyncSnippets].some((name) => callPattern(name).test(code))
+    const callsAsyncSnippet = (code: string): boolean => {
+        // The common no-async-snippet component pays zero regex work per text part.
+        if (asyncSnippets.size === 0) {
+            return false
+        }
+        for (const name of asyncSnippets) {
+            if (callPattern(name).test(code)) {
+                return true
+            }
+        }
+        return false
+    }
 
     /* Per-node skeleton position, computed once. Both back-ends read this single source of
        truth so their `<!--a-->` anchor placement cannot drift — the fresh-context boundaries
@@ -443,6 +511,14 @@ export function generateSSR(
                 /* A boolean property — its mere presence means checked, so emit the
                    attribute only when truthy (a string `checked="false"` still checks). */
                 code += `${target}.push((${bindRead(attr.code)}) ? ' checked' : '');\n`
+            } else if (attr.kind === 'bind' && attr.property === 'open') {
+                /* `<details open>` — `open` is a boolean attribute, so `open="false"` would
+                   still render open. Emit the bare attribute only when truthy, like checked. */
+                code += `${target}.push((${bindRead(attr.code)}) ? ' open' : '');\n`
+            } else if (attr.kind === 'bind' && attr.property === 'value' && node.tag === 'select') {
+                /* `<select bind:value>` selects via `selected` on the matching option (a
+                   `value="…"` on the select is ignored by browsers), wired below. Emit nothing
+                   here. */
             } else if (attr.kind === 'bind') {
                 code += `${target}.push(${JSON.stringify(` ${attr.property}="`)} + $esc(${bindRead(attr.code)}) + '"');\n`
             }
@@ -455,7 +531,33 @@ export function generateSSR(
         if (merge.mergeStyle) {
             code += `${target}.push(' style="' + $esc([${merge.styleParts.join(', ')}].filter(Boolean).join(';')) + '"');\n`
         }
+        /* An `<option>` inside a bound `<select>`: emit `selected` when its value equals the
+           bound value (single) or is a member of it (multiple). */
+        if (node.tag === 'option' && selectBinds.length > 0) {
+            const optionValue = optionValueForSSR(node)
+            const bind = selectBinds[selectBinds.length - 1]
+            if (optionValue !== undefined && bind !== undefined) {
+                const present = bind.multiple
+                    ? `Array.isArray(${bind.variable}) && ${bind.variable}.includes(${optionValue})`
+                    : `(${optionValue}) === (${bind.variable})`
+                code += `${target}.push((${present}) ? ' selected' : '');\n`
+            }
+        }
         code += push(target, '>')
+        /* A bound `<select>` publishes its current value to a local so the options rendered
+           as its children can compare against it; popped once past those children. */
+        const selectValueBind =
+            node.tag === 'select'
+                ? node.attrs.find((attr) => attr.kind === 'bind' && attr.property === 'value')
+                : undefined
+        if (selectValueBind !== undefined && selectValueBind.kind === 'bind') {
+            const variable = nextVar('$sel')
+            code += `const ${variable} = ${bindRead(selectValueBind.code)};\n`
+            selectBinds.push({
+                variable,
+                multiple: staticAttrValue(node, 'multiple') !== undefined,
+            })
+        }
         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`
@@ -464,6 +566,9 @@ export function generateSSR(
             code += withNestedScripts(node.children, () => generateInto(node.children, target))
             code += push(target, `</${node.tag}>`)
         }
+        if (selectValueBind !== undefined) {
+            selectBinds.pop()
+        }
         return code
     }
 
@@ -527,15 +632,10 @@ export function generateSSR(
            `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')
-        /* Keep the promise object: a cache() read tagged it with its store key, which
-           `$$deferResume` reads to defer a cache-backed value (ship a `{defer,key}` marker +
-           lazy seed) instead of inlining it — the blocking form's contract. */
-        const promiseVar = nextVar('$ap')
         let code = `const ${id} = $ctx.next++;\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += `try {\n`
-        code += `const ${promiseVar} = (${lowerExpression(node.promise)});\n`
-        code += `const ${resolved} = await ${promiseVar};\n`
+        code += `const ${resolved} = await (${lowerExpression(node.promise)});\n`
         code += `{\n`
         code += `const ${plan.resolvedAs} = ${resolved};\n`
         code += withBindings(withShadow, plan.resolvedBindings, ssrBindingKind, () =>
@@ -545,7 +645,12 @@ export function generateSSR(
            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}] = $$deferResume(${promiseVar}, ${plan.resolvedAs});\n`
+        /* Seed the resolved value into the resume manifest so hydration adopts the server
+           branch warm (no round-trip) and wires it live on the first frame. Seed the
+           resolved temp, NOT `plan.resolvedAs` — the latter is the author's binding
+           PATTERN (e.g. `{name}` or `{name = 'anon'}`), which as an expression rebuilds a
+           partial object or is a CoverInitializedName syntax error. */
+        code += `$resume[${id}] = { ok: true, value: ${resolved} };\n`
         code += `}\n`
         if (plan.surfaceRejection) {
             /* No catch/finally → let the rejection surface instead of an empty branch. */
@@ -569,9 +674,7 @@ export function generateSSR(
        `await` block inside the branch composes. `finally` appends after the outcome,
        matching the client's concatenated node range. Neither catch nor finally → omit
        `catch` so a rejection surfaces (renderToStream re-throws); a finally-only block
-       keeps a catch renderer that renders just finally. A cache-backed streaming value is
-       DEFERRED at settle time (renderToStream ships a `{defer,key}` marker + lazy body, the
-       client adopts the streamed branch inert) — the machinery here is unchanged. */
+       keeps a catch renderer that renders just finally. */
     function generateStreamingAwait(
         node: Extract<TemplateNode, { kind: 'await' }>,
         target: string,

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

@@ -0,0 +1,13 @@
+import { escapeRegex } from '../../shared/escapeRegex.ts'
+
+/*
+A RegExp that matches `name` used as a whole identifier in a body of code.
+Boundaries are `(?<![$\w]) … (?![$\w])`, NOT `\b`: `\b` never fires before a
+`$`-leading identifier (`$` is a non-word char, so there's no word boundary
+before it), so `\b$e\b` silently matches nothing — the exact miss that made an
+aliased reactive import (`import { effect as $e }`) read as dead. The name is
+regex-escaped so a `$` or other metachar in it is literal, not an anchor.
+*/
+export function identifierReferencePattern(name: string): RegExp {
+    return new RegExp(`(?<![$\\w])${escapeRegex(name)}(?![$\\w])`)
+}

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

@@ -1,7 +1,7 @@
 import ts from 'typescript'
 import { createShadowScope } from './createShadowScope.ts'
 import { docAccessTransformer } from './lowerDocAccess.ts'
-import { nestedBindingNames } from './prepareNestedScript.ts'
+import { nestedBindingNames, nestedPlainLocalNames } from './prepareNestedScript.ts'
 import { signalRefsTransformer } from './renameSignalRefs.ts'
 import { TS_PRINTER } from './TS_PRINTER.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
@@ -105,12 +105,18 @@ 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) for the duration of `body`. */
+       bodies and the branch's markup auto-deref them) for the duration of `body`. Reactive
+       bindings register as `derived` `.value` cells; the script's PLAIN top-level locals
+       register as `plain` bare locals so a local that shares a name with a component signal
+       shadows it (else the reference lowers to `$$model.read(...)`, ignoring the local). */
     function withNestedScripts<T>(children: TemplateNode[], body: () => T): T {
-        const names = children.flatMap((child) =>
+        const derived = children.flatMap((child) =>
             child.kind === 'script' ? [...nestedBindingNames(child.code)] : [],
         )
-        return scope.withShadow(names, 'derived', body)
+        const plain = children.flatMap((child) =>
+            child.kind === 'script' ? [...nestedPlainLocalNames(child.code)] : [],
+        )
+        return scope.withShadow(derived, 'derived', () => scope.withShadow(plain, 'plain', body))
     }
 
     return {

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

@@ -1,11 +1,43 @@
 import ts from 'typescript'
+import { ABIDE_PACKAGE_NAME } from '../../shared/ABIDE_PACKAGE_NAME.ts'
 import { assertTranspiles } from './assertTranspiles.ts'
 import { desugarSignals } from './desugarSignals.ts'
+import { identifierReferencePattern } from './identifierReferencePattern.ts'
 import { docAccessTransformer } from './lowerDocAccess.ts'
 import { signalRefsTransformer } from './renameSignalRefs.ts'
 import { stripEffectsTransformer } from './stripEffects.ts'
 import { TS_PRINTER } from './TS_PRINTER.ts'
 
+/* The `abide/ui/*` modules the reactive surface is imported from. An author's import of
+   one is compiler-recognised and lowered, so its binding is often fully consumed — a plain
+   `state(...)` becomes `$$model`/`$$scope` with no `state` reference left. Such a dead
+   import is dropped from the emitted module (see `deadReactiveImport`) so the output has no
+   spurious static `@abide/ui` dependency — load-bearing for hot modules, which forbid one. */
+const REACTIVE_IMPORT_SPECIFIERS = new Set([
+    `${ABIDE_PACKAGE_NAME}/ui/state`,
+    `${ABIDE_PACKAGE_NAME}/ui/effect`,
+])
+
+/* True when `statement` imports the reactive surface and none of its local bindings survive
+   into the lowered output (`used` = body + ssr body) — so emitting it would be a dead,
+   spurious runtime import. A binding that DOES survive (`state.share`, a bare `effect(...)`)
+   keeps the import. */
+function deadReactiveImport(statement: ts.ImportDeclaration, used: string): boolean {
+    if (
+        !ts.isStringLiteral(statement.moduleSpecifier) ||
+        !REACTIVE_IMPORT_SPECIFIERS.has(statement.moduleSpecifier.text)
+    ) {
+        return false
+    }
+    const named = statement.importClause?.namedBindings
+    if (named === undefined || !ts.isNamedImports(named)) {
+        return false
+    }
+    return named.elements.every(
+        (element) => !identifierReferencePattern(element.name.text).test(used),
+    )
+}
+
 /*
 The component-script lowering, done in ONE parse. The script is parsed once, then
 `desugarSignals` (signal declarations → `model` slots / `scope().derive`), reference
@@ -21,13 +53,22 @@ position corrupts the script (the failure mode the syntax fuzz corpus also guard
 surfaces here as a located compile error instead of shipping a broken bundle.
 */
 
-export function lowerScript(scriptBody: string): {
+export function lowerScript(
+    scriptBody: string,
+    /* Reactive-surface identifiers referenced OUTSIDE this script — the nested branch
+       `<script>`s, which keep their `state.computed(...)` calls literal and so still need
+       the module-level import even after the leading script's own `state(...)` all
+       desugared away. Folded into the dead-import usage check so a live import isn't dropped
+       (→ `ReferenceError: state is not defined` in the branch). Empty for a nested script. */
+    externalUsage = '',
+): {
     body: string
     imports: string
     ssrBody: string
     stateNames: Set<string>
     derivedNames: Set<string>
     computedNames: Set<string>
+    droppedReactiveImports: Set<string>
 } {
     const source = ts.createSourceFile('component.ts', scriptBody, ts.ScriptTarget.Latest, true)
     const { transformer, stateNames, derivedNames, computedNames } = desugarSignals(source)
@@ -43,9 +84,6 @@ export function lowerScript(scriptBody: string): {
     const bodyStatements = transformed.statements.filter(
         (statement) => !ts.isImportDeclaration(statement),
     )
-    const imports = importStatements
-        .map((statement) => TS_PRINTER.printNode(ts.EmitHint.Unspecified, statement, transformed))
-        .join('\n')
     const bodyFile = ts.factory.updateSourceFile(transformed, bodyStatements)
     const body = TS_PRINTER.printFile(bodyFile).trim()
     /* The SSR variant strips client-only `effect(...)` calls — run over the SAME lowered
@@ -55,10 +93,39 @@ export function lowerScript(scriptBody: string): {
     const ssrBody = TS_PRINTER.printFile(ssrResult.transformed[0] as ts.SourceFile).trim()
     ssrResult.dispose()
     result.dispose()
+    /* Drop reactive-surface imports fully consumed by lowering — keeping them would leave a
+       dead, spurious `@abide/ui` runtime dependency (checked against both back-ends' output). */
+    const used = `${body}\n${ssrBody}\n${externalUsage}`
+    const droppedReactiveImports = new Set<string>()
+    const imports = importStatements
+        .filter((statement) => {
+            if (!deadReactiveImport(statement, used)) {
+                return true
+            }
+            /* Record the local names of a dropped reactive import so the module wrapper can
+               independently confirm the drop stranded no live reference. */
+            const named = statement.importClause?.namedBindings
+            if (named !== undefined && ts.isNamedImports(named)) {
+                for (const element of named.elements) {
+                    droppedReactiveImports.add(element.name.text)
+                }
+            }
+            return false
+        })
+        .map((statement) => TS_PRINTER.printNode(ts.EmitHint.Unspecified, statement, transformed))
+        .join('\n')
 
     assertTranspiles(
         [imports, body].filter((part) => part !== '').join('\n'),
         'component script lowering',
     )
-    return { body, imports, ssrBody, stateNames, derivedNames, computedNames }
+    return {
+        body,
+        imports,
+        ssrBody,
+        stateNames,
+        derivedNames,
+        computedNames,
+        droppedReactiveImports,
+    }
 }

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

@@ -640,25 +640,12 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
            its children become slot content (rendered where the child puts <slot>). */
         if (UPPERCASE_START.test(tag)) {
             const slotted = selfClosing ? [] : readChildren(tag)
-            /* `client:idle` / `client:visible` are island directives (bare) — pull them out of
-               the attributes so they never round-trip as props; only the build back-end reads
-               the trigger. Any other `client:*` falls through as a prop (a prop-check error). */
-            const clientAttr = attrs.find(
-                (attr) =>
-                    attr.kind === 'static' &&
-                    (attr.name === 'client:idle' || attr.name === 'client:visible'),
-            )
-            const clientTrigger =
-                clientAttr?.kind === 'static'
-                    ? (clientAttr.name.slice('client:'.length) as 'idle' | 'visible')
-                    : undefined
             return {
                 kind: 'component',
                 name: tag,
                 loc: baseOffset + tagStart,
-                props: toProps(attrs.filter((attr) => attr !== clientAttr)),
+                props: toProps(attrs),
                 children: slotted,
-                clientTrigger,
             }
         }
         /* `{...expr}` spreads onto a component (its props) or a native element (its

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

@@ -1,5 +1,6 @@
 import ts from 'typescript'
-import { REACTIVE_CALLEES } from './REACTIVE_CALLEES.ts'
+import { NESTED_REACTIVE_BINDINGS } from './resolveReactiveExport.ts'
+import { signalCallee } from './signalCallee.ts'
 
 /*
 The signal binding names a `<script>` nested in a control-flow branch declares
@@ -17,10 +18,14 @@ export function nestedBindingNames(code: string): Set<string> {
             continue
         }
         for (const declaration of statement.declarationList.declarations) {
-            const callee = signalCallee(declaration)
+            const callee = signalCallee(declaration, NESTED_REACTIVE_BINDINGS)
+            /* `effect`/`watch` bind no readable value (they return a disposer, not a cell), so
+               they never join the deref scope; every other recognised primitive
+               (state/linked/computed/props) does. */
             if (
                 callee !== undefined &&
-                REACTIVE_CALLEES.has(callee) &&
+                callee !== 'effect' &&
+                callee !== 'watch' &&
                 ts.isIdentifier(declaration.name)
             ) {
                 names.add(declaration.name.text)
@@ -30,19 +35,28 @@ export function nestedBindingNames(code: string): Set<string> {
     return names
 }
 
-/* The callee name of a `NAME = state(...)` / `computed(...)` / `linked(...)` declaration —
-   bare or the explicit scope form (`scope().state(...)` / `c.state(...)`), receiver-agnostic. */
-function signalCallee(declaration: ts.VariableDeclaration): string | undefined {
-    const initializer = declaration.initializer
-    if (initializer === undefined || !ts.isCallExpression(initializer)) {
-        return undefined
-    }
-    const callee = initializer.expression
-    if (ts.isIdentifier(callee)) {
-        return callee.text
-    }
-    if (ts.isPropertyAccessExpression(callee)) {
-        return callee.name.text
+/* The PLAIN (non-reactive) local names a nested branch `<script>` declares at its top
+   level — a `const title = deriveLocal()` that is neither a signal nor an effect/watch.
+   These must shadow a same-named component signal so a later reference in the script or
+   branch reads the nearer local, not `$$model.read("title")`; registered as `plain`
+   shadows (bare locals), the counterpart to `nestedBindingNames`' `derived` cells. */
+export function nestedPlainLocalNames(code: string): Set<string> {
+    const source = ts.createSourceFile('nested.ts', code, ts.ScriptTarget.Latest, true)
+    const names = new Set<string>()
+    for (const statement of source.statements) {
+        if (!ts.isVariableStatement(statement)) {
+            continue
+        }
+        for (const declaration of statement.declarationList.declarations) {
+            /* Reactive declarations are the `derived` cells `nestedBindingNames` owns; a
+               plain identifier declaration with a non-reactive callee (or no call) is a
+               local. Skip destructuring patterns — the reactive path does too. */
+            const callee = signalCallee(declaration, NESTED_REACTIVE_BINDINGS)
+            const isReactive = callee !== undefined && callee !== 'effect' && callee !== 'watch'
+            if (!isReactive && ts.isIdentifier(declaration.name)) {
+                names.add(declaration.name.text)
+            }
+        }
     }
-    return undefined
+    return names
 }

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

@@ -0,0 +1,95 @@
+import ts from 'typescript'
+import { ABIDE_PACKAGE_NAME } from '../../shared/ABIDE_PACKAGE_NAME.ts'
+
+/* The reactive primitive an import binding resolves to — the single recognition
+   vocabulary the desugarer, the nested-script scoper, and the shadow consume.
+   `linked`/`computed` are reached as members of a `state` import (`state.linked`),
+   so they are resolution results but carry no import specifier of their own. */
+export type ReactivePrimitive = 'state' | 'linked' | 'computed' | 'effect' | 'watch' | 'props'
+
+/* The `abide/ui/*` specifier each importable reactive primitive is published at,
+   mapped to its canonical name. Built from the package name so a rename is one edit.
+   `linked`/`computed` are members of `state`, not standalone imports; `props` is
+   ambient sugar today (no module) — kept here so a future `abide/ui/props` resolves
+   with no code change. */
+const REACTIVE_SPECIFIERS: Record<string, ReactivePrimitive> = {
+    [`${ABIDE_PACKAGE_NAME}/ui/state`]: 'state',
+    [`${ABIDE_PACKAGE_NAME}/ui/effect`]: 'effect',
+    [`${ABIDE_PACKAGE_NAME}/ui/watch`]: 'watch',
+    [`${ABIDE_PACKAGE_NAME}/ui/props`]: 'props',
+}
+
+/* The reactive import bindings a source file declares: each local binding (alias-safe)
+   mapped to its canonical primitive, plus the set of locals bound to `state` (so a
+   `state.linked` / `state.computed` member call resolves off the right root). Scans the
+   file's `import` statements once — no checker, no `ts.Program`: recognition is purely
+   syntactic, correct because abide has no barrels (a primitive is imported directly from
+   its `abide/ui/*` module, never a re-export). */
+export type ReactiveImportBindings = {
+    direct: Map<string, ReactivePrimitive>
+    stateRoots: Set<string>
+}
+
+/* The reactive bindings a nested `<template>` <script> resolves against. A nested script
+   cannot carry its own import (imports are module-scoped, hoisted off the leading script or
+   absent entirely), so it inherits the surface by the canonical names — the one recognition
+   site that is name-based because imports structurally cannot reach it. */
+export const NESTED_REACTIVE_BINDINGS: ReactiveImportBindings = {
+    direct: new Map<string, ReactivePrimitive>([
+        ['state', 'state'],
+        ['effect', 'effect'],
+        ['watch', 'watch'],
+    ]),
+    stateRoots: new Set(['state']),
+}
+
+export function reactiveImportBindings(source: ts.SourceFile): ReactiveImportBindings {
+    const direct = new Map<string, ReactivePrimitive>()
+    const stateRoots = new Set<string>()
+    for (const statement of source.statements) {
+        if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) {
+            continue
+        }
+        const canonical = REACTIVE_SPECIFIERS[statement.moduleSpecifier.text]
+        const named = statement.importClause?.namedBindings
+        if (canonical === undefined || named === undefined || !ts.isNamedImports(named)) {
+            continue
+        }
+        for (const element of named.elements) {
+            /* The imported name (`propertyName` when aliased, else `name`) must be the
+               module's canonical export; `name` is the local binding codegen resolves. */
+            if ((element.propertyName ?? element.name).text !== canonical) {
+                continue
+            }
+            direct.set(element.name.text, canonical)
+            if (canonical === 'state') {
+                stateRoots.add(element.name.text)
+            }
+        }
+    }
+    return { direct, stateRoots }
+}
+
+/* The reactive primitive a call's callee resolves to, or undefined. A bare `props`
+   identifier is always the ambient prop reader — the one primitive with no runtime module
+   (pure compiler sugar), so it resolves with no import. Every other bare identifier
+   resolves through the direct import bindings (alias-safe); a `stateRoot.linked` /
+   `.computed` member call resolves off a local bound to `state`. Every other callee is
+   undefined (a user's own function, an unrelated member access). */
+export function resolveReactiveExport(
+    callee: ts.Expression,
+    bindings: ReactiveImportBindings,
+): ReactivePrimitive | undefined {
+    if (ts.isIdentifier(callee)) {
+        return callee.text === 'props' ? 'props' : bindings.direct.get(callee.text)
+    }
+    if (
+        ts.isPropertyAccessExpression(callee) &&
+        ts.isIdentifier(callee.expression) &&
+        bindings.stateRoots.has(callee.expression.text) &&
+        (callee.name.text === 'linked' || callee.name.text === 'computed')
+    ) {
+        return callee.name.text
+    }
+    return undefined
+}

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

@@ -0,0 +1,24 @@
+import ts from 'typescript'
+import {
+    type ReactiveImportBindings,
+    type ReactivePrimitive,
+    resolveReactiveExport,
+} from './resolveReactiveExport.ts'
+
+/*
+The canonical reactive primitive a `NAME = state(...)` declaration's callee resolves to,
+else undefined. Import-resolution is the SOLE recognition path (alias-safe: an
+`import { state as s }` still resolves `s(...)` to `state`); the legacy member forms are
+not recognised. Shared by the desugar, shadow type-check, and nested-script passes so all
+three agree on what is reactive — a divergence here silently mis-classifies a declaration.
+*/
+export function signalCallee(
+    declaration: ts.VariableDeclaration,
+    bindings: ReactiveImportBindings,
+): ReactivePrimitive | undefined {
+    const initializer = declaration.initializer
+    if (initializer === undefined || !ts.isCallExpression(initializer)) {
+        return undefined
+    }
+    return resolveReactiveExport(initializer.expression, bindings)
+}

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

@@ -2,14 +2,16 @@ import ts from 'typescript'
 import { TS_PRINTER } from './TS_PRINTER.ts'
 
 /*
-Removes effect calls from a script for the SSR back-end. Effects are client
-lifecycle — they touch the DOM / run side effects and emit no HTML, so the server
+Removes effect/watch reaction calls from a script for the SSR back-end. Reactions are
+client lifecycle — they touch the DOM / run side effects and emit no HTML, so the server
 render (a snapshot of the pre-effect markup, like every framework) must not run
-them. Both surfaces are stripped: the generated/runtime bare `effect(<args>)` and
-the authored scope form `scope().effect(<args>)` (and a captured/destructured handle
-`c.effect(<args>)`), each replaced by `undefined` — an `effect(() => …)` statement
-becomes a no-op, and a `const stop = effect(…)` binding keeps a defined (unused) name.
-Client compilation keeps effects untouched.
+them. Stripped: the bare `effect(<args>)` and its authored scope form
+`scope().effect(<args>)` / `c.effect(<args>)`, and the bare reaction `watch(<args>)`
+(its replacement) — each replaced by `undefined`, so an `effect(() => …)` /
+`watch(src, …)` statement becomes a no-op and a `const stop = watch(…)` binding keeps a
+defined (unused) name. `watch` matches bare only (never a member — unlike the legacy
+`.effect` scope method — so an unrelated `x.watch(...)` is untouched). Client
+compilation keeps reactions untouched.
 */
 export function stripEffects(code: string): string {
     const source = ts.createSourceFile('script.ts', code, ts.ScriptTarget.Latest, true)
@@ -34,12 +36,13 @@ export function stripEffectsTransformer(): ts.TransformerFactory<ts.SourceFile>
     }
 }
 
-/* An effect callee: the bare runtime helper (`effect`) or the scope-method form
-   (`scope().effect`, `c.effect`) the author writes. Receiver-agnostic on the `.effect`
-   member name, matching `effect` being reserved as a scope primitive. */
+/* A reaction callee to strip: the bare runtime helpers (`effect` / `watch`) or the
+   scope-method form (`scope().effect`, `c.effect`). Receiver-agnostic on the `.effect`
+   member name (effect was a scope primitive); `watch` matches bare only, so an unrelated
+   `x.watch(...)` member call is left intact. */
 function isEffectCallee(expression: ts.Expression): boolean {
     if (ts.isIdentifier(expression)) {
-        return expression.text === 'effect'
+        return expression.text === 'effect' || expression.text === 'watch'
     }
     return ts.isPropertyAccessExpression(expression) && expression.name.text === 'effect'
 }

package/src/lib/ui/compile/types/AnalyzedComponent.ts

@@ -16,6 +16,11 @@ export type AnalyzedComponent = {
     /* Top-level import statements hoisted out of the script (e.g. child
        components), placed at module scope by the module wrapper. */
     imports: string
+    /* The local binding names of reactive-surface imports (`state`/`effect`) the dead-import
+       filter dropped as unused. The module wrapper's backstop asserts none of them still
+       appears in the generated output — an independent check that the drop didn't strand a
+       live reference (e.g. one a nested branch script keeps literal). */
+    droppedReactiveImports: Set<string>
     stateNames: Set<string>
     derivedNames: Set<string>
     computedNames: Set<string>