octane 0.2.2 → 0.2.3

package/dist/compiler/compile.js

@@ -39,6 +39,7 @@ import {
 	strongHash,
 } from '@tsrx/core';
 import { parseModule } from '#octane/compiler-parser';
+import { decodeHTMLStrict } from 'entities';
 import { print as esrapPrint } from 'esrap';
 import esrapTsx from 'esrap/languages/tsx';
 import { buildFatSegments } from './fat-segments.js';
@@ -106,7 +107,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 ------------------------------------
 //
@@ -622,7 +629,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 +670,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 +1574,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 +4723,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
@@ -8333,7 +8562,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 +9254,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) =>
@@ -10143,6 +10378,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
@@ -10240,7 +10476,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));
 		}
 	}
 
@@ -10366,7 +10603,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 +10622,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 +10672,7 @@ function ssrCompileBody(
 	componentNs = null,
 	returnedFragmentTemplate = false,
 	returnedFragmentRoot = false,
+	unboxedHtml = false,
 ) {
 	const prevMapTemps = ctx.currentMapTemps;
 	ctx.currentMapTemps = [];
@@ -10447,6 +10688,7 @@ function ssrCompileBody(
 			componentNs,
 			returnedFragmentTemplate,
 			returnedFragmentRoot,
+			unboxedHtml,
 		);
 	} finally {
 		ctx.currentMapTemps = prevMapTemps;
@@ -10464,6 +10706,7 @@ function ssrCompileBodyWithMapTemps(
 	componentNs,
 	returnedFragmentTemplate,
 	returnedFragmentRoot,
+	unboxedHtml,
 ) {
 	const returnedOutput = node.body?.type === 'JSXCodeBlock' && hasOwnValueReturn(node);
 	const mapTemps = ctx.currentMapTemps;
@@ -10685,7 +10928,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
@@ -11022,14 +11270,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'),
@@ -11901,9 +12150,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),
@@ -12394,6 +12645,7 @@ function ssrCompileSub(
 	componentNs,
 	returnedFragmentTemplate = false,
 	returnedFragmentRoot = false,
+	unboxedHtml = false,
 ) {
 	const fnName = `${baseName}$${ctx.nextHelperId++}`;
 	const synth = { params: paramNodes || [], body: bodyStmts };
@@ -12422,6 +12674,7 @@ function ssrCompileSub(
 			componentNs,
 			returnedFragmentTemplate,
 			returnedFragmentRoot,
+			unboxedHtml,
 		);
 	} finally {
 		ctx._ssrFoldedExprHoles = prevFoldedExprHoles;
@@ -12584,6 +12837,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);
@@ -13855,7 +14111,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 +14148,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 +14633,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 +14853,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 +14990,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 +16051,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 +16715,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 +16935,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 +16953,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 +17615,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 +17645,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 +17712,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 +17740,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 +17807,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 +17832,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 +17865,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;
@@ -19217,6 +19524,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 +20388,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 +20427,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 +20645,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 +20661,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 +20974,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 +21114,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 +21125,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 +21238,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 +21308,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') {
@@ -21852,9 +22329,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 +23169,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
@@ -23710,7 +24188,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 +25336,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 +25370,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);
@@ -25156,12 +25648,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 +25885,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 +25976,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 +25989,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 +26005,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 +26693,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 +26791,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++,
@@ -27707,16 +28221,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 +28647,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 +28667,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')