@abide/abide 0.31.1 → 0.32.1

package/AGENTS.md

@@ -174,13 +174,14 @@ Same selector grammar as `cache.invalidate`; also accept a `Subscribable`. See C
 - `abide/ui/router(...)`, `abide/ui/startClient(...)`, `abide/ui/renderToStream(render)` — bootstrap/render runtime (compiler/launcher uses these).
 
 ### DOM + render runtime — `@readme plumbing` (compiler-emitted; you don't hand-write these)
-`abide/ui/dom/{mount,mountChild,hydrate,text,openChild,openRoot,appendText,appendSnippet,appendStatic,cloneStatic,attr,on,attach,each,eachAsync,when,awaitBlock,tryBlock,switchBlock,applyResolved}` and `abide/ui/runtime/{nextBlockId,enterRenderPass,exitRenderPass}`. These are what `analyzeComponent → generateBuild/generateSSR` lower a `.abide` file into. Read them only to understand compiler output.
+`abide/ui/dom/{mount,mountChild,hydrate,text,openChild,appendText,appendSnippet,appendStatic,cloneStatic,attr,on,attach,each,eachAsync,when,awaitBlock,tryBlock,switchBlock,applyResolved}` and `abide/ui/runtime/{nextBlockId,enterRenderPass,exitRenderPass}`. These are what `analyzeComponent → generateBuild/generateSSR` lower a `.abide` file into. Read them only to understand compiler output.
 - `abide/ui/remoteProxy`, `abide/ui/socketProxy` — the browser-side implementations the bundler swaps in for `GET(...)` / `socket(...)`.
 
 ### `.abide` component format (see `src/lib/ui/README.md`)
 Valid HTML with `<script>` + native `<template>` control flow + scoped `<style>`.
 - **Bindings:** `{expr}` text, `name={expr}` attr, `onclick={fn}`, `bind:value={…}` / `bind:checked` / `bind:group`, `attach={fn}` (node-lifetime attachment — the dual of `on`; the `use:`-action / `{@attach}` equivalent, lowered to `ui/dom/attach`).
 - **Control flow (native `<template>`):** `if`/`else`, `each={list} as="x" key="x.id"`, `await={p}`/`then`/`catch`, `switch`/`case`/`default`.
