@abide/abide 0.49.0 → 0.50.1

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

@@ -9,6 +9,7 @@ import { composeProps } from './composeProps.ts'
 import { eachPlan } from './eachPlan.ts'
 import { elementPlan } from './elementPlan.ts'
 import { groupBindParts } from './groupBindParts.ts'
+import { hoistableChildRenders } from './hoistableChildRenders.ts'
 import { ifPlan } from './ifPlan.ts'
 import { interpolatedTemplateLiteral } from './interpolatedTemplateLiteral.ts'
 import { isControlFlow } from './isControlFlow.ts'
@@ -74,8 +75,19 @@ export function generateBuild(
     derivedNames: ReadonlySet<string>,
     computedNames: ReadonlySet<string>,
     isLayout = false,
+    /* `linked` / async `computed` names, lowered to `$$readCell(name)` in template exprs. */
+    cellReadNames: ReadonlySet<string> = new Set(),
 ): string {
     const nextVar = makeVarNamer()
+    /* A per-body source-order ordinal for each `<Child/>` mount site, so two same-type siblings
+       get distinct render-path segments. Combined with the ambient branch/row path a control-flow
+       ancestor pushes, this makes every mounted instance's id unique and stable (ADR render-path
+       identity). Drawn in document-order walk, matching the SSR back-end's identical walk. */
+    let childOrdinal = 0
+    /* ADR-0039: the SAME hoistable-child set the SSR back-end computes (identical inputs → identical
+       node identities), so the client emits the dual-mode `$$mountStreamedChild` for exactly the
+       children the server may stream. A non-hoistable child keeps the plain `$$mountChild`. */
+    const streamCapable = hoistableChildRenders(nodes, cellReadNames)
 
     /* In a layout, `<slot/>` outlets are rewritten to `OUTLET_TAG` elements up front
        (`asOutlet`) so the static-clone path carries them as ordinary structure. `asOutlet`
@@ -109,7 +121,7 @@ export function generateBuild(
         withShadow,
         bindRead,
         bindWrite,
-    } = lowerContext(stateNames, derivedNames, computedNames)
+    } = lowerContext(stateNames, derivedNames, computedNames, cellReadNames)
 
     /* Maps a plan `Binding`'s classification to the client `ShadowKind`: a `reactive` value
        derefs as a `.value` cell (`derived`), a `plain` value as the bare local (`plain`). The
@@ -544,6 +556,12 @@ export function generateBuild(
                 return `{ match: ${match}, render: ${branchThunk(branch.children)} }`
             })
             .join(', ')
+        /* A bare async subject holds the whole switch while the cell is pending — no case, not
+           even the default — then matches on the settled value's peek. */
+        if (node.asyncSubject === true) {
+            const cell = node.subject.trim()
+            return `$$switchBlock(${parentVar}, () => $$readCell(${cell}), [${cases}], ${before}, () => $$cellPending(${cell}));\n`
+        }
         return `$$switchBlock(${parentVar}, () => (${lowerExpression(node.subject)}), [${cases}], ${before});\n`
     }
 
