octane 0.2.6 → 0.2.8

package/dist/compiler/compile.js

@@ -81,13 +81,18 @@ import { assertNoLiveClientOnlyImports } from './client-only-server.js';
 import { nsForChildren, nsForSelf } from './jsx-namespace.js';
 import { analyzeNativeChangeDiagnostics } from './native-change-diagnostics.js';
 import { assertStrongMode } from './strong-mode.js';
-import { assertNativeReadDiagnostics, assertNativeReadOptions } from './native-read-diagnostics.js';
+import {
+	assertNativeReadDiagnostics,
+	assertNativeReadOptions,
+	nativeReadOptions,
+} from './native-read-diagnostics.js';
 import {
 	captureNativeReadWitness,
 	wrapNativeReadScope,
 	wrapNativeWarmScope,
 } from './native-read-codegen.js';
 import { createTextTypeFactsLookup } from './text-type-facts.js';
+import { collectProvenContextBindings, isProvenContextUse } from './context-use.js';
 import { applyCssModuleConstants } from './css-module-constants.js';
 import { assertUniversalRuntimeTarget, normalizeUniversalRuntime } from './universal-runtime.js';
 
@@ -444,8 +449,8 @@ function attrBindingHelper(bind) {
 // repeating the guard and previous-value publication in every component.
 // Certified repeated host rows select the ordinary writer and emit an inline
 // guard instead, avoiding a call and cache publication on unchanged rows.
-// Fresh classes deliberately remain unguarded; controlled form properties
-// likewise must reassert the live DOM value on every render.
+// Fresh classes compare their composed string in emitBindingUpdate; controlled
+// form properties must reassert the live DOM value on every render.
 function attrBindingUpdateHelper(bind, inlineBindingGuards = false) {
 	const helper = attrBindingHelper(bind);
 	if (inlineBindingGuards) return helper;
@@ -456,7 +461,11 @@ function attrBindingUpdateHelper(bind, inlineBindingGuards = false) {
 		case 'ariaAttr':
 			return `${helper}IfChanged`;
 		case 'class':
-			return bind.fresh ? helper : `${helper}IfChanged`;
+			return bind.fresh
+				? bind.ns && bind.ns !== 'html'
+					? 'updateFreshClassAttr'
+					: 'updateFreshClassName'
+				: `${helper}IfChanged`;
 		default:
 			return helper;
 	}
@@ -1172,6 +1181,8 @@ const INTERNAL_CLIENT_RUNTIME_HELPERS = new Set([
 	'setAriaAttributeIfChanged',
 	'setClassNameIfChanged',
 	'setClassAttrIfChanged',
+	'updateFreshClassName',
+	'updateFreshClassAttr',
 	'textHoleUpdate',
 	'childTextHoleUpdate',
 	...HOOK_MEMO_RUNTIME_HELPERS,
@@ -5100,7 +5111,9 @@ function collectImmutableModuleFunctions(body) {
 	const declared = new Map();
 	for (const statement of body) {
 		const declaration =
-			statement.type === 'ExportNamedDeclaration' ? statement.declaration : statement;
+			statement.type === 'ExportNamedDeclaration' || statement.type === 'ExportDefaultDeclaration'
+				? statement.declaration
+				: statement;
 		if (declaration?.type === 'FunctionDeclaration' && declaration.id?.type === 'Identifier') {
 			declared.set(declaration.id.name, declaration);
 		}
@@ -5115,10 +5128,31 @@ function collectImmutableModuleFunctions(body) {
 		}
 		if (seen.has(n)) return;
 		seen.add(n);
-		if (n.type === 'AssignmentExpression' && n.left?.type === 'Identifier') {
-			declared.delete(n.left.name);
-		} else if (n.type === 'UpdateExpression' && n.argument?.type === 'Identifier') {
-			declared.delete(n.argument.name);
+		const writeTarget =
+			n.type === 'AssignmentExpression'
+				? n.left
+				: n.type === 'UpdateExpression'
+					? n.argument
+					: n.type === 'VariableDeclarator'
+						? n.id
+						: (n.type === 'ForOfStatement' || n.type === 'ForInStatement') &&
+							  n.left?.type !== 'VariableDeclaration'
+							? n.left
+							: null;
+		if (writeTarget?.type === 'Identifier') {
+			declared.delete(writeTarget.name);
+		} else if (writeTarget !== null) {
+			const names = new Set();
+			collectPatternNames(unwrapTsExpr(writeTarget), names);
+			for (const name of names) declared.delete(name);
+		} else if (
+			n.type === 'CallExpression' &&
+			unwrapTsExpr(n.callee)?.type === 'Identifier' &&
+			unwrapTsExpr(n.callee).name === 'eval'
+		) {
+			// Direct eval can write a module function binding without a visible
+			// assignment node. Exclude those names from identity proofs.
+			declared.clear();
 		}
 		for (const key in n) {
 			if (AST_WALK_SKIP_KEYS.has(key)) continue;
@@ -8586,7 +8620,7 @@ function instrumentProfileComponents(ast, ctx) {
  * Compile a .tsrx source string into JS targeting `octane`.
  * @param {string} source
  * @param {string} filename
- * @param {{ hmr?: boolean | 'vite' | 'webpack', mode?: 'client' | 'server', dev?: boolean, strong?: boolean, profile?: boolean, profileFilename?: string, autoMemo?: boolean, inlineHookMemo?: boolean, dataCallbackHooks?: readonly string[], valdiWriterFacts?: import('./compile-valdi.js').ValdiWriterFacts, textTypeFacts?: { version: 1, filename: string, sourceVersion: string, projectVersion: string, stringChildRanges: readonly (readonly [number, number])[] }, renderer?: { id: string, module: string, target: 'dom' | 'universal' | 'valdi', server?: string }, rendererBoundaries?: Readonly<Record<string, Readonly<Record<string, { ownerRenderer: string, childRenderer: string, prop: string, server?: string }>>>>, rendererRegistry?: Readonly<Record<string, { module: string, target: 'dom' | 'universal' | 'valdi', server?: string }>>, clientOnlyImports?: readonly unknown[], __hydratePrepared?: boolean, __hydrateBoundaryModule?: boolean, __nativeChangeDiagnostics?: readonly unknown[], __nativeChangeAnalysis?: { diagnostics: readonly unknown[], classifications: Map<number, string> } }} [options] —
+ * @param {{ hmr?: boolean | 'vite' | 'webpack', mode?: 'client' | 'server', dev?: boolean, strong?: boolean, profile?: boolean, profileFilename?: string, autoMemo?: boolean, inlineHookMemo?: boolean, dataCallbackHooks?: readonly string[], valdiWriterFacts?: import('./compile-valdi.js').ValdiWriterFacts, textTypeFacts?: { version: 1, filename: string, sourceVersion: string, projectVersion: string, stringChildRanges: readonly (readonly [number, number])[], primitiveTextChildRanges?: readonly (readonly [number, number])[] }, renderer?: { id: string, module: string, target: 'dom' | 'universal' | 'valdi', server?: string }, rendererBoundaries?: Readonly<Record<string, Readonly<Record<string, { ownerRenderer: string, childRenderer: string, prop: string, server?: string }>>>>, rendererRegistry?: Readonly<Record<string, { module: string, target: 'dom' | 'universal' | 'valdi', server?: string }>>, clientOnlyImports?: readonly unknown[], __hydratePrepared?: boolean, __hydrateBoundaryModule?: boolean, __nativeChangeDiagnostics?: readonly unknown[], __nativeChangeAnalysis?: { diagnostics: readonly unknown[], classifications: Map<number, string> } }} [options] —
  *   `dev: true` emits client hydration source-location metadata (per-component
  *   `__s.locs`/`__s.locFile`) and, in server mode, source-located native-element
  *   scopes for invalid HTML nesting diagnostics. Both are strictly gated so
@@ -8634,7 +8668,6 @@ export function compileForBundler(source, filename, options) {
 }
 
 function compileAuthored(source, filename, options, bundlerMetadata) {
-	assertNativeReadOptions(options);
 	const mode = (options && options.mode) || 'client';
 	if (mode !== 'client' && mode !== 'server') {
 		throw new Error(`Unknown compile mode "${mode}" — expected 'client' or 'server'.`);
@@ -8645,6 +8678,7 @@ function compileAuthored(source, filename, options, bundlerMetadata) {
 	);
 	analyzeTsrx(analyzedAst, cleanFilename);
 	adoptParserAst(analyzedAst);
+	options = nativeReadOptions(analyzedAst, options);
 	assertNativeReadDiagnostics(analyzedAst, source, cleanFilename, options);
 	const strongModeEnabled =
 		assertStrongMode(analyzedAst, source, cleanFilename, options)?.enabled === true;
@@ -9175,6 +9209,7 @@ function compileInternal(
 		ctx.octaneImportLocals = imports.locals;
 		ctx.octaneImportNamespaces = imports.namespaces;
 		ctx.foreignImportLocals = imports.foreignLocals;
+		ctx.provenContextBindings = collectProvenContextBindings(ast);
 		ctx.activityModuleAst = ast;
 	}
 	if (ctx.dev) {
@@ -10446,6 +10481,7 @@ function compileServer(
 		ctx.octaneImportLocals = imports.locals;
 		ctx.octaneImportNamespaces = imports.namespaces;
 		ctx.foreignImportLocals = imports.foreignLocals;
+		ctx.provenContextBindings = collectProvenContextBindings(ast);
 		ctx.activityModuleAst = ast;
 	}
 	// M3 inherit-range exclusion set — must match the client compile's
@@ -11050,7 +11086,7 @@ function ssrCompileBodyWithMapTemps(
 // produce mergeable text nodes:
 //   'static' — a static string-literal Text (bakes / serializes as literal text)
 //   'empty'  — a static literal that renders NOTHING (adjacency-transparent)
-//   'dyn'    — a known-string dynamic text hole (client `<!>` + htextSwap,
+//   'dyn'    — a proven primitive text hole (client `<!>` + htextSwap,
 //              server markerless ssrText)
 //   'other'  — everything else (elements, renderable `{expr}` holes, control
 //              flow — all serialize elements or `<!--[-->…<!--]-->` ranges
@@ -11059,9 +11095,7 @@ function textAdjacencyKind(node, ctx) {
 	if (node.type !== 'Text') return 'other';
 	const lit = staticTextLiteral(node.expression);
 	if (lit !== null) return lit === '' ? 'empty' : 'static';
-	return isKnownStringChildExpression(node.expression, ctx.knownStringChildLocals)
-		? 'dyn'
-		: 'other';
+	return isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals) ? 'dyn' : 'other';
 }
 
 // Does the child at `i` have a text-producing sibling next to it (looking
@@ -11361,13 +11395,14 @@ function ssrEmitNode(
 						: null,
 				);
 			}
-			// `{x as string}` / literals / templates / `+`-concats → definite TEXT.
+			// String assertions / templates / string concats / proven numeric results
+			// → a text binding on both client and server.
 			// Everything else (`{children}`, `{<Comp/>}`, possibly-renderable values)
 			// → ssrChild, which RENDERS a component/element child (and coerces a
 			// primitive to text) — mirrors Ripple's `{expr}` vs `{expr as string}`.
 			// rewriteHookCalls: a `use(thenable)` in this hole bypasses the setup
 			// rewrite, so key it here too (else it collides with sibling/nested use()).
-			if (isKnownStringChildExpression(expr, ctx.knownStringChildLocals)) {
+			if (isKnownTextChildExpression(expr, ctx.knownStringChildLocals)) {
 				// ssrTextPre = ssrText + the runtime leading-'\n' protection (the value
 				// isn't known at compile time here).
 				const fn =
@@ -12253,7 +12288,7 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 	// markerless `childTextHole` mount: a primitive is the host's bare text, an object
 	// still gets a `<!--[-->…<!--]-->` block). Must match the client's only-child
 	// markerless condition exactly so both sides agree for hydration: a single `Text`
-	// child that is neither a static literal (baked into HTML) nor a known string
+	// child that is neither a static literal (baked into HTML) nor proven text
 	// (emitted via `ssrText`).
 	const onlyChild0 =
 		normChildren.length === 1 && normChildren[0].type === 'Text' ? normChildren[0] : null;
@@ -12265,7 +12300,7 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		htmlSources.length === 0 &&
 		onlyChild0 !== null &&
 		staticTextLiteral(onlyChild0.expression) === null &&
-		!isKnownStringChildExpression(onlyChild0.expression, ctx.knownStringChildLocals)
+		!isKnownTextChildExpression(onlyChild0.expression, ctx.knownStringChildLocals)
 	) {
 		const childHelper =
 			tag === 'pre' || tag === 'textarea' || tag === 'listing' ? 'ssrChildTextPre' : 'ssrChildText';
@@ -14027,6 +14062,7 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 		ctx.inlineHookMemo && ctx.mode !== 'server' && ctx._universalRuntimeUnit == null;
 	ctx._puInlineLowering = inlineLowering;
 	let warmThunk = null;
+	let staticChildOnly = false;
 	if (options && options.autoCallback) {
 		const creations = [];
 		const warmChildren = [];
@@ -14085,9 +14121,21 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 		jsxNodes = parallelUseWalkJsx(jsxNodes, ctx, name, creations, warmChildren, [], new Set());
 		const warm = buildWarmArtifacts(node, ctx, name, creations, warmChildren);
 		warmThunk = warm.thunk;
+		staticChildOnly = warm.staticChildOnly === true;
 		ctx._pendingWarm = warm.warmNode;
 	}
-	workingStatements = rewriteParallelUse(workingStatements, ctx, name, warmThunk);
+	workingStatements = rewriteParallelUse(
+		workingStatements,
+		ctx,
+		name,
+		warmThunk,
+		staticChildOnly &&
+			ctx.mode !== 'server' &&
+			ctx._universalRuntimeUnit == null &&
+			ctx.moduleFunctionDeclarations.get(name)?.start === node.start
+			? staticChildWarmPlanProps(node, name)
+			: null,
+	);
 
 	// De-callback the hook memo tier (production client compile). Authored and
 	// auto-generated useMemo/useCallback declarations become inline flat-cache
@@ -14813,6 +14861,7 @@ function transformUniversalParallelUse(ast, ctx, metadata) {
 // Names bound by a binding pattern (params, declarator ids). Mirrors the
 // pattern handling of collectFreeIdentifiers' collectBindings.
 function collectPatternNames(pat, into) {
+	pat = unwrapTsExpr(pat);
 	if (!pat) return into;
 	switch (pat.type) {
 		case 'Identifier':
@@ -14929,10 +14978,8 @@ function isMountStableInlineHandler(node, ctx) {
 	return true;
 }
 
-// Object/array/function literals allocate a new identity on every evaluation,
-// so an identity diff can never skip their update. This currently feeds the
-// class binding path, where dropping the dead previous-value field preserves
-// the exact setter frequency while shrinking both code and the binding bag.
+// Object/array/function literals allocate a new identity on every evaluation.
+// Class bindings compare their composed string instead of that fresh identity.
 function isFreshBindingExpr(node) {
 	const value = unwrapTsExpr(node);
 	return (
@@ -16114,8 +16161,61 @@ function isWarmSafeExpr(expr, paramNames, componentLocals, armLocals) {
 	return true;
 }
 
+// The registration records props now and invokes the already-attached module
+// plan only if a descendant suspends. A reassigned parameter would differ from
+// the old thunk's live lexical capture, including writes in JSX expressions or
+// nested callbacks. A same-name write in a shadowed scope merely declines the
+// optimization. Dynamic bindings are conservatively excluded as well.
+function staticChildWarmPlanProps(node, componentName) {
+	const params = node.params || [];
+	if (params.length > 1 || (params.length === 1 && params[0].type !== 'Identifier')) {
+		return null;
+	}
+	const name = params[0]?.name ?? null;
+	if (name === componentName) return null;
+	const seen = new WeakSet();
+	const bindsName = (pattern, binding) => {
+		if (binding === null || pattern === null) return false;
+		if (pattern.type === 'Identifier') return pattern.name === binding;
+		const names = new Set();
+		collectPatternNames(unwrapTsExpr(pattern), names);
+		return names.has(binding);
+	};
+	const unsafe = (value) => {
+		if (value === null || typeof value !== 'object') return false;
+		if (Array.isArray(value)) return value.some(unsafe);
+		if (seen.has(value)) return false;
+		seen.add(value);
+		if (
+			(value.type === 'AssignmentExpression' && bindsName(value.left, name)) ||
+			(value.type === 'UpdateExpression' && bindsName(value.argument, name)) ||
+			(value.type === 'VariableDeclarator' &&
+				(bindsName(value.id, name) || bindsName(value.id, componentName))) ||
+			((value.type === 'FunctionDeclaration' || value.type === 'ClassDeclaration') &&
+				value.id?.name === componentName) ||
+			(value.type === 'CatchClause' && bindsName(value.param, componentName)) ||
+			((value.type === 'ForOfStatement' || value.type === 'ForInStatement') &&
+				bindsName(value.left, name)) ||
+			(value.type === 'CallExpression' &&
+				unwrapTsExpr(value.callee)?.type === 'Identifier' &&
+				unwrapTsExpr(value.callee).name === 'eval') ||
+			(value.type === 'Identifier' && value.name === 'arguments') ||
+			value.type === 'ThisExpression' ||
+			value.type === 'Super' ||
+			value.type === 'MetaProperty'
+		) {
+			return true;
+		}
+		for (const key in value) {
+			if (!AST_WALK_SKIP_KEYS.has(key) && unsafe(value[key])) return true;
+		}
+		return false;
+	};
+	return unsafe(node.body) ? null : name === null ? b.unary('void', b.literal(0, '0')) : b.id(name);
+}
+
 // ── Pass B: run detection + hoist + batch ───────────────────────────────────
-function rewriteParallelUse(statements, ctx, componentName, warmThunk) {
+function rewriteParallelUse(statements, ctx, componentName, warmThunk, staticPlanProps = null) {
 	let firstBatch = true;
 	const output = transformList(statements);
 	if (warmThunk) {
@@ -16125,17 +16225,57 @@ function rewriteParallelUse(statements, ctx, componentName, warmThunk) {
 		// setup preserves early-return reachability: an alternate returned tree must
 		// not activate the final template's plan. The first direct batch receives the
 		// same thunk below so it can still warm before setup reaches this registration.
-		const batchHelper = ctx.mode === 'server' ? 'puBatch' : 'useBatch';
-		const batchAlias = requireRuntimeForContext(ctx, batchHelper);
-		const registration = inheritOriginLoc(
-			b.stmt(b.call(batchAlias, b.array([]), warmThunk)),
+		// Only the DOM client has registerWarmPlan. Its two-argument form pushes
+		// the same block, thunk, and undefined props as an empty useBatch call,
+		// without creating an array on every render. Server and universal units
+		// continue to use their own batch helpers.
+		const fallbackHelper =
+			ctx.mode === 'client' && ctx._universalRuntimeUnit == null
+				? 'registerWarmPlan'
+				: ctx.mode === 'server'
+					? 'puBatch'
+					: 'useBatch';
+		const fallback = inheritOriginLoc(
+			b.stmt(
+				fallbackHelper === 'registerWarmPlan'
+					? b.call(
+							requireRuntimeForContext(ctx, fallbackHelper),
+							warmThunk,
+							b.unary('void', b.literal(0, '0')),
+						)
+					: b.call(requireRuntimeForContext(ctx, fallbackHelper), b.array([]), warmThunk),
+			),
 			warmThunk,
 		);
+		let registration = [fallback];
+		if (staticPlanProps !== null) {
+			// Hoisted functions can render before the module-tail markWarm stamp,
+			// and route extraction can leave that stamp behind. Only the common
+			// attached-plan path may omit the in-body closure and array.
+			const planName = allocCompilerName(ctx, '__warmPlan');
+			registration = [
+				inheritOriginLoc(b.const(planName, b.member(b.id(componentName), '__warm')), warmThunk),
+				inheritOriginLoc(
+					b.if(
+						b.binary('===', b.unary('typeof', b.id(planName)), b.literal('function', "'function'")),
+						b.stmt(
+							b.call(
+								requireRuntimeForContext(ctx, 'registerWarmPlan'),
+								b.id(planName),
+								staticPlanProps,
+							),
+						),
+						fallback,
+					),
+					warmThunk,
+				),
+			];
+		}
 		const finalIndex =
 			output.length > 0 && output[output.length - 1].type === 'ReturnStatement'
 				? output.length - 1
 				: output.length;
-		output.splice(finalIndex, 0, registration);
+		output.splice(finalIndex, 0, ...registration);
 	}
 	return output;
 
@@ -16229,6 +16369,19 @@ function rewriteParallelUse(statements, ctx, componentName, warmThunk) {
 			for (const m of run.members) out.push(m.stmt);
 			return;
 		}
+		if (
+			uses.every(
+				(m) =>
+					m.call._octaneImportedHook === 'use' &&
+					isProvenContextUse(m.creation, ctx.provenContextBindings),
+			)
+		) {
+			// Context reads cannot suspend. Preserve the authored statements in
+			// their original order, and leave the first warm thunk available for
+			// the next real data batch. The trailing child-only registration stays.
+			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.
@@ -16419,7 +16572,19 @@ function buildWarmArtifacts(node, ctx, componentName, creations, warmChildren) {
 			node,
 		);
 	}
-	return { thunk, warmNode };
+	return {
+		thunk,
+		warmNode,
+		// The module plan contains own creations before child calls. Reuse it
+		// for this component's registration only when it is child-only like the
+		// original thunk; otherwise a descendant suspend could refetch its own
+		// earlier memo. Memoized child props stay on the existing path too.
+		staticChildOnly:
+			warmNode !== null &&
+			thunk !== null &&
+			warmMemos.length === 0 &&
+			warmKids.every((child) => child.props.every((prop) => prop.memo == null)),
+	};
 }
 
 // ===========================================================================
@@ -18348,22 +18513,24 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 			}
 			const hn = `h${holeProps.length}`;
 			if (expr && expr.type === 'TSAsExpression') {
-				// Preserve the `as T` cast in the renderer (it marks a dynamic TEXT hole).
+				// Preserve explicit string assertions. Numeric assertions and typed
+				// primitive proofs need a synthetic text assertion on the renderer's
+				// `props.hN` because it cannot see the original expression's proof.
 				holeProps.push(objectProp(hn, rewriteExtractedFragmentHole(expr.expression, ctx, childNs)));
+				const annotation = isKnownTextChildExpression(expr, ctx.knownStringChildLocals)
+					? b.ts_keyword_type('string')
+					: expr.typeAnnotation;
 				newChildren.push(
-					b.jsx_expression_container(
-						b.ts_as(memberProps(hn, expr.expression), expr.typeAnnotation),
-					),
+					b.jsx_expression_container(b.ts_as(memberProps(hn, expr.expression), annotation)),
 				);
 			} else {
 				holeProps.push(objectProp(hn, rewriteExtractedFragmentHole(expr, ctx, childNs)));
-				// A hole the compiler proved is a string (concat / template / tracked
-				// local) is a TEXT hole — but the renderer only sees `props.hN`, which it
-				// can't prove. Re-assert it with an `as string` cast so the renderer keeps
-				// the text-binding classification (htext, markerless) instead of falling to
-				// a renderable childSlot, preserving byte-equality with the inline form.
+				// The renderer only sees `props.hN`, so it cannot rediscover an inline
+				// string or primitive-number proof. This synthetic cast preserves the
+				// text binding across extraction; it is stripped from emitted JS and
+				// does not change the authored expression or its runtime value.
 				const member = memberProps(hn, expr);
-				const rendered = isKnownStringChildExpression(expr, ctx.knownStringChildLocals)
+				const rendered = isKnownTextChildExpression(expr, ctx.knownStringChildLocals)
 					? b.ts_as(member, b.ts_keyword_type('string'))
 					: member;
 				newChildren.push(b.jsx_expression_container(rendered));
@@ -20563,15 +20730,14 @@ function headElementArgNodes(node, index, ctx) {
 	];
 }
 
-// A Float style resource ships its authored CSS verbatim-by-meaning: the parsed
-// StyleSheet re-renders WITHOUT the scoping pipeline (no analyze/prepare), so
-// selectors and rules come out unscoped. Serialization normalizes whitespace,
-// which is invisible to the resource contract (identity is the href).
+// Float resources contain global CSS. Preserve the parser's CSS source rather
+// than sending it through the scoped stylesheet renderer, which prunes unused
+// selectors and renames keyframes even without the scoping analysis pass.
 /** @param {any} el @returns {any} */
 function styleResourceCssExpression(el) {
 	const sheet = (el.children || []).find((c) => c && c.type === 'StyleSheet');
 	if (!sheet) return b.literal('');
-	const css = renderStylesheets([cloneAstNode(sheet)]);
+	const css = sheet.source;
 	return b.literal(css, JSON.stringify(css), el);
 }
 
@@ -21180,17 +21346,30 @@ function staticTextLiteral(node) {
 // to inherit a type proof. Ordinary copy-on-write expression rewrites preserve
 // the metadata, and extractFragment explicitly carries it onto its props hole.
 function applyStringChildProofs(ast, source, filename, facts) {
-	const typedRanges = createTextTypeFactsLookup(facts, filename, source);
+	const typeRanges = createTextTypeFactsLookup(facts, filename, source);
+	const typedRanges = typeRanges?.stringRanges ?? null;
+	const primitiveRanges = typeRanges?.primitiveRanges ?? null;
 	// Avoid another AST walk for the overwhelmingly common syntax-only module.
-	// Escaped identifiers can spell String too; declining a module without either
-	// spelling is safe, while the AST remains the authority for actual calls.
-	const inspectStringCalls = source.includes('String') || source.includes('\\u');
-	if ((typedRanges === null || typedRanges.size === 0) && !inspectStringCalls) return ast;
-	const remainingRanges = typedRanges;
-	const proofs = new Set();
-	const stringCalls = [];
+	// Escaped identifiers can spell these built-ins too. The AST remains the
+	// authority for calls; these substring checks only skip common files.
+	const inspectIntrinsicCalls =
+		source.includes('String') ||
+		source.includes('Number') ||
+		source.includes('BigInt') ||
+		source.includes('Date') ||
+		source.includes('\\u');
+	if (
+		(typedRanges === null || typedRanges.size === 0) &&
+		(primitiveRanges === null || primitiveRanges.size === 0) &&
+		!inspectIntrinsicCalls
+	) {
+		return ast;
+	}
+	const stringProofs = new Set();
+	const primitiveProofs = new Set();
+	const intrinsicCalls = [];
 	const writes = [];
-	let ambientStringValue = false;
+	const ambientIntrinsicValues = new Set();
 	const seen = new WeakSet();
 	const collect = (node, parent = null, key = null) => {
 		if (node === null || typeof node !== 'object') return;
@@ -21201,7 +21380,7 @@ function applyStringChildProofs(ast, source, filename, facts) {
 		if (seen.has(node)) return;
 		seen.add(node);
 		if (
-			remainingRanges !== null &&
+			(typedRanges !== null || primitiveRanges !== null) &&
 			node.type === 'JSXExpressionContainer' &&
 			((key === 'children' &&
 				(parent?.type === 'JSXElement' ||
@@ -21212,16 +21391,17 @@ function applyStringChildProofs(ast, source, filename, facts) {
 		) {
 			const expr = node.expression;
 			const range = `${expr?.start}:${expr?.end}`;
-			if (remainingRanges.delete(range)) proofs.add(expr);
+			if (typedRanges?.delete(range)) stringProofs.add(expr);
+			if (primitiveRanges?.delete(range)) primitiveProofs.add(expr);
 		}
-		if (inspectStringCalls) {
+		if (inspectIntrinsicCalls) {
 			if (
 				node.type === 'CallExpression' &&
 				node.optional !== true &&
 				node.callee?.type === 'Identifier' &&
-				node.callee.name === 'String'
+				TEXT_INTRINSICS.has(node.callee.name)
 			) {
-				stringCalls.push(node);
+				intrinsicCalls.push(node);
 			}
 			if (node.type === 'AssignmentExpression') writes.push(node.left);
 			else if (node.type === 'UpdateExpression') writes.push(node.argument);
@@ -21236,11 +21416,13 @@ function applyStringChildProofs(ast, source, filename, facts) {
 			// Ambient VALUE declarations can describe a replaced global. Type-only
 			// imports/interfaces do not shadow the JavaScript built-in.
 			if (node.type === 'TSDeclareFunction' || node.declare === true) {
-				if (node.id?.name === 'String') ambientStringValue = true;
+				if (TEXT_INTRINSICS.has(node.id?.name)) ambientIntrinsicValues.add(node.id.name);
 				if (node.type === 'VariableDeclaration') {
 					const names = new Set();
 					for (const declaration of node.declarations || []) collectBindings(declaration.id, names);
-					if (names.has('String')) ambientStringValue = true;
+					for (const name of names) {
+						if (TEXT_INTRINSICS.has(name)) ambientIntrinsicValues.add(name);
+					}
 				}
 			}
 		}
@@ -21251,33 +21433,43 @@ function applyStringChildProofs(ast, source, filename, facts) {
 		}
 	};
 	collect(ast);
-	if (remainingRanges !== null && remainingRanges.size !== 0) {
+	const remainingRange =
+		typedRanges?.values().next().value ?? primitiveRanges?.values().next().value;
+	if (remainingRange !== undefined) {
 		throw new Error(
-			`Invalid textTypeFacts for ${JSON.stringify(filename)}: range ${remainingRanges.values().next().value} is not an authored JSX child expression.`,
+			`Invalid textTypeFacts for ${JSON.stringify(filename)}: range ${remainingRange} is not an authored JSX child expression.`,
 		);
 	}
 	let lexical = null;
-	if (stringCalls.length > 0 || (proofs.size > 0 && writes.length > 0)) {
+	if (
+		intrinsicCalls.length > 0 ||
+		((stringProofs.size > 0 || primitiveProofs.size > 0) && writes.length > 0)
+	) {
 		// The existing scope analysis understands var hoisting, parameter defaults,
 		// imports, catch bindings, and TSRX @for/@try scopes. Pay for it only when
 		// an intrinsic candidate or a possible proof-invalidating write needs it.
 		lexical = createLexicalAnalysis(ast);
-		if (writes.some((target) => writesGlobalString(target, lexical))) {
-			// TypeScript still calls the global constructor's return type `string`
-			// after an asserted replacement. Decline ALL new child proofs in this
+		if (writes.some((target) => writesGlobalTextIntrinsic(target, lexical))) {
+			// TypeScript still uses a built-in constructor's declared primitive
+			// return type after an asserted replacement. Decline all new proofs in this
 			// rare module rather than attempting incomplete value-taint analysis.
 			// Supplied ranges were still validated above; explicit text syntax keeps
 			// its existing coercion meaning through isKnownStringExpression.
 			return ast;
 		}
 	}
-	if (lexical !== null && !ambientStringValue) {
-		for (const call of stringCalls) {
+	if (lexical !== null) {
+		for (const call of intrinsicCalls) {
+			const name = call.callee.name;
+			if (ambientIntrinsicValues.has(name)) continue;
 			const scope = lexical.nodeScopes.get(call);
-			if (scope !== undefined && !lexical.isBound(scope, 'String')) proofs.add(call);
+			if (scope !== undefined && !lexical.isBound(scope, name)) {
+				if (name === 'String' || name === 'Date') stringProofs.add(call);
+				else primitiveProofs.add(call);
+			}
 		}
 	}
-	if (proofs.size === 0) return ast;
+	if (stringProofs.size === 0 && primitiveProofs.size === 0) return ast;
 	const rewritten = new WeakMap();
 	const rewrite = (node) => {
 		if (node === null || typeof node !== 'object') return node;
@@ -21303,8 +21495,10 @@ function applyStringChildProofs(ast, source, filename, facts) {
 					out[key] = next;
 				}
 			}
-			if (proofs.has(node)) {
+			if (stringProofs.has(node)) {
 				out = { ...out, metadata: { ...out.metadata, octane_string_child: true } };
+			} else if (primitiveProofs.has(node)) {
+				out = { ...out, metadata: { ...out.metadata, octane_primitive_text_child: true } };
 			}
 		}
 		rewritten.set(node, out);
@@ -21313,10 +21507,12 @@ function applyStringChildProofs(ast, source, filename, facts) {
 	return rewrite(ast);
 }
 
-// A visible replacement of the global constructor invalidates intrinsic
-// recognition for the whole module. Calls still evaluate the authored callee;
-// do not silently turn a replacement's returned element into its string form.
-function writesGlobalString(target, lexical) {
+const TEXT_INTRINSICS = new Set(['String', 'Number', 'BigInt', 'Date']);
+
+// A visible replacement of a global constructor invalidates inferred text
+// proofs for the module. Calls still evaluate the authored callee: a replacement
+// may return an element rather than the built-in's primitive result.
+function writesGlobalTextIntrinsic(target, lexical) {
 	if (!target || typeof target !== 'object') return false;
 	if (
 		target.type === 'TSAsExpression' ||
@@ -21324,20 +21520,20 @@ function writesGlobalString(target, lexical) {
 		target.type === 'TSNonNullExpression' ||
 		target.type === 'ParenthesizedExpression'
 	) {
-		return writesGlobalString(target.expression, lexical);
+		return writesGlobalTextIntrinsic(target.expression, lexical);
 	}
 	const unbound = (node, name) => {
 		const scope = lexical.nodeScopes.get(node);
 		return scope !== undefined && !lexical.isBound(scope, name);
 	};
 	if (target.type === 'Identifier') {
-		return target.name === 'String' && unbound(target, 'String');
+		return TEXT_INTRINSICS.has(target.name) && unbound(target, target.name);
 	}
 	if (target.type === 'MemberExpression') {
 		const name = target.computed ? target.property?.value : target.property?.name;
 		const object = target.object;
 		return (
-			name === 'String' &&
+			TEXT_INTRINSICS.has(name) &&
 			object?.type === 'Identifier' &&
 			(object.name === 'globalThis' ||
 				object.name === 'window' ||
@@ -21346,14 +21542,14 @@ function writesGlobalString(target, lexical) {
 			unbound(object, object.name)
 		);
 	}
-	if (target.type === 'AssignmentPattern') return writesGlobalString(target.left, lexical);
-	if (target.type === 'RestElement') return writesGlobalString(target.argument, lexical);
+	if (target.type === 'AssignmentPattern') return writesGlobalTextIntrinsic(target.left, lexical);
+	if (target.type === 'RestElement') return writesGlobalTextIntrinsic(target.argument, lexical);
 	if (target.type === 'ArrayPattern') {
-		return (target.elements || []).some((element) => writesGlobalString(element, lexical));
+		return (target.elements || []).some((element) => writesGlobalTextIntrinsic(element, lexical));
 	}
 	if (target.type === 'ObjectPattern') {
 		return (target.properties || []).some((property) =>
-			writesGlobalString(property.argument ?? property.value, lexical),
+			writesGlobalTextIntrinsic(property.argument ?? property.value, lexical),
 		);
 	}
 	return false;
@@ -21366,6 +21562,7 @@ function writesGlobalString(target, lexical) {
 // Recognised shapes:
 //   - String Literal:               'foo' / "bar"
 //   - TemplateLiteral:               `${x}-${y}` (always coerces to string)
+//   - `typeof x`:                   always a string, even for unknown x
 //   - `as string` / `<string>x`:     user-asserted string-typed expression
 //   - `satisfies string`:            same intent
 //   - Wrappers (`!`, instantiation): peel and check inside
@@ -21380,6 +21577,7 @@ function isKnownStringExpression(node, locals, childProofs = false) {
 		return typeof node.value === 'string';
 	}
 	if (node.type === 'TemplateLiteral') return true;
+	if (node.type === 'UnaryExpression' && node.operator === 'typeof') return true;
 	// An identifier the compiler has tracked back to a string in this component's
 	// scope: a `const` bound to a provably-string expression, a `const x: string`,
 	// or a `string`-typed param — see collectKnownStringLocals. `locals` is
@@ -21423,6 +21621,15 @@ function isKnownStringExpression(node, locals, childProofs = false) {
 			isKnownStringExpression(node.alternate, locals, childProofs)
 		);
 	}
+	if (node.type === 'LogicalExpression') {
+		return (
+			isKnownStringExpression(node.left, locals, childProofs) &&
+			isKnownStringExpression(node.right, locals, childProofs)
+		);
+	}
+	if (node.type === 'SequenceExpression') {
+		return isKnownStringExpression(node.expressions.at(-1), locals, childProofs);
+	}
 	return false;
 }
 
@@ -21433,6 +21640,75 @@ function isKnownStringChildExpression(node, locals) {
 	return isKnownStringExpression(node, locals, true);
 }
 
+// Only child positions may use the primitive-text binding for numbers and
+// bigints. These expressions are primitives (or throw before returning) under
+// JavaScript's own operators. Keep the proof distinct from "known string":
+// numeric results cannot establish that `value + anotherValue` concatenates.
+function isKnownTextChildExpression(node, stringLocals) {
+	if (isKnownStringChildExpression(node, stringLocals)) return true;
+	if (node == null || typeof node !== 'object') return false;
+	if (node.metadata?.octane_primitive_text_child === true) return true;
+	if (node.type === 'Literal' || node.type === 'NumericLiteral' || node.type === 'BigIntLiteral') {
+		return (
+			typeof node.value === 'number' ||
+			typeof node.value === 'bigint' ||
+			node.type === 'BigIntLiteral'
+		);
+	}
+	if (node.type === 'UnaryExpression') {
+		return node.operator === '+' || node.operator === '-' || node.operator === '~';
+	}
+	if (node.type === 'BinaryExpression') {
+		if (node.operator === '+') {
+			return (
+				isKnownTextChildExpression(node.left, stringLocals) &&
+				isKnownTextChildExpression(node.right, stringLocals)
+			);
+		}
+		return NUMERIC_TEXT_OPERATORS.has(node.operator);
+	}
+	if (node.type === 'ConditionalExpression') {
+		return (
+			isKnownTextChildExpression(node.consequent, stringLocals) &&
+			isKnownTextChildExpression(node.alternate, stringLocals)
+		);
+	}
+	if (node.type === 'LogicalExpression') {
+		return (
+			isKnownTextChildExpression(node.left, stringLocals) &&
+			isKnownTextChildExpression(node.right, stringLocals)
+		);
+	}
+	if (node.type === 'SequenceExpression') {
+		return isKnownTextChildExpression(node.expressions.at(-1), stringLocals);
+	}
+	if (
+		node.type === 'TSAsExpression' ||
+		node.type === 'TSTypeAssertion' ||
+		node.type === 'TSSatisfiesExpression' ||
+		node.type === 'TSNonNullExpression' ||
+		node.type === 'TSInstantiationExpression' ||
+		node.type === 'ParenthesizedExpression'
+	) {
+		return isKnownTextChildExpression(node.expression, stringLocals);
+	}
+	return false;
+}
+
+const NUMERIC_TEXT_OPERATORS = new Set([
+	'-',
+	'*',
+	'/',
+	'%',
+	'**',
+	'<<',
+	'>>',
+	'>>>',
+	'|',
+	'&',
+	'^',
+]);
+
 // Annotation check: does a TS type annotation resolve to `string`? Accepts both a
 // bare type node and a `TSTypeAnnotation` wrapper (`x: string`).
 function isStringTypeAnnotation(ann) {
@@ -22020,7 +22296,7 @@ function planJsx(
 	const coalesceChildRoot =
 		jsxNodes.length === 1 &&
 		((jsxNodes[0].type === 'Text' &&
-			!isKnownStringChildExpression(jsxNodes[0].expression, ctx.knownStringChildLocals)) ||
+			!isKnownTextChildExpression(jsxNodes[0].expression, ctx.knownStringChildLocals)) ||
 			jsxNodes[0].type === 'TSRXExpression');
 	// Top-level control-flow directives (@if/@for/@switch/@try/<Activity>). In a
 	// body that ALSO has static template roots, each construct emits a `<!>`
@@ -22467,6 +22743,8 @@ function planJsx(
 		// a mount-only import for deferred writes.
 		const attrHelper = attrBindingHelper(b);
 		if (attrHelper !== null) {
+			if (b.kind === 'class' && b.fresh && (!b.deferred || (!b.mountOnly && inlineBindingGuards)))
+				ctx.runtimeNeeded.add('normalizeClass');
 			if (!b.deferred) {
 				ctx.runtimeNeeded.add(attrHelper);
 				registerAttrLoweringOrigin(ctx, b.nameOrigin, attrHelper, b.name);
@@ -23876,12 +24154,10 @@ function commitSourceRows(sources, valueOf) {
 // is byte-identical to the old unconditional mount write).
 function emitDeferredMount(bind, elVar, bag) {
 	// Whole-object `style` diffs on `_sty`; scalar styles and other values on `_prev`.
-	if (!(bind.kind === 'class' && bind.fresh)) {
-		bag.constField(
-			bind.kind === 'style' ? `_sty$${bind.id}` : `_prev$${bind.id}`,
-			bind.kind === 'styleProperty' ? 'style-unset' : 'undefined',
-		);
-	}
+	bag.constField(
+		bind.kind === 'style' ? `_sty$${bind.id}` : `_prev$${bind.id}`,
+		bind.kind === 'styleProperty' ? 'style-unset' : 'undefined',
+	);
 	const key = `_el$${bind.id}`;
 	if (!bag.host(key, elVar)) return null;
 	return inheritOriginLoc(
@@ -24089,9 +24365,15 @@ function emitBindingMount(bind, elVar, bag) {
 		}
 		case 'class': {
 			// On SVG/MathML hosts the `className` property is read-only — fall back
-			// to setAttribute. Compile-time choice, zero runtime branching.
-			const body = [b.const('_v', bind.expr), b.stmt(b.call(callee(), el(), V())), ...mountHost()];
-			if (!bind.fresh) body.push(b.stmt(b.assignment('=', local(`_prev$${bind.id}`), V())));
+			// to setAttribute. A fresh literal is truthy even when it composes to
+			// an empty string, so caching its composition preserves class="".
+			const value = bind.fresh ? b.call('_$normalizeClass', bind.expr) : bind.expr;
+			const body = [
+				b.const('_v', value),
+				b.stmt(b.call(callee(), el(), V())),
+				...mountHost(),
+				b.stmt(b.assignment('=', local(`_prev$${bind.id}`), V())),
+			];
 			return st(b.block(body));
 		}
 		case 'style': {
@@ -24386,13 +24668,14 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 			return st(b.stmt(b.call(callee(), F('_el'), bind.expr)));
 		}
 		case 'class': {
-			if (bind.fresh) {
-				return st(b.stmt(b.call(callee(), F('_el'), bind.expr)));
-			}
+			// Recompose fresh literal values on every render, including when their
+			// members have getters, but skip the DOM write for an unchanged class.
+			const value =
+				bind.fresh && inlineBindingGuards ? b.call('_$normalizeClass', bind.expr) : bind.expr;
 			if (inlineBindingGuards) {
 				return st(
 					b.block([
-						b.const('_v', bind.expr),
+						b.const('_v', value),
 						b.if(
 							b.binary('!==', F('_prev'), V()),
 							b.block([
@@ -24405,7 +24688,7 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 				);
 			}
 			return st(
-				b.stmt(b.assignment('=', F('_prev'), b.call(callee(), bind.expr, F('_prev'), F('_el')))),
+				b.stmt(b.assignment('=', F('_prev'), b.call(callee(), value, F('_prev'), F('_el')))),
 			);
 		}
 		case 'style': {
@@ -24847,12 +25130,11 @@ function emitNodeHtml(
 	cssHash = null,
 ) {
 	if (node.type === 'Text') {
-		if (isKnownStringChildExpression(node.expression, ctx.knownStringChildLocals)) {
+		if (isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals)) {
 			bindings.push({
 				id: bindings.length,
 				kind: 'text',
 				expr: resolveStyleExpr(node.expression, cssHash),
-				knownString: true,
 				path: path.slice(0, -1),
 				childIndex: path[path.length - 1],
 			});
@@ -26050,12 +26332,11 @@ function emitElementHtml(
 						]
 					: null;
 			appendTemplatePart(html, escaped, 'text', origins);
-		} else if (isKnownStringChildExpression(txtChild.expression, ctx.knownStringChildLocals)) {
+		} else if (isKnownTextChildExpression(txtChild.expression, ctx.knownStringChildLocals)) {
 			bindings.push({
 				id: bindings.length,
 				kind: 'textOnlyChild',
 				expr: resolveStyleExpr(txtChild.expression, cssHash),
-				knownString: true,
 				path,
 			});
 			// The element stays empty in the template — runtime appends a Text node.
@@ -26224,12 +26505,11 @@ function emitElementHtml(
 					appendTemplatePart(html, escaped, 'text', origins);
 					prevBakedText = true;
 					if (!prevBaked) childIdx++;
-				} else if (isKnownStringChildExpression(child.expression, ctx.knownStringChildLocals)) {
+				} else if (isKnownTextChildExpression(child.expression, ctx.knownStringChildLocals)) {
 					bindings.push({
 						id: bindings.length,
 						kind: 'text',
 						expr: resolveStyleExpr(child.expression, cssHash),
-						knownString: true,
 						path,
 						childIndex: childIdx,
 						// A text-producing neighbour → the server emits a `<!-- -->`
@@ -26396,7 +26676,7 @@ function emitElementHtml(
 				//   - `{createPortal(BODY, TARGET, PROPS?)}` → portal() call
 				//   - `{cond ? <JSX/> : <JSX/>}` → lowered to ifBlock (so the branches
 				//      mount real DOM, not stringified text)
-				//   - a known-string expression → text-hole binding
+				//   - a proven primitive text expression → text-hole binding
 				//   - anything else → renderable childSlot hole
 				const expr = child.expression;
 				if (isCreatePortalCall(expr)) {
@@ -26424,12 +26704,11 @@ function emitElementHtml(
 					ifCalls.push(ic);
 					appendTemplatePart(html, '<!>', 'anchor');
 					childIdx++;
-				} else if (isKnownStringChildExpression(expr, ctx.knownStringChildLocals)) {
+				} else if (isKnownTextChildExpression(expr, ctx.knownStringChildLocals)) {
 					bindings.push({
 						id: bindings.length,
 						kind: 'text',
 						expr: tsrxExprNode(resolveStyleExpr(expr, cssHash), ctx, componentName, inlinedSubs),
-						knownString: true,
 						path,
 						childIndex: childIdx,
 					});
@@ -26555,7 +26834,7 @@ function helperCaptures(ctx, stmts, params) {
 
 // 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
+// every helper reads from 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) {
@@ -26578,7 +26857,7 @@ function unionEnv(ctx, bodies) {
 // `__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; … }
+//   function __then$0(__props, __s, __extra) { const label = __extra[0]; … }
 //
 // `envNames: null` keeps the legacy placement — the helper is emitted INSIDE
 // the component function so its closures capture the parent's locals
@@ -26603,25 +26882,27 @@ function hoistBodyHelper(
 	const ownEnv = new Set(ownEnvNames || []);
 	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. An arm leaves holes for union-only names:
-		// binding them could collide with a same-named local that shadows a capture
-		// used only by another arm.
-		// The env destructure maps to the construct body it feeds.
+		// Read only this helper's captures at their positions in the construct's
+		// shared UNION tuple. Union-only names must not become local bindings: an
+		// arm may have a same-named local shadowing another arm's capture. Direct
+		// indexed reads avoid iterator work before these helpers optimize.
+		// Each binding maps to the construct body it feeds.
 		const envOrigin =
 			(Array.isArray(stmts) && stmts.find((s) => s != null && s.loc != null)) ||
 			(params || []).find((p) => p != null && p.loc != null) ||
 			null;
-		bodyStmts = [
-			inheritOriginLoc(
-				b.const(
-					b.array_pattern(envNames.map((n) => (ownEnv.has(n) ? b.id(n) : null))),
-					b.id('__extra'),
+		const captures = [];
+		for (let i = 0; i < envNames.length; i++) {
+			const name = envNames[i];
+			if (!ownEnv.has(name)) continue;
+			captures.push(
+				inheritOriginLoc(
+					b.const(b.id(name), b.member(b.id('__extra'), b.literal(i), true)),
+					envOrigin,
 				),
-				envOrigin,
-			),
-			...stmts,
-		];
+			);
+		}
+		bodyStmts = [...captures, ...stmts];
 	}
 	// The synthetic helper shell maps to the construct body it hoists.
 	const fakeOrigin =
@@ -26650,7 +26931,7 @@ function hoistBodyHelper(
 	// 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
+	// this helper's params, env bindings, and body-level locals. (A nested
 	// helper's env values are emitted as plain identifiers at its call site.)
 	const prevLocals = ctx.currentComponentLocals;
 	const prevInvariantLocals = ctx.currentInvariantLocals;
@@ -28249,7 +28530,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		// event-row captures in the same order improves the compressed fragment.
 		envNames = [envNames[1], envNames[0], ...envNames.slice(2)];
 	}
-	// The helper destructures only component-local captures (`envNames`) from the
+	// The helper reads only component-local captures (`envNames`) from the
 	// tuple prefix. Compiler memoization may additionally need live imported
 	// bindings as dependency witnesses; append them without disturbing that ABI.
 	const runtimeDepNames =