@abide/abide 0.48.0 → 0.50.0

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

@@ -13,6 +13,8 @@ import { composeProps } from './composeProps.ts'
 import { eachPlan } from './eachPlan.ts'
 import { elementPlan } from './elementPlan.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { hoistableAwaits } from './hoistableAwaits.ts'
+import { hoistableChildRenders } from './hoistableChildRenders.ts'
 import { ifPlan } from './ifPlan.ts'
 import { interpolatedTemplateLiteral } from './interpolatedTemplateLiteral.ts'
 import { isAnchorPositioned } from './isAnchorPositioned.ts'
@@ -66,10 +68,16 @@ export function generateSSR(
     derivedNames: ReadonlySet<string>,
     computedNames: ReadonlySet<string>,
     isLayout = false,
-): string {
+    /* `linked` / async `computed` names, lowered to `$$readCell(name)` in template exprs. */
+    cellReadNames: ReadonlySet<string> = new Set(),
+): { body: string; flightDecls: string; hasStagedChildren: boolean } {
     /* Unique temp var names (child render results); runtime block ids are
        allocated separately at runtime via `$ctx.next++`. */
     const nextVar = makeVarNamer()
+    /* A per-body source-order ordinal for each `<Child/>` render site — the render-path segment the
+       child roots under, matching the client `mountChild`'s `childOrdinal` (`generateBuild`) drawn
+       in the identical document-order walk, so both compose the same cell scope ids. */
+    let childOrdinal = 0
 
     /* The enclosing `<select bind:value>`s, innermost last: each carries the JS var holding
        its bound value and whether it's a `multiple` (array) select, so an `<option>` rendered
@@ -84,7 +92,8 @@ export function generateSSR(
         withNestedScripts,
         withShadow,
         bindRead,
-    } = lowerContext(stateNames, derivedNames, computedNames)
+        bindWrite,
+    } = lowerContext(stateNames, derivedNames, computedNames, cellReadNames)
 
     /* SSR has no cells, so every plan `Binding` — `reactive` or `plain` — renders as a `plain`
        shadow (a real JS local / loop var / arrow param, read as the bare identifier). The one
@@ -150,6 +159,28 @@ export function generateSSR(
        through the generic element path exactly as the client clones it. */
     const rootNodes = isLayout ? nodes.map(asOutlet) : nodes
 
+    /* ADR-0034: the await blocks whose promise-start hoists to the synchronous render prefix so
+       independent flights overlap instead of serializing. Server-only — this rewires only the SSR
+       promise SOURCE (a blocking `await $flightN`, a streaming `promise: () => $flightN`); the
+       block's markers, `$ctx.next++` id, RESUME wire, and the whole client build stay byte-identical.
+       The `flightDecls` are emitted by compileSSR after the lowered script and BEFORE the barrier, so
+       a hoisted flight is already in-flight while the barrier awaits any unrelated blocking cell. */
+    const flightNameByNode = new Map<Extract<TemplateNode, { kind: 'await' }>, string>()
+    for (const flight of hoistableAwaits(rootNodes, cellReadNames)) {
+        flightNameByNode.set(flight.node, flight.name)
+    }
+
+    /* ADR-0037 Phase 2: the top-level-spine `<Child/>` renders whose start hoists to the prefix so
+       sibling renders overlap instead of serializing behind each other's `await`. The component walk
+       below emits each hoisted child's flight decl into `childFlightDecls` (with its childOrdinal and
+       lowered props computed at the SAME site as the body's `await`, so the two can't drift) and
+       awaits the flight const at the structural position. Each hoisted render starts under
+       `$$isolateCellBarrier` so its async cells drain in their own list, not a concurrent sibling's
+       (the request-scoped barrier is `splice(0)`-drained). */
+    const hoistableChildSet = hoistableChildRenders(rootNodes, cellReadNames)
+    const childFlightDecls: string[] = []
+    let childFlightCounter = 0
+
     /* A snippet name (any identifier, `$` included) interpolated into a RegExp must have its
        regex metacharacters escaped, or e.g. a trailing `$` would read as an end-anchor and the
        call site would never match — leaving an un-awaited Promise stringified as `[object
@@ -184,15 +215,17 @@ export function generateSSR(
         })
 
     /* Snippet names whose body produces an `await`, so the snippet must be an `async function`
-       and its `{name(...)}` call sites awaited: it inlines a child component / holds an await
-       block (a structural scan), OR it text-calls another async snippet. The latter is a
-       dependency between snippets, so resolve it to a fixpoint — seed with the structural set,
-       then keep adding any snippet that calls an already-async one until nothing changes. */
+       and its `{name(...)}` call sites awaited: it inlines a child component, holds an await
+       block, or emits a `{children()}` slot fill (all `await $props.$children()` in SSR) — a
+       structural scan — OR it text-calls another async snippet. The latter is a dependency
+       between snippets, so resolve it to a fixpoint — seed with the structural set, then keep
+       adding any snippet that calls an already-async one until nothing changes. */
     const subtreeAwaits = (children: TemplateNode[]): boolean =>
         children.some(
             (child) =>
                 child.kind === 'component' ||
                 child.kind === 'await' ||
+                (child.kind === 'element' && child.tag === 'slot') ||
                 ('children' in child && subtreeAwaits(child.children)),
         )
     const snippetDefs = new Map<string, TemplateNode[]>()
@@ -223,14 +256,20 @@ export function generateSSR(
             }
         }
     }