@@ -575,15 +593,14 @@ export function generateBuild(
     /* The props bag a child mount receives — composed by the shared `composeProps` so the
        build and SSR back-ends emit the same last-wins layering. */
     function propsArg(node: Extract<TemplateNode, { kind: 'component' }>): string {
-        return composeProps(node.props, lowerExpression, slotPart(node))
+        return composeProps(node.props, lowerExpression, slotPart(node), bindRead, bindWrite)
     }
 
     /* Mounts a child component as a marker-bounded range on `parentVar`, positioned at
        `before` (a skeleton anchor's `anchorCursor`, or `null` for a standalone child).
        `mountRange` opens the `[`/`]` markers and builds the child between them — no
        wrapper element — so the child's root is a true direct child of `parentVar`.
-       Hydration stays ambient, so the child claims its server range in place. The
-       component name passes as the scope label (the inspector's `<Counter>` name). */
+       Hydration stays ambient, so the child claims its server range in place. */
     function generateChildComponent(
         node: Extract<TemplateNode, { kind: 'component' }>,
         parentVar: string,
@@ -595,7 +612,11 @@ export function generateBuild(
            cell, so `<Icon>` from `{#for {icon: Icon} of …}` mounts the component the cell
            holds, not the cell object (whose `.build` is undefined → `build is not a
            function`). SSR emits the same lowering for congruence. */
-        return `$$mountChild(${parentVar}, ${lowerExpression(node.name)}, ${propsArg(node)}, ${before}, ${JSON.stringify(node.name)});\n`
+        /* A hoistable child may have STREAMED (server chose per-render): emit the dual-mode adopter,
+           which probes the cursor to adopt an inlined `[ … ]` range OR a streamed `abide:await`
+           boundary (ADR-0039). Same args as mountChild. */
+        const mountFn = streamCapable.has(node) ? '$$mountStreamedChild' : '$$mountChild'
+        return `${mountFn}(${parentVar}, ${lowerExpression(node.name)}, ${propsArg(node)}, ${before}, ${childOrdinal++});\n`
     }
 
     /* An await block: pending → resolved(value) / error branches. Each branch is a
@@ -717,16 +738,35 @@ export function generateBuild(
             const thenThunk = branchThunk(plan.thenChildren)
             const elseThunk =
                 plan.elseBranch === undefined ? 'undefined' : branchThunk(plan.elseBranch.children)
+            /* A bare async subject (`{#if getX()}`) passes `when` a pending probe so a
+               still-loading cell renders NO branch; the condition itself is the plain peek read
+               (`$$readCell`), evaluated only once no longer pending. */
+            if (node.asyncSubject === true) {
+                const cell = node.condition.trim()
+                return `$$when(${parentVar}, () => $$readCell(${cell}), ${thenThunk}, ${elseThunk}, ${before}, () => $$cellPending(${cell}));\n`
+            }
             return `$$when(${parentVar}, () => (${lowerExpression(node.condition)}), ${thenThunk}, ${elseThunk}, ${before});\n`
         }
         /* if/elseif/else is a cond-chain — reuse `switchBlock` over a constant `true`
            subject with `Boolean`-coerced match thunks, so the first truthy branch wins
-           (`else` is the match-less default). */
+           (`else` is the match-less default). A branch whose own condition is a bare async
+           subject carries a `pending` probe: `switchBlock` holds the chain there while it loads,
+           so sync and async branches interleave and each resolves at render time — a pending
+           async branch never lets a later branch render on its not-yet-known condition. */
+        const condEntry = (
+            condition: string,
+            asyncSubject: boolean | undefined,
+            children: TemplateNode[],
+        ): string => {
+            const pending =
+                asyncSubject === true ? `, pending: () => $$cellPending(${condition.trim()})` : ''
+            return `{ match: () => Boolean(${lowerExpression(condition)}), render: ${branchThunk(children)}${pending} }`
+        }
         const entries = [
-            `{ match: () => Boolean(${lowerExpression(node.condition)}), render: ${branchThunk(plan.thenChildren)} }`,
+            condEntry(node.condition, node.asyncSubject, plan.thenChildren),
             ...plan.branches.map((branch) =>
                 branch.condition !== undefined
-                    ? `{ match: () => Boolean(${lowerExpression(branch.condition)}), render: ${branchThunk(branch.children)} }`
+                    ? condEntry(branch.condition, branch.asyncSubject, branch.children)
                     : `{ match: undefined, render: ${branchThunk(branch.children)} }`,
             ),
         ]
@@ -787,9 +827,12 @@ export function generateBuild(
         const catchArg = plan.async
             ? `, ${plan.hasCatch ? branchThunk(plan.catchChildren, plan.catchBindings) : 'undefined'}`
             : ''
+        /* Whether the each has an explicit `by` key — the row then keys its render-path segment
+           on the stable key rather than its position (see `each`/`eachAsync`). */
+        const keyed = plan.key !== undefined
         return (
             `${fn}(${parentVar}, () => (${lowerExpression(plan.items)}), ` +
-            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${itemWiring.param}${indexParam}) => {\n${itemWiring.prefix}${rowBody}}${catchArg}, ${before});\n`
+            `(${keyParam}) => (${keyExpression}), (${rowParam}, ${itemWiring.param}${indexParam}) => {\n${itemWiring.prefix}${rowBody}}${catchArg}, ${before}, ${keyed});\n`
         )
     }
 

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
@@ -266,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.
@@ -303,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)}`
         }
@@ -369,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') {
@@ -430,22 +567,54 @@ export function generateSSR(
                     : `"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) +
-                /* 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. */
-                `const ${result} = await ${lowerExpression(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` +
@@ -644,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, () =>
@@ -693,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`
@@ -713,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)
@@ -747,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 }
 }