octane 0.1.3 → 0.1.4

package/dist/compiler/compile.js

@@ -37,22 +37,20 @@ import {
 import { print as esrapPrint } from 'esrap';
 import esrapTsx from 'esrap/languages/tsx';
 
-const VOID_ELEMENTS = new Set([
-	'area',
-	'base',
-	'br',
-	'col',
-	'embed',
-	'hr',
-	'img',
-	'input',
-	'link',
-	'meta',
-	'param',
-	'source',
-	'track',
-	'wbr',
-]);
+// DOM truth tables shared with the client/server runtimes (via constants.ts) —
+// static bakes and dynamic writes MUST agree on which attributes render, under
+// what name, and in what form, or client/SSR/hydration drift apart. See the
+// dom-tables.js header for per-table semantics.
+import {
+	VOID_ELEMENTS,
+	BOOLEAN_ATTR_PROPS,
+	MUST_USE_PROPERTY_PROPS,
+	SVG_ONLY_TAGS,
+	ATTRIBUTE_ALIASES,
+	isEnumeratedBooleanAttr,
+	cssStyleValue,
+	hyphenateStyleName,
+} from '../dom-tables.js';
 
 // React parity: a void element must neither have children nor use
 // `dangerouslySetInnerHTML` — React throws (ReactDOMComponent-test.js:1794/:1807).
@@ -100,6 +98,129 @@ function rejectVoidElementContent(tag, node, ctx) {
 	);
 }
 
+// Controlled-form binding kinds: `value`/`checked`/`defaultValue`/
+// `defaultChecked` on <input>/<textarea>/<select> route to the runtime
+// property helpers (setValue & co — React-parity controlled semantics on
+// native events) instead of setAttribute. STATIC literals included: baking
+// `value="a"` into the template would freeze the attribute instead of driving
+// the property. Everything else — <option> (its `value` attribute is what the
+// select projection reads), custom elements, non-form tags — keeps plain
+// attribute semantics. Mirrors the runtime's setAttribute routing branch.
+function controlledKindFor(tag, attrName) {
+	if (tag === 'input') {
+		if (attrName === 'value') return 'value';
+		if (attrName === 'checked') return 'checked';
+		if (attrName === 'defaultValue') return 'defaultValue';
+		if (attrName === 'defaultChecked') return 'defaultChecked';
+		return null;
+	}
+	if (tag === 'textarea') {
+		if (attrName === 'value') return 'value';
+		if (attrName === 'defaultValue') return 'defaultValue';
+		return null;
+	}
+	if (tag === 'select') {
+		if (attrName === 'value') return 'selectValue';
+		if (attrName === 'defaultValue') return 'defaultValue';
+		return null;
+	}
+	return null;
+}
+
+// The `_$`-aliased runtime helper for each controlled binding kind
+// (+ autoFocus, which shares the routing but is mount-only).
+const CONTROLLED_KIND_HELPERS = {
+	value: 'setValue',
+	checked: 'setChecked',
+	selectValue: 'setSelectValue',
+	defaultValue: 'setDefaultValue',
+	defaultChecked: 'setDefaultChecked',
+	autoFocus: 'setAutoFocus',
+};
+
+// Serialize one STATIC literal attribute value into template/SSR HTML —
+// shared by emitElementHtml and ssrEmitElement so both bakes stay identical,
+// mirroring the runtimes' dynamic coercion: aria-*/enumerated/data-* booleans
+// stringify, boolean-attr props render the canonical `attr=""` presence form
+// (falsy drops; overloaded download/capture keep string payloads), booleans
+// on non-boolean attrs DROP (React: `title={true}` never renders), everything
+// else escapes as before. Custom elements keep raw semantics.
+function bakeStaticAttr(attrName, lv, tag) {
+	if (lv == null) return '';
+	const isCustom = tag !== undefined && tag.includes('-');
+	const lower = attrName.toLowerCase();
+	if (typeof lv === 'boolean') {
+		if (attrName.startsWith('aria-') || attrName.startsWith('data-')) {
+			return ` ${attrName}="${lv}"`;
+		}
+		// Enumerated booleans stringify — "false" is a real state, absent means
+		// inherit (the same gate the runtimes apply to dynamic values).
+		if (isEnumeratedBooleanAttr(lower)) {
+			return ` ${attrName}="${lv}"`;
+		}
+		if (isCustom) return lv ? ` ${attrName}` : '';
+		// Boolean attrs + the overloaded booleans (download/capture) + the
+		// mustUseProperty statics all take presence semantics for BOOLEAN
+		// literals; non-boolean overloaded values pass through verbatim below.
+		if (
+			BOOLEAN_ATTR_PROPS.has(lower) ||
+			MUST_USE_PROPERTY_PROPS.has(lower) ||
+			lower === 'download' ||
+			lower === 'capture'
+		) {
+			return lv ? ` ${lower}=""` : '';
+		}
+		return ''; // boolean on a non-boolean attribute never renders (React)
+	}
+	if (!isCustom && (BOOLEAN_ATTR_PROPS.has(lower) || MUST_USE_PROPERTY_PROPS.has(lower))) {
+		return lv ? ` ${lower}=""` : '';
+	}
+	if (typeof lv === 'string') return ` ${attrName}="${escapeAttr(lv)}"`;
+	if (typeof lv === 'number') return ` ${attrName}="${lv}"`;
+	return '';
+}
+
+// React contract: a `<textarea>` with a `value`/`defaultValue` prop OWNS its
+// content — children would fight the prop (React throws for defaultValue +
+// children and warns for value + children). Compile-time error on both emit
+// paths, like rejectVoidElementContent; a plain `<textarea>text</textarea>`
+// keeps its native content (that IS defaultValue semantics).
+function rejectTextareaValueChildren(tag, node, ctx) {
+	if (tag !== 'textarea') return;
+	const attrs = node.attributes || node.openingElement?.attributes || [];
+	let hasValueProp = false;
+	for (const a of attrs) {
+		if (a.type !== 'Attribute' && a.type !== 'JSXAttribute') continue;
+		const n = jsxAttrRawName(a);
+		if (n === 'value' || n === 'defaultValue') {
+			hasValueProp = true;
+			break;
+		}
+	}
+	if (!hasValueProp) return;
+	// Renderable-children check — same lightweight scan as rejectVoidElementContent.
+	let offending = false;
+	for (const c of node.children || []) {
+		if (!c) continue;
+		if (c.type === 'JSXText') {
+			if (/^\s*$/.test(c.value)) continue;
+		} else if (c.type === 'JSXExpressionContainer') {
+			if (!c.expression || c.expression.type === 'JSXEmptyExpression') continue;
+		} else if (c.type === 'JSXStyleElement') {
+			continue;
+		}
+		offending = true;
+		break;
+	}
+	if (!offending) return;
+	const l = node.loc && node.loc.start;
+	const at = l ? ` (${ctx.mapSourceName ? ctx.mapSourceName + ':' : ''}${l.line}:${l.column})` : '';
+	throw new Error(
+		'`<textarea>` must not have children when it uses `value` or `defaultValue` — ' +
+			`the prop owns the content. Move the text into the prop.${at}`,
+	);
+}
+
 // Compiler-generated code references runtime helpers under a collision-proof
 // `_$` alias — `import { setText as _$setText } from 'octane'` + `_$setText(…)`
 // — because generated statements are interleaved with USER statements inside
@@ -142,6 +263,87 @@ function addUserImportSpecifiers(ctx, node) {
 	}
 }
 
