@abide/abide 0.32.0 → 0.32.2

package/AGENTS.md

@@ -181,6 +181,7 @@ Same selector grammar as `cache.invalidate`; also accept a `Subscribable`. See C
 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,35 @@
 # abide
 
+## 0.32.2
+
+### Patch Changes
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - sync examples and ui README to current API ([`923bb86`](https://github.com/briancray/abide/commit/923bb8674814e8efcacc954beac0f1c7982b0e2c))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - reject a static import in a nested <template> script ([`b9e7c76`](https://github.com/briancray/abide/commit/b9e7c76509d2401484d3f997b0cb904af4b5080c))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - merge valueAtPath + pathExists into a single-pass walkPath ([`bad087b`](https://github.com/briancray/abide/commit/bad087b39c4b5427bf44fec6c3f2eb1fdbccf9c2))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - remap any HTML-element-named component wrapper, not just void ([`bbbbe35`](https://github.com/briancray/abide/commit/bbbbe353e22b5d016cd47e81eb8bc9a786fbe336))
+
+- [`786f07a`](https://github.com/briancray/abide/commit/786f07a3c23986e988b2f0c0b3326e050129c959) - extract the static-clone template cache, keyed per document ([`d35beaa`](https://github.com/briancray/abide/commit/d35beaa956a449b79a5be63034473262226ad44d))
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.32.0",
+    "version": "0.32.2",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",

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/README.md

@@ -46,8 +46,8 @@ every page, and `.abide` files are the only component format.
   `<template await>`/`then`/`catch`, `<template switch>`/`case`/`default`.
 - **Components** are capitalised tags (`<Layout title="…">`); children fill the
   child's `<slot>`. Props are reactive (passed as thunks).
-- **Scoped styles**: a `<style>` block is scoped per component via a
-  `[data-b-<hash>]` attribute.
+- **Scoped styles**: a `<style>` block is scoped via a `[data-a-<hash>]`
+  attribute — per component, or per control-flow branch when nested in one.
 
 ## Substrate (why it's fast)
 

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

@@ -0,0 +1,132 @@
+/*
+Every standard HTML element name (lowercase), plus the two foreign-content roots
+`svg`/`math`. A component wrapper tag that collides with one of these is a real
+element with a content model and parser quirks — `<button>`/`<a>` reject interactive
+descendants, table/list/select families foster or auto-close non-conforming children,
+void elements self-close, and `<svg>`/`<math>` switch the parser into SVG/MathML
+namespace so the wrapper's HTML children break out (foster-parent) of it entirely —
+so the parser reparents the component's own markup out of the wrapper and hydration
+claims `null`. `componentWrapperTag` remaps any such name to a transparent custom
+element instead. Pure SVG/MathML descendant names (`circle`, `path`, `mrow`, …) are
+NOT here: in HTML context they are inert unknown elements that hold children fine, so
+a `<Circle>` component stays as-is like any non-element name. Superset of VOID_TAGS
+(which the parser/SSR still use for self-closing); this set is only the
+wrapper-safety check.
+*/
+export const HTML_TAGS: ReadonlySet<string> = new Set([
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'math',
+    'menu',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'search',
+    'section',
+    'select',
+    'slot',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'template',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+])

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. */
@@ -264,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
@@ -353,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. */
@@ -436,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)
             }
@@ -464,14 +463,16 @@ function emitNode(node: TemplateNode, builder: Builder): void {
             builder.raw('};\n')
             return
         case 'script':
-            /* A scoped reactive `<script>`: emit its body INLINE in the current block,
-               not a nested `{…}` — so its bindings are visible to the branch's later
-               siblings (a nested if/each within the same branch), matching runtime
-               scope where a nested script's declarations deref through the rest of the
-               branch. A wrapping block trapped them, surfacing "Cannot find name" on a
-               sibling. Leading `;` guards a preceding semicolon-less call from merging
-               in (see the component case). Not yet position-mapped (rare). */
-            builder.raw(`;\n${node.code}\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,23 @@
+import { HTML_TAGS } from './HTML_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 real HTML element (`Button`→`button`, `Input`→`input`) yields a
+wrapper with a content model the parser enforces: void elements self-close, and
+`<button>`/`<a>`/table/list/select families reject or foster 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 and has no content model) 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) wrapper would have.
+A name that is NOT a known HTML element (the common case — `Card`, `Dropdown`) is an
+inert unknown tag that holds any content untouched, so it stays as-is. 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 HTML_TAGS.has(lower)
+        ? { tag: `abide-${lower}`, transparent: true }
+        : { tag: lower, transparent: false }
+}

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

@@ -1,5 +1,6 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
 import { bindListenEvent } from './bindListenEvent.ts'
+import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { lowerContext } from './lowerContext.ts'
 import { partitionSlots } from './partitionSlots.ts'
@@ -283,10 +284,14 @@ export function generateBuild(
         node: Extract<TemplateNode, { kind: 'component' }>,
         parentVar: string,
     ): string {
-        return mountComponent(
+        const { tag, transparent } = componentWrapperTag(node.name)
+        const { code, varName } = mountComponent(
             node,
-            `openChild(${parentVar}, ${JSON.stringify(node.name.toLowerCase())})`,
-        ).code
+            `openChild(${parentVar}, ${JSON.stringify(tag)})`,
+        )
+        /* A void-name remap is layout-transparent so the child's root stays a direct
+           child of the parent (idempotent on a claimed SSR node that already has it). */
+        return transparent ? `${code}${varName}.setAttribute("style", "display:contents");\n` : code
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a

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

@@ -1,4 +1,5 @@
 import { OUTLET_TAG } from '../runtime/OUTLET_TAG.ts'
+import { componentWrapperTag } from './componentWrapperTag.ts'
 import { groupBindParts } from './groupBindParts.ts'
 import { lowerContext } from './lowerContext.ts'
 import { partitionSlots } from './partitionSlots.ts'
@@ -154,7 +155,7 @@ export function generateSSR(
                the same wrapper the client mounts into, so SSR and client agree.
                Props pass as thunks; slot content passes as a string-returning
                `$children` the child invokes from its <slot>. */
-            const tag = node.name.toLowerCase()
+            const { tag, transparent } = componentWrapperTag(node.name)
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
@@ -181,7 +182,7 @@ export function generateSSR(
                the enclosing render body, including from branch closures.) */
             const result = nextVar('$child')
             return (
-                push(target, `<${tag}>`) +
+                push(target, `<${tag}${transparent ? ' style="display:contents"' : ''}>`) +
                 `const ${result} = ${node.name}.render({ ${parts.join(', ')} });\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +

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

@@ -20,6 +20,12 @@ text, never mistaken for a real style. Keeping it in the tree lets the front-end
 scope it to its sibling subtree (`analyzeComponent`); the node emits no DOM/markup.
 */
 
+/* A line-leading static `import` in a nested script body. The `(?=\s)` requires
+   whitespace after the keyword (sparing `import.meta` and no-space `import(...)`),
+   and `(?!\s*\()` spares a dynamic `import (...)` written with whitespace before the
+   paren — both legitimate lazy paths — so only a true static import statement matches. */
+const NESTED_STATIC_IMPORT = /^[ \t]*import(?=\s)(?!\s*\()/m
+
 /* A braced template expression with the absolute source offset of its first
    (post-trim) character, so the type-checking shadow can map a diagnostic back. */
 type Braced = { code: string; loc: number }
@@ -179,6 +185,18 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             const end = close === -1 ? source.length : close
             const code = source.slice(cursor, end)
             cursor = close === -1 ? source.length : end + '</script>'.length
+            /* A static `import` can't live here: a nested script compiles INTO the
+               branch's render-function body, where an import is illegal — and an
+               import nested in a branch falsely implies conditional/lazy loading ES
+               imports can't do (they hoist module-wide and load unconditionally). The
+               leading `<script>` hoists imports to module scope for the whole template,
+               so they belong there. The pattern spares dynamic `import(...)` (with or
+               without whitespace) and `import.meta` — the real lazy paths. */
+            if (NESTED_STATIC_IMPORT.test(code)) {
+                throw new Error(
+                    "import statements must live in the component's leading <script>, not a nested <template> script — they hoist to module scope for the whole template. For lazy loading, use a dynamic import() inside an effect.",
+                )
+            }
             return { kind: 'script', code }
         }
         /* A capitalised tag is a child component; its attributes become props and

package/src/lib/ui/dom/applyResolved.ts

@@ -2,8 +2,8 @@ import { RESUME } from '../runtime/RESUME.ts'
 
 /*
 Client consumer of an SSR stream fragment. Parses a streamed
-`<abide-resolve data-id="ID" data-resume="…">…</abide-resolve>` frame, registers
-its serialized value in the resume manifest (for later hydration), finds the
+`<abide-resolve data-id="ID"><script type="application/json">…</script>…</abide-resolve>`
+frame, registers its serialized value in the resume manifest (for later hydration), finds the
 matching `<!--abide:await:ID-->…<!--/abide:await:ID-->` boundary in `root`, removes
 the pending nodes between the markers, and inserts the resolved content in their
 place. The pending shell painted instantly; this swaps in each value as it
@@ -21,14 +21,17 @@ export function applyResolved(root: Element, frame: string): void {
     if (id === null) {
         return
     }
-    /* Record the resolved value so a later hydrate adopts this branch (no re-fetch). */
-    const resume = resolved.getAttribute('data-resume')
-    if (resume !== null) {
+    /* The resolved value rides in a leading <script type=application/json>; parse and
+       remove it so only the resolved markup moves into the boundary. Recording it lets a
+       later hydrate adopt this branch (no re-fetch). */
+    const payload = resolved.firstChild as Element | null
+    if (payload !== null && payload.nodeName === 'SCRIPT') {
         try {
-            RESUME[Number(id)] = JSON.parse(resume)
+            RESUME[Number(id)] = JSON.parse(payload.textContent ?? 'null')
         } catch {
             /* malformed payload — leave unregistered, hydration re-runs the promise */
         }
+        payload.remove()
     }
     const open = `abide:await:${id}`
     const close = `/abide:await:${id}`

package/src/lib/ui/dom/cloneStatic.ts

@@ -1,22 +1,6 @@
 import { claimChild } from '../runtime/claimChild.ts'
 import { RENDER } from '../runtime/RENDER.ts'
-
-/*
-Parsed-once `<template>` per unique static-skeleton string, reused across every
-mount. A `<template>` (not a detached `<div>`) so table/select content parses by
-the real content model, exactly as the browser parsed the server markup.
-*/
-const TEMPLATES = new Map<string, HTMLTemplateElement>()
-
-function templateFor(html: string): HTMLTemplateElement {
-    let template = TEMPLATES.get(html)
-    if (template === undefined) {
-        template = document.createElement('template')
-        template.innerHTML = html
-        TEMPLATES.set(html, template)
-    }
-    return template
-}
+import { templateFor } from './templateFor.ts'
 
 /*
 Appends a fully-static subtree (one or more top-level nodes) under `parent` — what

package/src/lib/ui/dom/eachAsync.ts

@@ -69,7 +69,7 @@ export function eachAsync<T>(
     effect(() => {
         generation += 1
         const generationAtStart = generation
-        iterator?.return?.() // close the superseded run's iterator before re-streaming
+        iterator?.return?.(undefined)?.catch(() => undefined) // close the superseded run's iterator before re-streaming
         iterator = undefined
         clearError() // a fresh run drops a prior error branch
         const iterable = items() // read (subscribe) synchronously
@@ -128,7 +128,7 @@ export function eachAsync<T>(
     if (OWNER.current !== undefined) {
         OWNER.current.push(() => {
             generation += 1
-            iterator?.return?.()
+            iterator?.return?.(undefined)?.catch(() => undefined)
             iterator = undefined
             clearError()
             for (const row of rows.values()) {

package/src/lib/ui/dom/templateFor.ts

@@ -0,0 +1,28 @@
+/*
+Parsed-once `<template>` per unique static-skeleton string, reused across every
+mount. A `<template>` (not a detached `<div>`) so table/select content parses by
+the real content model, exactly as the browser parsed the server markup. Backs
+`cloneStatic`'s skeleton-string→template cache.
+
+The cache is keyed by the owning `document`: a template belongs to the document
+that created it, and its clones must land in that same document. In production there
+is one document, so this is one inner map; under the test harness, which installs a
+fresh `document` per file, it keeps each file's templates (and their node class)
+from leaking into the next.
+*/
+const CACHES = new WeakMap<object, Map<string, HTMLTemplateElement>>()
+
+export function templateFor(html: string): HTMLTemplateElement {
+    let cache = CACHES.get(document)
+    if (cache === undefined) {
+        cache = new Map()
+        CACHES.set(document, cache)
+    }
+    let template = cache.get(html)
+    if (template === undefined) {
+        template = document.createElement('template')
+        template.innerHTML = html
+        cache.set(html, template)
+    }
+    return template
+}

package/src/lib/ui/renderToStream.ts

@@ -5,10 +5,11 @@ import type { SsrAwait, SsrRender } from './runtime/types/SsrRender.ts'
 Out-of-order SSR streaming. Yields the pending shell first (so the browser paints
 immediately), then one resolved fragment per await block as its promise settles —
 in completion order, not source order, so a slow read never blocks a fast one.
-Each resolved fragment is a `<abide-resolve data-id="ID" data-resume="…">…</abide-resolve>`
-that `applyResolved` swaps into the matching `<!--abide:await:ID-->` boundary; the
-`data-resume` payload is the JSON-serialized value, registered for hydration so an
-`await` block adopts the resolved branch on resume instead of re-running.
+Each resolved fragment is a `<abide-resolve data-id="ID"><script type="application/json">
+…</script>…</abide-resolve>` that `applyResolved` swaps into the matching
+`<!--abide:await:ID-->` boundary; the leading script holds the JSON-serialized value,
+registered for hydration so an `await` block adopts the resolved branch on resume
+instead of re-running.
 
 This is the await-block-streams half of the cache rule: a top-level `await` in the
 script would have blocked the shell (inlined), but an await *block* flushes its
@@ -46,7 +47,9 @@ export async function* renderToStream(render: () => SsrRender): AsyncGenerator<s
         const resolved = await Promise.race(inflight.values())
         inflight.delete(resolved.id)
         const resume = encodeResume(resolved.resume)
-        yield `<abide-resolve data-id="${resolved.id}" data-resume="${resume}">${resolved.html}</abide-resolve>`
+        yield `<abide-resolve data-id="${resolved.id}">` +
+            `<script type="application/json">${resume}</script>` +
+            `${resolved.html}</abide-resolve>`
     }
 }
 
@@ -94,11 +97,11 @@ function settle(block: SsrAwait): Promise<Settled> {
     )
 }
 
-/* JSON for an HTML double-quoted attribute: escape `"` and `&` (and `<` for safety
-   inside markup). `applyResolved`/the inline swap script decode it via the DOM. */
+/* JSON for a `<script type="application/json">` data block: script content is raw
+   text, so only `<` needs neutralizing (emitted as a unicode escape) to keep a
+   literal `</script>` from closing the block early — quotes stay raw. Far cheaper
+   than attribute escaping (no full-string `"`/`&` passes) and JSON.parse decodes it
+   back. `applyResolved`/the inline swap script read it via `.textContent`. */
 function encodeResume(resume: ResumeEntry): string {
-    return JSON.stringify(resume)
-        .replace(/&/g, '&amp;')
-        .replace(/"/g, '&quot;')
-        .replace(/</g, '&lt;')
+    return JSON.stringify(resume).replace(/</g, '\\u003c')
 }

package/src/lib/ui/runtime/createDoc.ts

@@ -1,7 +1,6 @@
 import { applyPatchToTree } from './applyPatchToTree.ts'
 import { createSignalNode } from './createSignalNode.ts'
 import { flushEffects } from './flushEffects.ts'
-import { pathExists } from './pathExists.ts'
 import { REACTIVE_CONTEXT } from './REACTIVE_CONTEXT.ts'
 import { readNode } from './readNode.ts'
 import { trigger } from './trigger.ts'
@@ -9,7 +8,7 @@ import type { Cell } from './types/Cell.ts'
 import type { Doc } from './types/Doc.ts'
 import type { Patch } from './types/Patch.ts'
 import type { ReactiveNode } from './types/ReactiveNode.ts'
-import { valueAtPath } from './valueAtPath.ts'
+import { walkPath } from './walkPath.ts'
 import { writeNode } from './writeNode.ts'
 
 /*
@@ -39,7 +38,7 @@ export function createDoc(initial: unknown): Doc {
     function nodeFor(path: string): ReactiveNode {
         let node = nodes.get(path)
         if (node === undefined) {
-            node = createSignalNode(valueAtPath(tree, path))
+            node = createSignalNode(walkPath(tree, path).value)
             nodes.set(path, node)
         }
         return node
@@ -60,7 +59,7 @@ export function createDoc(initial: unknown): Doc {
     paying a scan over every minted node.
     */
     function wakeSubtree(rootPath: string, force: boolean, descend: boolean): void {
-        const rootValue = valueAtPath(tree, rootPath)
+        const rootValue = walkPath(tree, rootPath).value
         const rootNode = nodes.get(rootPath)
         if (rootNode !== undefined) {
             if (force) {
@@ -82,8 +81,9 @@ export function createDoc(initial: unknown): Doc {
                    and this very descend scan degrades linearly with it. The woken
                    reader re-mints a fresh node on its flush if the path ever returns.
                    Deleting the current entry mid-iteration is safe on a Map. */
-                if (pathExists(tree, candidate)) {
-                    writeNode(node, valueAtPath(tree, candidate))
+                const walk = walkPath(tree, candidate)
+                if (walk.exists) {
+                    writeNode(node, walk.value)
                 } else {
                     writeNode(node, undefined)
                     nodes.delete(candidate)
@@ -95,8 +95,11 @@ export function createDoc(initial: unknown): Doc {
     function apply(patch: Patch): void {
         const segments = patch.path === '' ? [] : patch.path.split('/')
         tree = applyPatchToTree(tree, patch, segments)
-        const parentPath = segments.slice(0, -1).join('/')
-        const parentValue = valueAtPath(tree, parentPath)
+        /* parentPath is patch.path minus its last segment — the same string
+           `segments.slice(0, -1).join('/')` rebuilds, taken by one slice instead. */
+        const lastSlash = patch.path.lastIndexOf('/')
+        const parentPath = lastSlash === -1 ? '' : patch.path.slice(0, lastSlash)
+        const parentValue = walkPath(tree, parentPath).value
         const leafKey = segments[segments.length - 1] as string | undefined
         /* A structural change (add/remove, or an array element replaced by index)
            reshapes the parent; a plain value replace reshapes only its own path. */

package/src/lib/ui/runtime/types/PathWalk.ts

@@ -0,0 +1,10 @@
+/*
+The result of walking a `/`-joined path through a tree: whether the path still
+resolves to an own slot at every segment, and the value it holds. `exists` is
+false when a segment is missing (a deleted key, an out-of-range index); `value`
+is then `undefined`. Separates a missing path from one holding a real `undefined`.
+*/
+export type PathWalk = {
+    exists: boolean
+    value: unknown
+}

package/src/lib/ui/runtime/walkPath.ts

@@ -0,0 +1,27 @@
+import type { PathWalk } from './types/PathWalk.ts'
+
+/*
+Walks a `/`-joined path through a plain tree in one pass, returning both whether
+the path still resolves (`exists`) and the value it holds (`value`). `''` is the
+root. Arrays index by their numeric segment as a string — JS array access coerces
+the key, and `in` covers an own index in range or `length`.
+
+The two answers are inseparable on the eviction path (`createDoc`'s descend),
+which must distinguish a path the tree no longer has (a deleted key, an
+out-of-range index after a shrink) from one holding a genuine `undefined` — a
+distinction the value alone can't make. Returning both walks the path once where
+a separate value-read + existence-check would walk it twice.
+*/
+export function walkPath(tree: unknown, path: string): PathWalk {
+    if (path === '') {
+        return { exists: tree !== undefined, value: tree }
+    }
+    let current: unknown = tree
+    for (const segment of path.split('/')) {
+        if (current === null || typeof current !== 'object' || !(segment in current)) {
+            return { exists: false, value: undefined }
+        }
+        current = (current as Record<string, unknown>)[segment]
+    }
+    return { exists: true, value: current }
+}

package/src/lib/ui/runtime/pathExists.ts

@@ -1,23 +0,0 @@
-/*
-Whether a `/`-joined path still resolves through `tree` — every segment present
-in its container. The `in` operator covers both shapes: an object key, an array's
-own index (in range) or its `length`. Distinguishes a path the tree no longer has
-(a deleted key, an out-of-range index after a shrink) from one holding a genuine
-`undefined`, which `valueAtPath` alone can't — used to evict dead reactive nodes.
-*/
-export function pathExists(tree: unknown, path: string): boolean {
-    if (path === '') {
-        return tree !== undefined
-    }
-    let current: unknown = tree
-    for (const segment of path.split('/')) {
-        if (current === null || typeof current !== 'object') {
-            return false
-        }
-        if (!(segment in current)) {
-            return false
-        }
-        current = (current as Record<string, unknown>)[segment]
-    }
-    return true
-}

package/src/lib/ui/runtime/valueAtPath.ts

@@ -1,18 +0,0 @@
-/*
-Reads the value at a `/`-joined path in a plain tree. `''` is the root. Returns
-undefined if any segment is missing — arrays index by their numeric segment as a
-string, which works because JS array access coerces the key.
-*/
-export function valueAtPath(tree: unknown, path: string): unknown {
-    if (path === '') {
-        return tree
-    }
-    let current: unknown = tree
-    for (const segment of path.split('/')) {
-        if (current === null || typeof current !== 'object') {
-            return undefined
-        }
-        current = (current as Record<string, unknown>)[segment]
-    }
-    return current
-}