+- **A branch is a lexical scope:** any control-flow branch may host its own nested `<script>` and `<style>`. The nested `<script>` declares branch-local **plain** signals (`state`/`derived`/`linked`/`prop`) — owned by the branch's render scope, re-seeded each mount (not the serializable top-level `doc`) — with the branch's binding in scope (`then`/`catch`'s `as` value, the `each` `as`/`key` row), so it can derive from the awaited/iterated value; its bindings cover the branch subtree and later siblings auto-deref them. The nested `<style>` is scoped to that branch alone (its own `data-a-<hash>`), not the whole component.
 - **Components:** capitalised tags (`<Layout title=…>`); children fill `<slot/>`; props are reactive (passed as thunks). A component has no directives — every attribute is a prop under its written name (so `onclick=`/`bind:open=`/`attach=` pass through as props, e.g. callbacks, not the DOM-element directives those are on a lowercase tag) and is type-checked against the child's declared props. `prop('name')` reads a typed component prop (the parent-supplied thunk, reactive + read-only); route params come from the `page` proxy (`page.params.name`), not `prop()`.
 - **Snippets / named slots:** `<template name="x" args={…}>` declares a reusable named builder (the `snippet()` form), rendered like a function — covers named slots / `{@render}`.
 - **Reactivity:** write plain assignment (`count += 1`, `items.push(x)`); the compiler lowers it to patches. Deep-field edits wake only that field.

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # abide
 
+## 0.32.1
+
+### Patch Changes
+
+- [`660ce08`](https://github.com/briancray/abide/commit/660ce08109160156dc9697fcb223fbb335229243) - fold asset-serve request logging into a timedServe helper ([`17aa14a`](https://github.com/briancray/abide/commit/17aa14aa3f04abe76a2e06b0c2fb0a8d4e725603))
+
+- [`660ce08`](https://github.com/briancray/abide/commit/660ce08109160156dc9697fcb223fbb335229243) - swallow the superseded each-async iterator's return rejection ([`5e2898f`](https://github.com/briancray/abide/commit/5e2898ff8a785508aa8fde70f3fc351dcdc8e014))
+
+- [`9643066`](https://github.com/briancray/abide/commit/9643066cf19bb944a55509333fd1421a3a8cce7a) - fix(check): narrow `<template else>` against the condition's negation. The shadow type-checker emitted a nested `else` child inside the `if` block, so the else body inherited the if's positive narrowing — a literal-union compare read as "no overlap" and a `typeof`-narrowed branch saw the wrong member. It now pairs the `else` child as a real `if (…) {…} else {…}`, matching the runtime's pairing.
+
+- [`9643066`](https://github.com/briancray/abide/commit/9643066cf19bb944a55509333fd1421a3a8cce7a) - fix(check): value-project a nested control-flow `<script>` like the leading one. The shadow type-checker emitted a branch-scoped `<script>` body raw, so its `state`/`derived` declarations kept their `State<T>`/`Derived<T>` types — every read of a nested signal in the branch's markup false-positived (`'Derived<string>' and 'string' have no overlap`, `Property 'length' does not exist on type 'Derived<…>'`). It now rewrites a nested script's reactive declarations to their value types, matching the runtime, which derefs nested-script signals through the rest of the branch.
+
+- [`0c54e5a`](https://github.com/briancray/abide/commit/0c54e5a025eef96ebc7eece3f51b8a167241434d) - fix(ui): don't emit a void element as a component's mount wrapper. A component instance mounts into a wrapper tag derived from its name (`<Search>`→`<search>`); when the name lowercases to a void element (`<Input>`→`<input>`, `<Img>`→`<img>`) the wrapper self-closes and the HTML parser reparents the component's own markup as the wrapper's siblings, so on hydration `openChild` finds the wrapper empty, claims `null`, and `attr` throws `null is not an object (setAttribute)` — aborting hydration. Such names now map to a hyphenated custom-element tag (`abide-input`, never void) made layout-transparent with `display:contents`, so the child's real root still lays out as a direct child of the parent. Both the SSR string and the client build go through the shared `componentWrapperTag`, keeping them in agreement.
+
+- [`9695bea`](https://github.com/briancray/abide/commit/9695bea26309b693d6b61a4dec1641559421c714) - perf(ui): carry the streamed await-block resume value in a `<script type="application/json">` child instead of a `data-resume` attribute. The attribute form HTML-escaped the JSON (`"` → `&quot;`, plus `&`/`<` passes), inflating the raw payload ~38% and costing two full-string regex passes per render (~2.6 ms/MB; ~10 ms for a 3.7 MB payload). Script content is raw text, so only `<` is neutralized as the JSON escape — ~130–150× cheaper to encode and no quote inflation. `applyResolved` and the inline `SSR_SWAP_SCRIPT` now read the value via `.textContent` and drop the script before swapping the resolved markup into its boundary.
+
+## 0.32.0
+
+### Minor Changes
+
+- [`786a496`](https://github.com/briancray/abide/commit/786a4965fa3c94954ea8d66aa41b0f94e0ec8320) - render control-flow branches into marker-bounded ranges ([`23efa06`](https://github.com/briancray/abide/commit/23efa0606b90b69ff262679673d660a71baf443c))
+
+### Patch Changes
+
+- [`786a496`](https://github.com/briancray/abide/commit/786a4965fa3c94954ea8d66aa41b0f94e0ec8320) - report checked component count on success ([`9ea83bb`](https://github.com/briancray/abide/commit/9ea83bb3c072d72e67486906b191964505e872f2))
+
 ## 0.31.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.31.1",
+    "version": "0.32.1",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",
@@ -82,7 +82,6 @@
         "./ui/dom/hydrate": "./src/lib/ui/dom/hydrate.ts",
         "./ui/dom/text": "./src/lib/ui/dom/text.ts",
         "./ui/dom/openChild": "./src/lib/ui/dom/openChild.ts",
-        "./ui/dom/openRoot": "./src/lib/ui/dom/openRoot.ts",
         "./ui/dom/appendText": "./src/lib/ui/dom/appendText.ts",
         "./ui/dom/appendSnippet": "./src/lib/ui/dom/appendSnippet.ts",
         "./ui/dom/appendStatic": "./src/lib/ui/dom/appendStatic.ts",

package/src/checkAbide.ts

@@ -14,7 +14,7 @@ the same as each package checked on its own — and the same as the LSP. Returns
 the error count so the CLI can set its exit code.
 */
 export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
-    const diagnostics = collectByProject(cwd)
+    const { diagnostics, checked } = collectByProject(cwd)
     const byFile = new Map<string, AbideDiagnostic[]>()
     for (const diagnostic of diagnostics) {
         const bucket = byFile.get(diagnostic.file) ?? []
@@ -32,11 +32,14 @@ export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
     const errors = diagnostics.filter(
         (diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error,
     ).length
-    const relative = byFile.size
+    /* Success reports components *checked* (the glob count); failure reports the
+       files *with* errors. Reporting `byFile.size` on success printed `0` — it only
+       holds files that had diagnostics. */
+    const fileCount = byFile.size
     console.log(
         errors === 0
-            ? `\n[abide check] no type errors in ${relative} component${relative === 1 ? '' : 's'}`
-            : `\n[abide check] ${errors} error${errors === 1 ? '' : 's'} in ${relative} file${relative === 1 ? '' : 's'}`,
+            ? `\n[abide check] no type errors in ${checked} component${checked === 1 ? '' : 's'}`
+            : `\n[abide check] ${errors} error${errors === 1 ? '' : 's'} in ${fileCount} file${fileCount === 1 ? '' : 's'}`,
     )
     return errors
 }
@@ -45,7 +48,7 @@ export async function checkAbide({ cwd }: { cwd: string }): Promise<number> {
    project's components against that project's options, then concatenates the
    diagnostics. Imported components from another project resolve on demand through
    the host, so the per-project root set stays each project's own files. */
-function collectByProject(cwd: string): AbideDiagnostic[] {
+function collectByProject(cwd: string): { diagnostics: AbideDiagnostic[]; checked: number } {
     const byProject = new Map<string, string[]>()
     for (const relative of new Bun.Glob('**/*.abide').scanSync({ cwd, onlyFiles: true })) {
         if (relative.includes('node_modules')) {
@@ -55,9 +58,11 @@ function collectByProject(cwd: string): AbideDiagnostic[] {
         const root = nearestProjectRoot(path, cwd)
         byProject.set(root, [...(byProject.get(root) ?? []), path])
     }
-    return [...byProject].flatMap(([root, paths]) =>
+    const diagnostics = [...byProject].flatMap(([root, paths]) =>
         collectAbideDiagnostics(createShadowProgram(root, paths)),
     )
+    const checked = [...byProject.values()].reduce((total, paths) => total + paths.length, 0)
+    return { diagnostics, checked }
 }
 
 /* Renders one diagnostic as `path:line:col severity message` plus the offending

package/src/lib/server/runtime/SSR_SWAP_SCRIPT.ts

@@ -1,6 +1,7 @@
 /*
 The tiny inline script the abide-ui SSR stream ships in <head>. For each streamed
-`<abide-resolve data-id data-resume>` frame it registers the resolved value into
+`<abide-resolve data-id>` frame it reads the leading `<script type=application/json>`,
+registers the resolved value into
 `window.__abideResume` (the resume manifest hydration reads) and swaps the resolved
 markup into the matching `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary —
 so the pending shell paints instantly and each value lands as it arrives, before
@@ -9,8 +10,8 @@ minified to one line so it inlines cheaply ahead of the document body.
 */
 export const SSR_SWAP_SCRIPT =
     "function __abideSwap(){var f=document.querySelector('abide-resolve');while(f){" +
-    "var id=f.getAttribute('data-id'),w=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT),o=null,c;" +
-    "try{(window.__abideResume=window.__abideResume||{})[id]=JSON.parse(f.getAttribute('data-resume')||'null');}catch(e){}" +
+    "var id=f.getAttribute('data-id'),p=f.firstChild,w=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT),o=null,c;" +
+    "if(p&&p.nodeName==='SCRIPT'){try{(window.__abideResume=window.__abideResume||{})[id]=JSON.parse(p.textContent||'null');}catch(e){}p.remove();}" +
     "while((c=w.nextNode())){if(c.data==='abide:await:'+id){o=c;break;}}" +
     "if(o){var n=o.nextSibling;while(n&&!(n.nodeType===8&&n.data==='/abide:await:'+id)){var x=n.nextSibling;n.remove();n=x;}" +
     "while(f.firstChild){o.parentNode.insertBefore(f.firstChild,n);}}f.remove();f=document.querySelector('abide-resolve');}}"

package/src/lib/server/runtime/createServer.ts

@@ -238,6 +238,32 @@ export async function createServer({
     /* Request closing records are on by default — DEBUG=-abide is the off switch (negation, like the abide channel itself). */
     const logRequests = !isDebugNegated('abide')
 
+    /*
+    Time an asset serve and emit its closing record when logging is on. A miss
+    (undefined, from the public server) passes through unlogged so the request
+    can fall through to the 404 path.
+    */
+    const timedServe = async <T extends Response | undefined>(
+        serve: () => Promise<T>,
+        req: Request,
+        url: URL,
+    ): Promise<T> => {
+        if (!logRequests) {
+            return serve()
+        }
+        const start = Bun.nanoseconds()
+        const response = await serve()
+        if (response) {
+            logClosingRecord(
+                req.method,
+                `${url.pathname}${url.search}`,
+                response.status,
+                (Bun.nanoseconds() - start) / 1e6,
+            )
+        }
+        return response
+    }
+
     // App-configured headers extend the in-process forward allowlist for the process lifetime.
     extraForwardHeaders.set(app?.forwardHeaders ?? [])
 
@@ -546,19 +572,7 @@ export async function createServer({
                 catches anything that goes wrong inside serveAppAsset.
                 */
                 if (url.pathname.startsWith('/_app/')) {
-                    if (!logRequests) {
-                        return serveAppAsset(req, url)
-                    }
-                    const start = Bun.nanoseconds()
-                    const response = await serveAppAsset(req, url)
-                    const ms = (Bun.nanoseconds() - start) / 1e6
-                    logClosingRecord(
-                        req.method,
-                        `${url.pathname}${url.search}`,
-                        response.status,
-                        ms,
-                    )
-                    return response
+                    return timedServe(() => serveAppAsset(req, url), req, url)
                 }
                 /*
                 Files under public/ are served at the site root, sidestepping
@@ -566,17 +580,8 @@ export async function createServer({
                 undefined so the request falls through to the 404 / middleware
                 path below.
                 */
-                const publicStart = Bun.nanoseconds()
-                const publicResponse = await servePublicAsset(req, url)
+                const publicResponse = await timedServe(() => servePublicAsset(req, url), req, url)
                 if (publicResponse) {
-                    if (logRequests) {
-                        logClosingRecord(
-                            req.method,
-                            `${url.pathname}${url.search}`,
-                            publicResponse.status,
-                            (Bun.nanoseconds() - publicStart) / 1e6,
-                        )
-                    }
                     return publicResponse
                 }
                 /*

package/src/lib/server/runtime/createUiPageRenderer.ts

@@ -27,7 +27,7 @@ Response out.
 
 A page with no `await` block renders synchronously and ships buffered. A page with
 await blocks STREAMS: the pending shell flushes first, then each resolved fragment
-(`<abide-resolve data-resume>`) as its promise settles, swapped into its boundary
+(`<abide-resolve>` carrying a JSON `<script>`) as its promise settles, swapped into its boundary
 by the inline SSR_SWAP_SCRIPT — which also registers the value into the resume
 manifest so client hydration adopts it without re-fetching (see abide/ui/awaitBlock).
 

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

@@ -0,0 +1,16 @@
+/*
+A compile-time `.abide` error carrying the absolute source offset of the
+offending node (when the parser tracked one). The loader catches it, resolves the
+offset to `line:col` against the file, and re-throws with the component path and
+position in the message — so a failed build names the exact file and line, not the
+entry page at offset 0 (Bun frames plugin throws at `<file>:0` regardless).
+*/
+export class AbideCompileError extends Error {
+    readonly offset: number | undefined
+
+    constructor(message: string, offset?: number) {
+        super(message)
+        this.name = 'AbideCompileError'
+        this.offset = offset
+    }
+}

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

@@ -15,7 +15,6 @@ export const UI_RUNTIME_IMPORTS: { name: string; specifier: string }[] = [
     { name: 'effect', specifier: 'ui/effect' },
     { name: 'mount', specifier: 'ui/dom/mount' },
     { name: 'openChild', specifier: 'ui/dom/openChild' },
-    { name: 'openRoot', specifier: 'ui/dom/openRoot' },
     { name: 'appendText', specifier: 'ui/dom/appendText' },
     { name: 'appendSnippet', specifier: 'ui/dom/appendSnippet' },
     { name: 'appendStatic', specifier: 'ui/dom/appendStatic' },

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

@@ -1,8 +1,10 @@
 import { relative } from 'node:path'
 import type { BunPlugin } from 'bun'
+import { AbideCompileError } from './AbideCompileError.ts'
 import { analyzeComponent } from './analyzeComponent.ts'
 import { compileModule } from './compileModule.ts'
 import { nearestProjectRoot } from './nearestProjectRoot.ts'
+import { offsetToLineColumn } from './offsetToLineColumn.ts'
 
 /*
 Bun plugin that loads `.abide` single-file components: compiles each to the ES
@@ -40,11 +42,32 @@ export const abideUiPlugin: BunPlugin = {
             const source = await Bun.file(args.path).text()
             const moduleId = relative(nearestProjectRoot(args.path, process.cwd()), args.path)
             const isLayout = (args.path.split('/').pop() ?? '') === 'layout.abide'
-            const code = compileModule(source, { isLayout, moduleId })
+            /* 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
+               like it came from the entry page rather than this component. */
+            const compileAbide = <T>(step: () => T): T => {
+                try {
+                    return step()
+                } catch (error) {
+                    const offset = error instanceof AbideCompileError ? error.offset : undefined
+                    const at =
+                        offset === undefined
+                            ? moduleId
+                            : (({ line, column }) => `${moduleId}:${line}:${column}`)(
+                                  offsetToLineColumn(source, offset),
+                              )
+                    const message = error instanceof Error ? error.message : String(error)
+                    throw new Error(`${message.replace(/^\[abide\]\s*/, `[abide] ${at} — `)}`)
+                }
+            }
+            const code = compileAbide(() => compileModule(source, { isLayout, moduleId }))
             /* 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
                registry id and the CSS id agree. */
-            const styles = toBrowser ? analyzeComponent(source, moduleId).styles : []
+            const styles = compileAbide(() =>
+                toBrowser ? analyzeComponent(source, moduleId).styles : [],
+            )
             if (styles.length === 0) {
                 return { contents: code, loader: 'ts' }
             }

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

@@ -0,0 +1,19 @@
+/*
+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.
+*/
+export function bindListenEvent(property: string, tag: 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/compileShadow.ts

@@ -184,6 +184,27 @@ function analyzeScript(scriptBody: string, scriptStart: number): ScriptAnalysis
     return { imports, types, scope, props }
 }
 
+/* Value-projects a nested control-flow `<script>` body the way `analyzeScript`
+   projects the leading script's scope: reactive declarations become their value
+   type, every other statement stays verbatim. Returns the projected source text
+   (unmapped — nested scripts carry no source offset yet), so a branch's markup
+   reads a nested signal as its value type instead of the raw `State`/`Derived`. */
+function projectNestedScript(code: string): string {
+    const file = ts.createSourceFile('nested.ts', code, ts.ScriptTarget.Latest, true)
+    const verbatim = (node: ts.Node): string => code.slice(node.getStart(file), node.getEnd())
+    /* No mapping: a zero-length segment the caller drops. */
+    const span = (): ShadowMapping => ({ shadowStart: 0, sourceStart: 0, length: 0 })
+    return file.statements
+        .flatMap((statement) => {
+            const reactive = reactiveDeclarations(statement)
+            if (reactive === undefined) {
+                return [verbatim(statement)]
+            }
+            return reactive.map((declaration) => scopeLineFor(declaration, [], verbatim, span).text)
+        })
+        .join('\n')
+}
+
 /* The `state`/`derived`/`prop` declarations in a variable statement, or undefined
    if it isn't one declaring them (so the caller emits it verbatim). A statement
    mixing reactive and plain declarations is rare; treated as all-verbatim. */
@@ -229,7 +250,14 @@ function scopeLineFor(
         const annotation = typeNode === undefined ? '' : `: ${verbatim(typeNode)}`
         const init = call.arguments[0]
         if (init === undefined) {
-            return { text: `let ${name}${annotation};`, segments: [] }
+            /* No initial (`state<T>()`): the value is `T | undefined`. A definite-
+               assignment assertion (`!`) gives that union without a use-before-assign
+               false-positive AND without control-flow narrowing it to just `undefined`
+               (an `= undefined` initializer, never reassigned in the shadow, would make
+               a guard like `x !== undefined` collapse to `never`). Unguarded access is
+               then correctly flagged possibly-undefined; a guard narrows cleanly. */
+            const valueType = annotation === '' ? ': unknown' : `${annotation} | undefined`
+            return { text: `let ${name}!${valueType};`, segments: [] }
         }
         const prefix = `let ${name}${annotation} = (`
         return { text: `${prefix}${verbatim(init)});`, segments: [span(init, prefix.length)] }
@@ -257,51 +285,13 @@ function scopeLineFor(
     return { text: `let ${name} = props[${JSON.stringify(keyText)}];`, segments: [] }
 }
 
-/* Emits a sibling list. Walks with lookahead so an `if` and its trailing `else`
-   (the next meaningful sibling — a `case` with no match) fuse into one
-   `if (…) {…} else {…}`, giving the else branch the condition's negative narrowing
-   instead of being checked bare against the un-narrowed type. Every other node is
-   emitted standalone via `emitNode`. */
+/* Emits a sibling list — each node standalone via `emitNode`. */
 function emitNodes(nodes: TemplateNode[], builder: Builder): void {
-    for (let index = 0; index < nodes.length; index += 1) {
-        const node = nodes[index]
-        if (node === undefined) {
-            continue
-        }
-        if (node.kind !== 'if') {
+    for (const node of nodes) {
+        if (node !== undefined) {
             emitNode(node, builder)
-            continue
-        }
-        builder.raw('if ')
-        builder.expr(node.condition, node.loc)
-        builder.raw(' {\n')
-        emitNodes(node.children, builder)
-        builder.raw('}')
-        const elseIndex = nextMeaningful(nodes, index + 1)
-        const elseNode = elseIndex === -1 ? undefined : nodes[elseIndex]
-        if (elseNode?.kind === 'case' && elseNode.match === undefined) {
-            builder.raw(' else {\n')
-            emitNodes(elseNode.children, builder)
-            builder.raw('}')
-            index = elseIndex
-        }
-        builder.raw('\n')
-    }
-}
-
-/* Index of the next node that isn't whitespace-only text (which separates the `if`
-   and `else` tags in source but carries no checkable content); -1 if none remain. */
-function nextMeaningful(nodes: TemplateNode[], from: number): number {
-    for (let index = from; index < nodes.length; index += 1) {
-        const node = nodes[index]
-        const blank =
-            node?.kind === 'text' &&
-            node.parts.every((part) => part.kind === 'static' && part.value.trim() === '')
-        if (!blank) {
-            return index
         }
     }
-    return -1
 }
 
 /* Emits a template node's expressions into the shadow's render body. Control flow
@@ -346,15 +336,31 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             emitNodes(node.children, builder)
             return
         }
-        case 'if':
-            /* Reached only for an `if` emitted outside a sibling list (none today);
-               `emitNodes` owns the `if`/`else` fusion. Emit without an else. */
+        case 'if': {
+            /* The optional `<template else>` is a match-less `case` CHILD (the runtime
+               pairs it the same way — see `generateIf`); the rest are the then-content.
+               Emitting it as a real `else` gives its body the condition's NEGATIVE
+               narrowing — emitting it inside the `if` block (as a plain child) instead
+               gave it the positive narrowing, so a literal-union compare read as a
+               "no overlap" and a typeof-narrowed branch saw the wrong member. */
+            const elseChild = node.children.find(
+                (child): child is Extract<TemplateNode, { kind: 'case' }> =>
+                    child.kind === 'case' && child.match === undefined,
+            )
+            const thenChildren = node.children.filter((child) => child !== elseChild)
             builder.raw('if ')
             builder.expr(node.condition, node.loc)
             builder.raw(' {\n')
-            emitNodes(node.children, builder)
-            builder.raw('}\n')
+            emitNodes(thenChildren, builder)
+            builder.raw('}')
+            if (elseChild !== undefined) {
+                builder.raw(' else {\n')
+                emitNodes(elseChild.children, builder)
+                builder.raw('}')
+            }
+            builder.raw('\n')
             return
+        }
         case 'each':
             /* `for await` over an async each's AsyncIterable, plain `for…of` otherwise —
                so the item binds to the element type under either iteration protocol. */
@@ -429,8 +435,8 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('}\n')
             return
         case 'case':
-            /* Reached only for a stray case outside a switch/if-else (none today); a
-               `switch` emits its own cases and `emitNodes` consumes an `else`. */
+            /* Reached only for a stray case outside a switch/if (none today); a `switch`
+               emits its own cases and the `if` handler consumes its `else` child. */
             if (node.match !== undefined) {
                 builder.stmt(node.match, node.loc)
             }
@@ -457,9 +463,16 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('};\n')
             return
         case 'script':
-            /* A scoped reactive `<script>` block — its body is author TS; emit it so
-               its references check. Not yet position-mapped (rare). */
-            builder.raw(`{\n${node.code}\n}\n`)
+            /* A scoped reactive `<script>`: value-project its reactive declarations to
+               their value types (`derived(…)` → the computed value, `state(…)` → the
+               initial) exactly as the leading script's scope lines are, so the branch's
+               markup type-checks a nested signal as its value — matching the runtime,
+               which derefs nested-script signals through the rest of the branch. Emitted
+               INLINE in the current block, not a nested `{…}`, so its bindings reach the
+               branch's later siblings (a nested if/each); a wrapping block trapped them,
+               surfacing "Cannot find name". Leading `;` guards a preceding semicolon-less
+               call from merging in (see the component case). Not yet position-mapped. */
+            builder.raw(`;\n${projectNestedScript(node.code)}\n`)
             return
         case 'style':
             /* CSS, not TypeScript — nothing for the shadow to type-check. */

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

@@ -0,0 +1,20 @@
+import { VOID_TAGS } from './VOID_TAGS.ts'
+
+/*
+The element tag a component instance mounts into. Normally the component name
+lowercased — readable in devtools, a real box like any abide wrapper. But a name
+that lowercases to a VOID element (`Input`→`input`, `Img`→`img`) would yield a
+wrapper the HTML parser self-closes, reparenting the component's own markup as the
+wrapper's siblings — so on hydration `openChild` finds the wrapper empty, claims
+`null`, and `attr` throws on it. Those names map to a hyphenated custom-element tag
+(a custom element is never void) made layout-transparent with `display:contents`,
+so the component's real root still lays out as a direct child of the parent the way
+the (parse-broken) void wrapper effectively did. Both back-ends call this so the SSR
+string and the client build agree on the wrapper.
+*/
+export function componentWrapperTag(name: string): { tag: string; transparent: boolean } {
+    const lower = name.toLowerCase()
+    return VOID_TAGS.has(lower)
+        ? { tag: `abide-${lower}`, transparent: true }
+        : { tag: lower, transparent: false }
+}