+// M3 marker elision (docs/comment-marker-elision-plan.md): a component body
+// whose ENTIRE output is one component call spans its own block's range by
+// construction, so the call site can INHERIT the parent block's markers on the
+// client and the server can skip the child's frame pair — collapsing sole-child
+// wrapper chains (incl. `<ctx.Provider>` router/binding stacks) to the
+// outermost pair. The predicate must be computed from the same AST by BOTH
+// compile modes (client stamp ↔ server pair-skip ↔ hydration adopt-nothing
+// agree by construction). Exclusions:
+//   - `key=` (key-driven identity forces the slot to own its range),
+//   - the octane boundary builtins (Suspense / ErrorBoundary / Activity —
+//     their pairs are load-bearing for streaming). Direct imported names are
+//     excluded here (collectOctaneBoundaryNames); member/dynamic/aliased tags
+//     that RESOLVE to a boundary builtin are declined at RUNTIME by identity —
+//     componentSlot and ssrComponent both check the resolved comp against the
+//     builtins, so the two sides always agree.
+// `bodyNodes` is the normalized, HeadHoist-filtered root list of a `@{ … }`
+// (JSXCodeBlock) body — callers gate on the body form.
+function inheritSoleCompRoot(bodyNodes, ctx) {
+	if (bodyNodes.length !== 1) return false;
+	const n = bodyNodes[0];
+	if (n.type !== 'Element' || !isComponentTag(n)) return false;
+	const id = n.openingElement?.name || n.id;
+	if (!id) return false;
+	if (
+		(id.type === 'Identifier' || id.type === 'JSXIdentifier') &&
+		typeof id.name === 'string' &&
+		ctx._octaneBoundaryNames &&
+		ctx._octaneBoundaryNames.has(id.name)
+	) {
+		return false;
+	}
+	const attrs = n.attributes || n.openingElement?.attributes || [];
+	for (const a of attrs) {
+		if (a.type !== 'Attribute' && a.type !== 'JSXAttribute') continue;
+		const name = a.name && (a.name.name || a.name);
+		if (name === 'key') return false;
+	}
+	return true;
+}
+
+// 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) {
+	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 (
+				(imported === 'Suspense' ||
+					imported === 'ErrorBoundary' ||
+					imported === 'Activity' ||
+					imported === 'ViewTransition' ||
+					imported === 'unstable_ViewTransition') &&
+				sp.local?.name
+			) {
+				names.add(sp.local.name);
+			}
+		}
+	}
+	return names;
+}
+
+// Does this module import ViewTransition from 'octane' (any local alias)?
+// Drives the client prelude's `_$vtSeen()` module-load hint: the runtime's
+// view-transition machinery is gated on a sticky VT_SEEN flag, and without
+// the hint the very FIRST transition flush that mounts a boundary would only
+// learn "this app uses ViewTransition" mid-drain — after the chance to
+// snapshot the old state has passed (docs/view-transitions-plan.md).
+function moduleImportsViewTransition(astBody) {
+	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 (imported === 'ViewTransition' || imported === 'unstable_ViewTransition') return true;
+		}
+	}
+	return false;
+}
+
 export const HOOK_NAMES = new Set([
 	'useState',
 	'useReducer',
@@ -166,16 +368,26 @@ export const HOOK_NAMES = new Set([
 // Namespace inheritance — mirrors HTML5 foreign-content rules. The element
 // itself and its children may have *different* namespaces: <foreignObject>
 // inside SVG is still an SVG element, but its children switch back to HTML.
+// SVG_ONLY_TAGS (imported from ../dom-tables.js — the runtime's de-opt
+// reconciler uses the same table) drives the inference: a tag that exists ONLY
+// in the SVG namespace implies SVG in a namespace-ambiguous position — a
+// component's ROOT template, a fragment root — without a lexical `<svg>`
+// ancestor. A component whose root is `<g>`/`<path>` must not compile to an
+// HTML template: the HTMLUnknownElement it would produce inside an `<svg>`
+// paints nothing.
+
 function nsForSelf(tag, parentNs) {
 	if (tag === 'svg') return 'svg';
 	if (tag === 'math') return 'mathml';
-	return parentNs; // includes <foreignObject> — itself is SVG-ns
+	if (parentNs === 'html' && SVG_ONLY_TAGS.has(tag)) return 'svg';
+	return parentNs; // includes <foreignObject> under an svg parent — itself SVG-ns
 }
 
 function nsForChildren(tag, parentNs) {
 	if (tag === 'foreignObject') return 'html';
 	if (tag === 'svg') return 'svg';
 	if (tag === 'math') return 'mathml';
+	if (parentNs === 'html' && SVG_ONLY_TAGS.has(tag)) return 'svg';
 	return parentNs;
 }
 
@@ -190,13 +402,14 @@ function elementTagName(node) {
 
 function isNonHtmlRootTag(node) {
 	const t = elementTagName(node);
-	return t === 'svg' || t === 'math';
+	return t === 'svg' || t === 'math' || (t !== null && SVG_ONLY_TAGS.has(t));
 }
 
 function nsForRootTag(node, parentNs) {
 	const t = elementTagName(node);
 	if (t === 'svg') return 'svg';
 	if (t === 'math') return 'mathml';
+	if (t !== null && SVG_ONLY_TAGS.has(t)) return 'svg';
 	return parentNs;
 }
 
@@ -218,11 +431,23 @@ function jsxAttrRawName(attr) {
 	return n.name || n;
 }
 
-// `className`/`htmlFor` are React-shape JSX aliases; emit the native
-// `class`/`for` names so the browser actually applies them (and dynamic
-// bindings know which setter to pick).
-function normalizeJsxAttrName(raw) {
-	return raw === 'className' ? 'class' : raw === 'htmlFor' ? 'for' : raw;
+// ATTRIBUTE_ALIASES (imported from ../dom-tables.js): React 19's alias table,
+// camelCase JSX prop → the attribute the browser actually parses
+// (`strokeWidth` → `stroke-width`, `htmlFor` → `for`). The compiler bakes
+// these into static template/SSR markup; the client/server runtimes apply the
+// same table to dynamic bindings, spreads, and de-opt props.
+
+// `className` plus the ATTRIBUTE_ALIASES table above: emit the native
+// attribute names so the browser actually applies them (and dynamic bindings
+// know which setter to pick). Custom elements keep every name VERBATIM (raw
+// props, no alias tables) — the same gate the runtimes' setAttribute/ssrAttr
+// apply to dynamic values.
+function normalizeJsxAttrName(raw, tag) {
+	// `className` → `class` applies EVERYWHERE, custom elements included (React
+	// special-cases it in setPropOnCustomElement); only the alias table is raw.
+	if (raw === 'className') return 'class';
+	if (tag !== undefined && tag.includes('-')) return raw;
+	return ATTRIBUTE_ALIASES.get(raw) || raw;
 }
 
 // React-shape `onXxx` event-handler attribute: `on` + an uppercase letter, so
@@ -257,105 +482,25 @@ function objectExprIsStaticLiteral(obj) {
 	return true;
 }
 
-// camelCase / vendor-prefixed style key → kebab-case. Mirrors the runtime
-// `styleName` (runtime.ts) / `hyphenate` (runtime.server.ts) so a STATIC baked
-// object style produces the same CSS a dynamic one would.
-function hyphenateStyleName(name) {
-	if (name.charCodeAt(0) === 45 /* - */) return name; // --custom / -webkit-…
-	let out = '';
-	let changed = false;
-	for (let i = 0; i < name.length; i++) {
-		const c = name.charCodeAt(i);
-		if (c >= 65 && c <= 90) {
-			out += '-' + String.fromCharCode(c + 32);
-			changed = true;
-		} else out += name[i];
-	}
-	if (!changed) return name;
-	if (out.charCodeAt(0) === 109 && out.charCodeAt(1) === 115 && out.charCodeAt(2) === 45)
-		out = '-' + out;
-	return out;
-}
-
-// React's unitless-property set — keep in sync with `constants.ts`
-// (UNITLESS_STYLE_PROPS). Canonical form: lowercased, dashes stripped.
-const UNITLESS_STYLE_PROPS = new Set();
-for (const base of [
-	'animationIterationCount',
-	'aspectRatio',
-	'borderImageOutset',
-	'borderImageSlice',
-	'borderImageWidth',
-	'boxFlex',
-	'boxFlexGroup',
-	'boxOrdinalGroup',
-	'columnCount',
-	'columns',
-	'flex',
-	'flexGrow',
-	'flexPositive',
-	'flexShrink',
-	'flexNegative',
-	'flexOrder',
-	'gridArea',
-	'gridRow',
-	'gridRowEnd',
-	'gridRowSpan',
-	'gridRowStart',
-	'gridColumn',
-	'gridColumnEnd',
-	'gridColumnSpan',
-	'gridColumnStart',
-	'fontWeight',
-	'lineClamp',
-	'lineHeight',
-	'opacity',
-	'order',
-	'orphans',
-	'tabSize',
-	'widows',
-	'zIndex',
-	'zoom',
-	'fillOpacity',
-	'floodOpacity',
-	'stopOpacity',
-	'strokeDasharray',
-	'strokeDashoffset',
-	'strokeMiterlimit',
-	'strokeOpacity',
-	'strokeWidth',
-]) {
-	const c = base.toLowerCase();
-	UNITLESS_STYLE_PROPS.add(c);
-	UNITLESS_STYLE_PROPS.add('webkit' + c);
-	UNITLESS_STYLE_PROPS.add('ms' + c);
-	UNITLESS_STYLE_PROPS.add('moz' + c);
-	UNITLESS_STYLE_PROPS.add('o' + c);
-}
-
-// React parity: a bare number gets `px` unless it's 0, a custom prop, or unitless.
-function cssStyleValueStatic(name, value) {
-	if (
-		typeof value === 'number' &&
-		value !== 0 &&
-		name.charCodeAt(0) !== 45 &&
-		!UNITLESS_STYLE_PROPS.has(name.replaceAll('-', '').toLowerCase())
-	) {
-		return value + 'px';
-	}
-	return '' + value;
-}
-
+// Serialize a fully-literal style object into a `style="…"` string at compile
+// time. `hyphenateStyleName` + `cssStyleValue` come from ../dom-tables.js —
+// the SAME key normalization and px/unitless/trim coercion the runtimes apply
+// to dynamic style objects — so a STATIC baked object style produces the same
+// CSS a dynamic one would. The string is CSSOM-serialization-shaped
+// (`prop: value; prop2: value2;` — declarations TERMINATED, not separated):
+// that's what the same element's style attribute reads back as once anything
+// touches el.style, and what React's CSSOM writes serialize to — so baked and
+// dynamic styles are byte-identical in innerHTML.
 function staticObjectToCssString(obj) {
 	const parts = [];
 	for (const p of obj.properties || []) {
 		const name = p.key.type === 'Identifier' ? p.key.name : p.key.value;
 		const value = p.value.value;
 		if (value == null || value === false || value === '') continue;
-		const cssValue = value === true ? '' : cssStyleValueStatic(name, value);
-		parts.push(`${hyphenateStyleName(name)}: ${cssValue}`);
+		const cssValue = value === true ? '' : cssStyleValue(name, value);
+		parts.push(`${hyphenateStyleName(name)}: ${cssValue};`);
 	}
-	return parts.join('; ');
+	return parts.join(' ');
 }
 
 // ===========================================================================
@@ -594,6 +739,48 @@ function collectFreeIdentifiers(root, initiallyBound) {
 			return;
 		}
 
+		// JSX tag position: a COMPONENT tag is a real identifier reference — a
+		// per-body local (`const C = props.comp`) used as `<C/>` must show up as
+		// free, or a hoisted helper (Phase 2) would silently drop it from its
+		// env tuple. Host tag names ('div') and attribute NAMES are static —
+		// only component-shaped identifier tags (isCompatTag rule), member-tag
+		// ROOT objects, and dynamic `<{expr}/>` expressions count.
+		if (t === 'Element' || t === 'JSXElement') {
+			const tag = n.openingElement?.name || n.id;
+			if (tag) {
+				if (
+					(tag.type === 'Identifier' || tag.type === 'JSXIdentifier') &&
+					typeof tag.name === 'string'
+				) {
+					if (!/^[a-z]/.test(tag.name) && !tag.name.includes('-') && !scope.has(tag.name)) {
+						free.add(tag.name);
+					}
+				} else if (tag.type === 'MemberExpression' || tag.type === 'JSXMemberExpression') {
+					let o = tag;
+					while (o && (o.type === 'MemberExpression' || o.type === 'JSXMemberExpression')) {
+						o = o.object;
+					}
+					if (
+						o &&
+						(o.type === 'Identifier' || o.type === 'JSXIdentifier') &&
+						typeof o.name === 'string' &&
+						!scope.has(o.name)
+					) {
+						free.add(o.name);
+					}
+				} else if (tag.type === 'JSXExpressionContainer') {
+					walk(tag.expression, scope);
+				}
+			}
+			const attrs = n.attributes || n.openingElement?.attributes || [];
+			for (const a of attrs) {
+				if (a.type === 'Attribute' || a.type === 'JSXAttribute') walk(a.value, scope);
+				else walk(a.argument ?? a, scope); // spread attribute
+			}
+			walk(n.children, scope);
+			return;
+		}
+
 		// Member access — `obj.prop`: prop is a static name, not a binding ref.
 		if (t === 'MemberExpression' && !n.computed) {
 			walk(n.object, scope);
@@ -737,6 +924,54 @@ function containsComponentCallOrControlFlow(stmts) {
 	return found;
 }
 
+/**
+ * True when the keyed-item body executes any call DURING render:
+ * CallExpression / NewExpression / TaggedTemplateExpression in render-value
+ * position (holes, attribute values, locals). Such a call can read mutable
+ * state that neither the item reference nor the deps tuple changes with —
+ * e.g. `header.column.getIsSorted()` on a memoized table-core header — so the
+ * PURE/DEP-PURE survivor short-circuit (see the body analysis in makeForCall)
+ * would freeze its output where React re-runs the body unconditionally.
+ *
+ * Calls nested inside FUNCTION VALUES (event-handler arrows, function
+ * expressions) are deferred to invoke time and close over the same ref-stable
+ * item/deps a skipped survivor would have, so they can't go stale at render
+ * time — the walk does not descend into function bodies or parameters.
+ */
+function containsRenderCall(stmts) {
+	let found = false;
+	const seen = new WeakSet();
+	function walk(n) {
+		if (found || !n) return;
+		if (Array.isArray(n)) {
+			for (const x of n) walk(x);
+			return;
+		}
+		if (typeof n !== 'object') return;
+		const t = n.type;
+		if (!t) return;
+		if (seen.has(n)) return;
+		seen.add(n);
+		if (
+			t === 'ArrowFunctionExpression' ||
+			t === 'FunctionExpression' ||
+			t === 'FunctionDeclaration'
+		) {
+			return; // deferred — runs at event/invoke time, not during render
+		}
+		if (t === 'CallExpression' || t === 'NewExpression' || t === 'TaggedTemplateExpression') {
+			found = true;
+			return;
+		}
+		for (const key in n) {
+			if (AST_WALK_SKIP_KEYS.has(key)) continue;
+			walk(n[key]);
+		}
+	}
+	for (const s of stmts) walk(s);
+	return found;
+}
+
 /**
  * `() => fn(a, b, …)` — a zero-param arrow whose body is a single
  * function call. Returns `{ callee, args }` if so, else null. Used to compile
@@ -1201,11 +1436,20 @@ export function compile(source, filename, options) {
 	// name), used by hydration-mismatch warnings and reusable by a future Chrome-DevTools
 	// element→source layer. Strictly dev-gated so PROD output is byte-identical (zero cost).
 	const devEnabled = !!(options && options.dev);
+	// parallelUse: the parallel-`use()` transform pipeline (auto-memoized
+	// creations → hoisted parallel starts → batched unwrap → __warm fetch
+	// plans; docs/suspense-parallel-use-plan.md). ON by default — pass
+	// `parallelUse: false` to opt out (React-timing waterfall semantics).
+	// Output is byte-identical with the flag off, and the pipeline is a no-op
+	// for use()-free modules either way.
+	const parallelUseEnabled = !(options && options.parallelUse === false);
 
 	const ctx = {
 		filename,
 		mode,
 		dev: devEnabled,
+		parallelUse: parallelUseEnabled,
+		hmr: hmrEnabled, // gates Symbol.for vs Symbol() hook slots (allocHookSymbol)
 		runtimeNeeded: new Set(), // helpers referenced by GENERATED code — imported as `name as _$name`
 		userRuntimeNames: new Set(), // specifiers USER code references — imported verbatim
 		hoistedTemplates: [], // { name, html }
@@ -1216,6 +1460,8 @@ export function compile(source, filename, options) {
 		currentComponentLocals: null, // Set<string> while compiling a component body; null otherwise
 		knownStringLocals: null, // Set<string> of provably-string locals (text-hole inference)
 		nextHookSymId: 0,
+		nextPuId: 0, // parallel-use `__pu$N` hoisted-creation temps
+		_pendingWarm: null, // `X.__warm = …` source, set by compileFunctionBody, drained by compileComponent
 		nextFragId: 0,
 		nextTemplateId: 0,
 		nextHelperId: 0,
@@ -1231,6 +1477,23 @@ export function compile(source, filename, options) {
 		// the top-level (autoCallback) pass and drained per component below.
 		_setupMaps: null,
 	};
+	// Imported local bindings (any source). Used by the M1 cross-module
+	// singleRoot sentinel: only an IMPORTED identifier is a stable component
+	// identity for the lifetime of a slot — a local `const Comp = cond ? A : B`
+	// re-resolves per render, and a markerless slot regime must never be chosen
+	// off an identity that can change (see makeCompCall).
+	ctx.importedNames = new Set();
+	for (const node of ast.body) {
+		if (node.type !== 'ImportDeclaration') continue;
+		for (const sp of node.specifiers || []) {
+			if (sp.local && sp.local.name) ctx.importedNames.add(sp.local.name);
+		}
+	}
+	// M3 inherit-range exclusion set (see inheritSoleCompRoot).
+	ctx._octaneBoundaryNames = collectOctaneBoundaryNames(ast.body);
+	// Client prelude `_$vtSeen()` module-load hint (view-transitions plan).
+	ctx._usesViewTransition = moduleImportsViewTransition(ast.body);
+
 	// List of exported components needing HMR wrapping. Each entry: { name,
 	// exportKind: 'default' | 'named' }. We emit the `Comp = hmr(Comp)` lines
 	// and the `import.meta.hot.accept` block after walking the body, so the
@@ -1333,6 +1596,19 @@ export function compile(source, filename, options) {
 			})(root);
 			if (reject) eligible = false;
 		}
+		// M3 inherit-range: a body whose sole output is one component call BORROWS
+		// its own block's marker range at that site (see inheritSoleCompRoot), so
+		// callers must give it a real Block with a coherent range — a
+		// componentSlotLite invocation (LiteBlockImpl: no startMarker, endMarker =
+		// the call-site anchor) has nothing to borrow, and under HYDRATION the
+		// declined borrow would probe for a child pair the server never emitted.
+		// Reject lite for such callees.
+		if (eligible && compNode.body && compNode.body.type === 'JSXCodeBlock') {
+			const bodyNodes = normalizeChildren(
+				compNode.body.render ? [compNode.body.render] : [],
+			).filter((n) => n.type !== 'HeadHoist');
+			if (inheritSoleCompRoot(bodyNodes, ctx)) eligible = false;
+		}
 		info.eligible = eligible;
 		// Single-ELEMENT-root output: the component's body renders exactly one plain
 		// DOM element (not a component tag, fragment, or control-flow). Such a
@@ -1423,18 +1699,27 @@ export function compile(source, filename, options) {
 			if (hmrEnabled) hmrComponents.push({ name: c.id.name, exportKind: 'named' });
 		} else if (isReturnJsxFunction(node)) {
 			// `function Foo() { …hooks…; return <jsx>; }` — a plain return-JSX function.
+			const base = bodyLine;
 			ctx._setupMaps = null;
 			const chunk = compileReturnJsxFunction(node, ctx, {}) + '\n\n';
+			pushDeclAnchor(node, base);
+			drainSetupMaps(base);
 			body += chunk;
 			bodyLine += countNewlines(chunk);
 		} else if (node.type === 'ExportNamedDeclaration' && isReturnJsxFunction(node.declaration)) {
+			const base = bodyLine;
 			ctx._setupMaps = null;
 			const chunk = compileReturnJsxFunction(node.declaration, ctx, { export: true }) + '\n\n';
+			pushDeclAnchor(node, base);
+			drainSetupMaps(base);
 			body += chunk;
 			bodyLine += countNewlines(chunk);
 		} else if (node.type === 'ExportDefaultDeclaration' && isReturnJsxFunction(node.declaration)) {
+			const base = bodyLine;
 			ctx._setupMaps = null;
 			const chunk = compileReturnJsxFunction(node.declaration, ctx, { default: true }) + '\n\n';
+			pushDeclAnchor(node, base);
+			drainSetupMaps(base);
 			body += chunk;
 			bodyLine += countNewlines(chunk);
 		} else if (node.type === 'ImportDeclaration' && node.source.value === 'octane') {
@@ -1536,12 +1821,37 @@ export function compile(source, filename, options) {
 			'}\n';
 	}
 
+	// Cross-module singleRoot stamps (docs/comment-marker-elision-plan.md M1):
+	// a component whose body provably renders ONE plain element carries the
+	// marker on its BINDING, so a `componentSlot(…, 2)` call site in ANOTHER
+	// module can take the markerless singleRoot path at mount. Emitted at the
+	// module tail so it lands on the final binding (incl. the hmr() wrapper —
+	// the stamp goes on what importers see). Also feeds the runtime's existing
+	// value-position `$$singleRoot` descriptor check.
+	let stampBlock = '';
+	if (ctx.componentInfo) {
+		const stamps = [];
+		for (const [name, info] of ctx.componentInfo) {
+			if (info.singleRoot === true) stamps.push(`${name}.$$singleRoot = true;`);
+		}
+		if (stamps.length > 0) stampBlock = stamps.join('\n') + '\n';
+	}
+
+	// Module-load ViewTransition hint (see moduleImportsViewTransition) —
+	// registered before the import list is built so `__vtSeen` gets aliased in.
+	let vtHintBlock = '';
+	if (ctx._usesViewTransition) {
+		ctx.runtimeNeeded.add('__vtSeen');
+		vtHintBlock = rtAlias('__vtSeen') + '();\n';
+	}
+
 	// Built after HMR wiring so the import list includes `hmr`/`HMR` when needed.
 	const finalRuntimeImport = buildRuntimeImport(ctx, 'octane');
 
 	// Everything before `body` in the output — shifts every body segment's
 	// generated line down by the prelude's line count.
-	const prelude = finalRuntimeImport + delegateCall + styleBlock + templatesBlock + helpersBlock;
+	const prelude =
+		finalRuntimeImport + vtHintBlock + delegateCall + styleBlock + templatesBlock + helpersBlock;
 	const preludeLines = countNewlines(prelude);
 	const segments = bodySegments.map((s) => ({
 		genLine: s.genLine + preludeLines,
@@ -1551,7 +1861,7 @@ export function compile(source, filename, options) {
 	}));
 
 	return {
-		code: prelude + body + hmrBlock,
+		code: prelude + body + stampBlock + hmrBlock,
 		map: buildSourceMap(source, ctx.mapSourceName, segments),
 	};
 }
@@ -1590,6 +1900,16 @@ function compileServer(source, filename, options) {
 	const ctx = {
 		filename,
 		mode: 'server',
+		hmr: false, // SSR never hot-swaps in place — hook slots are plain Symbol()s
+		// SSR MIRROR of the parallel-`use()` pipeline (docs/suspense-parallel-use-
+		// plan.md Phase 5): the same memoize (Pass A) + hoist/batch (Pass B)
+		// transforms run on server bodies, emitting `_$puMemo`/`_$puBatch` — the
+		// server-runtime twins with cross-pass creation identity — so independent
+		// fetches REGISTER before the first suspend and a body stratum costs ONE
+		// network round instead of one per use(). Same opt-out flag as the client.
+		parallelUse: !(options && options.parallelUse === false),
+		nextPuId: 0, // parallel-use `__pu$N` hoisted-creation temps
+		_pendingWarm: null, // `X.__warm = …` source, set by ssrCompileBody, drained by compileServerComponent
 		runtimeNeeded: new Set(), // helpers referenced by GENERATED code — imported as `name as _$name`
 		userRuntimeNames: new Set(), // specifiers USER code references — imported verbatim
 		hoistedHelpers: [],
@@ -1604,6 +1924,9 @@ function compileServer(source, filename, options) {
 		mapSourceName: (filename || 'module.tsrx').split(/[\\/]/).pop(),
 		_setupMaps: null,
 	};
+	// 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);
 
 	let body = '';
 	for (const node of ast.body) {
@@ -1689,9 +2012,16 @@ function compileServerComponent(node, ctx) {
 		ctx.knownStringLocals = prevKnownStr;
 	}
 
-	if (isDefault) return `const ${name} = ${fn};\nexport default ${name};`;
-	if (isExported) return `export const ${name} = ${fn};`;
-	return `const ${name} = ${fn};`;
+	// SSR parallel-use mirror: attach the compiled fetch plan so a PARENT's warm
+	// walk (`_$warmChild(Comp, props)` from its first suspending batch) can start
+	// this component's independent creations before its body ever runs.
+	const warmSrc = ctx._pendingWarm;
+	ctx._pendingWarm = null;
+	const warmTail = warmSrc ? `\n${name}.__warm = ${warmSrc};` : '';
+
+	if (isDefault) return `const ${name} = ${fn};${warmTail}\nexport default ${name};`;
+	if (isExported) return `export const ${name} = ${fn};${warmTail}`;
+	return `const ${name} = ${fn};${warmTail}`;
 }
 
 function ssrCompileBody(node, ctx, name, cssHash, cssEntries, parentNs = 'html') {
@@ -1716,7 +2046,24 @@ function ssrCompileBody(node, ctx, name, cssHash, cssEntries, parentNs = 'html')
 				// return-JSX form: the returned host element (+ its directive children) is
 				// the render output — route it to jsxNodes so it flows through ssrEmitNode
 				// (byte-identical SSR to the `@{}` form), not printed as `return <jsx>`.
-				jsxNodes.push(child.argument);
+				// EXCEPT a returned FRAGMENT: the client VALUE-lowers `return <>…</>` to an
+				// array of createElement descriptors (rewriteJsxValues), mounted by the
+				// return-slot childSlot — whose hydration adopts ONE `<!--[-->…<!--]-->`
+				// range for the slot plus one range PER ITEM (including text items). The
+				// template walk would instead concatenate children with markerless text
+				// separators and no slot range, desyncing the hydration cursor. Route the
+				// whole fragment through the same value hole (`ssrChild(loweredArray)`) so
+				// the runtime's ssrChild array branch emits the exact per-item shape the
+				// client adopts.
+				if (child.argument.type === 'JSXFragment' || child.argument.type === 'Fragment') {
+					jsxNodes.push({
+						type: 'TSRXExpression',
+						expression: child.argument,
+						loc: child.argument.loc,
+					});
+				} else {
+					jsxNodes.push(child.argument);
+				}
 			} else if (isJsxNode(child)) {
 				if (child.type === 'Element' && elementTagName(child) === 'style') continue;
 				jsxNodes.push(child);
@@ -1725,7 +2072,34 @@ function ssrCompileBody(node, ctx, name, cssHash, cssEntries, parentNs = 'html')
 	}
 
 	const inlinedSubs = [];
-	const rewritten = statements
+	// SSR parallel-use mirror: memoize + hoist/batch BEFORE rewriteHookCalls —
+	// the rewritten `use(__pu$N)` unwraps then get their server site keys from
+	// rewriteHookCalls exactly like hand-written use() calls, and the
+	// `_$puMemo`/`_$puBatch` helper calls it emits are compiler-aliased names it
+	// leaves alone. Mirrors the client pipeline shape exactly: TOP bodies run
+	// Pass A on setup statements + the WalkJsx transform over the render tree
+	// (directive-arm statements memoize HERE; the transformed nodes flow into
+	// ssrEmitNodes below, so ssrCompileSub receives arms PRE-memoized and runs
+	// Pass B only) + the warm artifacts (`Comp.__warm` fetch plan + the first
+	// batch's warm thunk — see runtime.server.ts warmMemo/warmChild); synthetic
+	// subs (statement arrays) run Pass B only. Loops/functions are excluded by
+	// the passes themselves (same rules as the client).
+	let workingStatements = statements;
+	if (ctx.parallelUse) {
+		let warmThunk = null;
+		const isTopBody = !Array.isArray(node.body);
+		if (isTopBody) {
+			const creations = [];
+			const warmChildren = [];
+			workingStatements = parallelUseMemoizePass(workingStatements, ctx, name, creations, [], null);
+			jsxNodes = parallelUseWalkJsx(jsxNodes, ctx, name, creations, warmChildren, [], new Set());
+			const warm = buildWarmArtifacts(node, ctx, name, creations, warmChildren);
+			warmThunk = warm.thunk;
+			ctx._pendingWarm = warm.warmSrc;
+		}
+		workingStatements = rewriteParallelUse(workingStatements, ctx, name, warmThunk);
+	}
+	const rewritten = workingStatements
 		.map((s) => rewriteHookCalls(s, ctx, name))
 		.map((s) => rewriteJsxValues(s, ctx));
 	const setupCode = rewritten.map((s) => '  ' + printNode(s).replace(/\n/g, '\n  ')).join('\n');
@@ -1743,9 +2117,33 @@ function ssrCompileBody(node, ctx, name, cssHash, cssEntries, parentNs = 'html')
 	// block). The server must match per form — flag value position so ssrEmitComponent
 	// emits descriptor children for `.tsx`, keeping the server/client block counts
 	// identical (a mismatch desyncs the hydration cursor). Restored after this body.
+	//
+	// SYNTHETIC subs (ssrCompileSub passes the statement ARRAY: @if/@for/@switch/@try
+	// branches and `__schildren` component children) are always TEMPLATE position —
+	// the client compiles those branches through the template walk (componentSlot +
+	// markChildrenBlock render-fns) even when the enclosing body is a `return <jsx>`
+	// value body. Resetting to value here made ssrEmitComponent take the descriptor
+	// path inside every sub, which both desynced the block count from the client AND
+	// silently DROPPED directive-block children of nested components (lowerJsxChild
+	// cannot lower an @if to a descriptor) — a `<C>@if (…) { … }</C>` nested one sub
+	// deep rendered `<C>` childless.
 	const prevValuePos = ctx._tsxValuePos;
-	ctx._tsxValuePos = !(node.body && node.body.type === 'JSXCodeBlock');
+	ctx._tsxValuePos = Array.isArray(node.body)
+		? false
+		: !(node.body && node.body.type === 'JSXCodeBlock');
+	// M3 inherit-range (mirror of the client's planJsx stamp — the SAME
+	// inheritSoleCompRoot predicate over the same normalized roots, so the
+	// client slot borrows exactly where the server skips the frame pair):
+	// a `@{}` body whose sole output is one component call emits that call
+	// with `inherit=true` → ssrComponent skips the `<!--[-->…<!--]-->` frame
+	// wrap (the parent's own pair already bounds it). Synthetic sub-bodies
+	// (statement arrays) never qualify. Consumed by ssrEmitComponent at the
+	// root emit, before it recurses into props/children.
+	const prevInheritRoot = ctx._ssrInheritRoot;
+	ctx._ssrInheritRoot =
+		!!(node.body && node.body.type === 'JSXCodeBlock') && inheritSoleCompRoot(bodyNodes, ctx);
 	const htmlExpr = ssrEmitNodes(bodyNodes, ctx, name, inlinedSubs, parentNs, cssHash);
+	ctx._ssrInheritRoot = prevInheritRoot;
 	ctx._tsxValuePos = prevValuePos;
 
 	let cssLines = '';
@@ -1899,14 +2297,20 @@ function ssrEmitNode(node, ctx, name, inlinedSubs, parentNs, cssHash, nlGuard =
 function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 	const tag = elementTagName(node);
 	rejectVoidElementContent(tag, node, ctx);
+	rejectTextareaValueChildren(tag, node, ctx);
 	const attrs = node.attributes || node.openingElement?.attributes || [];
-	const selfNs = nsForSelf(node, parentNs);
-	const childNs = nsForChildren(node, selfNs);
+	// NB: the ns helpers take the TAG STRING (passing the node silently returns
+	// the inherited ns — svg subtrees would never enter the svg namespace).
+	const selfNs = nsForSelf(tag, parentNs);
+	const childNs = nsForChildren(tag, selfNs);
 
 	// `parts` are JS expressions concatenated with `+`. `lit` accumulates the
 	// current static run so adjacent literals fold into one quoted chunk.
+	// `<option>` builds its ATTRS-ONLY expression here — ssrOption assembles
+	// the whole tag at runtime so an enclosing controlled `<select>` scope can
+	// mark it ` selected` (see the option branch at the bottom).
 	const parts = [];
-	let lit = '<' + tag;
+	let lit = tag === 'option' ? '' : '<' + tag;
 	const flush = () => {
 		if (lit) {
 			parts.push(JSON.stringify(lit));
@@ -1914,6 +2318,17 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 		}
 	};
 
+	// Controlled-form serialization state (mirrors the client helpers — see the
+	// controlled section of runtime.server.ts): <input> maps `defaultValue`/
+	// `defaultChecked` onto the native attrs and routes dynamic value/checked
+	// through dedicated serializers; <textarea> routes value/defaultValue into
+	// the CONTENT position; <select> feeds them to the option-projection scope
+	// (never an attribute); <option> captures its `value` for the scope compare.
+	let ctlValue = null; // textarea/select captured `value` expr
+	let ctlDefault = null; // textarea/select captured `defaultValue` expr
+	let selMultiple = 'false'; // select `multiple` expr (constant or temp)
+	let optValue = null; // option `value` expr (constant or temp); null = no value attr
+
 	const firstSpreadIdx = attrs.findIndex(
 		(a) => a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute',
 	);
@@ -1960,13 +2375,13 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 		// Events and refs have no server semantics — dropped.
 		if (rawAttrName === 'ref') continue;
 		if (isEventAttrName(rawAttrName)) continue;
-		// Custom elements keep `htmlFor` VERBATIM (React parity — they get raw
-		// props, no `for` alias; `className`→`class` still applies); ssrAttr
-		// applies the same gate for dynamic values.
-		const attrName =
-			rawAttrName === 'htmlFor' && tag.includes('-')
-				? rawAttrName
-				: normalizeJsxAttrName(rawAttrName);
+		// `autoFocus` never serializes (React DOM server parity — the client
+		// focuses at its mount commit; custom elements keep raw props).
+		if (rawAttrName === 'autoFocus' && !tag.includes('-')) continue;
+		// Custom elements keep names VERBATIM (React parity — they get raw props,
+		// no alias tables; `className`→`class` still applies); ssrAttr applies
+		// the same gate for dynamic values.
+		const attrName = normalizeJsxAttrName(rawAttrName, tag);
 		const val = attr.value;
 		const isAfterSpread = firstSpreadIdx !== -1 && attrI > firstSpreadIdx;
 
@@ -1979,6 +2394,112 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 			continue;
 		}
 
+		// ── Controlled form props (see the state block above the loop) ──
+		if (
+			(tag === 'input' || tag === 'textarea' || tag === 'select') &&
+			(attrName === 'value' ||
+				attrName === 'defaultValue' ||
+				(tag === 'input' && (attrName === 'checked' || attrName === 'defaultChecked')))
+		) {
+			const ctlInner =
+				val == null ? null : val.type === 'JSXExpressionContainer' ? val.expression : val;
+			if (tag === 'input') {
+				// defaultValue/defaultChecked serialize as the NATIVE attrs;
+				// dynamic value/checked go through serializers that mirror the
+				// client helpers byte-for-byte (value={false} → value="false",
+				// checked truthy → bare presence).
+				const isCheck = attrName === 'checked' || attrName === 'defaultChecked';
+				if (ctlInner === null && !isAfterSpread) {
+					// Bare boolean prop (`<input checked/>`) → static presence
+					// (`value` bare mirrors the client's String(true)).
+					lit += isCheck ? ' checked' : ' value="true"';
+					continue;
+				}
+				if (ctlInner !== null && ctlInner.type === 'Literal' && !isAfterSpread) {
+					const lv = ctlInner.value;
+					if (isCheck) {
+						if (lv != null && lv !== false) lit += ' checked';
+					} else if (lv != null) {
+						lit += ` value="${escapeAttr(String(lv))}"`;
+					}
+					continue;
+				}
+				flush();
+				const ctlExpr =
+					ctlInner === null ? 'true' : printExprWithTsrx(ctlInner, ctx, name, inlinedSubs);
+				if (isCheck) {
+					ctx.runtimeNeeded.add('ssrCheckedAttr');
+					parts.push(`_$ssrCheckedAttr(${ctlExpr})`);
+				} else {
+					ctx.runtimeNeeded.add('ssrValueAttr');
+					parts.push(`_$ssrValueAttr(${ctlExpr})`);
+				}
+				continue;
+			}
+			// textarea / select: value/defaultValue never serialize as attributes —
+			// captured for the content position (textarea) / projection scope (select).
+			const ctlExpr =
+				ctlInner === null ? 'true' : printExprWithTsrx(ctlInner, ctx, name, inlinedSubs);
+			if (attrName === 'value') ctlValue = ctlExpr;
+			else ctlDefault = ctlExpr;
+			continue;
+		}
+		if (tag === 'select' && attrName === 'multiple') {
+			// Serialize the attribute normally AND capture the value for the
+			// option-projection scope — a dynamic value binds to a temp so the
+			// expression evaluates once.
+			if (val == null) {
+				selMultiple = 'true';
+				lit += ' multiple';
+				continue;
+			}
+			const mInner = val.type === 'JSXExpressionContainer' ? val.expression : val;
+			if (mInner.type === 'Literal' && !isAfterSpread) {
+				selMultiple = mInner.value ? 'true' : 'false';
+				if (mInner.value === true) lit += ' multiple';
+				else if (typeof mInner.value === 'string') lit += ` multiple="${escapeAttr(mInner.value)}"`;
+				else if (typeof mInner.value === 'number') lit += ` multiple="${mInner.value}"`;
+				continue;
+			}
+			const tmp = `__sp${spreadTemps.length}`;
+			spreadTemps.push({
+				tempName: tmp,
+				argExpr: printExprWithTsrx(mInner, ctx, name, inlinedSubs),
+			});
+			selMultiple = tmp;
+			flush();
+			ctx.runtimeNeeded.add('ssrAttr');
+			parts.push(`_$ssrAttr('multiple', ${tmp}, ${JSON.stringify(tag)})`);
+			continue;
+		}
+		if (tag === 'option' && attrName === 'value') {
+			// The option's value feeds BOTH the attribute and the select-scope
+			// compare — a dynamic value binds to a temp for single evaluation.
+			if (val == null) {
+				optValue = '""';
+				lit += ' value';
+				continue;
+			}
+			const oInner = val.type === 'JSXExpressionContainer' ? val.expression : val;
+			if (oInner.type === 'Literal' && !isAfterSpread) {
+				optValue = JSON.stringify(String(oInner.value));
+				if (typeof oInner.value === 'string') lit += ` value="${escapeAttr(oInner.value)}"`;
+				else if (typeof oInner.value === 'number') lit += ` value="${oInner.value}"`;
+				else if (oInner.value === true) lit += ' value';
+				continue;
+			}
+			const tmp = `__sp${spreadTemps.length}`;
+			spreadTemps.push({
+				tempName: tmp,
+				argExpr: printExprWithTsrx(oInner, ctx, name, inlinedSubs),
+			});
+			optValue = tmp;
+			flush();
+			ctx.runtimeNeeded.add('ssrAttr');
+			parts.push(`_$ssrAttr('value', ${tmp}, ${JSON.stringify(tag)})`);
+			continue;
+		}
+
 		// Boolean attribute (no value) → present.
 		if (val == null) {
 			lit += ' ' + attrName;
@@ -2005,15 +2526,10 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 		}
 
 		// Static literal (and not after a spread) → inline into the tag.
+		// bakeStaticAttr applies the shared React-parity value tables (client
+		// bake stays byte-identical — hydration parity).
 		if (!isAfterSpread && inner.type === 'Literal') {
-			if (typeof inner.value === 'string') lit += ` ${attrName}="${escapeAttr(inner.value)}"`;
-			else if (typeof inner.value === 'number') lit += ` ${attrName}="${inner.value}"`;
-			else if (typeof inner.value === 'boolean' && attrName.startsWith('aria-')) {
-				// `aria-*` is ENUMERATED (React parity, mirroring ssrAttr): a boolean
-				// literal serialises as "true"/"false" — `aria-hidden={false}` must
-				// render, not drop out via the generic boolean handling.
-				lit += ` ${attrName}="${inner.value}"`;
-			} else if (inner.value === true) lit += ` ${attrName}`;
+			lit += bakeStaticAttr(attrName, inner.value, tag);
 			continue;
 		}
 
@@ -2053,8 +2569,8 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 		return finalize();
 	}
 
-	lit += '>';
-	const normChildren = normalizeChildren(node.children || []);
+	if (tag !== 'option') lit += '>'; // option: ssrOption assembles the tag (attrs-only here)
+	const normChildren = normalizeChildren(node.children || [], childNs === 'svg');
 	// Only-child renderable `{expr}` → markerless `ssrChildText` (mirrors the client's
 	// markerless `childTextHole` mount: a primitive is the host's bare text, an object
 	// still gets a `<!--[-->…<!--]-->` block). Must match the client's only-child
@@ -2086,6 +2602,40 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 			nlGuardFirst,
 		);
 	}
+	// Controlled `<textarea value/defaultValue>`: the prop IS the content
+	// (children were rejected at compile time) — value wins over defaultValue,
+	// a nullish value falls through to the default (the client cascade).
+	if (tag === 'textarea' && (ctlValue !== null || ctlDefault !== null)) {
+		ctx.runtimeNeeded.add('ssrTextareaValue');
+		const src =
+			ctlValue !== null && ctlDefault !== null
+				? `(${ctlValue}) ?? (${ctlDefault})`
+				: (ctlValue ?? ctlDefault);
+		childrenExpr = `_$ssrTextareaValue(${src})`;
+	}
+	// Controlled `<select value/defaultValue>`: push the option-projection
+	// scope around the children serialization — every compiled/de-opt
+	// `<option>` inside (across component boundaries and @for bodies; SSR is a
+	// synchronous nested call tree) consults it via ssrOption.
+	if (tag === 'select' && (ctlValue !== null || ctlDefault !== null)) {
+		ctx.runtimeNeeded.add('ssrSelectScope');
+		childrenExpr = `_$ssrSelectScope(${ctlValue ?? 'void 0'}, ${ctlDefault ?? 'void 0'}, ${selMultiple}, () => (${childrenExpr}))`;
+	}
+	// `<option>`: assemble via ssrOption so an active select scope can mark it
+	// ` selected` (returns a plain `<option …>` when no scope is active).
+	if (tag === 'option') {
+		let contentExpr = childrenExpr;
+		if (htmlSources.length > 0) {
+			ctx.runtimeNeeded.add('ssrInnerHtml');
+			contentExpr = `(_$ssrInnerHtml([${htmlSources.join(', ')}]) ?? (${childrenExpr}))`;
+		}
+		flush();
+		const attrsExpr = parts.length > 0 ? parts.join(' + ') : "''";
+		parts.length = 0;
+		ctx.runtimeNeeded.add('ssrOption');
+		parts.push(`_$ssrOption(${optValue ?? 'void 0'}, ${attrsExpr}, ${contentExpr})`);
+		return finalize();
+	}
 	if (htmlSources.length > 0) {
 		// Raw HTML (explicit and/or spread-supplied) wins over children when present
 		// at runtime (last source wins); otherwise the children render.
@@ -2102,6 +2652,12 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash) {
 }
 
 function ssrEmitComponent(node, ctx, name, inlinedSubs, cssHash) {
+	// M3 inherit-range: consume the body-root flag ONCE, before this component's
+	// props/children compile below (they recurse into ssrEmitNodes/ssrCompileSub
+	// and must not inherit it). Set by ssrCompileBody only for the sole
+	// comp-call root of a `@{}` body — which is exactly this emit.
+	const inherit = ctx._ssrInheritRoot === true;
+	ctx._ssrInheritRoot = false;
 	const compExpr = tagExpr(node);
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	const propParts = [];
@@ -2167,11 +2723,18 @@ function ssrEmitComponent(node, ctx, name, inlinedSubs, cssHash) {
 			// that. Mirrors the client `@{}` convention (componentSlot + a render fn).
 			const sub = ssrCompileSub(node.children, ctx, '__schildren', [], cssHash, 'html');
 			inlinedSubs.push(sub.fn + ';');
-			propParts.push(`"children": ${sub.fnName}`);
+			// Tag the server children-block like the client does (see the client
+			// emission in lowerComponentCall): a consumer's `typeof children ===
+			// 'function' && !isChildrenBlock(children)` render-prop check must agree
+			// on BOTH runtimes. Untagged, a binding (e.g. the router Link) INVOKES
+			// the block as a render prop server-side, gets its HTML string back, and
+			// the enclosing hole escapes that markup into visible text.
+			ctx.runtimeNeeded.add('markChildrenBlock');
+			propParts.push(`"children": _$markChildrenBlock(${sub.fnName})`);
 		}
 	}
 	ctx.runtimeNeeded.add('ssrComponent');
-	return `_$ssrComponent(__s, ${compExpr}, { ${propParts.join(', ')} })`;
+	return `_$ssrComponent(__s, ${compExpr}, { ${propParts.join(', ')} }${inherit ? ', true' : ''})`;
 }
 
 // ---------------------------------------------------------------------------
@@ -2566,12 +3129,20 @@ function compileComponent(node, ctx, options) {
 		ctx.knownStringLocals = prevKnownStr;
 	}
 
+	// parallelUse warm plan: attached to the INNER function object (not the
+	// module const) so the component's own body — where the function-
+	// expression name shadows the const — resolves `_$warmChild(Self, …)` to
+	// an object that carries the plan. hmr() forwards `__warm` from the
+	// wrapped fn onto its wrapper for cross-module references.
+	const warmedFn = ctx._pendingWarm ? `Object.assign(${fn}, { __warm: ${ctx._pendingWarm} })` : fn;
+	ctx._pendingWarm = null;
+
 	// HMR-wrap exported components inline so the binding stays a `const` (no
 	// reassignment dance needed). The wrapper preserves the user-facing
 	// function-name identity by NAMING the inner FunctionExpression — `hmr`
 	// returns a wrapper that delegates to whatever fn is currently committed,
 	// and `module.Foo[HMR].update(...)` swaps it on each accept.
-	const valueExpr = hmrWrap && isExported ? `_$hmr(${fn})` : fn;
+	const valueExpr = hmrWrap && isExported ? `_$hmr(${warmedFn})` : warmedFn;
 	if (isDefault) {
 		return `const ${name} = ${valueExpr};\nexport default ${name};`;
 	}
@@ -2641,6 +3212,29 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 		);
 	}
 
+	// parallelUse: the parallel-`use()` pipeline (docs/suspense-parallel-use-plan.md)
+	// slots in HERE — after autoCallback (so memoized creations aren't re-wrapped),
+	// before rewriteHookCalls (so the _$useMemo/_$useBatch calls it emits are
+	// compiler-aliased, not user identifiers). Top-level component bodies run the
+	// full pipeline: Pass A memoizes creations across the body AND the directive
+	// arms of the render tree (arms hoist into sub-bodies later, already
+	// transformed), the warm plan is derived from that same analysis, and Pass B
+	// hoists+batches. Sub-bodies (hoisted @try/@if arms via hoistBodyHelper's
+	// legacy path) arrive pre-memoized and run Pass B only.
+	if (ctx.parallelUse) {
+		let warmThunk = null;
+		if (options && options.autoCallback) {
+			const creations = [];
+			const warmChildren = [];
+			workingStatements = parallelUseMemoizePass(workingStatements, ctx, name, creations, [], null);
+			jsxNodes = parallelUseWalkJsx(jsxNodes, ctx, name, creations, warmChildren, [], new Set());
+			const warm = buildWarmArtifacts(node, ctx, name, creations, warmChildren);
+			warmThunk = warm.thunk;
+			ctx._pendingWarm = warm.warmSrc;
+		}
+		workingStatements = rewriteParallelUse(workingStatements, ctx, name, warmThunk);
+	}
+
 	// Rewrite hook calls and `<tsrx>` blocks in statements before printing them.
 	// A `<tsrx>` block at expression position (e.g. `const f = <tsrx>...</tsrx>`)
 	// is hoisted as a render function in inlinedSubs and replaced with an
@@ -2684,7 +3278,14 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	const prevFDC = ctx._foldedDirectiveCalls;
 	if (node.body && node.body.foldedDirectives)
 		ctx._foldedDirectiveCalls = node.body.foldedDirectives;
+	// M3 inherit-range: only a real `@{ … }` (JSXCodeBlock) component body spans
+	// its block's whole range — synthetic sub-bodies (@if/@for/@try arms,
+	// children render-fns) pass statement arrays and stay unflagged. planJsx
+	// consumes the flag once (nested planJsx calls see it cleared).
+	const prevInheritBody = ctx._inheritBody;
+	ctx._inheritBody = !!(node.body && node.body.type === 'JSXCodeBlock');
 	const plan = planJsx(jsxNodes, ctx, name, inlinedSubs, parentNs, cssHash);
+	ctx._inheritBody = prevInheritBody;
 	ctx._foldedDirectiveCalls = prevFDC;
 
 	const lines = [];
@@ -2722,26 +3323,846 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 			lines.push(plan.mount);
 			lines.push(`  }`);
 		}
-		if (plan.everyRender) lines.push(plan.everyRender);
+		if (plan.everyRender) lines.push(plan.everyRender);
+	}
+	if (plan.after) lines.push(plan.after);
+	// Hoisted `<title>`/`<meta>`/`<link>` → headBlock into document.head
+	// (out-of-band; re-applied each render for reactivity, removed on unmount).
+	if (plan.head) lines.push(plan.head);
+
+	// PROPS-FIRST convention: `(…userProps, __s, __extra)`. The scope is the 2nd arg
+	// (a placeholder leads when there are no user params), so a plain function
+	// `App(props)` binds `props`, while compiled bodies still read `__s` by name.
+	const sig = params ? `${params}, __s, __extra` : `__props, __s, __extra`;
+	return `function ${name}(${sig}) {\n  const __block = __s.block;\n${lines.join('\n')}\n}`;
+}
+
+// ===========================================================================
+// Parallel use() — docs/suspense-parallel-use-plan.md
+// ===========================================================================
+
+// The parallel-`use()` pipeline (gated on ctx.parallelUse). Three cooperating
+// transforms reconstruct Solid/Ripple's "fetch starts at creation, suspension
+// happens at read" property for React-shaped `use()` code:
+//
+//   Pass A (top-level component bodies, incl. directive-arm bodies BEFORE
+//     they're hoisted): wrap each non-trivial `use(<expr>)` argument in a
+//     slot-keyed `_$useMemo(() => <expr>, [deps], _h$N)` creation. Deps are
+//     one-level member paths of the expression's free variables (props.id,
+//     fetchFn), so refetch happens exactly when inputs change and a replay
+//     can never mint a fresh promise. Loops and nested functions are NOT
+//     entered: loop iterations share one slot symbol, so a memoized creation
+//     there would fresh-promise every render and re-suspend forever.
+//
+//   Pass B (every function body): find maximal runs of `use()` declaration
+//     statements (const/let interleaves only, taint-tracked), hoist each
+//     run's creations into `__pu$N` temps above the first unwrap, and emit
+//     `_$useBatch([...temps], warmThunk?)` so the boundary suspends ONCE on
+//     the whole stratum instead of once per promise. Unwrap order (and with
+//     it hydration-seed order) is preserved.
+//
+//   Warm plan (top-level bodies): from the SAME analysis, child component
+//     slots whose reachability guards and props are provably independent of
+//     every non-param local become `_$warmChild` calls in the first batch's
+//     warm thunk, and the component gets a compiled `Comp.__warm` fetch plan
+//     (its own warm-safe creations + guarded child warm calls) so warming
+//     recurses down the tree — the whole descendant fetch tree starts in the
+//     first attempt.
+//
+// With the flag off, output is byte-identical (pinned by
+// tests/compile-parallel-use.test.ts).
+
+// Names bound by a binding pattern (params, declarator ids). Mirrors the
+// pattern handling of collectFreeIdentifiers' collectBindings.
+function collectPatternNames(pat, into) {
+	if (!pat) return into;
+	switch (pat.type) {
+		case 'Identifier':
+			into.add(pat.name);
+			break;
+		case 'ObjectPattern':
+			for (const p of pat.properties || []) {
+				if (p.type === 'RestElement') collectPatternNames(p.argument, into);
+				else collectPatternNames(p.value, into);
+			}
+			break;
+		case 'ArrayPattern':
+			for (const el of pat.elements || []) collectPatternNames(el, into);
+			break;
+		case 'AssignmentPattern':
+			collectPatternNames(pat.left, into);
+			break;
+		case 'RestElement':
+			collectPatternNames(pat.argument, into);
+			break;
+	}
+	return into;
+}
+
+// Strip TS value-preserving wrappers (`x as T`, `x!`, `<T>x`, `x satisfies T`).
+function unwrapTsExpr(n) {
+	while (
+		n &&
+		(n.type === 'TSAsExpression' ||
+			n.type === 'TSNonNullExpression' ||
+			n.type === 'TSTypeAssertion' ||
+			n.type === 'TSSatisfiesExpression' ||
+			n.type === 'ParenthesizedExpression')
+	) {
+		n = n.expression;
+	}
+	return n;
+}
+
+// Dep extraction for a memoized creation: one-level member paths for free
+// identifiers used as `obj.prop` (→ `props.id`, so a fresh props OBJECT with
+// unchanged fields doesn't refetch), bare identifiers otherwise. Scope-aware:
+// identifiers bound inside nested functions don't become deps.
+function collectDepPaths(expr) {
+	const deps = [];
+	const seen = new Set();
+	const push = (node, key) => {
+		if (seen.has(key)) return;
+		seen.add(key);
+		deps.push(node);
+	};
+	walk(expr, new Set());
+	return deps;
+
+	function walk(n, bound) {
+		if (!n || typeof n !== 'object') return;
+		if (Array.isArray(n)) {
+			for (const x of n) walk(x, bound);
+			return;
+		}
+		switch (n.type) {
+			case 'Identifier':
+				if (!bound.has(n.name)) push({ type: 'Identifier', name: n.name }, n.name);
+				return;
+			case 'MemberExpression':
+				if (!n.computed && n.object.type === 'Identifier' && n.property.type === 'Identifier') {
+					if (!bound.has(n.object.name)) {
+						const key = n.object.name + '.' + n.property.name;
+						push(
+							{
+								type: 'MemberExpression',
+								object: { type: 'Identifier', name: n.object.name },
+								property: { type: 'Identifier', name: n.property.name },
+								computed: false,
+								optional: false,
+							},
+							key,
+						);
+					}
+					return;
+				}
+				walk(n.object, bound);
+				if (n.computed) walk(n.property, bound);
+				return;
+			case 'FunctionExpression':
+			case 'ArrowFunctionExpression': {
+				const inner = new Set(bound);
+				for (const p of n.params || []) collectPatternNames(p, inner);
+				walk(n.body, inner);
+				return;
+			}
+			case 'Property':
+				if (n.computed) walk(n.key, bound);
+				walk(n.value, bound);
+				return;
+			case 'VariableDeclarator':
+				walk(n.init, bound);
+				return;
+			default:
+				for (const k in n) {
+					if (k === 'loc' || k === 'start' || k === 'end' || k === 'metadata') continue;
+					walk(n[k], bound);
+				}
+		}
+	}
+}
+
+// A `use()` argument that needs no memoization: already-stable references
+// (identifiers, static member chains) and literals.
+function isTrivialUseArg(n) {
+	n = unwrapTsExpr(n);
+	if (!n) return true;
+	if (n.type === 'Identifier' || n.type === 'Literal') return true;
+	if (n.type === 'MemberExpression' && !n.computed) return isTrivialUseArg(n.object);
+	return false;
+}
+
+const LOOP_TYPES = new Set([
+	'ForStatement',
+	'ForOfStatement',
+	'ForInStatement',
+	'WhileStatement',
+	'DoWhileStatement',
+]);
+const FN_TYPES = new Set(['FunctionExpression', 'FunctionDeclaration', 'ArrowFunctionExpression']);
+
+// Is this statement a `const/let x = use(<arg>)` declaration (or a bare
+// `use(<arg>)` expression statement)? Returns the use CallExpression or null.
+function useCallOfStatement(stmt) {
+	let call = null;
+	if (
+		stmt.type === 'VariableDeclaration' &&
+		(stmt.kind === 'const' || stmt.kind === 'let') &&
+		stmt.declarations &&
+		stmt.declarations.length === 1
+	) {
+		call = unwrapTsExpr(stmt.declarations[0].init);
+	} else if (stmt.type === 'ExpressionStatement') {
+		call = unwrapTsExpr(stmt.expression);
+	}
+	if (
+		call &&
+		call.type === 'CallExpression' &&
+		call.callee.type === 'Identifier' &&
+		call.callee.name === 'use' &&
+		call.arguments.length >= 1
+	) {
+		return call;
+	}
+	return null;
+}
+
+// ── Pass A: memoize use() argument creations ───────────────────────────────
+//
+// Walks a statement array (recursing into if/blocks, NOT into loops or nested
+// functions), rewriting each non-trivial `use(<expr>)` argument to
+// `_$useMemo(() => <expr>, [deps], _h$N)` in place. Records every creation
+// with its guard chain for the warm plan. Returns a new array.
+function parallelUseMemoizePass(stmts, ctx, componentName, creations, guards, locals) {
+	return stmts.map((stmt) => rewriteStmt(stmt));
+
+	function rewriteStmt(stmt) {
+		if (!stmt || typeof stmt !== 'object') return stmt;
+		if (LOOP_TYPES.has(stmt.type) || FN_TYPES.has(stmt.type)) return stmt;
+		const call = useCallOfStatement(stmt);
+		if (call) {
+			const rewritten = rewriteUseCall(call);
+			if (rewritten === call) return stmt;
+			if (stmt.type === 'VariableDeclaration') {
+				return {
+					...stmt,
+					declarations: [{ ...stmt.declarations[0], init: rewritten }],
+				};
+			}
+			return { ...stmt, expression: rewritten };
+		}
+		if (stmt.type === 'IfStatement') {
+			return {
+				...stmt,
+				consequent: rewriteStmt(stmt.consequent),
+				alternate: stmt.alternate ? rewriteStmt(stmt.alternate) : stmt.alternate,
+			};
+		}
+		if (stmt.type === 'BlockStatement') {
+			return {
+				...stmt,
+				body: parallelUseMemoizePass(stmt.body, ctx, componentName, creations, guards, locals),
+			};
+		}
+		return stmt;
+	}
+
+	function rewriteUseCall(call) {
+		const arg = unwrapTsExpr(call.arguments[0]);
+		if (isTrivialUseArg(arg)) return call;
+		const symVar = allocHookSymbol(ctx, `${componentName}.use.memo#${ctx.nextHookSymId}`);
+		const deps = collectDepPaths(arg);
+		// Server mirror: `puMemo` — keyed CROSS-PASS creation cache (a fresh
+		// SSRScope per pass makes client useMemo semantics useless there).
+		const memoHelper = ctx.mode === 'server' ? 'puMemo' : 'useMemo';
+		ctx.runtimeNeeded.add(memoHelper);
+		creations.push({ symVar, expr: arg, deps, guards: [...guards], locals });
+		const memoCall = {
+			type: 'CallExpression',
+			callee: { type: 'Identifier', name: `_$${memoHelper}` },
+			arguments: [
+				{ type: 'ArrowFunctionExpression', params: [], expression: true, async: false, body: arg },
+				{ type: 'ArrayExpression', elements: deps },
+				{ type: 'Identifier', name: symVar },
+			],
+			optional: false,
+		};
+		return { ...call, arguments: [memoCall, ...call.arguments.slice(1)] };
+	}
+}
+
+// Pass A over the RENDER tree: memoize statements inside directive-arm bodies
+// (they hoist into sub-bodies later, already transformed) and collect
+// child-component warm candidates with their guard chains. Recursion stops at
+// @for/@switch arms (v1) and does not enter component children. `locals`
+// accumulates arm-scoped bindings (e.g. `const a = use(…)` inside a @try
+// body) so warm-safety can see them — they are NOT in
+// ctx.currentComponentLocals, which only covers the top body.
+function parallelUseWalkJsx(nodes, ctx, componentName, creations, warmChildren, guards, locals) {
+	return nodes.map((n) => walkNode(n));
+
+	function walkNode(node) {
+		if (!node || typeof node !== 'object') return node;
+		switch (node.type) {
+			case 'JSXElement': {
+				const nameNode = node.openingElement && node.openingElement.name;
+				const isComponent =
+					nameNode && nameNode.type === 'JSXIdentifier' && /^[A-Z]/.test(nameNode.name);
+				if (isComponent) {
+					collectWarmChild(node, nameNode.name);
+					return node; // component children render inside the child — don't descend
+				}
+				return {
+					...node,
+					children: parallelUseWalkJsx(
+						node.children || [],
+						ctx,
+						componentName,
+						creations,
+						warmChildren,
+						guards,
+						locals,
+					),
+				};
+			}
+			case 'JSXFragment':
+				return {
+					...node,
+					children: parallelUseWalkJsx(
+						node.children || [],
+						ctx,
+						componentName,
+						creations,
+						warmChildren,
+						guards,
+						locals,
+					),
+				};
+			case 'JSXIfExpression': {
+				const not = (e) => ({ type: 'UnaryExpression', operator: '!', prefix: true, argument: e });
+				const consequent = walkArm(node.consequent, [...guards, node.test]);
+				const alternate = node.alternate
+					? walkArm(node.alternate, [...guards, not(node.test)])
+					: node.alternate;
+				return { ...node, consequent, alternate };
+			}
+			case 'JSXTryExpression': {
+				// The try arm renders whenever the component renders — no extra
+				// guard. @pending/@catch arms are exceptional paths: no warming.
+				const out = { ...node };
+				if (node.block) out.block = walkArm(node.block, guards);
+				return out;
+			}
+			default:
+				// @for / @switch arms: v1 — no memoization, no warming (loop slot
+				// sharing; switch guards deferred). Everything else is inert.
+				return node;
+		}
+	}
+
+	function walkArm(arm, armGuards) {
+		if (!arm || arm.type !== 'BlockStatement') return arm;
+		// Arm-scoped bindings become visible to warm-safety for everything in
+		// this arm (conservatively hoisted: order within the arm is ignored).
+		const armLocals = new Set(locals);
+		for (const entry of arm.body) {
+			if (entry.type === 'VariableDeclaration') {
+				for (const d of entry.declarations || []) collectPatternNames(d.id, armLocals);
+			}
+		}
+		// Arm bodies interleave statements and JSX nodes; route each entry to
+		// the right walker.
+		const body = arm.body.map((entry) => {
+			if (
+				entry.type === 'JSXElement' ||
+				entry.type === 'JSXFragment' ||
+				entry.type === 'JSXIfExpression' ||
+				entry.type === 'JSXTryExpression'
+			) {
+				return parallelUseWalkJsx(
+					[entry],
+					ctx,
+					componentName,
+					creations,
+					warmChildren,
+					armGuards,
+					armLocals,
+				)[0];
+			}
+			return parallelUseMemoizePass(
+				[entry],
+				ctx,
+				componentName,
+				creations,
+				armGuards,
+				armLocals,
+			)[0];
+		});
+		return { ...arm, body };
+	}
+
+	function collectWarmChild(node, compName) {
+		const attrs = node.openingElement.attributes || [];
+		if ((node.children || []).length > 0) return; // children render inside the child — skip
+		const props = [];
+		for (const a of attrs) {
+			if (a.type !== 'JSXAttribute' || a.name.type !== 'JSXIdentifier') return; // spread etc.
+			const key = a.name.name;
+			if (key === 'ref' || key === 'key') return; // instance-wired props — skip this slot
+			let value;
+			if (a.value == null) value = { type: 'Literal', value: true, raw: 'true' };
+			else if (a.value.type === 'JSXExpressionContainer') value = a.value.expression;
+			else value = a.value; // Literal
+			props.push({ key, value });
+		}
+		warmChildren.push({ compName, props, guards: [...guards], locals });
+	}
+}
+
+// Does this expression subtree contain JSX (or a TSRX directive)? Such
+// expressions cannot be re-printed into a warm plan — they only exist in
+// lowered form inside the real render path.
+function containsJsxNode(n) {
+	if (!n || typeof n !== 'object') return false;
+	if (Array.isArray(n)) return n.some(containsJsxNode);
+	if (typeof n.type === 'string' && n.type.startsWith('JSX')) return true;
+	for (const k in n) {
+		if (k === 'loc' || k === 'start' || k === 'end' || k === 'metadata') continue;
+		if (containsJsxNode(n[k])) return true;
+	}
+	return false;
+}
+
+// Warm-safety: every free identifier of the expression is a component param
+// or module-scope (NOT a non-param local — component-body OR directive-arm
+// scoped; those may not exist or may be suspended-data-derived at warm time),
+// and the expression is plain JS (no JSX — descriptors only exist lowered).
+function isWarmSafeExpr(expr, paramNames, componentLocals, armLocals) {
+	if (containsJsxNode(expr)) return false;
+	const free = collectFreeIdentifiers(expr, []);
+	for (const id of free) {
+		if (paramNames.has(id)) continue;
+		if (componentLocals && componentLocals.has(id)) return false;
+		if (armLocals && armLocals.has(id)) return false;
+	}
+	return true;
+}
+
+// ── Pass B: run detection + hoist + batch ───────────────────────────────────
+function rewriteParallelUse(statements, ctx, componentName, warmThunk) {
+	let firstBatch = true;
+	return transformList(statements);
+
+	function transformList(stmts) {
+		const out = [];
+		let run = null; // { members: [{stmt, call?, creation?}], names: Set }
+		const flush = () => {
+			if (!run) return;
+			emitRun(run, out);
+			run = null;
+		};
+		for (const stmt of stmts) {
+			const call = stmt && typeof stmt === 'object' ? useCallOfStatement(stmt) : null;
+			if (call) {
+				const creation = unwrapTsExpr(call.arguments[0]);
+				const free = collectFreeIdentifiers(creation, []);
+				let conflict = false;
+				if (run) {
+					for (const id of free) {
+						if (run.names.has(id)) {
+							conflict = true;
+							break;
+						}
+					}
+				}
+				if (conflict) flush();
+				if (!run) run = { members: [], names: new Set() };
+				run.members.push({ stmt, call, creation });
+				if (stmt.type === 'VariableDeclaration') {
+					collectPatternNames(stmt.declarations[0].id, run.names);
+				}
+				continue;
+			}
+			if (
+				run &&
+				stmt &&
+				stmt.type === 'VariableDeclaration' &&
+				(stmt.kind === 'const' || stmt.kind === 'let')
+			) {
+				// Interleaved declaration: allowed in a run, but its bindings join
+				// the no-hoist-past set (a later creation referencing them cannot
+				// hoist above this statement).
+				run.members.push({ stmt });
+				for (const d of stmt.declarations || []) collectPatternNames(d.id, run.names);
+				continue;
+			}
+			flush();
+			// Recurse into conditional blocks so a guarded use() run batches
+			// within its own block (loops/functions stay untouched).
+			if (stmt && stmt.type === 'IfStatement') {
+				out.push({
+					...stmt,
+					consequent: transformStmtBlock(stmt.consequent),
+					alternate: stmt.alternate ? transformStmtBlock(stmt.alternate) : stmt.alternate,
+				});
+				continue;
+			}
+			if (stmt && stmt.type === 'BlockStatement') {
+				out.push({ ...stmt, body: transformList(stmt.body) });
+				continue;
+			}
+			out.push(stmt);
+		}
+		flush();
+		return out;
+	}
+
+	function transformStmtBlock(s) {
+		if (!s) return s;
+		if (s.type === 'BlockStatement') return { ...s, body: transformList(s.body) };
+		return s;
+	}
+
+	function emitRun(run, out) {
+		const uses = run.members.filter((m) => m.call);
+		if (uses.length === 0) {
+			for (const m of run.members) out.push(m.stmt);
+			return;
+		}
+		// Hoist each creation into a temp, batch, then re-emit the original
+		// statements with creations swapped for the temps. Unwrap order (and
+		// hydration-seed order with it) is untouched.
+		const temps = [];
+		const tempOf = new Map();
+		for (const m of uses) {
+			const name = `__pu$${ctx.nextPuId++}`;
+			temps.push({ name, init: m.creation });
+			tempOf.set(m.call, name);
+		}
+		for (const t of temps) {
+			out.push({
+				type: 'VariableDeclaration',
+				kind: 'const',
+				declarations: [
+					{
+						type: 'VariableDeclarator',
+						id: { type: 'Identifier', name: t.name },
+						init: t.init,
+					},
+				],
+			});
+		}
+		// Server mirror: `puBatch` registers every unresolved thenable of the run
+		// with the render loop and suspends ONCE (identity-resolved on the next
+		// pass — see runtime.server.ts).
+		const batchHelper = ctx.mode === 'server' ? 'puBatch' : 'useBatch';
+		ctx.runtimeNeeded.add(batchHelper);
+		const batchArgs = [
+			{
+				type: 'ArrayExpression',
+				elements: temps.map((t) => ({ type: 'Identifier', name: t.name })),
+			},
+		];
+		if (firstBatch && warmThunk) batchArgs.push(warmThunk);
+		firstBatch = false;
+		out.push({
+			type: 'ExpressionStatement',
+			expression: {
+				type: 'CallExpression',
+				callee: { type: 'Identifier', name: `_$${batchHelper}` },
+				arguments: batchArgs,
+				optional: false,
+			},
+		});
+		for (const m of run.members) {
+			if (!m.call) {
+				out.push(m.stmt);
+				continue;
+			}
+			const tempId = { type: 'Identifier', name: tempOf.get(m.call) };
+			const newCall = { ...m.call, arguments: [tempId, ...m.call.arguments.slice(1)] };
+			if (m.stmt.type === 'VariableDeclaration') {
+				out.push({
+					...m.stmt,
+					declarations: [{ ...m.stmt.declarations[0], init: newCall }],
+				});
+			} else {
+				out.push({ ...m.stmt, expression: newCall });
+			}
+		}
 	}
-	if (plan.after) lines.push(plan.after);
-	// Hoisted `<title>`/`<meta>`/`<link>` → headBlock into document.head
-	// (out-of-band; re-applied each render for reactivity, removed on unmount).
-	if (plan.head) lines.push(plan.head);
+}
 
-	// PROPS-FIRST convention: `(…userProps, __s, __extra)`. The scope is the 2nd arg
-	// (a placeholder leads when there are no user params), so a plain function
-	// `App(props)` binds `props`, while compiled bodies still read `__s` by name.
-	const sig = params ? `${params}, __s, __extra` : `__props, __s, __extra`;
-	return `function ${name}(${sig}) {\n  const __block = __s.block;\n${lines.join('\n')}\n}`;
+// Build the warm thunk AST (child warm calls for the first in-body batch) +
+// the `Comp.__warm` source (creations + child calls) for a top-level body.
+function buildWarmArtifacts(node, ctx, componentName, creations, warmChildren) {
+	const paramNames = new Set();
+	for (const p of node.params || []) collectPatternNames(p, paramNames);
+	const locals = ctx.currentComponentLocals;
+
+	const guardOk = (guards, armLocals) =>
+		guards.every((g) => isWarmSafeExpr(g, paramNames, locals, armLocals));
+	const andChain = (guards) =>
+		guards.length === 0
+			? null
+			: guards.reduce(
+					(acc, g) =>
+						acc ? { type: 'LogicalExpression', operator: '&&', left: acc, right: g } : g,
+					null,
+				);
+
+	const warmMemos = creations.filter(
+		(c) => guardOk(c.guards, c.locals) && isWarmSafeExpr(c.expr, paramNames, locals, c.locals),
+	);
+	const warmKids = warmChildren.filter(
+		(w) =>
+			guardOk(w.guards, w.locals) &&
+			!paramNames.has(w.compName) &&
+			!(locals && locals.has(w.compName)) &&
+			!(w.locals && w.locals.has(w.compName)) &&
+			w.props.every((p) => isWarmSafeExpr(p.value, paramNames, locals, w.locals)),
+	);
+	if (warmKids.length === 0 && warmMemos.length === 0) return { thunk: null, warmSrc: null };
+
+	const stmtFor = (guards, callExpr) => {
+		const g = andChain(guards);
+		const call = { type: 'ExpressionStatement', expression: callExpr };
+		return g ? { type: 'IfStatement', test: g, consequent: call, alternate: null } : call;
+	};
+	const memoCall = (c) => ({
+		type: 'CallExpression',
+		callee: { type: 'Identifier', name: '_$warmMemo' },
+		arguments: [
+			{ type: 'ArrowFunctionExpression', params: [], expression: true, async: false, body: c.expr },
+			{ type: 'ArrayExpression', elements: c.deps },
+			{ type: 'Identifier', name: c.symVar },
+		],
+		optional: false,
+	});
+	const childCall = (w) => ({
+		type: 'CallExpression',
+		callee: { type: 'Identifier', name: '_$warmChild' },
+		arguments: [
+			{ type: 'Identifier', name: w.compName },
+			{
+				type: 'ObjectExpression',
+				properties: w.props.map((p) => ({
+					type: 'Property',
+					key: { type: 'Identifier', name: p.key },
+					value: p.value,
+					kind: 'init',
+					method: false,
+					shorthand: false,
+					computed: false,
+				})),
+			},
+		],
+		optional: false,
+	});
+
+	if (warmMemos.length > 0) ctx.runtimeNeeded.add('warmMemo');
+	if (warmKids.length > 0) ctx.runtimeNeeded.add('warmChild');
+
+	// In-body warm thunk: children only — the body's own creations already ran
+	// as real memos by the time the batch throws.
+	const thunk =
+		warmKids.length === 0
+			? null
+			: {
+					type: 'ArrowFunctionExpression',
+					params: [],
+					expression: false,
+					async: false,
+					body: {
+						type: 'BlockStatement',
+						body: warmKids.map((w) => stmtFor(w.guards, childCall(w))),
+					},
+				};
+
+	// 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
+	// the function-expression name shadows the module const) sees it too;
+	// hmr() forwards it from the wrapped fn onto the HMR wrapper.
+	let warmSrc = null;
+	if ((node.params || []).length <= 1 && (warmMemos.length > 0 || warmKids.length > 0)) {
+		const bodyStmts = [
+			...warmMemos.map((c) => stmtFor(c.guards, memoCall(c))),
+			...warmKids.map((w) => stmtFor(w.guards, childCall(w))),
+		];
+		const destructure =
+			node.params.length === 1 ? `\tconst ${printNode(node.params[0])} = __wp;\n` : '';
+		const body = bodyStmts.map((s) => '\t' + printNode(s).replace(/\n/g, '\n\t')).join('\n');
+		warmSrc = `(__wp) => {\n${destructure}${body}\n}`;
+	}
+	return { thunk, warmSrc };
 }
 
 // ===========================================================================
 // Hook-call rewriting
 // ===========================================================================
 
+// Plain JS loop statements (display word for the diagnostic). A TEMPLATE `@for`
+// also parses to a ForOfStatement — told apart by its JSX body, the same
+// classification isJsxNode uses — and is the SUPPORTED way to loop hooks: each
+// item renders in its own block scope (mountItem → renderBlock swaps
+// CURRENT_SCOPE per item), so per-item hooks get per-item state.
+const JS_LOOP_WORD = {
+	ForStatement: 'for',
+	ForInStatement: 'for…in',
+	ForOfStatement: 'for…of',
+	WhileStatement: 'while',
+	DoWhileStatement: 'do…while',
+};
+
+// A SLOT-KEYED hook call: a builtin base hook, or a custom hook by the
+// `use[A-Z]` convention (identifier or method form) — the same match
+// rewriteHookCalls slots below. `useContext` (keyed by context identity) and
+// bare `use` (keyed by per-render call order — `block.__thenableIdx` on the
+// client, the frame occurrence counter in runtime.server.ts) are NOT
+// slot-keyed, so they genuinely work in loops and are exempt.
+function slotKeyedHookName(n) {
+	if (n.type !== 'CallExpression') return null;
+	if (n.callee.type === 'Identifier') {
+		const name = n.callee.name;
+		if (HOOK_NAMES.has(name)) return name;
+		if (/^use[A-Z]/.test(name) && name !== 'useContext') return name;
+		return null;
+	}
+	if (
+		!n.optional &&
+		n.callee.type === 'MemberExpression' &&
+		!n.callee.computed &&
+		n.callee.property.type === 'Identifier' &&
+		/^use[A-Z]/.test(n.callee.property.name) &&
+		n.callee.property.name !== 'useContext'
+	) {
+		return n.callee.property.name;
+	}
+	return null;
+}
+
+// REJECT a slot-keyed hook lexically inside a plain JS loop. Hooks are keyed by
+// a per-call-site symbol, so every iteration of the loop would hit the ONE slot
+// assigned to that call site: useState/useReducer would share a single state
+// cell across all iterations, useMemo would recompute every iteration (each
+// iteration's deps overwrite the previous entry, only the last survives), and
+// slot-keyed effects would collide the same way — all silently. The scan skips
+// ONLY nested DEFERRED function boundaries (a function declared in the loop may
+// be a local component or a deferred callback — each component instance gets
+// its own scope). A function that provably EXECUTES during the iteration is
+// walked into: an IIFE callee (incl. `.call`/`.apply` on a function
+// expression) and an inline callback to a known synchronous array-iteration
+// method (`.map`, `.forEach`, …) — its hooks run once per iteration and
+// collide exactly like inline ones. Directive constructs inside the loop
+// subtree are NOT exempt either: their bodies do compile to helper render fns,
+// but the construct's own per-call-site slot (ifBlock/forBlock state on
+// `scope.slots`) repeats each iteration exactly like a hook slot does, so
+// hooks reached through them collide all the same. Every LEGIT template
+// directive is protected before the scan starts — the guard in
+// rewriteHookCalls fires only on plain-JS loop statements, and a template
+// `@for` (ForOfStatement with a JSX body) is excluded there, so hooks in
+// template positions (including `.map()`-to-`@for` children) never reach this
+// walker.
+const SYNC_ITERATION_METHODS = new Set([
+	'map',
+	'forEach',
+	'filter',
+	'flatMap',
+	'reduce',
+	'reduceRight',
+	'some',
+	'every',
+	'find',
+	'findIndex',
+	'findLast',
+	'findLastIndex',
+	'sort',
+	'toSorted',
+]);
+function isFunctionNode(n) {
+	return (
+		n &&
+		(n.type === 'FunctionDeclaration' ||
+			n.type === 'FunctionExpression' ||
+			n.type === 'ArrowFunctionExpression')
+	);
+}
+function rejectHookInJsLoop(loop, ctx, componentName) {
+	const seen = new WeakSet();
+	// Function nodes that run during the loop iteration itself — marked when
+	// their enclosing CallExpression is visited (parents visit before children),
+	// so the boundary check below can let the walk continue into their bodies.
+	const syncInvoked = new WeakSet();
+	function walk(n) {
+		if (!n) return;
+		if (Array.isArray(n)) {
+			for (const x of n) walk(x);
+			return;
+		}
+		if (typeof n !== 'object') return;
+		const t = n.type;
+		if (!t || seen.has(n)) return;
+		seen.add(n);
+		if (t === 'CallExpression') {
+			// IIFE: `(() => …)()` — the callee body executes in place.
+			if (isFunctionNode(n.callee)) syncInvoked.add(n.callee);
+			if (n.callee.type === 'MemberExpression' && !n.callee.computed) {
+				const prop = n.callee.property;
+				// `(function () { … }).call(this)` / `.apply(...)` — IIFE variants.
+				if (
+					prop.type === 'Identifier' &&
+					(prop.name === 'call' || prop.name === 'apply') &&
+					isFunctionNode(n.callee.object)
+				) {
+					syncInvoked.add(n.callee.object);
+				}
+				// `xs.map(cb)` and friends — the callback runs synchronously, once
+				// per element, during this iteration. (Template-position `.map()`
+				// children never sit inside a plain JS loop, so the legit
+				// map-to-`@for` pattern can't reach here.)
+				if (prop.type === 'Identifier' && SYNC_ITERATION_METHODS.has(prop.name)) {
+					for (const a of n.arguments) if (isFunctionNode(a)) syncInvoked.add(a);
+				}
+			}
+		}
+		if (isFunctionNode(n) && !syncInvoked.has(n)) return;
+		const hook = slotKeyedHookName(n);
+		if (hook !== null) {
+			const l = (n.loc && n.loc.start) || (loop.loc && loop.loc.start);
+			const at = l
+				? ` (${ctx.mapSourceName ? ctx.mapSourceName + ':' : ''}${l.line}:${l.column})`
+				: '';
+			throw new Error(
+				`\`${hook}\` is called inside a \`${JS_LOOP_WORD[loop.type]}\` loop in ${componentName}. ` +
+					`Hooks are keyed by call site, so every iteration would share this call site's ONE ` +
+					`hook slot — state, memo, and effect entries would silently collide across ` +
+					`iterations. Loop in the template with the keyed \`@for\` directive instead (each ` +
+					`item renders in its own scope, so per-item hooks get per-item state), or extract ` +
+					`the loop body into a child component. \`use()\` and \`useContext\` are exempt ` +
+					`(call-order / context-identity keyed, not slot-keyed).${at}`,
+			);
+		}
+		for (const key in n) {
+			if (AST_WALK_SKIP_KEYS.has(key)) continue;
+			walk(n[key]);
+		}
+	}
+	walk(loop);
+}
+
 function rewriteHookCalls(node, ctx, componentName) {
 	return mapAst(node, (n) => {
+		// A plain JS loop must not contain slot-keyed hook calls — reject before
+		// slotting. (A template `@for` is also a ForOfStatement; its JSX body tells
+		// it apart, and it is the supported way to loop hooks.)
+		if (
+			JS_LOOP_WORD[n.type] !== undefined &&
+			!(n.type === 'ForOfStatement' && bodyContainsJsx(n.body))
+		) {
+			rejectHookInJsLoop(n, ctx, componentName);
+		}
 		if (n.type === 'CallExpression' && n.callee.type === 'Identifier') {
 			const name = n.callee.name;
 			// Three kinds of call get a trailing per-call-site slot symbol:
@@ -2756,7 +4177,8 @@ function rewriteHookCalls(node, ctx, componentName) {
 			// (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.
+			// function named like one gets a harmless extra trailing argument (though
+			// inside a plain JS loop the convention is enforced: rejectHookInJsLoop).
 			const isBuiltin = HOOK_NAMES.has(name);
 			const isCustom = /^use[A-Z]/.test(name) && name !== 'useContext';
 			const isServerUse = name === 'use' && ctx.mode === 'server';
@@ -2811,6 +4233,49 @@ function rewriteHookCalls(node, ctx, componentName) {
 				};
 			}
 		}
+		// METHOD-style custom hooks — `route.useLoaderData()`, `api.useSearch()`
+		// (React-ecosystem object-carried hooks: TanStack Route/RouteApi accessors
+		// 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).
+		if (
+			n.type === 'CallExpression' &&
+			!n.optional &&
+			n.callee.type === 'MemberExpression' &&
+			!n.callee.computed &&
+			n.callee.property.type === 'Identifier' &&
+			/^use[A-Z]/.test(n.callee.property.name) &&
+			n.callee.property.name !== 'useContext'
+		) {
+			const debug = `${componentName}.${n.callee.property.name}#${ctx.nextHookSymId}`;
+			const symVar = allocHookSymbol(ctx, debug);
+			ctx.runtimeNeeded.add('withSlot');
+			const object = rewriteHookCalls(n.callee.object, ctx, componentName);
+			const args = n.arguments.map((a) => rewriteHookCalls(a, ctx, componentName));
+			return {
+				type: 'CallExpression',
+				callee: { type: 'Identifier', name: '_$withSlot' },
+				arguments: [
+					{ type: 'Identifier', name: symVar },
+					{
+						type: 'ArrowFunctionExpression',
+						params: [],
+						expression: true,
+						async: false,
+						body: {
+							type: 'CallExpression',
+							callee: { ...n.callee, object },
+							arguments: [...args, { type: 'Identifier', name: symVar }],
+							optional: false,
+						},
+					},
+				],
+				optional: false,
+			};
+		}
 		return null;
 	});
 }
@@ -2845,14 +4310,44 @@ function compileReturnJsxFunction(node, ctx, options) {
 		generator: false,
 		body: { type: 'BlockStatement', body: newStatements },
 	};
-	let code = printNode(fn);
+	// Print with esrap's real per-token map (same output bytes as printNode) so
+	// this function contributes segments to the module map — compile() drains
+	// them via ctx._setupMaps, exactly like a component's setup statements.
+	// Chained consumers (e.g. @octanejs/mdx's two-stage .mdx map) need segments
+	// on these lines; a map-less print would compose to an empty chain.
+	const printed = printNodeWithMap(fn, ctx);
+	let code = printed.code;
+	const mappings = printed.mappings;
 	if (compInlinedSubs.length) {
 		// Helpers are hoisted function declarations → position-independent; splice them
 		// in right after the function's opening `{` so they're in the component scope.
 		const i = code.indexOf('{');
 		const subs = compInlinedSubs.map((s) => '  ' + s.replace(/\n/g, '\n  ')).join('\n');
+		// The splice inserts `'\n' + subs` after the `{`: every printed line below
+		// the splice line shifts down by the inserted line count. Keep the map in
+		// sync by inserting that many empty mapping lines at the same point.
+		// Decoded rows are dense up to the LAST line with segments, so when the
+		// array ends at (or before) the splice line, every shifted line has no
+		// segments and there is nothing to realign — skip the padding rather than
+		// append useless empty rows.
+		const spliceLine = countNewlines(code.slice(0, i + 1));
+		const inserted = 1 + countNewlines(subs);
+		if (mappings.length > spliceLine + 1) {
+			mappings.splice(spliceLine + 1, 0, ...Array.from({ length: inserted }, () => []));
+		}
 		code = code.slice(0, i + 1) + '\n' + subs + code.slice(i + 1);
 	}
+	// Thread the mappings back to compile() through the same side-channel the
+	// component path uses (drained by drainSetupMaps at the emit site). The
+	// `export ` prefix shifts only line 0's columns; `export default` appends a
+	// trailing (unmapped) line and shifts nothing.
+	ctx._setupMaps =
+		options && options.export
+			? [
+					{ fnRelLine: 0, colShift: 'export '.length, mappings: mappings.slice(0, 1) },
+					{ fnRelLine: 1, colShift: 0, mappings: mappings.slice(1) },
+				]
+			: [{ fnRelLine: 0, colShift: 0, mappings }];
 	if (options && options.default) return `${code}\nexport default ${name};`;
 	if (options && options.export) return `export ${code}`;
 	return code;
@@ -3039,6 +4534,19 @@ function extractFragment(node, ctx, holeProps) {
 			ic.condExpr = `props.${condHole}`;
 			ic.thenHelper = `props.${thenHole}`;
 			ic.elseHelper = elseHoleName ? `props.${elseHoleName}` : null;
+			// Phase 2: the hoisted helpers' env values are COMPONENT-scope
+			// identifiers — thread the whole tuple as one array hole so the
+			// renderer-side call passes current values (same as deps for @for).
+			if (ic.envNames && ic.envNames.length) {
+				const envHole = `h${holeProps.length}`;
+				holeProps.push(
+					objectProp(envHole, {
+						type: 'ArrayExpression',
+						elements: ic.envNames.map((n) => ({ type: 'Identifier', name: n })),
+					}),
+				);
+				ic.envExpr = `props.${envHole}`;
+			}
 			fc.directiveCalls.ifCalls.push(ic);
 			newChildren.push({
 				type: 'FoldedDirective',
@@ -3079,9 +4587,10 @@ function extractFragment(node, ctx, holeProps) {
 				holeProps.push(objectProp(emptyHole, { type: 'Identifier', name: rec.emptyHelper }));
 				rec.emptyHelper = `props.${emptyHole}`;
 			}
-			if (rec.depEligible && rec.depNames.length) {
+			if (rec.depNames.length) {
 				// Thread each dep value as its own hole so the reconciler's deps-equality
-				// check sees the component-scope values, not undefined renderer locals.
+				// check (and the Phase 2 env stamp — deps doubles as the helpers' env
+				// tuple) sees the component-scope values, not undefined renderer locals.
 				rec.depNames = rec.depNames.map((dn) => {
 					const depHole = `h${holeProps.length}`;
 					holeProps.push(objectProp(depHole, { type: 'Identifier', name: dn }));
@@ -3129,6 +4638,17 @@ function extractFragment(node, ctx, holeProps) {
 				holeProps.push(objectProp(defHole, { type: 'Identifier', name: rec.defaultHelper }));
 				rec.defaultHelper = `props.${defHole}`;
 			}
+			// Phase 2: env tuple hole (see the @if fold above).
+			if (rec.envNames && rec.envNames.length) {
+				const envHole = `h${holeProps.length}`;
+				holeProps.push(
+					objectProp(envHole, {
+						type: 'ArrayExpression',
+						elements: rec.envNames.map((n) => ({ type: 'Identifier', name: n })),
+					}),
+				);
+				rec.envExpr = `props.${envHole}`;
+			}
 			fc.directiveCalls.switchCalls.push(rec);
 			newChildren.push({
 				type: 'FoldedDirective',
@@ -3165,6 +4685,17 @@ function extractFragment(node, ctx, holeProps) {
 				holeProps.push(objectProp(pendHole, { type: 'Identifier', name: rec.pendingHelper }));
 				rec.pendingHelper = `props.${pendHole}`;
 			}
+			// Phase 2: env tuple hole (see the @if fold above).
+			if (rec.envNames && rec.envNames.length) {
+				const envHole = `h${holeProps.length}`;
+				holeProps.push(
+					objectProp(envHole, {
+						type: 'ArrayExpression',
+						elements: rec.envNames.map((n) => ({ type: 'Identifier', name: n })),
+					}),
+				);
+				rec.envExpr = `props.${envHole}`;
+			}
 			fc.directiveCalls.tryCalls.push(rec);
 			newChildren.push({
 				type: 'FoldedDirective',
@@ -3331,7 +4862,18 @@ function lowerJsxChild(child, ctx) {
 			const e = lowerJsxChild(c, ctx);
 			if (e !== null) els.push(e);
 		}
-		return { type: 'ArrayExpression', elements: els };
+		// A fragment's children are FIXED siblings (React's "static children" —
+		// `jsxs` — which React never key-warns): tag the array so the de-opt list
+		// keys it by index silently, reserving the missing-key warning for
+		// runtime-built arrays (`.map()` results). Emitted in BOTH modes — the
+		// server export is the identity (`ssrChild` just renders the array).
+		ctx.runtimeNeeded.add('positionalChildren');
+		return {
+			type: 'CallExpression',
+			callee: { type: 'Identifier', name: rtAlias('positionalChildren') },
+			arguments: [{ type: 'ArrayExpression', elements: els }],
+			optional: false,
+		};
 	}
 	return null; // Comment / unknown — drop.
 }
@@ -3417,17 +4959,42 @@ function jsxElementToCreateElement(node, ctx) {
 	};
 }
 
+// Short, unique, path-free slot description for non-HMR output: a djb2 hash of
+// the module filename + the per-module hook index. The DESCRIPTION is
+// load-bearing beyond debugging: resolveSlot/currentPathSlot (runtime) compose
+// a base hook's effective slot inside custom hooks by CONCATENATING slot
+// descriptions into a Symbol.for key — a bare `Symbol()` (description
+// undefined) collapses every composed path to "undefined|undefined" and
+// collides custom-hook state across call sites (broke the router's useStore →
+// website hydration). So every emitted slot must carry a unique description;
+// this one is ~10 chars and keeps the absolute module path out of bundles.
+export function hookSlotHash(filename) {
+	const src = filename || '<anon>';
+	let h = 5381;
+	for (let i = 0; i < src.length; i++) h = (Math.imul(h, 33) + src.charCodeAt(i)) | 0;
+	return (h >>> 0).toString(36);
+}
+
 function allocHookSymbol(ctx, debugName) {
 	const id = ctx.nextHookSymId++;
 	const name = `_h$${id}`;
-	// Use Symbol.for(stableKey) so re-imports under HMR produce the SAME Symbol
-	// identity, which keeps the existing hooks Map keys valid across body
-	// swaps. The stable key embeds the source filename so symbols don't
-	// collide across modules. `debugName` includes the component name + hook
-	// name + call-site index — stable provided the user doesn't reorder hooks
-	// between renders (which would violate React's rules anyway).
-	const stableKey = `octane:${ctx.filename || '<anon>'}:${debugName}`;
-	ctx.hoistedHelpers.push(`const ${name} = Symbol.for(${JSON.stringify(stableKey)});`);
+	if (ctx.hmr) {
+		// HMR (dev serve): Symbol.for(stableKey) so re-imports produce the SAME
+		// Symbol identity, which keeps the existing hooks Map keys valid across
+		// body swaps. The stable key embeds the source filename so symbols don't
+		// collide across modules. `debugName` includes the component name + hook
+		// name + call-site index — stable provided the user doesn't reorder hooks
+		// between renders (which would violate React's rules anyway).
+		const stableKey = `octane:${ctx.filename || '<anon>'}:${debugName}`;
+		ctx.hoistedHelpers.push(`const ${name} = Symbol.for(${JSON.stringify(stableKey)});`);
+	} else {
+		// No HMR (prod builds, SSR, tests): nothing re-imports the module
+		// expecting registry identity, so a plain Symbol suffices — but it MUST
+		// carry a unique description (see hookSlotHash above). ~10 chars vs the
+		// ~100-char registry key, and no file path in shipped bundles.
+		if (ctx._hookHash === undefined) ctx._hookHash = hookSlotHash(ctx.filename);
+		ctx.hoistedHelpers.push(`const ${name} = Symbol(${JSON.stringify(`${ctx._hookHash}#${id}`)});`);
+	}
 	return name;
 }
 
@@ -3593,7 +5160,10 @@ function emitHeadServer(headNodes, ctx) {
  *     makeSwitchCall consume
  *   - Anything else → passed through
  */
-function normalizeChildren(nodes) {
+// `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) {
 	const out = [];
 	if (!nodes) return out;
 	for (const n of nodes) {
@@ -3662,10 +5232,10 @@ function normalizeChildren(nodes) {
 					const refInner =
 						refVal && refVal.type === 'JSXExpressionContainer' ? refVal.expression : refVal;
 					out.push({ type: 'FragmentStart', refExpr: refInner });
-					out.push(...normalizeChildren(n.children || []));
+					out.push(...normalizeChildren(n.children || [], inSvg));
 					out.push({ type: 'FragmentEnd' });
 				} else {
-					out.push(...normalizeChildren(n.children || []));
+					out.push(...normalizeChildren(n.children || [], inSvg));
 				}
 				continue;
 			}
@@ -3700,8 +5270,9 @@ function normalizeChildren(nodes) {
 			// `<title>`/`<meta>`/`<link>` → hoist to the document-head channel (NOT
 			// body DOM). Kept in `out` as a synthetic node so planJsx / ssrCompileBody
 			// can partition it out and emit it via headBlock (client) / ssrHeadEl
-			// (server). Lifted from wherever they appear in the output.
-			if (isHoistableHeadElementNode(n)) {
+			// (server). Lifted from wherever they appear in the output — EXCEPT an
+			// SVG `<title>`, which is the SVG tooltip element and stays in place.
+			if (isHoistableHeadElementNode(n) && !(inSvg && jsxTagName(n) === 'title')) {
 				out.push({ type: 'HeadHoist', element: n });
 				continue;
 			}
@@ -3715,7 +5286,7 @@ function normalizeChildren(nodes) {
 				loc: n.loc, // preserve element position for dev hydration LOC (component slots)
 			});
 		} else if (n.type === 'Tsx' || n.type === 'Tsrx' || n.type === 'JSXFragment') {
-			out.push(...normalizeChildren(n.children || []));
+			out.push(...normalizeChildren(n.children || [], inSvg));
 		} else if (n.type === 'JSXStyleElement') {
 			// Drop a `<style>` block at child position — its CSS gets registered
 			// via the @tsrx/core scoping pipeline (applyCssScoping / applyStyleMap);
@@ -3787,7 +5358,7 @@ function normalizeChildren(nodes) {
 			if (body.length === 0 && render === null) continue;
 			if (body.length === 0 && render !== null) {
 				// Recurse — render is a single JSX node, treat as a sibling child.
-				out.push(...normalizeChildren([render]));
+				out.push(...normalizeChildren([render], inSvg));
 			} else {
 				throw new Error(
 					'`@{ … }` with setup statements is not supported at JSX child position. ' +
@@ -4010,7 +5581,21 @@ const TS_TYPE_PROPS = [
 function stripTsOnlyWrappers(node) {
 	if (node === null || typeof node !== 'object') return node;
 	if (Array.isArray(node)) {
-		for (let i = 0; i < node.length; i++) node[i] = stripTsOnlyWrappers(node[i]);
+		for (let i = node.length - 1; i >= 0; i--) {
+			// Type-only STATEMENTS nested below module scope (a `type X = …` or
+			// `interface I {}` inside a function body) never hit the top-level
+			// `ast.body` filter, and stripping their annotations below would
+			// leave esrap an alias with a nulled typeAnnotation (crash) — drop
+			// the whole statement here instead. The matched node types are
+			// statement-only, so pruning from any AST array is safe (sparse
+			// ArrayExpression holes are `null` and isTypeOnlyStatement keeps
+			// them). Checked BEFORE the per-node strip so `declare` is intact.
+			if (isTypeOnlyStatement(node[i])) {
+				node.splice(i, 1);
+			} else {
+				node[i] = stripTsOnlyWrappers(node[i]);
+			}
+		}
 		return node;
 	}
 	if (
@@ -4114,6 +5699,13 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	// through the wrapper path; HTML-contributing nodes are at `_root.childNodes[i]`.
 	const single =
 		jsxNodes.length === 1 && jsxNodes[0].type === 'Element' && !isComponentTag(jsxNodes[0]);
+	// M3 inherit-range: consume the caller's body-form flag ONCE — nested planJsx
+	// runs (directive arm bodies compiled during this walk) must not see it. The
+	// sole-comp-root predicate is shared with the server compile
+	// (inheritSoleCompRoot), so the client stamp and the server pair-skip agree
+	// by construction; the stamped cc emits componentSlot(..., inherit=true).
+	const inheritRoot = ctx._inheritBody === true && inheritSoleCompRoot(jsxNodes, ctx);
+	ctx._inheritBody = false;
 	// Top-level control-flow directives (@if/@for/@switch/@try/<Activity>). In a
 	// body that ALSO has static template roots, each construct emits a `<!>`
 	// anchor at its child index (mirroring the in-element mixed-children path)
@@ -4179,6 +5771,12 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 			}
 		}
 		partsHtml.push(part);
+		// M3 inherit-range: stamp the sole comp-call root's cc. Its own entry is
+		// the LAST one its emitNodeHtml pushed (nested children/prop ccs are
+		// pushed first, before makeCompCall returns to the root push).
+		if (inheritRoot && compCalls.length > 0) {
+			compCalls[compCalls.length - 1].inheritRange = true;
+		}
 		// Advance the child index only when the node actually contributed template
 		// HTML (an element / text / `<!>` anchor). Component calls and un-anchored
 		// constructs contribute none — advancing for them would shift every later
@@ -4193,15 +5791,19 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	const noTemplate = html === '';
 
 	const mountLines = [];
-	// Initialize `_b` as a LOCAL only — commit to `__s.slots[0]` at the
-	// VERY END of the mount path. If anything thrown mid-mount (e.g. a `use()`
-	// call suspending or a child render throwing), the scope's binding bag
-	// stays `undefined` and the next attempt re-enters the mount branch from
-	// scratch instead of mistakenly hitting the update branch with a half-
-	// populated bag (which would crash setText / setAttribute on undefined
-	// slot references).
-	// Control-flow-only bodies carry no bag, so skip its allocation/commit entirely.
-	if (!noTemplate) mountLines.push(`    _b = {};`);
+	// The binding bag is allocated in ONE shot at the very END of the mount path
+	// by a shared runtime arity factory (`_$bagN(__s, root, v0, v1, …)` — see
+	// makeBag): the mount statements fill pre-declared LOCALS (`_m0, _m1, …`,
+	// declared by the placeholder below once the field count is known), and the
+	// factory builds the object literal from the real values (final hidden class
+	// + real field representations at allocation), inserts the root, and commits
+	// `__s.slots[0]` — commit LAST, so a throw mid-mount (a `use()` suspending, a
+	// child render throwing) leaves the bag `undefined` and the next attempt
+	// re-enters the mount branch instead of updating a half-populated bag.
+	// Control-flow-only bodies carry no bag, so all of it is skipped.
+	const bag = makeBag();
+	const BAG_LOCALS_PLACEHOLDER = `    /*__bagLocals__*/`;
+	if (!noTemplate) mountLines.push(BAG_LOCALS_PLACEHOLDER);
 
 	let elementVars;
 	let ensureVar;
@@ -4216,12 +5818,26 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		//     the inner root.
 		//   - SVG/MathML multi-root: pass ns + frag=1; runtime wraps and returns
 		//     the wrap itself (caller drains its children — no <octane-frag>).
+		// Multi-root fragments at an HTML parent imply SVG only when EVERY element
+		// root does (an all-SVG fragment — e.g. portal children `<rect/><g/>` — must
+		// parse in foreign content; a MIXED fragment can't share one wrapper, so it
+		// keeps HTML and the SVG-only roots would mis-parse — reject? No: mixed
+		// fragments at ambiguous positions are user error the browser also mangles).
+		const elementRoots = single ? null : jsxNodes.filter((n) => elementTagName(n) !== null);
+		const fragImpliesSvg =
+			!single && elementRoots.length > 0 && elementRoots.every(isNonHtmlRootTag);
 		const isHtmlNs =
 			parentNs === 'html' &&
 			(single
-				? !isNonHtmlRootTag(jsxNodes[0]) // <svg>/<math> as the root means non-HTML ns
-				: true);
-		const tplNs = isHtmlNs ? 'html' : single ? nsForRootTag(jsxNodes[0], parentNs) : parentNs;
+				? !isNonHtmlRootTag(jsxNodes[0]) // svg/math/SVG-only root means non-HTML ns
+				: !fragImpliesSvg);
+		const tplNs = isHtmlNs
+			? 'html'
+			: single
+				? nsForRootTag(jsxNodes[0], parentNs)
+				: parentNs === 'html' && fragImpliesSvg
+					? 'svg'
+					: parentNs;
 		const flag = nsFlag(tplNs);
 		const fragArg = !single && flag !== 0 ? 1 : 0;
 		const tplHtml = single || flag !== 0 ? html : `<octane-frag>${html}</octane-frag>`;
@@ -4380,6 +5996,9 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		if (b.kind === 'text') ctx.runtimeNeeded.add('htextSwap');
 		if (b.kind === 'textOnlyChild') ctx.runtimeNeeded.add('htext');
 		if (b.kind === 'attr') ctx.runtimeNeeded.add('setAttribute');
+		if (CONTROLLED_KIND_HELPERS[b.kind] !== undefined) {
+			ctx.runtimeNeeded.add(CONTROLLED_KIND_HELPERS[b.kind]);
+		}
 		if (b.kind === 'class') {
 			if (b.ns && b.ns !== 'html') {
 				// SVG/MathML `className` is read-only — use setClassAttr, which sets the
@@ -4389,6 +6008,12 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		}
 		if (b.kind === 'style') ctx.runtimeNeeded.add('setStyle');
 		if (b.kind === 'formAction') ctx.runtimeNeeded.add('setFormAction');
+		if (b.kind === 'event-bundle') {
+			// 3b: mount builds the descriptor via evtN, update mutates via evtNu.
+			const arity = b.argExprs.length <= 2 ? String(b.argExprs.length) : 'N';
+			ctx.runtimeNeeded.add(`evt${arity}`);
+			ctx.runtimeNeeded.add(`evt${arity}u`);
+		}
 		if (b.kind === 'spread') {
 			ctx.runtimeNeeded.add('setSpread');
 			ctx.runtimeNeeded.add('queueRefDetach'); // unmount-detach of a spread-supplied ref
@@ -4410,8 +6035,8 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 			b.endElVar = ensureVar(b.endPath);
 		}
 		// `htextSwap` (sibling text hole) detaches its `<!>`; defer it past all walks (see above).
-		if (b.kind === 'text') deferredTextMounts.push(emitBindingMount(b, elVar));
-		else mountLines.push(emitBindingMount(b, elVar));
+		if (b.kind === 'text') deferredTextMounts.push(emitBindingMount(b, elVar, bag));
+		else mountLines.push(emitBindingMount(b, elVar, bag));
 	}
 	// Shared construct mount-loop (@for/@if/component/@try/@switch/portal):
 	// resolve each record's host element, stash it on the bag under the
@@ -4425,12 +6050,12 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		for (const c of list) {
 			const elVar = ensureVar(c.hostPath || []);
 			c.elVar = elVar;
-			if (!noTemplate) mountLines.push(`    _b._${hostKey}$${c.id} = ${elVar};`);
+			if (!noTemplate) mountLines.push(`    ${bag.local(`_${hostKey}$${c.id}`)} = ${elVar};`);
 			if (!noTemplate && stampLoc) stampHostLoc(elVar, c.hostPath, c.loc);
 			if (anchorKey !== null && c.anchorPath) {
 				const anchorVar = ensureVar(c.anchorPath);
 				c.anchorVar = anchorVar;
-				mountLines.push(`    _b._${anchorKey}$${c.id} = ${anchorVar};`);
+				mountLines.push(`    ${bag.local(`_${anchorKey}$${c.id}`)} = ${anchorVar};`);
 			}
 			if (each) each(c);
 		}
@@ -4442,11 +6067,11 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		each: (cc) => {
 			// A renderable `{expr}` child in a TEMPLATE body (has a bag) uses the inline
 			// text-hole fast path — cache its text node (`_chv`) + last value (`_chp`) on
-			// the bag so updates do a direct `setText` like a `.tsrx` text binding. Init
-			// in the mount branch so the bag shape stays monomorphic.
+			// the bag so updates do a direct `setText` like a `.tsrx` text binding.
+			// Const-seeded straight into the bag factory args — no mount statement.
 			if (cc.isChild && !noTemplate) {
-				mountLines.push(`    _b._chv$${cc.id} = null;`);
-				mountLines.push(`    _b._chp$${cc.id} = undefined;`);
+				bag.constField(`_chv$${cc.id}`, 'null');
+				bag.constField(`_chp$${cc.id}`, 'undefined');
 			}
 		},
 	});
@@ -4462,21 +6087,66 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	for (const line of deferredTextMounts) mountLines.push(line);
 
 	if (!noTemplate) {
-		if (single) {
-			mountLines.push(`    __block.parentNode.insertBefore(_root, __block.endMarker);`);
-		} else {
+		// Allocate + insert + commit in ONE shared-factory call, LAST — see the
+		// matching comment at the bag-locals placeholder above. `_$bagN(__s, root,
+		// v0, …)` builds `{a: v0, b: v1, …}` (final hidden class + real values at
+		// allocation), inserts `root` before the block's end marker (skipped for
+		// the multi-root null-root form — drainFrag placed the content), commits
+		// `__s.slots[0]`, and returns the bag for the after-lines below.
+		if (!single) {
 			// Multi-root: drain the <octane-frag> wrapper's children into the live
 			// parent via the runtime helper — a hydration-aware no-op when clone()
 			// adopted the server content in place (virtual wrapper).
 			ctx.runtimeNeeded.add('drainFrag');
 			mountLines.push(`    _$drainFrag(_root, __block.parentNode, __block.endMarker);`);
 		}
+		const rootArg = single ? '_root' : 'null';
+		const args = bag.fields.map((f) => f.constExpr ?? f.local);
+		if (bag.fields.length <= BAG_FACTORY_MAX) {
+			ctx.runtimeNeeded.add(`bag${bag.fields.length}`);
+			mountLines.push(
+				`    _b = _$bag${bag.fields.length}(__s, ${rootArg}${args.length ? ', ' + args.join(', ') : ''});`,
+			);
+		} else {
+			// Spill path — beyond the shared-factory arities: one inline literal
+			// (still real values, single allocation) through the generic commit.
+			ctx.runtimeNeeded.add('bagOf');
+			mountLines.push(
+				`    _b = _$bagOf(__s, ${rootArg}, { ${bag.fields.map((f) => `${f.name}: ${f.constExpr ?? f.local}`).join(', ')} });`,
+			);
+		}
+		// REF MANIFEST (compiled-output plan, ref-manifest phase): bodies with
+		// ref-carrying bindings stamp a module-scope constant on the scope so the
+		// runtime's suspense-hide walk (detachSubtreeRefs) finds the bag fields
+		// WITHOUT a key scan — flat [kind, field, elField] triads ('r' element
+		// ref / 's' spread / 'f' fragment ref, whose third slot is unused).
+		{
+			const rm = [];
+			for (const b of elementBindings) {
+				if (b.kind === 'ref') {
+					rm.push('r', bag.letter(`_ref$${b.id}`), bag.letter(`_el$${b.id}`));
+				} else if (b.kind === 'spread') {
+					rm.push('s', bag.letter(`_sp$${b.id}`), bag.letter(`_el$${b.id}`));
+				} else if (b.kind === 'fragmentRef') {
+					rm.push('f', bag.letter(`_fi$${b.id}`), '');
+				}
+			}
+			if (rm.length > 0) {
+				const rmName = `_rm$${ctx.nextHelperId++}`;
+				ctx.hoistedHelpers.push(
+					`const ${rmName} = [${rm.map((x) => JSON.stringify(x)).join(', ')}];`,
+				);
+				mountLines.push(`    __s.refFields = ${rmName};`);
+			}
+		}
+		// Declare the mount locals the factory args read — patched into the
+		// placeholder now that the field set is complete.
+		const locals = bag.fields.filter((f) => f.local !== null).map((f) => f.local);
+		const init = mountLines.indexOf(BAG_LOCALS_PLACEHOLDER);
+		if (init === -1) throw new Error('octane compiler: bag locals placeholder missing');
+		if (locals.length > 0) mountLines[init] = `    let ${locals.join(', ')};`;
+		else mountLines.splice(init, 1);
 	}
-	// Commit the binding bag to the scope LAST — see the matching comment at
-	// the `_b = {}` initialization above. Reaching here means every binding
-	// and the DOM range have been successfully constructed, so future
-	// renders can safely take the update branch keyed on `__s.slots[0]`.
-	if (!noTemplate) mountLines.push(`    __s.slots[0] = _b;`);
 
 	// Update. Deferred property-writes run their diff EVERY render (it does the
 	// mount-time write too); everything else diffs only on re-render (the `else`
@@ -4485,7 +6155,7 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	const updateLines = [];
 	const everyRenderLines = [];
 	for (const b of elementBindings) {
-		const code = emitBindingUpdate(b);
+		const code = emitBindingUpdate(b, bag);
 		if (!code) continue;
 		if (b.deferred) everyRenderLines.push(code);
 		else updateLines.push(code);
@@ -4543,18 +6213,29 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	//     and content never lands after later siblings).
 	//   - The host is a real in-template element: no anchor — append into it
 	//     (insertBefore(_, null) === appendChild).
-	// Returns the anchor EXPRESSION, or null for the append case.
+	// Returns the anchor EXPRESSION, or null for the append case. The after-lines
+	// run right after the mount/update branches where `_b` holds the committed
+	// bag, so bag reads go through `_b.<letter>` (shorter than `__s.slots[0].…`).
 	const anchorExprFor = (c, anchorKey) =>
 		c.anchorVar
-			? `__s.slots[0]._${anchorKey}$${c.id}`
+			? `_b.${bag.letter(`_${anchorKey}$${c.id}`)}`
 			: !isElHost(c.elVar)
 				? '__block.endMarker'
 				: null;
+	// Host expression for a construct's slot call — the bag-stashed host element,
+	// or the block's own parentNode for bagless (control-flow-only) bodies.
+	const hostExprFor = (key) => (noTemplate ? '__block.parentNode' : `_b.${bag.letter(key)}`);
+	// Phase 2: a construct's env argument — the captured-locals tuple its
+	// hoisted helpers destructure from `__extra`. Folded records carry a
+	// pre-built `props.hN` expression (the fold threads the values through the
+	// fragment renderer's props); inline records emit the identifier array.
+	const envExprFor = (c) =>
+		c.envExpr ?? (c.envNames && c.envNames.length ? `[${c.envNames.join(', ')}]` : null);
 	for (const fc of forCalls) {
 		ctx.runtimeNeeded.add('forBlock');
 		const slotIndex = fc.slotIndex;
 		// Control-flow-only bodies have no bag: the host is __block.parentNode directly.
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._for$' + fc.id;
+		const hostExpr = hostExprFor(`_for$${fc.id}`);
 		// flags: bit 0 = pure (auto-memo), bit 1 = singleRoot (skip per-item markers),
 		//        bit 2 = depEligible (runtime compares deps array, upgrades to pure
 		//        for survivors when deps unchanged this render),
@@ -4574,8 +6255,12 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		const anchorExpr = anchorExprFor(fc, 'forAnchor');
 		const hasAnchor = anchorExpr !== null;
 		const hasEmpty = fc.emptyHelper && fc.emptyHelper !== 'null';
-		const flagsPart = flags || hasEmpty || hasAnchor ? ', ' + (flags || 0) : '';
-		const depsPart = fc.depEligible
+		// deps doubles as the Phase 2 env tuple — emitted whenever the item/empty
+		// helpers captured anything, not only for the dep-pure promotion. A deps
+		// arg forces the flags placeholder too (positional alignment).
+		const hasDeps = fc.depNames.length > 0;
+		const flagsPart = flags || hasDeps || hasEmpty || hasAnchor ? ', ' + (flags || 0) : '';
+		const depsPart = hasDeps
 			? `, [${fc.depNames.join(', ')}]`
 			: hasEmpty || hasAnchor
 				? ', undefined'
@@ -4589,15 +6274,18 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	}
 	for (const ic of ifCalls) {
 		const slotIndex = ic.slotIndex;
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._ifHost$' + ic.id;
+		const hostExpr = hostExprFor(`_ifHost$${ic.id}`);
 		// Anchor selection — see anchorExprFor.
 		const ifAnchor = anchorExprFor(ic, 'ifAnchor');
 		const anchorArg = ifAnchor ? `, ${ifAnchor}` : '';
+		const ifEnv = envExprFor(ic);
+		// env is positional AFTER anchor — backfill an `undefined` anchor slot.
+		const ifEnvArg = ifEnv ? (anchorArg ? `, ${ifEnv}` : `, undefined, ${ifEnv}`) : '';
 		if (ic.activity) {
 			ctx.runtimeNeeded.add('activityBlock');
 			pushAfter(
 				ic.id,
-				`  _$activityBlock(__s, ${slotIndex}, ${hostExpr}, (${ic.modeExpr}), ${ic.thenHelper}${anchorArg});`,
+				`  _$activityBlock(__s, ${slotIndex}, ${hostExpr}, (${ic.modeExpr}), ${ic.thenHelper}${anchorArg}${ifEnvArg});`,
 			);
 			continue;
 		}
@@ -4605,12 +6293,12 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 		const elseArg = ic.elseHelper || 'null';
 		pushAfter(
 			ic.id,
-			`  _$ifBlock(__s, ${slotIndex}, ${hostExpr}, (${ic.condExpr}), ${ic.thenHelper}, ${elseArg}${anchorArg});`,
+			`  _$ifBlock(__s, ${slotIndex}, ${hostExpr}, (${ic.condExpr}), ${ic.thenHelper}, ${elseArg}${anchorArg}${ifEnvArg});`,
 		);
 	}
 	for (const cc of compCalls) {
 		const slotIndex = cc.slotIndex;
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._compHost$' + cc.id;
+		const hostExpr = hostExprFor(`_compHost$${cc.id}`);
 		// Renderable `{expr}` hole — dispatch the value at runtime (component /
 		// element → block; primitive → text; nullish/boolean/'' → nothing). Shares
 		// the host/`<!>`-anchor resolution + hole-aware hydration walk with real
@@ -4623,9 +6311,11 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 			if (cc.onlyChildText && !noTemplate) {
 				ctx.runtimeNeeded.add('setText');
 				ctx.runtimeNeeded.add('childTextHole');
+				const chp = `_b.${bag.letter(`_chp$${cc.id}`)}`;
+				const chv = `_b.${bag.letter(`_chv$${cc.id}`)}`;
 				pushAfter(
 					cc.id,
-					`  { const _v = (${cc.valueExpr}); if (_b._chp$${cc.id} !== _v) { _b._chp$${cc.id} = _v; const _t = _b._chv$${cc.id}; if (_t != null && typeof _v !== 'object' && typeof _v !== 'function') _$setText(_t, _v); else _b._chv$${cc.id} = _$childTextHole(__s, ${slotIndex}, ${hostExpr}, _v, _t); } }`,
+					`  { const _v = (${cc.valueExpr}); if (${chp} !== _v) { ${chp} = _v; const _t = ${chv}; if (_t != null && typeof _v !== 'object' && typeof _v !== 'function') _$setText(_t, _v); else ${chv} = _$childTextHole(__s, ${slotIndex}, ${hostExpr}, _v, _t); } }`,
 				);
 				continue;
 			}
@@ -4654,9 +6344,29 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 			// When the slot has its OWN `<!>` placeholder, tell textHole/childSlot to
 			// reuse it as the end marker (no second comment minted) — `ownEnd`.
 			const ownEndArg = cc.anchorVar ? ', true' : '';
+			const chp = `_b.${bag.letter(`_chp$${cc.id}`)}`;
+			const chv = `_b.${bag.letter(`_chv$${cc.id}`)}`;
+			pushAfter(
+				cc.id,
+				`  { const _v = (${cc.valueExpr}); if (${chp} !== _v) { ${chp} = _v; const _t = ${chv}; if (_t != null && typeof _v !== 'object' && typeof _v !== 'function') _$setText(_t, _v); else ${chv} = _$textHole(__s, ${slotIndex}, ${hostExpr}, _v, ${anchorExpr}${ownEndArg}); } }`,
+			);
+			continue;
+		}
+		// M3 inherit-range: the sole comp-call root of a `@{}` body — the slot
+		// BORROWS the enclosing block's marker range (10th positional arg), so it
+		// mints nothing and the server skips the child's frame pair at the same
+		// site (ssrEmitComponent reads the same predicate). Supersedes lite (the
+		// borrow needs a real Block behind the slot) and singleRoot (the borrow
+		// already elides every marker, and hydration must NOT expect a server
+		// pair). The anchor stays: it is the runtime's fallback insert position
+		// when the borrow is declined (incoherent parent regime) and the probe
+		// anchor for transition swaps.
+		if (cc.inheritRange) {
+			ctx.runtimeNeeded.add('componentSlot');
+			const inheritAnchor = anchorExprFor(cc, 'compAnchor') ?? 'undefined';
 			pushAfter(
 				cc.id,
-				`  { const _v = (${cc.valueExpr}); if (_b._chp$${cc.id} !== _v) { _b._chp$${cc.id} = _v; const _t = _b._chv$${cc.id}; if (_t != null && typeof _v !== 'object' && typeof _v !== 'function') _$setText(_t, _v); else _b._chv$${cc.id} = _$textHole(__s, ${slotIndex}, ${hostExpr}, _v, ${anchorExpr}${ownEndArg}); } }`,
+				`  _$componentSlot(__s, ${slotIndex}, ${hostExpr}, ${cc.compExpr}, ${cc.propsExpr}, ${inheritAnchor}, undefined, undefined, true);`,
 			);
 			continue;
 		}
@@ -4694,11 +6404,13 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 			keyArg = `, (${cc.keyExpr})`;
 		}
 		// singleRoot is the 8th positional arg (after anchor, key). It's gated on
-		// no-key, so backfill anchor + key placeholders to land it in the right slot.
+		// no-key, so backfill anchor + key placeholders to land it in the right
+		// slot. `true` = proven same-module single-element root; `2` = the
+		// cross-module sentinel (runtime checks the callee's $$singleRoot stamp).
 		let singleRootArg = '';
-		if (cc.singleRoot) {
+		if (cc.singleRoot || cc.maybeSingleRoot) {
 			if (anchorArg === '') anchorArg = ', undefined';
-			singleRootArg = ', undefined, true';
+			singleRootArg = cc.singleRoot ? ', undefined, true' : ', undefined, 2';
 		}
 		pushAfter(
 			cc.id,
@@ -4707,39 +6419,44 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	}
 	for (const pc of ctx._portalCalls) {
 		const slotIndex = pc.slotIndex;
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._portalHost$' + pc.id;
+		const hostExpr = hostExprFor(`_portalHost$${pc.id}`);
 		ctx.runtimeNeeded.add('portal');
+		const portalEnv = envExprFor(pc);
 		pushAfter(
 			pc.id,
-			`  _$portal(__s, ${slotIndex}, ${pc.targetExpr}, ${pc.bodyExpr}, ${pc.propsExpr}, ${hostExpr});`,
+			`  _$portal(__s, ${slotIndex}, ${pc.targetExpr}, ${pc.bodyExpr}, ${pc.propsExpr}, ${hostExpr}${portalEnv ? `, ${portalEnv}` : ''});`,
 		);
 	}
 	// Restore the outer plan's portal-call list — pairs with the save above.
 	ctx._portalCalls = _prevPortalCalls;
 	for (const tc of tryCalls) {
 		const slotIndex = tc.slotIndex;
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._tryHost$' + tc.id;
+		const hostExpr = hostExprFor(`_tryHost$${tc.id}`);
 		ctx.runtimeNeeded.add('tryBlock');
 		// Anchor selection — see anchorExprFor (mirrors ifBlock, including the
 		// __block.endMarker fallback for a body that is ONLY a @try).
 		const tryAnchor = anchorExprFor(tc, 'tryAnchor');
 		const tryAnchorArg = tryAnchor ? `, ${tryAnchor}` : '';
+		const tryEnv = envExprFor(tc);
+		const tryEnvArg = tryEnv ? (tryAnchorArg ? `, ${tryEnv}` : `, undefined, ${tryEnv}`) : '';
 		pushAfter(
 			tc.id,
-			`  _$tryBlock(__s, ${slotIndex}, ${hostExpr}, ${tc.tryHelper}, ${tc.catchHelper}, ${tc.pendingHelper}${tryAnchorArg});`,
+			`  _$tryBlock(__s, ${slotIndex}, ${hostExpr}, ${tc.tryHelper}, ${tc.catchHelper}, ${tc.pendingHelper}${tryAnchorArg}${tryEnvArg});`,
 		);
 	}
 	for (const sc of ctx._switchCalls) {
 		const slotIndex = sc.slotIndex;
-		const hostExpr = noTemplate ? '__block.parentNode' : '__s.slots[0]._switchHost$' + sc.id;
+		const hostExpr = hostExprFor(`_switchHost$${sc.id}`);
 		ctx.runtimeNeeded.add('switchBlock');
 		// Anchor selection — see anchorExprFor (mirrors ifBlock, including the
 		// __block.endMarker fallback for a body that is ONLY a @switch).
 		const switchAnchor = anchorExprFor(sc, 'switchAnchor');
 		const anchorArg = switchAnchor ? `, ${switchAnchor}` : '';
+		const swEnv = envExprFor(sc);
+		const swEnvArg = swEnv ? (anchorArg ? `, ${swEnv}` : `, undefined, ${swEnv}`) : '';
 		pushAfter(
 			sc.id,
-			`  _$switchBlock(__s, ${slotIndex}, ${hostExpr}, (${sc.discExpr}), ${sc.casesArrayExpr}, ${sc.defaultHelper}${anchorArg});`,
+			`  _$switchBlock(__s, ${slotIndex}, ${hostExpr}, (${sc.discExpr}), ${sc.casesArrayExpr}, ${sc.defaultHelper}${anchorArg}${swEnvArg});`,
 		);
 	}
 	// Restore the outer plan's switch-call list — pairs with the save above.
@@ -4752,19 +6469,23 @@ function planJsx(jsxNodesRaw, ctx, componentName, inlinedSubs, parentNs = 'html'
 	// Restore the outer plan's per-element LOC map — pairs with the save at planJsx top.
 	ctx._elemLocs = _prevElemLocs;
 
+	const updateJoined = updateLines.join('\n');
+	const everyRenderJoined = everyRenderLines.join('\n');
+	const afterJoined = afterCalls
+		.map((c, i) => ({ ...c, i }))
+		.sort((a, b) => a.id - b.id || a.i - b.i)
+		.map((c) => c.line)
+		.join('\n');
+
 	return {
 		// Does this body carry a binding bag (`__s.slots[0]`)? Control-flow-only
 		// bodies don't → no `let _b … if (undefined) … else {}` wrapper in the
 		// assembled body (the slot calls use __block.parentNode directly).
 		hasBag: !noTemplate,
 		mount: mountLines.join('\n'),
-		update: updateLines.join('\n'),
-		everyRender: everyRenderLines.join('\n'),
-		after: afterCalls
-			.map((c, i) => ({ ...c, i }))
-			.sort((a, b) => a.id - b.id || a.i - b.i)
-			.map((c) => c.line)
-			.join('\n'),
+		update: updateJoined,
+		everyRender: everyRenderJoined,
+		after: afterJoined,
 		head: headEmit,
 		// DEV ONLY (`''` in prod → no body emission, byte-identical output): a structured
 		// `{ slotIndex: [line, column] }` literal for hydration-mismatch warnings + a future
@@ -4791,20 +6512,81 @@ function buildLocsLiteral(constructs) {
 // event-bundle "stable bundle" hoisting is a separate, guarded optimization).
 const DEFERRABLE_MOUNT_KINDS = new Set(['attr', 'class', 'style', 'formAction', 'htmlOnlyChild']);
 
+// Per-body binding-bag registry. Fields are keyed by the historical long name
+// (`_el$3`, `_prev$3`, …) but EMIT as single characters (`a`, `b`, …) — bag
+// field names are object properties, so unlike locals a minifier can never
+// shorten them; 1-char names are the shipped-bytes win. Each field is either
+// LOCAL-backed (the mount path assigns a pre-declared `_mN` local; the runtime
+// bag factory receives it positionally) or CONST-seeded (`null`/`undefined`
+// seeds pass straight to the factory — no local, no mount statement).
+// Registration order = mount-write order = the factory's positional args =
+// the letter sequence, so `_$bagN(s, root, v0, v1, …)` builds `{a: v0, b: v1,
+// …}` with every field carrying its REAL mount value. `letter()` throws for a
+// field that was never mount-registered — an update/slot-call line referencing
+// an unmounted field is a compiler bug, surfaced at compile time.
+const BAG_LC = 'abcdefghijklmnopqrstuvwxyz';
+const BAG_UC = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+// Highest shared-factory arity (bag0..bag16 in the runtime); bigger bags fall
+// back to `bagOf(__s, root, { … })` with an inline literal of real values.
+const BAG_FACTORY_MAX = 16;
+function bagLetter(i) {
+	if (i < 26) return BAG_LC[i];
+	if (i < 52) return BAG_UC[i - 26];
+	return `f${i}`;
+}
+function makeBag() {
+	const fields = [];
+	const byKey = new Map();
+	const reg = (key, constExpr) => {
+		let r = byKey.get(key);
+		if (r === undefined) {
+			const i = fields.length;
+			r = {
+				key,
+				// Every field gets a letter — incl. ref-carrying kinds since the
+				// ref-manifest phase: the runtime's suspense-hide walk discovers
+				// them through the compiled `__s.refFields` manifest, not by key
+				// prefix, so nothing needs a long name anymore.
+				name: bagLetter(i),
+				local: constExpr === undefined ? `_m${i}` : null,
+				constExpr: constExpr === undefined ? null : constExpr,
+			};
+			fields.push(r);
+			byKey.set(key, r);
+		}
+		return r;
+	};
+	return {
+		/** Mount-write target for `key` — the pre-declared local. */
+		local: (key) => reg(key, undefined).local,
+		/** Seed `key` with a constant expression (no local, no mount write). */
+		constField: (key, expr) => {
+			reg(key, expr);
+		},
+		/** Emitted bag property name for `key` (update/slot-call reads+writes). */
+		letter: (key) => {
+			const r = byKey.get(key);
+			if (r === undefined) throw new Error(`octane compiler: bag field ${key} never mounted`);
+			return r.name;
+		},
+		fields,
+	};
+}
+
 // Mount for a DEFERRED property-write binding: store the element ref + seed the
 // diff field to `undefined`. The every-render diff then performs the actual
 // write — including on the first render, since the `undefined` seed makes its
 // `_prev !== _v` guard fire, and `setAttribute(el, name, undefined)` /
 // `setClassName(el, undefined)` no-op on a freshly-cloned element (so the output
 // is byte-identical to the old unconditional mount write).
-function emitDeferredMount(b, elVar) {
+function emitDeferredMount(b, elVar, bag) {
 	// `style` diffs on `_sty`; attr / class / formAction / htmlOnlyChild on `_prev`.
-	const field = b.kind === 'style' ? `_sty$${b.id}` : `_prev$${b.id}`;
-	return `    { _b._el$${b.id} = ${elVar}; _b.${field} = undefined; }`;
+	bag.constField(b.kind === 'style' ? `_sty$${b.id}` : `_prev$${b.id}`, 'undefined');
+	return `    ${bag.local(`_el$${b.id}`)} = ${elVar};`;
 }
 
-function emitBindingMount(b, elVar) {
-	if (b.deferred) return emitDeferredMount(b, elVar);
+function emitBindingMount(b, elVar, bag) {
+	if (b.deferred) return emitDeferredMount(b, 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 (b.kind === 'suppress') return `    ${elVar}.__oct_suppress = true;`;
@@ -4818,8 +6600,8 @@ function emitBindingMount(b, elVar) {
 			// hydration mismatch re-render).
 			return `    {
       const _v = ${E};
-      _b._txt$${b.id} = _$htext(${elVar}, _v);
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_txt$${b.id}`)} = _$htext(${elVar}, _v);
+      ${bag.local(`_prev$${b.id}`)} = _v;
     }`;
 		}
 		case 'htmlOnlyChild': {
@@ -4827,8 +6609,8 @@ function emitBindingMount(b, elVar) {
 			return `    {
       const _v = ${E};
       ${elVar}.innerHTML = (_v == null ? '' : ${coerce});
-      _b._el$${b.id} = ${elVar};
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_prev$${b.id}`)} = _v;
     }`;
 		}
 		case 'text': {
@@ -4841,18 +6623,38 @@ function emitBindingMount(b, elVar) {
 			// htextSwap coerces the value itself, so the mount is a bare call.
 			return `    {
       const _v = ${E};
-      _b._txt$${b.id} = _$htextSwap(${elVar}, _v);
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_txt$${b.id}`)} = _$htextSwap(${elVar}, _v);
+      ${bag.local(`_prev$${b.id}`)} = _v;
     }`;
 		}
 		case 'attr': {
 			return `    {
       const _v = ${E};
       _$setAttribute(${elVar}, ${JSON.stringify(b.name)}, _v);
-      _b._el$${b.id} = ${elVar};
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_prev$${b.id}`)} = _v;
+    }`;
+		}
+		case 'value':
+		case 'checked':
+		case 'selectValue':
+		case 'defaultValue':
+		case 'defaultChecked': {
+			// Controlled form props: property helper, NO `_prev$` cache — the
+			// helper diffs against the DOM (which the user mutates), and the
+			// update must re-run every render to reassert drift (React's
+			// controlled contract). Not in DEFERRABLE_MOUNT_KINDS: the mount
+			// runs inside the hydration window and arms the element.
+			return `    {
+      _$${CONTROLLED_KIND_HELPERS[b.kind]}(${elVar}, ${E});
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
     }`;
 		}
+		case 'autoFocus': {
+			// Mount-only (React ignores later autoFocus changes); the focus
+			// itself fires at commit, after the tree is connected.
+			return `    _$setAutoFocus(${elVar}, ${E});`;
+		}
 		case 'class': {
 			// On SVG/MathML hosts the `className` property is read-only — fall back
 			// to setAttribute. Compile-time choice, zero runtime branching.
@@ -4861,16 +6663,16 @@ function emitBindingMount(b, elVar) {
 			return `    {
       const _v = ${E};
       ${setter};
-      _b._el$${b.id} = ${elVar};
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_prev$${b.id}`)} = _v;
     }`;
 		}
 		case 'style': {
 			return `    {
       const _v = ${E};
       _$setStyle(${elVar}, _v, undefined);
-      _b._el$${b.id} = ${elVar};
-      _b._sty$${b.id} = _v;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_sty$${b.id}`)} = _v;
     }`;
 		}
 		case 'spread': {
@@ -4881,16 +6683,19 @@ function emitBindingMount(b, elVar) {
 			// (queueRefDetach: unmount cleanups run mid-render, and a state-setter
 			// ref firing null synchronously can render before a replacement
 			// element's deferred attach — commit-phase detach batches the two).
+			// The cleanup closure reads the bag through the captured `_b` — the bag
+			// exists by the time any cleanup runs (committed at mount end), and the
+			// `_sp$` field is re-written by updates, so the read must be live.
 			return `    {
       const _v = ${E};
       _$setSpread(${elVar}, _v, undefined, __s);
-      _b._el$${b.id} = ${elVar};
-      _b._sp$${b.id} = _v;
-      __s.cleanups.push(() => { const _sp = _b._sp$${b.id}; if (_sp != null && _sp.ref != null) _$queueRefDetach(_sp.ref, _b._el$${b.id}); });
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_sp$${b.id}`)} = _v;
+      __s.cleanups.push(() => { const _sp = _b.${bag.letter(`_sp$${b.id}`)}; if (_sp != null && _sp.ref != null) _$queueRefDetach(_sp.ref, _b.${bag.letter(`_el$${b.id}`)}); });
     }`;
 		}
 		case 'event': {
-			return `    _b._el$${b.id} = ${elVar};
+			return `    ${bag.local(`_el$${b.id}`)} = ${elVar};
     ${elVar}[${JSON.stringify(b.slotKey)}] = (${b.expr});`;
 		}
 		case 'formAction': {
@@ -4900,21 +6705,22 @@ function emitBindingMount(b, elVar) {
 			return `    {
       const _v = ${E};
       _$setFormAction(${elVar}, ${JSON.stringify(b.name)}, _v, undefined);
-      _b._el$${b.id} = ${elVar};
-      _b._prev$${b.id} = _v;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      ${bag.local(`_prev$${b.id}`)} = _v;
     }`;
 		}
 		case 'event-bundle': {
-			// Build a `{ fn, args }` bundle and stash fn + each arg in slots so the
-			// update path can identity-diff and skip the reassignment on no-op.
-			const argSlots = b.argExprs.map((_e, i) => `_b._a$${b.id}$${i}`);
-			const argInit = b.argExprs.map((e, i) => `_b._a$${b.id}$${i} = (${e});`).join(' ');
-			return `    {
-      _b._el$${b.id} = ${elVar};
-      _b._fn$${b.id} = (${b.fnExpr});
-      ${argInit}
-      ${elVar}[${JSON.stringify(b.slotKey)}] = { fn: _b._fn$${b.id}, args: [${argSlots.join(', ')}] };
-    }`;
+			// 3b (docs/compiled-output-optimization-plan.md): ONE shared-helper call
+			// builds the `{ fn, args }` descriptor, assigns the element's event slot,
+			// and returns the descriptor — the ONLY bag field this binding needs (the
+			// update path mutates the descriptor in place; dispatch reads `el[key]`
+			// per event, so the mutation is observed without re-assignment).
+			const n = b.argExprs.length;
+			const argsPart = b.argExprs.map((e) => `, (${e})`).join('');
+			if (n <= 2) {
+				return `    ${bag.local(`_ev$${b.id}`)} = _$evt${n}(${elVar}, ${JSON.stringify(b.slotKey)}, (${b.fnExpr})${argsPart});`;
+			}
+			return `    ${bag.local(`_ev$${b.id}`)} = _$evtN(${elVar}, ${JSON.stringify(b.slotKey)}, (${b.fnExpr}), [${b.argExprs.map((e) => `(${e})`).join(', ')}]);`;
 		}
 		case 'ref': {
 			// attachRef handles all three supported shapes: callback (function),
@@ -4931,12 +6737,14 @@ function emitBindingMount(b, elVar) {
 			// bound element rides along as the cleanup target, so a callback ref
 			// shared across elements (ref={registerItem} on every @for row)
 			// releases ITS row's React-19 cleanup, not another row's.
+			// Both deferred closures read through the captured `_b` (committed by the
+			// time attach/cleanup run); `_ref$` must be a LIVE read — updates re-point it.
 			return `    {
       const _r = (${b.expr});
-      _b._ref$${b.id} = _r;
-      _b._el$${b.id} = ${elVar};
-      _$queueRefAttach(__s, () => _$attachRef(_r, _b._el$${b.id}));
-      __s.cleanups.push(() => _$queueRefDetach(_b._ref$${b.id}, _b._el$${b.id}));
+      ${bag.local(`_ref$${b.id}`)} = _r;
+      ${bag.local(`_el$${b.id}`)} = ${elVar};
+      _$queueRefAttach(__s, () => _$attachRef(_r, _b.${bag.letter(`_el$${b.id}`)}));
+      __s.cleanups.push(() => _$queueRefDetach(_b.${bag.letter(`_ref$${b.id}`)}, _b.${bag.letter(`_el$${b.id}`)}));
     }`;
 		}
 		case 'fragmentRef': {
@@ -4948,39 +6756,53 @@ function emitBindingMount(b, elVar) {
 			// the ref + destroys the instance on unmount.
 			return `    {
       const _r = (${b.expr});
-      _b._fi$${b.id} = _$mountFragmentRef(__s, ${elVar}, ${b.endElVar}, _r);
+      ${bag.local(`_fi$${b.id}`)} = _$mountFragmentRef(__s, ${elVar}, ${b.endElVar}, _r);
     }`;
 		}
 	}
 	return '';
 }
 
-function emitBindingUpdate(b) {
+function emitBindingUpdate(b, bag) {
 	const E = `(${b.expr})`;
+	// 1-char bag field names (see makeBag) — resolved from the same registry the
+	// mount pass registered them in; an unmounted field throws at compile time.
+	const F = (prefix) => `_b.${bag.letter(`${prefix}$${b.id}`)}`;
 	switch (b.kind) {
 		case 'textOnlyChild':
 		case 'text': {
-			return `    { const _v = ${E}; if (_b._prev$${b.id} !== _v) { _$setText(_b._txt$${b.id}, _v); _b._prev$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_prev')} !== _v) { _$setText(${F('_txt')}, _v); ${F('_prev')} = _v; } }`;
 		}
 		case 'htmlOnlyChild': {
 			const coerce = b.knownString ? '_v' : 'String(_v)';
-			return `    { const _v = ${E}; if (_b._prev$${b.id} !== _v) { _b._el$${b.id}.innerHTML = (_v == null ? '' : ${coerce}); _b._prev$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_prev')} !== _v) { ${F('_el')}.innerHTML = (_v == null ? '' : ${coerce}); ${F('_prev')} = _v; } }`;
 		}
 		case 'attr': {
-			return `    { const _v = ${E}; if (_b._prev$${b.id} !== _v) { _$setAttribute(_b._el$${b.id}, ${JSON.stringify(b.name)}, _v); _b._prev$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_prev')} !== _v) { _$setAttribute(${F('_el')}, ${JSON.stringify(b.name)}, _v); ${F('_prev')} = _v; } }`;
+		}
+		case 'value':
+		case 'checked':
+		case 'selectValue':
+		case 'defaultValue':
+		case 'defaultChecked': {
+			// Deliberately UNGUARDED (no `_prev$` compare): a controlled prop
+			// reasserts on every commit — the helper's DOM-diff makes an
+			// unchanged value free, and a prev-guard would skip exactly the
+			// "unrelated re-render while the DOM drifted" reassert case.
+			return `    _$${CONTROLLED_KIND_HELPERS[b.kind]}(${F('_el')}, ${E});`;
 		}
 		case 'class': {
 			const setter =
 				b.ns && b.ns !== 'html'
-					? `_$setClassAttr(_b._el$${b.id}, _v)`
-					: `_$setClassName(_b._el$${b.id}, _v)`;
-			return `    { const _v = ${E}; if (_b._prev$${b.id} !== _v) { ${setter}; _b._prev$${b.id} = _v; } }`;
+					? `_$setClassAttr(${F('_el')}, _v)`
+					: `_$setClassName(${F('_el')}, _v)`;
+			return `    { const _v = ${E}; if (${F('_prev')} !== _v) { ${setter}; ${F('_prev')} = _v; } }`;
 		}
 		case 'style': {
 			// Object styles need per-prop diffing — call setStyle even when the
 			// reference is unchanged it'd just no-op via the internal diff. We DO
 			// skip identity matches to avoid the call overhead.
-			return `    { const _v = ${E}; if (_b._sty$${b.id} !== _v) { _$setStyle(_b._el$${b.id}, _v, _b._sty$${b.id}); _b._sty$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_sty')} !== _v) { _$setStyle(${F('_el')}, _v, ${F('_sty')}); ${F('_sty')} = _v; } }`;
 		}
 		case 'spread': {
 			// setSpread does its own per-key diffing internally and handles cleanup
@@ -4989,33 +6811,25 @@ function emitBindingUpdate(b) {
 			// `__s` rides along on updates too so a spread-supplied ref's attach is
 			// deferred to commit (after all queued detaches) — same phasing as the
 			// direct `ref` binding above.
-			return `    { const _v = ${E}; if (_b._sp$${b.id} !== _v) { _$setSpread(_b._el$${b.id}, _v, _b._sp$${b.id}, __s); _b._sp$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_sp')} !== _v) { _$setSpread(${F('_el')}, _v, ${F('_sp')}, __s); ${F('_sp')} = _v; } }`;
 		}
 		case 'event': {
-			return `    _b._el$${b.id}[${JSON.stringify(b.slotKey)}] = (${b.expr});`;
+			return `    ${F('_el')}[${JSON.stringify(b.slotKey)}] = (${b.expr});`;
 		}
 		case 'formAction': {
-			return `    { const _v = ${E}; if (_b._prev$${b.id} !== _v) { _$setFormAction(_b._el$${b.id}, ${JSON.stringify(b.name)}, _v, _b._prev$${b.id}); _b._prev$${b.id} = _v; } }`;
+			return `    { const _v = ${E}; if (${F('_prev')} !== _v) { _$setFormAction(${F('_el')}, ${JSON.stringify(b.name)}, _v, ${F('_prev')}); ${F('_prev')} = _v; } }`;
 		}
 		case 'event-bundle': {
-			// Diff fn + each arg against the per-slot cache. Only rebuild + assign
-			// the bundle when something actually changed — keyed-list survivors with
-			// unchanged item refs skip everything.
-			const fnVar = `_fn`,
-				argVars = b.argExprs.map((_e, i) => `_a${i}`);
-			const reads =
-				`const ${fnVar} = (${b.fnExpr}); ` +
-				b.argExprs.map((e, i) => `const ${argVars[i]} = (${e});`).join(' ');
-			const cmps = [`_b._fn$${b.id} !== ${fnVar}`]
-				.concat(b.argExprs.map((_e, i) => `_b._a$${b.id}$${i} !== ${argVars[i]}`))
-				.join(' || ');
-			const writes = [`_b._fn$${b.id} = ${fnVar};`]
-				.concat(b.argExprs.map((_e, i) => `_b._a$${b.id}$${i} = ${argVars[i]};`))
-				.concat([
-					`_b._el$${b.id}[${JSON.stringify(b.slotKey)}] = { fn: ${fnVar}, args: [${argVars.join(', ')}] };`,
-				])
-				.join(' ');
-			return `    { ${reads} if (${cmps}) { ${writes} } }`;
+			// 3b: mutate the mount-built descriptor in place — branch-free (two
+			// plain field writes cost less than the old compare + rebuild +
+			// re-assign, and keyed-list survivors were already skipped one level
+			// up by the pure/deps short-circuit).
+			const n = b.argExprs.length;
+			const argsPart = b.argExprs.map((e) => `, (${e})`).join('');
+			if (n <= 2) {
+				return `    _$evt${n}u(${F('_ev')}, (${b.fnExpr})${argsPart});`;
+			}
+			return `    _$evtNu(${F('_ev')}, (${b.fnExpr}), [${b.argExprs.map((e) => `(${e})`).join(', ')}]);`;
 		}
 		case 'ref': {
 			// Ref expression identity may change across renders. React 19: detach
@@ -5033,11 +6847,11 @@ function emitBindingUpdate(b) {
 			// callback ref.
 			return `    {
       const _r = (${b.expr});
-      if (_r !== _b._ref$${b.id}) {
-        const _old = _b._ref$${b.id};
-        if (_old != null) _$queueRefDetach(_old, _b._el$${b.id});
-        if (_r != null) _$queueRefAttach(__s, () => _$attachRef(_r, _b._el$${b.id}));
-        _b._ref$${b.id} = _r;
+      if (_r !== ${F('_ref')}) {
+        const _old = ${F('_ref')};
+        if (_old != null) _$queueRefDetach(_old, ${F('_el')});
+        if (_r != null) _$queueRefAttach(__s, () => _$attachRef(_r, ${F('_el')}));
+        ${F('_ref')} = _r;
       }
     }`;
 		}
@@ -5050,7 +6864,7 @@ function emitBindingUpdate(b) {
 			// detaches the new ref.
 			return `    {
       const _r = (${b.expr});
-      const _fi = _b._fi$${b.id};
+      const _fi = ${F('_fi')};
       if (_fi && _r !== _fi._currentRef) {
         if (_fi._currentRef != null) _$queueRefDetach(_fi._currentRef, _fi);
         if (_r != null) _$queueRefAttach(__s, () => _$attachRef(_r, _fi));
@@ -5242,6 +7056,7 @@ function emitElementHtml(
 	const tag = node.id?.name || node.openingElement?.name?.name;
 	if (!tag) throw new Error('Element without tag');
 	rejectVoidElementContent(tag, node, ctx);
+	rejectTextareaValueChildren(tag, node, ctx);
 
 	// The host element's own namespace (e.g. `<svg>` is in SVG ns even if its
 	// parent context is HTML); its descendants' inherited ns may differ
@@ -5295,7 +7110,7 @@ function emitElementHtml(
 			if (!isFalse) bindings.push({ id: bindings.length, kind: 'suppress', path });
 			continue;
 		}
-		const attrName = normalizeJsxAttrName(rawAttrName);
+		const attrName = normalizeJsxAttrName(rawAttrName, tag);
 
 		const val = attr.value;
 		// If this attr comes AFTER a spread, we MUST emit as a binding (later wins).
@@ -5357,6 +7172,42 @@ function emitElementHtml(
 			continue;
 		}
 
+		// Controlled form props ALWAYS compile to property bindings — static
+		// literals and bare booleans (`<input checked/>`) included; nothing
+		// bakes into the template HTML (see controlledKindFor).
+		const ctlKind = controlledKindFor(tag, attrName);
+		if (ctlKind !== null) {
+			let ctlExpr;
+			if (val == null) {
+				ctlExpr = 'true';
+			} else {
+				const ctlInner = val.type === 'JSXExpressionContainer' ? val.expression : val;
+				ctlExpr = printExprWithTsrx(ctlInner, ctx, componentName, inlinedSubs);
+			}
+			bindings.push({ id: bindings.length, kind: ctlKind, expr: ctlExpr, path, ns: hostNs });
+			continue;
+		}
+		// `autoFocus` never bakes/writes an attribute — React parity: the
+		// runtime focuses the element in its mount commit (setAutoFocus).
+		if (attrName === 'autoFocus' && !tag.includes('-')) {
+			bindings.push({
+				id: bindings.length,
+				kind: 'autoFocus',
+				expr:
+					val == null
+						? 'true'
+						: printExprWithTsrx(
+								val.type === 'JSXExpressionContainer' ? val.expression : val,
+								ctx,
+								componentName,
+								inlinedSubs,
+							),
+				path,
+				ns: hostNs,
+			});
+			continue;
+		}
+
 		if (val == null) {
 			if (isAfterSpread) {
 				// Boolean attr after spread → emit as `true` binding.
@@ -5398,19 +7249,11 @@ function emitElementHtml(
 
 		// Static literal value? Inline into HTML — UNLESS we're after a spread,
 		// in which case we MUST emit as a binding so source order is preserved.
+		// bakeStaticAttr applies the shared React-parity value tables (aria-*/
+		// enumerated/data-* booleans stringify, boolean attrs canonicalize to
+		// `attr=""`/absent, booleans on non-boolean attrs drop).
 		if (inner.type === 'Literal' && !isAfterSpread) {
-			if (typeof inner.value === 'string') {
-				attrHtml += ` ${attrName}="${escapeAttr(inner.value)}"`;
-			} else if (typeof inner.value === 'number') {
-				attrHtml += ` ${attrName}="${inner.value}"`;
-			} else if (typeof inner.value === 'boolean' && attrName.startsWith('aria-')) {
-				// `aria-*` is ENUMERATED (React parity, mirroring the runtime
-				// setAttribute / ssrAttr): a boolean literal bakes as the string
-				// "true"/"false" — `aria-hidden={false}` must render, not drop.
-				attrHtml += ` ${attrName}="${inner.value}"`;
-			} else if (inner.value === true) {
-				attrHtml += ` ${attrName}`;
-			}
+			attrHtml += bakeStaticAttr(attrName, inner.value, tag);
 			continue;
 		}
 
@@ -5500,7 +7343,7 @@ function emitElementHtml(
 
 	let html = `<${tag}${attrHtml}>`;
 
-	const children = normalizeChildren(node.children || []);
+	const children = normalizeChildren(node.children || [], childNs === 'svg');
 	// Special case: a single Text child (only-child text fast path).
 	if (children.length === 1 && children[0].type === 'Text') {
 		const txtChild = children[0];
@@ -5865,9 +7708,21 @@ function makePortalCall(callNode, ctx, componentName, inlinedSubs, parentNs, css
 	// block, so it must be hoisted here — otherwise the raw JSX would be
 	// printed verbatim into the emitted portal() call (invalid output).
 	let bodyExpr;
+	let envNames = null;
 	const bt = bodyArg ? bodyArg.type : null;
 	if (bt === 'Element' || bt === 'Fragment' || bt === 'JSXElement' || bt === 'JSXFragment') {
-		bodyExpr = hoistBodyHelper(ctx, inlinedSubs, '__portal', [bodyArg], [], parentNs, cssHash);
+		// Phase 2: hoisted portal body + env tuple (see hoistBodyHelper).
+		envNames = unionEnv(ctx, [{ stmts: [bodyArg], params: [] }]);
+		bodyExpr = hoistBodyHelper(
+			ctx,
+			inlinedSubs,
+			'__portal',
+			[bodyArg],
+			[],
+			parentNs,
+			cssHash,
+			envNames,
+		);
 	} else {
 		bodyExpr = printExprWithTsrx(bodyArg, ctx, componentName, inlinedSubs);
 	}
@@ -5876,28 +7731,118 @@ function makePortalCall(callNode, ctx, componentName, inlinedSubs, parentNs, css
 	return {
 		id: ctx.nextHelperId++,
 		loc: devLoc(ctx, callNode),
+		envNames,
 		bodyExpr,
 		targetExpr,
 		propsExpr,
 	};
 }
 
+// Phase 2 (docs/compiled-output-optimization-plan.md): captured parent locals
+// for a construct body helper about to be HOISTED to module scope — the free
+// identifiers of the body (its own params/locals excluded by the scope-aware
+// walker) intersected with the locals visible at the call site: the enclosing
+// component's locals, extended per enclosing hoisted helper (see
+// hoistBodyHelper). `__pu$N` parallel-use temps are compiler-generated
+// component-body locals minted AFTER collectComponentLocals ran, so they are
+// matched by name shape. Returns null when there is no component context —
+// the caller then keeps the legacy inline (closure) placement.
+function helperCaptures(ctx, stmts, params) {
+	if (!ctx.currentComponentLocals) return null;
+	const scope = new Set();
+	for (const p of params || []) collectBindings(p, scope);
+	const free = collectFreeIdentifiers({ type: 'BlockStatement', body: stmts }, scope);
+	const env = [];
+	for (const n of free) {
+		if (ctx.currentComponentLocals.has(n) || /^__pu\$\d+$/.test(n)) env.push(n);
+	}
+	env.sort();
+	return env;
+}
+
+// A construct's helpers (then+else, all switch cases, try+pending+catch,
+// item+empty) share ONE env tuple — `block.extra` is per construct block and
+// every helper destructures the same layout — so the emitted array is the
+// sorted UNION of each body's captures. Null propagates (no component
+// context → all of the construct's helpers stay inline).
+function unionEnv(ctx, bodies) {
+	let all = null;
+	for (const b of bodies) {
+		if (!b) continue;
+		const c = helperCaptures(ctx, b.stmts, b.params);
+		if (c === null) return null;
+		if (all === null) all = new Set();
+		for (const n of c) all.add(n);
+	}
+	return all === null ? null : [...all].sort();
+}
+
 // Hoist a construct sub-body (an @if/@else branch, an `<Activity>`/@try/
-// @pending/@catch/@switch-case body, component children, a @for item/@empty
-// body) as an inlined helper: wrap the statements in the legacy synthetic
-// `Component` shape compileFunctionBody understands, compile it, and push the
-// result into the surrounding component's `inlinedSubs` — the helper is
-// emitted INSIDE the component function, so its closures capture the parent's
-// locals. Returns the generated helper name.
-function hoistBodyHelper(ctx, inlinedSubs, prefix, stmts, params, parentNs, cssHash) {
+// @pending/@catch/@switch-case body, a @for item/@empty body, a portal body)
+// as a helper. Phase 2: with `envNames` (the construct's shared env union,
+// possibly empty) the helper is hoisted to MODULE scope — zero per-render
+// closure allocations — and captured parent locals arrive through the
+// `__extra` ABI slot (renderBlock forwards `block.extra` as the third body
+// arg; the compiled call site passes the current values every parent render):
+//
+//   function __then$0(__props, __s, __extra) { const [label] = __extra; … }
+//
+// `envNames: null` keeps the legacy placement — the helper is emitted INSIDE
+// the component function so its closures capture the parent's locals
+// lexically (component children `__children$N` still use this: they are
+// invoked through props, not through a construct block, so there is no
+// block.extra channel to ride).
+function hoistBodyHelper(ctx, inlinedSubs, prefix, stmts, params, parentNs, cssHash, envNames) {
 	const helperName = `${prefix}$${ctx.nextHelperId++}`;
+	let bodyStmts = stmts;
+	if (envNames && envNames.length > 0) {
+		// Destructure the construct's shared env tuple. The layout is the UNION
+		// across the construct's helpers, so every helper destructures the same
+		// slots (names a body doesn't use are harmless consts).
+		bodyStmts = [
+			{
+				type: 'VariableDeclaration',
+				kind: 'const',
+				declarations: [
+					{
+						type: 'VariableDeclarator',
+						id: {
+							type: 'ArrayPattern',
+							elements: envNames.map((n) => ({ type: 'Identifier', name: n })),
+						},
+						init: { type: 'Identifier', name: '__extra' },
+					},
+				],
+			},
+			...stmts,
+		];
+	}
 	const fake = {
 		type: 'Component',
 		id: { type: 'Identifier', name: helperName },
 		params: params || [],
-		body: stmts,
+		body: bodyStmts,
 	};
-	inlinedSubs.push(compileFunctionBody(fake, ctx, helperName, parentNs, cssHash) + ';');
+	if (envNames == null) {
+		inlinedSubs.push(compileFunctionBody(fake, ctx, helperName, parentNs, cssHash) + ';');
+		return helperName;
+	}
+	// Module-scope placement. Nested constructs compiled INSIDE this body
+	// compute THEIR captures against the names visible at their call sites —
+	// which live in THIS compiled body: the component's locals extended with
+	// this helper's params, env destructure, and body-level locals. (A nested
+	// helper's env values are emitted as plain identifiers at its call site.)
+	const prevLocals = ctx.currentComponentLocals;
+	const extended = new Set(prevLocals);
+	for (const n of collectComponentLocals(fake)) extended.add(n);
+	ctx.currentComponentLocals = extended;
+	let code;
+	try {
+		code = compileFunctionBody(fake, ctx, helperName, parentNs, cssHash);
+	} finally {
+		ctx.currentComponentLocals = prevLocals;
+	}
+	ctx.hoistedHelpers.push(code + ';');
 	return helperName;
 }
 
@@ -5911,6 +7856,16 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 
 	const thenStmts =
 		node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
+	const elseStmts = node.alternate
+		? node.alternate.type === 'BlockStatement'
+			? node.alternate.body
+			: [node.alternate]
+		: null;
+	// Phase 2: one shared env tuple for both branches (see unionEnv).
+	const envNames = unionEnv(ctx, [
+		{ stmts: thenStmts, params: [] },
+		elseStmts && { stmts: elseStmts, params: [] },
+	]);
 	const thenHelperName = hoistBodyHelper(
 		ctx,
 		inlinedSubs,
@@ -5919,13 +7874,21 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 		[],
 		parentNs,
 		cssHash,
+		envNames,
 	);
 
 	let elseHelperName = null;
-	if (node.alternate) {
-		const elseStmts =
-			node.alternate.type === 'BlockStatement' ? node.alternate.body : [node.alternate];
-		elseHelperName = hoistBodyHelper(ctx, inlinedSubs, '__else', elseStmts, [], parentNs, cssHash);
+	if (elseStmts) {
+		elseHelperName = hoistBodyHelper(
+			ctx,
+			inlinedSubs,
+			'__else',
+			elseStmts,
+			[],
+			parentNs,
+			cssHash,
+			envNames,
+		);
 	}
 
 	return {
@@ -5933,6 +7896,7 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 		loc: devLoc(ctx, node),
 		condExpr,
 		condTest: node.test, // raw test AST — the fold threads it as a `props.hN` hole
+		envNames,
 		thenHelper: thenHelperName,
 		elseHelper: elseHelperName,
 		hostPath: null,
@@ -5946,6 +7910,8 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 // every parent render (like ifBlock's cond); a missing mode defaults to visible.
 function makeActivityCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 	const modeExpr = node.mode ? printExpr(node.mode) : "'visible'";
+	// Phase 2: hoisted body + env tuple (see hoistBodyHelper).
+	const envNames = unionEnv(ctx, [{ stmts: node.children, params: [] }]);
 	const bodyHelperName = hoistBodyHelper(
 		ctx,
 		inlinedSubs,
@@ -5954,12 +7920,14 @@ function makeActivityCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = n
 		[],
 		parentNs,
 		cssHash,
+		envNames,
 	);
 	return {
 		id: ctx.nextHelperId++,
 		loc: devLoc(ctx, node),
 		activity: true,
 		modeExpr,
+		envNames,
 		thenHelper: bodyHelperName,
 		elseHelper: null,
 		hostPath: null,
@@ -6000,7 +7968,12 @@ function isComponentTag(node) {
 	// codegen path as `<Foo>` / `<ctx.Provider>`.
 	if (name.type === 'JSXExpressionContainer' && name.isDynamic === true) return true;
 	if (name.type === 'Identifier' || name.type === 'JSXIdentifier') {
-		return typeof name.name === 'string' && /^[A-Z]/.test(name.name);
+		if (typeof name.name !== 'string') return false;
+		// JSX semantics (Babel/TS `isCompatTag`): an identifier tag is a HOST
+		// string tag only when it starts with a lowercase ASCII letter (or isn't
+		// a plain identifier, e.g. `<my-element>`); everything else — `<Foo>`,
+		// `<_Inner>`, `<$Inner>` — is a component REFERENCE.
+		return !/^[a-z]/.test(name.name) && !name.name.includes('-');
 	}
 	return false;
 }
@@ -6158,6 +8131,9 @@ function makeCompCall(
 		// Compile children as a render function: (scope) => { renders JSX into scope }.
 		// The function is inlined inside the parent component body so its closures
 		// capture the parent's locals (props, state, etc.).
+		// Phase 2 NOTE: children render-fns stay INLINE (envNames=null) — they are
+		// invoked through props (childrenAsBody / render-prop checks), not through
+		// a construct block, so there is no block.extra channel for captures.
 		const childrenHelperName = hoistBodyHelper(
 			ctx,
 			inlinedSubs,
@@ -6166,8 +8142,14 @@ function makeCompCall(
 			[],
 			parentNs,
 			cssHash,
+			null,
 		);
-		propParts.push(`"children": ${childrenHelperName}`);
+		// Tag the children-block render fn so a consumer can tell it from a render-prop
+		// function child (`<C>{(x) => …}</C>`, passed RAW above) — both are `typeof === 'function'`,
+		// so React-ecosystem `typeof children === 'function'` checks need `isChildrenBlock` to
+		// exclude compiled element/text children. See runtime `markChildrenBlock`/`isChildrenBlock`.
+		ctx.runtimeNeeded.add('markChildrenBlock');
+		propParts.push(`"children": _$markChildrenBlock(${childrenHelperName})`);
 	}
 
 	const propsExpr = `{ ${propParts.join(', ')} }`;
@@ -6185,18 +8167,29 @@ function makeCompCall(
 	// client mount — no `comp`/`/comp` markers. (Lite components are already
 	// markerless, so this only matters for the full path.)
 	let singleRoot = false;
+	// maybeSingleRoot: the call site qualifies syntactically but the callee is
+	// CROSS-MODULE (not in componentInfo) — emit the `2` sentinel so the runtime
+	// elides iff the callee carries the definition-site `$$singleRoot` stamp
+	// (docs/comment-marker-elision-plan.md M1).
+	let maybeSingleRoot = false;
 	if (ctx.componentInfo && keyExpr == null) {
 		const tagName = node.openingElement?.name || node.id || node.name;
 		const isBareIdent =
 			tagName && (tagName.type === 'Identifier' || tagName.type === 'JSXIdentifier');
 		if (isBareIdent) {
+			const hasSpread = propParts.some((p) => p.startsWith('...'));
+			const hasChildrenProp = propParts.some((p) => p.startsWith('"children":'));
+			const callSiteOk = !hasSpread && !hasChildrenProp;
 			const calleeInfo = ctx.componentInfo.get(compExpr);
 			if (calleeInfo) {
-				const hasSpread = propParts.some((p) => p.startsWith('...'));
-				const hasChildrenProp = propParts.some((p) => p.startsWith('"children":'));
-				const callSiteOk = !hasSpread && !hasChildrenProp;
 				if (calleeInfo.eligible) liteEligible = callSiteOk;
 				else if (calleeInfo.singleRoot) singleRoot = callSiteOk;
+			} else if (ctx.importedNames !== undefined && ctx.importedNames.has(compExpr)) {
+				// IMPORTED bindings only: immutable identity for the slot's whole
+				// life. A local variable callee (`const Comp = cond ? A : B`) can
+				// change identity per render — the markerless regime must not be
+				// pinned to whichever component happened to mount first.
+				maybeSingleRoot = callSiteOk;
 			}
 		}
 	}
@@ -6209,6 +8202,7 @@ function makeCompCall(
 		keyExpr,
 		liteEligible,
 		singleRoot,
+		maybeSingleRoot,
 		loc: devLoc(ctx, node),
 	};
 }
@@ -6220,31 +8214,16 @@ function makeCompCall(
 function makeTryCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 	// node.block = try BlockStatement, node.handler = CatchClause (param, resetParam, body),
 	// node.pending = optional BlockStatement (TSRX `pending { ... }`)
-	const tryHelperName = hoistBodyHelper(
-		ctx,
-		inlinedSubs,
-		'__try',
-		node.block.body,
-		[],
-		parentNs,
-		cssHash,
-	);
-
-	// Optional `pending { ... }` arm — compiled like any sub-body.
-	let pendingHelperName = 'null';
-	if (node.pending && node.pending.body && node.pending.body.length > 0) {
-		pendingHelperName = hoistBodyHelper(
-			ctx,
-			inlinedSubs,
-			'__pending',
-			node.pending.body,
-			[],
-			parentNs,
-			cssHash,
-		);
-	}
-
-	let catchHelperName = 'null';
+	//
+	// Phase 2: one shared env tuple for try/pending/catch (see unionEnv). The
+	// catch body's `err`/`reset` destructure (from its own `__props` param) is
+	// built FIRST and included in its analyzed statements, so those bind as
+	// locals, not captures.
+	const tryStmts = node.block.body;
+	const pendingStmts =
+		node.pending && node.pending.body && node.pending.body.length > 0 ? node.pending.body : null;
+
+	let catchBodyStmts = null;
 	if (node.handler) {
 		const handler = node.handler;
 		const errName = handler.param?.name || '_err';
@@ -6287,19 +8266,58 @@ function makeTryCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 				},
 			],
 		};
+		catchBodyStmts = [destructure, ...catchStmts];
+	}
+
+	const catchParams = [{ type: 'Identifier', name: '__props' }];
+	const envNames = unionEnv(ctx, [
+		{ stmts: tryStmts, params: [] },
+		pendingStmts && { stmts: pendingStmts, params: [] },
+		catchBodyStmts && { stmts: catchBodyStmts, params: catchParams },
+	]);
+
+	const tryHelperName = hoistBodyHelper(
+		ctx,
+		inlinedSubs,
+		'__try',
+		tryStmts,
+		[],
+		parentNs,
+		cssHash,
+		envNames,
+	);
+
+	let pendingHelperName = 'null';
+	if (pendingStmts) {
+		pendingHelperName = hoistBodyHelper(
+			ctx,
+			inlinedSubs,
+			'__pending',
+			pendingStmts,
+			[],
+			parentNs,
+			cssHash,
+			envNames,
+		);
+	}
+
+	let catchHelperName = 'null';
+	if (catchBodyStmts) {
 		catchHelperName = hoistBodyHelper(
 			ctx,
 			inlinedSubs,
 			'__catch',
-			[destructure, ...catchStmts],
-			[{ type: 'Identifier', name: '__props' }],
+			catchBodyStmts,
+			catchParams,
 			parentNs,
 			cssHash,
+			envNames,
 		);
 	}
 	return {
 		id: ctx.nextHelperId++,
 		loc: devLoc(ctx, node),
+		envNames,
 		tryHelper: tryHelperName,
 		catchHelper: catchHelperName,
 		pendingHelper: pendingHelperName,
@@ -6321,6 +8339,11 @@ function makeSwitchCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = nul
 	const discExpr = printExpr(node.discriminant);
 	const caseRecords = [];
 	let defaultHelper = 'null';
+	// Phase 2: one shared env tuple across every case + default (see unionEnv).
+	const envNames = unionEnv(
+		ctx,
+		(node.cases || []).map((c) => ({ stmts: c.consequent || [], params: [] })),
+	);
 	for (const c of node.cases || []) {
 		const stmts = c.consequent || [];
 		const isDefault = c.test == null;
@@ -6332,6 +8355,7 @@ function makeSwitchCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = nul
 			[],
 			parentNs,
 			cssHash,
+			envNames,
 		);
 		if (isDefault) {
 			defaultHelper = helperName;
@@ -6346,6 +8370,7 @@ function makeSwitchCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = nul
 		loc: devLoc(ctx, node),
 		discExpr,
 		discNode: node.discriminant, // AST — the fold threads it as a `props.hN` hole
+		envNames,
 		casesArrayExpr,
 		caseRecords, // { testNode, helper } per case — the fold builds the cases hole
 		defaultHelper,
@@ -6378,11 +8403,11 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 	// items.length === 0 the runtime mounts the empty branch in place of the
 	// (empty) item list; transitioning items → 0 unmounts the chain and mounts
 	// the empty body, and 0 → items does the reverse.
-	let emptyHelperName = 'null';
-	if (node.empty) {
-		const stmts = node.empty.type === 'BlockStatement' ? node.empty.body : [node.empty];
-		emptyHelperName = hoistBodyHelper(ctx, inlinedSubs, '__empty', stmts, [], parentNs, cssHash);
-	}
+	const emptyStmts = node.empty
+		? node.empty.type === 'BlockStatement'
+			? node.empty.body
+			: [node.empty]
+		: null;
 	const leftDeclId = node.left.declarations[0].id;
 	const isDestructured = leftDeclId.type !== 'Identifier';
 	// `itemName` is the identifier used in the body signature + keyFn. For a
@@ -6523,19 +8548,51 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 			}
 		}
 		const hasNestedComp = containsComponentCallOrControlFlow(subStmts);
-		pure = !hasParentClosure && !hasHook && !hasNestedComp;
-		depEligible = !pure && hasParentClosure && !hasHook && !hasNestedComp;
+		// A render-time CALL disqualifies the survivor short-circuit entirely: the
+		// call can read state neither the item ref nor the deps tuple witnesses
+		// (`header.column.getIsSorted()` flips while `header` stays the memoized
+		// object), so a skipped body would render stale output — React re-runs
+		// bodies unconditionally. Property reads stay eligible (the measured
+		// js-framework-benchmark/dbmon wins are read-only bodies).
+		const hasRenderCall = containsRenderCall(subStmts);
+		pure = !hasParentClosure && !hasHook && !hasNestedComp && !hasRenderCall;
+		depEligible = !pure && hasParentClosure && !hasHook && !hasNestedComp && !hasRenderCall;
 		depNames.sort();
 	}
 
+	// Phase 2: ONE env tuple shared by the item + @empty helpers — it IS the
+	// forBlock `deps` array (deps was already the captured-locals snapshot for
+	// dep-pure promotion; the runtime additionally stamps it as `block.extra`
+	// on every item/empty block). The union may widen deps with @empty-only
+	// captures — a conservative, correct deps for promotion purposes.
+	const itemAllStmts = [...indexInjection, ...destructureInjection, ...subStmts];
+	const itemParams = [{ type: 'Identifier', name: itemName }];
+	const envNames = unionEnv(ctx, [
+		{ stmts: itemAllStmts, params: itemParams },
+		emptyStmts && { stmts: emptyStmts, params: [] },
+	]);
+	let emptyHelperName = 'null';
+	if (emptyStmts) {
+		emptyHelperName = hoistBodyHelper(
+			ctx,
+			inlinedSubs,
+			'__empty',
+			emptyStmts,
+			[],
+			parentNs,
+			cssHash,
+			envNames,
+		);
+	}
 	const itemHelperName = hoistBodyHelper(
 		ctx,
 		inlinedSubs,
 		'__item',
-		[...indexInjection, ...destructureInjection, ...subStmts],
-		[{ type: 'Identifier', name: itemName }],
+		itemAllStmts,
+		itemParams,
 		parentNs,
 		cssHash,
+		envNames,
 	);
 
 	// Single-root detection: when the body emits exactly one Element root and
@@ -6565,11 +8622,12 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		bodyHelper: itemHelperName,
 		pure,
 		singleRoot,
-		// DEP-PURE candidates emit `[dep0, dep1, ...]` as the deps arg in the
-		// forBlock call. Reconciler compares to its cached deps; if unchanged
-		// this render, treats the body as PURE for the survivor short-circuit.
+		// The env union doubles as the deps array: emitted whenever the helpers
+		// capture anything (Phase 2 — the runtime stamps it as block.extra), and
+		// ALSO compared for the dep-pure survivor short-circuit when depEligible.
+		// depNames must be exactly the tuple layout the helpers destructure.
 		depEligible,
-		depNames,
+		depNames: envNames || depNames,
 		// True only when the header binds NO `index <name>` — the body then can't
 		// observe an item's position, so a pure reorder (same item ref, position
 		// changed) need not re-render the survivor. Conservative: an index binding