@abide/abide 0.32.1 → 0.33.0

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

@@ -2,10 +2,9 @@ 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'
 import { scopeAttr } from './scopeAttr.ts'
+import { skeletonable } from './skeletonable.ts'
 import { staticAttr } from './staticAttr.ts'
-import { staticAttrValue } from './staticAttrValue.ts'
 import { staticTextPart } from './staticTextPart.ts'
 import { stripEffects } from './stripEffects.ts'
 import type { TemplateNode } from './types/TemplateNode.ts'
@@ -69,11 +68,35 @@ export function generateSSR(
        it in the `[ … ]` range markers the runtime tracks (unconditionally per block,
        so an empty/false branch still emits the boundary the client claims). */
     function branchContent(children: TemplateNode[], target: string): string {
-        return withNestedScripts(children, () => generateInto(children, target))
+        /* A control-flow branch is a fresh build context — the block runtime mounts it, not
+           the parent skeleton — so reset the skeleton/anchor tracking; the branch's own
+           skeletonable elements re-enter it. */
+        const previousSkeleton = inSkeleton
+        const previousMark = markText
+        inSkeleton = false
+        markText = false
+        const out = withNestedScripts(children, () => generateInto(children, target))
+        inSkeleton = previousSkeleton
+        markText = previousMark
+        return out
     }
     const openRange = (target: string): string => push(target, RANGE_OPEN)
     const closeRange = (target: string): string => push(target, RANGE_CLOSE)
 
+    /* True inside a skeletonable subtree; `markText` true when, additionally, the current
+       element is NOT a text-leaf — so its reactive text is interleaved and the client uses
+       an `<!--a-->` anchor. The marker is kept both sides (like control-flow ranges), so
+       SSR markup stays identical to the client DOM. */
+    let inSkeleton = false
+    let markText = false
+
+    /* In a skeleton, a control-flow block or slot is positioned by an `<!--a-->` anchor
+       (cloned into the located parent), so it can sit anywhere among static siblings.
+       Emitted both sides in document order — the client's anchor scan lines up with it.
+       Outside a skeleton (top-level / inside a branch) blocks mount on the host directly,
+       so no anchor. */
+    const anchorMark = (target: string): string => (inSkeleton ? push(target, '<!--a-->') : '')
+
     function generate(node: TemplateNode, target: string): string {
         if (node.kind === 'text') {
             return node.parts
@@ -82,7 +105,10 @@ export function generateSSR(
                         const markup = staticTextPart(part.value)
                         return markup === '' ? '' : push(target, markup)
                     }
-                    return `${target}.push($text(${lowerExpression(part.code)}));\n`
+                    const value = `$text(${lowerExpression(part.code)})`
+                    return markText
+                        ? `${target}.push('<!--a-->' + ${value});\n`
+                        : `${target}.push(${value});\n`
                 })
                 .join('')
         }
