octane 0.6.2 → 0.7.0

package/dist/compiler/compile.js

@@ -51,6 +51,7 @@ import { decodeHTMLStrict } from 'entities';
 import { print as esrapPrint } from 'esrap';
 import esrapTsx from 'esrap/languages/tsx';
 import { buildFatSegments } from './fat-segments.js';
+import { markDeferredLive, markDeferredRead, snapshotDeferredReads } from './deferred-snapshots.js';
 import {
 	METHOD_DEP_IMPORT,
 	analyzeCallbackDependencies,
@@ -76,6 +77,12 @@ import {
 	UNIVERSAL_THREAD_RUNTIME_IMPORTS,
 } from './compile-universal.js';
 import { compileValdi, VALDI_COMPILER_RUNTIME_IMPORTS } from './compile-valdi.js';
+import {
+	ARM_BREAK_MESSAGE,
+	ARM_VALUE_RETURN_MESSAGE,
+	armJump,
+	assertTemplateJumps,
+} from './arm-exits.js';
 import { HOOK_NAMES, NATIVE_SIGNAL_HOOK_NAMES } from './hook-names.js';
 export { HOOK_NAMES } from './hook-names.js';
 import {
@@ -667,9 +674,14 @@ function directSignalSite(ctx, node, kind = 'binding') {
 }
 
 function componentInvocationSite(ctx, node) {
-	const position = node?.start ?? `${node?.loc?.start?.line ?? 0}:${node?.loc?.start?.column ?? 0}`;
 	// Authored positions identify call sites independently of the server/client
 	// helper names introduced for loops, branches, and value-position fragments.
+	// Hash line:col, not the parser offset: one call site in returned JSX reaches
+	// the client as the raw JSXElement but the server as a normalized template
+	// Element, and normalization keeps only `loc`.
+	const start = node?.loc?.start;
+	const position =
+		start != null ? `${start.line ?? 0}:${start.column ?? 0}` : (node?.start ?? '0:0');
 	return `c:${strongHash(
 		`octane:component-invocation-site:1\0${normalizeTextTypeFilename(ctx.filename) ?? ctx.filename}\0${position}`,
 	)}`;
@@ -1051,6 +1063,90 @@ function rejectTextareaValueChildren(tag, node, ctx) {
 	);
 }
 
+const TEXTAREA_CHILD_KINDS = {
+	Element: 'an element',
+	TSRXExpression: 'a JSX expression',
+	IfStatement: 'an `@if` block',
+	ForOfStatement: 'an `@for` block or a mapped JSX list',
+	SwitchStatement: 'an `@switch` block',
+	TryStatement: 'an `@try` block',
+};
+
+// A `<textarea>`'s content is RCDATA: the HTML parser keeps markup and comments
+// inside it as literal text, so neither the client template nor the server can
+// place a `<!>` placeholder, a `<!-- -->` separator or a `<!--[-->` frame there.
+// Its children are therefore text on both sides: they fold into ONE text value
+// that the client binds as the host's only Text node (runtime `textareaText`)
+// and the server serializes markerless (`ssrTextareaText`). Returns the parts in
+// source order, or null when the ordinary only-child path already emits
+// markerless text on both sides (one static literal or one proven text hole).
+// Throws for a child that cannot be text, on both emit paths.
+function textareaTextParts(tag, ns, children, ctx) {
+	if (tag !== 'textarea' || (ns !== 'html' && ns !== 'opaque') || children.length === 0) {
+		return null;
+	}
+	const parts = [];
+	for (const child of children) {
+		if (child.type !== 'Text') {
+			const element = child.type === 'HeadHoist' ? child.element : child;
+			const kind =
+				element.type === 'JSXElement' || (element.type === 'Element' && !isComponentTag(element))
+					? `\`<${jsxTagName(element) || elementTagName(element)}>\``
+					: (TEXTAREA_CHILD_KINDS[child.type] ?? 'a non-text child');
+			const l = (element.loc ?? child.expression?.loc)?.start;
+			const at = l
+				? ` (${ctx.mapSourceName ? ctx.mapSourceName + ':' : ''}${l.line}:${l.column})`
+				: '';
+			throw new Error(
+				`\`<textarea>\` children must be text, but it contains ${kind}. A textarea's content ` +
+					'is its default value and the HTML parser keeps markup inside it as literal ' +
+					`text: move the markup outside the textarea, or pass a string expression.${at}`,
+			);
+		}
+		// Authored binding views address each hole by its own marker range.
+		if (
+			child._octaneBindingText ||
+			child._octaneBindingOpaque ||
+			child._octaneBindingValue ||
+			child._octaneBindingSlot
+		) {
+			return null;
+		}
+		const literal = staticTextLiteral(child.expression);
+		if (literal === '') continue;
+		const previous = parts.at(-1);
+		if (literal !== null && previous?.kind === 'static') {
+			parts[parts.length - 1] = { ...previous, value: previous.value + literal };
+		} else if (literal !== null) {
+			parts.push({ kind: 'static', value: literal, node: child });
+		} else {
+			const text =
+				isDirectSignalHandleExpression(child.expression) ||
+				isKnownTextChildExpression(child.expression, ctx.knownStringChildLocals);
+			parts.push({ kind: text ? 'text' : 'child', expr: child.expression, node: child });
+		}
+	}
+	// Static text alone is baked into the template and serialized as one merged
+	// run; a sole text hole mounts with htext and serializes unframed.
+	if (parts.every((part) => part.kind === 'static')) return null;
+	if (children.length === 1 && parts[0].kind === 'text') return null;
+	return parts;
+}
+
+// The runtime call's arguments: the parts array, then a 't' at each
+// `{x as string}` part (omitted when there is none).
+function textareaTextArgs(parts, lowerHole) {
+	const values = parts.map((part) =>
+		part.kind === 'static'
+			? b.literal(part.value, JSON.stringify(part.value))
+			: lowerHole(part.expr, part.kind === 'text', part.node),
+	);
+	const textHoles = parts.map((part) => (part.kind === 'text' ? 't' : '-')).join('');
+	return textHoles.includes('t')
+		? [b.array(values), b.literal(textHoles, JSON.stringify(textHoles))]
+		: [b.array(values)];
+}
+
 // React's raw-HTML contract is mutually exclusive with a non-nullish child.
 // Static TSRX can reject definitely contradictory shapes before either the
 // client or server renderer runs them. Preserve React's accepted null/undefined
@@ -1452,6 +1548,8 @@ const INTERNAL_CLIENT_RUNTIME_HELPERS = new Set([
 	'enableSignalBindings',
 	'createElementAt',
 	'createElementFromConfig',
+	'isRenderCall',
+	'deferRecord',
 	'bindSignalText',
 	'bindSignalChild',
 	'bindSignalAttribute',
@@ -1491,6 +1589,7 @@ const INTERNAL_SERVER_RUNTIME_HELPERS = new Set([
 	'enableServerSignalBindings',
 	'createElementAt',
 	'createElementFromConfig',
+	'isRenderCall',
 	'ssrSignalValue',
 	'ssrSignalControlValue',
 	'ssrSignalControlAttrs',
@@ -2686,13 +2785,88 @@ function collectComponentLocals(componentNode) {
 	for (const stmt of stmts) {
 		if (stmt.type === 'VariableDeclaration') {
 			for (const d of stmt.declarations || []) collectBindings(d.id, locals);
-		} else if (stmt.type === 'FunctionDeclaration') {
+		} else if (stmt.type === 'FunctionDeclaration' || stmt.type === 'ClassDeclaration') {
 			if (stmt.id) locals.add(stmt.id.name);
 		}
 	}
 	return locals;
 }
 
+// Every name a callback binds for code in its own body: its params, a function
+// expression's own name, and each declaration at ANY statement depth, where
+// collectComponentLocals reads only the top level. A name from a sibling block is
+// included too, which is sound only because a name is threaded when code reads it
+// free: that read already means whatever the name resolves to at the call site.
+// collectFreeIdentifiers must therefore never report a nested scope's own names
+// (a `@{ … }` block's locals, a `@catch` param) as free. Nested functions and
+// render bodies bind their own names, and are visited on their own.
+function collectCallbackBindings(fn) {
+	const names = new Set();
+	for (const p of fn.params || []) collectBindings(p, names);
+	if (fn.type === 'FunctionExpression' && fn.id) names.add(fn.id.name);
+	visit(fn.body);
+	return names;
+
+	function visit(node) {
+		if (node == null || typeof node !== 'object') return;
+		if (Array.isArray(node)) {
+			for (const statement of node) visit(statement);
+			return;
+		}
+		switch (node.type) {
+			case 'VariableDeclaration':
+				for (const d of node.declarations || []) collectBindings(d.id, names);
+				return;
+			case 'FunctionDeclaration':
+			case 'ClassDeclaration':
+				if (node.id) names.add(node.id.name);
+				return;
+			case 'BlockStatement':
+				visit(node.body);
+				return;
+			case 'IfStatement':
+				visit(node.consequent);
+				visit(node.alternate);
+				return;
+			case 'ForStatement':
+				visit(node.init);
+				visit(node.body);
+				return;
+			case 'ForInStatement':
+			case 'ForOfStatement':
+				visit(node.left);
+				visit(node.body);
+				return;
+			case 'WhileStatement':
+			case 'DoWhileStatement':
+			case 'LabeledStatement':
+				visit(node.body);
+				return;
+			case 'TryStatement':
+				visit(node.block);
+				if (node.handler?.param) collectBindings(node.handler.param, names);
+				visit(node.handler?.body);
+				visit(node.finalizer);
+				return;
+			case 'SwitchStatement':
+				for (const c of node.cases || []) visit(c.consequent);
+				return;
+			default:
+				return;
+		}
+	}
+}
+
+// Whether `node` reads a name an enclosing callback binds. Such a name is in scope
+// where `node` is written, but not in the owning body a hoisted helper lands in.
+function readsCallbackScope(node, callbackScope) {
+	if (callbackScope == null || callbackScope.size === 0) return false;
+	for (const name of collectFreeIdentifiers(node, [])) {
+		if (callbackScope.has(name)) return true;
+	}
+	return false;
+}
+
 /**
  * Compute the set of component-local names that are guaranteed STABLE across
  * renders. Used by the auto-callback pass below to decide which `const X =
@@ -3953,6 +4127,12 @@ function collectFreeIdentifiers(root, initiallyBound, ignoreNodes = null) {
 			walk(n.body, scope);
 			return;
 		}
+		// The compiler's own renderable child hole (a normalized `{expr}` or
+		// `@{ … }` child) shares the prefix, but its expression is runtime code.
+		if (t === 'TSRXExpression') {
+			walk(n.expression, scope);
+			return;
+		}
 		if (t.startsWith('TS')) return;
 
 		if (t === 'Identifier') {
@@ -4056,15 +4236,37 @@ function collectFreeIdentifiers(root, initiallyBound, ignoreNodes = null) {
 			return;
 		}
 
-		// CatchClause introduces its param.
+		// CatchClause introduces its param, and a `@catch (error, reset)` clause
+		// also its reset param.
 		if (t === 'CatchClause') {
 			const newScope = new Set(scope);
 			if (n.param) collectBindings(n.param, newScope);
+			if (n.resetParam) collectBindings(n.resetParam, newScope);
 			if (n.param) walkPatternExpressions(n.param, newScope);
 			walk(n.body, newScope);
 			return;
 		}
 
+		// A `@{ … }` block's setup declarations are scoped to its setup and render
+		// output, like a block statement's. Otherwise a block-local reads as a
+		// capture of any outer name it shares, which a caller would thread from a
+		// call site where that outer name may not be in scope.
+		if (t === 'JSXCodeBlock') {
+			const newScope = new Set(scope);
+			for (const stmt of n.body || []) {
+				if (stmt.type === 'VariableDeclaration') {
+					for (const d of stmt.declarations || []) collectBindings(d.id, newScope);
+				} else if (stmt.type === 'FunctionDeclaration' && stmt.id) {
+					newScope.add(stmt.id.name);
+				}
+			}
+			for (const key in n) {
+				if (AST_WALK_SKIP_KEYS.has(key)) continue;
+				walk(n[key], newScope);
+			}
+			return;
+		}
+
 		// for / for-in / for-of — a DECLARATION left introduces bindings, but a
 		// bare left-hand side is an ASSIGNMENT to something already in scope.
 		if (t === 'ForStatement' || t === 'ForInStatement' || t === 'ForOfStatement') {
@@ -7620,20 +7822,39 @@ function isPlainHostRoot(node) {
 	);
 }
 
+/**
+ * True when `node` compiles to exactly one template element in place, in both
+ * compile modes. Every single-root proof (keyed rows, sole-root components,
+ * host-only @if/@switch arms, and the SSR ranges that mirror them) uses this
+ * rather than isPlainHostRoot, because normalizeChildren plans some plain
+ * hosts differently:
+ *   - keyed, `noscript`/document, and parser-repaired hosts lower to a
+ *     descriptor hole, which is an anchor plus the element;
+ *   - head-hoisted metadata and Float resources render nothing in place.
+ * The server writes a parser-repaired host from its template but frames it in
+ * the same hole range, so both modes reject it too. The planner exempts SVG
+ * and `<noscript>` content from some of these rules; ignoring that context
+ * here only keeps a marker pair it could have skipped.
+ */
+function isSingleTemplateHost(node) {
+	return (
+		isPlainHostRoot(node) &&
+		node._octaneImperativeHost !== true &&
+		!alwaysImperativeHost(node) &&
+		!isHoistableHeadElementNode(node) &&
+		headResourceKind(node) === null
+	);
+}
+
 /**
  * A direct body host can adopt its enclosing control-flow range on hydration.
  *
  * Keep this narrower than the general single-root proof: setup statements,
- * components, nested directives, and head-hoisted hosts cannot guarantee that
- * the range's first child is the branch's own hydratable element.
+ * components, and nested directives cannot guarantee that the range's first
+ * child is the branch's own hydratable element.
  */
 function canBorrowSsrHostBranchRange(statements) {
-	if (statements == null || statements.length !== 1 || !isPlainHostRoot(statements[0])) {
-		return false;
-	}
-	const host = statements[0];
-	const tag = host.id?.name ?? host.openingElement?.name?.name;
-	return tag !== 'title' && tag !== 'meta' && tag !== 'link';
+	return statements != null && statements.length === 1 && isSingleTemplateHost(statements[0]);
 }
 
 function statementsOf(node) {
@@ -7659,16 +7880,19 @@ function hasSwitchCaseLocalBinding(statements) {
 }
 
 /**
- * A directive @if/@else whose every reachable arm emits exactly one plain
- * host. The chosen tag may change, but the item always owns one element; the
- * runtime propagates a branch replacement to enclosing shared boundaries.
+ * A directive @if/@else whose every reachable arm emits exactly one template
+ * host (isSingleTemplateHost). The chosen tag may change, but the item always
+ * owns one element; the runtime propagates a branch replacement to enclosing
+ * shared boundaries.
  */
 function isSingleHostIfRoot(node) {
 	if (!isIfDirective(node) || node.alternate == null) return false;
 	const armIsSingleHost = (arm) => {
 		if (isIfDirective(arm)) return isSingleHostIfRoot(arm);
-		const render = statementsOf(arm).filter((s) => isJsxNode(s) || isIfDirective(s));
-		return render.length === 1 && isPlainHostRoot(render[0]);
+		const statements = statementsOf(arm);
+		if (armMayExit(statements)) return false;
+		const render = statements.filter((s) => isJsxNode(s) || isIfDirective(s));
+		return render.length === 1 && isSingleTemplateHost(render[0]);
 	};
 	return armIsSingleHost(node.consequent) && armIsSingleHost(node.alternate);
 }
@@ -7699,7 +7923,7 @@ function singleRootComponentArmName(node, locals, ctx) {
 /**
  * Transitive definition-site single-root proof for a void `@{}` body whose
  * sole root is an exhaustive `@if`/`@else` or `@switch` tree: every reachable
- * arm must render exactly one plain host OR one qualifying same-module
+ * arm must render exactly one template host OR one qualifying same-module
  * component call (see
  * singleRootComponentArmName). Returns the set of callee names the proof
  * depends on (empty when every arm is a host), or null when the shape does
@@ -7723,12 +7947,13 @@ function collectSingleRootIfDeps(render, locals, ctx) {
 		if (isSwitchDirective(arm)) return switchOk(arm);
 		const statements = Array.isArray(arm) ? arm : statementsOf(arm);
 		if (insideSwitch && hasSwitchCaseLocalBinding(statements)) return false;
+		if (armMayExit(statements)) return false;
 		const out = statements.filter((s) => isJsxNode(s) || isIfDirective(s) || isSwitchDirective(s));
 		if (out.length !== 1) return false;
 		const sole = out[0];
 		if (isIfDirective(sole)) return ifOk(sole, insideSwitch);
 		if (isSwitchDirective(sole)) return switchOk(sole);
-		if (isPlainHostRoot(sole)) return true;
+		if (isSingleTemplateHost(sole)) return true;
 		const name = singleRootComponentArmName(sole, locals, ctx);
 		if (name === null) return false;
 		deps.add(name);
@@ -7828,12 +8053,13 @@ function anchorlessRootShape(node) {
  * mount, but its current SSR representation still begins with that construct's
  * own hydration markers. A direct host always begins with the row element, so
  * the hydrator can use it as the keyed item boundary without an item pair.
+ * `itemBody` is forItemTemplateBody's result, whose root key has already been
+ * folded into the item key when that is safe.
  */
-function isSsrMarkerlessForItem(node) {
-	if (node?._octaneBindingSite !== undefined) return false;
-	const body = node?.body?.body || [];
-	const jsxChildren = body.filter((s) => isJsxNode(s));
-	return jsxChildren.length === 1 && isPlainHostRoot(jsxChildren[0]);
+function isSsrMarkerlessForItem(node, itemBody) {
+	if (node?._octaneBindingSite !== undefined || armMayExit(itemBody)) return false;
+	const jsxChildren = itemBody.filter((s) => isJsxNode(s));
+	return jsxChildren.length === 1 && isSingleTemplateHost(jsxChildren[0]);
 }
 
 /**
@@ -7843,9 +8069,10 @@ function isSsrMarkerlessForItem(node) {
  * again. Its component call then adopts the host through the established
  * singleRoot path. Explicit keys, spread/children overrides, imported or
  * dynamic callees, and additional item statements cannot use that proof.
+ * `body` is forItemTemplateBody's output, which the client's single-root proof
+ * also reads, so a removed row-key attribute leaves both sides in agreement.
  */
-function canShareSsrComponentItemRange(node, ctx) {
-	const body = node?.body?.body || [];
+function canShareSsrComponentItemRange(body, ctx) {
 	if (body.length !== 1) return false;
 	const component = body[0];
 	if (
@@ -7929,6 +8156,13 @@ const HOST_MOUNT_SAFE_TAGS = new Set([
 	'ul',
 ]);
 
+// Attributes whose writes carry their own lifecycle or ordering keep a row on
+// forBlock. `style` is a deliberate, conservative member: its writers also run
+// hydration comparison, hidden-Activity display enforcement and transition
+// snapshots, none of which the direct mount was audited against. The cost is
+// confined to refilling an already-mounted, empty list with at least
+// FAST_HOST_LIST_MIN_ITEMS rows: the first mount and every update, including
+// each virtualized scroll, run through forBlock whichever helper is named.
 const HOST_MOUNT_UNSAFE_ATTRIBUTES = new Set([
 	'autofocus',
 	'checked',
@@ -8065,14 +8299,18 @@ function alwaysCompletesAbruptly(statements) {
  * template, so normalize every component-level early return through `?? null`.
  * This preserves one evaluation and every renderable value while making bare or
  * explicitly-undefined returns an unambiguous empty output. Nested functions are
- * separate execution scopes and remain untouched.
+ * separate execution scopes and remain untouched. So is JSX: a return inside a
+ * directive arm is that arm's early exit, which the arm lowers exactly as it
+ * does in a template body, so the server and client ranges agree.
  */
 function normalizeOwnRenderableReturns(statement, preserveJsx = false) {
 	return mapAst(statement, (node) => {
 		if (
 			node.type === 'FunctionDeclaration' ||
 			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression'
+			node.type === 'ArrowFunctionExpression' ||
+			JSX_CHILDREN_BEARING_TYPES.has(node.type) ||
+			SETUP_VALUE_DIRECTIVE_TYPES.has(node.type)
 		)
 			return node;
 		if (node.type !== 'ReturnStatement') return null;
@@ -8166,7 +8404,7 @@ export function hasOnlyLowerableNullishExits(node) {
 }
 
 /**
- * Prove that a component always returns one host element.
+ * Prove that a component always returns one template host element.
  *
  * TSRX's `@{}` form carries that output as `body.render`. Ordinary TSX keeps a
  * real `return`; accept only a final host-element return and reject any other
@@ -8175,12 +8413,13 @@ export function hasOnlyLowerableNullishExits(node) {
  */
 function singleHostComponentRoot(node) {
 	if (node?.body?.type === 'JSXCodeBlock') {
-		return isVoidJsxCodeBlockFunction(node) && isPlainHostRoot(node.body.render);
+		return isVoidJsxCodeBlockFunction(node) && isSingleTemplateHost(node.body.render);
 	}
 	if (node?.body?.type !== 'BlockStatement') return false;
 	const stmts = node.body.body || [];
 	const final = stmts[stmts.length - 1];
-	if (!final || final.type !== 'ReturnStatement' || !isPlainHostRoot(final.argument)) return false;
+	if (!final || final.type !== 'ReturnStatement' || !isSingleTemplateHost(final.argument))
+		return false;
 
 	let returns = 0;
 	const seen = new WeakSet();
@@ -9771,6 +10010,7 @@ function compileAuthored(source, filename, options, bundlerMetadata) {
 		normalizeAuthoredJsxLiterals(parseModule(source, cleanFilename)),
 	);
 	analyzeTsrx(analyzedAst, cleanFilename);
+	assertTemplateJumps(analyzedAst, source, cleanFilename);
 	adoptParserAst(analyzedAst);
 	assertNoLegacyContextProviders(analyzedAst, source, cleanFilename);
 	options = nativeReadOptions(analyzedAst, options);
@@ -10241,6 +10481,9 @@ function compileInternal(
 	const errorBoundaryLowering = lowerImportedErrorBoundaries(ast);
 	ast = errorBoundaryLowering.ast;
 	const consumedRuntimeLocals = errorBoundaryLowering.consumed;
+	// A module-level `@{ … }` function that code calls directly also gets its
+	// returned-JSX form, before the passes below rewrite its authored returns.
+	ast = splitDirectlyCalledComponents(ast);
 	// A null-only shorthand guard is template control flow, not an arbitrary
 	// JavaScript return value. Lower it in every compiler mode so SSR, hydration,
 	// and HMR share one DOM-range shape. HMR still emits the generic component
@@ -10249,6 +10492,8 @@ function compileInternal(
 	// Same contract for React-style conditional JSX returns: branch-selected
 	// output compiles as template control flow instead of de-opt descriptors.
 	ast = lowerJsxReturnBranchComponents(ast);
+	// A nested `@{ … }` function that code calls directly returns JSX instead.
+	ast = lowerDirectlyCalledTemplateFunctions(ast);
 	// Omitted dependency lists are compiler-owned: infer reactive captures
 	// before any component splitting/hoisting so every lexical binding is still
 	// visible to the shared TSRX/TSX analysis. Explicit arrays and `null` pass
@@ -10599,8 +10844,7 @@ function compileInternal(
 			if (
 				item.id?.type === 'Identifier' &&
 				init?.type === 'CallExpression' &&
-				init.callee?.type === 'Identifier' &&
-				memoImportNames.has(init.callee.name) &&
+				isOctaneMemoCallee(init.callee, ctx, memoImportNames) &&
 				(init.arguments?.length ?? 0) === 1
 			) {
 				ctx.defaultMemoBindings.add(item.id.name);
@@ -10708,7 +10952,9 @@ function compileInternal(
 			(isComponentFunction(node.declaration) || isReturnJsxFunction(node.declaration))
 		)
 			compNode = node.declaration;
-		if (compNode && compNode.id) {
+		// A component's returned-JSX twin runs only for direct calls, never as a
+		// component.
+		if (compNode && compNode.id && compNode._octaneDirectCallTwin !== true) {
 			ctx.componentInfo.set(compNode.id.name, {
 				eligible: false,
 				autoMemoSafe: false,
@@ -11779,10 +12025,12 @@ function compileServer(
 	const errorBoundaryLowering = lowerImportedErrorBoundaries(ast);
 	ast = errorBoundaryLowering.ast;
 	const consumedRuntimeLocals = errorBoundaryLowering.consumed;
+	ast = splitDirectlyCalledComponents(ast);
 	// Mirror the client transform so SSR emits the same control-flow ranges
 	// hydration expects in both development and production.
 	ast = lowerNullishComponentExits(ast);
 	ast = lowerJsxReturnBranchComponents(ast);
+	ast = lowerDirectlyCalledTemplateFunctions(ast);
 	// Mirror the client transform exactly. Effects are server no-ops, but
 	// useMemo/useCallback execute during SSR and must receive the same inferred
 	// dependency shape as hydration's client compile.
@@ -12087,6 +12335,11 @@ function compileServerComponent(node, ctx) {
 	const beforeCss = ctx.cssInjections.length;
 	const scoping = applyStyleScopes(node, ctx);
 	node = scoping.node;
+	// A plain return-JSX declaration can also be called directly; its returned
+	// JSX then needs the same deferred value the client emits.
+	if (node.body?.type === 'BlockStatement' && !node._octaneBindingView) {
+		node = { ...node, _octaneDirectCallReturn: true };
+	}
 	const cssHash = scoping.cssHash;
 	const cssEntries = [...ctx.moduleCssInjections, ...ctx.cssInjections.slice(beforeCss)].sort(
 		(a, b) => a.order - b.order,
@@ -12120,6 +12373,7 @@ function compileServerComponent(node, ctx) {
 			// its body (serverThemeTouchStatements) so their CSS precedes its own.
 			scoping.runtimeApplied,
 		);
+		fn = withDirectCallGuard(fn, node, ctx);
 	} finally {
 		ctx.currentComponentLocals = prevLocals;
 		ctx.knownStringLocals = prevKnownStr;
@@ -12144,8 +12398,11 @@ function compileServerComponent(node, ctx) {
 	// hoisting instead of a TDZ `const` binding. Server and client compiles must
 	// agree, or the same route module renders on one side and crashes on the other.
 	// Writable declarations also keep their module binding inside their own body
-	// and preserve declaration-form live default exports.
+	// and preserve declaration-form live default exports. A component's
+	// returned-JSX twin is hoisted like the client's, because a direct call of
+	// its component can run while the module evaluates.
 	if (
+		node._octaneDirectCallTwin === true ||
 		componentReferencedAboveDeclaration(ctx, node, name) ||
 		isReassignedComponentDeclaration(node, ctx)
 	) {
@@ -12211,7 +12468,9 @@ function ssrReturnedJsxNode(argument, ctx) {
 		argument.type === 'JSXFragment' ||
 		argument.type === 'Fragment' ||
 		isFragmentLongForm(argument, ctx) ||
-		(!returnedHostRoot && requiresTemplateNormalization(argument, 'html', true, ctx))
+		(returnedHostRoot
+			? isRangedReturnedHost(argument)
+			: requiresTemplateNormalization(argument, 'html', true, ctx))
 	) {
 		return {
 			type: 'TSRXExpression',
@@ -12280,6 +12539,7 @@ function ssrCompileBodyWithMapTemps(
 
 	let statements;
 	let jsxNodes;
+	let directCallRoot = null;
 	if (node.body && node.body.type === 'JSXCodeBlock') {
 		statements = returnedOutput
 			? (node.body.body || []).map(normalizeOwnRenderableReturns)
@@ -12293,11 +12553,18 @@ function ssrCompileBodyWithMapTemps(
 		// itself. rewriteEarlyExits wants the array.
 		const bodyStmts =
 			node.body && node.body.type === 'BlockStatement' ? node.body.body || [] : node.body || [];
-		const bodyRewritten = rewriteEarlyExits(bodyStmts);
+		// A statement array is a synthetic arm body (see splitArmExits); a function
+		// body keeps its returns on the generic value ABI.
+		const bodyRewritten = Array.isArray(node.body)
+			? splitArmExits(unwrapOutputCodeBlock(bodyStmts), ctx)
+			: rewriteEarlyExits(unwrapOutputCodeBlock(bodyStmts));
 		statements = [];
 		jsxNodes = [];
 		for (const child of bodyRewritten) {
 			if (child.type === 'ReturnStatement' && child.argument && isJsxNode(child.argument)) {
+				if (directCallRoot === null && node._octaneDirectCallReturn === true) {
+					directCallRoot = child.argument;
+				}
 				// return-JSX form: the returned host element (+ its directive children) is
 				// the render output — route it to jsxNodes so it flows through ssrEmitNode
 				// (byte-identical SSR to the `@{}` form), not printed as `return <jsx>`.
@@ -12425,6 +12692,51 @@ function ssrCompileBodyWithMapTemps(
 	ctx._returnedFragmentTemplate = prevReturnedFragmentTemplate;
 	ctx._tsxValuePos = prevValuePos;
 	ctx._valueDirectiveLowering = prevValueDirectiveLowering;
+	// Mirrors compileReturnJsxFunction: a direct call defers the record that a
+	// body call renders now. Its fragment sub is declared only in that branch, and
+	// it is lowered after the body template so body-call output is unchanged.
+	let directCall = null;
+	const directCallKind = directCallRoot === null ? null : directCallReturnKind(directCallRoot, ctx);
+	if (directCallKind === 'value') {
+		// Directives in the returned value fold into helpers owned by the direct
+		// call, so a body call never declares them.
+		const subs = [];
+		const previousLowering = ctx._valueDirectiveLowering;
+		ctx._valueDirectiveLowering = serverValueDirectiveFold(ctx, name, subs, cssHash);
+		try {
+			const returned = rewriteHookCalls(b.return(directCallRoot), ctx, name, localSetupSlots);
+			// Like the client's deferred record, the value reads bindings when it renders.
+			directCall = { subs, value: markDeferredLive(rewriteJsxValues(returned.argument, ctx)) };
+		} finally {
+			ctx._valueDirectiveLowering = previousLowering;
+		}
+	} else if (directCallKind === 'fragment') {
+		const subs = [];
+		const record = serverValueDirectiveFold(
+			ctx,
+			name,
+			subs,
+			cssHash,
+			false,
+			'html',
+		)(directCallRoot);
+		ctx.runtimeNeeded.add('createScopedValue');
+		directCall = {
+			subs,
+			value: inheritOriginLoc(
+				b.call(rtAlias('createScopedValue'), b.arrow([], record)),
+				directCallRoot,
+			),
+		};
+	}
+	const renderCallTest =
+		directCall === null
+			? null
+			: () =>
+					inheritOriginLoc(
+						b.call(requireRuntimeForContext(ctx, 'isRenderCall'), b.id('__s')),
+						directCallRoot,
+					);
 
 	const body = [];
 	body.push(...serverThemeTouchStatements(themeTouches ?? [], ctx, node));
@@ -12488,14 +12800,55 @@ function ssrCompileBodyWithMapTemps(
 			}
 		}
 	}
-	body.push(...frontHead, ...rewritten, ...inlinedSubs, ...deferredHead);
-	// PROPS-FIRST ABI (matches the client): `(…userParams, __s, __extra)`. A leading
+	// A direct call's deferred fragment registers its own head elements when it
+	// renders, so the body-call registrations run only for a body call.
+	const guardHead = (statements) =>
+		renderCallTest === null || statements.length === 0
+			? statements
+			: [inheritOriginLoc(b.if(renderCallTest(), b.block(statements), null), statements[0])];
+	body.push(...guardHead(frontHead), ...rewritten, ...inlinedSubs, ...guardHead(deferredHead));
+	if (directCall !== null) {
+		const scopeNames = collectFunctionScopeBindings(
+			node.params.length > 0 ? node.params : [b.id('__props')],
+			[...rewritten, ...inlinedSubs],
+			new Set([...mapTemps, '__s', '__extra']),
+		);
+		const captures = directCallCaptures(node, scopeNames, directCall.subs, directCall.value);
+		const branch =
+			captures === null
+				? [...directCall.subs, b.return(directCall.value)]
+				: [
+						b.return(
+							hoistCapturingHelper(
+								ctx,
+								`${name}$direct`,
+								captures,
+								directCall.subs,
+								directCall.value,
+								directCallRoot,
+							),
+						),
+					];
+		body.push(
+			inheritOriginLoc(b.if(b.unary('!', renderCallTest()), b.block(branch), null), directCallRoot),
+		);
+	}
+	// PROPS-FIRST ABI (matches the client): `(props, __s, __extra)`. A leading
 	// `__props` placeholder stands in when there are no user params, so a verbatim
 	// `function Foo(props)` and a compiled component both bind props from arg 0.
-	const params =
-		node.params.length > 0
-			? [...node.params, b.id('__s'), b.id('__extra')]
-			: [b.id('__props'), b.id('__s'), b.id('__extra')];
+	// A synthetic sub-body (a statement array) is called by its construct instead,
+	// with its own leading arguments: `(item, index, __s, __extra)` for a @for
+	// item, `(error, reset, __s, __extra)` for a @catch arm.
+	const { params, bindings: paramBindings } = Array.isArray(node.body)
+		? {
+				params: [
+					...(node.params.length > 0 ? node.params : [b.id('__props')]),
+					b.id('__s'),
+					b.id('__extra'),
+				],
+				bindings: [],
+			}
+		: compiledBodyParams(node.params);
 	// Private loop items feed only HTML concatenation, so their serialized tail
 	// needs no carrier. Other bodies can cross a component/value boundary, where
 	// the carrier distinguishes compiled HTML from authored text returns. This
@@ -12519,14 +12872,11 @@ function ssrCompileBodyWithMapTemps(
 			: ([...(node.params || []), ...(Array.isArray(node.body) ? node.body : [])].find(
 					(part) => part?.loc != null,
 				) ?? ctx._moduleOrigin);
+	const scopedBody = ctx.nativeReads
+		? wrapNativeReadScope(body, b.id('__s'), nativeReadNames(ctx))
+		: body;
 	return inheritOriginLoc(
-		b.function_declaration(
-			b.id(name),
-			params,
-			b.block(
-				ctx.nativeReads ? wrapNativeReadScope(body, b.id('__s'), nativeReadNames(ctx)) : body,
-			),
-		),
+		b.function_declaration(b.id(name), params, b.block([...paramBindings, ...scopedBody])),
 		origin,
 	);
 }
@@ -12932,6 +13282,14 @@ function ssrEmitNode(
 		case 'Element':
 			if (isComponentTag(node))
 				return ssrEmitComponent(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
+			if (node.parserRepairRange === true) {
+				ctx.runtimeNeeded.add('ssrBlock');
+				return ssrCall(
+					'ssrBlock',
+					[ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs)],
+					node,
+				);
+			}
 			return ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
 		case 'TSRXExpression':
 			return ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
@@ -13926,15 +14284,37 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 	// still gets a `<!--[-->…<!--]-->` block). Must match the client's only-child
 	// markerless condition exactly so both sides agree for hydration: a single `Text`
 	// child that is neither a static literal (baked into HTML) nor proven text
-	// (emitted via `ssrText`).
+	// (emitted via `ssrText`). A spread or raw-HTML writer does not change the
+	// client's shape, so it must not change this one: inside RCDATA (<textarea>)
+	// a frame around a primitive would parse as literal text.
 	const onlyChild0 =
 		normChildren.length === 1 && normChildren[0].type === 'Text' ? normChildren[0] : null;
+	const textareaParts = textareaTextParts(tag, selfNs, normChildren, ctx);
 	let childrenExpr;
 	if (authoredStaticScriptContent !== undefined) {
 		const content = escapeInlineScriptContent(authoredStaticScriptContent);
 		childrenExpr = ssrHtmlTemplate(content === '' ? [] : [content], node, ctx);
+	} else if (textareaParts !== null) {
+		// The client binds these as one Text node (see textareaTextParts).
+		ctx.runtimeNeeded.add('ssrTextareaText');
+		childrenExpr = ssrCall(
+			'ssrTextareaText',
+			textareaTextArgs(textareaParts, (expression, text, part) =>
+				ssrSignalValue(
+					resolveStyleExpr(
+						text
+							? rewriteHookCalls(expression, ctx, name)
+							: rewriteJsxValues(rewriteHookCalls(expression, ctx, name), ctx),
+						cssHash,
+					),
+					ctx,
+					part,
+					true,
+				),
+			),
+			node,
+		);
 	} else if (
-		htmlSources.length === 0 &&
 		onlyChild0 !== null &&
 		!onlyChild0._octaneBindingOpaque &&
 		!onlyChild0._octaneBindingValue &&
@@ -14008,7 +14388,15 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		ctx.runtimeNeeded.add('ssrChildrenSources');
 		childrenExpr = ssrCall(
 			'ssrChildrenSources',
-			[b.array(effectiveChildrenPropSources), ssrThunk(childrenExpr, node), b.id('__s')],
+			[
+				b.array(effectiveChildrenPropSources),
+				ssrThunk(childrenExpr, node),
+				b.id('__s'),
+				// A textarea's children prop is text too (see textareaTextParts).
+				...(tag === 'textarea' && (selfNs === 'html' || selfNs === 'opaque')
+					? [b.literal(true, 'true')]
+					: []),
+			],
 			node,
 		);
 	}
@@ -14722,21 +15110,8 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 		),
 		node,
 	);
-	let explicitKey = null;
 	let keyDeclaration = null;
-	const firstEl = (node.body.body || []).find(
-		(child) => child.type === 'Element' || child.type === 'JSXElement',
-	);
-	if (firstEl) {
-		const keyAttr = (firstEl.attributes || firstEl.openingElement?.attributes || []).find(
-			(attr) => (attr.name?.name || attr.name) === 'key',
-		);
-		if (keyAttr?.value != null) {
-			explicitKey =
-				keyAttr.value.type === 'JSXExpressionContainer' ? keyAttr.value.expression : keyAttr.value;
-		}
-	}
-	if (explicitKey === null) explicitKey = node.key || null;
+	const explicitKey = forRowKeyAttribute(node, ctx) ?? node.key ?? null;
 	if (explicitKey !== null) {
 		const keyParams = [itemId];
 		if (node.index) keyParams.push(node.index);
@@ -14751,7 +15126,7 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 	} else if (node.index) {
 		itemKey = inheritOriginLoc(b.id('__i'), node.index);
 	}
-	const markerlessItem = isSsrMarkerlessForItem(node);
+	const markerlessItem = isSsrMarkerlessForItem(node, itemBody);
 	// ssrArm exists solely to make use()/component identity distinct per item.
 	// Skip it when the item is compiler-proven synchronous and transparent:
 	// no render-time calls, nested components/control flow, or renderable child
@@ -14772,7 +15147,7 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 		node,
 	);
 	const sharedItemRange =
-		!bindingSite && (markerlessItem || canShareSsrComponentItemRange(node, ctx));
+		!bindingSite && (markerlessItem || canShareSsrComponentItemRange(itemBody, ctx));
 	const itemHtml =
 		sharedItemRange || bindingSite ? itemCall : ssrCall('ssrBlock', [itemCall], node);
 	let renderItem = itemNeedsIdentity
@@ -15103,12 +15478,15 @@ function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash,
 			node,
 		);
 	}
-	if (node.returnedJsxValue === true && requiresTemplateNormalization(expr, 'html', true, ctx)) {
+	if (
+		node.returnedJsxValue === true &&
+		(isRangedReturnedHost(expr) || requiresTemplateNormalization(expr, 'html', true, ctx))
+	) {
 		// A returned JSX value that contains template-only syntax is one compiled
 		// renderer on the client (rather than a descriptor array whose value
 		// lowering cannot represent directives, sentinels, head hoists, or child
-		// code blocks). Mirror that component boundary on the server: the local
-		// sub-function keeps access to the
+		// code blocks), as is an imperatively built host root. Mirror that component
+		// boundary on the server: the local sub-function keeps access to the
 		// enclosing return component's props/locals, while ssrComponent emits the
 		// range the client descriptor adopts during hydration.
 		// The final flag mirrors extractFragment's component-child decision inside
@@ -15136,7 +15514,10 @@ function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash,
 				b.literal(false),
 				undefinedNode(),
 				undefinedNode(),
-				b.literal(componentInvocationSite(ctx, node)),
+				// Hash the authored JSX, as the client's lowerHostFragment does, not
+				// the synthetic wrapper: every signal instance below this renderer
+				// chains its key from this site.
+				b.literal(componentInvocationSite(ctx, expr)),
 			],
 			node,
 		);
@@ -15328,13 +15709,25 @@ function singleRootInitializer(ctx, component) {
 	return markPure(b.call('_$__s', component));
 }
 
+function isOctaneMemoCallee(callee, ctx, memoImportNames) {
+	if (callee?.type === 'Identifier') return memoImportNames.has(callee.name);
+	return (
+		callee?.type === 'MemberExpression' &&
+		!callee.computed &&
+		callee.object?.type === 'Identifier' &&
+		callee.property?.type === 'Identifier' &&
+		callee.property.name === 'memo' &&
+		ctx.octaneImportNamespaces?.has(callee.object.name) === true
+	);
+}
+
 // An exact public memo wrapper preserves the already-proven host output of its
 // immutable local component. Stamp only the fresh compiler-owned wrapper:
 // probing arbitrary component metadata would invoke observable getters, and
 // dev/HMR, custom comparators, imported components, and renderer units remain
 // deliberately opaque.
 function markSingleRootMemoInitializers(node, ctx, memoImportNames) {
-	if (ctx.hmr || ctx.dev || ctx.profile || memoImportNames.size === 0) return node;
+	if (ctx.hmr || ctx.dev || ctx.profile || ctx.defaultMemoBindings.size === 0) return node;
 	const exported = node.type === 'ExportNamedDeclaration';
 	const declaration = exported ? node.declaration : node;
 	if (declaration?.type !== 'VariableDeclaration' || declaration.kind !== 'const') return node;
@@ -15346,8 +15739,7 @@ function markSingleRootMemoInitializers(node, ctx, memoImportNames) {
 			item.id?.type !== 'Identifier' ||
 			!ctx.defaultMemoBindings.has(item.id.name) ||
 			init?.type !== 'CallExpression' ||
-			init.callee?.type !== 'Identifier' ||
-			!memoImportNames.has(init.callee.name) ||
+			!isOctaneMemoCallee(init.callee, ctx, memoImportNames) ||
 			init.arguments.length !== 1 ||
 			wrapped?.type !== 'Identifier' ||
 			!ctx.moduleFunctionDeclarations.has(wrapped.name) ||
@@ -15533,11 +15925,15 @@ function compileComponent(node, ctx, options) {
 		// other inner compileFunctionBody calls leave their arrows untouched
 		// (they rarely declare arrow consts; if they do, the stability oracle
 		// would need to be redefined relative to the inner scope).
-		fnNode = compileFunctionBody(node, ctx, name, 'opaque', cssHash, {
-			autoCallback: true,
-			localHookSlots: true,
-			returnedOutput,
-		});
+		fnNode = withDirectCallGuard(
+			compileFunctionBody(node, ctx, name, 'opaque', cssHash, {
+				autoCallback: true,
+				localHookSlots: true,
+				returnedOutput,
+			}),
+			node,
+			ctx,
+		);
 	} finally {
 		ctx.currentComponentLocals = prevLocals;
 		ctx.currentAutoMemoCallsitesSafe = prevAutoMemoCallsitesSafe;
@@ -15990,11 +16386,21 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	//               Keep the old split + rewriteEarlyExits path for these.
 	let statements;
 	let jsxNodes;
+	const previousComponentLocals = ctx.currentComponentLocals;
 	if (node.body && node.body.type === 'JSXCodeBlock') {
 		statements = node.body.body || [];
 		jsxNodes = node.body.render ? [node.body.render] : [];
 	} else {
-		const bodyRewritten = rewriteEarlyExits(node.body);
+		const bodyRewritten = splitArmExits(unwrapOutputCodeBlock(node.body), ctx);
+		// The split can declare a name of its own (a hooked tail's handoff), which
+		// the arms nested in this body capture like any other local of it.
+		if (previousComponentLocals) {
+			const declared = new Set();
+			for (const statement of bodyRewritten) collectStatementBindings(statement, declared);
+			if ([...declared].some((name) => !previousComponentLocals.has(name))) {
+				ctx.currentComponentLocals = new Set([...previousComponentLocals, ...declared]);
+			}
+		}
 		statements = [];
 		jsxNodes = [];
 		for (const child of bodyRewritten) {
@@ -16196,11 +16602,11 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	// Rewrite hook calls and `<tsrx>` blocks in statements before printing them.
 	// A `<tsrx>` block at expression position (e.g. `const f = <tsrx>...</tsrx>`)
 	// is hoisted as a render function in inlinedSubs and replaced with an
-	// identifier reference. Suitable for top-level render-prop patterns where
-	// the block doesn't capture local arrow params.
+	// identifier reference. One that reads a setup callback's names stays for
+	// rewriteJsxValues, which compiles it in place inside that callback.
 	const rewrittenStatements = preparedStatements
 		.map((s) => rewriteHookCalls(s, ctx, name, options?.localHookSlots === true))
-		.map((s) => rewriteTsrxBlocks(s, ctx, name, inlinedSubs))
+		.map((s) => rewriteTsrxBlocks(s, ctx, name, inlinedSubs, 'html', null, true))
 		// JSX component element at VALUE position in setup (e.g. `const el = <App/>`)
 		// → createElement(App, props). Output JSX (jsxNodes) was already split off.
 		.map((s) => rewriteJsxValues(s, ctx));
@@ -16535,11 +16941,10 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 		);
 		presentationHostEnd++;
 	}
-	// PROPS-FIRST convention: `(…userProps, __s, __extra)`. The scope is the 2nd arg
+	// PROPS-FIRST convention: `(props, __s, __extra)`. The scope is the 2nd arg
 	// (a placeholder leads when there are no user params), so a plain function
 	// `App(props)` binds `props`, while compiled bodies still read `__s` by name.
-	const userParams = node.params && node.params.length > 0 ? node.params : [b.id('__props')];
-	const fnParams = [...userParams, b.id('__s'), b.id('__extra')];
+	const { params: fnParams, bindings: paramBindings } = compiledBodyParams(node.params ?? []);
 	ctx.currentAutoMemoOffset = prevAutoMemoOffset;
 	ctx.currentAutoMemoCacheName = prevAutoMemoCacheName;
 	ctx.currentAutoMemoCommittedName = prevAutoMemoCommittedName;
@@ -16548,6 +16953,7 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	ctx.currentHookMemoNames = prevHookMemoNames;
 	ctx.currentHookMemoOwnerSafe = prevHookMemoOwnerSafe;
 	ctx.currentMapTemps = prevMapTemps;
+	ctx.currentComponentLocals = previousComponentLocals;
 	// ONE FunctionDeclaration node — the caller prints it (once, with the full
 	// esrap map for top-level components) or embeds it in an enclosing body.
 	const presentationBody = preparePresentationHydration(
@@ -16558,14 +16964,14 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	);
 	ctx.scalarBindingClaims = previousScalarBindingClaims;
 	ctx.presentationHydration = previousPresentationHydration;
+	const scopedBody =
+		ctx.nativeReads && !isStaticHostComponent(node)
+			? wrapNativeReadScope(presentationBody, b.id('__s'), nativeReadNames(ctx))
+			: presentationBody;
 	const emittedFunction = b.function_declaration(
 		b.id(name, node.id ?? node),
 		fnParams,
-		b.block(
-			ctx.nativeReads && !isStaticHostComponent(node)
-				? wrapNativeReadScope(presentationBody, b.id('__s'), nativeReadNames(ctx))
-				: presentationBody,
-		),
+		b.block([...paramBindings, ...scopedBody]),
 	);
 	return inheritOriginLoc(
 		hookMemoOpaqueOwner
@@ -19990,6 +20396,9 @@ function compileReturnJsxFunction(node, ctx, options) {
 	// their closure over setup locals/props — and only their values + the control
 	// expression are threaded into the renderer as `props.hN` holes.
 	const compInlinedSubs = [];
+	// Set once a returned record needs a separate direct-call value.
+	let renderCall = null;
+	const returnedRecords = [];
 	// Fold a directive found at value position into a hoisted renderer owned by THIS
 	// body — the same fold the `@{}` body and the server emitter build.
 	const lowerBodyValueDirective =
@@ -20088,17 +20497,20 @@ function compileReturnJsxFunction(node, ctx, options) {
 				// represented render scope, not captured into fragment props while
 				// the factory runs. Reuse value lowering in both emitters so its
 				// public type/props and deferred children also stay inspectable.
+				// Like other returned records, it reads variables when it renders.
 				if (ctx.nativeReads) {
 					return {
 						...h,
-						argument: nativeReturnedJsxValue(
-							h.argument,
-							ctx,
-							name,
-							compInlinedSubs,
-							cssHash,
-							cssEntries,
-							scoping.runtimeApplied,
+						argument: markDeferredLive(
+							nativeReturnedJsxValue(
+								h.argument,
+								ctx,
+								name,
+								compInlinedSubs,
+								cssHash,
+								cssEntries,
+								scoping.runtimeApplied,
+							),
 						),
 					};
 				}
@@ -20121,7 +20533,33 @@ function compileReturnJsxFunction(node, ctx, options) {
 						};
 					}
 				}
-				return { ...h, argument: lowerReturnJsx(h.argument, ctx, compInlinedSubs, cssHash) };
+				const record = lowerReturnJsx(h.argument, ctx, compInlinedSubs, cssHash);
+				if (node._octaneBindingView || !directCallNeedsClientBranch(h.argument, node, ctx)) {
+					return { ...h, argument: record };
+				}
+				// A component's returned-JSX twin runs only for direct calls, so it
+				// needs no Scope parameter and returns only the deferred value.
+				renderCall ??= node._octaneDirectCallTwin
+					? { params: node.params, scope: null }
+					: renderCallScopeParam(node, ctx);
+				// Built once the function's top-level bindings are all known.
+				const placeholder = inheritOriginLoc(b.id('__octaneReturnedRecord'), h.argument);
+				returnedRecords.push({
+					placeholder,
+					record,
+					origin: h.argument,
+					test:
+						renderCall.scope === null
+							? null
+							: inheritOriginLoc(
+									b.call(
+										requireRuntimeForContext(ctx, 'isRenderCall'),
+										cloneAstNode(renderCall.scope),
+									),
+									h.argument,
+								),
+				});
+				return { ...h, argument: placeholder };
 			}
 			return rewriteJsxValues(h, ctx);
 		});
@@ -20133,6 +20571,20 @@ function compileReturnJsxFunction(node, ctx, options) {
 		ctx.currentAutoCalculatedRenderableRefs = prevAutoCalculatedRenderableRefs;
 		ctx.currentMapTemps = prevMapTemps;
 	}
+	if (returnedRecords.length > 0) {
+		const scopeNames = collectFunctionScopeBindings(
+			renderCall.params,
+			[...compInlinedSubs, ...newStatements],
+			new Set(mapTemps),
+		);
+		const replacements = new Map(
+			returnedRecords.map((entry) => [
+				entry.placeholder,
+				splitReturnedRecord(ctx, node, name, scopeNames, entry),
+			]),
+		);
+		newStatements = mapAst(newStatements, (candidate) => replacements.get(candidate) ?? null);
+	}
 	if (
 		ctx.autoMemo &&
 		ctx.privateUnescapedComponents.has(name) &&
@@ -20184,7 +20636,7 @@ function compileReturnJsxFunction(node, ctx, options) {
 	}
 	const emittedFunction = b.function_declaration(
 		node.id,
-		node.params,
+		renderCall?.params ?? node.params,
 		b.block(
 			ctx.nativeReads ? wrapNativeReadScope(returnBody, b.void0, nativeReadNames(ctx)) : returnBody,
 		),
@@ -20532,6 +20984,321 @@ function requiresTemplateNormalization(
 	);
 }
 
+// A named return-JSX declaration is also a component. Its body call evaluates
+// the returned record in the scope that renders it. A direct call returns a JSX
+// value instead, which must resolve where it renders, like the value an arrow
+// function returns. Both emitters classify the same authored root: 'fragment'
+// defers the compiled fragment record, 'value' uses ordinary value lowering, and
+// null marks static host markup that renders the same anywhere. The server's
+// body call renders the whole tree to HTML, so every non-literal hole and every
+// component below the root needs deferral there.
+function directCallReturnKind(node, ctx, stableNames = null) {
+	if (VALUE_DIRECTIVE_ARM_TYPES.has(node.type)) return 'fragment';
+	if (requiresTemplateNormalization(node, 'html', true, ctx)) return 'fragment';
+	if (node.type !== 'Element' && node.type !== 'JSXElement') {
+		return jsxValueChildrenNeedRenderScope(node, false, stableNames) ? 'value' : null;
+	}
+	if (isComponentTag(node)) return 'value';
+	return jsxValueRootNeedsRenderScope(node, stableNames) ||
+		jsxValueChildrenNeedRenderScope(node, false, stableNames)
+		? 'fragment'
+		: null;
+}
+
+// Whether the client's body-call record evaluates anything a direct call must
+// defer. The client record only stores hole values and interprets them where
+// it mounts, so reading an unreassigned local is the same during the call and
+// at render. Value-lowered roots already defer, except a component's own props.
+function directCallNeedsClientBranch(node, fn, ctx) {
+	const stable = directCallStableNames(fn);
+	const kind = directCallReturnKind(node, ctx, stable);
+	if (kind === 'fragment') return true;
+	return (
+		kind === 'value' &&
+		(node.type === 'Element' || node.type === 'JSXElement') &&
+		jsxValueRootNeedsRenderScope(node, stable)
+	);
+}
+
+// Names that code anywhere in the function assigns after declaring them.
+const DIRECT_CALL_ASSIGNED_NAMES = new WeakMap();
+function directCallAssignedNames(fn) {
+	const cached = DIRECT_CALL_ASSIGNED_NAMES.get(fn);
+	if (cached !== undefined) return cached;
+	const assigned = new Set();
+	const target = (node) => {
+		if (node?.type === 'Identifier') assigned.add(node.name);
+		else if (node != null && typeof node === 'object') collectBindings(node, assigned);
+	};
+	mapAst(fn.body, (node) => {
+		if (node.type === 'AssignmentExpression') target(node.left);
+		else if (node.type === 'UpdateExpression') target(node.argument);
+		else if (
+			(node.type === 'ForInStatement' || node.type === 'ForOfStatement') &&
+			node.left?.type !== 'VariableDeclaration'
+		) {
+			target(node.left);
+		}
+		return null;
+	});
+	DIRECT_CALL_ASSIGNED_NAMES.set(fn, assigned);
+	return assigned;
+}
+
+// Parameters and top-level declarations that nothing in the function assigns.
+// Reading one runs no user code and yields the same value during the call and
+// at render, so the client record needs no deferral for it.
+function directCallStableNames(fn) {
+	const names = collectComponentLocals(fn);
+	for (const name of directCallAssignedNames(fn)) names.delete(name);
+	return names;
+}
+
+// A direct call's deferred value reads the function's locals after the call has
+// returned. Declaring its closure inside the function would make those locals
+// context slots, allocating a context on every call, body calls included, so
+// the value is built by a module function that receives them as arguments.
+// Returns those arguments, or null when a copy could differ from the live
+// binding: a captured authored local that the function reassigns, or a read of
+// `this` or `arguments`.
+function directCallCaptures(fn, scopeNames, statements, value) {
+	const body = b.block([...statements, b.return(value)]);
+	let contextual = false;
+	mapAst(body, (node) => {
+		if (
+			node.type === 'ThisExpression' ||
+			node.type === 'Super' ||
+			node.type === 'MetaProperty' ||
+			(node.type === 'Identifier' && node.name === 'arguments')
+		) {
+			contextual = true;
+		}
+		return contextual ? node : null;
+	});
+	if (contextual) return null;
+	const captures = [...collectFreeIdentifiers(body, new Set())]
+		.filter((identifier) => scopeNames.has(identifier))
+		.sort();
+	const assigned = directCallAssignedNames(fn);
+	return captures.some((identifier) => assigned.has(identifier)) ? null : captures;
+}
+
+// Declare `function helper(captures) { ...statements; return value; }` among the
+// module's hoisted helpers and return a call to it.
+function hoistCapturingHelper(ctx, preferred, captures, statements, value, origin) {
+	const helper = allocCompilerName(ctx, preferred);
+	const ids = () => captures.map((identifier) => inheritOriginLoc(b.id(identifier), origin));
+	ctx.hoistedHelpers.push(
+		inheritOriginLoc(
+			b.function_declaration(b.id(helper), ids(), b.block([...statements, b.return(value)])),
+			origin,
+		),
+	);
+	return inheritOriginLoc(b.call(helper, ...ids()), origin);
+}
+
+// The client's returned record, split between a body call and a direct call.
+// The record is printed once, in a module function the body call invokes; a
+// direct call defers that same function until the value renders. Without a
+// body-call `test`, the function only ever returns the direct call's value.
+function splitReturnedRecord(ctx, fn, name, scopeNames, { record, test, origin }) {
+	const captures = directCallCaptures(fn, scopeNames, [], record);
+	if (captures === null) {
+		ctx.runtimeNeeded.add('createScopedValue');
+		// A direct call's record reads bindings when it renders, as the server's does.
+		const direct = inheritOriginLoc(
+			b.call(
+				rtAlias('createScopedValue'),
+				b.arrow([], markDeferredLive(test === null ? record : cloneAstNode(record))),
+			),
+			origin,
+		);
+		return test === null ? direct : inheritOriginLoc(b.conditional(test, record, direct), origin);
+	}
+	const read = hoistCapturingHelper(ctx, `${name}$record`, captures, [], record, origin);
+	const direct = inheritOriginLoc(
+		b.call(
+			requireRuntimeForContext(ctx, 'deferRecord'),
+			b.id(read.callee.name),
+			...read.arguments.map((argument) => cloneAstNode(argument)),
+		),
+		origin,
+	);
+	return test === null ? direct : inheritOriginLoc(b.conditional(test, read, direct), origin);
+}
+
+// Names an emitted function body binds in its own scope: parameters, top-level
+// declarations, and `var` declarations in nested blocks.
+function collectFunctionScopeBindings(params, statements, into) {
+	for (const param of params) collectBindings(param, into);
+	const visit = (statement, topLevel) => {
+		if (statement == null || typeof statement !== 'object') return;
+		switch (statement.type) {
+			case 'VariableDeclaration':
+				if (topLevel || statement.kind === 'var') {
+					for (const declaration of statement.declarations || []) {
+						collectBindings(declaration.id, into);
+					}
+				}
+				return;
+			case 'FunctionDeclaration':
+			case 'ClassDeclaration':
+				if (topLevel && statement.id) into.add(statement.id.name);
+				return;
+			case 'BlockStatement':
+				for (const child of statement.body || []) visit(child, false);
+				return;
+			case 'IfStatement':
+				visit(statement.consequent, false);
+				visit(statement.alternate, false);
+				return;
+			case 'ForStatement':
+				visit(statement.init, false);
+				visit(statement.body, false);
+				return;
+			case 'ForInStatement':
+			case 'ForOfStatement':
+				visit(statement.left, false);
+				visit(statement.body, false);
+				return;
+			case 'WhileStatement':
+			case 'DoWhileStatement':
+			case 'LabeledStatement':
+				visit(statement.body, false);
+				return;
+			case 'TryStatement':
+				visit(statement.block, false);
+				visit(statement.handler?.body, false);
+				visit(statement.finalizer, false);
+				return;
+			case 'SwitchStatement':
+				for (const clause of statement.cases || []) {
+					for (const child of clause.consequent || []) visit(child, false);
+				}
+				return;
+			default:
+				return;
+		}
+	};
+	for (const statement of statements) visit(statement, true);
+	return into;
+}
+
+// A compiled body's parameters. The runtime calls every body as
+// `body(props, scope, extra)`, so the body takes `(props, __s, __extra)`: its
+// first authored parameter, or a `__props` placeholder, then the scope and the
+// extra. Each later authored parameter is a leading `var` bound to the argument
+// at its authored position, so it holds what the returned-JSX form's parameter
+// holds: a direct call's own argument, and for a body call the scope, the extra,
+// and then nothing. A rest parameter binds every argument from its position
+// on. The slice names no global, which a module may shadow
+// (`import { Array } from 'effect'`). A TypeScript `this` parameter types the
+// receiver and takes no argument.
+function compiledBodyParams(authored) {
+	const receiver = authored[0]?.type === 'Identifier' && authored[0].name === 'this' ? 1 : 0;
+	const own = authored.slice(receiver);
+	const first = own.length > 0 && own[0].type !== 'RestElement' ? own[0] : null;
+	const params = [
+		...authored.slice(0, receiver),
+		first ?? b.id('__props'),
+		b.id('__s'),
+		b.id('__extra'),
+	];
+	const bindings = [];
+	for (let i = first === null ? 0 : 1; i < own.length; i++) {
+		const param = own[i];
+		const argument = () =>
+			i === 1
+				? b.id('__s')
+				: i === 2
+					? b.id('__extra')
+					: b.member(b.id('arguments'), b.literal(i), true);
+		let binding;
+		if (param.type === 'RestElement') {
+			const slice = b.member(b.member(b.array([]), 'slice'), 'call');
+			binding = b.declarator(
+				param.argument,
+				b.call(slice, b.id('arguments'), ...(i > 0 ? [b.literal(i)] : [])),
+			);
+		} else if (param.type === 'AssignmentPattern') {
+			binding = b.declarator(
+				param.left,
+				b.conditional(b.binary('===', argument(), b.void0), param.right, argument()),
+			);
+		} else {
+			binding = b.declarator(param, argument());
+		}
+		bindings.push({
+			...inheritOriginLoc(b.declaration('var', [binding]), param),
+			_octaneParamBinding: true,
+		});
+	}
+	return { params, bindings };
+}
+
+// Argument 1 of a function whose own parameters already reach it: the second
+// parameter when the function never reassigns it, `arguments[1]` otherwise.
+function secondArgument(fn) {
+	const params = fn.params || [];
+	const second = params[1]?.type === 'AssignmentPattern' ? params[1].left : params[1];
+	return second?.type === 'Identifier' &&
+		params[0]?.type !== 'RestElement' &&
+		!(params[0]?.type === 'Identifier' && params[0].name === 'this') &&
+		!directCallAssignedNames(fn).has(second.name)
+		? b.id(second.name)
+		: b.member(b.id('arguments'), b.literal(1), true);
+}
+
+// The argument a body call receives its Scope in. A spare default parameter
+// keeps the function's `length` and avoids an `arguments` object; functions
+// that cannot take one read `arguments[1]`.
+function renderCallScopeParam(node, ctx) {
+	const params = node.params || [];
+	const statements = node.body?.body || [];
+	const strictBody = statements.some(
+		(statement) => statement.type === 'ExpressionStatement' && statement.directive === 'use strict',
+	);
+	if (
+		params.length > 1 ||
+		strictBody ||
+		params.some(
+			(param) =>
+				param.type === 'RestElement' || (param.type === 'Identifier' && param.name === 'this'),
+		)
+	) {
+		return { params, scope: inheritOriginLoc(secondArgument(node), node) };
+	}
+	const scope = inheritOriginLoc(b.id(allocCompilerName(ctx, '__renderScope')), node);
+	const spare = (identifier) => inheritOriginLoc(b.assignment_pattern(identifier, b.void0), node);
+	return {
+		params:
+			params.length === 0
+				? [spare(inheritOriginLoc(b.id(allocCompilerName(ctx, '__props')), node)), spare(scope)]
+				: [...params, spare(scope)],
+		scope,
+	};
+}
+
+/**
+ * A returned host root that keeps its fragment renderer's own range.
+ *
+ * The client renders every returned host root through a compiled fragment. That
+ * fragment mounts markerless when the host is its one template element, so the
+ * server inlines the host without a range. A host the client builds
+ * imperatively (keyed, `noscript`, document, or parser-repaired) is a descriptor
+ * hole inside the fragment instead, and the server frames that hole with its
+ * own range. A markerless fragment would adopt that inner range as its own
+ * during hydration, so both sides give this root the fragment range that
+ * returned fragments keep.
+ */
+function isRangedReturnedHost(node) {
+	return (
+		(node.type === 'Element' || node.type === 'JSXElement') &&
+		!isComponentTag(node) &&
+		(node._octaneImperativeHost === true || alwaysImperativeHost(node))
+	);
+}
+
 // Lower JSX at return position. Host roots always use the compiled-fragment
 // path. Any other root whose subtree contains template-only syntax uses it too.
 // Ordinary component/Fragment values retain descriptor lowering and its identity
@@ -20670,6 +21437,11 @@ function rewriteExtractedFragmentHole(expression, ctx, parentNs) {
 	}
 	const fold = ctx._foldCtx;
 	if (fold?.compInlinedSubs === undefined) return lowered;
+	// The owner's body sits outside any callback the directive is written in, so a
+	// sub-template reading that callback's names compiles in place instead. The
+	// hole props are built at the call site, inside the callback, so its closure
+	// sees them.
+	if (readsCallbackScope(lowered, ctx._callbackScopeNames)) return rewriteJsxValues(lowered, ctx);
 	return rewriteTsrxBlocks(lowered, ctx, 'fragment', fold.compInlinedSubs, parentNs, fold.cssHash);
 }
 
@@ -20741,7 +21513,18 @@ function isStaticReturnedFragmentComponent(node, ctx) {
 // text, nested host elements/fragments) stays in the template; nested component
 // children become renderable holes. The result is a self-contained fragment whose
 // only inputs are its props — compilable as an ordinary renderer.
-function extractFragment(node, ctx, holeProps, parentNs = 'html') {
+//
+// The renderer builds a keyed, `noscript`/document, or parser-repaired host as a
+// descriptor (isDescriptorBuiltHost), and a descriptor child must be a value: a
+// FoldedDirective or template-only component placeholder under it would be
+// dropped. Inside such a host (`inDescriptor`), directives, components, and child
+// `@{}` blocks lower to value holes here in the owning component, as a `@{}` body
+// and the server lower them. Misreading a template host as a descriptor host costs
+// only the template fast path; the reverse drops children.
+function extractFragment(node, ctx, holeProps, parentNs = 'html', inDescriptor = false) {
+	const descriptor =
+		inDescriptor ||
+		(node.type === 'JSXElement' && isDescriptorBuiltHost(node, parentNs === 'svg', ctx));
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	const newAttrs = [];
 	const mergedFragmentSpread = isFragmentLongForm(node, ctx) && hasJsxSpreadAttribute(node);
@@ -20851,14 +21634,16 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 	// Lower `{xs.map(item => <jsx key/>)}` children to a synthetic `@for`
 	// (ForOfStatement) up front so they take the directive fold path below
 	// (forBlock) instead of becoming a childSlot descriptor-array hole. Only when
-	// we have a fold context (always true on the .tsx host-fragment path).
-	const fragChildren = ctx._foldCtx
-		? (node.children || []).map((child) =>
-				child && child.type === 'JSXExpressionContainer'
-					? mapCallToForOf(child.expression, ctx) || child
-					: child,
-			)
-		: node.children || [];
+	// we have a fold context (always true on the .tsx host-fragment path) and the
+	// children are template children.
+	const fragChildren =
+		ctx._foldCtx && !descriptor
+			? (node.children || []).map((child) =>
+					child && child.type === 'JSXExpressionContainer'
+						? mapCallToForOf(child.expression, ctx) || child
+						: child,
+				)
+			: node.children || [];
 	const nodeTag = jsxTagName(node) || elementTagName(node);
 	const childNs =
 		typeof nodeTag === 'string' && !isComponentTag(node)
@@ -20908,9 +21693,12 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 				newChildren.push({ ...child, expression: rendered });
 			}
 		} else if (t === 'Element' || t === 'JSXElement') {
-			if (isLongFormTemplateSentinel(child, childNs, true, ctx)) {
+			if (descriptor && !isComponentTag(child)) {
+				newChildren.push(extractFragment(child, ctx, holeProps, childNs, true));
+			} else if (!descriptor && isLongFormTemplateSentinel(child, childNs, true, ctx)) {
 				newChildren.push(extractFragment(child, ctx, holeProps, childNs));
 			} else if (
+				!descriptor &&
 				isComponentTag(child) &&
 				(child._octaneBindingSite ||
 					(ctx._foldCtx?.templateComponentChildren === true &&
@@ -20955,7 +21743,24 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 			// A fragment nested inside the returned fragment shares the hoisted
 			// renderer. Extract its dynamic values/directives too; leaving it raw would
 			// make authored outer locals resolve against the renderer's hole-props object.
-			newChildren.push(extractFragment(child, ctx, holeProps, childNs));
+			newChildren.push(extractFragment(child, ctx, holeProps, childNs, descriptor));
+		} else if (descriptor && VALUE_DIRECTIVE_ARM_TYPES.has(t)) {
+			// lowerJsxChild folds the directive into a renderer owned by this
+			// component, the value a `@{}` body passes the same descriptor.
+			const hn = `h${holeProps.length}`;
+			holeProps.push(objectProp(hn, lowerJsxChild(child, ctx)));
+			newChildren.push(b.jsx_expression_container(memberProps(hn, child)));
+		} else if (descriptor && t === 'JSXCodeBlock') {
+			// lowerJsxChild lowers the block as it does under a `@{}` body's descriptor:
+			// a render-only block transparently, and a setup-bearing one through this
+			// component's fold. The renderer must never fold it, since that would move
+			// the block's setup away from the locals it closes over.
+			const value = lowerJsxChild(child, ctx);
+			if (value !== null) {
+				const hn = `h${holeProps.length}`;
+				holeProps.push(objectProp(hn, value));
+				newChildren.push(b.jsx_expression_container(memberProps(hn, child)));
+			}
 		} else if (t === 'JSXCodeBlock') {
 			const body = child.body || [];
 			if (body.length === 0) {
@@ -21389,11 +22194,16 @@ function lowerHostFragment(
 		node,
 	);
 	const renderer = compileFunctionBody(synthFn, ctx, fragName, parentNs, cssHash);
-	if ((node.type === 'Element' || node.type === 'JSXElement') && !isComponentTag(node)) {
+	if (
+		(node.type === 'Element' || node.type === 'JSXElement') &&
+		!isComponentTag(node) &&
+		!isRangedReturnedHost(node)
+	) {
 		// A host fragment is a SINGLE root element, so it can mount markerless (the
 		// element self-delimits) — matching `@{}`'s inline render exactly (no extra
 		// comment markers), which is required for byte-equal DOM when folding `@{}`.
-		// A returned JSX fragment may have multiple roots and must retain its range.
+		// A returned JSX fragment may have multiple roots and must retain its range,
+		// as must an imperatively built host (see isRangedReturnedHost).
 		ctx.hoistedHelpers.push(
 			inheritOriginLoc(
 				b.const(fragName, singleRootInitializer(ctx, functionExpressionFromDeclaration(renderer))),
@@ -21428,8 +22238,10 @@ function lowerHostFragment(
  *
  * In both cases the helper is added to `inlinedSubs` (visible in the
  * surrounding component-body scope) so it captures the parent component's
- * locals via closure. It cannot capture params of nested arrows — see
- * compiler README.
+ * locals via closure. The names a callback inside `node` binds are not in scope
+ * there, so with `leaveCallbackReads` a sub-template that reads one is left in
+ * place, for the rewriteJsxValues pass that must follow to compile inside that
+ * callback.
  */
 function rewriteTsrxBlocks(
 	node,
@@ -21438,8 +22250,15 @@ function rewriteTsrxBlocks(
 	inlinedSubs,
 	parentNs = 'html',
 	cssHash = null,
+	leaveCallbackReads = false,
 ) {
-	return mapAst(node, (n) => {
+	return rewrite(node, null);
+
+	function rewrite(root, callbackScope) {
+		return mapAst(root, (n) => visit(n, callbackScope));
+	}
+
+	function visit(n, callbackScope) {
 		if (n.type === 'Tsrx' || n.type === 'Tsx') {
 			const helperName = `__tsrx$${ctx.nextHelperId++}`;
 			const fakeBody = {
@@ -21453,6 +22272,8 @@ function rewriteTsrxBlocks(
 			return inheritOriginLoc(b.id(helperName), n);
 		}
 		if (n.type === 'ArrowFunctionExpression' && n.body && n.body.type === 'JSXCodeBlock') {
+			// The callback's names do not exist in the body the helper would join.
+			if (readsCallbackScope(n, callbackScope)) return n;
 			// `() => @{ … }` — new sub-template form. Hoist as a regular component
 			// body so its body.body (setup) + body.render (JSX) feed back through
 			// the standard compileFunctionBody path.
@@ -21466,11 +22287,90 @@ function rewriteTsrxBlocks(
 			);
 			fakeBody.generator = n.generator;
 			if (n.returnType !== undefined) fakeBody.returnType = n.returnType;
-			inlinedSubs.push(compileFunctionBody(fakeBody, ctx, helperName, parentNs, cssHash));
+			inlinedSubs.push(
+				withNestedTemplateScope(fakeBody, ctx, () =>
+					compileFunctionBody(fakeBody, ctx, helperName, parentNs, cssHash),
+				),
+			);
 			return inheritOriginLoc(b.id(helperName), n);
 		}
+		if (leaveCallbackReads && isFunctionNode(n)) {
+			const scope = new Set(callbackScope);
+			for (const name of collectCallbackBindings(n)) scope.add(name);
+			let out = n;
+			for (const key in n) {
+				if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+				const child = n[key];
+				if (child === null || typeof child !== 'object') continue;
+				const mapped = rewrite(child, scope);
+				if (mapped !== child) {
+					if (out === n) out = { ...n };
+					out[key] = mapped;
+				}
+			}
+			return out;
+		}
 		return null;
-	});
+	}
+}
+
+/**
+ * Compile a template function nested inside another body — a `() => @{ … }`
+ * sub-template (including the scoped child a setup-bearing `@{ … }` child
+ * lowers to) or a `function F() @{ … }` declared in a component — with its own
+ * params and locals visible to the constructs inside it.
+ *
+ * The nested function closes over the enclosing body, but its `@if`/`@for`/
+ * `@switch`/`@try` arms and lifted event bundles hoist to module scope and
+ * receive what they read through an env tuple that `helperCaptures` builds
+ * from `ctx.currentComponentLocals`. Every name visible at those call sites
+ * must be in that set: the enclosing body's, which the function still reaches,
+ * plus the function's own. A missing name is left out of the tuple and the
+ * hoisted arm reads it as a free identifier.
+ *
+ * A name the function introduces can shadow an enclosing lifetime-invariant
+ * binding with one that changes between renders, so it must not inherit that
+ * proof. `compileFunctionBody` recomputes the nested body's own invariants.
+ *
+ * Inside a module-level callback (`untracked`), nothing tracks the names the
+ * enclosing callbacks bind, so no env tuple can carry them. The whole nested
+ * compile, including the templates nested in it, then runs with no component
+ * context, which keeps every arm inline where it closes over those names.
+ */
+function withNestedTemplateScope(fn, ctx, compile, untracked = false) {
+	const prevLocals = ctx.currentComponentLocals;
+	const prevInvariantLocals = ctx.currentInvariantLocals;
+	const prevEventInvariantLocals = ctx.currentEventInvariantLocals;
+	const prevUntracked = ctx._untrackedScope;
+	const introduced = collectComponentLocals(fn);
+	if (prevLocals == null && (untracked || prevUntracked === true)) {
+		ctx._untrackedScope = true;
+	} else {
+		const locals = new Set(prevLocals);
+		for (const name of introduced) locals.add(name);
+		ctx.currentComponentLocals = locals;
+	}
+	ctx.currentInvariantLocals = withoutShadowedNames(prevInvariantLocals, introduced);
+	ctx.currentEventInvariantLocals = withoutShadowedNames(prevEventInvariantLocals, introduced);
+	try {
+		return compile();
+	} finally {
+		ctx._untrackedScope = prevUntracked;
+		ctx.currentComponentLocals = prevLocals;
+		ctx.currentInvariantLocals = prevInvariantLocals;
+		ctx.currentEventInvariantLocals = prevEventInvariantLocals;
+	}
+}
+
+function withoutShadowedNames(names, introduced) {
+	if (names == null || introduced.size === 0) return names;
+	let out = names;
+	for (const name of introduced) {
+		if (!out.has(name)) continue;
+		if (out === names) out = new Set(names);
+		out.delete(name);
+	}
+	return out;
 }
 
 const SETUP_VALUE_DIRECTIVE_TYPES = new Set([
@@ -21485,7 +22385,7 @@ const SETUP_VALUE_DIRECTIVE_TYPES = new Set([
 // `@{ … }` block is also folded as a setup value, but it is a sub-template rather
 // than a set of arms — `rewriteTsrxBlocks` owns its expression-position handling,
 // and the unowned-directive diagnostic's advice does not apply to it — so it is
-// deliberately absent here.
+// deliberately absent here. With no owning body, lowerJsxChild compiles it in place.
 const VALUE_DIRECTIVE_ARM_TYPES = new Set([
 	'JSXIfExpression',
 	'JSXForExpression',
@@ -21841,18 +22741,18 @@ function rewriteJsxValues(node, ctx, eagerMapCallbackRoots = false, eagerMapCall
 		const t = n && n.type;
 		if (isFunctionNode(n) && n.body?.type === 'JSXCodeBlock') {
 			const name = n.id?.name ?? allocCompilerName(ctx, '__template');
-			const previousLocals = ctx.currentComponentLocals;
 			// A nested body must not replace the enclosing component's warm plan.
 			const previousWarm = ctx._pendingWarm;
-			ctx.currentComponentLocals = collectComponentLocals(n);
+			const compile = () =>
+				ctx.mode === 'server'
+					? ssrCompileBody(n, ctx, name, null, [], 'opaque')
+					: compileFunctionBody(n, ctx, name, 'opaque');
 			try {
-				const compiled =
-					ctx.mode === 'server'
-						? ssrCompileBody(n, ctx, name, null, [], 'opaque')
-						: compileFunctionBody(n, ctx, name, 'opaque');
+				// A missing fold marks a module-level callback, whose names only this
+				// function's closure can reach.
+				const compiled = withNestedTemplateScope(n, ctx, compile, lower == null);
 				return functionExpressionFromDeclaration({ ...compiled, id: n.id ?? null }, n);
 			} finally {
-				ctx.currentComponentLocals = previousLocals;
 				ctx._pendingWarm = previousWarm;
 			}
 		}
@@ -21926,10 +22826,13 @@ function rewriteJsxValues(node, ctx, eagerMapCallbackRoots = false, eagerMapCall
 				// arms beside values they cannot reach. Drop the fold for this subtree so
 				// re-entries below (an attribute value re-enters rewriteJsxValues, with no
 				// function node left in view) cannot pick it back up, and the directive
-				// reaches the unowned diagnostic instead of folding into the wrong scope.
+				// reaches the unowned diagnostic instead of folding into the wrong scope. A
+				// `@{ … }` child block has no arms, so lowerJsxChild compiles it in place.
 				ctx._valueDirectiveLowering = null;
 			} else {
-				const introduced = collectComponentLocals(n);
+				// Including names bound in the callback's nested blocks, which a fold
+				// written in one of those blocks reads just the same.
+				const introduced = collectCallbackBindings(n);
 				const extended = new Set(previousLocals);
 				for (const name of introduced) extended.add(name);
 				ctx.currentComponentLocals = extended;
@@ -22000,6 +22903,13 @@ function rewriteJsxValues(node, ctx, eagerMapCallbackRoots = false, eagerMapCall
 function lowerInspectableJsxChild(child, ctx) {
 	const fold = ctx._valueDirectiveLowering;
 	if (fold == null) return lowerJsxChild(child, ctx);
+	// A render-only @{} block is transparent grouping: lowerJsxChild unwraps it
+	// to its render root. Letting lowerSetupValueDirectives fold it would produce
+	// a component range on the server while the descriptor path emits the
+	// unwrapped children on the client, breaking hydration.
+	if (child && child.type === 'JSXCodeBlock' && (child.body?.length ?? 0) === 0) {
+		return lowerJsxChild(child, ctx);
+	}
 	const prepared = lowerSetupValueDirectives(child, fold);
 	const t = prepared && prepared.type;
 	if (
@@ -22039,6 +22949,19 @@ function lowerJsxChild(child, ctx) {
 		if (fold != null) return fold(child);
 		rejectUnownedValueDirective(child);
 	}
+	if (t === 'JSXCodeBlock') {
+		// A render-only block is transparent grouping, as under a template host.
+		if ((child.body?.length ?? 0) === 0) {
+			return child.render ? lowerJsxChild(child.render, ctx) : null;
+		}
+		// A setup-bearing or code-only block is its own render scope. The owning
+		// body's fold compiles it into a renderer that closes over that body, the
+		// value both targets build. With no owning body, as inside a module-level
+		// callback, it compiles in place as the `() => @{ … }` child that
+		// normalizeChildren makes of it, closing over the callback's params.
+		const fold = ctx._valueDirectiveLowering;
+		return fold != null ? fold(child) : rewriteJsxValues(childCodeBlockArrow(child), ctx);
+	}
 	if (t === 'JSXFragment' || t === 'Fragment') {
 		const els = [];
 		for (const c of child.children || []) {
@@ -22066,7 +22989,7 @@ function lowerJsxChild(child, ctx) {
 				scopedElement,
 				inheritOriginLoc(b.id(rtAlias('Fragment')), child),
 				inheritOriginLoc(b.object([]), child),
-				inheritOriginLoc(b.arrow([], children), child),
+				inheritOriginLoc(deferredRead(ctx, children), child),
 			),
 			child,
 		);
@@ -22096,18 +23019,19 @@ function jsxNameToExpr(name) {
 // hit the TDZ, while a member, coercion, spread, or computed key can invoke
 // user code without containing a call. Function expressions are values here;
 // their bodies still run only when an event/render-prop consumer invokes them.
-function isStaticJsxValueExpression(expression) {
+function isStaticJsxValueExpression(expression, stableNames = null) {
 	const value = unwrapTsExpr(expression);
 	return (
 		isInvariantLiteral(value) ||
 		value?.type === 'ArrowFunctionExpression' ||
-		value?.type === 'FunctionExpression'
+		value?.type === 'FunctionExpression' ||
+		(stableNames !== null && value?.type === 'Identifier' && stableNames.has(value.name))
 	);
 }
 
 // A root member tag, spread, or dynamic prop can invoke user code before its
 // descriptor exists. Defer the complete record rather than just its children.
-function jsxValueRootNeedsRenderScope(node) {
+function jsxValueRootNeedsRenderScope(node, stableNames = null) {
 	const name = node.openingElement?.name || node.id;
 	if (
 		name?.type === 'MemberExpression' ||
@@ -22120,7 +23044,7 @@ function jsxValueRootNeedsRenderScope(node) {
 		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') return true;
 		if (attr.type !== 'Attribute' && attr.type !== 'JSXAttribute') continue;
 		if (attr.value?.type !== 'JSXExpressionContainer') continue;
-		if (!isStaticJsxValueExpression(attr.value.expression)) return true;
+		if (!isStaticJsxValueExpression(attr.value.expression, stableNames)) return true;
 	}
 	return false;
 }
@@ -22129,21 +23053,27 @@ function jsxValueRootNeedsRenderScope(node) {
 // syntax is effectful. Nested component/tag resolution and dynamic attributes
 // belong to their represented parent, so they make that parent's children lazy
 // even when the nested element has no expression children of its own.
-function jsxValueChildrenNeedRenderScope(node, descendantElementsOwnChildren = false) {
+function jsxValueChildrenNeedRenderScope(
+	node,
+	descendantElementsOwnChildren = false,
+	stableNames = null,
+) {
 	for (const child of node.children || []) {
 		if (child == null || child.type === 'JSXText' || child.type === 'Text') continue;
 		if (child.type === 'JSXExpressionContainer') {
 			if (
 				child.expression &&
 				child.expression.type !== 'JSXEmptyExpression' &&
-				!isStaticJsxValueExpression(child.expression)
+				!isStaticJsxValueExpression(child.expression, stableNames)
 			) {
 				return true;
 			}
 			continue;
 		}
 		if (child.type === 'Fragment' || child.type === 'JSXFragment') {
-			if (jsxValueChildrenNeedRenderScope(child, descendantElementsOwnChildren)) return true;
+			if (jsxValueChildrenNeedRenderScope(child, descendantElementsOwnChildren, stableNames)) {
+				return true;
+			}
 			continue;
 		}
 		if (child.type !== 'Element' && child.type !== 'JSXElement') return true;
@@ -22152,11 +23082,16 @@ function jsxValueChildrenNeedRenderScope(node, descendantElementsOwnChildren = f
 			if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') return true;
 			if (attr.type !== 'Attribute' && attr.type !== 'JSXAttribute') return true;
 			if (attr.value?.type !== 'JSXExpressionContainer') continue;
-			if (!isStaticJsxValueExpression(attr.value.expression)) return true;
+			if (!isStaticJsxValueExpression(attr.value.expression, stableNames)) return true;
 		}
 		// A fragment can retain its inspectable positional array when only a nested
 		// element's descendants are dynamic: that element already owns their scope.
-		if (!descendantElementsOwnChildren && jsxValueChildrenNeedRenderScope(child)) return true;
+		if (
+			!descendantElementsOwnChildren &&
+			jsxValueChildrenNeedRenderScope(child, false, stableNames)
+		) {
+			return true;
+		}
 	}
 	return false;
 }
@@ -22452,8 +23387,9 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 			const memoizedDescriptor = inheritOriginLoc(
 				b.call(
 					requireRuntimeForContext(ctx, ctx.nativeReads ? 'nativePuMemo' : 'useMemo'),
-					b.arrow(
-						[],
+					// Runs synchronously inside readChildren, so it reads the same snapshots.
+					deferredRead(
+						ctx,
 						b.sequence([b.assignment('=', b.id(freshName), b.literal(true)), childrenValue]),
 					),
 					b.array([rows, ...(captures ?? []).map((name) => inheritOriginLoc(b.id(name), host))]),
@@ -22504,7 +23440,10 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 		const scopedElement = ctx.nativeReads
 			? requireRuntimeForContext(ctx, 'nativeCreateScopedElement')
 			: rtAlias('createScopedElement');
-		const readChildren = inheritOriginLoc(b.arrow([], memoizedChildrenBody ?? childrenValue), node);
+		const readChildren = inheritOriginLoc(
+			deferredRead(ctx, memoizedChildrenBody ?? childrenValue),
+			node,
+		);
 		descriptor = inheritOriginLoc(
 			b.call(
 				scopedElement,
@@ -22538,11 +23477,19 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 		? requireRuntimeForContext(ctx, 'nativeCreateScopedValue')
 		: rtAlias('createScopedValue');
 	return inheritOriginLoc(
-		b.call(scopedValue, inheritOriginLoc(b.arrow([], descriptor), node)),
+		b.call(scopedValue, inheritOriginLoc(deferredRead(ctx, descriptor), node)),
 		node,
 	);
 }
 
+// A value-position JSX thunk: its body runs when Octane renders or inspects the
+// element. printNodeWithMap snapshots the reassigned bindings it reads, so it
+// sees their values from when the JSX evaluated (see deferred-snapshots.js).
+function deferredRead(ctx, body) {
+	ctx.deferredReads = true;
+	return markDeferredRead(b.arrow([], body));
+}
+
 // Short, unique, path-free slot description for non-HMR output: a djb2 hash of
 // the module filename + the per-module hook index. The DESCRIPTION is
 // load-bearing beyond debugging: resolveSlot/currentPathSlot (runtime) compose
@@ -23398,9 +24345,17 @@ function normalizeAuthoredJsxLiterals(ast) {
 }
 
 function requiresImperativeHostTree(root, ctx) {
+	return (
+		(ctx.mode !== 'server' && root._octaneImperativeHost === true) || alwaysImperativeHost(root)
+	);
+}
+
+// Hosts that both compile modes build imperatively. The server writes a
+// parser-repaired tree as a string, so repair cannot move its bindings there;
+// normalizeChildren frames it in the hole range the client hydrates instead.
+function alwaysImperativeHost(root) {
 	const tag = jsxTagName(root) || elementTagName(root);
 	return (
-		(ctx.mode !== 'server' && root._octaneImperativeHost === true) ||
 		hasJsxAttribute(root, 'key') ||
 		tag === 'noscript' ||
 		tag === 'html' ||
@@ -23485,6 +24440,17 @@ function rewriteImperativeHeadElements(node, ctx, namespace = 'html', inNoscript
 	};
 }
 
+// A JSXElement that normalizeChildren lowers with jsxElementToCreateElement
+// instead of the template compiler, so its whole subtree becomes descriptor
+// values. extractFragment uses the same test to keep that subtree's children in
+// value form.
+function isDescriptorBuiltHost(node, inSvg, ctx) {
+	return (
+		!isComponentTag(node) &&
+		(hasJsxAttribute(node, 'key') || (!inSvg && requiresImperativeHostTree(node, ctx)))
+	);
+}
+
 /**
  * Normalize a list of JSX child nodes into the shapes the emitters consume:
  *   - Indentation-only JSXText / JSX comments (`{…}` empty containers) → dropped
@@ -23632,12 +24598,7 @@ function normalizeChildren(
 			// Keys need a reconciliation boundary. Parser-sensitive host trees need
 			// imperative construction so HTML repair cannot change binding paths.
 			// The shared descriptor path provides both without taxing ordinary templates.
-			if (
-				ctx &&
-				allowImperative &&
-				!isComponentTag(n) &&
-				(hasJsxAttribute(n, 'key') || (!inSvg && requiresImperativeHostTree(n, ctx)))
-			) {
+			if (ctx && allowImperative && isDescriptorBuiltHost(n, inSvg, ctx)) {
 				out.push(
 					inheritOriginLoc(
 						{
@@ -23691,6 +24652,13 @@ function normalizeChildren(
 			// `unstable_Activity` starts with a lowercase letter but is a component
 			// when it resolves to the builtin. Keep that fact on this rare node only.
 			if (isActivityLongForm(n, ctx)) element.activityDescriptor = true;
+			// The client builds a parser-repaired host through the descriptor hole
+			// above. The server keeps its template string and nesting diagnostics,
+			// but frames it as that hole's range: the browser's repair then stays
+			// inside a range the client can adopt or discard, and later siblings
+			// keep their positions.
+			if (ctx?.mode === 'server' && allowImperative && !inSvg && n._octaneImperativeHost === true)
+				element.parserRepairRange = true;
 			// Preserve @tsrx/core's raw-text script discriminator without changing
 			// the normalized object shape of every ordinary element.
 			if (elementTagName(element) === 'script' && typeof n.content === 'string') {
@@ -25756,7 +26724,10 @@ function planJsx(
 			// Const-seeded straight into the bag factory args — no mount statement.
 			if (cc.isChild && !noTemplate) {
 				bag.constField(`_chv$${cc.id}`, 'null');
-				bag.constField(`_chp$${cc.id}`, 'undefined');
+				// An only-child hole's first render must reach childTextHole even for
+				// `undefined`: while hydrating, that call reconciles the host's server
+				// children, which no other binding owns.
+				bag.constField(`_chp$${cc.id}`, cc.onlyChildText ? 'unset' : 'undefined');
 			}
 		},
 	});
@@ -25801,15 +26772,23 @@ function planJsx(
 			);
 		}
 		// Const-seeded fields keep their registry strings until the factory call.
-		// A mixed-style scalar starts at its private owning scope so its first
-		// deferred write still runs for null/undefined. The same identity lets its
-		// setter distinguish a fresh mount from a preserved suspended retry.
+		// An `unset` field starts at its private owning scope, which no rendered
+		// value equals, so its first write still runs for null/undefined. For a
+		// mixed-style scalar, the same identity lets its setter distinguish a fresh
+		// mount from a preserved suspended retry.
 		const constArgNode = (expr) =>
-			expr === 'null' ? b.literal(null) : expr === 'style-unset' ? b.id('__s') : b.id(expr);
-		const bagFieldValue = (f) => (f.constExpr !== null ? constArgNode(f.constExpr) : b.id(f.local));
+			expr === 'null' ? b.literal(null) : expr === 'unset' ? b.id('__s') : b.id(expr);
+		const bagFieldValue = (f) =>
+			f.hostVar !== null
+				? b.id(f.hostVar)
+				: f.constExpr !== null
+					? constArgNode(f.constExpr)
+					: b.id(f.local);
 		const rootArg = () => (single ? b.id('_root') : b.literal(null));
 		if (bag.fields.length <= BAG_FACTORY_MAX) {
 			ctx.runtimeNeeded.add(`bag${bag.fields.length}`);
+			// The arity factory's object literal still declares every field, so an
+			// omitted trailing `undefined` seed keeps the same bag shape.
 			mountLines.push(
 				inheritOriginLoc(
 					b.stmt(
@@ -25820,7 +26799,9 @@ function planJsx(
 								`_$bag${bag.fields.length}`,
 								b.id('__s'),
 								rootArg(),
-								...bag.fields.map(bagFieldValue),
+								...optionalCallArgs(
+									...bag.fields.map((f) => (f.constExpr === 'undefined' ? null : bagFieldValue(f))),
+								),
 							),
 						),
 					),
@@ -26461,10 +27442,12 @@ function planJsx(
 								cc.valueExpr,
 								b.literal(cc.signalSite),
 								childAnchor ?? b.literal(null),
-								cc.anchorVar ? b.literal(true) : undefinedNode(),
-								undefinedNode(),
-								cc.coalesceRange ? b.literal(true) : undefinedNode(),
-								cc.onlyChildText ? b.literal(true) : undefinedNode(),
+								...optionalCallArgs(
+									cc.anchorVar ? b.literal(true) : null,
+									null,
+									cc.coalesceRange ? b.literal(true) : null,
+									cc.onlyChildText ? b.literal(true) : null,
+								),
 							),
 						),
 					),
@@ -26662,15 +27645,13 @@ function planJsx(
 			);
 			const memoAnchor = anchorNodeFor(cc, 'compAnchor');
 			const trailing = liteMemo
-				? [memoAnchor ?? undefinedNode(), b.literal(cc.invocationSite)]
-				: [
-						memoAnchor ?? undefinedNode(),
-						undefinedNode(),
-						cc.singleRoot ? b.literal(true) : undefinedNode(),
-						cc.inheritRange ? b.literal(true) : undefinedNode(),
-						undefinedNode(),
+				? optionalCallArgs(b.literal(cc.invocationSite), memoAnchor)
+				: optionalCallArgs(
 						b.literal(cc.invocationSite),
-					];
+						memoAnchor,
+						cc.singleRoot ? b.literal(true) : null,
+						cc.inheritRange ? b.literal(true) : null,
+					);
 			const witnessMiss = cc.autoMemoWitnesses.length
 				? witnessMissChain(cc.autoMemoWitnesses)
 				: null;
@@ -26711,7 +27692,7 @@ function planJsx(
 			continue;
 		}
 		// M3 inherit-range: the sole comp-call root of a `@{}` body — the slot
-		// BORROWS the enclosing block's marker range (10th positional arg), so it
+		// BORROWS the enclosing block's marker range (the `inherit` argument), so it
 		// mints nothing and the server skips the child's frame pair at the same
 		// site (ssrEmitComponent reads the same predicate). Supersedes lite (the
 		// borrow needs a real Block behind the slot) and singleRoot (the borrow
@@ -26722,7 +27703,6 @@ function planJsx(
 		if (cc.inheritRange) {
 			const componentHelper = cc.voidComponent ? '_$componentSlotVoid' : '_$componentSlot';
 			ctx.runtimeNeeded.add(cc.voidComponent ? 'componentSlotVoid' : 'componentSlot');
-			const inheritAnchor = anchorNodeFor(cc, 'compAnchor') ?? undefinedNode();
 			pushAfterStmt(
 				cc.id,
 				org,
@@ -26734,12 +27714,12 @@ function planJsx(
 						hostExpr(),
 						cc.compNode,
 						cc.propsExpr,
-						inheritAnchor,
-						undefinedNode(),
-						undefinedNode(),
-						b.literal(true),
-						undefinedNode(),
-						b.literal(cc.invocationSite),
+						...optionalCallArgs(
+							b.literal(cc.invocationSite),
+							anchorNodeFor(cc, 'compAnchor'),
+							null,
+							b.literal(true),
+						),
 					),
 				),
 			);
@@ -26766,8 +27746,7 @@ function planJsx(
 						hostExpr(),
 						cc.compNode,
 						cc.propsExpr,
-						liteAnchor ?? undefinedNode(),
-						b.literal(cc.invocationSite),
+						...optionalCallArgs(b.literal(cc.invocationSite), liteAnchor),
 					),
 				),
 			);
@@ -26780,14 +27759,14 @@ function planJsx(
 		// unmount move the slot DOM along with the block; an element host with
 		// no in-template anchor can safely append).
 		const compAnchor = anchorNodeFor(cc, 'compAnchor');
-		const trailing = [
-			compAnchor ?? undefinedNode(),
-			cc.keyExpr ?? undefinedNode(),
-			cc.singleRoot ? b.literal(true) : cc.maybeSingleRoot ? b.literal(2) : undefinedNode(),
-			undefinedNode(),
-			cc.keyExpr != null ? b.literal(true) : undefinedNode(),
+		const trailing = optionalCallArgs(
 			b.literal(cc.invocationSite),
-		];
+			compAnchor,
+			cc.singleRoot ? b.literal(true) : cc.maybeSingleRoot ? b.literal(2) : null,
+			null,
+			cc.keyExpr ?? null,
+			cc.keyExpr != null ? b.literal(true) : null,
+		);
 		let invocation = b.call(
 			componentHelper,
 			b.id('__s'),
@@ -26990,8 +27969,11 @@ const DEFERRABLE_MOUNT_KINDS = new Set([
 // field names are object properties, so unlike locals a minifier can never
 // shorten them; 1-char names are the shipped-bytes win. Each field is either
 // LOCAL-backed (the mount path assigns a pre-declared `_mN` local; the runtime
-// bag factory receives it positionally) or CONST-seeded (`null`/`undefined`
-// seeds pass straight to the factory — no local, no mount statement).
+// bag factory receives it positionally), CONST-seeded (`null`/`undefined`
+// seeds pass straight to the factory — no local, no mount statement), or
+// HOST-backed (a DOM host already held by the mount block's own `const _root` /
+// `const _elN`, which ensureVar declares before any binding mount and so before
+// the factory call: the factory reads that const directly, with no alias local).
 // Registration order = mount-write order = the factory's positional args =
 // the letter sequence, so `_$bagN(s, root, v0, v1, …)` builds `{a: v0, b: v1,
 // …}` with every field carrying its REAL mount value. `letter()` throws for a
@@ -27002,6 +27984,9 @@ const BAG_UC = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 // Highest shared-factory arity (bag0..bag16 in the runtime); bigger bags fall
 // back to `bagOf(__s, root, { … })` with an inline literal of real values.
 const BAG_FACTORY_MAX = 16;
+// Hosts the mount block declares as top-level consts. `__block.parentNode` is a
+// property read, so it keeps an ordinary local.
+const BAG_CONST_HOST = /^(?:_root|_el\d+)$/;
 function bagLetter(i) {
 	if (i < 26) return BAG_LC[i];
 	if (i < 52) return BAG_UC[i - 26];
@@ -27024,6 +28009,7 @@ function makeBag() {
 				name: bagLetter(i),
 				local: constExpr === undefined ? `_m${i}` : null,
 				constExpr: constExpr === undefined ? null : constExpr,
+				hostVar: null,
 			};
 			fields.push(r);
 			byKey.set(key, r);
@@ -27031,16 +28017,34 @@ function makeBag() {
 		return r;
 	};
 	return {
-		/** Mount-write target for `key` — the pre-declared local. */
-		local: (key) => reg(key, undefined).local,
-		/** Register one immutable DOM-host field; aliases reuse its first mount write. */
+		/**
+		 * Mount-time reference for `key` — the pre-declared local, or a host-backed
+		 * field's const (read-only: host() returned false, so nothing assigns it).
+		 */
+		local: (key) => {
+			const r = reg(key, undefined);
+			return r.hostVar ?? r.local;
+		},
+		/**
+		 * Register one immutable DOM-host field; aliases reuse its first mount write.
+		 * Returns true when the caller must emit `local(key) = host`.
+		 */
 		host: (key, host) => {
 			const existing = byHost.get(host);
 			if (existing !== undefined) {
 				byKey.set(key, existing);
 				return false;
 			}
-			byHost.set(host, reg(key, undefined));
+			// Only a field this call creates can be host-backed: a key already read
+			// through local() may have handed its `_mN` name to emitted code.
+			const fresh = !byKey.has(key);
+			const r = reg(key, undefined);
+			byHost.set(host, r);
+			if (fresh && BAG_CONST_HOST.test(host)) {
+				r.local = null;
+				r.hostVar = host;
+				return false;
+			}
 			return true;
 		},
 		/** Seed `key` with a constant expression (no local, no mount write). */
@@ -27078,6 +28082,19 @@ function tsrxExprNode(node, ctx, componentName, inlinedSubs, parentNs = 'html',
 const undefinedNode = () => b.id('undefined');
 const nullNode = () => b.literal(null);
 
+// Optional positional arguments of a runtime writer whose parameters default to
+// undefined. Pass `null` for an absent entry: trailing absent entries are
+// omitted and interior ones become explicit `undefined` placeholders. Only use
+// it for writers that never inspect `arguments.length` (bindSignalText does).
+// componentSlot, componentSlotVoid, and componentSlotLite order their tail after
+// `props` by how often a call site supplies it — (invocationSite, anchor,
+// singleRoot, inherit, key, hasKey) — so the common call keeps two of the six.
+function optionalCallArgs(...entries) {
+	let end = entries.length;
+	while (end > 0 && entries[end - 1] == null) end--;
+	return entries.slice(0, end).map((entry) => entry ?? undefinedNode());
+}
+
 // Reference a compiled mount local / host var by NAME. ensureVar hands back
 // `__block.parentNode` for bagless hosts — resolve the member chain; every
 // other name (`_root`, `_el3`) is a plain identifier.
@@ -27263,7 +28280,7 @@ function emitDeferredMount(bind, elVar, bag) {
 			: bind.kind === 'style' || bind.kind === 'styleProperties'
 				? `_sty$${bind.id}`
 				: `_prev$${bind.id}`,
-		bind.kind === 'styleProperty' || bind.kind === 'styleProperties' ? 'style-unset' : 'undefined',
+		bind.kind === 'styleProperty' || bind.kind === 'styleProperties' ? 'unset' : 'undefined',
 	);
 	if (bind.kind === 'styleProperties') {
 		if (bind.spread) bag.constField(`_styFull$${bind.id}`, 'undefined');
@@ -27297,22 +28314,22 @@ function directSignalBindingHelper(bind) {
 function directSignalBindingArgs(bind, host, previous, value = bind.expr, previousValue) {
 	const common = [b.id('__s'), previous, host];
 	if (bind.kind === 'text' || bind.kind === 'textOnlyChild') {
+		// (…, onlyChild, previousValue, seededText, bindingMarker). An ordinary
+		// update passes only its raw-value cache: seededText matters only before
+		// the first write. A binding-view marker stays on every call because
+		// presentation hydration can replay a retry through the update path.
 		return [
 			...common,
 			value,
 			b.literal(bind.signalSite, JSON.stringify(bind.signalSite)),
 			b.literal(bind.kind === 'textOnlyChild'),
-			...(previousValue !== undefined
-				? [
-						bind.seededText ? b.literal(1) : undefinedNode(),
-						bind.bindingMarker ? b.literal(bind.bindingMarker) : undefinedNode(),
-						previousValue,
-					]
-				: bind.bindingMarker
-					? [bind.seededText ? b.literal(1) : undefinedNode(), b.literal(bind.bindingMarker)]
-					: bind.seededText
-						? [b.literal(1)]
-						: []),
+			...optionalCallArgs(
+				previousValue ?? null,
+				bind.seededText && (previousValue === undefined || bind.bindingMarker)
+					? b.literal(1)
+					: null,
+				bind.bindingMarker ? b.literal(bind.bindingMarker) : null,
+			),
 		];
 	}
 	if (
@@ -29918,6 +30935,9 @@ function emitElementHtml(
 	}
 
 	let children = normalizeChildren(sourceChildren, childNs === 'svg', ctx, tag === 'noscript');
+	// Before metadata lifting, so a `<title>` inside a textarea is rejected here
+	// exactly as the server rejects it.
+	const textareaParts = textareaTextParts(tag, hostNs, children, ctx);
 	// NESTED document metadata / Float resources are zero-DOM children: lift
 	// them to the enclosing plan's head list (mounted out-of-band by
 	// emitHeadClient — scope-owned metadata, global resources), mirroring the
@@ -29933,8 +30953,51 @@ function emitElementHtml(
 		}
 		if (hasNestedHoist) children = children.filter((n) => n.type !== 'HeadHoist');
 	}
-	// Special case: a single Text child (only-child text fast path).
-	if (
+	if (textareaParts !== null) {
+		// Every child folds into one text binding (see textareaTextParts). It is a
+		// direct signal binding when any hole may carry a handle: the runtime then
+		// returns one derived handle over the parts.
+		let signalCapable = false;
+		for (const part of textareaParts) {
+			if (part.kind === 'static') continue;
+			if (canCarryDirectSignalHandle(part.expr)) signalCapable = true;
+			else if (canCarryDirectSignalHandle(part.expr, false, true)) ctx.signalBindingsUsed = true;
+			if (isDirectSignalHandleExpression(part.expr)) ctx.signalBindingsEager = true;
+		}
+		if (signalCapable) ctx.signalBindingsUsed = true;
+		const expr = inheritOriginLoc(
+			b.call(
+				requireRuntimeForContext(ctx, 'textareaText'),
+				...textareaTextArgs(textareaParts, (expression, text) =>
+					text
+						? resolveStyleExpr(expression, cssHash)
+						: tsrxExprNode(
+								resolveStyleExpr(rewriteChildHoleValue(expression, ctx), cssHash),
+								ctx,
+								componentName,
+								inlinedSubs,
+								childNs,
+								cssHash,
+							),
+				),
+			),
+			node,
+		);
+		// A customized built-in's constructor may inspect children while cloned.
+		const seededText = !directPropNames.has('is');
+		bindings.push({
+			id: bindings.length,
+			kind: 'textOnlyChild',
+			expr,
+			path,
+			seededText,
+			...(signalCapable
+				? { signalDirect: true, signalSite: directSignalSite(ctx, node, 'binding') }
+				: {}),
+		});
+		if (seededText) appendTemplatePart(html, ' ', 'text');
+	} else if (
+		// Special case: a single Text child (only-child text fast path).
 		children.length === 1 &&
 		children[0].type === 'Text' &&
 		!children[0]._octaneBindingText &&
@@ -32003,77 +33066,100 @@ function keyedSelectionDepIndex(itemName, keyBody, subStmts, runtimeDepNames, ct
 	return runtimeDepNames.indexOf(selected.name);
 }
 
-// The first root's legacy key already owns the entire row through keyFn.
-// Avoid a second descriptor boundary for that same key. Only consume a host
-// key when the row cannot change a collected key before a later child reads it.
-// Opaque rendering, spreads and duplicate keys retain the existing boundary.
-// Component keys and nested host keys retain their own reconciliation ranges.
+const isKeyAttribute = (attribute) => (attribute.name?.name || attribute.name) === 'key';
+
+// The legacy row-key spelling: a valued `key` attribute on the first element of
+// an @for body. It takes precedence over a header key, as in @tsrx/core's React
+// target. The reconciler reads row keys before the body runs, so the key can
+// read the item, the index and names outside the loop, but nothing the body
+// declares: the hoisted key function would throw a ReferenceError at runtime or
+// silently read an outer binding of the same name.
+function forRowKeyAttribute(node, ctx) {
+	const statements = node.body.body;
+	const element = statements.find((n) => n.type === 'Element' || n.type === 'JSXElement');
+	const attribute = (element?.attributes || element?.openingElement?.attributes || []).find(
+		isKeyAttribute,
+	);
+	// A valueless `<li key>` or a comment-only `key={}` carries no expression and
+	// falls through to the header key, the index, or the `x.id ?? x` default.
+	if (attribute?.value == null) return null;
+	const expression =
+		attribute.value.type === 'JSXExpressionContainer'
+			? attribute.value.expression
+			: attribute.value;
+	if (expression.type === 'JSXEmptyExpression') return null;
+	// The keyed element is the row's only output node, so every other statement
+	// is setup that runs in the row function.
+	const setup = statements.filter((statement) => statement !== element);
+	if (setup.length === 0) return expression;
+	// Analyze the setup with the key placed after it, as the body sees it. Only
+	// row declarations are in scope, so a key identifier that resolves to the
+	// row block, or to the row function a `var` hoists into, reads one. A
+	// binding the key declares itself, such as a callback parameter, resolves to
+	// a scope of its own.
+	const probe = b.stmt(expression);
+	const lexical = createLexicalAnalysis(b.block([...setup, probe]));
+	const rowScope = lexical.nodeScopes.get(probe);
+	const visit = (child, parent, key) => {
+		// Array holes, as in `[, row.id]`, arrive as null entries.
+		if (!child || typeof child !== 'object') return;
+		if (child.type === 'Identifier' && isIdentifierReference(child, parent, key, lexical)) {
+			const binding = lexical.resolveBinding(lexical.nodeScopes.get(child) ?? rowScope, child.name);
+			if (binding?.scope === rowScope || binding?.scope === lexical.rootScope) {
+				const l = attribute.loc && attribute.loc.start;
+				const at = l
+					? ` (${ctx.mapSourceName ? ctx.mapSourceName + ':' : ''}${l.line}:${l.column})`
+					: '';
+				throw new Error(
+					`The \`key\` attribute on this \`@for\` row reads \`${child.name}\`, which is declared ` +
+						'inside the loop body. Row keys are computed before the body runs, so they can only ' +
+						'read the item, its `index` binding, and names from outside the loop. Derive the key ' +
+						`from the item in the loop header instead: \`@for (const item of items; key …)\`.${at}`,
+				);
+			}
+		}
+		forEachRuntimeAstChild(child, (grandchild, childKey) => visit(grandchild, child, childKey));
+	};
+	visit(expression, probe, 'expression');
+	return expression;
+}
+
+// A `key` on the only output root of an @for body names the row, never a
+// separate element: a valued key is the row key above, and the root cannot
+// change identity inside a row that shares it. Leaving the key on the root
+// would give it a boundary that only repeats the row key: an intrinsic root
+// lowers to a keyed descriptor instead of the native template, and a component
+// root loses the row memo and its shared single-root range. Remove it so the
+// row compiles exactly as the header spelling does. Like a header key, the
+// reconciler reads it; an input that changes while rows render takes effect at
+// the next reconcile. Keyed elements below the root keep their own boundaries.
 function forItemTemplateBody(node, ctx) {
 	const body = node.body.body;
-	if (ctx._universalRuntimeUnit != null || body.length !== 1) return body;
-	const root = body[0];
-	if (!isPlainHostRoot(root) || isActivityLongForm(root, ctx) || isFragmentLongForm(root, ctx))
+	if (ctx._universalRuntimeUnit != null) return body;
+	let root = null;
+	for (const statement of body) {
+		if (!isJsxNode(statement)) continue;
+		if (root !== null) return body;
+		root = statement;
+	}
+	if (
+		(root?.type !== 'Element' && root?.type !== 'JSXElement') ||
+		(!isPlainHostRoot(root) && !isComponentTag(root)) ||
+		isActivityLongForm(root, ctx) ||
+		isFragmentLongForm(root, ctx)
+	)
 		return body;
 	const attrs = root.attributes || root.openingElement?.attributes || [];
-	let keyIndex = -1;
-	for (let i = 0; i < attrs.length; i++) {
-		const attr = attrs[i];
-		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') return body;
-		if (jsxAttrRawName(attr) !== 'key') continue;
-		if (keyIndex !== -1 || attr.value == null) return body;
-		keyIndex = i;
-	}
-	if (keyIndex === -1) return body;
-	const value = attrs[keyIndex].value;
-	const key = value.type === 'JSXExpressionContainer' ? value.expression : value;
-	if (!isDeferralSafeBundleArg(key)) return body;
-	// Destructuring must not invoke defaults, computed reads or an iterator.
-	if (!isAutoMemoPropsParam(node.left.declarations[0].id)) return body;
-	function stableHost(host) {
-		if (!isPlainHostRoot(host) || isActivityLongForm(host, ctx) || isFragmentLongForm(host, ctx))
-			return false;
-		const tag = host.id?.name ?? host.openingElement?.name?.name;
-		if (tag.includes('-') || tag === 'script') return false;
-		const attributes = host.attributes || host.openingElement?.attributes || [];
-		if (
-			attributes.some(
-				(attr) =>
-					attr.type === 'SpreadAttribute' ||
-					attr.type === 'JSXSpreadAttribute' ||
-					jsxAttrRawName(attr) === 'is' ||
-					jsxAttrRawName(attr) === 'children',
-			)
-		)
-			return false;
-		// Inspect values so deferred event/ref callbacks remain eligible.
-		const values = attributes.map((attr) => attr.value);
-		if (containsRenderCall(values) || containsAutoMemoUnsafeStructure(values)) return false;
-		for (const child of host.children || []) {
-			if (child.type === 'JSXText') continue;
-			if (child.type === 'Text' || child.type === 'JSXExpressionContainer') {
-				const expr = child.expression;
-				if (!expr || expr.type === 'JSXEmptyExpression') continue;
-				if (
-					!isKnownTextChildExpression(expr) ||
-					containsRenderCall([expr]) ||
-					containsAutoMemoUnsafeStructure([expr])
-				)
-					return false;
-			} else if (!stableHost(child)) return false;
-		}
-		return true;
-	}
-	if (!stableHost(root)) return body;
-	const kept = attrs.filter((_, index) => index !== keyIndex);
-	return [
-		root.openingElement
-			? {
-					...root,
-					...(root.attributes === undefined ? {} : { attributes: kept }),
-					openingElement: { ...root.openingElement, attributes: kept },
-				}
-			: { ...root, attributes: kept },
-	];
+	const kept = attrs.filter((attribute) => !isKeyAttribute(attribute));
+	if (kept.length === attrs.length) return body;
+	const unkeyed = root.openingElement
+		? {
+				...root,
+				...(root.attributes === undefined ? {} : { attributes: kept }),
+				openingElement: { ...root.openingElement, attributes: kept },
+			}
+		: { ...root, attributes: kept };
+	return body.map((statement) => (statement === root ? unkeyed : statement));
 }
 
 function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
@@ -32128,26 +33214,10 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		return inheritOriginLoc(b.arrow(params, keyExpr), keyExpr);
 	}
 
-	let keyFn = null;
 	// New TSRX surfaces `key` on the JSXForExpression itself (read via `node.key`
-	// below). Legacy / `<li key={…}>` attribute syntax is also accepted: scan the
-	// body for the first Element and pull its `key=` attr if any. Accept both
-	// the old `Element` IR and the raw new `JSXElement` shape that's reached
-	// here when the body wasn't routed through normalizeChildren.
-	const firstEl = node.body.body.find((n) => n.type === 'Element' || n.type === 'JSXElement');
-	if (firstEl) {
-		const keyAttr = (firstEl.attributes || firstEl.openingElement?.attributes || []).find(
-			(a) => (a.name?.name || a.name) === 'key',
-		);
-		// A valueless `<li key>` carries no expression — skip it (mirroring
-		// makeCompCall's null-value handling) and fall through to the header key /
-		// index / `x.id ?? x` default instead of crashing on `keyAttr.value.type`.
-		if (keyAttr && keyAttr.value != null) {
-			const inner =
-				keyAttr.value.type === 'JSXExpressionContainer' ? keyAttr.value.expression : keyAttr.value;
-			keyFn = mkKeyFn(inner);
-		}
-	}
+	// below). The legacy `<li key={…}>` attribute spelling takes precedence.
+	const attributeKey = forRowKeyAttribute(node, ctx);
+	let keyFn = attributeKey === null ? null : mkKeyFn(attributeKey);
 	if (!keyFn && node.key) {
 		keyFn = mkKeyFn(node.key);
 	}
@@ -32555,10 +33625,10 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	// parent is laid out per child (e.g. <tbody> in js-framework-benchmark).
 	// In addition to a direct host root, accept only narrowly-proven sole
 	// component and host-vs-host conditional roots; all other shapes keep item
-	// ranges.
+	// ranges. An item that can exit early renders no root when it does.
 	let singleRoot = false;
 	let singleRootExpr = null;
-	{
+	if (!armMayExit(subStmts)) {
 		const jsxChildren = subStmts.filter((s) => isJsxNode(s));
 		if (jsxChildren.length === 1) {
 			const c = jsxChildren[0];
@@ -32567,7 +33637,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 			// row itself is the block-boundary host, no Comment markers needed).
 			if (isSingleHostIfRoot(c)) {
 				singleRoot = true;
-			} else if (isPlainHostRoot(c)) {
+			} else if (isSingleTemplateHost(c)) {
 				singleRoot = true;
 			} else if ((c.type === 'Element' || c.type === 'JSXElement') && isComponentTag(c)) {
 				// A sole component item can share the component's proven host root as
@@ -32607,7 +33677,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		singleRoot = false;
 		singleRootExpr = null;
 	}
-	const ssrMarkerless = isSsrMarkerlessForItem(node);
+	const ssrMarkerless = isSsrMarkerlessForItem(node, subStmts);
 	const hostRootTag = subStmts[0]?.id?.name ?? subStmts[0]?.openingElement?.name?.name;
 	const hostMountSafe =
 		ctx.autoMemo === true &&
@@ -32856,6 +33926,232 @@ function rewriteEarlyExits(body, allowExplicitNull = false) {
 	return out;
 }
 
+/**
+ * Split a directive arm (an @if/@else, @switch case, @try/@pending/@catch, or
+ * @for/@empty body) into its guard-nested form. The arm renders its final node
+ * unless it exits first, and an exit is `return;`, `return null;`, or a
+ * `continue;` that targets the `@for`. Wherever the exit sits in the arm's
+ * setup, it ends only that arm's output, exactly like the top-level guard
+ * rewriteEarlyExits nests. An exit inside a setup statement sets a flag and
+ * breaks out of that statement, and the flag becomes the guard:
+ *
+ *   if (a) { if (b) return null; f(); } rest
+ *   ⇒
+ *   let __exit = false;
+ *   __exit: if (a) { if (b) { __exit = true; break __exit; } f(); }
+ *   if (!__exit) { rest }
+ *
+ * Jumps that target a loop, `switch`, or label inside the arm, and returns in
+ * a nested function, stay JavaScript. Statements the split renders (directives
+ * and JSX-bearing `if`/`for`/`try`) are arms themselves and lower their own
+ * exits when they compile. Legacy synthetic bodies only: a real function body
+ * returns through the generic value ABI.
+ */
+function splitArmExits(body, ctx) {
+	const tail = hookedTailStart(body);
+	if (tail !== -1) return retainTailHookState(body, tail, ctx);
+	let out = null;
+	for (let i = 0; i < body.length; i++) {
+		const stmt = body[i];
+		let lowered = stmt;
+		if (!isEarlyExitIf(stmt, true) && !isJsxNode(stmt)) {
+			// An unconditional exit: nothing after it runs.
+			if (isEarlyExitStatement(stmt, true)) return rewriteEarlyExits(out ?? body.slice(0, i), true);
+			let flag = null;
+			const replaced = replaceArmExits(stmt, false, false, ctx, (exit) => {
+				flag ??= allocCompilerName(ctx, '__exit');
+				return inheritOriginLoc(
+					b.block([
+						b.stmt(b.assignment('=', b.id(flag), b.literal(true, 'true'))),
+						{ type: 'BreakStatement', label: b.id(flag) },
+					]),
+					exit,
+				);
+			});
+			if (flag !== null) {
+				lowered = [
+					inheritOriginLoc(b.let(b.id(flag), b.literal(false, 'false')), stmt),
+					inheritOriginLoc(b.labeled(flag, replaced), stmt),
+					inheritOriginLoc(b.if(b.id(flag), b.return(), null), stmt),
+				];
+			}
+		}
+		if (out === null && lowered !== stmt) out = body.slice(0, i);
+		if (out !== null) Array.isArray(lowered) ? out.push(...lowered) : out.push(lowered);
+	}
+	return rewriteEarlyExits(out ?? body, true);
+}
+
+/**
+ * Keep the state of hooks declared after an early exit. A hook's state lives
+ * as long as the component, `@for` row, or directive arm that calls it, and an
+ * exit only skips the rest of one render, exactly like a plain `if` around the
+ * hook, a custom hook that returns early, or a value-returning component. The
+ * guard-nested form would give the tail its own arm scope, which unmounts, and
+ * resets that state, whenever the exit is taken. So when a slot-keyed hook
+ * follows the first exit, only the tail's output moves into the guarded arm.
+ * Its setup stays in this body as ordinary guard-nested JavaScript and hands
+ * the output the tail names it reads:
+ *
+ *   if (x) return; const [s] = useState(0); <b>{s}</b>
+ *   ⇒
+ *   let __tail = false;
+ *   if (!x) { const [s] = useState(0); __tail = [s]; }
+ *   if (__tail) { const [s] = __tail; <b>{s}</b> }
+ *
+ * An effect the exit skips still disconnects and reconnects, like any effect
+ * whose call site a completed render does not reach. `first` is the index
+ * hookedTailStart found.
+ */
+function retainTailHookState(body, first, ctx) {
+	const setup = [];
+	const output = [];
+	for (let i = first; i < body.length; i++) (isJsxNode(body[i]) ? output : setup).push(body[i]);
+	const declared = new Set();
+	for (const statement of setup) collectStatementBindings(statement, declared);
+	const read = collectFreeIdentifiers(b.block(output), []);
+	const names = [...declared].filter((name) => read.has(name)).sort();
+	const tail = allocCompilerName(ctx, '__tail');
+	const origin = body[first];
+	const handoff = names.length === 0 ? b.literal(true, 'true') : b.array(names.map((n) => b.id(n)));
+	const lowered = splitArmExits(
+		[
+			...body.slice(0, first),
+			...setup,
+			inheritOriginLoc(b.stmt(b.assignment('=', b.id(tail), handoff)), origin),
+		],
+		ctx,
+	);
+	const unpack =
+		names.length === 0
+			? []
+			: [inheritOriginLoc(b.const(b.array_pattern(names.map((n) => b.id(n))), b.id(tail)), origin)];
+	return [
+		inheritOriginLoc(b.let(b.id(tail), b.literal(false, 'false')), origin),
+		...lowered,
+		inheritOriginLoc(b.if(b.id(tail), b.block([...unpack, ...output]), null), origin),
+	];
+}
+
+/**
+ * Index of the first statement that can exit the body when a slot-keyed hook
+ * call follows it in setup and output follows it too, or -1. Otherwise the
+ * guard-nested form already leaves every hook on the body's own scope.
+ *
+ * The tail's output must also follow its last exit. An authored arm or `@{}`
+ * body always ends in its one output node, but a statement list with output
+ * ahead of a later exit renders that output under only the exits before it:
+ * the guard-nested form expresses that, and one guarded output cannot.
+ */
+function hookedTailStart(body) {
+	const first = body.findIndex(
+		(statement) => !isJsxNode(statement) && ownsArmJump(statement, false, false),
+	);
+	if (first === -1) return -1;
+	let output = false;
+	let hook = false;
+	for (let i = first; i < body.length; i++) {
+		const statement = body[i];
+		if (isJsxNode(statement)) {
+			output = true;
+			continue;
+		}
+		if (output && ownsArmJump(statement, false, false)) return -1;
+		hook ||= containsHookCall(statement, true);
+	}
+	return output && hook ? first : -1;
+}
+
+/**
+ * Replace each exit a setup statement owns with `exit(node)`. A value return
+ * and a `break` that targets the directive have no arm equivalent, so they are
+ * compile errors instead of literal JavaScript that renders "null"/"undefined",
+ * leaves stale DOM, or breaks out of a function.
+ */
+function replaceArmExits(node, loop, breakable, ctx, exit) {
+	if (node === null || typeof node !== 'object') return node;
+	if (Array.isArray(node)) {
+		let out = null;
+		for (let i = 0; i < node.length; i++) {
+			const mapped = replaceArmExits(node[i], loop, breakable, ctx, exit);
+			if (out === null && mapped !== node[i]) out = node.slice(0, i);
+			if (out !== null) out.push(mapped);
+		}
+		return out ?? node;
+	}
+	const type = node.type;
+	if (isArmJumpBoundary(type)) return node;
+	const jump = armJump(node, loop, breakable);
+	if (jump === 'exit') return exit(node);
+	if (jump === 'value') {
+		throw armExitError(ctx, node, ARM_VALUE_RETURN_MESSAGE);
+	}
+	if (jump === 'break') {
+		throw armExitError(ctx, node, ARM_BREAK_MESSAGE);
+	}
+	const innerLoop = loop || LOOP_TYPES.has(type);
+	const innerBreakable = breakable || innerLoop || type === 'SwitchStatement';
+	let out = null;
+	for (const key in node) {
+		if (AST_WALK_SKIP_KEYS.has(key)) continue;
+		const child = node[key];
+		if (child === null || typeof child !== 'object') continue;
+		const mapped = replaceArmExits(child, innerLoop, innerBreakable, ctx, exit);
+		if (mapped !== child) (out ??= { ...node })[key] = mapped;
+	}
+	return out ?? node;
+}
+
+/**
+ * Whether an arm's setup can end it before its output node, so the output is
+ * conditional. Single-root and markerless proofs that pick an arm's output by
+ * its JSX statements must reject such an arm: when the exit is taken there is
+ * no host to serve as the boundary.
+ */
+function armMayExit(statements) {
+	return statements.some(
+		(statement) => !isJsxNode(statement) && ownsArmJump(statement, false, false),
+	);
+}
+
+function ownsArmJump(node, loop, breakable) {
+	if (node === null || typeof node !== 'object') return false;
+	if (Array.isArray(node)) return node.some((child) => ownsArmJump(child, loop, breakable));
+	const type = node.type;
+	if (isArmJumpBoundary(type)) return false;
+	if (armJump(node, loop, breakable) !== null) return true;
+	const innerLoop = loop || LOOP_TYPES.has(type);
+	const innerBreakable = breakable || innerLoop || type === 'SwitchStatement';
+	for (const key in node) {
+		if (AST_WALK_SKIP_KEYS.has(key)) continue;
+		const child = node[key];
+		if (
+			child !== null &&
+			typeof child === 'object' &&
+			ownsArmJump(child, innerLoop, innerBreakable)
+		)
+			return true;
+	}
+	return false;
+}
+
+// Nested functions own their returns, and JSX and directives own their arms.
+function isArmJumpBoundary(type) {
+	return (
+		typeof type !== 'string' ||
+		FN_TYPES.has(type) ||
+		type === 'StaticBlock' ||
+		JSX_CHILDREN_BEARING_TYPES.has(type) ||
+		SETUP_VALUE_DIRECTIVE_TYPES.has(type)
+	);
+}
+
+function armExitError(ctx, node, message) {
+	const l = node.loc && node.loc.start;
+	const at = l ? ` (${ctx.mapSourceName ? ctx.mapSourceName + ':' : ''}${l.line}:${l.column})` : '';
+	return new Error(message + at);
+}
+
 /**
  * Turn compiler-proven shorthand guards into ordinary template control flow:
  *
@@ -32870,6 +34166,9 @@ function rewriteEarlyExits(body, allowExplicitNull = false) {
 function lowerNullishComponentExits(ast) {
 	const statements = ast.body || [];
 	let out = null;
+	// Compiler-name allocation for retainTailHookState, before the compile
+	// context exists. That context later collects these names from the AST.
+	let names = null;
 	for (let i = 0; i < statements.length; i++) {
 		const statement = statements[i];
 		let replacement = statement;
@@ -32879,7 +34178,15 @@ function lowerNullishComponentExits(ast) {
 		if (hasOnlyLowerableNullishExits(node)) {
 			const body = node.body;
 			const sequence = [...(body.body || []), ...(body.render ? [body.render] : [])];
-			const rewritten = rewriteEarlyExits(sequence, true);
+			const tail = hookedTailStart(sequence);
+			const rewritten =
+				tail === -1
+					? rewriteEarlyExits(sequence, true)
+					: retainTailHookState(
+							sequence,
+							tail,
+							(names ??= { usedCompilerNames: collectIdentifierNames(ast) }),
+						);
 			const renderIndex = rewritten.findIndex(isJsxNode);
 			if (renderIndex !== -1 && !rewritten.slice(renderIndex + 1).some(isJsxNode)) {
 				const loweredNode = {
@@ -32963,13 +34270,16 @@ function jsxArmRoot(node) {
  * separate scopes and excluded). Content that moves into an if/else ARM must
  * not call hooks: on the value path a hook behind an early return keeps its
  * slot-keyed state on the COMPONENT scope across branch flips, while an arm's
- * scope is torn down with the arm.
+ * scope is torn down with the arm. `slotKeyed` skips `use` and `useContext`,
+ * which are keyed by call order and context identity and hold no such state.
  */
-function containsHookCall(node) {
+function containsHookCall(node, slotKeyed = false) {
 	const seen = new WeakSet();
 	// The shared convention (HOOK_NAME_CONVENTION_RE) — covers `use`, `useX`,
 	// and the `unstable_`/`UNSTABLE_` prefixed forms.
-	const isHookName = isHookCalleeName;
+	const isHookName = slotKeyed
+		? (name) => name !== 'use' && name !== 'useContext' && isHookCalleeName(name)
+		: isHookCalleeName;
 	const walk = (value) => {
 		if (value == null || typeof value !== 'object') return false;
 		if (Array.isArray(value)) {
@@ -33190,15 +34500,18 @@ function collectModuleLevelBindings(moduleBody) {
 }
 
 function collectOctaneComponentWrapperLocals(moduleBody) {
+	return collectOctaneImportLocals(moduleBody, ['memo', 'lazy']);
+}
+
+// Local names of the given `octane` named imports.
+function collectOctaneImportLocals(moduleBody, importedNames) {
 	const names = new Set();
 	for (const stmt of moduleBody) {
 		if (stmt.type !== 'ImportDeclaration' || stmt.source?.value !== 'octane') continue;
 		for (const spec of stmt.specifiers || []) {
 			if (spec.type !== 'ImportSpecifier') continue;
 			const imported = spec.imported?.name ?? spec.imported?.value;
-			if ((imported === 'memo' || imported === 'lazy') && spec.local?.name) {
-				names.add(spec.local.name);
-			}
+			if (importedNames.includes(imported) && spec.local?.name) names.add(spec.local.name);
 		}
 	}
 	return names;
@@ -33305,6 +34618,8 @@ function lowerJsxReturnBranchesOf(node, moduleBody, moduleAnalysis = null) {
 		return null;
 	}
 	if (!/^[A-Z]/.test(node.id.name)) return null;
+	// A component's returned-JSX twin exists only for direct calls.
+	if (node._octaneDirectCallTwin === true) return null;
 	const state = { failed: false, totalReturns: 0, branchReturn: false, jsxReturns: 0, roots: [] };
 	const result = armifyComponentReturnList(node.body.body || [], state, false);
 	if (result === null || state.failed) return null;
@@ -33375,6 +34690,295 @@ function lowerJsxReturnBranchComponents(ast) {
 	return out === null ? ast : { ...ast, body: out };
 }
 
+/**
+ * A `@{ … }` body is shorthand for returning JSX: `(v) => @{ …; <p /> }` means
+ * `(v) => { …; return <p />; }`. A template function declared inside another
+ * function, or written inline as an argument, normally compiles as a render
+ * body instead, which receives its Scope as an argument and renders into it.
+ * That is sound only while the runtime is the one calling it: a `{helper}`
+ * child, a `<Helper />` tag, a render prop, or a portal body. A direct call
+ * `helper(v)` passes no Scope, so the body reads `__s.slots` of undefined, and
+ * `rows.map(helper)` passes the row index where the Scope would go.
+ *
+ * Lower such a function to its returned-JSX form, so a call returns a JSX value
+ * exactly as the `=> <jsx>` form does on the client and the server, whenever
+ * other code may call it:
+ *
+ * - a nested binding that code which can see it calls directly (`helper(v)`,
+ *   `helper.call(…)`), or passes to a call (`rows.map(helper)`, `run(helper)`);
+ * - an inline function passed straight to a call or `new`, at any depth,
+ *   module scope included: `rows.map((row) => @{ <li /> })`.
+ *
+ * The runtime's own calls render the lowered value too, so this costs only the
+ * template fast path. A call through a shadowing binding of the same name also
+ * lowers the helper. The runtime itself renders the function arguments of
+ * three calls, which keep that path: a `createPortal` body, matched by name as
+ * the portal lowering matches it, and the component or render-function child
+ * given to octane's `memo` or `createElement`.
+ *
+ * Module-level template bindings are components, which this pass leaves to
+ * the component pipeline. Async and generator functions keep their bodies,
+ * because their returned-JSX forms return a promise or an iterator instead of
+ * JSX.
+ */
+function lowerDirectlyCalledTemplateFunctions(ast) {
+	// Template function expressions, found anywhere.
+	const expressions = new Set();
+	// Nested template function node → [binding name, the function declaring it].
+	const candidates = new Map();
+	walkWithEnclosingFunctions(ast.body, (node, functions) => {
+		const type = node.type;
+		if (type === 'ArrowFunctionExpression' || type === 'FunctionExpression') {
+			if (isLowerableTemplateFunction(node)) expressions.add(node);
+			return;
+		}
+		if (functions.length === 0) return;
+		let fn = null;
+		let name;
+		if (type === 'FunctionDeclaration') {
+			fn = node;
+			name = node.id?.name;
+		} else if (type === 'VariableDeclarator' && node.id?.type === 'Identifier') {
+			const init = unwrapTsExpr(node.init);
+			if (init?.type === 'ArrowFunctionExpression' || init?.type === 'FunctionExpression') {
+				fn = init;
+				name = node.id.name;
+			}
+		}
+		if (fn !== null && name !== undefined && isLowerableTemplateFunction(fn)) {
+			candidates.set(fn, [name, functions[functions.length - 1]]);
+		}
+	});
+	if (expressions.size === 0 && candidates.size === 0) return ast;
+
+	let renderingCallees = null;
+	// True when the runtime, not the callee, renders the call's function arguments.
+	const rendersArguments = (call) => {
+		const callee = unwrapTsExpr(call.callee);
+		if (callee?.type !== 'Identifier') return false;
+		if (callee.name === 'createPortal') return true;
+		renderingCallees ??= collectOctaneImportLocals(ast.body, ['memo', 'createElement']);
+		return renderingCallees.has(callee.name);
+	};
+	const lowered = new Set();
+	const names = new Set([...candidates.values()].map(([name]) => name));
+	// Function node → candidate names that code inside it calls or passes on.
+	const calledIn = new Map();
+	const markCalled = (functions, name) => {
+		for (const fn of functions) {
+			let called = calledIn.get(fn);
+			if (called === undefined) calledIn.set(fn, (called = new Set()));
+			called.add(name);
+		}
+	};
+	walkWithEnclosingFunctions(ast.body, (node, functions) => {
+		const type = node.type;
+		if (
+			type !== 'CallExpression' &&
+			type !== 'OptionalCallExpression' &&
+			type !== 'NewExpression'
+		) {
+			return;
+		}
+		const name = directlyCalledName(node);
+		if (name !== null && names.has(name)) markCalled(functions, name);
+		// The callee calls a function passed to it, as `rows.map(fn)` does with
+		// the row index where a Scope would go.
+		const args = node.arguments;
+		for (let i = 0; i < args.length; i++) {
+			const arg = unwrapTsExpr(args[i]);
+			if (expressions.has(arg)) {
+				if (!rendersArguments(node)) lowered.add(arg);
+			} else if (arg?.type === 'Identifier' && names.has(arg.name) && !rendersArguments(node)) {
+				markCalled(functions, arg.name);
+			}
+		}
+	});
+	for (const [fn, [name, owner]] of candidates) {
+		if (calledIn.get(owner)?.has(name)) lowered.add(fn);
+	}
+	if (lowered.size === 0) return ast;
+	const lower = (node) =>
+		mapAst(node, (n) => (lowered.has(n) ? returnedJsxFunction(n, lower) : null));
+	return lower(ast);
+}
+
+function isLowerableTemplateFunction(fn) {
+	return fn.body?.type === 'JSXCodeBlock' && !fn.async && !fn.generator;
+}
+
+/**
+ * The name a call invokes as a function, or null. `helper(…)` and
+ * `helper?.(…)` call it, and so do `helper.call(…)`, `helper.apply(…)`, and
+ * `rows.map(helper)`, which passes the row index where a render body takes its
+ * Scope. Optional calls are an `optional` CallExpression inside a
+ * ChainExpression, or Babel's OptionalCallExpression and
+ * OptionalMemberExpression.
+ */
+function directlyCalledName(node) {
+	if (node.type !== 'CallExpression' && node.type !== 'OptionalCallExpression') return null;
+	let callee = unwrapTsExpr(node.callee);
+	if (callee?.type === 'MemberExpression' || callee?.type === 'OptionalMemberExpression') {
+		const method = callee.computed ? callee.property?.value : callee.property?.name;
+		callee =
+			method === 'call' || method === 'apply'
+				? unwrapTsExpr(callee.object)
+				: method === 'map'
+					? unwrapTsExpr(node.arguments[0])
+					: null;
+	}
+	return callee?.type === 'Identifier' ? callee.name : null;
+}
+
+/**
+ * A `@{ … }` function rewritten to its returned-JSX form `{ setup; return
+ * <jsx>; }`. `lower` maps the setup statements and the output first.
+ */
+function returnedJsxFunction(fn, lower) {
+	const block = fn.body;
+	const render = block.render;
+	const statements = [...lower(block.body)];
+	if (render != null) {
+		// A directive output returns as a value-position directive.
+		const value = lower(render);
+		// `() => @{ <p /> }` is exactly `() => <p />`.
+		if (statements.length === 0 && fn.type === 'ArrowFunctionExpression') {
+			return { ...fn, body: value, expression: true };
+		}
+		statements.push(inheritOriginLoc(b.return(value), render));
+	}
+	const body = inheritOriginLoc(b.block(statements), block);
+	return fn.type === 'ArrowFunctionExpression'
+		? { ...fn, body, expression: false }
+		: { ...fn, body };
+}
+
+/**
+ * A module-level `@{ … }` function is a component: rendering it as `<F />` or
+ * as a `{F}` child calls its compiled body with the Scope it renders into. It is
+ * also shorthand for `function F(v) { …; return <jsx>; }`, whose direct call
+ * `F(v)` returns a JSX value, and a direct call passes no Scope.
+ *
+ * When code in the module calls the function directly, or hands it to `.map`,
+ * declare that returned-JSX form beside it as `F$direct` and mark the
+ * component. Its compiled body then starts with
+ * `if (!isRenderCall(__s)) return F$direct(…)`, so body calls keep the
+ * compiled template while a direct call runs the returned-JSX form: its setup
+ * and hooks run in the caller, and its JSX resolves where the value renders.
+ * The body has already bound the parameters, so the returned-JSX form takes
+ * the names they bind.
+ *
+ * This runs before the passes that rewrite component bodies, because the
+ * returned-JSX form keeps the authored returns: `if (!v) return null;` still
+ * returns null from a direct call. A call through a shadowing binding of the
+ * same name also marks the component, which costs only bytes.
+ */
+function splitDirectlyCalledComponents(ast) {
+	const statements = ast.body || [];
+	let names = null;
+	for (const statement of statements) {
+		const node = moduleStatementDeclaration(statement);
+		if (isSplittableComponent(node)) (names ??= new Set()).add(node.id.name);
+	}
+	if (names === null) return ast;
+	const called = new Set();
+	walkWithEnclosingFunctions(statements, (node) => {
+		const name = directlyCalledName(node);
+		if (name !== null && names.has(name)) called.add(name);
+	});
+	if (called.size === 0) return ast;
+	const used = collectIdentifierNames(statements);
+	const out = [];
+	for (const statement of statements) {
+		const node = moduleStatementDeclaration(statement);
+		if (!isSplittableComponent(node) || !called.has(node.id.name)) {
+			out.push(statement);
+			continue;
+		}
+		let twin = `${node.id.name}$direct`;
+		while (used.has(twin)) twin += '$';
+		used.add(twin);
+		const bound = new Set();
+		for (const param of node.params || []) {
+			// A TypeScript `this` parameter declares a type, not an argument.
+			if (param.type !== 'Identifier' || param.name !== 'this') collectBindings(param, bound);
+		}
+		const args = [...bound];
+		const params = args.map((name) => inheritOriginLoc(b.id(name), node));
+		// The two functions compile differently, so they must not share nodes:
+		// module-wide walks skip a node they have already visited, and later
+		// passes key facts by node identity.
+		const returned = returnedJsxFunction(
+			inheritOriginLoc(b.function_declaration(b.id(twin), params, cloneAstNode(node.body)), node),
+			(value) => value,
+		);
+		out.push({ ...returned, _octaneDirectCallTwin: true });
+		const marked = { ...node, _octaneDirectCall: { name: twin, args } };
+		out.push(statement === node ? marked : { ...statement, declaration: marked });
+	}
+	return { ...ast, body: out };
+}
+
+function moduleStatementDeclaration(statement) {
+	return statement.type === 'ExportNamedDeclaration' ||
+		statement.type === 'ExportDefaultDeclaration'
+		? statement.declaration
+		: statement;
+}
+
+function isSplittableComponent(node) {
+	return (
+		isComponentFunction(node) && node.id != null && node.async !== true && node.generator !== true
+	);
+}
+
+// `if (!isRenderCall(__s)) return F$direct(…);` for a component that
+// splitDirectlyCalledComponents marked.
+function directCallGuard(node, ctx) {
+	const { name, args } = node._octaneDirectCall;
+	const call = b.call(name, ...args.map((arg) => inheritOriginLoc(b.id(arg), node)));
+	const test = b.unary('!', b.call(requireRuntimeForContext(ctx, 'isRenderCall'), b.id('__s')));
+	return inheritOriginLoc(b.if(test, inheritOriginLoc(b.return(call), node), null), node);
+}
+
+function withDirectCallGuard(fn, node, ctx) {
+	if (node._octaneDirectCall === undefined) return fn;
+	// The guard passes the parameters on, so it follows the leading bindings of
+	// those that compiledBodyParams binds from the arguments.
+	const body = fn.body.body;
+	let bound = 0;
+	while (body[bound]?._octaneParamBinding === true) bound++;
+	return {
+		...fn,
+		body: {
+			...fn.body,
+			body: [...body.slice(0, bound), directCallGuard(node, ctx), ...body.slice(bound)],
+		},
+	};
+}
+
+/** Visit every node with the functions that enclose it, outermost first. */
+function walkWithEnclosingFunctions(root, visit) {
+	const functions = [];
+	const walk = (node) => {
+		if (node == null || typeof node !== 'object') return;
+		if (Array.isArray(node)) {
+			for (const child of node) walk(child);
+			return;
+		}
+		visit(node, functions);
+		const isFunction = isFunctionNode(node);
+		if (isFunction) functions.push(node);
+		for (const key in node) {
+			if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+			const child = node[key];
+			if (child !== null && typeof child === 'object') walk(child);
+		}
+		if (isFunction) functions.pop();
+	};
+	walk(root);
+}
+
 function isJsxNode(node) {
 	if (!node) return false;
 	if (isWrappedJsxDirective(node)) return true;
@@ -33384,12 +34988,16 @@ function isJsxNode(node) {
 	if (node.type === 'JSXElement' || node.type === 'JSXFragment') return true;
 	// New TSRX directive nodes — always JSX-position. normalizeChildren will
 	// lower them to IfStatement / ForOfStatement / TryStatement / SwitchStatement
-	// when planJsx runs over them.
+	// when planJsx runs over them. A child `@{ … }` block in a statement list is
+	// a directive arm's output node, never setup: normalizeChildren makes a
+	// render-only block transparent and gives a setup-bearing one its own scope,
+	// exactly as it does for a block among element children.
 	if (
 		node.type === 'JSXIfExpression' ||
 		node.type === 'JSXForExpression' ||
 		node.type === 'JSXTryExpression' ||
 		node.type === 'JSXSwitchExpression' ||
+		node.type === 'JSXCodeBlock' ||
 		node.type === 'JSXExpressionContainer' ||
 		node.type === 'JSXText' ||
 		node.type === 'JSXStyleElement'
@@ -33420,6 +35028,18 @@ function isWrappedJsxDirective(node) {
 	);
 }
 
+// `@for` item bodies and `@switch` cases wrap a child `@{ … }` block written as
+// their output in an ExpressionStatement. The parser admits a block only as a
+// body's final statement, so unwrap just that one. A block inside plain JS
+// control flow in the body's setup is wrapped the same way and stays a
+// JavaScript expression, exactly like an element written there.
+function unwrapOutputCodeBlock(statements) {
+	const last = statements[statements.length - 1];
+	return last?.type === 'ExpressionStatement' && last.expression?.type === 'JSXCodeBlock'
+		? [...statements.slice(0, -1), last.expression]
+		: statements;
+}
+
 function bodyContainsJsx(node) {
 	if (!node) return false;
 	if (node.type === 'BlockStatement') return node.body.some(isJsxNode);
@@ -33487,10 +35107,13 @@ const esrapCommentOptions = {
  * literal raws are re-derived centrally before the print.
  */
 function printNodeWithMap(node, ctx) {
-	const printable = stripTsOnlyWrappers(escapeMultilineStringLiterals(node), {
+	let printable = stripTsOnlyWrappers(escapeMultilineStringLiterals(node), {
 		filename: ctx.mapSourceName,
 		enums: null,
 	});
+	if (ctx.deferredReads === true) {
+		printable = snapshotDeferredReads(printable, (name) => allocCompilerName(ctx, `${name}$`));
+	}
 	if (assertPrintedLocs()) assertNodeLocs(printable);
 	const { code, map } = esrapPrint(printable, withDeferredImports(esrapTsx(esrapCommentOptions)), {
 		sourceMapSource: ctx.mapSourceName,