octane 0.2.2 → 0.2.4

package/dist/compiler/compile.js

@@ -39,6 +39,8 @@ import {
 	strongHash,
 } from '@tsrx/core';
 import { parseModule } from '#octane/compiler-parser';
+import { createStyleScopePass } from './style-scopes.js';
+import { decodeHTMLStrict } from 'entities';
 import { print as esrapPrint } from 'esrap';
 import esrapTsx from 'esrap/languages/tsx';
 import { buildFatSegments } from './fat-segments.js';
@@ -106,7 +108,13 @@ import {
 	cssStyleValue,
 	hyphenateStyleName,
 } from '../dom-tables.js';
+import { isDelegatedEventProp } from '../event-names.js';
 import { sanitizeURLAttribute } from '../sanitize-url.js';
+import {
+	invalidHtmlNestingWithAncestor,
+	invalidHtmlNestingWithParent,
+	invalidHtmlTextNesting,
+} from '../html-tree-validation.js';
 
 // --- Parser-AST immutability enforcement ------------------------------------
 //
@@ -233,6 +241,10 @@ function inheritOriginLoc(root, origin) {
 	if (origin == null || origin.loc == null) return root;
 	const { start, end, loc } = origin;
 	mapAst(root, (node) => {
+		// A parsed `<style>` body is a CSS AST whose positions are relative to the
+		// CSS text, never to the module: stamping module positions onto it would
+		// corrupt the scoped-CSS render (and it is parser-owned, so shared).
+		if (node.type === 'StyleSheet') return node;
 		// Only real AST nodes are stamped — mapAst also visits typeless data
 		// objects (TemplateElement.value, Literal.regex, embedded config), which
 		// must stay untouched (and may be frozen).
@@ -310,6 +322,13 @@ function markSynthesizedAttr(attr) {
 	return attr;
 }
 
+/** A compiler-added scope-hash class, not an authored `class`/`className`. */
+function isSynthesizedClassAttr(attr) {
+	const raw = jsxAttrRawName(attr);
+	if (raw !== 'class' && raw !== 'className') return false;
+	return attr.name?.metadata?.tsrx_synthesized_origin === true;
+}
+
 // Curated exact origins (`inspect: true`). A generated token whose authored
 // counterpart the compiler KNOWS — the `$$click` slot key of an `onClick`, the
 // block helper an `@if`/`@for` lowers to — but which the module map alone
@@ -622,7 +641,7 @@ const CONTROLLED_KIND_HELPERS = {
 // recorder (recordBakedAttrOrigins) derives the name/value offsets from that
 // shape arithmetically — keep the invariant when adding forms.
 function bakeStaticAttr(attrName, lv, tag, namespace = 'html') {
-	if (lv == null) return '';
+	if (lv == null || attrName === 'innerText' || attrName === 'textContent') return '';
 	const isCustom =
 		(namespace === 'html' || namespace === 'opaque') && tag !== undefined && tag.includes('-');
 	const lower = attrName.toLowerCase();
@@ -663,6 +682,8 @@ function bakeStaticAttr(attrName, lv, tag, namespace = 'html') {
 		return lv ? ` ${lower}=""` : '';
 	}
 	if (typeof lv === 'string') {
+		if (!isCustom && (lower === 'rowspan' || lower === 'start') && Number.isNaN(Number(lv)))
+			return '';
 		if (!isCustom && POSITIVE_NUMERIC_ATTR_PROPS.has(lower) && !(Number(lv) >= 1)) return '';
 		if (
 			!isCustom &&
@@ -1565,12 +1586,13 @@ function inheritSoleCompRoot(bodyNodes, ctx) {
 // Collect the LOCAL names bound to the octane boundary builtins (see
 // inheritSoleCompRoot) from a module's import declarations. Aliased imports
 // (`import { Suspense as S }`) are matched by their local binding.
-function collectOctaneBoundaryNames(astBody) {
+function collectOctaneBoundaryNames(astBody, onlySuspense = false) {
 	const names = new Set();
 	for (const node of astBody) {
 		if (node.type !== 'ImportDeclaration' || node.source.value !== 'octane') continue;
 		for (const sp of node.specifiers || []) {
 			const imported = sp.imported?.name;
+			if (onlySuspense && imported !== 'Suspense') continue;
 			if (
 				(imported === 'Suspense' ||
 					imported === 'ErrorBoundary' ||
@@ -4713,6 +4735,225 @@ function containsRenderCall(stmts, memoCtx = null) {
 	return found;
 }
 
+// Built-in hooks whose render-time work cannot schedule an update for the
+// calling component. Their function arguments run later (commit, event, or
+// never), so those bodies are deferred like any other closure.
+const SETUP_PASSIVE_HOOKS = new Set([
+	'useCallback',
+	'useRef',
+	'useEffect',
+	'useLayoutEffect',
+	'useInsertionEffect',
+	'useImperativeHandle',
+	'useEffectEvent',
+	'useId',
+	'useDeferredValue',
+	'useTransition',
+	'useFormStatus',
+	'useActionState',
+	'useFormState',
+	'useContext',
+	'use',
+]);
+// Built-in hooks that invoke a function argument synchronously during render
+// (a memo factory, a lazy initializer, a snapshot reader, an optimistic
+// reducer, a linked-state reconciler). Those bodies belong to setup.
+const SETUP_SYNC_FACTORY_HOOKS = new Set([
+	'useMemo',
+	'useState',
+	'useLinkedState',
+	'useReducer',
+	'useSyncExternalStore',
+	'useOptimistic',
+]);
+// Standard globals that only project their arguments. A user-defined
+// `toString`/`valueOf`/`toJSON` that schedules a render violates the hook rules
+// in React and Octane alike, so these count as call-free setup.
+const SETUP_PURE_GLOBAL_CALLEES = new Set([
+	'String',
+	'Number',
+	'Boolean',
+	'BigInt',
+	'Symbol',
+	'parseInt',
+	'parseFloat',
+	'isNaN',
+	'isFinite',
+	'encodeURI',
+	'encodeURIComponent',
+	'decodeURI',
+	'decodeURIComponent',
+]);
+// Namespace members that never invoke an argument. `Array.from`,
+// `Object.groupBy`, `Object.fromEntries`, and friends iterate or call user
+// code, so they stay unclassified. JSON's replacer and reviver positions are
+// checked like a hook factory (see walkInvokedArgument).
+const SETUP_PURE_NAMESPACE_MEMBERS = new Map([
+	['Math', null],
+	[
+		'Number',
+		new Set(['isFinite', 'isInteger', 'isNaN', 'isSafeInteger', 'parseFloat', 'parseInt']),
+	],
+	['Object', new Set(['entries', 'freeze', 'hasOwn', 'is', 'isFrozen', 'keys', 'values'])],
+	['Array', new Set(['isArray', 'of'])],
+	['Date', new Set(['now', 'parse', 'UTC'])],
+	['JSON', new Set(['parse', 'stringify'])],
+]);
+
+// Every binding name the module declares anywhere. A global namespace shadowed
+// by any local, parameter, or import is treated as an unknown callee.
+function collectModuleBoundNames(ast) {
+	const names = new Set();
+	const seen = new WeakSet();
+	function walk(n) {
+		if (!n || typeof n !== 'object') return;
+		if (Array.isArray(n)) {
+			for (const x of n) walk(x);
+			return;
+		}
+		if (seen.has(n)) return;
+		seen.add(n);
+		switch (n.type) {
+			case 'VariableDeclarator':
+				collectBindings(n.id, names);
+				break;
+			case 'FunctionDeclaration':
+			case 'FunctionExpression':
+			case 'ArrowFunctionExpression':
+				if (n.id) names.add(n.id.name);
+				for (const param of n.params || []) collectBindings(param, names);
+				break;
+			case 'ClassDeclaration':
+			case 'ClassExpression':
+				if (n.id) names.add(n.id.name);
+				break;
+			case 'CatchClause':
+				collectBindings(n.param, names);
+				break;
+			case 'ImportSpecifier':
+			case 'ImportDefaultSpecifier':
+			case 'ImportNamespaceSpecifier':
+				if (n.local) names.add(n.local.name);
+				break;
+		}
+		for (const key in n) {
+			if (AST_WALK_SKIP_KEYS.has(key)) continue;
+			walk(n[key]);
+		}
+	}
+	walk(ast);
+	return names;
+}
+
+/**
+ * Can this setup schedule a render-phase update for its own component? A
+ * setter, dispatcher, transition start, custom hook, or any other call the
+ * compiler cannot classify may; the built-in hooks above and standard pure
+ * globals cannot. Closures are deferred unless a built-in hook runs them
+ * during render. This admits the setup checkpoint, an optimization over the
+ * runtime's own child-initialization guards, so an unclassified callee fails
+ * closed to emitting the checkpoint.
+ */
+function setupCanScheduleSelfUpdate(stmts, ctx) {
+	let found = false;
+	const seen = new WeakSet();
+	const bound = ctx._moduleBoundNames;
+	const isGlobal = (name) => bound !== undefined && !bound.has(name);
+	function walk(n, deep) {
+		if (found || !n) return;
+		if (Array.isArray(n)) {
+			for (const x of n) walk(x, deep);
+			return;
+		}
+		if (typeof n !== 'object') return;
+		const t = n.type;
+		if (!t) return;
+		if (seen.has(n)) return;
+		seen.add(n);
+		if (
+			!deep &&
+			(t === 'ArrowFunctionExpression' || t === 'FunctionExpression' || t === 'FunctionDeclaration')
+		) {
+			return;
+		}
+		if (t === 'CallExpression' || t === 'OptionalCallExpression') {
+			const hook = n._octaneImportedHook;
+			if (hook !== undefined && SETUP_PASSIVE_HOOKS.has(hook)) {
+				walk(n.arguments, deep);
+				return;
+			}
+			if (hook !== undefined && SETUP_SYNC_FACTORY_HOOKS.has(hook)) {
+				for (const argument of n.arguments) walkInvokedArgument(argument);
+				return;
+			}
+			const callee = n.callee;
+			if (
+				callee?.type === 'Identifier' &&
+				n._octaneUnboundCallee === true &&
+				SETUP_PURE_GLOBAL_CALLEES.has(callee.name)
+			) {
+				walk(n.arguments, true);
+				return;
+			}
+			if (
+				callee?.type === 'MemberExpression' &&
+				!callee.computed &&
+				callee.object?.type === 'Identifier' &&
+				callee.property?.type === 'Identifier' &&
+				SETUP_PURE_NAMESPACE_MEMBERS.has(callee.object.name) &&
+				isGlobal(callee.object.name)
+			) {
+				const members = SETUP_PURE_NAMESPACE_MEMBERS.get(callee.object.name);
+				if (members === null || members.has(callee.property.name)) {
+					if (callee.object.name === 'JSON') {
+						walk(n.arguments[0], true);
+						for (let index = 1; index < n.arguments.length; index++)
+							walkInvokedArgument(n.arguments[index]);
+					} else walk(n.arguments, true);
+					return;
+				}
+			}
+			found = true;
+			return;
+		}
+		if (t === 'NewExpression' || t === 'TaggedTemplateExpression') {
+			found = true;
+			return;
+		}
+		for (const key in n) {
+			if (AST_WALK_SKIP_KEYS.has(key)) continue;
+			walk(n[key], deep);
+		}
+	}
+	// A sync-factory hook may invoke any argument whose value can be a function.
+	// Only shapes that visibly cannot be callable, or whose bodies are visible
+	// here, keep the analysis open; a named factory, member, call result, or
+	// conditional fails closed exactly like an unclassified call.
+	function walkInvokedArgument(argument) {
+		if (found || !argument) return;
+		switch (argument.type) {
+			case 'ArrowFunctionExpression':
+			case 'FunctionExpression':
+			case 'Literal':
+			case 'TemplateLiteral':
+			case 'BinaryExpression':
+			case 'UnaryExpression':
+			case 'UpdateExpression':
+				walk(argument, true);
+				return;
+			case 'ArrayExpression':
+				// Dependency and initial-value arrays are never invoked; their
+				// elements are ordinary setup expressions.
+				walk(argument.elements, true);
+				return;
+			default:
+				found = true;
+		}
+	}
+	for (const s of stmts) walk(s, false);
+	return found;
+}
+
 // A hook call is identified by naming convention — the same signal React and
 // React Compiler key on — plus the exact `unstable_` and `UNSTABLE_` staging
 // prefixes bindings expose (`unstable_useRouterState` in @octanejs/remix-router
@@ -6485,9 +6726,21 @@ function mapCallbackCapturesLexicalReceiver(root) {
 	return walk(root);
 }
 
-// Recognise `{style (expr)}` — TSRX parses it as a plain
-// `CallExpression(style, [expr])` (the dedicated `Style` intrinsic node is
-// gone); resolveStyleExpr rewrites it into a scoped class-string expression.
+// Scoped `<style>` blocks, `$class`, and `apply` (RFC tsrx-org/RFCs#1): one
+// copy-on-write pre-pass per top-level statement, see ./style-scopes.js.
+const { applyStyleScopes } = createStyleScopePass({
+	inheritOriginLoc,
+	markSynthesized,
+	markSynthesizedAttr,
+	headResourceKind,
+	isCompositeJsxTag,
+	isStyleCall,
+});
+
+// Recognise `style(expr)` — a plain `CallExpression(style, [expr])`, Octane's
+// class-string expression. The style-scope pre-pass (./style-scopes.js)
+// resolves it where TSRX reads a class value (attribute values and template
+// child holes, the `style` attribute excepted); anywhere else it is a user call.
 function isStyleCall(node) {
 	return (
 		node &&
@@ -6499,26 +6752,14 @@ function isStyleCall(node) {
 	);
 }
 
-// Resolve a `{style (expr)}` CallExpression (see isStyleCall) into a plain
-// expression that yields a class string, with the component's scoped css hash
-// prepended (so `{style ('row')}` in a component with hash "tsrx-abc" produces
-// "tsrx-abc row"). Literal values inline; dynamic values become a runtime
-// string concat. Components without a <style> block (no hash) — and any other
-// expression shape — pass through untouched.
-function resolveStyleExpr(node, cssHash) {
-	if (!node) return node;
-	if (!isStyleCall(node) || !cssHash) return node;
-	const inner = node.arguments[0];
-	if (inner.type === 'Literal' && typeof inner.value === 'string') {
-		const combined = inner.value ? `${cssHash} ${inner.value}` : cssHash;
-		// The resolved class string maps to the authored `{style (…)}` call.
-		return b.literal(combined, JSON.stringify(combined), node);
-	}
-	// Dynamic: emit `(<hash> + ' ' + (expr))` so absent/null produces "<hash> ".
-	return inheritOriginLoc(
-		b.binary('+', b.literal(cssHash + ' ', JSON.stringify(cssHash + ' ')), inner),
-		node,
-	);
+// The emitters' former `style(expr)` expansion. The pre-pass resolves every
+// class-string position before the emitters run, and a `style(...)` still on
+// the AST here is a user call in another position (a `style={style(p)}` value,
+// a child hole's call argument), which must print as authored — so this is a
+// pass-through kept at its call sites; `cssHash` is only the "this component
+// owns scoped CSS" flag they thread along.
+function resolveStyleExpr(node, _cssHash) {
+	return node;
 }
 
 /**
@@ -6544,6 +6785,11 @@ function isComponentFunction(node) {
 // hooks slotted (via withSlot) and its returned JSX lowered to a descriptor, and
 // whatever USES it (`<Foo/>` / `{expr}`) is what renders it. (Async/generator
 // excluded; a `use*` custom hook that returns JSX is still a hook, not this.)
+//
+// Owned returns inside `if`/`else`/`switch`/`try`/loops count: a function whose
+// only JSX exits are nested still needs the return-JSX path so scoped `<style>`
+// (hash stamp, injectStyle, `ref` class-map writes) runs. Nested function
+// bodies are a different component/value boundary and are ignored.
 function isReturnJsxFunction(node) {
 	if (!node) return false;
 	if (node.type !== 'FunctionDeclaration' && node.type !== 'FunctionExpression') return false;
@@ -6553,9 +6799,58 @@ function isReturnJsxFunction(node) {
 	if (node.id == null) return false;
 	if (node.async || node.generator) return false;
 	if (!node.body || node.body.type !== 'BlockStatement') return false;
-	return (node.body.body || []).some(
-		(s) => s.type === 'ReturnStatement' && s.argument && isJsxNode(s.argument),
-	);
+	const statements = node.body.body || [];
+	for (let i = 0; i < statements.length; i++) {
+		if (statementHasOwnedJsxReturn(statements[i])) return true;
+	}
+	return false;
+}
+
+/** @param {any} stmt @returns {boolean} */
+function statementHasOwnedJsxReturn(stmt) {
+	if (!stmt) return false;
+	if (stmt.type === 'ReturnStatement') return !!(stmt.argument && isJsxNode(stmt.argument));
+	if (stmt.type === 'BlockStatement') {
+		const list = stmt.body || [];
+		for (let i = 0; i < list.length; i++) {
+			if (statementHasOwnedJsxReturn(list[i])) return true;
+		}
+		return false;
+	}
+	if (stmt.type === 'IfStatement') {
+		return (
+			statementHasOwnedJsxReturn(stmt.consequent) || statementHasOwnedJsxReturn(stmt.alternate)
+		);
+	}
+	if (stmt.type === 'SwitchStatement') {
+		const cases = stmt.cases || [];
+		for (let i = 0; i < cases.length; i++) {
+			const consequent = cases[i].consequent || [];
+			for (let j = 0; j < consequent.length; j++) {
+				if (statementHasOwnedJsxReturn(consequent[j])) return true;
+			}
+		}
+		return false;
+	}
+	if (stmt.type === 'TryStatement') {
+		return (
+			statementHasOwnedJsxReturn(stmt.block) ||
+			(stmt.handler ? statementHasOwnedJsxReturn(stmt.handler.body) : false) ||
+			statementHasOwnedJsxReturn(stmt.finalizer)
+		);
+	}
+	if (
+		stmt.type === 'ForStatement' ||
+		stmt.type === 'ForInStatement' ||
+		stmt.type === 'ForOfStatement' ||
+		stmt.type === 'WhileStatement' ||
+		stmt.type === 'DoWhileStatement' ||
+		stmt.type === 'LabeledStatement' ||
+		stmt.type === 'WithStatement'
+	) {
+		return statementHasOwnedJsxReturn(stmt.body);
+	}
+	return false;
 }
 
 /** True when `node` is one plain lowercase host element (never a component/fragment). */
@@ -8333,7 +8628,9 @@ function compileAuthored(source, filename, options, bundlerMetadata) {
 		throw new Error(`Unknown compile mode "${mode}" — expected 'client' or 'server'.`);
 	}
 	const cleanFilename = cleanCompileFilename(filename);
-	const analyzedAst = parseModule(source, cleanFilename);
+	const analyzedAst = markParserSensitiveHosts(
+		normalizeAuthoredJsxLiterals(parseModule(source, cleanFilename)),
+	);
 	analyzeTsrx(analyzedAst, cleanFilename);
 	adoptParserAst(analyzedAst);
 	assertNativeReadDiagnostics(analyzedAst, source, cleanFilename, options);
@@ -9023,8 +9320,12 @@ function compileInternal(
 	// that are ever assigned (`foo = bar`) are excluded: their identity is then
 	// as mutable as a module `let`, which fails closed.
 	ctx.moduleFunctionDeclarations = collectImmutableModuleFunctions(ast.body);
+	// Global namespaces are only trusted by the setup checkpoint analysis when
+	// no module binding shadows them (see setupCanScheduleSelfUpdate).
+	ctx._moduleBoundNames = collectModuleBoundNames(ast);
 	// M3 inherit-range exclusion set (see inheritSoleCompRoot).
 	ctx._octaneBoundaryNames = collectOctaneBoundaryNames(ast.body);
+	ctx._octaneSuspenseNames = collectOctaneBoundaryNames(ast.body, true);
 	const productionEffects = !ctx.hmr && !ctx.dev && !ctx.profile;
 	const exportedComponents = ast.body.filter(
 		(statement) =>
@@ -9579,16 +9880,11 @@ function compileInternal(
 			// use, custom helpers, etc.) — merged into the single prelude import.
 			addUserImportSpecifiers(ctx, node);
 		} else {
-			// Style maps: rewrite `const x = <style>…</style>` before printing — the
-			// initialiser becomes an ObjectExpression with hashed class names, and
-			// the stylesheet flows through the regular cssInjections pipeline.
-			node = applyStyleMap(node, ctx);
-			// Also handle `export const x = <style>…</style>` (declaration wrapped
-			// in an ExportNamedDeclaration).
-			if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-				const declaration = applyStyleMap(node.declaration, ctx);
-				if (declaration !== node.declaration) node = { ...node, declaration };
-			}
+			// Style blocks anywhere in a non-component statement: assigned blocks
+			// (`const x = <style>…</style>`, exported or nested in a helper) become
+			// class-map objects and their sheets flow through cssInjections; scoped
+			// blocks inside plain functions' templates get their scope hashes.
+			node = applyStyleScopes(node, ctx).node;
 			// HOOKS EVERYWHERE: a plain function (a custom hook, a helper) can hold
 			// octane hooks too — slot them the same way components do, so their base
 			// hooks get a per-call-site symbol (and custom-hook calls inside get one to
@@ -10143,6 +10439,7 @@ function compileServer(
 	// M3 inherit-range exclusion set — must match the client compile's
 	// (see inheritSoleCompRoot; both modes read the same import declarations).
 	ctx._octaneBoundaryNames = collectOctaneBoundaryNames(ast.body);
+	ctx._octaneSuspenseNames = collectOctaneBoundaryNames(ast.body, true);
 
 	// Style maps are module values and can be referenced by a component declared
 	// before the map itself. Lower every top-level map before compiling any
@@ -10156,11 +10453,18 @@ function compileServer(
 		let newBody = null;
 		const statements = ast.body;
 		for (let i = 0; i < statements.length; i++) {
-			let node = applyStyleMap(statements[i], ctx);
-			if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-				const declaration = applyStyleMap(node.declaration, ctx);
-				if (declaration !== node.declaration) node = { ...node, declaration };
-			}
+			// Components lower their own scopes inside compileServerComponent so
+			// only the CSS they own is emitted per render; every other statement's
+			// blocks are module-level.
+			const statement = statements[i];
+			const declaration =
+				statement.type === 'ExportDefaultDeclaration' || statement.type === 'ExportNamedDeclaration'
+					? statement.declaration
+					: statement;
+			const node =
+				isComponentFunction(declaration) || isReturnJsxFunction(declaration)
+					? statement
+					: applyStyleScopes(statement, ctx).node;
 			if (newBody === null && node !== statements[i]) newBody = statements.slice(0, i);
 			if (newBody !== null) newBody.push(node);
 		}
@@ -10240,7 +10544,8 @@ function compileServer(
 				},
 			});
 		} else {
-			bodyNodes.push(rewriteModuleJsxValues(node, ctx));
+			const fnName = node.id?.name || node.declaration?.id?.name || 'module';
+			bodyNodes.push(rewriteModuleJsxValues(rewriteHookCalls(node, ctx, fnName), ctx));
 		}
 	}
 
@@ -10319,11 +10624,11 @@ function compileServerComponent(node, ctx) {
 	const isExported = !!(node.export || node.default);
 	const isDefault = !!node.default;
 
-	// Scoped <style>: applyCssScoping stamps hash classes + registers cssInjections.
+	// Scoped <style>: applyStyleScopes stamps scope classes + registers cssInjections.
 	// Capture this component's entries to emit injectStyle INSIDE the body (so the
 	// active server render collects CSS only for components it actually renders).
 	const beforeCss = ctx.cssInjections.length;
-	const scoping = applyCssScoping(node, ctx);
+	const scoping = applyStyleScopes(node, ctx);
 	node = scoping.node;
 	const cssHash = scoping.cssHash;
 	const cssEntries = [...ctx.moduleCssInjections, ...ctx.cssInjections.slice(beforeCss)].sort(
@@ -10351,6 +10656,12 @@ function compileServerComponent(node, ctx) {
 			cssEntries,
 			'opaque',
 			node.body?.type === 'JSXCodeBlock',
+			null,
+			false,
+			false,
+			// Imported themes this component applies are touched at the top of
+			// its body (serverThemeTouchStatements) so their CSS precedes its own.
+			scoping.runtimeApplied,
 		);
 	} finally {
 		ctx.currentComponentLocals = prevLocals;
@@ -10366,7 +10677,10 @@ function compileServerComponent(node, ctx) {
 	const warmStatement =
 		warmNode === null
 			? null
-			: inheritOriginLoc(b.stmt(b.assignment('=', b.member(b.id(name), '__warm'), warmNode)), node);
+			: inheritOriginLoc(
+					b.stmt(b.call(requireRuntimeForContext(ctx, 'markWarm'), b.id(name), warmNode)),
+					node,
+				);
 
 	// Mirror the client emission's hoisting rule (see compileComponent): a
 	// component referenced ABOVE its declaration keeps real function-declaration
@@ -10382,7 +10696,7 @@ function compileServerComponent(node, ctx) {
 						b.logical(
 							'&&',
 							b.binary('===', b.unary('typeof', b.id(name)), b.literal('function', "'function'")),
-							b.assignment('=', b.member(b.id(name), '__warm'), warmNode),
+							b.call(requireRuntimeForContext(ctx, 'markWarm'), b.id(name), warmNode),
 						),
 					),
 					node,
@@ -10432,6 +10746,8 @@ function ssrCompileBody(
 	componentNs = null,
 	returnedFragmentTemplate = false,
 	returnedFragmentRoot = false,
+	themeTouches = [],
+	unboxedHtml = false,
 ) {
 	const prevMapTemps = ctx.currentMapTemps;
 	ctx.currentMapTemps = [];
@@ -10447,6 +10763,8 @@ function ssrCompileBody(
 			componentNs,
 			returnedFragmentTemplate,
 			returnedFragmentRoot,
+			themeTouches,
+			unboxedHtml,
 		);
 	} finally {
 		ctx.currentMapTemps = prevMapTemps;
@@ -10464,6 +10782,10 @@ function ssrCompileBodyWithMapTemps(
 	componentNs,
 	returnedFragmentTemplate,
 	returnedFragmentRoot,
+	// Imported themes the component's scopes apply — only the component body
+	// itself passes them; nested branch/loop helpers (ssrCompileSub) pass none.
+	themeTouches,
+	unboxedHtml,
 ) {
 	const returnedOutput = node.body?.type === 'JSXCodeBlock' && hasOwnValueReturn(node);
 	const mapTemps = ctx.currentMapTemps;
@@ -10617,6 +10939,7 @@ function ssrCompileBodyWithMapTemps(
 	ctx._valueDirectiveLowering = prevValueDirectiveLowering;
 
 	const body = [];
+	body.push(...serverThemeTouchStatements(themeTouches ?? [], ctx, node));
 	if (cssEntries && cssEntries.length) {
 		ctx.runtimeNeeded.add('injectStyle');
 		for (const entry of cssEntries) {
@@ -10685,7 +11008,12 @@ function ssrCompileBodyWithMapTemps(
 		node.params.length > 0
 			? [...node.params, b.id('__s'), b.id('__extra')]
 			: [b.id('__props'), b.id('__s'), b.id('__extra')];
-	body.push(b.return(htmlExpr));
+	// 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
+	// flag belongs to this body only; nested callbacks keep their own contract.
+	if (!unboxedHtml) ctx.runtimeNeeded.add('ssrHtml');
+	body.push(b.return(unboxedHtml ? htmlExpr : ssrCall('ssrHtml', [htmlExpr], node)));
 	const origin =
 		node.loc != null
 			? node
@@ -10836,6 +11164,23 @@ function ssrCall(helper, args, origin) {
 	);
 }
 
+/**
+ * `_$touchStyleMap(theme)` for every imported theme a server component's
+ * scopes apply, emitted before the component's own `injectStyle` calls so the
+ * theme's CSS (a lazily injecting `_$styleMap`) lands first in the request
+ * collector and the applying scope's rules win the cascade.
+ */
+function serverThemeTouchStatements(runtimeApplied, ctx, origin) {
+	if (!runtimeApplied || runtimeApplied.length === 0) return [];
+	ctx.runtimeNeeded.add('touchStyleMap');
+	return runtimeApplied.map((expression) =>
+		inheritOriginLoc(
+			b.stmt(ssrCall('touchStyleMap', [cloneAstNode(expression)], expression)),
+			origin,
+		),
+	);
+}
+
 function ssrThunk(expression, origin) {
 	return inheritOriginLoc(b.arrow([], expression), origin);
 }
@@ -10849,17 +11194,17 @@ function ssrSourcePair(present, value, origin) {
 }
 
 /**
- * One `[spread, name, value]` source row for a grouped attribute helper. The
- * name literal is the only token in the group that names THIS attribute, so it
- * is what the authored name is claimed against (see registerAttrLoweringOrigin);
- * the helper itself stays anchored on the element it serializes.
+ * One `[spread, name, value, merge?]` source row for a grouped attribute helper.
+ * The name literal is the only token in the group that names THIS attribute, so
+ * it is what the authored name is claimed against (see registerAttrLoweringOrigin);
+ * the helper itself stays anchored on the element it serializes. A trailing
+ * `true` marks a synthesized scope class that must merge with a spread's class.
  */
-function ssrDirectSource(ctx, name, value, origin) {
+function ssrDirectSource(ctx, name, value, origin, merge) {
 	registerAttrLoweringOrigin(ctx, origin?.name, null, name);
-	return inheritOriginLoc(
-		b.array([b.literal(false, 'false'), b.literal(name, JSON.stringify(name)), value]),
-		origin,
-	);
+	const cells = [b.literal(false, 'false'), b.literal(name, JSON.stringify(name)), value];
+	if (merge) cells.push(b.literal(true, 'true'));
+	return inheritOriginLoc(b.array(cells), origin);
 }
 
 /**
@@ -11022,14 +11367,15 @@ function ssrEmitNode(
 				ctx.runtimeNeeded.add(fn);
 				return ssrCall(fn, [resolveStyleExpr(rewriteHookCalls(expr, ctx, name), cssHash)], node);
 			}
-			ctx.runtimeNeeded.add('ssrChild');
 			// rewriteJsxValues lowers any JSX embedded in the expression (e.g.
 			// `{cond && <div/>}`, a ternary, a `.map(x => <Row/>)`) to printable
 			// createElement(...) descriptors — exactly like ssrEmitTsrxExpression and
 			// the client makeChildCall. Without it the raw JSX leaks into the emitted
 			// ssrChild(...) call as unparseable source.
+			const childHelper = nlGuard ? 'ssrChildPre' : 'ssrChild';
+			ctx.runtimeNeeded.add(childHelper);
 			const childExpr = ssrCall(
-				'ssrChild',
+				childHelper,
 				[
 					resolveStyleExpr(rewriteJsxValues(rewriteHookCalls(expr, ctx, name), ctx), cssHash),
 					b.id('__s'),
@@ -11617,7 +11963,15 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 				);
 				attrExpr = tsrxExprNode(attrInner, ctx, name, inlinedSubs);
 			}
-			attrSources.push(ssrDirectSource(ctx, rawAttrName, bindAttributeEvaluation(attrExpr), attr));
+			attrSources.push(
+				ssrDirectSource(
+					ctx,
+					rawAttrName,
+					bindAttributeEvaluation(attrExpr),
+					attr,
+					isSynthesizedClassAttr(attr),
+				),
+			);
 			continue;
 		}
 
@@ -11901,9 +12255,11 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		staticTextLiteral(onlyChild0.expression) === null &&
 		!isKnownStringChildExpression(onlyChild0.expression, ctx.knownStringChildLocals)
 	) {
-		ctx.runtimeNeeded.add('ssrChildText');
+		const childHelper =
+			tag === 'pre' || tag === 'textarea' || tag === 'listing' ? 'ssrChildTextPre' : 'ssrChildText';
+		ctx.runtimeNeeded.add(childHelper);
 		childrenExpr = ssrCall(
-			'ssrChildText',
+			childHelper,
 			[
 				resolveStyleExpr(
 					rewriteJsxValues(rewriteHookCalls(onlyChild0.expression, ctx, name), ctx),
@@ -12202,8 +12558,7 @@ function ssrEmitComponent(node, ctx, name, inlinedSubs, parentNs, cssHash, compo
 		const children = rewriteOpaqueTitles(sourceChildren, ctx, 'opaque');
 		const opaqueChildren = !activityDescriptor && !isFragmentLongForm(node, ctx);
 		const descriptorChildren =
-			(tagBindingName(node) !== null &&
-				ctx.descriptorChildrenBindings?.has(tagBindingName(node))) ||
+			isDescriptorChildrenTag(node, ctx) ||
 			ctx._tsxValuePos ||
 			(returnedFragmentTemplate && !requiresTemplateNormalization(node, parentNs, true, ctx));
 		if (descriptorChildren) {
@@ -12394,6 +12749,7 @@ function ssrCompileSub(
 	componentNs,
 	returnedFragmentTemplate = false,
 	returnedFragmentRoot = false,
+	unboxedHtml = false,
 ) {
 	const fnName = `${baseName}$${ctx.nextHelperId++}`;
 	const synth = { params: paramNodes || [], body: bodyStmts };
@@ -12422,6 +12778,9 @@ function ssrCompileSub(
 			componentNs,
 			returnedFragmentTemplate,
 			returnedFragmentRoot,
+			// Nested helpers touch no themes; the component body already did.
+			[],
+			unboxedHtml,
 		);
 	} finally {
 		ctx._ssrFoldedExprHoles = prevFoldedExprHoles;
@@ -12584,6 +12943,9 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 		cssHash,
 		parentNs,
 		componentNs,
+		false,
+		false,
+		true,
 	);
 	inlinedSubs.push(itemSub.fn);
 	let emptyCall = ssrHtmlTemplate([], node, ctx);
@@ -13048,147 +13410,6 @@ function hasModuleStyleMaps(body) {
 	});
 }
 
-// Copy-on-write: returns the (possibly rebuilt) statement; the input is never
-// modified. The core analyze/prepare pipeline mutates the sheet it is given,
-// so it runs over a clone of the (bounded) StyleSheet subtree.
-function applyStyleMap(stmt, ctx) {
-	if (stmt.type !== 'VariableDeclaration') return stmt;
-	let newDeclarations = null;
-	const declarations = stmt.declarations;
-	for (let i = 0; i < declarations.length; i++) {
-		const decl = declarations[i];
-		let next = decl;
-		const styleNode = decl.init && decl.init.type === 'JSXStyleElement' ? decl.init : null;
-		const parsedSheet = styleNode
-			? (styleNode.children || []).find((c) => c && c.type === 'StyleSheet')
-			: null;
-		const hash = parsedSheet
-			? styleNode.metadata?.styleScopeHash || parsedSheet.hash || null
-			: null;
-		if (parsedSheet && hash) {
-			const sheet = cloneAstNode(parsedSheet);
-			// `analyzeCss` marks `:global(...)` selectors (is_global / is_global_block
-			// metadata) so the renderer leaves them UNSCOPED. Without this pass
-			// `:global(a)` would be scoped to `.<hash>a`. Mirrors tsrx-ripple, which
-			// runs analyzeCss(stylesheet) before prepareStylesheetForRender.
-			analyzeCss(sheet);
-			prepareStylesheetForRender(sheet, true);
-			const css = renderStylesheets([sheet]);
-			ctx.cssInjections.push({
-				hash,
-				css,
-				order: styleNode.start ?? stmt.start ?? 0,
-				// The authored `<style>` element. `injectStyle` is emitted at module
-				// scope, so without this the whole block maps to the module origin
-				// and neither the tag nor its CSS is reachable from the output.
-				origin: styleNode,
-			});
-			ctx.runtimeNeeded.add('injectStyle');
-			// Replace the JSXStyleElement init with the class-map ObjectExpression
-			// (built loc-less by the core helper — it maps to the authored <style>).
-			next = {
-				...decl,
-				init: inheritOriginLoc(createStyleClassMapFromStylesheet(sheet), styleNode),
-			};
-		}
-		if (newDeclarations === null && next !== decl) newDeclarations = declarations.slice(0, i);
-		if (newDeclarations !== null) newDeclarations.push(next);
-	}
-	return newDeclarations === null ? stmt : { ...stmt, declarations: newDeclarations };
-}
-
-// Wrap every DYNAMIC `class` / `className` expression in a `normalizeClass(...)` call
-// BEFORE the scoped-CSS hash is appended. `@tsrx/core`'s annotate_with_hash bakes the
-// hash onto a dynamic class via a template literal — `` `${expr} <hash>` `` — which would
-// stringify an array/object clsx value the wrong way (`['a','b']` → "a,b", `{}` →
-// "[object Object]"). Normalizing first makes the interpolated slot a plain string, so
-// the hash concat stays correct AND clsx composition works in scoped components. (It also
-// turns a bare `class={undefined}` in a scoped component from "undefined <hash>" into just
-// "<hash>".) Unscoped components need no wrap — the runtime `setClassName` / `ssrAttr`
-// normalize the raw value directly. String literals are left alone so they keep folding
-// into the static template. Stops at nested component function boundaries (their class
-// exprs belong to a different scope), mirroring annotate_with_hash's own traversal.
-// Copy-on-write: rebuilt spines only where a wrap lands; untouched subtrees
-// are returned by reference and the input node is never written to. Callers
-// must use the return value.
-function wrapScopedClassExprs(node, ctx) {
-	if (!node || typeof node !== 'object') return node;
-	if (Array.isArray(node)) {
-		let out = null;
-		for (let i = 0; i < node.length; i++) {
-			const mapped = wrapScopedClassExprs(node[i], ctx);
-			if (out === null && mapped !== node[i]) out = node.slice(0, i);
-			if (out !== null) out.push(mapped);
-		}
-		return out ?? node;
-	}
-	if (
-		(node.type === 'FunctionDeclaration' ||
-			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression') &&
-		node.metadata?.tsrx_dynamic_wrapper !== true
-	) {
-		return node;
-	}
-	let working = node;
-	if (node.type === 'JSXElement') {
-		const attrs = node.openingElement?.attributes;
-		if (Array.isArray(attrs)) {
-			let newAttrs = null;
-			for (let i = 0; i < attrs.length; i++) {
-				const attr = attrs[i];
-				let next = attr;
-				if (
-					attr?.type === 'JSXAttribute' &&
-					attr.name?.type === 'JSXIdentifier' &&
-					(attr.name.name === 'class' || attr.name.name === 'className') &&
-					attr.value?.type === 'JSXExpressionContainer'
-				) {
-					const expr = attr.value.expression;
-					// Skip string literals (fold statically) and `{style (…)}` calls
-					// (resolveStyleExpr owns those). Everything else is a runtime value.
-					if (
-						expr &&
-						!(expr.type === 'Literal' && typeof expr.value === 'string') &&
-						!isStyleCall(expr)
-					) {
-						next = {
-							...attr,
-							value: {
-								...attr.value,
-								// The wrapper maps to the class expression it normalizes.
-								expression: inheritOriginLoc(b.call('_$normalizeClass', expr), expr),
-							},
-						};
-						ctx.runtimeNeeded.add('normalizeClass');
-					}
-				}
-				if (newAttrs === null && next !== attr) newAttrs = attrs.slice(0, i);
-				if (newAttrs !== null) newAttrs.push(next);
-			}
-			if (newAttrs !== null) {
-				working = { ...node, openingElement: { ...node.openingElement, attributes: newAttrs } };
-				if ('attributes' in node) working.attributes = newAttrs;
-			}
-		}
-	}
-	// Generic descent AFTER the element-level wrap (mirrors the historical pass
-	// order): nested JSX inside attribute values and children is wrapped too.
-	let out = working === node ? null : working;
-	for (const key of Object.keys(working)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'parent') continue;
-		if (key === 'metadata' || key === 'css') continue;
-		const v = working[key];
-		if (!v || typeof v !== 'object') continue;
-		const mapped = wrapScopedClassExprs(v, ctx);
-		if (mapped !== v) {
-			if (out === null) out = { ...node };
-			out[key] = mapped;
-		}
-	}
-	return out ?? working;
-}
-
 // Local copy-on-write mirror of @tsrx/core's annotate_with_hash (scoping.js):
 // stamps the scoped-CSS hash class onto native (and dynamic-tag) JSX elements
 // and drops JSXStyleElement nodes from the rendered tree. The core helper
@@ -13203,301 +13424,6 @@ function isCompositeJsxTag(node) {
 	return name.type === 'JSXMemberExpression';
 }
 
-function addHashClassToElement(element, hash, classAttrName) {
-	const openingElement = element.openingElement;
-	const attrs = openingElement?.attributes || [];
-	const index = attrs.findIndex(
-		(attr) =>
-			attr?.type === 'JSXAttribute' &&
-			attr.name?.type === 'JSXIdentifier' &&
-			(attr.name.name === 'class' || attr.name.name === 'className'),
-	);
-	let newAttrs;
-	if (index === -1) {
-		// A synthesized class attribute maps to the element's opening tag — the
-		// loc keeps generated positions inside the element for source maps, but
-		// there is no authored `class` here, so it is marked NOT AUTHORED. Left
-		// unmarked, inspection reports the whole opening tag as the origin of the
-		// scoped class, and a hover on any attribute in that tag (`onClick`, …)
-		// resolves to the class the compiler added.
-		newAttrs = [
-			...attrs,
-			markSynthesizedAttr(
-				inheritOriginLoc(
-					b.jsx_attribute(b.jsx_id(classAttrName), b.literal(hash, JSON.stringify(hash))),
-					openingElement,
-				),
-			),
-		];
-	} else {
-		const existing = attrs[index];
-		const value = existing.value;
-		let newAttr;
-		if (!value) {
-			// The NAME is authored (`class`), the value is not.
-			newAttr = {
-				...existing,
-				value: markSynthesized(inheritOriginLoc(b.literal(hash, JSON.stringify(hash)), existing)),
-			};
-		} else if (value.type === 'Literal' && typeof value.value === 'string') {
-			const merged = `${value.value} ${hash}`;
-			newAttr = { ...existing, value: { ...value, value: merged, raw: JSON.stringify(merged) } };
-		} else {
-			const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
-			// The template-literal bake maps to the authored class value it wraps.
-			newAttr = {
-				...existing,
-				value: inheritOriginLoc(
-					b.jsx_expression_container(
-						b.template([b.quasi('', false), b.quasi(` ${hash}`, true)], [expression]),
-					),
-					value,
-				),
-			};
-		}
-		newAttrs = attrs.slice();
-		newAttrs[index] = newAttr;
-	}
-	// The core helper mirrors the attribute list onto `element.attributes` in
-	// every branch; keep that alias in sync on the rebuilt copy.
-	return {
-		...element,
-		openingElement: { ...openingElement, attributes: newAttrs },
-		attributes: newAttrs,
-	};
-}
-
-function annotateRootWithHash(node, hash, classAttrName) {
-	if (!node || typeof node !== 'object') return node;
-	if (
-		(node.type === 'FunctionDeclaration' ||
-			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression') &&
-		node.metadata?.tsrx_dynamic_wrapper !== true
-	) {
-		return node;
-	}
-	if (node.type === 'JSXElement') {
-		let working = node;
-		if (!isCompositeJsxTag(node) || node.metadata?.dynamicElement) {
-			working = addHashClassToElement(node, hash, classAttrName);
-		}
-		const children = working.children;
-		if (Array.isArray(children)) {
-			let newChildren = null;
-			for (let i = 0; i < children.length; i++) {
-				const mapped = annotateRootWithHash(children[i], hash, classAttrName);
-				// Dropped style elements are filtered out (core: .filter(Boolean)).
-				if (newChildren === null && (mapped !== children[i] || !mapped)) {
-					newChildren = children.slice(0, i);
-				}
-				if (newChildren !== null && mapped) newChildren.push(mapped);
-			}
-			if (newChildren !== null) {
-				if (working === node) working = { ...node, children: newChildren };
-				else working.children = newChildren;
-			}
-		}
-		return working;
-	}
-	// Scoped-CSS styles leave the render tree here; Float style resources stay —
-	// the HeadHoist partition (normalizeChildren) owns removing them from body DOM.
-	if (node.type === 'JSXStyleElement') return headResourceKind(node) === 'style' ? node : null;
-	let out = null;
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
-			continue;
-		}
-		const value = node[key];
-		if (!value || typeof value !== 'object') continue;
-		let mapped;
-		if (Array.isArray(value)) {
-			// Core maps generic arrays WITHOUT filtering — a dropped style element
-			// leaves a null slot the downstream child normalization skips.
-			let newArray = null;
-			for (let i = 0; i < value.length; i++) {
-				const item = annotateRootWithHash(value[i], hash, classAttrName);
-				if (newArray === null && item !== value[i]) newArray = value.slice(0, i);
-				if (newArray !== null) newArray.push(item);
-			}
-			mapped = newArray ?? value;
-		} else {
-			mapped = annotateRootWithHash(value, hash, classAttrName);
-		}
-		if (mapped !== value) {
-			if (out === null) out = { ...node };
-			out[key] = mapped;
-		}
-	}
-	return out ?? node;
-}
-
-/**
- * Find the JSX render roots owned by a component. `@{}` components expose one
- * `JSXCodeBlock.render`; React-style functions can return JSX from any block in
- * their own body. Nested functions are separate component/value boundaries and
- * must not donate styles to their enclosing component.
- */
-function componentStyleRoots(componentNode) {
-	const body = componentNode.body;
-	if (!body) return [];
-	if (body.type === 'JSXCodeBlock') {
-		return body.render ? [{ kind: 'render', node: body.render }] : [];
-	}
-	if (body.type !== 'BlockStatement') return [];
-
-	const roots = [];
-	function visit(node) {
-		if (!node || typeof node !== 'object') return;
-		if (Array.isArray(node)) {
-			for (const child of node) visit(child);
-			return;
-		}
-		if (
-			node.type === 'FunctionDeclaration' ||
-			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression'
-		) {
-			return;
-		}
-		if (node.type === 'ReturnStatement') {
-			if (node.argument && isJsxNode(node.argument)) {
-				roots.push({ kind: 'return', statement: node, node: node.argument });
-			}
-			return;
-		}
-		for (const key of Object.keys(node)) {
-			if (
-				key === 'loc' ||
-				key === 'start' ||
-				key === 'end' ||
-				key === 'parent' ||
-				key === 'metadata' ||
-				key === 'css'
-			)
-				continue;
-			visit(node[key]);
-		}
-	}
-	visit(body);
-	return roots;
-}
-
-/**
- * Walk a component's owned render roots for `JSXStyleElement` nodes. For each
- * one found:
- *   - Pull the pre-parsed `StyleSheet` AST out of its children.
- *   - Run `prepareStylesheetForRender` (rewrites `.foo` → `.foo.<hash>`) over a
- *     clone of the sheet — the core pipeline mutates what it is given.
- *   - Collect into a list rendered via `renderStylesheets` to a CSS string.
- *   - Register `{hash, css}` on `ctx.cssInjections` so a module-level
- *     `injectStyle(hash, css)` is emitted in the prelude.
- *   - Rebuild the render roots via `annotateRootWithHash` (COW) to stamp the
- *     hash class on every native JSX element AND remove the JSXStyleElement
- *     nodes from the rendered tree (they don't contribute DOM in the new model).
- *
- * Returns `{ cssHash, node }` — the hash (or `null` when no `<style>` blocks
- * are present) and the possibly-rebuilt component node the caller must use.
- *
- * The first `JSXStyleElement` contributes the canonical hash for the whole
- * component. @tsrx/core hashes individual style tags by source position, so
- * multiple blocks are explicitly rebased onto that canonical component hash
- * before selector rendering. Every rendered root receives the same hash class.
- */
-function applyCssScoping(componentNode, ctx) {
-	const roots = componentStyleRoots(componentNode);
-	if (roots.length === 0) return { cssHash: null, node: componentNode };
-	let cssHash = null;
-	const styles = [];
-	function collect(node) {
-		if (!node || typeof node !== 'object') return;
-		if (Array.isArray(node)) {
-			for (const i of node) collect(i);
-			return;
-		}
-		if (
-			node.type === 'FunctionDeclaration' ||
-			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression'
-		) {
-			return;
-		}
-		if (node.type === 'JSXStyleElement') {
-			// A Float style resource ships its plain CSS by href identity — it
-			// neither contributes to the component's scope hash nor gets scoped.
-			if (headResourceKind(node) === 'style') return;
-			const sheet = (node.children || []).find((c) => c && c.type === 'StyleSheet');
-			if (sheet) {
-				styles.push({ node, sheet });
-				if (!cssHash) cssHash = node.metadata?.styleScopeHash || sheet.hash || null;
-			}
-			return;
-		}
-		for (const key of Object.keys(node)) {
-			if (
-				key === 'loc' ||
-				key === 'start' ||
-				key === 'end' ||
-				key === 'parent' ||
-				key === 'metadata' ||
-				key === 'css'
-			)
-				continue;
-			const v = node[key];
-			if (v && typeof v === 'object') collect(v);
-		}
-	}
-	for (const root of roots) collect(root.node);
-	if (!cssHash || styles.length === 0) return { cssHash: null, node: componentNode };
-	// A component has one scope even when its CSS is split for readability.
-	// Rebase before analyze/render: selector and keyframe rewriting read
-	// `sheet.hash`, while DOM annotation below uses `cssHash`. The core
-	// analyze/prepare pipeline mutates the sheet it is given, so it runs over a
-	// clone of each (bounded) StyleSheet subtree — the parser-owned sheet nodes
-	// stay pristine.
-	const preparedSheets = styles.map((style) => {
-		const sheet = cloneAstNode(style.sheet);
-		sheet.hash = cssHash;
-		// Mark `:global(...)` selectors before scoping so they render unscoped.
-		analyzeCss(sheet);
-		prepareStylesheetForRender(sheet);
-		return sheet;
-	});
-	const css = renderStylesheets(preparedSheets);
-	ctx.cssInjections.push({
-		hash: cssHash,
-		css,
-		order: styles[0]?.sheet.start ?? styles[0]?.node.start ?? componentNode.start ?? 0,
-		// The authored `<style>` element(s) this stylesheet came from.
-		// `injectStyle` is emitted at module scope, so without an origin the
-		// block maps to the module and neither the tag nor its CSS is reachable.
-		origins: styles.map((style) => style.node).filter(Boolean),
-	});
-	ctx.runtimeNeeded.add('injectStyle');
-	// Rebuild every owned render root copy-on-write: add the canonical hash
-	// class to native elements and strip JSXStyleElement nodes from DOM output.
-	// The rebuilt roots are grafted back through a spine rebuild of the
-	// component node; the received component tree is never modified.
-	let node = componentNode;
-	const returnReplacements = new Map();
-	for (const root of roots) {
-		// Normalize dynamic class exprs BEFORE the hash is appended (see helper), so
-		// clsx array/object values compose correctly alongside the scope hash.
-		const wrapped = wrapScopedClassExprs(root.node, ctx);
-		const annotated = annotateRootWithHash(wrapped, cssHash, 'class');
-		if (annotated === root.node) continue;
-		if (root.kind === 'render') {
-			node = { ...node, body: { ...node.body, render: annotated } };
-		} else {
-			returnReplacements.set(root.statement, { ...root.statement, argument: annotated });
-		}
-	}
-	if (returnReplacements.size > 0) {
-		node = mapAst(node, (n) => returnReplacements.get(n) ?? null);
-	}
-	return { cssHash, node };
-}
-
 // Strip comments and plain string literals so prose or route paths cannot
 // register as a component reference during the early-reference scan below.
 // Template literals are deliberately LEFT intact: `${Name}` interpolations are
@@ -13727,14 +13653,15 @@ function compileComponent(node, ctx, options) {
 			: null;
 	const firstStyle = ctx.cssInjections.length;
 
-	// Scoped `<style>` block. New TSRX surfaces each style block as a
-	// `JSXStyleElement` child of the rendered tree (parser pre-computes the
-	// content hash + parses CSS into a StyleSheet AST). Collect them, run the
-	// @tsrx/core scoping pipeline (rewrites `.foo` → `.foo.<hash>` AND stamps
-	// the hash class onto every element under this component), emit a single
-	// module-level `injectStyle(hash, css)`, and surface `cssHash` so
-	// resolveStyleExpr can also prefix any `{style (expr)}` class expressions.
-	const scoping = applyCssScoping(node, ctx);
+	// Scoped `<style>` blocks. TSRX surfaces each block as a `JSXStyleElement`
+	// item of the list it is written in (parser pre-computes the content hash
+	// + parses CSS into a StyleSheet AST). The pre-pass gives every list that
+	// holds a block its own hash, rewrites `.foo` → `.foo.<hash>`, stamps the
+	// hash on the list's other items and their descendants (never on the
+	// element that contains the list), emits one `injectStyle(hash, css)` per
+	// scope, and surfaces the first scope's hash as `cssHash` — kept only as a
+	// "this component owns scoped CSS" flag for resolveStyleExpr's fallback.
+	const scoping = applyStyleScopes(node, ctx);
 	node = scoping.node;
 	let cssHash = scoping.cssHash;
 	// Backwards-compat: internal callers (legacy synthetic Component shapes)
@@ -13855,7 +13782,9 @@ function compileComponent(node, ctx, options) {
 					: fnNode,
 		];
 		if (pendingWarm) {
-			statements.push(guarded(objectAssign(b.id(name), '__warm', pendingWarm)));
+			statements.push(
+				guarded(b.call(requireRuntimeForContext(ctx, 'markWarm'), b.id(name), pendingWarm)),
+			);
 		}
 		if (hmrWrap && returnedOutput) {
 			statements.push(
@@ -13890,7 +13819,12 @@ function compileComponent(node, ctx, options) {
 	// identity by naming the inner FunctionExpression.
 	const fnExpr = functionExpressionFromDeclaration(fnNode);
 	const warmedFn = pendingWarm
-		? markPure(inheritOriginLoc(objectAssign(fnExpr, '__warm', pendingWarm), node))
+		? markPure(
+				inheritOriginLoc(
+					b.call(requireRuntimeForContext(ctx, 'markWarm'), fnExpr, pendingWarm),
+					node,
+				),
+			)
 		: fnExpr;
 	const abiFn =
 		hmrWrap && returnedOutput
@@ -14370,6 +14304,32 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 		bodyStatements.push(...mapTemps.map((temp) => inheritOriginLoc(b.let(temp), node)));
 	}
 	bodyStatements.push(...rewrittenStatements);
+	// A self-update scheduled by setup discards this output. The owning Block
+	// replays setup before returning to its parent, so children initialize from
+	// the settled state and no template/resource work escapes the first pass.
+	// Setup that only reads built-in hooks and pure globals cannot schedule an
+	// update; keep those bodies unchanged (see setupCanScheduleSelfUpdate).
+	if (
+		ctx.mode !== 'server' &&
+		ctx._universalRuntimeUnit == null &&
+		!returnedOutput &&
+		setupCanScheduleSelfUpdate(statements, ctx)
+	) {
+		bodyStatements.push(
+			inheritOriginLoc(
+				b.if(
+					b.logical(
+						'&&',
+						b.member(b.member(b.id('__s'), 'block'), 'pending'),
+						b.unary('!', b.member(b.member(b.id('__s'), 'block'), 'crossRenderUpdate')),
+					),
+					b.return(null),
+					null,
+				),
+				node,
+			),
+		);
+	}
 	// GLOBAL resource registrations (stylesheet precedence links, style
 	// resources, async scripts) run here: after setup, so an href computed from
 	// a body local is initialized, and BEFORE the constructs below mount any
@@ -14564,6 +14524,11 @@ function transformUniversalParallelUse(ast, ctx, metadata) {
 		node?.type === 'FunctionExpression' || node?.type === 'ArrowFunctionExpression';
 	const unwrapAssignedFunction = (node) => {
 		if (isFunction(node)) return node;
+		if (
+			calleeName(node) === runtimeAliasForContext(ctx, 'markWarm') &&
+			isFunction(node.arguments?.[0])
+		)
+			return node.arguments[0];
 		if (
 			node?.type === 'CallExpression' &&
 			node.callee?.type === 'MemberExpression' &&
@@ -14696,14 +14661,7 @@ function transformUniversalParallelUse(ast, ctx, metadata) {
 	};
 	// The warm-plan attach maps to the component function it decorates.
 	const assignWarmPlan = (fn, warmNode) =>
-		inheritOriginLoc(
-			b.call(
-				b.member(b.id('Object'), 'assign'),
-				fn,
-				b.object([b.prop('init', b.id('__warm'), warmNode)]),
-			),
-			fn,
-		);
+		inheritOriginLoc(b.call(requireRuntimeForContext(ctx, 'markWarm'), fn, warmNode), fn);
 
 	const transformFunction = (fn, name, component) => {
 		if (!isFunction(fn) || transformed.has(fn)) return fn;
@@ -15764,7 +15722,11 @@ function parallelUseWalkJsx(nodes, ctx, componentName, creations, warmChildren,
 				const nameNode = node.openingElement && node.openingElement.name;
 				const isComponent =
 					nameNode && nameNode.type === 'JSXIdentifier' && /^[A-Z]/.test(nameNode.name);
-				if (isComponent) {
+				const transparentBoundary =
+					isComponent &&
+					ctx._octaneSuspenseNames?.has(nameNode.name) &&
+					!ctx.currentComponentLocals?.has(nameNode.name);
+				if (isComponent && !transparentBoundary) {
 					// Server: creations flowing INTO child props (`<Kid p={make(x)}/>`)
 					// need the same cross-pass identity as use()-site creations — every
 					// streaming wave re-runs this body, and a recreated per-request
@@ -16424,7 +16386,7 @@ function buildWarmArtifacts(node, ctx, componentName, creations, warmChildren) {
 	// The hoisted fetch plan: creations + child calls, params destructured
 	// from the incoming props object. Single-param components only (the norm).
 	// Returned as a bare arrow — compileComponent attaches it to the INNER
-	// function object via Object.assign, so the component's own body (where
+	// function object via markWarm, so the component's own body (where
 	// the function-expression name shadows the module const) sees it too;
 	// hmr() forwards it from the wrapped fn onto the HMR wrapper.
 	let warmNode = null;
@@ -16644,13 +16606,17 @@ const NUMERIC_HOOK_SLOT_POSITION = {
 	useEffectEvent: 1,
 	useImperativeHandle: 3,
 	useActionState: 3,
+	useFormState: 3,
 	useOptimistic: 2,
 	useSignal$: 1,
 };
 
 function appendHookSlotArgument(name, args, slot, numeric, origin) {
 	const out = [...args];
-	const position = numeric ? NUMERIC_HOOK_SLOT_POSITION[name] : undefined;
+	const position =
+		numeric || name === 'useState' || name === 'useRef'
+			? NUMERIC_HOOK_SLOT_POSITION[name]
+			: undefined;
 	if (position !== undefined) {
 		while (out.length < position) out.push(b.id('undefined', origin));
 	}
@@ -16658,6 +16624,18 @@ function appendHookSlotArgument(name, args, slot, numeric, origin) {
 	return out;
 }
 
+function wrapHookCallWithSlot(call, ctx, slot, callee, args) {
+	const fn = call.typeArguments
+		? { type: 'TSInstantiationExpression', expression: callee, typeArguments: call.typeArguments }
+		: callee;
+	return {
+		...call,
+		callee: b.id(requireRuntimeForContext(ctx, 'withSlot')),
+		typeArguments: null,
+		arguments: [typeof slot === 'string' ? b.id(slot) : slot, fn, ...args],
+	};
+}
+
 function arrayPatternObservesStateGetter(pattern) {
 	const elements = pattern.elements || [];
 	if (elements[2] != null) return true;
@@ -17308,20 +17286,20 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 			const importedName = n._octaneImportedHook;
 			const hookRuntimeImportedName = n._octaneHookRuntimeImportedHook;
 			const name = importedName ?? hookRuntimeImportedName ?? localName;
-			// Three kinds of call get a trailing per-call-site hook slot:
+			// Three kinds of call receive a per-call-site hook identity:
 			//  - a built-in base hook (HOOK_NAMES) — also needs its runtime import;
 			//  - a custom / library hook by React's `use[A-Z]` convention — e.g. a
 			//    `useStore` binding from @octanejs/zustand that WRAPS a base hook and
-			//    FORWARDS the slot to it. `useContext` is keyed by context identity (no
+			//    resolves the enclosing call path. `useContext` is keyed by context identity (no
 			//    slot) and `use` has no uppercase suffix, so both are excluded here. We
 			//    do NOT import custom hooks — they're user/library imports;
 			//  - a server-mode `use(thenable)` — a stable suspense-cache key.
 			// Distinct call sites get distinct slots, so `useStore(a)`/`useStore(b)`
 			// (or the same hook twice) stay independent.
 			//
-			// NB: a `use*` NAME is reserved for hooks (React's convention) — a non-hook
-			// function named like one gets a harmless extra trailing argument (though
-			// inside a plain JS loop the convention is enforced: rejectHookInJsLoop).
+			// A `use*` name is reserved for hooks. The custom wrapper preserves its
+			// authored argument list; inside a plain JS loop the convention is
+			// enforced by rejectHookInJsLoop.
 			const isBuiltin =
 				(HOOK_NAMES.has(name) ||
 					(ctx.nativeReads &&
@@ -17338,10 +17316,9 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 					const inline = lowerLocalMemoExpression(n, name);
 					if (inline !== null) return inline;
 				}
-				// Keep a Symbol at custom-hook call boundaries: published bindings split
-				// that trailing value from optional user args and derive manual sub-slots
-				// from it. Proven render-scope base hooks can use the smaller numeric
-				// production ABI; arbitrary callable helpers cannot.
+				// Keep a Symbol on custom-hook call paths so their internal base-hook
+				// identities compose across modules. Proven render-scope base hooks
+				// can use the smaller numeric production ABI.
 				const hasSpread = n.arguments.some((arg) => arg.type === 'SpreadElement');
 				const memoRoute = isBuiltin && canLowerClientMemo(n, name);
 				const memoCandidate = memoRoute ? slotMemoCandidate(n, name) : null;
@@ -17406,18 +17383,20 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 				// separately must not re-promote its nested hooks to render-local.
 				const argsLocalRoot = localSlotMarks.get(n) === true;
 				const args = n.arguments.map((a) => rewriteHookCalls(a, ctx, componentName, argsLocalRoot));
-				// NB: base hooks are ALSO `use[A-Z]`, so the wrap is for custom hooks ONLY
-				// (`isCustom && !isBuiltin`) — base hooks keep the plain trailing-slot form.
-				if (isCustom && !isBuiltin) {
-					// A CUSTOM hook is wrapped in `withSlot(sym, hook, ...args, sym)`: the
-					// withSlot pushes a call-site symbol on the path stack so the hook's
-					// inner BASE hooks combine it (→ the same custom hook reused at two
-					// sites keeps independent state — base hooks are "owned by octane" and
-					// need no wrapper). The TRAILING `sym` is retained so existing library
-					// bindings that extract the slot from their last argument keep working.
-					const withSlotAlias = requireRuntimeForContext(ctx, 'withSlot');
-					return b.call(withSlotAlias, b.id(symVar), n.callee, ...args, b.id(symVar));
-				}
+				const callee = nativeMemo
+					? b.id(runtimeAliasForContext(ctx, 'nativePuMemo'))
+					: getterHelper !== null
+						? b.id(runtimeAliasForContext(ctx, getterHelper))
+						: n.callee._octaneGenerated
+							? b.id(runtimeAliasForContext(ctx, name))
+							: n.callee;
+				// The call path supplies identity without adding an argument that
+				// changes a custom hook's defaults, rest values or arguments.length.
+				// State/ref spreads also need this path: an empty spread has no
+				// initializer position into which a trailing slot may safely fall.
+				if (isCustom || (hasSpread && (name === 'useState' || name === 'useRef')))
+					return wrapHookCallWithSlot(n, ctx, slot, callee, args);
+
 				const hookArgs = explicitMemoSlot
 					? args
 					: appendHookSlotArgument(name, args, slot, numericSlot, n);
@@ -17432,13 +17411,7 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 				return {
 					...n,
 					...(memoRoute ? { _octaneInlineMemoHook: memoCandidate } : null),
-					callee: nativeMemo
-						? b.id(runtimeAliasForContext(ctx, 'nativePuMemo'))
-						: getterHelper !== null
-							? b.id(runtimeAliasForContext(ctx, getterHelper))
-							: n.callee._octaneGenerated
-								? b.id(runtimeAliasForContext(ctx, name))
-								: n.callee,
+					callee,
 					arguments: hookArgs,
 				};
 			}
@@ -17505,14 +17478,20 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 				const args = n.arguments.map((a) =>
 					rewriteHookCalls(a, ctx, componentName, localSlotMarks.get(n) === true),
 				);
+				const callee = nativeMemo
+					? b.id(runtimeAliasForContext(ctx, 'nativePuMemo'))
+					: getterHelper !== null
+						? b.id(runtimeAliasForContext(ctx, getterHelper))
+						: n.callee;
+				if (
+					(name === 'useState' || name === 'useRef') &&
+					args.some((arg) => arg.type === 'SpreadElement')
+				)
+					return wrapHookCallWithSlot(n, ctx, slot, callee, args);
 				return {
 					...n,
 					...(memoRoute ? { _octaneInlineMemoHook: memoCandidate } : null),
-					callee: nativeMemo
-						? b.id(runtimeAliasForContext(ctx, 'nativePuMemo'))
-						: getterHelper !== null
-							? b.id(runtimeAliasForContext(ctx, getterHelper))
-							: n.callee,
+					callee,
 					arguments: explicitMemoSlot
 						? args
 						: appendHookSlotArgument(name, args, slot, numericSlot, n),
@@ -17524,9 +17503,8 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 		// and the like). Same `use[A-Z]` convention, applied to the PROPERTY name.
 		// The callee is a member access, so the plain withSlot form would sever
 		// `this`; instead the WHOLE call is wrapped in a thunk —
-		// `_$withSlot(sym, () => obj.useX(...args, sym))` — which pushes the
-		// call-site path symbol for the hook's inner base hooks while the trailing
-		// `sym` still reaches slot-forwarding bindings (splitSlot convention).
+		// `_$withSlot(sym, () => obj.useX(...args))` preserves the receiver and
+		// authored arguments while supplying the inner base hooks' call path.
 		if (
 			n.type === 'CallExpression' &&
 			!n.optional &&
@@ -17558,7 +17536,7 @@ function rewriteHookCalls(node, ctx, componentName, localRoot = false) {
 			return b.call(
 				withSlotAlias,
 				b.id(symVar),
-				b.arrow([], b.call({ ...n.callee, object }, ...args, b.id(symVar))),
+				b.arrow([], { ...n, callee: { ...n.callee, object }, arguments: args }),
 			);
 		}
 		return null;
@@ -17574,7 +17552,7 @@ function compileReturnJsxFunction(node, ctx, options) {
 	const hookMemoOpaqueOwner = ctx.inlineHookMemo && hasInlineMemoOpaqueDirective(node);
 	recordProfileComponent(ctx, node, name);
 	const beforeCss = ctx.cssInjections.length;
-	const scoping = applyCssScoping(node, ctx);
+	const scoping = applyStyleScopes(node, ctx);
 	node = scoping.node;
 	const cssHash = scoping.cssHash;
 	const cssEntries =
@@ -17696,6 +17674,7 @@ function compileReturnJsxFunction(node, ctx, options) {
 							compInlinedSubs,
 							cssHash,
 							cssEntries,
+							scoping.runtimeApplied,
 						),
 					};
 				}
@@ -17775,6 +17754,10 @@ function compileReturnJsxFunction(node, ctx, options) {
 			}),
 		);
 	}
+	if (ctx.mode === 'server' && !ctx.nativeReads) {
+		// Imported themes inject on read; touch them ahead of this body's own CSS.
+		returnBody.unshift(...serverThemeTouchStatements(scoping.runtimeApplied, ctx, node));
+	}
 	const emittedFunction = b.function_declaration(
 		node.id,
 		node.params,
@@ -17818,7 +17801,15 @@ function compileReturnJsxFunction(node, ctx, options) {
 	return { nodes: [fn] };
 }
 
-function nativeReturnedJsxValue(node, ctx, name, inlinedSubs, cssHash, cssEntries) {
+function nativeReturnedJsxValue(
+	node,
+	ctx,
+	name,
+	inlinedSubs,
+	cssHash,
+	cssEntries,
+	runtimeApplied = [],
+) {
 	let value;
 	if (requiresTemplateNormalization(node, 'html', true, ctx)) {
 		// Head resources, directive roots and other compiler-only syntax keep
@@ -17838,7 +17829,8 @@ function nativeReturnedJsxValue(node, ctx, name, inlinedSubs, cssHash, cssEntrie
 	}
 	// A stored styled value may be constructed outside an SSR render. Its CSS
 	// enters the request collector when interpreted, not a global pending queue.
-	if (cssHash === null && !ctx.nativeModuleStyles) return value;
+	const themeTouches = serverThemeTouchStatements(runtimeApplied, ctx, node);
+	if (cssHash === null && !ctx.nativeModuleStyles && themeTouches.length === 0) return value;
 	const scopedElement = runtimeAliasForContext(ctx, 'nativeCreateScopedElement');
 	const scopedValue = runtimeAliasForContext(ctx, 'nativeCreateScopedValue');
 	// A static styled fragment needs a reader too, even when it only owns a
@@ -17859,15 +17851,18 @@ function nativeReturnedJsxValue(node, ctx, name, inlinedSubs, cssHash, cssEntrie
 			node,
 		);
 	}
-	if (cssEntries.length === 0) return value;
-	ctx.runtimeNeeded.add('injectStyle');
-	const css = cssEntries.map((entry) => {
-		const origin = claimCssOrigins(ctx, entry) ?? node;
-		return inheritOriginLoc(
-			b.stmt(ssrCall('injectStyle', [b.literal(entry.hash), b.literal(entry.css)], origin)),
-			origin,
-		);
-	});
+	if (cssEntries.length === 0 && themeTouches.length === 0) return value;
+	if (cssEntries.length > 0) ctx.runtimeNeeded.add('injectStyle');
+	const css = [
+		...themeTouches,
+		...cssEntries.map((entry) => {
+			const origin = claimCssOrigins(ctx, entry) ?? node;
+			return inheritOriginLoc(
+				b.stmt(ssrCall('injectStyle', [b.literal(entry.hash), b.literal(entry.css)], origin)),
+				origin,
+			);
+		}),
+	];
 	const readerIndex =
 		value.callee?.name === scopedValue ? 0 : value.callee?.name === scopedElement ? 2 : -1;
 	if (readerIndex === -1) {
@@ -18012,11 +18007,22 @@ function requiresTemplateNormalization(
 		t === 'FragmentStart' ||
 		t === 'FragmentEnd' ||
 		t === 'FoldedDirective' ||
-		t === 'HeadHoist' ||
-		t === 'JSXCodeBlock'
+		t === 'HeadHoist'
 	) {
 		return true;
 	}
+	if (t === 'JSXCodeBlock') {
+		// A render-only child block is transparent template grouping (the same
+		// rule normalizeChildren and extractFragment apply): only its render
+		// decides. A setup-bearing or code-only block is a render scope of its
+		// own and needs the compiled-fragment path. A styled static fragment
+		// therefore stays a descriptor when its block only groups the fragment
+		// that holds the `<style>` — the form amendment A1 leaves a value factory
+		// written in plain TSX (raw CSS needs a `@{ … }` container).
+		const body = node.body || [];
+		if (body.length > 0 || !node.render) return true;
+		return requiresTemplateNormalization(node.render, parentNs, allowHeadHoists, ctx);
+	}
 	if (t === 'Fragment' || t === 'JSXFragment' || t === 'Tsx' || t === 'Tsrx') {
 		return (node.children || []).some((child) =>
 			requiresTemplateNormalization(child, parentNs, allowHeadHoists, ctx),
@@ -18319,6 +18325,15 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 			// `{/* … */}` is a `JSXEmptyExpression` container — a JSX comment, which
 			// renders to nothing (React drops it). Skip it so it never becomes a hole.
 			if (!expr || expr.type === 'JSXEmptyExpression') continue;
+			// String literals (`{" "}`, `{"hello"}`) are static text, same as JSXText.
+			// The .tsrx and server paths fold them via staticTextLiteral; hoisting one
+			// as hN here made .tsx client templates grow an extra text hole while the
+			// server baked the string, so hydration consumed the next sibling (duplicate
+			// elements). Leave the container in place so emitElementHtml bakes it.
+			if (staticTextLiteral(expr) !== null) {
+				newChildren.push(child);
+				continue;
+			}
 			const hn = `h${holeProps.length}`;
 			if (expr && expr.type === 'TSAsExpression') {
 				// Preserve the `as T` cast in the renderer (it marks a dynamic TEXT hole).
@@ -19217,6 +19232,20 @@ function rewriteJsxValues(node, ctx, eagerMapCallbackRoots = false, eagerMapCall
 	if (lower != null) node = lowerSetupValueDirectives(node, lower);
 	return mapAst(node, (n) => {
 		const t = n && n.type;
+		if (isFunctionNode(n) && n.body?.type === 'JSXCodeBlock') {
+			const name = n.id?.name ?? allocCompilerName(ctx, '__template');
+			const previousLocals = ctx.currentComponentLocals;
+			ctx.currentComponentLocals = collectComponentLocals(n);
+			try {
+				const compiled =
+					ctx.mode === 'server'
+						? ssrCompileBody(n, ctx, name, null, [], 'opaque')
+						: compileFunctionBody(n, ctx, name, 'opaque');
+				return functionExpressionFromDeclaration({ ...compiled, id: n.id ?? null }, n);
+			} finally {
+				ctx.currentComponentLocals = previousLocals;
+			}
+		}
 		if (
 			ctx.nativeReads &&
 			lower == null &&
@@ -20067,11 +20096,6 @@ function jsxTagName(n) {
 		: null;
 }
 
-/** @param {any} n @returns {boolean} */
-function isHeadElementNode(n) {
-	return Boolean(n && n.type === 'JSXElement' && jsxTagName(n) === 'head');
-}
-
 /** @param {any} n @returns {boolean} */
 function isHoistableHeadElementNode(n) {
 	if (n == null || (n.type !== 'JSXElement' && n.type !== 'Element')) return false;
@@ -20111,7 +20135,7 @@ function isHoistableHeadElementNode(n) {
 				inner.value === 'stylesheet';
 		}
 	}
-	if (tag === 'link' && relStylesheet && hasPrecedence && (!hasHref || emptyHref)) return false;
+	if (tag === 'link' && relStylesheet && (!hasPrecedence || !hasHref || emptyHref)) return false;
 	return true;
 }
 
@@ -20329,7 +20353,7 @@ function deferredHeadAttrs(el) {
 // props.children under HTML, SVG, or MathML. namespaceHead resolves that choice
 // from its actual parent at render time while retaining ordinary component-block
 // hydration and keyed ownership.
-function deferredTitleElement(el, ctx) {
+function deferredTitleElement(el, ctx, tag = 'title') {
 	ctx.runtimeNeeded.add('namespaceHeadElement');
 	let authoredKey = null;
 	for (const attr of el.openingElement.attributes || []) {
@@ -20345,7 +20369,7 @@ function deferredTitleElement(el, ctx) {
 	}
 	const args = [
 		b.literal(headKey(el, 0, ctx)),
-		b.literal('title'),
+		b.literal(tag),
 		deferredHeadAttrs(el),
 		headTextExpression(el),
 	];
@@ -20658,9 +20682,137 @@ function emitHeadServer(headNodes, ctx) {
 	});
 }
 
+// JSX indentation is syntax, while same-line spaces are rendered content. Cook
+// authored literals once, before either emitter sees them, so entities cannot be
+// decoded twice as a tree passes through fragment and value lowering.
+function normalizeAuthoredJsxLiterals(ast) {
+	return mapAst(ast, (node) => {
+		if (node.type === 'JSXText') {
+			const lines = node.value.split(/\r\n|\n|\r/);
+			let last = 0;
+			for (let i = 0; i < lines.length; i++) if (/[^ \t]/.test(lines[i])) last = i;
+			let value = '';
+			for (let i = 0; i < lines.length; i++) {
+				let line = lines[i].replace(/\t/g, ' ');
+				if (i !== 0) line = line.replace(/^ +/, '');
+				if (i !== lines.length - 1) line = line.replace(/ +$/, '');
+				if (line !== '') value += line + (i !== last ? ' ' : '');
+			}
+			if (value.includes('&')) value = decodeHTMLStrict(value);
+			return value === node.value ? node : { ...node, value, raw: value };
+		}
+		if (
+			node.type === 'JSXAttribute' &&
+			node.value?.type === 'Literal' &&
+			typeof node.value.value === 'string' &&
+			node.value.value.includes('&')
+		) {
+			const value = decodeHTMLStrict(node.value.value);
+			return { ...node, value: { ...node.value, value, raw: JSON.stringify(value) } };
+		}
+		if (
+			node.type === 'JSXStyleElement' &&
+			(hasJsxAttribute(node, 'dangerouslySetInnerHTML') || hasJsxAttribute(node, 'children'))
+		) {
+			return normalizeAuthoredJsxLiterals(
+				b.jsx_element(node, node.openingElement.attributes || [], []),
+			);
+		}
+		return null;
+	});
+}
+
+function requiresImperativeHostTree(root, ctx) {
+	const tag = jsxTagName(root) || elementTagName(root);
+	return (
+		(ctx.mode !== 'server' && root._octaneImperativeHost === true) ||
+		hasJsxAttribute(root, 'key') ||
+		tag === 'noscript' ||
+		tag === 'html' ||
+		tag === 'head' ||
+		tag === 'body'
+	);
+}
+
+// Analyze parser repair once per authored tree. Mark only the affected ancestor,
+// preserving template compilation for unrelated hosts around that subtree.
+function markParserSensitiveHosts(ast) {
+	const unsafe = new WeakSet();
+	let found = false;
+	const mark = (node) => {
+		unsafe.add(node);
+		found = true;
+	};
+	function visit(node, ancestors = [], namespace = 'html') {
+		if (node === null || typeof node !== 'object') return;
+		if (Array.isArray(node)) {
+			for (const child of node) visit(child, ancestors, namespace);
+			return;
+		}
+		if (node.type === 'JSXText') {
+			if (ancestors.length && invalidHtmlTextNesting(node.value, ancestors[0].tag) !== null)
+				mark(ancestors[0].node);
+			return;
+		}
+		if (node.type === 'JSXFragment') {
+			visit(node.children || [], ancestors, namespace);
+			return;
+		}
+		if (node.type === 'JSXElement') {
+			const tag = jsxTagName(node);
+			if (isComponentTag(node)) {
+				visit(node.children || []);
+				return;
+			}
+			const self = nsForSelf(tag, namespace);
+			if (self === 'html' && ancestors.length) {
+				if (invalidHtmlNestingWithParent(tag, ancestors[0].tag) !== null) mark(ancestors[0].node);
+				const tags = ancestors.map((entry) => entry.tag);
+				for (let i = 1; i < ancestors.length; i++) {
+					if (invalidHtmlNestingWithAncestor(tag, tags.slice(0, i + 1)) !== null)
+						mark(ancestors[i].node);
+				}
+			}
+			const childNamespace = nsForChildren(tag, namespace);
+			visit(
+				node.children || [],
+				childNamespace === 'html' ? [{ node, tag }, ...ancestors] : [],
+				childNamespace,
+			);
+			visit(node.openingElement?.attributes || []);
+			return;
+		}
+		// A value expression or directive owns its insertion range. Its elements
+		// are parsed separately, so lexical host ancestry does not cross it.
+		for (const key in node) {
+			if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+			visit(node[key]);
+		}
+	}
+	visit(ast);
+	return found
+		? mapAst(ast, (node) => (unsafe.has(node) ? { ...node, _octaneImperativeHost: true } : null))
+		: ast;
+}
+
+function rewriteImperativeHeadElements(node, ctx, namespace = 'html', inNoscript = false) {
+	if (node?.type !== 'JSXElement' && node?.type !== 'JSXFragment') return node;
+	const tag = jsxTagName(node);
+	const nextNamespace = tag ? nsForChildren(tag, namespace) : namespace;
+	if (!inNoscript && namespace === 'html' && isHoistableHeadElementNode(node)) {
+		return deferredTitleElement(node, ctx, tag);
+	}
+	return {
+		...node,
+		children: (node.children || []).map((child) =>
+			rewriteImperativeHeadElements(child, ctx, nextNamespace, inNoscript || tag === 'noscript'),
+		),
+	};
+}
+
 /**
  * Normalize a list of JSX child nodes into the shapes the emitters consume:
- *   - Whitespace-only JSXText / JSX comments (`{…}` empty containers) → dropped
+ *   - Indentation-only JSXText / JSX comments (`{…}` empty containers) → dropped
  *   - JSXText with content → `Text` node wrapping a string Literal
  *   - `{expr}` container → `Text` hole, or `TSRXExpression` when the
  *     expression needs the rich dispatcher (portals, JSX ternaries,
@@ -20670,7 +20822,7 @@ function emitHeadServer(headNodes, ctx) {
  *   - JSXElement → `Element` (with `<Fragment ref>` expanded to a
  *     FragmentStart/…/FragmentEnd sequence, `<Activity>` lowered to an
  *     ActivityStatement, eligible `<title>/<meta>/<link>` hoisted as `HeadHoist`,
- *     and `<head>` rejected)
+ *     and parser-sensitive host trees lowered as descriptors)
  *   - Fragments (`<>…</>`, Tsx/Tsrx) → flattened (children inlined)
  *   - JSXStyleElement → dropped (its CSS is handled by the scoping pipeline)
  *   - Directive expressions (@if/@for/@try/@switch, `@{…}` child blocks) →
@@ -20681,13 +20833,19 @@ function emitHeadServer(headNodes, ctx) {
 // `inSvg`: the children being normalized sit inside an SVG-namespace subtree.
 // SVG has its own `<title>` (the accessibility tooltip element) — it must stay
 // where it is, NOT hoist to document.head (React 19 makes the same exception).
-function normalizeChildren(nodes, inSvg = false, ctx = null, inNoscript = false) {
+function normalizeChildren(
+	nodes,
+	inSvg = false,
+	ctx = null,
+	inNoscript = false,
+	allowImperative = true,
+) {
 	const out = [];
 	if (!nodes) return out;
 	for (const n of nodes) {
 		if (!n) continue;
 		if (n.type === 'JSXText') {
-			if (/^\s*$/.test(n.value)) continue;
+			if (n.value === '' || (/^\s*$/.test(n.value) && /[\n\r]/.test(n.value))) continue;
 			// The Text node and its literal map to the authored JSX text.
 			out.push(
 				inheritOriginLoc(
@@ -20788,14 +20946,29 @@ function normalizeChildren(nodes, inSvg = false, ctx = null, inNoscript = false)
 				out.push({ type: 'ActivityStatement', mode, children: n.children || [] });
 				continue;
 			}
-			// `<head>` is no longer a construct (React-19 model): render
-			// `<title>`/`<meta>`/`<link>` directly and they hoist to document.head.
-			if (isHeadElementNode(n)) {
-				throw new Error(
-					'`<head>` is not supported in octane. Render `<title>`, `<meta>`, and ' +
-						'`<link>` directly (anywhere in the component) — they are hoisted to ' +
-						'document.head automatically, React-19-style.',
+			// 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)))
+			) {
+				out.push(
+					inheritOriginLoc(
+						{
+							type: 'Text',
+							expression: jsxElementToCreateElement(
+								rewriteImperativeHeadElements(n, ctx, inSvg ? 'svg' : 'html'),
+								ctx,
+							),
+							imperativeRoot: n,
+						},
+						n,
+					),
 				);
+				continue;
 			}
 			// `<title>`/`<meta>`/eligible `<link>` → hoist to the document-head channel (NOT
 			// body DOM). Kept in `out` as a synthetic node so planJsx / ssrCompileBody
@@ -20843,6 +21016,18 @@ function normalizeChildren(nodes, inSvg = false, ctx = null, inNoscript = false)
 		} else if (n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'JSXFragment') {
 			out.push(...normalizeChildren(n.children || [], inSvg, ctx, inNoscript));
 		} else if (n.type === 'JSXStyleElement') {
+			if (hasJsxAttribute(n, 'dangerouslySetInnerHTML') || hasJsxAttribute(n, 'children')) {
+				out.push(
+					...normalizeChildren(
+						[b.jsx_element(n, n.openingElement.attributes || [], [])],
+						inSvg,
+						ctx,
+						inNoscript,
+						allowImperative,
+					),
+				);
+				continue;
+			}
 			// `<style href precedence>` is a Float style resource, not scoped CSS —
 			// partition it to the head channel like precedence links.
 			if (!inSvg && !inNoscript && headResourceKind(n) === 'style') {
@@ -20850,7 +21035,7 @@ function normalizeChildren(nodes, inSvg = false, ctx = null, inNoscript = false)
 				continue;
 			}
 			// Drop a `<style>` block at child position — its CSS gets registered
-			// via the @tsrx/core scoping pipeline (applyCssScoping / applyStyleMap);
+			// via the style-scope pre-pass (applyStyleScopes, ./style-scopes.js);
 			// it contributes no DOM here.
 			continue;
 		} else if (isWrappedJsxDirective(n)) {
@@ -21852,9 +22037,9 @@ function planJsx(
 	for (let rootI = 0; rootI < jsxNodes.length; rootI++) {
 		const node = jsxNodes[rootI];
 		const nodeIsComp = node.type === 'Element' && isComponentTag(node);
-		if (ctx.dev && node.type === 'Element' && !nodeIsComp) {
+		if (ctx.dev && ((node.type === 'Element' && !nodeIsComp) || node.imperativeRoot)) {
 			collectClientHtmlNestingWarnings(
-				node,
+				node.imperativeRoot ?? node,
 				ctx,
 				parentNs === 'opaque' ? 'html' : parentNs,
 				nestingWarningIdentities,
@@ -22692,6 +22877,7 @@ function planJsx(
 			(fc.indexIndependent ? 8 : 0) |
 			(fc.ssrMarkerless ? 16 : 0) |
 			(fc.requiresScope ? 32 : 0) |
+			(ctx.dev && fc.missingMapKey ? 64 : 0) |
 			(fc.keyedSelectionIndex >= 0 ? fc.keyedSelectionIndex << 6 : 0);
 		// Arg layout: forBlock(__s, slot, host, items, keyFn, body, flags?, deps?,
 		// emptyBody?, anchor?, ownEnd?, selectionBody?). The final argument is
@@ -23638,7 +23824,7 @@ function cleanupsPush(fnNode) {
 }
 
 /**
- * The `[spread, name, value]` rows a commit-phase source collector
+ * The `[spread, name, value, merge?]` rows a commit-phase source collector
  * (`setHostPropSources` / `setFormControlSources`) resolves in authored order.
  * Shared by the mount and update emits, which differ only in how a source's
  * value is read back — a bag local at mount, a bag field on update.
@@ -23648,20 +23834,26 @@ function cleanupsPush(fnNode) {
  * split ssrDirectSource makes on the server); the collector itself serializes
  * every source of the element and stays anchored there. Nothing else in a row
  * reproduces the authored name — the value is the prop's expression — so
- * without this the whole group answered only for the element.
+ * without this the whole group answered only for the element. A trailing `true`
+ * marks a synthesized scope class that must merge with a spread's class.
  */
 function commitSourceRows(sources, valueOf) {
-	return b.array(
-		sources.map(({ spread, name, nameOrigin, binding }) =>
-			spread
-				? b.array([b.literal(true), valueOf(binding, true)])
-				: b.array([
-						b.literal(false),
-						inheritOriginLoc(b.literal(name), nameOrigin ?? null),
-						valueOf(binding, false),
-					]),
-		),
-	);
+	const rows = [];
+	for (let i = 0; i < sources.length; i++) {
+		const source = sources[i];
+		if (source.spread) {
+			rows.push(b.array([b.literal(true), valueOf(source.binding, true)]));
+			continue;
+		}
+		const cells = [
+			b.literal(false),
+			inheritOriginLoc(b.literal(source.name), source.nameOrigin ?? null),
+			valueOf(source.binding, false),
+		];
+		if (source.merge) cells.push(b.literal(true));
+		rows.push(b.array(cells));
+	}
+	return b.array(rows);
 }
 
 // Mount for a DEFERRED property-write binding: store the element ref + seed the
@@ -23710,7 +23902,15 @@ function emitBindingMount(bind, elVar, bag) {
 	// `suppressHydrationWarning`: stamp a JS flag (NOT a DOM attribute) the runtime reads to
 	// keep the server value + skip the warning on a hydration mismatch for this element.
 	if (bind.kind === 'suppress') {
-		return st(b.stmt(b.assignment('=', b.member(el(), '__oct_suppress'), b.literal(true))));
+		return st(
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(el(), '__oct_suppress'),
+					b.binary('===', bind.expr, b.literal(true)),
+				),
+			),
+		);
 	}
 	if (bind.kind === 'dangerChild') {
 		return st(b.stmt(b.call('_$markDangerouslySetInnerHTMLChildren', el())));
@@ -24850,7 +25050,7 @@ function collectClientHtmlNestingWarnings(root, ctx, inheritedNamespace, identit
 	const visit = (node, namespace, ancestors) => {
 		if (node?.type !== 'Element' && node?.type !== 'JSXElement') return;
 		if (isComponentTag(node)) return;
-		const tag = elementTagName(node);
+		const tag = jsxTagName(node) || elementTagName(node);
 		if (tag === null) return;
 		const semanticTag = tag.toLowerCase();
 		const ownNamespace = nsForSelf(tag, namespace);
@@ -24884,7 +25084,13 @@ function collectClientHtmlNestingWarnings(root, ctx, inheritedNamespace, identit
 				? 'html'
 				: nsForChildren(tag, namespace);
 		const nextAncestors = [...ancestors, { tag: semanticTag, namespace: ownNamespace, location }];
-		const children = normalizeChildren(node.children || [], childNamespace === 'svg', ctx);
+		const children = normalizeChildren(
+			node.children || [],
+			childNamespace === 'svg',
+			ctx,
+			false,
+			false,
+		);
 		for (const child of children) {
 			if (child.type === 'Text' && ownNamespace === 'html' && restrictedTextParent(semanticTag)) {
 				const text = staticTextLiteral(child.expression);
@@ -25138,6 +25344,7 @@ function emitElementHtml(
 				name: rawAttrName,
 				nameOrigin: attr.name,
 				binding,
+				merge: isSynthesizedClassAttr(attr),
 			});
 			continue;
 		}
@@ -25156,12 +25363,22 @@ function emitElementHtml(
 		// `suppressHydrationWarning` (React shallow semantics): NEVER a DOM attribute (not
 		// serialized client or server) — stamp a JS flag the runtime's hydration-mismatch
 		// paths read, so a server/client divergence on this element keeps the server value
-		// and skips the warning. Bare or `={true}`/`={expr}` opts in; only `={false}` doesn't.
+		// and skips the warning. Only a bare prop or a value equal to true opts in.
 		if (rawAttrName === 'suppressHydrationWarning') {
 			const v = attr.value;
 			const inner = v && v.type === 'JSXExpressionContainer' ? v.expression : v;
 			const isFalse = inner && inner.type === 'Literal' && inner.value === false;
-			if (!isFalse) bindings.push({ id: bindings.length, kind: 'suppress', path, origin: attr });
+			if (!isFalse)
+				bindings.push({
+					id: bindings.length,
+					kind: 'suppress',
+					path,
+					origin: attr,
+					expr:
+						inner == null
+							? b.literal(true, 'true', attr)
+							: tsrxExprNode(inner, ctx, componentName, inlinedSubs),
+				});
 			continue;
 		}
 		const attrName = normalizeJsxAttrName(rawAttrName, tag, hostNs);
@@ -25383,6 +25600,7 @@ function emitElementHtml(
 			// path; valid static attrs still bake with their real boolean semantics.
 			if (
 				isEventAttrName(attrName) ||
+				MUST_USE_PROPERTY_PROPS.has(attrName.toLowerCase()) ||
 				isAfterSpread ||
 				classBeforeSpread ||
 				(ctx.dev && needsDevStaticAttrValidation(attrName, true, tag, hostNs))
@@ -25473,6 +25691,7 @@ function emitElementHtml(
 		if (
 			inner.type === 'Literal' &&
 			!isEventAttrName(attrName) &&
+			!MUST_USE_PROPERTY_PROPS.has(attrName.toLowerCase()) &&
 			!isAfterSpread &&
 			!classBeforeSpread &&
 			!(ctx.dev && needsDevStaticAttrValidation(attrName, inner.value, tag, hostNs))
@@ -25485,7 +25704,7 @@ function emitElementHtml(
 		// Dynamic value — record a binding. (Also reached for literal values that
 		// come after a spread, since those need to win over the spread at runtime.)
 		const expr = tsrxExprNode(inner, ctx, componentName, inlinedSubs);
-		if (isEventAttrName(attrName)) {
+		if (isEventAttrName(attrName) && !(tag.includes('-') && !isDelegatedEventProp(attrName))) {
 			// React-shape: a trailing `Capture` selects the capture phase (fired
 			// root→target before bubble handlers), stamped under `$$capture:<type>`.
 			// The real events gotpointercapture / lostpointercapture literally end in
@@ -25501,7 +25720,14 @@ function emitElementHtml(
 				capture = true;
 				rest = rest.slice(0, -7);
 			}
-			const eventName = rest === 'DoubleClick' ? 'dblclick' : rest.toLowerCase();
+			const eventName =
+				rest === 'DoubleClick'
+					? 'dblclick'
+					: rest === 'Focus'
+						? 'focusin'
+						: rest === 'Blur'
+							? 'focusout'
+							: rest.toLowerCase();
 			const slotKey = capture ? `$$capture:${eventName}` : `$$${eventName}`;
 			// `onClick` → the `'$$click'` slot key. Without this the attribute name
 			// is unreachable from the output: the key's map position resolves to
@@ -26182,7 +26408,10 @@ function emitElementHtml(
 					};
 					const ic = makeIfCall(asIf, ctx, inlinedSubs, childNs, cssHash);
 					ic.hostPath = path;
+					ic.anchorPath = [...path, childIdx];
 					ifCalls.push(ic);
+					appendTemplatePart(html, '<!>', 'anchor');
+					childIdx++;
 				} else if (isKnownStringChildExpression(expr, ctx.knownStringChildLocals)) {
 					bindings.push({
 						id: bindings.length,
@@ -26277,7 +26506,7 @@ function makePortalCall(callNode, ctx, componentName, inlinedSubs, parentNs, css
 			bodyArg,
 		);
 	} else {
-		bodyExpr = tsrxExprNode(bodyArg, ctx, componentName, inlinedSubs);
+		bodyExpr = tsrxExprNode(rewriteJsxValues(bodyArg, ctx), ctx, componentName, inlinedSubs);
 	}
 	return {
 		id: ctx.nextHelperId++,
@@ -26707,6 +26936,21 @@ function tagBindingName(node) {
 	return name.type === 'Identifier' || name.type === 'JSXIdentifier' ? name.name : null;
 }
 
+// A marked module binding can be shadowed by a parameter, block, or directive
+// item. Keep the name-only fast path for all other tags; a candidate needs the
+// same authored-scope proof used for Activity, shared by client and SSR emits.
+function isDescriptorChildrenTag(node, ctx) {
+	const name = node.openingElement?.name || node.id;
+	if (
+		(name?.type !== 'Identifier' && name?.type !== 'JSXIdentifier') ||
+		!ctx.descriptorChildrenBindings?.has(name.name)
+	) {
+		return false;
+	}
+	const binding = activityReferenceBinding(name, node, ctx);
+	return binding?.scope === ctx.activityLexical?.rootScope;
+}
+
 // React-style render-prop detection: if a component's children are exactly one
 // `{fn}` expression hole whose expression is a function (arrow or function
 // expression) — `<Comp>{(data) => <jsx/>}</Comp>` — return that function node so
@@ -27059,7 +27303,7 @@ function makeCompCall(
 		const children = rewriteOpaqueTitles(sourceChildren, ctx, 'opaque');
 		const childrenParentNs =
 			!activityDescriptor && !isFragmentLongForm(node, ctx) ? 'opaque' : parentNs;
-		if (compName !== null && ctx.descriptorChildrenBindings?.has(compName)) {
+		if (compName !== null && isDescriptorChildrenTag(node, ctx)) {
 			const kids = children
 				.map((child) => lowerInspectableJsxChild(child, ctx))
 				.filter((child) => child != null);
@@ -27707,16 +27951,20 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	const keyHelper = `_key$${ctx.nextHelperId++}`;
 	const keyOrigin = node.loc ? node : keyFn.loc ? keyFn : ctx._moduleOrigin;
 	const keyBody = keyFn.body;
+	const keyCapturesParent = [...collectFreeIdentifiers(keyFn, new Set())].some((name) =>
+		ctx.currentComponentLocals?.has(name),
+	);
 	const inlineKey =
-		node.nativeArrayMap !== undefined &&
-		mapCallbackHasEventClosure(node.nativeArrayMap.callback) &&
-		!isDestructured &&
-		!node.index &&
-		keyBody?.type === 'MemberExpression' &&
-		keyBody.computed !== true &&
-		keyBody.object?.type === 'Identifier' &&
-		keyBody.object.name === itemName &&
-		keyBody.property?.name === 'id';
+		keyCapturesParent ||
+		(node.nativeArrayMap !== undefined &&
+			mapCallbackHasEventClosure(node.nativeArrayMap.callback) &&
+			!isDestructured &&
+			!node.index &&
+			keyBody?.type === 'MemberExpression' &&
+			keyBody.computed !== true &&
+			keyBody.object?.type === 'Identifier' &&
+			keyBody.object.name === itemName &&
+			keyBody.property?.name === 'id');
 	if (!inlineKey) {
 		ctx.hoistedHelpers.push(inheritOriginLoc(b.const(keyHelper, keyFn), keyOrigin));
 	}
@@ -28129,6 +28377,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	);
 
 	const mapCall = node.nativeArrayMap || null;
+	if (keyCapturesParent) autoMemoDeps = null;
 	return {
 		id: ctx.nextHelperId++,
 		loc: devLoc(ctx, node),
@@ -28148,6 +28397,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 						b.id(mapCall.receiverName),
 					])
 			: node.right, // the fold replaces this with a `props.hN` member read
+		missingMapKey: mapCall !== null && node.key == null,
 		mapMethodExpr: mapCall
 			? mapCall.methodName === null
 				? b.member(b.id(mapCall.receiverName), 'map')