@@ -93,7 +119,7 @@ export function generateSSR(
             if (elseBranch !== undefined && elseBranch.kind === 'case') {
                 code += ` else {\n${branchContent(elseBranch.children, target)}}`
             }
-            return `${openRange(target)}${code}\n${closeRange(target)}`
+            return `${anchorMark(target)}${openRange(target)}${code}\n${closeRange(target)}`
         }
         if (node.kind === 'switch') {
             const cases = node.children.filter(
@@ -111,7 +137,7 @@ export function generateSSR(
             if (fallback !== undefined) {
                 code += `${started ? 'else ' : ''}{\n${branchContent(fallback.children, target)}}\n`
             }
-            return `${openRange(target)}${code}}\n${closeRange(target)}`
+            return `${anchorMark(target)}${openRange(target)}${code}}\n${closeRange(target)}`
         }
         if (node.kind === 'case') {
             return ''
@@ -135,17 +161,19 @@ export function generateSSR(
         if (node.kind === 'each') {
             /* Async each (`await`) is drained on the client — render no rows on the
                server (an infinite stream would hang SSR); the client inserts its anchor
-               before the next sibling during hydration, like an empty sync each. */
+               before the next sibling during hydration, like an empty sync each. In a
+               skeleton the `<!--a-->` anchor still marks its position (the client mounts
+               there); no range markers, since there are no server rows to claim. */
             if (node.async) {
-                return ''
+                return anchorMark(target)
             }
-            return `for (const ${node.as} of (${lowerExpression(node.items)})) {\n${openRange(target)}${branchContent(node.children, target)}${closeRange(target)}}\n`
+            return `${anchorMark(target)}for (const ${node.as} of (${lowerExpression(node.items)})) {\n${openRange(target)}${branchContent(node.children, target)}${closeRange(target)}}\n`
         }
         if (node.kind === 'await') {
-            return generateAwait(node, target)
+            return `${anchorMark(target)}${generateAwait(node, target)}`
         }
         if (node.kind === 'try') {
-            return generateTry(node, target)
+            return `${anchorMark(target)}${generateTry(node, target)}`
         }
         if (node.kind === 'branch') {
             return ''
@@ -159,22 +187,12 @@ export function generateSSR(
             const parts = node.props.map(
                 (prop) => `${JSON.stringify(prop.name)}: () => (${lowerExpression(prop.code)})`,
             )
-            const groups = partitionSlots(node.children)
-            const slotCode = generateInto(groups.default, '$slot')
+            const slotCode = generateInto(node.children, '$slot')
             if (slotCode.trim() !== '') {
                 parts.push(
                     `"$children": () => { const $slot = []; ${slotCode}return $slot.join(''); }`,
                 )
             }
-            if (groups.named.length > 0) {
-                const entries = groups.named
-                    .map((group) => {
-                        const code = generateInto(group.nodes, '$slot')
-                        return `${JSON.stringify(group.name)}: () => { const $slot = []; ${code}return $slot.join(''); }`
-                    })
-                    .join(', ')
-                parts.push(`"$slots": { ${entries} }`)
-            }
             /* Render the child and MERGE its await blocks into this page's `$awaits`
                so they join the page's SSR stream — their markers carry render-pass
                block ids (nextBlockId), unique across page + children, so the streamed
@@ -190,9 +208,9 @@ export function generateSSR(
             )
         }
         if (node.kind === 'element' && node.tag === 'slot') {
-            /* A layout's unnamed `<slot/>` is the router's page outlet: emit an empty
+            /* A layout's `<slot/>` is the router's page outlet: emit an empty
                placeholder the chain composer folds the child layer's html into. */
-            if (isLayout && staticAttrValue(node, 'name') === undefined) {
+            if (isLayout) {
                 return push(target, `<${OUTLET_TAG}></${OUTLET_TAG}>`)
             }
             return generateSlot(node, target)
@@ -228,32 +246,55 @@ export function generateSSR(
         }
         code += push(target, '>')
         if (!VOID_TAGS.has(node.tag)) {
+            /* Track skeleton context: reactive text gets an `<!--a-->` anchor only when
+               interleaved (this element has non-text children) inside a skeletonable
+               subtree — matching the client's anchor vs marker-free text-leaf choice. */
+            const entering = !inSkeleton && skeletonable(node)
+            if (entering) {
+                inSkeleton = true
+            }
+            const previousMark = markText
+            const isTextLeaf = node.children.every(
+                (child) => child.kind === 'text' || child.kind === 'style',
+            )
+            markText = inSkeleton && !isTextLeaf
             /* A `<script>` child scopes its bindings to this element's subtree. */
             code += withNestedScripts(node.children, () => generateInto(node.children, target))
+            markText = previousMark
+            if (entering) {
+                inSkeleton = false
+            }
             code += push(target, `</${node.tag}>`)
         }
         return code
     }
 
-    /* A `<slot>` outlet: emit the parent-provided content for this slot (default
-       via `$children`, named via `$slots[name]`), falling back to the slot's own
-       children when none was supplied. */
+    /* A `<slot>` outlet: emit the parent-provided content (`$children`), falling back to the
+       slot's own children when none was supplied. Inside a skeleton the slot is positioned
+       by an `<!--a-->` anchor and its content bounded by a `[ … ]` range (matching the
+       client's `mountSlot`), so it can sit among static siblings. The fallback is a fresh,
+       non-skeleton build context — the client builds it via `mountSlot`/`fillBefore`, not the
+       skeleton clone — so its reactive text takes no anchor (reset like `branchContent`). */
     function generateSlot(
         node: Extract<TemplateNode, { kind: 'element' }>,
         target: string,
     ): string {
-        const name = staticAttrValue(node, 'name')
-        const guard =
-            name === undefined
-                ? '$props && $props.$children'
-                : `$props && $props.$slots && $props.$slots[${JSON.stringify(name)}]`
-        const provided =
-            name === undefined ? '$props.$children' : `$props.$slots[${JSON.stringify(name)}]`
+        const wrap = inSkeleton
+        const previousSkeleton = inSkeleton
+        const previousMark = markText
+        inSkeleton = false
+        markText = false
         const fallback = generateInto(node.children, target)
-        if (fallback.trim() === '') {
-            return `if (${guard}) { ${target}.push(${provided}()); }\n`
+        inSkeleton = previousSkeleton
+        markText = previousMark
+        const body =
+            fallback.trim() === ''
+                ? `if ($props && $props.$children) { ${target}.push($props.$children()); }\n`
+                : `if ($props && $props.$children) { ${target}.push($props.$children()); } else {\n${fallback}}\n`
+        if (!wrap) {
+            return body
         }
-        return `if (${guard}) { ${target}.push(${provided}()); } else {\n${fallback}}\n`
+        return `${anchorMark(target)}${openRange(target)}${body}${closeRange(target)}`
     }
 
     /* Boundary markers + a `$awaits` registration carrying the promise and

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
@@ -226,9 +244,43 @@ export function parseTemplate(source: string, baseOffset = 0): { nodes: Template
             roots.push(readText())
         }
     }
+    rejectStrayBranches(roots, undefined)
     return { nodes: roots }
 }
 
+/* A `case` node (`<template else>`/`<template case>`/`<template default>`) is valid
+   only as a direct child of its `<template if>`/`<template switch>`; a `branch`
+   (`then`/`catch`/`finally`) only inside its `<template await>`/`<template try>`.
+   A sibling `<template else>` — closed off from its `if` — parses to a stray `case`
+   sitting beside the `if`, which would otherwise be silently dropped. Reject it so
+   the mistake surfaces at compile time. Recurses so a stray branch nested anywhere
+   is caught, not just at the root. */
+function rejectStrayBranches(
+    nodes: TemplateNode[],
+    parentKind: TemplateNode['kind'] | undefined,
+): void {
+    for (const node of nodes) {
+        if (node.kind === 'case' && parentKind !== 'if' && parentKind !== 'switch') {
+            throw new Error(
+                '[abide] <template else>/<template case> must be nested inside its <template if>/<template switch> — a sibling branch is not supported',
+            )
+        }
+        if (
+            node.kind === 'branch' &&
+            parentKind !== 'await' &&
+            parentKind !== 'try' &&
+            parentKind !== 'each'
+        ) {
+            throw new Error(
+                '[abide] <template then>/<template catch>/<template finally> must be nested inside its <template await>/<template try>/<template each await>',
+            )
+        }
+        if ('children' in node) {
+            rejectStrayBranches(node.children, node.kind)
+        }
+    }
+}
+
 /* Turns a component's attributes into props. A component has no directives —
    every attribute is a prop under its written name, so `on*`/`bind:`/`attach`
    round-trip to their original names (the kinds the tag-blind attribute parser

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

@@ -0,0 +1,80 @@
+import type { TemplateNode } from './types/TemplateNode.ts'
+
+/* A control-flow block — `if`/`each`/`await`/`switch`/`try`. In a skeleton it mounts at an
+   `<!--a-->` anchor cloned into the located parent at the block's position (see
+   `anchorCursor`), so a block can sit ANYWHERE among static siblings — no contiguity or
+   prefix-shape constraint. */
+function isControlFlow(node: TemplateNode): boolean {
+    return (
+        node.kind === 'if' ||
+        node.kind === 'each' ||
+        node.kind === 'await' ||
+        node.kind === 'switch' ||
+        node.kind === 'try'
+    )
+}
+
+/* Whether a subtree is skeleton STRUCTURE — anything the parser-backed clone can carry with
+   its holes mounted in place: elements, `<style>`, text (static OR reactive), child
+   components (their wrapper element is positioned in the skeleton), control-flow blocks and
+   `<slot>` outlets (each anchor-mounted at its position), and emit-nothing nodes — a nested
+   `<script>` (a scoped reactive block) and a `<template name>` snippet (a hoisted builder),
+   both of which the skeleton's bind list runs in document order, scoped like
+   `generateElement` does. Only a standalone `branch`/`case` (consumed by its block, never a
+   loose child) disqualifies. */
+function skeletonStructure(node: TemplateNode): boolean {
+    if (isControlFlow(node) || node.kind === 'component') {
+        return true
+    }
+    if (node.kind === 'style' || node.kind === 'text') {
+        return true
+    }
+    if (node.kind === 'script' || node.kind === 'snippet') {
+        return true
+    }
+    if (node.kind !== 'element') {
+        return false // standalone branch|case
+    }
+    if (node.tag === 'slot') {
+        return true
+    }
+    return node.children.every(skeletonStructure)
+}
+
+/* Whether a subtree carries at least one hole — anything needing a runtime bind rather than
+   constant markup: a reactive attribute/listener/bind on an element, a reactive text part, a
+   control-flow block, a `<slot>` outlet, a child component (each needs a located node or an
+   anchor), or a nested `<script>`/snippet (emits no markup but must run). */
+function hasHole(node: TemplateNode): boolean {
+    if (isControlFlow(node) || node.kind === 'component') {
+        return true
+    }
+    if (node.kind === 'script' || node.kind === 'snippet') {
+        return true
+    }
+    if (node.kind === 'text') {
+        return node.parts.some((part) => part.kind !== 'static')
+    }
+    if (node.kind === 'element') {
+        if (node.tag === 'slot') {
+            return true
+        }
+        return node.attrs.some((attr) => attr.kind !== 'static') || node.children.some(hasHole)
+    }
+    return false
+}
+
+/*
+A subtree of skeleton structure carrying one or more holes. It builds through the
+parser-backed `skeleton` (one clone, correct foreign namespaces) — element holes located by
+element-only path, anchor holes (reactive text interleaved with elements, control flow,
+slots) by document-order scan — instead of the imperative path. A bound element's reactive
+attributes wire to the located node; a text-leaf element's reactive text binds via
+`appendText` on it (marker-free, so SSR === client). Fully-static subtrees (no hole) stay on
+`cloneStatic`.
+*/
+export function skeletonable(node: TemplateNode): boolean {
+    return (
+        node.kind === 'element' && node.tag !== 'slot' && skeletonStructure(node) && hasHole(node)
+    )
+}

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

@@ -0,0 +1,6 @@
+/*
+The MathML foreign-content namespace — the `<math>` counterpart to `SVG_NAMESPACE`.
+The imperative build reads it to namespace MathML elements the static `skeleton` path
+doesn't cover.
+*/
+export const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML'

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

@@ -0,0 +1,7 @@
+/*
+The SVG foreign-content namespace. An element created in it (or cloned from a
+parser-built `<svg>` subtree) renders as SVG; the same tag in the HTML namespace
+renders as nothing. The imperative build reads it to namespace foreign elements that
+the static `skeleton` path doesn't cover (a foreign parent with dynamic children).
+*/
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'

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

@@ -0,0 +1,24 @@
+import { RENDER } from '../runtime/RENDER.ts'
+
+/*
+Positions a skeleton-anchored control-flow block or slot. The anchor (`<!--a-->`) sits
+just before the block's range in BOTH the cloned skeleton and the server DOM, so it marks
+the block's position independently of how wide the surrounding values or earlier blocks
+render — the wall element-count positioning hits once block content varies in element
+count.
+
+Returns the CREATE insertion reference (the node right after the anchor), so the block's
+range lands at the anchor's position rather than the parent's end. On hydrate it also parks
+the parent's claim cursor there, so the block claims its own server range in place (the
+block ignores the returned reference on hydrate). `parentNode` is the located element the
+anchor was cloned into.
+*/
+// @readme plumbing
+export function anchorCursor(anchor: Node): Node | null {
+    const reference = anchor.nextSibling
+    const hydration = RENDER.hydration
+    if (hydration !== undefined) {
+        hydration.next.set(anchor.parentNode as Node, reference)
+    }
+    return reference
+}

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

@@ -10,7 +10,7 @@ component scope (so they tear down with it). The body's reactive reads update
 fine-grained via those effects; an enclosing `each` re-mounts on list changes.
 
 On hydrate the builder runs against the server-rendered nodes between the
-`<!--abide:snippet-->`/`<!--/abide:snippet-->` markers — its `openChild`/`appendText`
+`<!--abide:snippet-->`/`<!--/abide:snippet-->` markers — its `skeleton`/`appendText`
 claim them in place. The cursor is advanced past the open marker before, and past
 the close marker after, so the markers themselves are skipped.
 */

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

@@ -0,0 +1,70 @@
+import { rawHtmlString } from '../../shared/html.ts'
+import { snippetPayload } from '../../shared/snippet.ts'
+import { effect } from '../effect.ts'
+import { RENDER } from '../runtime/RENDER.ts'
+import { appendSnippet } from './appendSnippet.ts'
+import { appendText } from './appendText.ts'
+
+/*
+A reactive `{expr}` interpolation mounted at a skeleton anchor comment (`<!--a-->`), used
+for reactive text INTERLEAVED with element siblings (where element-only positioning can't
+reach it). The anchor is located by `skeleton`'s scan, and content mounts immediately
+after it. Handles the same three value kinds as `appendText` — escaped text, a
+`{snippet(args)}` builder, and `html\`\``-branded raw markup — since the kind is only
+known at runtime.
+
+The anchor is KEPT (in both the SSR markup and the client DOM, like control flow's
+`<!--[-->` range markers), so server and client render identical markup — `appendTextAt`
+never strips it.
+
+Hydrate delegates to `appendText` with the cursor temporarily pointed at the anchor's
+content (the server rendered `<!--a-->value`, so the value is the anchor's next sibling),
+reusing its text-split / snippet / raw-html claiming.
+*/
+// @readme plumbing
+export function appendTextAt(anchor: Node, read: () => unknown): void {
+    const parent = anchor.parentNode as Node
+    if (RENDER.hydration !== undefined) {
+        const hydration = RENDER.hydration
+        const had = hydration.next.has(parent)
+        const saved = hydration.next.get(parent)
+        hydration.next.set(parent, anchor.nextSibling)
+        appendText(parent, read)
+        if (had) {
+            hydration.next.set(parent, saved ?? null)
+        } else {
+            hydration.next.delete(parent)
+        }
+        return
+    }
+
+    const first = read()
+    if (typeof snippetPayload(first) === 'function') {
+        const fragment = document.createDocumentFragment()
+        appendSnippet(fragment, read)
+        parent.insertBefore(fragment, anchor.nextSibling)
+        return
+    }
+    if (rawHtmlString(first) !== undefined) {
+        let nodes: Node[] = []
+        effect(() => {
+            for (const node of nodes) {
+                parent.removeChild(node)
+            }
+            const holder = document.createElement('div')
+            holder.innerHTML = rawHtmlString(read()) ?? ''
+            nodes = [...holder.childNodes]
+            /* Insert the fresh markup just after the anchor (its live re-insertion point). */
+            const after = anchor.nextSibling
+            for (const node of nodes) {
+                parent.insertBefore(node, after)
+            }
+        })
+        return
+    }
+    const node = document.createTextNode('')
+    parent.insertBefore(node, anchor.nextSibling)
+    effect(() => {
+        node.data = String(read())
+    })
+}

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

@@ -4,6 +4,7 @@ import { RENDER } from '../runtime/RENDER.ts'
 import { RESUME } from '../runtime/RESUME.ts'
 import { scope } from '../runtime/scope.ts'
 import { discardBoundary } from './discardBoundary.ts'
+import { enterNamespace } from './enterNamespace.ts'
 
 /*
 Async binding — the runtime for `<template await>`. Renders the pending branch,
@@ -34,6 +35,10 @@ export function awaitBlock(
     /* Absent when the block has no catch branch — a rejection then surfaces (re-throws
        to the unhandled-rejection path) instead of rendering an empty branch. */
     renderCatch: ((parent: Node, error: unknown) => void) | undefined,
+    /* A static node located by the skeleton: the block's anchor inserts before it on
+       create (block before a static suffix). Null appends (tail). insertBefore(x, null)
+       === appendChild, so the default is the prior behaviour. */
+    before: Node | null = null,
 ): void {
     const hydration = RENDER.hydration
     let active: { nodes: Node[]; dispose: () => void } | undefined
@@ -62,7 +67,9 @@ export function awaitBlock(
     const place = (build: (parent: Node) => void): void => {
         detach()
         const fragment = document.createDocumentFragment()
-        const dispose = scope(() => build(fragment))
+        const dispose = enterNamespace(anchor?.parentNode ?? parent, () =>
+            scope(() => build(fragment)),
+        )
         const nodes = [...fragment.childNodes]
         ;(anchor?.parentNode ?? parent).insertBefore(fragment, anchor ?? null)
         active = { nodes, dispose }
@@ -122,14 +129,17 @@ export function awaitBlock(
        (hydration off) — the recovery path when adoption can't use the server markup. */
     const rebuildCold = (open: Node | null): void => {
         detach()
-        discardBoundary(
+        /* Insert at the node AFTER the discarded boundary (its return) — NOT the captured
+           `before`, which for a skeleton-anchored block is the open boundary itself and is
+           removed here, so reusing it throws `NotFoundError` in a strict DOM. */
+        const after = discardBoundary(
             parent,
             open,
             `/abide:await:${id}`,
             hydration as NonNullable<typeof hydration>,
         )
         anchor = document.createTextNode('')
-        parent.appendChild(anchor)
+        parent.insertBefore(anchor, after)
         const previous = RENDER.hydration
         RENDER.hydration = undefined
         try {
@@ -174,10 +184,20 @@ export function awaitBlock(
             }
             return
         }
-        discardBoundary(parent, open, `/abide:await:${id}`, cursor)
+        /* Insert at the node after the discarded boundary (see `rebuildCold`). */
+        const after = discardBoundary(parent, open, `/abide:await:${id}`, cursor)
         anchor = document.createTextNode('')
-        parent.appendChild(anchor)
-        render(result)
+        parent.insertBefore(anchor, after)
+        /* The boundary's server nodes are gone, so the pending branch builds FRESH — clear
+           the claim cursor (mirrors `rebuildCold`) so its `cloneStatic`/text don't try to
+           claim discarded nodes and silently render nothing. */
+        const previous = RENDER.hydration
+        RENDER.hydration = undefined
+        try {
+            render(result)
+        } finally {
+            RENDER.hydration = previous
+        }
     }
 
     effect(() => {
@@ -195,7 +215,7 @@ export function awaitBlock(
                 return
             }
             anchor = document.createTextNode('')
-            parent.appendChild(anchor)
+            parent.insertBefore(anchor, before)
         }
         render(result)
     })

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

@@ -1,29 +1,14 @@
 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 { foreignWrapperTag } from './foreignWrapperTag.ts'
+import { templateFor } from './templateFor.ts'
 
 /*
 Appends a fully-static subtree (one or more top-level nodes) under `parent` — what
-the compiler emits in place of the imperative `openChild`/`setAttribute`/
-`appendStatic` chain when an element subtree carries no bindings, control flow, or
-listeners. The skeleton string is generated by the same rules as the SSR back-end,
-so it is byte-identical to the server markup.
+the compiler emits for an element subtree that carries no bindings, control flow, or
+listeners (its bound sibling, `skeleton`, carries the same clone plus located holes).
+The skeleton string is generated by the same rules as the SSR back-end, so it is
+byte-identical to the server markup.
 
 Create mode: clone the cached template once per mount — a single deep clone (native
 in the browser) instead of N create/append calls. Hydrate mode: nothing is built;
@@ -34,11 +19,17 @@ the same top-level node count as the server markup.
 */
 // @readme plumbing
 export function cloneStatic(parent: Node, html: string): void {
-    const template = templateFor(html)
+    /* When `parent` is a foreign element built imperatively, the run's markup has no
+       foreign ancestor of its own, so a bare `<path>` would parse into the HTML
+       namespace. Parse it inside a matching `<svg>`/`<math>` wrapper and clone the
+       wrapper's children — the parser namespaces them correctly. */
+    const wrapper = foreignWrapperTag(parent)
+    const template = templateFor(wrapper === undefined ? html : `<${wrapper}>${html}</${wrapper}>`)
+    const source = wrapper === undefined ? template.content : (template.content.firstChild as Node)
     const hydration = RENDER.hydration
     if (hydration !== undefined) {
         let node = claimChild(hydration, parent)
-        let remaining = template.content.childNodes.length
+        let remaining = source.childNodes.length
         while (remaining > 0 && node !== null) {
             node = node.nextSibling
             remaining -= 1
@@ -46,7 +37,7 @@ export function cloneStatic(parent: Node, html: string): void {
         hydration.next.set(parent, node)
         return
     }
-    for (const child of template.content.childNodes) {
+    for (const child of source.childNodes) {
         parent.appendChild(child.cloneNode(true))
     }
 }