-    /* A text-part expression that calls an async snippet, so its value is `await`ed before
-       `$text`. */
-    const callsAsyncSnippet = (code: string): boolean => {
-        // The common no-async-snippet component pays zero regex work per text part.
-        if (asyncSnippets.size === 0) {
+    /* A text-part expression whose value may be a Promise, so `$text` must `await` it:
+       either it calls an async snippet declared HERE, or it CALLS a computed-backed
+       binding. The latter covers a snippet handed down as a prop and called by its prop
+       name (`{item(label)}`) — that prop lowers to a computed, so it never appears in this
+       component's own `asyncSnippets`, yet the parent's snippet body may be async and the
+       call returns a Promise (the `[object Promise]` bug). A computed READ (`{full}`) is not
+       a call, so plain interpolation stays sync; only `name(...)` on a computed is awaited. */
+    const awaitableCallNames = new Set<string>([...asyncSnippets, ...computedNames])
+    const callsAwaitable = (code: string): boolean => {
+        // The common component with no async snippet and no computed pays zero regex work.
+        if (awaitableCallNames.size === 0) {
             return false
         }
-        for (const name of asyncSnippets) {
+        for (const name of awaitableCallNames) {
             if (callPattern(name).test(code)) {
                 return true
             }
@@ -258,6 +297,26 @@ export function generateSSR(
     const openRange = (target: string): string => push(target, RANGE_OPEN)
     const closeRange = (target: string): string => push(target, RANGE_CLOSE)
 
+    /* Wrap a control-flow branch/row body in the render-path segment the CLIENT pushes for it (the
+       `withPathFrom`/`withPath` call the `each`/`when`/`switchBlock` dom runtimes make), so a scope
+       created inside — a nested `<Child/>`, always an inline `await` in SSR — composes the SAME
+       serialization-stable id on both sides (the warm-seed key). Emitted ONLY when the subtree can
+       create such a scope: a component render is the sole scope-creating construct in a branch/row
+       and always lowers to an inline `await`, so `subtreeAwaits` is the gate. A purely-synchronous
+       branch creates no scope, so its segment is inert — skipping the wrap keeps the static render
+       synchronous (no per-row closure/await, matching today's output byte-for-byte). `segment` is a
+       JS expression (a literal branch key, or the each row's key/index); `$$withPath` escapes it,
+       exactly like the client. The row/branch RANGE markers stay OUTSIDE this call (they create no
+       scope), so only the content composes the path — mirroring the client, where the markers are
+       built outside `withPathFrom`. */
+    const withPathBranch = (segment: string, children: TemplateNode[], target: string): string => {
+        const content = branchContent(children, target)
+        if (!subtreeAwaits(children)) {
+            return content
+        }
+        return `await $$withPath(${segment}, async () => {\n${content}});\n`
+    }
+
     /* 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.
@@ -285,7 +344,7 @@ export function generateSSR(
                        Plain expressions stay sync, so a component with only interpolation keeps a
                        sync render. */
                     const lowered = lowerExpression(part.code)
-                    const value = callsAsyncSnippet(part.code)
+                    const value = callsAwaitable(part.code)
                         ? `$text(await (${lowered}))`
                         : `$text(${lowered})`
                     return markText.get(node)
@@ -295,31 +354,98 @@ export function generateSSR(
                 .join('')
         }
         if (node.kind === 'if') {
-            /* `case` children are the `elseif`/`else` branches in source order; the rest are
-               the `then` content. Each `elseif` becomes an `else if`, the match-less `else`
-               the trailing `else`. */
+            /* `case` children are the `elseif`/`else` branches in source order; the rest are the
+               `then` content. The whole `if`/`elseif`/`else` chain desugars to a run of `if` /
+               `else if` clauses. A branch whose condition is a bare async subject contributes TWO
+               clauses in order — an empty `$$cellPending` guard (renders nothing, and stops the
+               chain: a still-loading branch holds, so nothing later renders on its unknown value)
+               then the `$$readCell` truthy test — so sync and async branches interleave and each
+               resolves at render time, mirroring the client `switchBlock` cond-chain. */
             const plan = ifPlan(node)
-            let code = `if (${lowerExpression(node.condition)}) {\n${branchContent(plan.thenChildren, target)}}`
-            for (const branch of plan.branches) {
-                code +=
-                    branch.condition !== undefined
-                        ? ` else if (${lowerExpression(branch.condition)}) {\n${branchContent(branch.children, target)}}`
-                        : ` else {\n${branchContent(branch.children, target)}}`
+            /* The client build lowers a simple `if`/`else` through `when` (branch keys `'then'` /
+               `'else'`) and an `if` with any `elseif` through `switchBlock` over `[then, ...branches]`
+               (branch key = the case's array index). Mirror whichever the client picks so a nested
+               `<Child/>`'s scope id composes identically. */
+            const clauses: string[] = []
+            const conditional = (
+                condition: string,
+                asyncSubject: boolean | undefined,
+                children: TemplateNode[],
+                segment: string,
+            ): void => {
+                if (asyncSubject === true) {
+                    const cell = condition.trim()
+                    clauses.push(`($$cellPending(${cell})) {\n}`)
+                    clauses.push(
+                        `($$readCell(${cell})) {\n${withPathBranch(segment, children, target)}}`,
+                    )
+                } else {
+                    clauses.push(
+                        `(${lowerExpression(condition)}) {\n${withPathBranch(segment, children, target)}}`,
+                    )
+                }
+            }
+            /* `then` is the `when` `'then'` branch, or the `switchBlock` case at index 0. */
+            conditional(
+                node.condition,
+                node.asyncSubject,
+                plan.thenChildren,
+                JSON.stringify(plan.hasElseif ? '0' : 'then'),
+            )
+            for (let index = 0; index < plan.branches.length; index += 1) {
+                const branch = plan.branches[index] as Extract<TemplateNode, { kind: 'case' }>
+                if (branch.condition !== undefined) {
+                    /* An `elseif` is the `switchBlock` case at `[then, ...branches]` index `index + 1`
+                       (a chain with any condition always lowers to `switchBlock`). */
+                    conditional(
+                        branch.condition,
+                        branch.asyncSubject,
+                        branch.children,
+                        JSON.stringify(String(index + 1)),
+                    )
+                }
+            }
+            let code = clauses
+                .map((clause, index) => `${index === 0 ? 'if' : ' else if'} ${clause}`)
+                .join('')
+            if (plan.elseBranch !== undefined) {
+                /* `else` is the `when` `'else'` branch, or (for a cond-chain) the `switchBlock`
+                   default at its own `[then, ...branches]` index. */
+                const elseSegment = plan.hasElseif
+                    ? String(plan.branches.indexOf(plan.elseBranch) + 1)
+                    : 'else'
+                code += ` else {\n${withPathBranch(JSON.stringify(elseSegment), plan.elseBranch.children, target)}}`
             }
             return `${anchor}${openRange(target)}${code}\n${closeRange(target)}`
         }
         if (node.kind === 'switch') {
             const plan = switchPlan(node)
-            let code = `{ const $s = (${lowerExpression(node.subject)});\n`
+            /* A bare async subject: read the peek, but only match once the cell has settled —
+               a pending subject renders no case (matching the client's `switchBlock`). */
+            const subjectExpr =
+                node.asyncSubject === true
+                    ? `$$readCell(${node.subject.trim()})`
+                    : `(${lowerExpression(node.subject)})`
+            let code = `{ const $s = ${subjectExpr};\n`
+            if (node.asyncSubject === true) {
+                code += `if (!$$cellPending(${node.subject.trim()})) {\n`
+            }
             let started = false
-            for (const branch of plan.cases) {
+            /* The client `switchBlock` keys each branch by its index in `plan.cases` (source order,
+               the default at its own position); mirror that index so a nested `<Child/>` matches. */
+            for (let index = 0; index < plan.cases.length; index += 1) {
+                const branch = plan.cases[index] as Extract<TemplateNode, { kind: 'case' }>
                 if (branch.match !== undefined) {
-                    code += `${started ? 'else ' : ''}if ($s === (${lowerExpression(branch.match)})) {\n${branchContent(branch.children, target)}}\n`
+                    code += `${started ? 'else ' : ''}if ($s === (${lowerExpression(branch.match)})) {\n${withPathBranch(JSON.stringify(String(index)), branch.children, target)}}\n`
                     started = true
                 }
             }
             if (plan.fallback !== undefined) {
-                code += `${started ? 'else ' : ''}{\n${branchContent(plan.fallback.children, target)}}\n`
+                const fallbackSegment = String(plan.cases.indexOf(plan.fallback))
+                code += `${started ? 'else ' : ''}{\n${withPathBranch(JSON.stringify(fallbackSegment), plan.fallback.children, target)}}\n`
+            }
+            if (node.asyncSubject === true) {
+                code += `}\n`
             }
             return `${anchor}${openRange(target)}${code}}\n${closeRange(target)}`
         }
@@ -361,26 +487,45 @@ export function generateSSR(
             if (plan.async) {
                 return anchor
             }
+            /* The client `each` pushes a render-path segment per row (keyed → the `by` key evaluated
+               on the raw item, exactly like its `keyOf`; keyless → the row position), so a nested
+               `<Child/>`'s scope id composes identically. Mirror it only when the row can create a
+               scope (`subtreeAwaits` — it holds a component); a static row needs no segment and stays
+               synchronous. A keyless row that needs its position reuses a bound `index`, else a
+               synthesized loop index — the same 0-based `entries()` position the client's row cell
+               carries, so the segments agree. */
+            const rowSegments = subtreeAwaits(plan.children)
+            const keylessIndex =
+                plan.key === undefined && plan.index === undefined && rowSegments
+                    ? nextVar('$i')
+                    : undefined
+            const indexBinding = plan.index ?? keylessIndex
             /* The row item (and index) are real `for`-loop locals, so the body must lower
                references to them as the bare identifier — `withBindings` registers the plan's
                row bindings (under `plain`, SSR's only kind) so a row binding that shadows a
                same-named component signal reads the loop value, not the (whole-list) signal it
                shadows. The names come straight from `plan.bindings` (the single source the
                client also reads); the items expression stays outside the shadow. */
-            const rowBody = withBindings(
-                withShadow,
-                plan.bindings,
-                ssrBindingKind,
-                () =>
-                    `${openRange(target)}${branchContent(plan.children, target)}${closeRange(target)}`,
-            )
+            const rowBody = withBindings(withShadow, plan.bindings, ssrBindingKind, () => {
+                /* The row's render-path segment, lowered inside the row's plain shadow so a keyed
+                   `by` reads the raw loop item exactly like the client `keyOf` (a keyless row uses
+                   its position). Unused when `rowSegments` is false — `withPathBranch` then skips it. */
+                const segment =
+                    plan.key === undefined
+                        ? (indexBinding ?? '0')
+                        : `(${lowerExpression(plan.key)})`
+                return `${openRange(target)}${withPathBranch(segment, plan.children, target)}${closeRange(target)}`
+            })
             /* `index="i"` binds the row position. SSR reads it as a plain number from
                `entries()` over a materialized array; the client reads the same number from a
                cell, so first paint is congruent. No index → a plain `for…of` over the items. */
+            /* An undefined source renders no rows, not a throw — a `{#for x in promise}`
+               whose lifted source peeks undefined while pending (ADR-0032 D3). Mirrors the
+               client `each`'s undefined-as-empty guard. */
             const header =
-                plan.index === undefined
-                    ? `for (const ${plan.as} of (${lowerExpression(plan.items)}))`
-                    : `for (const [${plan.index}, ${plan.as}] of [...(${lowerExpression(plan.items)})].entries())`
+                indexBinding === undefined
+                    ? `for (const ${plan.as} of ((${lowerExpression(plan.items)}) ?? []))`
+                    : `for (const [${indexBinding}, ${plan.as}] of [...((${lowerExpression(plan.items)}) ?? [])].entries())`
             return `${anchor}${header} {\n${rowBody}}\n`
         }
         if (node.kind === 'await') {
@@ -396,7 +541,7 @@ export function generateSSR(
             /* Server-render the child via its `render` and inline the HTML inside the same
                `[ … ]` marker range the client mounts into (`mountRange`) — no wrapper element,
                so SSR and client agree and the child's root lays out as a direct child. Props
-               pass as thunks; slot content passes as a string-returning `$children` the child
+               pass as thunks; slot content passes as a string-returning `children` the child
                invokes from its <slot>. */
             /* Slot content is a fresh build context — the child's `<slot>` mounts it via
                `mountSlot`, not the parent skeleton clone, and the client builds it through
@@ -404,33 +549,72 @@ export function generateSSR(
                records it reset, so its children emit no enclosing-skeleton anchors the client
                slot builder would lack. */
             const slotCode = generateInto(node.children, '$slot')
-            /* `$children` is an ASYNC builder the child `await`s at its `<slot>` position
-               (`generateSlot`), NOT a pre-resolved string. Pre-resolving here would run the
-               slot's `$ctx.next++` block ids BEFORE the child render's own, but the client
-               builds slot content lazily at the `<slot>` site — so a child with an await/try
-               before its `<slot>` would allocate ids in the opposite order and desync hydration.
-               Keeping the slot lazy makes the slot's ids draw at the `<slot>` site on both
-               sides. The builder shares the enclosing render's `$ctx`/`$awaits`/`$resume` (a
-               closure), so nested awaits register and number correctly during the child render.
-               A child with a `<slot>` is therefore always an async render. */
+            /* Slot content rides the `children` prop key as a `Snippet`: a zero-arg callable
+               returning an ASYNC builder the child `await`s at its `{children()}` position
+               (`generateSlot`), whose resolved value is a `$snip`-branded string — so it renders
+               through the same `$text` snippet-marker path as any `{snippet(args)}` and unifies
+               with a passed `children={snippet}`. It is NOT pre-resolved: pre-resolving here would
+               run the slot's `$ctx.next++` block ids BEFORE the child render's own, but the client
+               builds slot content lazily at the `{children()}` site — so a child with an await/try
+               before its slot would allocate ids in the opposite order and desync hydration.
+               Keeping the slot lazy draws its ids at the `{children()}` site on both sides. The
+               builder shares the enclosing render's `$ctx`/`$awaits`/`$resume` (a closure), so
+               nested awaits register and number correctly during the child render. A child with a
+               slot fill is therefore always an async render. */
             const slotPart =
                 slotCode.trim() === ''
                     ? undefined
-                    : `"$children": async () => { const $slot = []; ${slotCode}return $slot.join(''); }`
+                    : `"children": () => (async () => { const $slot = []; ${slotCode}return $snip($slot.join('')); })`
             /* The same last-wins layering the client build emits (`composeProps`), so SSR
                and hydration read the same prop bag. */
-            const propsExpr = composeProps(node.props, lowerExpression, slotPart)
+            const propsExpr = composeProps(
+                node.props,
+                lowerExpression,
+                slotPart,
+                bindRead,
+                bindWrite,
+            )
             /* Render the child (awaited — render is async) sharing this render's `$ctx`,
                so its `await`/`try` block ids draw from the same depth-first counter,
                unique across page + children, and the streamed fragments resolve into the
                right boundaries. MERGE its streaming awaits into `$awaits` and its inline
                blocking values into `$resume`. ($awaits/$resume are captured from the
                enclosing render body, including from branch closures.) */
+            /* The tag lowers like any reference (see generateBuild): a static import is left bare, a
+               reactive/loop/await binding derefs — SSR registers such a binding as `plain`, so it
+               reads the bare local holding the resolved component, keeping SSR and client congruent.
+               Root the child's render-path at this mount site's source-order ordinal — the same
+               segment the client's `mountChild` pushes — so the child's cells and block ids (ADR-0037)
+               get an id matching the client's. `$$withPath` sets the path across the child's awaits. */
+            const ordinal = childOrdinal++
+            const renderExpr = `$$withPath(${ordinal}, () => ${lowerExpression(node.name)}.render(${propsExpr}, $ctx))`
+            if (hoistableChildSet.has(node)) {
+                /* Hoistable (ADR-0037/0039): start the render as an isolated flight in the prefix, and
+                   RESERVE its output position rather than awaiting inline. After the walk,
+                   `finalizeStreamedChildren` fills the slot — inline `<!--[-->html<!--]-->` if the
+                   flight already settled (byte-identical to the old inline await), or a streaming
+                   `abide:await:CHILDPATH` boundary + html-only await if it is still pending. The
+                   boundary id is the child's render-path (`$$renderPath(ordinal)`), congruent with the
+                   client's `mountStreamedChild`. */
+                const flightName = `$cf${childFlightCounter++}`
+                childFlightDecls.push(
+                    `const ${flightName} = $$flight(() => $$isolateCellBarrier(() => ${renderExpr}));`,
+                )
+                const slotVar = nextVar('$slot')
+                return (
+                    anchor +
+                    `${target}.push('');\n` +
+                    `const ${slotVar} = ${target}.length - 1;\n` +
+                    `$childSlots.push({ slot: ${slotVar}, out: ${target}, id: $$renderPath(${ordinal}), flight: ${flightName} });\n`
+                )
+            }
+            /* Non-hoistable child (off the top-level spine): await inline at its structural position,
+               sequential, as before — never streams. */
             const result = nextVar('$child')
             return (
                 anchor +
                 push(target, RANGE_OPEN) +
-                `const ${result} = await ${node.name}.render(${propsExpr}, $ctx);\n` +
+                `const ${result} = await ${renderExpr};\n` +
                 `${target}.push(${result}.html);\n` +
                 `for (const $a of ${result}.awaits) { $awaits.push($a); }\n` +
                 `Object.assign($resume, ${result}.resume);\n` +
@@ -572,26 +756,23 @@ export function generateSSR(
         return code
     }
 
-    /* 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 (`skeletonContext` records the
-       fallback children reset). */
+    /* A component `{children()}` fill point: render the `children` prop (a `Snippet`) as a
+       snippet text part. `children()()` reads the destructured `children` computed and calls
+       it → a Promise of a `$snip`-branded string; `await` it and push through `$text`, which
+       wraps the branded string in `<!--abide:snippet-->` markers — the same range the client's
+       appendText→appendSnippet emits and claims, so hydration stays congruent. Inside a skeleton
+       the slot is positioned by an `<!--a-->` anchor and bounded by a `[ … ]` range (matching the
+       client's `mountSlot`); outside one it emits just the snippet markers (matching the client's
+       direct `appendText`). The `await` makes a component with a slot an async render (its caller
+       already `await`s `render()`). A fallback is now an authored `{#if children}…{:else}…{/if}`,
+       so the slot node carries no children. */
     function generateSlot(
         node: Extract<TemplateNode, { kind: 'element' }>,
         target: string,
         anchor: string,
     ): string {
         const wrap = inSkeleton.get(node)
-        /* `$children` is an async builder the parent passes lazily; `await` it here so the
-           slot content's block ids allocate AT the slot position — the same order the
-           client builds slot content — keeping hydration congruent. The `await` makes a
-           component with a slot an async render (its caller already `await`s `render()`).
-           A fallback is now an authored `{#if children}…{:else}…{/if}`, so the slot node
-           carries no children. */
-        const body = `if ($props && $props.$children) { ${target}.push(await $props.$children()); }\n`
+        const body = `${target}.push($text(await (${lowerExpression('children()')})));\n`
         if (!wrap) {
             return body
         }
@@ -632,10 +813,13 @@ export function generateSSR(
            `withBindings` shadow models, so a reference to the binding reads the plain
            local rather than the (unresolved) component signal it shadows. */
         const resolved = nextVar('$av')
-        let code = `const ${id} = $ctx.next++;\n`
+        /* ADR-0034: a hoisted block awaits the prefix flight const (already in-flight); a
+           non-hoisted block evaluates + awaits its promise inline as before. */
+        const hoistedPromise = flightNameByNode.get(node)
+        let code = `const ${id} = $$blockId($ctx);\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += `try {\n`
-        code += `const ${resolved} = await (${lowerExpression(node.promise)});\n`
+        code += `const ${resolved} = await (${hoistedPromise ?? lowerExpression(node.promise)});\n`
         code += `{\n`
         code += `const ${plan.resolvedAs} = ${resolved};\n`
         code += withBindings(withShadow, plan.resolvedBindings, ssrBindingKind, () =>
@@ -681,7 +865,7 @@ export function generateSSR(
     ): string {
         const plan = awaitPlan(node)
         const id = nextVar('$aid')
-        let code = `const ${id} = $ctx.next++;\n`
+        let code = `const ${id} = $$blockId($ctx);\n`
         code += `${target}.push("<!--abide:await:" + ${id} + "-->");\n`
         code += branchContent(plan.pending, target)
         code += `${target}.push("<!--/abide:await:" + ${id} + "-->");\n`
@@ -701,26 +885,34 @@ export function generateSSR(
         const catchProp = plan.surfaceRejection
             ? ''
             : `catch: ${settled(plan.catchAs, plan.catchBindings, plan.catchChildren)} `
+        /* ADR-0034: a hoisted streaming block's thunk returns the prefix flight const (started
+           in the prefix, so it overlaps a preceding blocking await); non-hoisted evaluates lazily
+           at drain time as before. */
+        const hoistedPromise = flightNameByNode.get(node)
         code +=
             `$awaits.push({ id: ${id}, ` +
-            `promise: () => (${lowerExpression(node.promise)}), ` +
+            `promise: () => (${hoistedPromise ?? lowerExpression(node.promise)}), ` +
             `then: ${settled(plan.resolvedAs, plan.resolvedBindings, plan.resolvedChildren)}, ` +
             `${catchProp}});\n`
         return code
     }
 
-    /* A sync error boundary: push the guarded markup (++ finally) inside a real
-       try/catch; on a throw, truncate the output back to the boundary start and push
-       the catch markup (++ finally) instead — so even mid-stream a render throw
-       becomes catch markup, not a broken response. No catch re-throws (propagates to
-       an enclosing boundary / the 500 / the stream). Boundary comments let hydration
-       discard the server content if the client adoption fails. */
+    /* A reactive error boundary: push the guarded markup (++ finally) inside a real
+       try/catch; on a throw, truncate the output back to the range start and push the
+       catch markup (++ finally) instead — so even mid-stream a render throw becomes catch
+       markup, not a broken response. No catch re-throws (propagates to an enclosing boundary
+       / the 500 / the stream). The `abide:try:N` boundary comments let hydration discard the
+       server content if the client adoption fails; the inner `[ … ]` range markers are the
+       live range the render-many client (`tryBlock`) tracks — emitted here so a FRESH client
+       mount (which brackets its branch) and the SSR markup stay congruent. */
     function generateTry(node: Extract<TemplateNode, { kind: 'try' }>, target: string): string {
         const plan = tryPlan(node)
         const id = nextVar('$tid')
         const mark = nextVar('$trim')
-        let code = `const ${id} = $ctx.next++;\n`
+        let code = `const ${id} = $$blockId($ctx);\n`
         code += `${target}.push("<!--abide:try:" + ${id} + "-->");\n`
+        code += openRange(target)
+        /* Truncate back to just after the range-open marker on a catch, so `[` survives. */
         code += `const ${mark} = ${target}.length;\n`
         code += `try {\n`
         code += branchContent(plan.guarded, target)
@@ -735,9 +927,28 @@ export function generateSSR(
             code += `throw ${plan.catchAs};\n`
         }
         code += `}\n`
+        code += closeRange(target)
         code += `${target}.push("<!--/abide:try:" + ${id} + "-->");\n`
         return code
     }
 
-    return generateInto(rootNodes, '$out')
+    /* The body walk emits `await $flightN` / `promise: () => $flightN` for hoisted nodes; the
+       matching prefix declarations (lowered at component scope — hoisted promises reference only
+       component-scope names, never a branch shadow, so this lowering matches the body's) are
+       returned for compileSSR to place after the lowered script and before the barrier. */
+    const body = generateInto(rootNodes, '$out')
+    let flightDecls = ''
+    for (const [node, name] of flightNameByNode) {
+        flightDecls += `const ${name} = $$flight(() => (${lowerExpression(node.promise)}));\n`
+    }
+    /* Child-render flights emitted during the body walk above (ADR-0037 Phase 2) — appended after
+       the await flights; both are independent prefix promise-starts, so order between them is free. */
+    for (const decl of childFlightDecls) {
+        flightDecls += `${decl}\n`
+    }
+    /* `hasStagedChildren` tells compileSSR to declare `$childSlots` and emit the post-walk
+       `$$finalizeStreamedChildren` await (ADR-0039); a component with no hoistable child stays
+       synchronous. Each hoistable child pushed one `childFlightDecls` entry, so its length is the
+       staged-child count. */
+    return { body, flightDecls, hasStagedChildren: childFlightDecls.length > 0 }
 }