octane 0.2.11 → 0.2.13

package/dist/compiler/compile.js

@@ -4,7 +4,7 @@
  *
  * Architecture:
  *   1. Parse TSRX through the environment-selected @tsrx/core-compatible
- *      parser (native oxc-tsrx in Node, pure JavaScript elsewhere), then run
+ *      parser (native @tsrx/oxc in Node, pure JavaScript elsewhere), then run
  *      @tsrx/core's target-neutral semantic analysis on the authored module.
  *   2. For each top-level node:
  *        - Component (`@{ … }` body or a return-JSX function) → compile to a
@@ -40,6 +40,12 @@ import {
 	withDeferredImports,
 } from '@tsrx/core';
 import { parseModule } from '#octane/compiler-parser';
+import {
+	collectServerFunctionNodes,
+	serverContextTypeImports,
+	serverFunctionContextIndex,
+	unwrapServerFunctionInitializer,
+} from './server-context.js';
 import { createStyleScopePass } from './style-scopes.js';
 import { decodeHTMLStrict } from 'entities';
 import { print as esrapPrint } from 'esrap';
@@ -47,6 +53,7 @@ import esrapTsx from 'esrap/languages/tsx';
 import { buildFatSegments } from './fat-segments.js';
 import {
 	METHOD_DEP_IMPORT,
+	analyzeCallbackDependencies,
 	analyzeHookDependencies,
 	applyHookDependencies,
 	isInvariantLiteral,
@@ -82,6 +89,7 @@ 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 { applyStrongAutomaticMemo } from './strong-auto-memo.js';
 import {
 	assertNativeReadDiagnostics,
 	assertNativeReadOptions,
@@ -92,7 +100,24 @@ import {
 	wrapNativeReadScope,
 	wrapNativeWarmScope,
 } from './native-read-codegen.js';
-import { createTextTypeFactsLookup } from './text-type-facts.js';
+import { createTextTypeFactsLookup, normalizeTextTypeFilename } from './text-type-facts.js';
+import { lowerSignalDeclarations } from './signal-declarations.js';
+import { lowerSignalAttemptReads } from './signal-attempt-reads.js';
+import { startIndependentSignalReads } from './signal-start-reads.js';
+import {
+	isDirectSignalHandleExpression,
+	lowerNativeAttributeReads,
+} from './native-attribute-reads.js';
+import { prepareDomBindings } from './dom-bindings.js';
+import { parseDomBindingRequest } from './dom-binding-request.js';
+import {
+	createTemplateIr,
+	appendTemplatePart,
+	appendTemplateIr,
+	templatePart,
+	templateElement,
+	serializeTemplateIr,
+} from './template-ir.js';
 import { collectProvenContextBindings, isProvenContextUse } from './context-use.js';
 import { applyCssModuleConstants } from './css-module-constants.js';
 import { assertUniversalRuntimeTarget, normalizeUniversalRuntime } from './universal-runtime.js';
@@ -438,7 +463,7 @@ function attrBindingHelper(bind) {
 		case 'styleProperty':
 			return 'setStyleProperty';
 		case 'styleProperties':
-			return 'setStyleProperties';
+			return bind.spread ? 'setStyle' : 'setStyleProperties';
 		// SVG/MathML `className` is read-only — setClassAttr sets the attribute and
 		// clsx-composes (setClassName composes on HTML).
 		case 'class':
@@ -506,6 +531,135 @@ function attrBindingUpdateHelper(bind, inlineBindingGuards = false) {
 	}
 }
 
+function canCarryDirectSignalHandle(node) {
+	if (!node || node.metadata?.octane_string_child || node.metadata?.octane_primitive_text_child) {
+		return false;
+	}
+	if (
+		node.type === 'TSAsExpression' ||
+		node.type === 'TSTypeAssertion' ||
+		node.type === 'TSNonNullExpression' ||
+		node.type === 'ParenthesizedExpression' ||
+		node.type === 'ChainExpression'
+	) {
+		return canCarryDirectSignalHandle(node.expression);
+	}
+	if (node.type === 'ConditionalExpression') {
+		return (
+			canCarryDirectSignalHandle(node.consequent) || canCarryDirectSignalHandle(node.alternate)
+		);
+	}
+	if (node.type === 'LogicalExpression') {
+		return canCarryDirectSignalHandle(node.left) || canCarryDirectSignalHandle(node.right);
+	}
+	if (node.type === 'SequenceExpression') {
+		return canCarryDirectSignalHandle(node.expressions.at(-1));
+	}
+	if (
+		(node.type === 'CallExpression' || node.type === 'OptionalCallExpression') &&
+		(node.callee?.type === 'MemberExpression' ||
+			node.callee?.type === 'OptionalMemberExpression') &&
+		(node.callee.computed
+			? node.callee.property?.type === 'Literal' && node.callee.property.value === 'get'
+			: node.callee.property?.name === 'get')
+	) {
+		return false;
+	}
+	return ![
+		'Literal',
+		'TemplateLiteral',
+		'UnaryExpression',
+		'BinaryExpression',
+		'UpdateExpression',
+		'ObjectExpression',
+		'ArrayExpression',
+		'FunctionExpression',
+		'ArrowFunctionExpression',
+		'ClassExpression',
+		'JSXElement',
+		'JSXFragment',
+	].includes(node.type);
+}
+
+function spreadContainsDirectSignalHandle(node) {
+	if (isDirectSignalHandleExpression(node)) return true;
+	while (
+		node &&
+		(node.type === 'TSAsExpression' ||
+			node.type === 'TSTypeAssertion' ||
+			node.type === 'TSNonNullExpression')
+	) {
+		node = node.expression;
+	}
+	if (node?.type === 'ObjectExpression') {
+		return (node.properties ?? []).some((property) => {
+			if (property.type === 'SpreadElement' || property.type === 'SpreadProperty') {
+				return spreadContainsDirectSignalHandle(property.argument);
+			}
+			return spreadContainsDirectSignalHandle(property.value);
+		});
+	}
+	if (node?.type === 'ArrayExpression') {
+		return (node.elements ?? []).some(spreadContainsDirectSignalHandle);
+	}
+	return false;
+}
+
+function directSignalSite(ctx, node, kind = 'binding') {
+	const position = node?.start ?? `${node?.loc?.start?.line ?? 0}:${node?.loc?.start?.column ?? 0}`;
+	// Branch/loop helper names differ between the client and server compilers.
+	// Identity belongs to the authored site, not its generated function owner.
+	return `${kind === 'input' ? 'i' : 'b'}:${strongHash(
+		`octane:signal-${kind}-site:2\0${normalizeTextTypeFilename(ctx.filename) ?? ctx.filename}\0${position}`,
+	)}`;
+}
+
+function componentInvocationSite(ctx, node) {
+	const position = node?.start ?? `${node?.loc?.start?.line ?? 0}:${node?.loc?.start?.column ?? 0}`;
+	// Authored positions identify call sites independently of the server/client
+	// helper names introduced for loops, branches, and value-position fragments.
+	return `c:${strongHash(
+		`octane:component-invocation-site:1\0${normalizeTextTypeFilename(ctx.filename) ?? ctx.filename}\0${position}`,
+	)}`;
+}
+
+function markDirectSignalBinding(binding, ctx, origin, kind) {
+	if (!canCarryDirectSignalHandle(binding.expr)) return binding;
+	ctx.signalBindingsUsed = true;
+	if (binding.kind !== 'text' && binding.kind !== 'textOnlyChild') ctx.signalBindingsEager = true;
+	return {
+		...binding,
+		signalDirect: true,
+		signalSite: directSignalSite(ctx, origin, kind),
+	};
+}
+
+function ssrSignalValue(node, ctx, origin, capability = false) {
+	if (!(capability ? canCarryDirectSignalHandle(node) : isDirectSignalHandleExpression(node))) {
+		return node;
+	}
+	ctx.signalBindingsUsed = true;
+	ctx.runtimeNeeded.add('ssrSignalValue');
+	return ssrCall('ssrSignalValue', [node], origin ?? node);
+}
+
+function ssrSignalStyleObject(node, ctx, origin) {
+	// Non-native compilation only: preserve targeted binding reads without
+	// opting an otherwise ordinary module into a native renderer read frame.
+	if (node?.type !== 'ObjectExpression') return node;
+	let changed = false;
+	const properties = (node.properties ?? []).map((property) => {
+		if (property.type === 'SpreadElement' || property.type === 'SpreadProperty') {
+			return property;
+		}
+		const value = ssrSignalValue(property.value, ctx, origin ?? property, true);
+		if (value === property.value) return property;
+		changed = true;
+		return { ...property, value };
+	});
+	return changed ? { ...node, properties } : node;
+}
+
 /**
  * An ALIAS: an authored range that emits nothing of its own but means the same
  * thing as one that does. A component's closing tag is the case — `</Card>` is
@@ -877,8 +1031,8 @@ function hasPotentialDangerouslySetInnerHTML(node) {
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	return attrs.some(
 		(attr) =>
-			attr.type === 'SpreadAttribute' ||
-			attr.type === 'JSXSpreadAttribute' ||
+			((attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') &&
+				!attr._octaneKnownAttributeSpread) ||
 			((attr.type === 'Attribute' || attr.type === 'JSXAttribute') &&
 				jsxAttrRawName(attr) === 'dangerouslySetInnerHTML'),
 	);
@@ -888,6 +1042,7 @@ function hasDefinitelyPresentDirectDangerouslySetInnerHTML(node) {
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	let state = false;
 	for (const attr of attrs) {
+		if (attr._octaneKnownAttributeSpread) continue;
 		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') {
 			// A later spread may overwrite or introduce the prop, so the effective
 			// writer is no longer statically known. A following direct writer can
@@ -914,6 +1069,7 @@ function hasDefinitelyPresentDirectChildrenProp(node) {
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	let state = false;
 	for (const attr of attrs) {
+		if (attr._octaneKnownAttributeSpread) continue;
 		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') {
 			state = null;
 			continue;
@@ -1190,6 +1346,10 @@ const HOOK_MEMO_RUNTIME_HELPERS = new Set([
 	'memoPublishAlways',
 ]);
 const NATIVE_READ_RUNTIME_HELPERS = new Set([
+	'nativeStyleBinding',
+	'nativeProjectionBinding',
+	'readNativeDomStyle',
+	'readNativeDomProps',
 	'enableNativeReadCollection',
 	'beginNativeReadScope',
 	'endNativeReadScope',
@@ -1209,6 +1369,29 @@ const NATIVE_READ_RUNTIME_HELPERS = new Set([
 	'nativeCreateScopedElement',
 ]);
 const INTERNAL_CLIENT_RUNTIME_HELPERS = new Set([
+	'bindPresentationView',
+	'beginPresentationHydration',
+	'endPresentationHydration',
+	'presentationWrite',
+	'presentationHostWrite',
+	'presentationStructure',
+	'presentationFailure',
+	'markBindingChildren',
+	'bindingText',
+	'bindingChildSlot',
+	'setBindingClass',
+	'setBindingClassIfChanged',
+	'enableSignalBindings',
+	'createElementAt',
+	'createElementFromConfig',
+	'bindSignalText',
+	'bindSignalChild',
+	'bindSignalAttribute',
+	'bindSignalValue',
+	'bindSignalChecked',
+	'bindSignalHostPropSources',
+	'canSplitStyleProperties',
+	'styleObjectPrototype',
 	'replaceRef',
 	'queueOwnRefDetach',
 	'setPlainAttribute',
@@ -1229,6 +1412,18 @@ const INTERNAL_CLIENT_RUNTIME_HELPERS = new Set([
 	...NATIVE_READ_RUNTIME_HELPERS,
 ]);
 const INTERNAL_SERVER_RUNTIME_HELPERS = new Set([
+	'bindPresentationView',
+	'ssrBindingHtml',
+	'ssrBindingBlock',
+	'ssrBindingChild',
+	'ssrBindingKey',
+	'ssrBindingClass',
+	'enableServerSignalBindings',
+	'createElementAt',
+	'createElementFromConfig',
+	'ssrSignalValue',
+	'ssrSignalControlValue',
+	'ssrSignalControlAttrs',
 	'ssrSpreadContent',
 	...NATIVE_READ_RUNTIME_HELPERS,
 ]);
@@ -1611,6 +1806,7 @@ function lowerImportedErrorBoundaries(ast) {
 function inheritSoleCompRoot(bodyNodes, ctx) {
 	if (bodyNodes.length !== 1) return false;
 	const n = bodyNodes[0];
+	if (n._octaneBindingSite !== undefined) return false;
 	if (n.type !== 'Element' || !isComponentTag(n)) return false;
 	// Returned-JSX extraction can merge an authored key/spread config into one
 	// spread hole. Its descriptor still needs its own keyed reconciliation range.
@@ -2208,15 +2404,23 @@ function staticObjectToCssString(obj) {
 // A literal prefix can live in the template when all following properties have
 // fixed, unique names. The values still evaluate together at the authored
 // style attribute, before any DOM writes. Fixed literal values
-// after the first dynamic property stay in the ordered suffix. Spreads,
-// computed names, and accessors retain ordinary object evaluation and diffing.
+// after the first dynamic property stay in the ordered suffix. Leading spreads
+// retain an object snapshot; only their fixed trailing properties are split.
+// Computed names and accessors retain ordinary object evaluation and diffing.
 function mixedStaticStyle(obj) {
 	if (obj?.type !== 'ObjectExpression' || obj.properties.length === 0) return null;
+	let spreadCount = 0;
+	while (obj.properties[spreadCount]?.type === 'SpreadElement') spreadCount++;
+	if (spreadCount === obj.properties.length) return null;
+	const spread = spreadCount
+		? inheritOriginLoc(b.object(obj.properties.slice(0, spreadCount)), obj)
+		: null;
+	const properties = spreadCount ? obj.properties.slice(spreadCount) : obj.properties;
 	const seen = new Map();
 	let duplicates = false;
 	const prefix = [];
 	const dynamics = [];
-	for (const property of obj.properties) {
+	for (const property of properties) {
 		if (
 			(property.type !== 'Property' && property.type !== 'ObjectProperty') ||
 			property.computed ||
@@ -2234,6 +2438,9 @@ function mixedStaticStyle(obj) {
 		if (
 			name === '__proto__' ||
 			name === 'dangerouslySetInnerHTML' ||
+			// Integer keys enumerate before the spread's string keys, regardless
+			// of their authored position. Keep their coercion order on the object path.
+			(spread !== null && String(Number(name) >>> 0) === name && name !== '4294967295') ||
 			(seen.has(normalized) && seen.get(normalized) !== name)
 		) {
 			return null;
@@ -2255,6 +2462,7 @@ function mixedStaticStyle(obj) {
 			return null;
 		}
 		if (
+			spread === null &&
 			value?.type === 'Literal' &&
 			dynamics.length === 0 &&
 			(typeof value.value === 'string' || typeof value.value === 'number') &&
@@ -2271,7 +2479,8 @@ function mixedStaticStyle(obj) {
 	if (duplicates) {
 		return {
 			css: '',
-			dynamics: obj.properties.map((property) => ({
+			spread,
+			dynamics: properties.map((property) => ({
 				name: property.key.type === 'Identifier' ? property.key.name : property.key.value,
 				key: property.key,
 				value: property.value,
@@ -2280,7 +2489,7 @@ function mixedStaticStyle(obj) {
 	}
 	if (dynamics.length === 0) return null;
 	const css = staticObjectToCssString({ properties: prefix });
-	return prefix.length !== 0 && css === '' ? null : { css, dynamics };
+	return prefix.length !== 0 && css === '' ? null : { css, dynamics, spread };
 }
 
 // ===========================================================================
@@ -4467,6 +4676,7 @@ function containsAutoMemoContextRead(root, ctx) {
 		}
 		if (seen.has(node)) return;
 		seen.add(node);
+
 		if (
 			node.type === 'ArrowFunctionExpression' ||
 			node.type === 'FunctionExpression' ||
@@ -6365,6 +6575,26 @@ function containsAutoMemoUnsafeStructure(stmts, ctx = null) {
 			if (containsDeferredRefRead(n)) found = true;
 			return;
 		}
+		// Native styles perform implicit reads, including styles carried by a host
+		// prop spread. Equal props cannot prove the subtree complete during a
+		// boundary retry: these reads are outside the parent call's memo witness.
+		if (
+			ctx?.nativeReads &&
+			n.type === 'JSXOpeningElement' &&
+			n.name?.type === 'JSXIdentifier' &&
+			/^[a-z]/.test(n.name.name) &&
+			n.attributes.some((attribute) => {
+				if (attribute.type === 'JSXSpreadAttribute' || attribute.type === 'SpreadAttribute')
+					return true;
+				if (attribute.name?.name !== 'style' || attribute.value?.type !== 'JSXExpressionContainer')
+					return false;
+				const value = unwrapTsExpr(attribute.value.expression);
+				return value.type !== 'ObjectExpression' || !objectExprIsStaticLiteral(value);
+			})
+		) {
+			found = true;
+			return;
+		}
 		if (
 			t === 'AssignmentExpression' ||
 			t === 'AssignmentPattern' ||
@@ -6795,6 +7025,19 @@ function wrapAsBlockStmt(node) {
 	return b.block([node]);
 }
 
+// Native host children already lower a JSX ternary through the same @if ABI.
+// Keep that positional claim at the callers; root/fragment value holes remain
+// renderable values. Binding planning shares this exact arm conversion and only
+// adds the compiler-issued site receipt to the otherwise unchanged statement.
+function conditionalJsxStatement(expr) {
+	if (!isConditionalJsx(expr)) return null;
+	return {
+		...b.if(expr.test, wrapAsBlockStmt(expr.consequent), wrapAsBlockStmt(expr.alternate)),
+		loc: expr.loc,
+		...(expr._octaneBindingSite ? { _octaneBindingSite: expr._octaneBindingSite } : {}),
+	};
+}
+
 /** `xs.map(x => <li/>)` — detect so we can throw a useful "use for-of" error. */
 function isJsxReturningMapCall(node) {
 	if (!node || node.type !== 'CallExpression') return false;
@@ -7298,6 +7541,7 @@ function anchorlessRootShape(node) {
  * the hydrator can use it as the keyed item boundary without an item pair.
  */
 function isSsrMarkerlessForItem(node) {
+	if (node?._octaneBindingSite !== undefined) return false;
 	const body = node?.body?.body || [];
 	const jsxChildren = body.filter((s) => isJsxNode(s));
 	return jsxChildren.length === 1 && isPlainHostRoot(jsxChildren[0]);
@@ -7878,21 +8122,6 @@ function identifierName(node) {
 	return null;
 }
 
-function unwrapServerFunctionInitializer(node) {
-	let current = node;
-	while (
-		current &&
-		(current.type === 'TSAsExpression' ||
-			current.type === 'TSSatisfiesExpression' ||
-			current.type === 'TSNonNullExpression' ||
-			current.type === 'TypeCastExpression' ||
-			current.type === 'ParenthesizedExpression')
-	) {
-		current = current.expression;
-	}
-	return current;
-}
-
 function collectServerFunctionBindings(statements) {
 	const functions = new Set();
 	const aliases = new Map();
@@ -8055,6 +8284,8 @@ function analyzeServerModule(ast, filename) {
 	const statements = declaration.body?.body || [];
 	validateServerModuleIsolation(ast, declaration, filename);
 	const functionBindings = collectServerFunctionBindings(statements);
+	const functionNodes = collectServerFunctionNodes(statements);
+	const contextImports = serverContextTypeImports(statements);
 	for (const statement of statements) {
 		if (statement.type === 'ExportDefaultDeclaration') {
 			throw new Error('`module server` does not support default exports; use named functions.');
@@ -8111,7 +8342,15 @@ function analyzeServerModule(ast, filename) {
 		}
 	}
 
-	return { declaration, imports, exports, filename };
+	const contexts = new Map();
+	for (const [exported, local] of exports) {
+		const fn = functionNodes.get(local);
+		if (fn === undefined) continue;
+		const contextIndex = serverFunctionContextIndex(fn, contextImports, filename);
+		if (contextIndex !== -1) contexts.set(exported, contextIndex);
+	}
+
+	return { declaration, imports, exports, contexts, filename };
 }
 
 /**
@@ -8129,15 +8368,19 @@ function emitServerModuleClientStubs(info, ctx) {
 			if (!imported || !local) continue;
 			ctx.runtimeNeeded.add('__serverRpc');
 			const hash = strongHash(info.filename + '#' + imported);
+			const contextIndex = info.contexts.get(imported);
+			const rpcArgs =
+				contextIndex === undefined
+					? [b.literal(hash, JSON.stringify(hash)), b.id('args')]
+					: [
+							b.literal(hash, JSON.stringify(hash)),
+							b.call(b.member(b.id('args'), 'slice'), b.literal(0), b.literal(contextIndex)),
+							b.member(b.id('args'), b.literal(contextIndex), true),
+							b.literal(true, 'true'),
+						];
 			nodes.push(
 				inheritOriginLoc(
-					b.const(
-						local,
-						b.arrow(
-							[b.rest(b.id('args'))],
-							b.call('_$__serverRpc', b.literal(hash, JSON.stringify(hash)), b.id('args')),
-						),
-					),
+					b.const(local, b.arrow([b.rest(b.id('args'))], b.call('_$__serverRpc', ...rpcArgs))),
 					specifier,
 				),
 			);
@@ -8204,13 +8447,29 @@ function emitServerModuleServerNodes(info, ctx) {
 		...namespaceBody,
 	];
 	for (const [exported, local] of info.exports) {
+		const contextIndex = info.contexts.get(exported);
+		let value = b.id(local);
+		if (contextIndex !== undefined) {
+			ctx.runtimeNeeded.add('__registerServerFunction');
+			const hash = strongHash(info.filename + '#' + exported);
+			value = b.call(
+				'_$__registerServerFunction',
+				value,
+				b.literal(contextIndex),
+				b.object([
+					b.prop('init', b.id('id'), b.literal(hash, JSON.stringify(hash))),
+					b.prop('init', b.id('module'), b.literal(info.filename, JSON.stringify(info.filename))),
+					b.prop('init', b.id('export'), b.literal(exported, JSON.stringify(exported))),
+				]),
+			);
+		}
 		serverStatements.push(
 			inheritOriginLoc(
 				b.stmt(
 					b.assignment(
 						'=',
 						b.member(b.id('server'), b.literal(exported, JSON.stringify(exported)), true),
-						b.id(local),
+						value,
 					),
 				),
 				origin,
@@ -8849,11 +9108,326 @@ export function compile(source, filename, options) {
 	return compileAuthored(source, filename, options, null);
 }
 
+// A provider may describe an imported pure attribute factory's exact stable own
+// data fields. The import binding, not a spelling such as `stylex.attrs`, is authority.
+function markKnownAttributeSpreads(ast, contracts) {
+	if (contracts === undefined) return ast;
+	if (!Array.isArray(contracts)) throw new TypeError('knownAttributeSpreads must be an array.');
+	if (contracts.length === 0) return ast;
+	const paths = new Set();
+	const shorthandProviders = new Map();
+	for (const contract of contracts) {
+		if (
+			!contract ||
+			typeof contract.source !== 'string' ||
+			!contract.source ||
+			typeof contract.imported !== 'string' ||
+			!contract.imported ||
+			!Array.isArray(contract.fields) ||
+			contract.fields.length === 0 ||
+			new Set(contract.fields).size !== contract.fields.length ||
+			contract.fields.some(
+				(field) =>
+					typeof field !== 'string' ||
+					!/^(?:class|className|style|title|role|aria-[a-z][a-z0-9_-]*|data-[a-z][a-z0-9_-]*)$/.test(
+						field,
+					) ||
+					field.startsWith('data-octane-'),
+			) ||
+			(contract.members !== undefined &&
+				(!Array.isArray(contract.members) ||
+					contract.members.some(
+						(member) => typeof member !== 'string' || !/^[A-Za-z_$][\w$]*$/.test(member),
+					))) ||
+			(contract.imported === '*' && !contract.members?.length) ||
+			(contract.style !== undefined &&
+				(contract.style !== 'object' || !contract.fields.includes('style')))
+		)
+			throw new TypeError(
+				'Invalid knownAttributeSpreads import or fixed native attribute contract.',
+			);
+		const path = JSON.stringify([contract.source, contract.imported, contract.members ?? []]);
+		if (paths.has(path))
+			throw new TypeError(
+				'Duplicate knownAttributeSpreads contract for the same imported factory.',
+			);
+		paths.add(path);
+		if (contract.jsxAttribute !== undefined) {
+			if (
+				typeof contract.jsxAttribute !== 'string' ||
+				!/^[A-Za-z_$][\w$-]*$/.test(contract.jsxAttribute) ||
+				shorthandProviders.has(contract.jsxAttribute)
+			)
+				throw new TypeError('Invalid or ambiguous knownAttributeSpreads jsxAttribute.');
+			shorthandProviders.set(contract.jsxAttribute, contract);
+		}
+	}
+	const imports = new Map();
+	for (const declaration of ast.body) {
+		if (declaration.type !== 'ImportDeclaration' || declaration.importKind === 'type') continue;
+		for (const specifier of declaration.specifiers) {
+			if (specifier.importKind === 'type') continue;
+			const imported =
+				specifier.type === 'ImportNamespaceSpecifier'
+					? '*'
+					: specifier.type === 'ImportDefaultSpecifier'
+						? 'default'
+						: (specifier.imported.name ?? specifier.imported.value);
+			const matches = contracts.filter(
+				(contract) =>
+					contract.source === declaration.source.value && contract.imported === imported,
+			);
+			if (matches.length) imports.set(specifier.local.name, matches);
+		}
+	}
+	const shorthandAttributes = new Map();
+	const usedNames = new Set();
+	if (shorthandProviders.size > 0) {
+		mapAst(ast, (node) => {
+			if (node.type === 'Identifier' || node.type === 'JSXIdentifier') usedNames.add(node.name);
+			if (node.type !== 'JSXOpeningElement' && node.type !== 'Element') return null;
+			const name = node.type === 'Element' ? node.id : node.name;
+			if (
+				(name?.type !== 'JSXIdentifier' && name?.type !== 'Identifier') ||
+				typeof name.name !== 'string' ||
+				name.name[0] !== name.name[0].toLowerCase()
+			)
+				return null;
+			const seen = new Set();
+			for (const attr of node.attributes ?? []) {
+				if (attr.type !== 'JSXAttribute' && attr.type !== 'Attribute') continue;
+				const raw = attr.name?.name ?? attr.name;
+				const contract = shorthandProviders.get(raw);
+				if (
+					!contract ||
+					seen.has(raw) ||
+					attr.value?.type !== 'JSXExpressionContainer' ||
+					attr.value.expression?.type === 'JSXEmptyExpression'
+				)
+					continue;
+				seen.add(raw);
+				shorthandAttributes.set(attr, contract);
+			}
+			return null;
+		});
+	}
+	if (imports.size === 0 && shorthandAttributes.size === 0) return ast;
+	const lexical = createLexicalAnalysis(ast);
+	const addedImports = [];
+	const addedBindings = new Map();
+	let nativeReadName;
+	let hasProjection = false;
+	const read = (node) => {
+		if (nativeReadName === undefined) {
+			nativeReadName = '_nativeAttributeValue';
+			for (let suffix = 1; usedNames.has(nativeReadName); suffix++)
+				nativeReadName = `_nativeAttributeValue${suffix}`;
+			usedNames.add(nativeReadName);
+			addedImports.push(
+				inheritOriginLoc(
+					b.imports([['readNativeDomValue', nativeReadName]], 'octane/internal/signal-read'),
+					node,
+				),
+			);
+		}
+		const call = inheritOriginLoc(b.call(b.id(nativeReadName), node), node);
+		call.metadata = { octaneNativeSignalRead: true };
+		return call;
+	};
+	const result = mapAst(ast, (node) => {
+		const shorthand = shorthandAttributes.get(node);
+		if (shorthand) {
+			let local;
+			for (const [name, matches] of imports) {
+				if (
+					matches.includes(shorthand) &&
+					lexical.resolveBinding(lexical.nodeScopes.get(node), name)?.scope === lexical.rootScope
+				) {
+					local = name;
+					break;
+				}
+			}
+			if (local === undefined) {
+				local = addedBindings.get(shorthand);
+				if (local === undefined) {
+					local = '_jsxAttribute';
+					for (let suffix = 1; usedNames.has(local); suffix++) local = `_jsxAttribute${suffix}`;
+					usedNames.add(local);
+					addedBindings.set(shorthand, local);
+					addedImports.push(
+						inheritOriginLoc(
+							shorthand.imported === '*'
+								? b.import_all(local, shorthand.source)
+								: shorthand.imported === 'default'
+									? b.import_declaration(
+											[
+												{
+													type: 'ImportDefaultSpecifier',
+													local: b.id(local),
+													metadata: { path: [] },
+												},
+											],
+											shorthand.source,
+										)
+									: b.imports([[shorthand.imported, local]], shorthand.source),
+							node,
+						),
+					);
+				}
+			}
+			let callee = b.id(local);
+			for (const member of shorthand.members ?? []) callee = b.member(callee, b.id(member));
+			const lifted = lowerNativeAttributeReads(node.value.expression, read);
+			hasProjection ||= lifted.reactive;
+			return {
+				...node,
+				value: {
+					...node.value,
+					expression: inheritOriginLoc(b.call(callee, lifted.expression), node),
+				},
+				_octaneKnownAttributeSpread: {
+					fields: [...shorthand.fields],
+					style: shorthand.style,
+					...(lifted.reactive ? { projection: true } : {}),
+				},
+			};
+		}
+		if (node.type !== 'JSXSpreadAttribute' && node.type !== 'SpreadAttribute') return null;
+		const call = node.argument;
+		if (call?.type !== 'CallExpression' || call.optional) return null;
+		let callee = call.callee;
+		const members = [];
+		while (callee?.type === 'MemberExpression' && !callee.computed && !callee.optional) {
+			members.unshift(callee.property.name);
+			callee = callee.object;
+		}
+		if (callee?.type !== 'Identifier') return null;
+		const matches = imports.get(callee.name);
+		if (
+			!matches ||
+			lexical.resolveBinding(lexical.nodeScopes.get(callee), callee.name)?.scope !==
+				lexical.rootScope
+		)
+			return null;
+		const contract = matches.find((candidate) => {
+			const expected = candidate.members ?? [];
+			return (
+				expected.length === members.length &&
+				expected.every((member, index) => member === members[index])
+			);
+		});
+		return contract
+			? {
+					...node,
+					_octaneKnownAttributeSpread: { fields: [...contract.fields], style: contract.style },
+				}
+			: null;
+	});
+	if (hasProjection)
+		mapAst(result, (node) => {
+			if (node.type !== 'JSXOpeningElement' && node.type !== 'Element') return null;
+			const attributes = node.attributes ?? [];
+			const identity = (name) =>
+				(name === 'className' ? 'class' : (ATTRIBUTE_ALIASES.get(name) ?? name)).toLowerCase();
+			for (const attr of attributes) {
+				if (!attr._octaneKnownAttributeSpread?.projection) continue;
+				const fields = new Set(attr._octaneKnownAttributeSpread.fields.map(identity));
+				for (const other of attributes) {
+					if (other === attr) continue;
+					const known = other._octaneKnownAttributeSpread;
+					if (
+						(known && known.fields.some((field) => fields.has(identity(field)))) ||
+						(!known &&
+							(other.type === 'JSXSpreadAttribute' ||
+								other.type === 'SpreadAttribute' ||
+								fields.has(identity(jsxAttrRawName(other)))))
+					)
+						throw new Error(
+							'Native JSX signal projections cannot overlap other writers for their fields or an unknown spread.',
+						);
+				}
+			}
+			return null;
+		});
+	return addedImports.length > 0 || hasProjection
+		? {
+				...result,
+				body: [...addedImports, ...result.body],
+				...(hasProjection
+					? { metadata: { ...result.metadata, octaneNativeAttributeProjection: true } }
+					: {}),
+			}
+		: result;
+}
+
+// Keep the factory evaluation at its authored native element/iteration. Each
+// declared field then uses the normal compiler writer; there is no dynamic key
+// dispatcher and no second factory call. These are compiler-owned IR cells.
+function expandKnownAttributeSpreads(attributes) {
+	if (!attributes.some((attr) => attr._octaneKnownAttributeSpread)) return attributes;
+	return attributes.flatMap((attr) => {
+		if (!attr._octaneKnownAttributeSpread) return [attr];
+		if (
+			attr._octaneKnownAttributeSpread.projection &&
+			attr._octaneKnownAttributeSpread.fields.some(
+				(field) => field === 'class' || field === 'className',
+			) &&
+			attributes.some(
+				(other) => other !== attr && ['class', 'className'].includes(jsxAttrRawName(other)),
+			)
+		) {
+			throw new Error(
+				'A reactive native attribute projection cannot share its class with scoped or authored classes. Compose classes in the projection.',
+			);
+		}
+		const source = {
+			binding: null,
+			expression: null,
+			projection: attr._octaneKnownAttributeSpread.projection === true,
+			fields: attr._octaneKnownAttributeSpread.fields,
+		};
+		const argument = attr.argument ?? attr.value.expression;
+		return [
+			{ knownSource: source, argument },
+			...attr._octaneKnownAttributeSpread.fields.map((field) => {
+				const object = inheritOriginLoc(b.id('_knownAttributeSpread'), argument);
+				object.metadata = { octaneKnownAttributeSource: source };
+				const expression = inheritOriginLoc(
+					b.conditional(
+						b.binary('==', object, b.literal(null)),
+						undefinedNode(),
+						b.member(object, b.literal(field), true),
+					),
+					argument,
+				);
+				expression.metadata = { octaneKnownAttributeRead: true };
+				const attribute = inheritOriginLoc(
+					b.jsx_attribute(
+						inheritOriginLoc(b.jsx_id(field), attr),
+						b.jsx_expression_container(expression, argument),
+					),
+					attr,
+				);
+				if (source.projection) attribute._octaneKnownProjectionSource = source;
+				return attribute;
+			}),
+		];
+	});
+}
+
+function resolveKnownAttributeSource(expression, valueOf) {
+	if (!expression?.metadata?.octaneKnownAttributeRead) return expression;
+	return mapAst(expression, (node) => {
+		const source = node.type === 'Identifier' && node.metadata?.octaneKnownAttributeSource;
+		return source ? inheritOriginLoc(valueOf(source), node) : null;
+	});
+}
+
 // Internal bundler entry point. Unlike the old __hydratePrepared handoff, this
 // always validates authored source and only exposes the hydrate slice that the
 // same compilation already prepared for production void-export classification.
 export function compileForBundler(source, filename, options) {
-	const metadata = { hydrateAst: null, cssModuleConstantImports: [] };
+	const metadata = { hydrateAst: null, cssModuleConstantImports: [], independentWidgets: [] };
 	const result = compileAuthored(source, filename, options, metadata);
 	return { result, ...metadata };
 }
@@ -8864,22 +9438,98 @@ function compileAuthored(source, filename, options, bundlerMetadata) {
 		throw new Error(`Unknown compile mode "${mode}" — expected 'client' or 'server'.`);
 	}
 	const cleanFilename = cleanCompileFilename(filename);
-	const analyzedAst = markParserSensitiveHosts(
+	let analyzedAst = markParserSensitiveHosts(
 		normalizeAuthoredJsxLiterals(parseModule(source, cleanFilename)),
 	);
 	analyzeTsrx(analyzedAst, cleanFilename);
 	adoptParserAst(analyzedAst);
 	options = nativeReadOptions(analyzedAst, options);
 	assertNativeReadDiagnostics(analyzedAst, source, cleanFilename, options);
-	const strongModeEnabled =
-		assertStrongMode(analyzedAst, source, cleanFilename, options)?.enabled === true;
-	if (bundlerMetadata !== null) bundlerMetadata.hydrateAst = analyzedAst;
-	const textTypedAst = applyStringChildProofs(
-		analyzedAst,
-		source,
+	const strongAnalysis = assertStrongMode(analyzedAst, source, cleanFilename, options);
+	const strongModeEnabled = strongAnalysis?.enabled === true;
+	analyzedAst = markKnownAttributeSpreads(analyzedAst, options?.knownAttributeSpreads);
+	if (analyzedAst.metadata?.octaneNativeAttributeProjection) {
+		options = { ...options, nativeReads: true };
+		assertNativeReadOptions(options);
+	}
+	const bindingRequest = parseDomBindingRequest(filename);
+	const bindingExport = bindingRequest?.exportName ?? null;
+	if (
+		bindingExport !== null &&
+		(mode !== 'client' ||
+			hydrateBoundaryPathFromId(filename) !== null ||
+			(options?.renderer?.target && options.renderer.target !== 'dom'))
+	) {
+		throw new Error(
+			'Octane DOM binding queries require the client DOM target without a Hydrate query.',
+		);
+	}
+	const hasDomBindings =
+		bindingExport !== null ||
+		source.includes('use dom bindings') ||
+		source.includes('adoptBindings') ||
+		source.includes('mountBindings');
+	let bindingConstants;
+	// Binding plans classify authored child expressions before signal lowering or
+	// JSX extraction. Use the same source-bound proof pass here, exactly once;
+	// query modules no longer contain the original child ranges after planning.
+	const bindingAst = hasDomBindings
+		? prepareDomBindings(
+				applyStringChildProofs(analyzedAst, source, cleanFilename, options?.textTypeFacts),
+				source,
+				cleanFilename,
+				bindingExport,
+				{
+					normalizeChildren,
+					conditionalJsxStatement,
+					isText: isKnownTextChildExpression,
+					canBorrowSsrHostBranchRange,
+					analyzeCallbackDependencies,
+					canCarryDirectSignalHandle,
+					isDirectSignalHandleExpression,
+					bakeStaticAttr,
+					escapeHtml,
+					mount: bindingRequest?.mount ?? false,
+					props: bindingRequest?.props ?? null,
+					...(mode === 'client' &&
+					!options?.dev &&
+					!options?.hmr &&
+					(!options?.renderer?.target || options.renderer.target === 'dom')
+						? {
+								collectConstants(names) {
+									if (names.length > 0)
+										bindingConstants = {
+											version: 1,
+											source: strongHash(source),
+											names,
+										};
+								},
+							}
+						: null),
+				},
+			)
+		: analyzedAst;
+	const attemptAst = lowerSignalAttemptReads(bindingAst);
+	const signalAst = lowerSignalDeclarations(
+		startIndependentSignalReads(
+			attemptAst,
+			options?.textTypeFacts || (options?.renderer?.target && options.renderer.target !== 'dom')
+				? null
+				: isKnownTextChildExpression,
+		),
 		cleanFilename,
-		options?.textTypeFacts,
 	);
+	if (bundlerMetadata !== null) bundlerMetadata.hydrateAst = signalAst;
+	const memoizedAst = strongModeEnabled
+		? applyStrongAutomaticMemo(signalAst, {
+				...options,
+				filename: cleanFilename,
+				strongHookAnalysis: strongAnalysis.strongHookAnalysis,
+			})
+		: signalAst;
+	const textTypedAst = hasDomBindings
+		? memoizedAst
+		: applyStringChildProofs(memoizedAst, source, cleanFilename, options?.textTypeFacts);
 	let constantAst = textTypedAst;
 	if (typeof options?.resolveCssModuleConstant === 'function') {
 		const constants = applyCssModuleConstants(
@@ -8892,16 +9542,29 @@ function compileAuthored(source, filename, options, bundlerMetadata) {
 			bundlerMetadata.cssModuleConstantImports = constants.imports;
 		}
 	}
-	return compileInternal(
+	const result = compileInternal(
 		source,
 		filename,
-		options,
+		strongAnalysis?.nativeChangeAnalysis
+			? {
+					...options,
+					// Strong already analyzed the authored hosts. The classifications use
+					// source offsets, which the copy-on-write transforms preserve.
+					__nativeChangeAnalysis: strongAnalysis.nativeChangeAnalysis,
+					__nativeChangeDiagnostics: strongAnalysis.nativeChangeAnalysis.diagnostics,
+				}
+			: options,
 		constantAst,
 		mode,
 		bundlerMetadata,
-		textTypedAst !== analyzedAst,
+		textTypedAst !== memoizedAst,
 		strongModeEnabled,
 	);
+	if (strongAnalysis?.diagnostics.length > 0) {
+		result.diagnostics = [...strongAnalysis.diagnostics, ...(result.diagnostics ?? [])];
+	}
+	if (bindingConstants !== undefined) result.bindingConstants = bindingConstants;
+	return result;
 }
 
 function compileInternal(
@@ -8992,6 +9655,7 @@ function compileInternal(
 				).diagnostics;
 			if (bundlerMetadata !== null) {
 				bundlerMetadata.hydrateAst = hydratePreparation.ast;
+				bundlerMetadata.independentWidgets = hydratePreparation.independentWidgets ?? [];
 			}
 			const compiled = compileInternal(
 				source,
@@ -9341,6 +10005,8 @@ function compileInternal(
 		ownedCssInjections: new Set(),
 		componentOwners: [],
 		currentComponentOwner: null,
+		signalBindingsUsed: ast._octaneSignalDeclarations === true,
+		signalBindingsEager: ast._octaneSignalDeclarations === true,
 		currentComponentLocals: null, // Set<string> while compiling a component body; null otherwise
 		currentMapTemps: null, // expression temps (map receiver/method, folded condition) owned by this function
 		currentAutoMemoOffset: 0, // flat compiler-cache cell offset for the body being emitted
@@ -9871,18 +10537,18 @@ function compileInternal(
 			).filter((n) => n.type !== 'HeadHoist');
 			if (inheritSoleCompRoot(bodyNodes, ctx)) eligible = false;
 		}
-		info.eligible = eligible;
+		info.eligible = eligible && !compNode._octaneBindingView;
 		// Single-ELEMENT-root output: the component's body renders exactly one plain
 		// DOM element (not a component tag, fragment, or control-flow). Such a
 		// component self-delimits via that element on CLIENT mount — its
 		// `componentSlot` needs no `comp`/`/comp` markers (singleRoot path), exactly
 		// like a single-root `@for` item. (Output-shape based — independent of which
 		// hooks it calls.)
-		info.singleRoot = singleHostComponentRoot(compNode);
+		info.singleRoot = !compNode._octaneBindingView && singleHostComponentRoot(compNode);
 		// Transitive @if-arm form of the same proof — resolved by the fixed point
 		// below once every same-module callee an arm depends on is itself proven.
 		info.singleRootIfDeps =
-			!info.singleRoot && isVoidJsxCodeBlockFunction(compNode)
+			!compNode._octaneBindingView && !info.singleRoot && isVoidJsxCodeBlockFunction(compNode)
 				? collectSingleRootIfDeps(compNode.body.render, locals, ctx)
 				: null;
 	}
@@ -10442,6 +11108,22 @@ function compileInternal(
 		ctx.runtimeNeeded.add('__vtSeen');
 		vtHintNodes.push(inheritOriginLoc(b.stmt(b.call(rtAlias('__vtSeen'))), moduleOrigin));
 	}
+	const signalBindingNodes = [];
+	if (ctx.signalBindingsUsed) {
+		ctx.runtimeNeeded.add('enableSignalBindings');
+		signalBindingNodes.push(
+			inheritOriginLoc(
+				b.stmt(
+					b.call(
+						'_$enableSignalBindings',
+						b.literal(1),
+						...(ctx.signalBindingsEager ? [] : [b.literal(true)]),
+					),
+				),
+				moduleOrigin,
+			),
+		);
+	}
 
 	// All remaining authored memo sites have now received their real hook slots.
 	// Lower callable helpers, returned-JSX functions, explicit-slot calls and
@@ -10450,6 +11132,7 @@ function compileInternal(
 	// accidentally import DOM memo helpers for a universal renderer's scope.
 	let moduleBody = [
 		...nativeReadActivationNodes(ctx, moduleOrigin),
+		...signalBindingNodes,
 		...vtHintNodes,
 		...delegateNodes,
 		...styleNodes,
@@ -10502,9 +11185,12 @@ function compileInternal(
 	};
 	const printed = printNodeWithMap(program, ctx);
 
-	/** @type {{ code: string, map: any, diagnostics: any, inspect?: any, __universalSourceMapComposed?: boolean }} */
+	/** @type {{ code: string, map: any, diagnostics: any, inspect?: any, streamedSignals?: true, __universalSourceMapComposed?: boolean }} */
 	const result = {
 		code: printed.code,
+		...(ast._octaneSignalDeclarations === true || ctx.nativeReads
+			? { streamedSignals: true }
+			: null),
 		map: {
 			version: 3,
 			sources: [ctx.mapSourceName],
@@ -10625,6 +11311,8 @@ function compileServer(
 		nativeModuleStyles: options?.nativeReads === true && hasModuleStyleMaps(ast.body),
 		hmr: false, // SSR never hot-swaps in place; client/server production slot shapes stay aligned
 		dev: !!(options && options.dev),
+		signalBindingsUsed: ast._octaneSignalDeclarations === true,
+		signalBindingsEager: ast._octaneSignalDeclarations === true || options?.nativeReads === true,
 		// 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
@@ -10803,12 +11491,34 @@ function compileServer(
 	// the flush may register `hookSlots` as a needed runtime import.
 	flushTailHookSymbols(ctx);
 	const nativeActivation = nativeReadActivationNodes(ctx, ctx._moduleOrigin);
+	const signalActivation = [];
+	if (ctx.signalBindingsUsed || ctx.signalBindingsEager) {
+		ctx.runtimeNeeded.add('enableServerSignalBindings');
+		signalActivation.push(
+			inheritOriginLoc(
+				b.stmt(
+					b.call(
+						'_$enableServerSignalBindings',
+						b.literal(1),
+						...(ctx.signalBindingsEager ? [] : [b.literal(true)]),
+					),
+				),
+				ctx._moduleOrigin,
+			),
+		);
+	}
 	const runtimeImportNodes = buildRuntimeImportNodes(ctx, 'octane/server', ctx._moduleOrigin);
 	const helperNodes = hoistedHelperNodes(ctx);
 	const program = {
 		type: 'Program',
 		sourceType: 'module',
-		body: [...runtimeImportNodes, ...nativeActivation, ...helperNodes, ...bodyNodes],
+		body: [
+			...runtimeImportNodes,
+			...nativeActivation,
+			...signalActivation,
+			...helperNodes,
+			...bodyNodes,
+		],
 		metadata: { path: [] },
 		start: ast.start,
 		end: ast.end,
@@ -10817,6 +11527,9 @@ function compileServer(
 	const printed = printNodeWithMap(program, ctx);
 	const result = {
 		code: printed.code,
+		...(ast._octaneSignalDeclarations === true || ctx.nativeReads
+			? { streamedSignals: true }
+			: null),
 		map: {
 			version: 3,
 			sources: [ctx.mapSourceName],
@@ -10939,6 +11652,20 @@ function compileServerComponent(node, ctx) {
 	if (componentReferencedAboveDeclaration(ctx, node, name)) {
 		const declaration = isDefault ? b.export_default(fn) : isExported ? b.export(fn) : fn;
 		const nodes = [inheritOriginLoc(declaration, node)];
+		if (node._octaneBindingView) {
+			nodes.push(
+				inheritOriginLoc(
+					b.stmt(
+						b.call(
+							requireRuntimeForContext(ctx, 'bindPresentationView'),
+							b.id(name),
+							b.literal(node._octaneBindingView.id),
+						),
+					),
+					node,
+				),
+			);
+		}
 		if (warmNode !== null) {
 			nodes.push(
 				inheritOriginLoc(
@@ -10956,7 +11683,19 @@ function compileServerComponent(node, ctx) {
 		return nodes;
 	}
 
-	const initializer = functionExpressionFromDeclaration(fn, node);
+	let initializer = functionExpressionFromDeclaration(fn, node);
+	if (node._octaneBindingView) {
+		initializer = markPure(
+			inheritOriginLoc(
+				b.call(
+					requireRuntimeForContext(ctx, 'bindPresentationView'),
+					initializer,
+					b.literal(node._octaneBindingView.id),
+				),
+				node,
+			),
+		);
+	}
 	const declaration = inheritOriginLoc(b.const(name, initializer), node);
 	const nodes = [
 		isExported && !isDefault ? inheritOriginLoc(b.export(declaration), node) : declaration,
@@ -11262,8 +12001,19 @@ function ssrCompileBodyWithMapTemps(
 	// needs no carrier. Other bodies can cross a component/value boundary, where
 	// the carrier distinguishes compiled HTML from authored text returns. This
 	// flag belongs to this body only; nested callbacks keep their own contract.
-	if (!unboxedHtml) ctx.runtimeNeeded.add('ssrHtml');
-	body.push(b.return(unboxedHtml ? htmlExpr : ssrCall('ssrHtml', [htmlExpr], node)));
+	const htmlHelper = node._octaneBindingView ? 'ssrBindingHtml' : 'ssrHtml';
+	if (!unboxedHtml) ctx.runtimeNeeded.add(htmlHelper);
+	body.push(
+		b.return(
+			unboxedHtml
+				? htmlExpr
+				: ssrCall(
+						htmlHelper,
+						[htmlExpr, ...(node._octaneBindingView ? [b.literal(node._octaneBindingView.id)] : [])],
+						node,
+					),
+		),
+	);
 	const origin =
 		node.loc != null
 			? node
@@ -11294,10 +12044,20 @@ function ssrCompileBodyWithMapTemps(
 //              flow — all serialize elements or `<!--[-->…<!--]-->` ranges
 //              that break text-node adjacency on their own)
 function textAdjacencyKind(node, ctx) {
+	if (
+		node._octaneBindingText ||
+		node._octaneBindingOpaque ||
+		node._octaneBindingValue ||
+		node._octaneBindingSlot
+	)
+		return 'other';
 	if (node.type !== 'Text') return 'other';
 	const lit = staticTextLiteral(node.expression);
 	if (lit !== null) return lit === '' ? 'empty' : 'static';
-	return isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals) ? 'dyn' : 'other';
+	return isDirectSignalHandleExpression(node.expression) ||
+		isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals)
+		? 'dyn'
+		: 'other';
 }
 
 // Does the child at `i` have a text-producing sibling next to it (looking
@@ -11563,10 +12323,17 @@ function ssrEmitNode(
 	componentNs,
 	nlGuard = false,
 ) {
+	if (node._octaneBindingValue || node._octaneBindingSlot)
+		return ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
 	switch (node.type) {
 		case 'Text': {
 			const expr = node.expression;
-			if (expr && expr.type === 'Literal' && typeof expr.value === 'string') {
+			if (
+				!node._octaneBindingText &&
+				expr &&
+				expr.type === 'Literal' &&
+				typeof expr.value === 'string'
+			) {
 				if (ctx.dev && ctx._ssrNestingText === true) {
 					ctx.runtimeNeeded.add('ssrNestingText');
 					return ssrCall(
@@ -11604,30 +12371,44 @@ function ssrEmitNode(
 			// 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 (isKnownTextChildExpression(expr, ctx.knownStringChildLocals)) {
+			if (
+				isDirectSignalHandleExpression(expr) ||
+				isKnownTextChildExpression(expr, ctx.knownStringChildLocals)
+			) {
 				// ssrTextPre = ssrText + the runtime leading-'\n' protection (the value
 				// isn't known at compile time here).
 				const fn =
 					ctx.dev && ctx._ssrNestingText === true
 						? 'ssrNestingText'
-						: nlGuard
+						: nlGuard && !node._octaneBindingText
 							? 'ssrTextPre'
 							: 'ssrText';
 				ctx.runtimeNeeded.add(fn);
-				return ssrCall(fn, [resolveStyleExpr(rewriteHookCalls(expr, ctx, name), cssHash)], node);
+				const value = resolveStyleExpr(rewriteHookCalls(expr, ctx, name), cssHash);
+				const text = ssrCall(fn, [ssrSignalValue(value, ctx, node, true)], node);
+				return node._octaneBindingText
+					? ssrBindingRange(text, node._octaneBindingText, 't', ctx, node)
+					: text;
 			}
 			// rewriteJsxValues lowers any JSX embedded in the expression (e.g.
 			// `{cond && <div/>}`, a ternary, a `.map(x => <Row/>)`) to printable
 			// createElement(...) descriptors — exactly like ssrEmitTsrxExpression and
 			// the client makeChildCall. Without it the raw JSX leaks into the emitted
 			// ssrChild(...) call as unparseable source.
-			const childHelper = nlGuard ? 'ssrChildPre' : 'ssrChild';
+			const childHelper = node._octaneBindingOpaque
+				? 'ssrBindingChild'
+				: nlGuard
+					? 'ssrChildPre'
+					: 'ssrChild';
 			ctx.runtimeNeeded.add(childHelper);
 			const childExpr = ssrCall(
 				childHelper,
 				[
 					resolveStyleExpr(rewriteJsxValues(rewriteHookCalls(expr, ctx, name), ctx), cssHash),
 					b.id('__s'),
+					...(node._octaneBindingOpaque
+						? [b.literal(bindingMarker(node._octaneBindingOpaque, 'o'))]
+						: []),
 				],
 				node,
 			);
@@ -11708,7 +12489,9 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 	rejectVoidElementContent(tag, node, ctx);
 	rejectTextareaValueChildren(tag, node, ctx);
 	rejectDangerouslySetInnerHTMLChildren(tag, node, ctx);
-	const attrs = node.attributes || node.openingElement?.attributes || [];
+	const attrs = expandKnownAttributeSpreads(
+		node.attributes || node.openingElement?.attributes || [],
+	);
 	const devFormActionAttribute =
 		ctx.dev && (tag === 'form' || tag === 'button' || tag === 'input')
 			? attrs.find(
@@ -11808,15 +12591,42 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		else directAttributeIdentities.add(identity);
 	}
 	const firstSpreadIdx = attrs.findIndex(
-		(a) => a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute',
+		(a) => !a.knownSource && (a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute'),
 	);
-	// Customized built-ins suppress native unknown-property diagnostics based on
-	// the final `is` prop, regardless of where that prop appears in JSX. Resolve
-	// directly authored DEV hosts through the existing whole-element attribute
-	// snapshot so sibling validators see that final value before serialization.
-	// Production keeps its original fully baked/direct-serializer paths.
-	const resolveDevCustomizedHost =
-		ctx.dev &&
+	const hostSignalSite = directSignalSite(ctx, node, 'binding');
+	let directSignalControlSite = null;
+	const markDirectControl = (expression, origin) => {
+		if (!canCarryDirectSignalHandle(expression)) return expression;
+		const site = firstSpreadIdx === -1 ? directSignalSite(ctx, node, 'input') : hostSignalSite;
+		if (directSignalControlSite === null) {
+			if (directAttributeIdentities.has('data-octane-input')) {
+				throw new Error(
+					'`data-octane-input` is reserved for compiler-owned writable signal controls.',
+				);
+			}
+			directSignalControlSite = site;
+			bakeLit(` data-octane-input="${escapeAttr(site)}"`, 'data-octane-input', null, null);
+		}
+		ctx.signalBindingsUsed = true;
+		ctx.runtimeNeeded.add('ssrSignalControlValue');
+		return ssrCall('ssrSignalControlValue', [expression, b.literal(site)], origin);
+	};
+	if (firstSpreadIdx !== -1 && (tag === 'input' || tag === 'textarea' || tag === 'select')) {
+		directSignalControlSite = hostSignalSite;
+		if (directAttributeIdentities.has('data-octane-input')) {
+			throw new Error(
+				'`data-octane-input` is reserved for compiler-owned writable signal controls.',
+			);
+		}
+		bakeLit(` data-octane-input="${escapeAttr(hostSignalSite)}"`, 'data-octane-input', null, null);
+	}
+	// Customized built-ins suppress native unknown-property diagnostics based on
+	// the final `is` prop, regardless of where that prop appears in JSX. Resolve
+	// directly authored DEV hosts through the existing whole-element attribute
+	// snapshot so sibling validators see that final value before serialization.
+	// Production keeps its original fully baked/direct-serializer paths.
+	const resolveDevCustomizedHost =
+		ctx.dev &&
 		(selfNs === 'html' || selfNs === 'opaque') &&
 		!tag.includes('-') &&
 		directAttributeIdentities.has('is');
@@ -11964,13 +12774,40 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 	};
 
 	for (let attrI = 0; attrI < attrs.length; attrI++) {
-		const attr = attrs[attrI];
+		let attr = attrs[attrI];
+		if (attr.knownSource) {
+			attr.knownSource.expression = bindAttributeEvaluation(
+				tsrxExprNode(attr.argument, ctx, name, inlinedSubs),
+			);
+			continue;
+		}
+		if (attr.value?.type === 'JSXExpressionContainer') {
+			const expression = resolveKnownAttributeSource(
+				attr.value.expression,
+				(source) => source.expression,
+			);
+			if (expression !== attr.value.expression)
+				attr = { ...attr, value: { ...attr.value, expression } };
+		}
 		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') {
 			ensureAttrPart();
+			ctx.signalBindingsUsed = true;
 			ctx.runtimeNeeded.add('ssrAttrs');
 			ctx.runtimeNeeded.add('ssrSnapshotSpread');
 			const tmp = bindAttributeEvaluation(
-				ssrCall('ssrSnapshotSpread', [tsrxExprNode(attr.argument, ctx, name, inlinedSubs)], attr),
+				ssrCall(
+					'ssrSnapshotSpread',
+					[
+						tsrxExprNode(attr.argument, ctx, name, inlinedSubs),
+						...(tag === 'input' || tag === 'textarea' || tag === 'select'
+							? [b.literal(hostSignalSite)]
+							: ctx.nativeReads
+								? [undefinedNode()]
+								: []),
+						...(ctx.nativeReads ? [b.literal(true)] : []),
+					],
+					attr,
+				),
 			);
 			if (resolveFormControlsAcrossSpreads) {
 				if (tag !== 'textarea' && formControlPart === -1) {
@@ -12013,6 +12850,29 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		}
 		if (attr.type !== 'Attribute' && attr.type !== 'JSXAttribute') continue;
 		const rawAttrName = jsxAttrRawName(attr);
+		if (attr._octaneBindingClassGroups) {
+			const groups = attr._octaneBindingClassGroups;
+			ctx.runtimeNeeded.add('ssrBindingClass');
+			flush();
+			parts.push(
+				ssrCall(
+					'ssrBindingClass',
+					[
+						b.literal(groups.receipt),
+						bindAttributeEvaluation(
+							tsrxExprNode(
+								b.array([b.array(groups.baseline), b.array(groups.groups)]),
+								ctx,
+								name,
+								inlinedSubs,
+							),
+						),
+					],
+					attr,
+				),
+			);
+			continue;
+		}
 		if (rawAttrName === 'key') {
 			bindDiscardedAttributeValue(attr.value);
 			continue;
@@ -12084,10 +12944,13 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 			const ctlInner =
 				val == null ? null : val.type === 'JSXExpressionContainer' ? val.expression : val;
 			if (tag === 'input') {
-				const ctlExpr =
+				let ctlExpr =
 					ctlInner === null
 						? inheritOriginLoc(b.literal(true, 'true'), attr)
 						: tsrxExprNode(ctlInner, ctx, name, inlinedSubs);
+				if (attrName === 'value' || attrName === 'checked') {
+					ctlExpr = markDirectControl(ctlExpr, attr);
+				}
 				if (formControlPart === -1) {
 					flush();
 					formControlPart = parts.length;
@@ -12102,11 +12965,12 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 			}
 			// textarea / select: value/defaultValue never serialize as attributes —
 			// captured for the content position (textarea) / projection scope (select).
-			const ctlExpr = bindAttributeEvaluation(
+			let ctlExpr =
 				ctlInner === null
 					? inheritOriginLoc(b.literal(true, 'true'), attr)
-					: tsrxExprNode(ctlInner, ctx, name, inlinedSubs),
-			);
+					: tsrxExprNode(ctlInner, ctx, name, inlinedSubs);
+			if (attrName === 'value') ctlExpr = markDirectControl(ctlExpr, attr);
+			ctlExpr = bindAttributeEvaluation(ctlExpr);
 			if (resolveFormControlsAcrossSpreads) {
 				if (tag === 'select' && formControlPart === -1) {
 					flush();
@@ -12115,6 +12979,9 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 				}
 				formControlSources.push(ssrDirectSource(ctx, attrName, ctlExpr, attr));
 			} else if (attrName === 'value') {
+				if (directSignalControlSite !== null) {
+					formControlSources.push(ssrDirectSource(ctx, attrName, ctlExpr, attr));
+				}
 				ctlValue = ctlExpr;
 				ctlValueAttr = attr;
 			} else {
@@ -12238,6 +13105,8 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 					cssHash,
 				);
 				attrExpr = tsrxExprNode(attrInner, ctx, name, inlinedSubs);
+				if (!(ctx.nativeReads && attrName === 'style'))
+					attrExpr = ssrSignalValue(attrExpr, ctx, attr, true);
 			}
 			attrSources.push(
 				ssrDirectSource(
@@ -12279,6 +13148,13 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		let inner = val.type === 'JSXExpressionContainer' ? val.expression : val;
 
 		if (attrName === 'style') {
+			if (!ctx.nativeReads && isDirectSignalHandleExpression(inner)) {
+				throw new Error(
+					'Direct signal style objects cannot install property-targeted bindings. ' +
+						'Use fixed style properties such as `style={{ color: color$ }}`, or use `.get()` ' +
+						'for a one-way whole-style value.',
+				);
+			}
 			inner = resolveStyleExpr(inner, cssHash);
 			if (!isAfterSpread && inner.type === 'Literal' && typeof inner.value === 'string') {
 				bakeLit(` style="${escapeAttr(inner.value)}"`, attrName, attr.name, inner);
@@ -12297,13 +13173,11 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 			flush();
 			ctx.runtimeNeeded.add('ssrStyle');
 			registerAttrLoweringOrigin(ctx, attr.name, 'ssrStyle', null);
-			parts.push(
-				ssrCall(
-					'ssrStyle',
-					[bindAttributeEvaluation(tsrxExprNode(inner, ctx, name, inlinedSubs))],
-					attr,
-				),
-			);
+			inner = tsrxExprNode(inner, ctx, name, inlinedSubs);
+			if (ctx.nativeReads)
+				inner = b.call(requireRuntimeForContext(ctx, 'readNativeDomStyle'), inner);
+			else inner = ssrSignalStyleObject(inner, ctx, attr);
+			parts.push(ssrCall('ssrStyle', [bindAttributeEvaluation(inner)], attr));
 			continue;
 		}
 
@@ -12385,7 +13259,9 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		flush();
 		ctx.runtimeNeeded.add('ssrAttr');
 		registerAttrLoweringOrigin(ctx, attr.name, 'ssrAttr', attrName);
-		const valueExpr = bindAttributeEvaluation(tsrxExprNode(inner, ctx, name, inlinedSubs));
+		const valueExpr = bindAttributeEvaluation(
+			ssrSignalValue(tsrxExprNode(inner, ctx, name, inlinedSubs), ctx, attr, true),
+		);
 		if (
 			devFormActionSources !== null &&
 			(attrName === 'type' ||
@@ -12413,10 +13289,18 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		);
 		parts.push(singleDirectAttribute);
 	}
+	let signalControlAttrs = null;
+	if (directSignalControlSite !== null) {
+		ctx.runtimeNeeded.add('ssrSignalControlAttrs');
+		signalControlAttrs = ssrCall('ssrSignalControlAttrs', [b.array(formControlSources)], node);
+	}
 	if (formControlPart !== -1) {
 		if (tag === 'input') {
 			ctx.runtimeNeeded.add('ssrInputAttrs');
-			const inputAttrs = ssrCall('ssrInputAttrs', [b.array(formControlSources)], node);
+			let inputAttrs = ssrCall('ssrInputAttrs', [b.array(formControlSources)], node);
+			if (signalControlAttrs !== null) {
+				inputAttrs = inheritOriginLoc(b.binary('+', inputAttrs, signalControlAttrs), node);
+			}
 			// React serializes/coerces ordinary attributes before projecting the
 			// effective checked/value state. Expressions and spread getters have
 			// already run into temps in authored order; move only this serialization
@@ -12427,8 +13311,18 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 			parts.push(inputAttrs);
 		} else {
 			ctx.runtimeNeeded.add('ssrSelectAttrs');
-			parts[formControlPart] = ssrCall('ssrSelectAttrs', [b.array(formControlSources)], node);
-		}
+			const selectAttrs = ssrCall('ssrSelectAttrs', [b.array(formControlSources)], node);
+			parts[formControlPart] =
+				signalControlAttrs === null
+					? selectAttrs
+					: inheritOriginLoc(b.binary('+', selectAttrs, signalControlAttrs), node);
+		}
+	} else if (signalControlAttrs !== null) {
+		// Textarea values live in content; a direct select value lives in its
+		// option scope. Neither needs a form-attribute slot, but both still need
+		// the winning writable identity on the opening tag for early edits.
+		flush();
+		parts.push(signalControlAttrs);
 	}
 	if (attrPart !== -1) {
 		ctx.runtimeNeeded.add('ssrAttrs');
@@ -12439,6 +13333,7 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 				b.literal(tag, JSON.stringify(tag)),
 				b.literal(selfNs, JSON.stringify(selfNs)),
 				b.literal(resolveFormControlsAcrossSpreads),
+				...(ctx.nativeReads ? [b.id(requireRuntimeForContext(ctx, 'readNativeDomStyle'))] : []),
 			],
 			node,
 		);
@@ -12527,6 +13422,9 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 	} else if (
 		htmlSources.length === 0 &&
 		onlyChild0 !== null &&
+		!onlyChild0._octaneBindingOpaque &&
+		!onlyChild0._octaneBindingValue &&
+		!onlyChild0._octaneBindingSlot &&
 		staticTextLiteral(onlyChild0.expression) === null &&
 		!isKnownTextChildExpression(onlyChild0.expression, ctx.knownStringChildLocals)
 	) {
@@ -12746,11 +13644,12 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 
 function ssrEmitComponent(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs) {
 	registerOriginAlias(ctx, node.closingElement?.name, node.id || node.openingElement?.name);
+	const invocationSite = componentInvocationSite(ctx, node);
 	// 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;
+	const inherit = ctx._ssrInheritRoot === true && !node._octaneBindingSite;
 	ctx._ssrInheritRoot = false;
 	// Capture before compiling attributes/children: nested subs temporarily mutate
 	// this context flag. Only this component's immediate children sub inherits the
@@ -12905,11 +13804,11 @@ function ssrEmitComponent(node, ctx, name, inlinedSubs, parentNs, cssHash, compo
 		// The direct mode-only Activity was lowered to ActivityStatement. Richer
 		// Activity configs and generic explicit-key + spread sites keep one ordered
 		// element config, matching createElement without changing simple call sites.
-		ctx.runtimeNeeded.add('createElement');
+		ctx.runtimeNeeded.add('createElementFromConfig');
 		ctx.runtimeNeeded.add('ssrChild');
 		const descriptor = ssrCall(
-			'createElement',
-			[compExpr, inheritOriginLoc(b.object(propNodes), node)],
+			'createElementFromConfig',
+			[b.literal(invocationSite), compExpr, inheritOriginLoc(b.object(propNodes), node)],
 			node,
 		);
 		const child = ssrCall('ssrChild', [descriptor, b.id('__s')], node);
@@ -12929,16 +13828,38 @@ function ssrEmitComponent(node, ctx, name, inlinedSubs, parentNs, cssHash, compo
 		args.push(
 			b.literal(componentNs, JSON.stringify(componentNs)),
 			b.literal(inherit, inherit ? 'true' : 'false'),
+			keyExpr ?? undefinedNode(),
+			b.literal(invocationSite),
+		);
+	} else {
+		args.push(
+			b.literal(inherit, inherit ? 'true' : 'false'),
+			keyExpr ?? undefinedNode(),
+			undefinedNode(),
+			b.literal(invocationSite),
 		);
-		if (keyExpr !== null) args.push(keyExpr);
-	} else if (keyExpr !== null) {
-		args.push(b.literal(inherit, inherit ? 'true' : 'false'), keyExpr);
-	} else if (inherit) {
-		args.push(b.literal(true, 'true'));
+	}
+	if (node._octaneBindingSite) {
+		args.push(b.literal(bindingMarker(node._octaneBindingSite, 'v')));
 	}
 	return ssrCall(helper, args, node);
 }
 
+function bindingMarker(site, kind) {
+	return '[b;' + site.id + ';' + site.site + ';' + kind;
+}
+
+function bindingChildMarker(node) {
+	return node._octaneBindingSlot
+		? bindingMarker(node._octaneBindingSlot, 's')
+		: bindingMarker(node._octaneBindingValue, 't');
+}
+
+function ssrBindingRange(content, site, kind, ctx, origin) {
+	ctx.runtimeNeeded.add('ssrBindingBlock');
+	return ssrCall('ssrBindingBlock', [content, b.literal(bindingMarker(site, kind))], origin);
+}
+
 // ---------------------------------------------------------------------------
 // Server control flow — @if/@for/@switch/@try lowered to HTML-string builders.
 // Each branch/item/case body is compiled (via ssrCompileSub) into a server
@@ -13139,6 +14060,29 @@ function ssrEmitIf(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs)
 				node.alternate,
 			)
 		: ssrHtmlTemplate([], node, ctx);
+	if (node._octaneBindingSite) {
+		return ssrCall(
+			'ssrControl',
+			[
+				b.literal(ssrControlKey('if', node)),
+				ssrThunk(
+					b.conditional(
+						testExpr,
+						ssrBindingRange(thenInner, node._octaneBindingSite, thenSub ? '0' : '-1', ctx, node),
+						ssrBindingRange(
+							elseInner,
+							node._octaneBindingSite,
+							node.alternate ? '1' : '-1',
+							ctx,
+							node,
+						),
+					),
+					node,
+				),
+			],
+			node,
+		);
+	}
 	return ssrCall(
 		'ssrBlock',
 		[
@@ -13204,6 +14148,7 @@ function ssrEmitActivity(node, ctx, name, inlinedSubs, parentNs, cssHash, compon
 }
 
 function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs) {
+	const bindingSite = node._octaneBindingSite;
 	// rewriteHookCalls: key any `use(thenable)` in the @for iterable expression.
 	const itemsExpr = rewriteHookCalls(node.right, ctx, name);
 	const mapCall = node.nativeArrayMap || null;
@@ -13307,22 +14252,37 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 		node.index ? [b.id('__it'), b.id('__i')] : [b.id('__it')],
 		node,
 	);
-	const sharedItemRange = markerlessItem || canShareSsrComponentItemRange(node, ctx);
-	const itemHtml = sharedItemRange ? itemCall : ssrCall('ssrBlock', [itemCall], node);
-	const renderItem = itemNeedsIdentity
+	const sharedItemRange =
+		!bindingSite && (markerlessItem || canShareSsrComponentItemRange(node, ctx));
+	const itemHtml =
+		sharedItemRange || bindingSite ? itemCall : ssrCall('ssrBlock', [itemCall], node);
+	let renderItem = itemNeedsIdentity
 		? ssrCall(
 				'ssrForItem',
 				[
-					itemKey,
+					bindingSite ? b.id('__bindingKeyValue') : itemKey,
 					b.id(itemSub.fnName),
 					b.id('__it'),
 					node.index ? b.id('__i') : ssrVoid(node),
 					b.id('__s'),
-					b.literal(!sharedItemRange),
+					b.literal(!sharedItemRange && !bindingSite),
+					...(mapCall === null ? [] : [b.literal(true)]),
 				],
 				node,
 			)
 		: itemHtml;
+	if (bindingSite) {
+		ctx.runtimeNeeded.add('ssrBindingBlock');
+		ctx.runtimeNeeded.add('ssrBindingKey');
+		renderItem = ssrCall(
+			'ssrBindingBlock',
+			[
+				renderItem,
+				b.binary('+', b.literal(bindingMarker(bindingSite, 'k;')), b.id('__bindingKey')),
+			],
+			node,
+		);
+	}
 	if (node.empty) ctx.runtimeNeeded.add('ssrArm');
 	if (itemNeedsIdentity) ctx.runtimeNeeded.add('ssrForItem');
 	// Render every item into one incrementally-built string. Avoid map().join():
@@ -13336,8 +14296,30 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 	const index = b.id('__i');
 	const loopBody = b.block([
 		b.const('__it', b.member(items, index, true)),
+		...(bindingSite
+			? [
+					b.const('__bindingKeyValue', itemKey),
+					b.const(
+						'__bindingKey',
+						ssrCall('ssrBindingKey', [b.id('__bindingKeyValue'), b.id('__bindingKeys')], node),
+					),
+				]
+			: []),
 		b.stmt(b.assignment('+=', b.id('__html'), renderItem)),
 	]);
+	const forRange = (content, hasItems) =>
+		bindingSite
+			? ssrCall(
+					'ssrBindingBlock',
+					[
+						content,
+						b.literal(
+							'[f' + (hasItems ? '1' : '0') + ';b;' + bindingSite.id + ';' + bindingSite.site,
+						),
+					],
+					node,
+				)
+			: ssrCall('ssrForBlock', [content, b.literal(hasItems)], node);
 	const render = b.arrow(
 		[],
 		b.block([
@@ -13349,10 +14331,11 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 			),
 			b.if(
 				b.binary('===', b.member(items, 'length'), b.literal(0)),
-				b.return(ssrCall('ssrForBlock', [emptyCall, b.literal(false, 'false')], node)),
+				b.return(forRange(emptyCall, false)),
 				null,
 			),
-			...(itemNeedsIdentity && keyDeclaration !== null ? [keyDeclaration] : []),
+			...((itemNeedsIdentity || bindingSite) && keyDeclaration !== null ? [keyDeclaration] : []),
+			...(bindingSite ? [b.const('__bindingKeys', b.new(b.id('Set'), node))] : []),
 			b.let('__html', b.literal('')),
 			b.for(
 				b.let('__i', b.literal(0)),
@@ -13360,7 +14343,7 @@ function ssrEmitFor(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs
 				b.update('++', index),
 				loopBody,
 			),
-			b.return(ssrCall('ssrForBlock', [b.id('__html'), b.literal(true, 'true')], node)),
+			b.return(forRange(b.id('__html'), true)),
 		]),
 	);
 	const fast = ssrCall('ssrControl', [b.literal(ssrControlKey('for', node)), render], node);
@@ -13570,6 +14553,33 @@ function ssrControlKey(kind, node) {
 // renderer component so its template scopes and hydration range both survive.
 function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs) {
 	const expr = node.expression;
+	if (node._octaneBindingOpaque || node._octaneBindingValue || node._octaneBindingSlot) {
+		ctx.runtimeNeeded.add('ssrBindingChild');
+		const child = ssrCall(
+			'ssrBindingChild',
+			[
+				resolveStyleExpr(rewriteJsxValues(rewriteHookCalls(expr, ctx, name), ctx), cssHash),
+				b.id('__s'),
+				b.literal(
+					node._octaneBindingValue || node._octaneBindingSlot
+						? bindingChildMarker(node)
+						: bindingMarker(node._octaneBindingOpaque, 'o'),
+				),
+			],
+			node,
+		);
+		if (componentNs === null) return child;
+		ctx.runtimeNeeded.add('ssrInNamespace');
+		return ssrCall('ssrInNamespace', [b.literal(componentNs), ssrThunk(child, node)], node);
+	}
+	if (isDirectSignalHandleExpression(expr)) {
+		ctx.runtimeNeeded.add('ssrText');
+		return ssrCall(
+			'ssrText',
+			[ssrSignalValue(resolveStyleExpr(rewriteHookCalls(expr, ctx, name), cssHash), ctx, node)],
+			node,
+		);
+	}
 	if (node.returnedJsxValue === true && requiresTemplateNormalization(expr, 'html', true, ctx)) {
 		// A returned JSX value that contains template-only syntax is one compiled
 		// renderer on the client (rather than a descriptor array whose value
@@ -13594,7 +14604,19 @@ function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash,
 		);
 		inlinedSubs.push(sub.fn);
 		ctx.runtimeNeeded.add('ssrComponent');
-		return ssrCall('ssrComponent', [b.id('__s'), b.id(sub.fnName), b.object([])], node);
+		return ssrCall(
+			'ssrComponent',
+			[
+				b.id('__s'),
+				b.id(sub.fnName),
+				b.object([]),
+				b.literal(false),
+				undefinedNode(),
+				undefinedNode(),
+				b.literal(componentInvocationSite(ctx, node)),
+			],
+			node,
+		);
 	}
 	if (
 		expr &&
@@ -13624,10 +14646,7 @@ function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash,
 		// position — body/arm/fragment roots and component-children roots,
 		// where a rich hole rides the de-opt value path because a portal there
 		// has no host to stamp (`_ssrHostChildPos`).
-		const asIf = {
-			...b.if(expr.test, wrapAsBlockStmt(expr.consequent), wrapAsBlockStmt(expr.alternate)),
-			loc: expr.loc, // same devLoc/control-key position as the client's claim
-		};
+		const asIf = conditionalJsxStatement(expr);
 		return ssrEmitIf(asIf, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
 	}
 	ctx.runtimeNeeded.add('ssrChild');
@@ -14100,6 +15119,17 @@ function compileComponent(node, ctx, options) {
 			// back to a full reload — the capture predates the wrapper).
 			statements.push(guarded(b.assignment('=', b.id(name), b.call('_$hmr', b.id(name)))));
 		}
+		if (node._octaneBindingView) {
+			statements.push(
+				guarded(
+					b.call(
+						requireRuntimeForContext(ctx, 'bindPresentationView'),
+						b.id(name),
+						b.literal(node._octaneBindingView.id),
+					),
+				),
+			);
+		}
 		return { nodes: statements };
 	}
 
@@ -14129,6 +15159,18 @@ function compileComponent(node, ctx, options) {
 	// its fresh body to the previous canonical wrapper and re-export that same
 	// identity. Production components retain their tree-shakeable const binding.
 	let valueExpr = hmrWrap && isExported ? inheritOriginLoc(b.call('_$hmr', abiFn), node) : abiFn;
+	if (node._octaneBindingView) {
+		valueExpr = markPure(
+			inheritOriginLoc(
+				b.call(
+					requireRuntimeForContext(ctx, 'bindPresentationView'),
+					valueExpr,
+					b.literal(node._octaneBindingView.id),
+				),
+				node,
+			),
+		);
+	}
 	if (!hmrWrap && componentInfo?.singleRoot === true) {
 		valueExpr = inheritOriginLoc(singleRootInitializer(ctx, valueExpr), node);
 		componentInfo.singleRootInitialized = true;
@@ -14159,18 +15201,204 @@ function compileComponent(node, ctx, options) {
 	return { nodes: [declNode] };
 }
 
+/** Gate explicitly eligible presentation views; ordinary codegen stays direct. */
+function preparePresentationHydration(body, node, ctx) {
+	const proof = node._octanePresentationHydration;
+	if (!proof || ctx.mode === 'server' || ctx._universalRuntimeUnit != null) return body;
+	const writers = new Set([
+		'bindSignalAttribute',
+		'setEventHandler',
+		'setAttribute',
+		'setPlainAttribute',
+		'setURLAttribute',
+		'setStringData',
+		'setBooleanAttribute',
+		'setAriaAttribute',
+		'setClassName',
+		'setClassAttr',
+		'updateFreshClassName',
+		'updateFreshClassAttr',
+		'setBindingClass',
+		'setStyle',
+		'setStyleProperty',
+		'setStyleProperties',
+		'nativeStyleBinding',
+		'nativeProjectionBinding',
+	]);
+	if (proof.structural) {
+		writers.add('setText');
+		writers.add('bindSignalText');
+		writers.add('markDangerouslySetInnerHTMLChildren');
+	}
+	for (const name of [...writers]) {
+		if (name.startsWith('set')) writers.add(`${name}IfChanged`);
+	}
+	const preparation = new Set([
+		'clone',
+		'devHtmlNesting',
+		'devEventListener',
+		'queueRefAttach',
+		'replaceRef',
+		'queueOwnRefDetach',
+		'readNativeDomStyle',
+		'readNativeDomProps',
+	]);
+	if (proof.structural) {
+		preparation.add('snapshotSpread');
+		preparation.add('child');
+		preparation.add('sibling');
+		preparation.add('compilerMemoRegion');
+		preparation.add('hookMemoEqual');
+		preparation.add('beginNativeReadWitness');
+		preparation.add('finishNativeReadWitness');
+		preparation.add('replayNativeReadWitness');
+		preparation.add('validateNativeReadWitness');
+		preparation.add('drainFrag');
+		// Registration stores the compiler-owned plan; it does not invoke it or write DOM.
+		preparation.add('registerWarmPlan');
+		preparation.add('presentationStructure');
+		preparation.add('bindingText');
+		preparation.add('bindingChildSlot');
+		preparation.add('markBindingChildren');
+		preparation.add('markChildrenBlock');
+	}
+	const helpers = new Map(
+		[...ctx.runtimeNeeded].map((name) => [runtimeAliasForContext(ctx, name), name]),
+	);
+	let supported = proof.supported || proof.conditionalRest === true;
+	const hostProofs = new Map();
+	// Visit generated statements, but not authored callbacks or cleanup bodies.
+	// New DOM helpers fail closed until their preparation contract is audited.
+	const visit = (value, rewrite) => {
+		if (!value || typeof value !== 'object') return value;
+		if (Array.isArray(value)) return value.map((item) => visit(item, rewrite));
+		if (!value.type || /Function/.test(value.type)) return value;
+		if (value.type === 'ReturnStatement' && !value._octanePendingOutputGuard) supported = false;
+		const helper =
+			value.type === 'CallExpression' && value.callee.type === 'Identifier'
+				? helpers.get(value.callee.name)
+				: undefined;
+		const host =
+			helper === 'bindSignalHostPropSources' &&
+			proof.structural &&
+			value._octanePresentationHostSources?.length > 0;
+		if (
+			helper &&
+			!host &&
+			!writers.has(helper) &&
+			!preparation.has(helper) &&
+			!/^bag(?:\d+|Of)$/.test(helper)
+		)
+			supported = false;
+		const result = { ...value };
+		for (const key of Object.keys(value)) {
+			if (key !== 'loc' && key !== 'metadata') result[key] = visit(value[key], rewrite);
+		}
+		if (rewrite && host) {
+			const records = value._octanePresentationHostSources;
+			const key = JSON.stringify(records);
+			let receipt = hostProofs.get(key);
+			if (receipt === undefined) {
+				receipt = b.id(allocCompilerName(ctx, '__presentationHostSources'));
+				hostProofs.set(key, receipt);
+				ctx.hoistedHelpers.push(
+					inheritOriginLoc(
+						b.const(
+							receipt,
+							b.array(
+								records.map((record) =>
+									b.object(
+										Object.entries(record).map(([name, field]) =>
+											b.prop('init', b.id(name), b.literal(field)),
+										),
+									),
+								),
+							),
+						),
+						value,
+					),
+				);
+			}
+			const args = result.arguments.slice();
+			while (args.length < 7) args.push(undefinedNode());
+			return inheritOriginLoc(
+				b.call(
+					requireRuntimeForContext(ctx, 'presentationHostWrite'),
+					result.callee,
+					...args,
+					receipt,
+				),
+				value,
+			);
+		}
+		return rewrite && writers.has(helper)
+			? inheritOriginLoc(
+					b.call(
+						requireRuntimeForContext(ctx, 'presentationWrite'),
+						result.callee,
+						b.literal(helper),
+						...result.arguments,
+					),
+					value,
+				)
+			: result;
+	};
+	visit(body, false);
+	const frame = b.id(allocCompilerName(ctx, '__presentationHydration'));
+	const completed = b.id(allocCompilerName(ctx, '__presentationComplete'));
+	const failure = proof.structural ? b.id(allocCompilerName(ctx, '__presentationFailure')) : null;
+	const statements = supported ? visit(body, true) : body;
+	let directiveEnd = 0;
+	while (
+		statements[directiveEnd]?.type === 'ExpressionStatement' &&
+		typeof statements[directiveEnd].expression?.value === 'string'
+	)
+		directiveEnd++;
+	const begin = b.call(
+		requireRuntimeForContext(ctx, 'beginPresentationHydration'),
+		b.id('__s'),
+		b.literal(proof.id),
+		b.literal(supported),
+		...(proof.structural ? [b.literal(true)] : []),
+		...(proof.conditionalRest ? [b.literal(true)] : []),
+	);
+	// A new, unsupported writer can still render normally, but must reject an
+	// attempted lease before publishing anything. It never opens a frame.
+	if (!supported)
+		return [...statements.slice(0, directiveEnd), b.stmt(begin), ...statements.slice(directiveEnd)];
+	return [
+		...statements.slice(0, directiveEnd),
+		b.const(frame, begin),
+		b.let(completed, b.literal(false)),
+		b.try(
+			b.block([
+				...statements.slice(directiveEnd),
+				b.stmt(b.assignment('=', completed, b.literal(true))),
+			]),
+			failure === null
+				? null
+				: b.catch_clause(
+						failure,
+						null,
+						b.block([
+							b.stmt(b.call(requireRuntimeForContext(ctx, 'presentationFailure'), failure)),
+						]),
+					),
+			b.block([
+				b.stmt(b.call(requireRuntimeForContext(ctx, 'endPresentationHydration'), frame, completed)),
+			]),
+		),
+	];
+}
+
 /**
- * Generate just the `function (...) { ... }` text for a component-shaped node.
- * Used both for top-level components and for inlined for-of item bodies.
- *
- * `parentNs` is the namespace this body's JSX is rendered into. Top-level
- * components use 'opaque' because their call site can select HTML, SVG, or
- * MathML; an if/for/try body inherits its known host namespace.
- *
- * `cssHash` is the enclosing component's scoped-style hash (or null) — used to
- * resolve `{style ('cls')}` expressions to "<hash> cls" strings.
+ * Generate the function AST for a top-level component or inlined item body.
+ * `parentNs` is opaque for top-level components and inherited by directive
+ * bodies. `cssHash` selects the enclosing scoped-style expression fallback.
  */
 function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null, options = null) {
+	const previousPresentationHydration = ctx.presentationHydration;
+	ctx.presentationHydration = node._octanePresentationHydration;
 	const returnedOutput = options?.returnedOutput === true;
 	const previousAutoCalculatedRenderableRefs = ctx.currentAutoCalculatedRenderableRefs;
 	let autoCalculatedDeclarations = null;
@@ -14650,7 +15878,7 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 						b.member(b.member(b.id('__s'), 'block'), 'pending'),
 						b.unary('!', b.member(b.member(b.id('__s'), 'block'), 'crossRenderUpdate')),
 					),
-					b.return(null),
+					{ ...b.return(null), _octanePendingOutputGuard: true },
 					null,
 				),
 				node,
@@ -14773,13 +16001,15 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	ctx.currentMapTemps = prevMapTemps;
 	// ONE FunctionDeclaration node — the caller prints it (once, with the full
 	// esrap map for top-level components) or embeds it in an enclosing body.
+	const presentationBody = preparePresentationHydration(bodyStatements, node, ctx);
+	ctx.presentationHydration = previousPresentationHydration;
 	const emittedFunction = b.function_declaration(
 		b.id(name, node.id ?? node),
 		fnParams,
 		b.block(
 			ctx.nativeReads
-				? wrapNativeReadScope(bodyStatements, b.id('__s'), nativeReadNames(ctx))
-				: bodyStatements,
+				? wrapNativeReadScope(presentationBody, b.id('__s'), nativeReadNames(ctx))
+				: presentationBody,
 		),
 	);
 	return inheritOriginLoc(
@@ -15351,6 +16581,10 @@ function collectDepPaths(expr) {
 			return;
 		}
 		switch (n.type) {
+			case 'MetaProperty':
+				// `import.meta` and `new.target` contain syntax tokens, not free
+				// bindings. Visiting their Identifier children creates invalid deps.
+				return;
 			case 'Identifier':
 				if (!bound.has(n.name)) push(b.id(n.name), n.name);
 				return;
@@ -18219,10 +19453,29 @@ function compileReturnJsxFunction(node, ctx, options) {
 	// export follow-up statements — compile() embeds them in the single module
 	// AST, whose one esrap print yields the whole module map (chained consumers
 	// like @octanejs/mdx's two-stage .mdx map read segments off that print).
+	const bindingStamp = node._octaneBindingView
+		? [
+				inheritOriginLoc(
+					b.stmt(
+						b.logical(
+							'&&',
+							b.binary('===', b.unary('typeof', b.id(name)), b.literal('function')),
+							b.call(
+								requireRuntimeForContext(ctx, 'bindPresentationView'),
+								b.id(name),
+								b.literal(node._octaneBindingView.id),
+							),
+						),
+					),
+					node,
+				),
+			]
+		: [];
 	if (options && options.hmrWrap) {
 		const nodes = [
 			fn,
 			inheritOriginLoc(b.stmt(b.assignment('=', b.id(name), b.call('_$hmr', b.id(name)))), node),
+			...bindingStamp,
 		];
 		if (options.default) {
 			nodes.push(
@@ -18239,10 +19492,11 @@ function compileReturnJsxFunction(node, ctx, options) {
 		return { nodes };
 	}
 	if (options && options.default) {
-		return { nodes: [fn, inheritOriginLoc(b.export_default(b.id(name)), node)] };
+		return { nodes: [fn, ...bindingStamp, inheritOriginLoc(b.export_default(b.id(name)), node)] };
 	}
-	if (options && options.export) return { nodes: [inheritOriginLoc(b.export(fn), node)] };
-	return { nodes: [fn] };
+	if (options && options.export)
+		return { nodes: [inheritOriginLoc(b.export(fn), node), ...bindingStamp] };
+	return { nodes: [fn, ...bindingStamp] };
 }
 
 function nativeReturnedJsxValue(
@@ -18719,6 +19973,23 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 			newAttrs.push(attr);
 			continue;
 		}
+		if (attr._octaneBindingClassGroups) {
+			const lift = (expression) => {
+				const name = `h${holeProps.length}`;
+				holeProps.push(objectProp(name, rewriteJsxValues(expression, ctx)));
+				return memberProps(name, expression);
+			};
+			const group = attr._octaneBindingClassGroups;
+			newAttrs.push({
+				...attr,
+				_octaneBindingClassGroups: {
+					receipt: group.receipt,
+					baseline: group.baseline.map(lift),
+					groups: group.groups.map(lift),
+				},
+			});
+			continue;
+		}
 		const v = attr.value;
 		const inner = v && v.type === 'JSXExpressionContainer' ? v.expression : v;
 		// Dynamic attr = an expression value that isn't a static literal/string.
@@ -18787,9 +20058,10 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 				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), annotation)),
-				);
+				newChildren.push({
+					...child,
+					expression: b.ts_as(memberProps(hn, expr.expression), annotation),
+				});
 			} else {
 				holeProps.push(objectProp(hn, rewriteExtractedFragmentHole(expr, ctx, childNs)));
 				// The renderer only sees `props.hN`, so it cannot rediscover an inline
@@ -18800,15 +20072,16 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 				const rendered = isKnownTextChildExpression(expr, ctx.knownStringChildLocals)
 					? b.ts_as(member, b.ts_keyword_type('string'))
 					: member;
-				newChildren.push(b.jsx_expression_container(rendered));
+				newChildren.push({ ...child, expression: rendered });
 			}
 		} else if (t === 'Element' || t === 'JSXElement') {
 			if (isLongFormTemplateSentinel(child, childNs, true, ctx)) {
 				newChildren.push(extractFragment(child, ctx, holeProps, childNs));
 			} else if (
 				isComponentTag(child) &&
-				ctx._foldCtx?.templateComponentChildren === true &&
-				requiresTemplateNormalization(child, childNs, true, ctx)
+				(child._octaneBindingSite ||
+					(ctx._foldCtx?.templateComponentChildren === true &&
+						requiresTemplateNormalization(child, childNs, true, ctx)))
 			) {
 				// Component children normally become descriptor children at return-value
 				// position. A directive cannot be represented by lowerJsxChild, though, so
@@ -18877,7 +20150,12 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 			// before fragment extraction. It is still an owner-side renderable hole.
 			const hn = `h${holeProps.length}`;
 			holeProps.push(objectProp(hn, rewriteExtractedFragmentHole(child.expression, ctx, childNs)));
-			newChildren.push(b.jsx_expression_container(memberProps(hn, child)));
+			newChildren.push({
+				...b.jsx_expression_container(memberProps(hn, child)),
+				...(child._octaneBindingOpaque ? { _octaneBindingOpaque: child._octaneBindingOpaque } : {}),
+				...(child._octaneBindingValue ? { _octaneBindingValue: child._octaneBindingValue } : {}),
+				...(child._octaneBindingSlot ? { _octaneBindingSlot: child._octaneBindingSlot } : {}),
+			});
 		} else if ((t === 'IfStatement' || t === 'JSXIfExpression') && ctx._foldCtx) {
 			// FOLD a directive: lower its branch bodies on the COMPONENT side (so the
 			// `__then$N`/`__else$N` helpers keep their closure over setup locals/props),
@@ -18894,7 +20172,12 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 							inheritOriginLoc(b.if(child.test, child.consequent, child.alternate || null), child),
 							// The clause keyword's own span — `@else` starts before its
 							// block, so it is the only authored range that names the arm.
-							{ alternateKeyword: child.alternateKeyword ?? null },
+							{
+								alternateKeyword: child.alternateKeyword ?? null,
+								...(child._octaneBindingSite
+									? { _octaneBindingSite: child._octaneBindingSite }
+									: {}),
+							},
 						)
 					: child;
 			const ic = makeIfCall(ifNode, ctx, fc.compInlinedSubs, fc.parentNs, fc.cssHash);
@@ -18977,6 +20260,9 @@ function extractFragment(node, ctx, holeProps, parentNs = 'html') {
 								index: child.index || null,
 								empty: child.empty || null,
 								emptyKeyword: child.emptyKeyword ?? null,
+								...(child._octaneBindingSite
+									? { _octaneBindingSite: child._octaneBindingSite }
+									: {}),
 							},
 						)
 					: child;
@@ -19284,9 +20570,17 @@ function lowerHostFragment(
 	} else {
 		ctx.hoistedHelpers.push(renderer);
 	}
-	ctx.runtimeNeeded.add('createElement');
+	ctx.runtimeNeeded.add('createElementFromConfig');
 	// The fragment-renderer call maps to the authored fragment root.
-	return inheritOriginLoc(b.call('_$createElement', b.id(fragName), b.object(holeProps)), node);
+	return inheritOriginLoc(
+		b.call(
+			'_$createElementFromConfig',
+			b.literal(componentInvocationSite(ctx, node)),
+			b.id(fragName),
+			b.object(holeProps),
+		),
+		node,
+	);
 }
 
 /**
@@ -19591,7 +20885,7 @@ function serverValueDirectiveFold(
 				directive,
 			),
 		);
-		ctx.runtimeNeeded.add('createElement');
+		ctx.runtimeNeeded.add('createElementFromConfig');
 		// The wrapper call stands where the directive was authored, and every printed
 		// node needs an origin (assertNodeLocs). Inside a component body the enclosing
 		// statement supplied one; a module-level statement does not.
@@ -19603,7 +20897,12 @@ function serverValueDirectiveFold(
 			);
 		}
 		return inheritOriginLoc(
-			b.call('_$createElement', b.id(wrapperName), b.object(descriptorProps)),
+			b.call(
+				'_$createElementFromConfig',
+				b.literal(componentInvocationSite(ctx, directive)),
+				b.id(wrapperName),
+				b.object(descriptorProps),
+			),
 			directive,
 		);
 	};
@@ -20144,6 +21443,7 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 	const nameNode = node.openingElement?.name || node.id;
 	const activity = isActivityLongForm(node, ctx);
 	const componentTag = activity || isComponentTag(node);
+	const invocationSite = componentTag ? componentInvocationSite(ctx, node) : null;
 	// Host (lowercase) tag → string literal (`'li'`) for the de-opt renderer;
 	// component (capitalized / member / dynamic) → the identifier/member ref.
 	const compNode = activity
@@ -20161,6 +21461,15 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 	const attrs = node.attributes || node.openingElement?.attributes || [];
 	const properties = [];
 	for (const attr of attrs) {
+		if (
+			!componentTag &&
+			attr._octaneKnownAttributeSpread &&
+			attr.type !== 'JSXSpreadAttribute' &&
+			attr.type !== 'SpreadAttribute'
+		)
+			throw new Error(
+				'Native JSX attribute shorthands are not supported in descriptor-backed JSX values; use an owned template element.',
+			);
 		if (attr.type === 'SpreadAttribute' || attr.type === 'JSXSpreadAttribute') {
 			properties.push(b.spread(rewriteJsxValues(attr.argument, ctx)));
 			continue;
@@ -20217,7 +21526,21 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 			);
 		}
 	}
-	const propsNode = inheritOriginLoc(b.object(properties), node);
+	const propsObject = inheritOriginLoc(b.object(properties), node);
+	const propsNode =
+		ctx.nativeReads &&
+		!componentTag &&
+		attrs.some(
+			(attr) =>
+				attr.type === 'SpreadAttribute' ||
+				attr.type === 'JSXSpreadAttribute' ||
+				(attr.name?.name ?? attr.name) === 'style',
+		)
+			? inheritOriginLoc(
+					b.call(requireRuntimeForContext(ctx, 'readNativeDomProps'), propsObject),
+					node,
+				)
+			: propsObject;
 	const childrenNeedRenderScope = jsxValueChildrenNeedRenderScope(node);
 	const eagerProviderChildren =
 		eagerRoot &&
@@ -20344,13 +21667,30 @@ function jsxElementToCreateElement(node, ctx, eagerRoot = false) {
 			? requireRuntimeForContext(ctx, 'nativeCreateScopedElement')
 			: rtAlias('createScopedElement');
 		const readChildren = inheritOriginLoc(b.arrow([], memoizedChildrenBody ?? childrenValue), node);
-		descriptor = inheritOriginLoc(b.call(scopedElement, compNode, propsNode, readChildren), node);
+		descriptor = inheritOriginLoc(
+			b.call(
+				scopedElement,
+				compNode,
+				propsNode,
+				readChildren,
+				...(invocationSite === null ? [] : [b.literal(invocationSite)]),
+			),
+			node,
+		);
 	} else {
-		ctx.runtimeNeeded.add('createElement');
+		ctx.runtimeNeeded.add(componentTag ? 'createElementFromConfig' : 'createElement');
 		// Remaining scaffolding (callee, props object, spread/diagnostic wrappers,
 		// static-content literals) maps to the authored JSX element.
 		descriptor = inheritOriginLoc(
-			b.call('_$createElement', compNode, propsNode, ...loweredChildren),
+			componentTag
+				? b.call(
+						'_$createElementFromConfig',
+						b.literal(invocationSite),
+						compNode,
+						propsNode,
+						...(loweredChildren.length ? [b.array(loweredChildren)] : []),
+					)
+				: b.call('_$createElement', compNode, propsNode, ...loweredChildren),
 			node,
 		);
 	}
@@ -20994,6 +22334,14 @@ function rewriteOpaqueTitles(node, ctx, namespace = 'html') {
 function headAttrsExpression(el) {
 	const attrProps = [];
 	for (const a of el.openingElement.attributes || []) {
+		if (
+			a._octaneKnownAttributeSpread &&
+			a.type !== 'JSXSpreadAttribute' &&
+			a.type !== 'SpreadAttribute'
+		)
+			throw new Error(
+				'Native JSX attribute shorthands are not supported on hoisted head elements.',
+			);
 		if (a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute') {
 			attrProps.push(b.spread(a.argument));
 			continue;
@@ -21377,6 +22725,14 @@ function normalizeChildren(
 			out.push({
 				type: needsRichDispatch(expression) ? 'TSRXExpression' : 'Text',
 				expression,
+				...(n._octaneBindingText === undefined ? {} : { _octaneBindingText: n._octaneBindingText }),
+				...(n._octaneBindingOpaque === undefined
+					? {}
+					: { _octaneBindingOpaque: n._octaneBindingOpaque }),
+				...(n._octaneBindingValue === undefined
+					? {}
+					: { _octaneBindingValue: n._octaneBindingValue }),
+				...(n._octaneBindingSlot === undefined ? {} : { _octaneBindingSlot: n._octaneBindingSlot }),
 			});
 		} else if (n.type === 'JSXElement') {
 			// Long-form `<Fragment>…</Fragment>` (canary `enableFragmentRefs`
@@ -21493,6 +22849,7 @@ function normalizeChildren(
 				selfClosing: n.openingElement.selfClosing,
 				loc: n.loc, // preserve element position for dev hydration LOC (component slots)
 			};
+			if (n._octaneBindingSite !== undefined) element._octaneBindingSite = n._octaneBindingSite;
 			// `unstable_Activity` starts with a lowercase letter but is a component
 			// when it resolves to the builtin. Keep that fact on this rare node only.
 			if (isActivityLongForm(n, ctx)) element.activityDescriptor = true;
@@ -21544,6 +22901,9 @@ function normalizeChildren(
 			out.push(
 				Object.assign(inheritOriginLoc(b.if(n.test, n.consequent, n.alternate || null), n), {
 					alternateKeyword: n.alternateKeyword ?? null,
+					...(n._octaneBindingSite === undefined
+						? {}
+						: { _octaneBindingSite: n._octaneBindingSite }),
 				}),
 			);
 		} else if (n.type === 'JSXForExpression') {
@@ -21557,6 +22917,9 @@ function normalizeChildren(
 					index: n.index || null,
 					empty: n.empty || null,
 					emptyKeyword: n.emptyKeyword ?? null,
+					...(n._octaneBindingSite === undefined
+						? {}
+						: { _octaneBindingSite: n._octaneBindingSite }),
 				}),
 			);
 		} else if (n.type === 'JSXTryExpression') {
@@ -22278,8 +23641,24 @@ function stripTsOnlyWrappers(node) {
 function nativeReadActivationNodes(ctx, origin) {
 	// Install the graph-free driver before any authored root invocation, not
 	// after parameter evaluation inside a syntactically recognized component.
-	// Plain data modules do not pass through this renderer compilation path.
-	if (!ctx.nativeReads) return [];
+	// Binding-only activation modules use their selected native adapters, not
+	// this renderer driver. Retain the plain-module renderer-import policy for
+	// hand-authored createElement/root calls without generated runtime helpers.
+	if (
+		!ctx.nativeReads ||
+		(ctx.runtimeNeeded.size === 0 &&
+			!ctx.activityModuleAst.body.some(
+				(node) =>
+					node.type === 'ImportDeclaration' &&
+					node.importKind !== 'type' &&
+					['octane', 'octane/server', 'octane/signals/client', 'octane/signals/server'].includes(
+						node.source?.value,
+					) &&
+					(node.specifiers.length === 0 ||
+						node.specifiers.some((specifier) => specifier.importKind !== 'type')),
+			))
+	)
+		return [];
 	return [
 		inheritOriginLoc(
 			b.stmt(b.call(requireRuntimeForContext(ctx, 'enableNativeReadCollection'), b.literal(1))),
@@ -22874,7 +24253,7 @@ function planJsx(
 			// A dynamic text hole with a text-producing neighbour: the server emits a
 			// `<!-- -->` separator between the two texts (else the parser would merge
 			// them), and only the hole-aware sibling() walk knows to step across it.
-			elementBindings.some((b) => b.kind === 'text' && b.adjacentText);
+			elementBindings.some((b) => b.kind === 'text' && (b.adjacentText || b.bindingMarker));
 		if (hasHoles) {
 			ctx.runtimeNeeded.add('child');
 			ctx.runtimeNeeded.add('sibling');
@@ -23049,6 +24428,7 @@ function planJsx(
 	// happens on the intact template. (Regression: StoryRow's `.meta` interleaves text holes
 	// with `<Link>` components.)
 	const deferredTextMounts = [];
+	let nativeStyleSlots = 0;
 	// Emit per-binding mount code.
 	for (const b of elementBindings) {
 		// A sibling-position `{x as string}` text hole resolves to its POSITION node
@@ -23063,14 +24443,21 @@ function planJsx(
 		// htext/htextSwap/setAttribute (which only have the element) can report `file:line:col`.
 		if (_locStamped && b.kind !== 'text') stampHostLoc(elVar, b.path, undefined);
 		else if (_locStamped) stampHostLoc(ensureVar(b.path), b.path, undefined);
-		if (b.kind === 'text' || b.kind === 'textOnlyChild') ctx.runtimeNeeded.add('setText');
-		if (b.kind === 'text') ctx.runtimeNeeded.add('htextSwap');
+		const signalHelper = directSignalBindingHelper(b);
+		if (signalHelper !== null) {
+			ctx.runtimeNeeded.add(signalHelper);
+			registerAttrLoweringOrigin(ctx, b.nameOrigin, signalHelper, b.name);
+		}
+		if (!b.signalDirect && (b.kind === 'text' || b.kind === 'textOnlyChild')) {
+			ctx.runtimeNeeded.add('setText');
+		}
+		if (b.kind === 'text') ctx.runtimeNeeded.add(b.bindingMarker ? 'bindingText' : 'htextSwap');
 		if (b.kind === 'textOnlyChild') ctx.runtimeNeeded.add('htext');
 		// Mounts use the unconditional writer; reactive scalar bindings use either
 		// that writer behind an inline guard or its compact comparison helper.
 		// Claim both authored-name tokens when both paths exist, and do not retain
 		// a mount-only import for deferred writes.
-		const attrHelper = attrBindingHelper(b);
+		const attrHelper = b.signalDirect ? null : attrBindingHelper(b);
 		if (attrHelper !== null) {
 			if (b.kind === 'class' && b.fresh && (!b.deferred || (!b.mountOnly && inlineBindingGuards)))
 				ctx.runtimeNeeded.add('normalizeClass');
@@ -23088,8 +24475,12 @@ function planJsx(
 		if (b.kind === 'dangerCommit') ctx.runtimeNeeded.add('setDangerouslySetInnerHTMLSources');
 		if (b.kind === 'formCommit') ctx.runtimeNeeded.add('setFormControlSources');
 		if (b.kind === 'hostCommit') {
-			ctx.runtimeNeeded.add('setHostPropSources');
-			ctx.runtimeNeeded.add('queueOwnRefDetach');
+			if (ctx.nativeReads) b.readStyle = requireRuntimeForContext(ctx, 'readNativeDomStyle');
+			if (b.signalHostSources) ctx.runtimeNeeded.add('bindSignalHostPropSources');
+			else {
+				ctx.runtimeNeeded.add('setHostPropSources');
+				ctx.runtimeNeeded.add('queueOwnRefDetach');
+			}
 		}
 		// A commit-phase collector takes the element's props as one grouped call,
 		// so each source's name literal — not the shared helper — is what claims
@@ -23121,7 +24512,15 @@ function planJsx(
 		}
 		if (b.kind === 'styleProperties') {
 			ctx.runtimeNeeded.add('setStyleProperty');
-			ctx.runtimeNeeded.add('isHydratingStyle');
+			ctx.runtimeNeeded.add(b.spread ? 'canSplitStyleProperties' : 'isHydratingStyle');
+			if (b.spread) ctx.runtimeNeeded.add('styleObjectPrototype');
+		}
+		if (b.kind === 'nativeStyle' || b.kind === 'nativeProjection') {
+			b.slotIndex = ++nativeStyleSlots;
+			b.helper = requireRuntimeForContext(
+				ctx,
+				b.kind === 'nativeStyle' ? 'nativeStyleBinding' : 'nativeProjectionBinding',
+			);
 		}
 		if (b.kind === 'spread') {
 			ctx.runtimeNeeded.add('setSpread');
@@ -23383,7 +24782,8 @@ function planJsx(
 	const afterCalls = [];
 	const pushAfter = (id, line) => afterCalls.push({ id, line });
 	// Dense per-body slot indices. Slot 0 is this body's binding bag (`__s.slots[0]`);
-	// each control-flow / component / child construct gets index 1..N. The runtime
+	// native styles fill the following indices during binding mount. Each remaining
+	// control-flow / component / child construct gets the next index. The runtime
 	// runs the slot calls in `afterCalls` SORTED by source id, so we assign indices in
 	// that same id order — the scope's `slots` array is then written 0,1,2,… and stays
 	// PACKED (a holey array, written out of order, would be a slower elements-kind).
@@ -23398,7 +24798,7 @@ function planJsx(
 	allConstructs.sort((a, b) => a.id - b.id);
 	// Slot 0 is the binding bag for template bodies; control-flow-only (noTemplate)
 	// bodies have no bag, so their constructs start at slot 0.
-	const slotBase = noTemplate ? 0 : 1;
+	const slotBase = noTemplate ? 0 : 1 + nativeStyleSlots;
 	for (let i = 0; i < allConstructs.length; i++) allConstructs[i].slotIndex = i + slotBase;
 	// Hoisted head elements take the slots AFTER the constructs (and `plan.head` runs
 	// after `plan.after`), so the scope's `slots` array fills 0,1,…,N,N+1,… packed.
@@ -23743,26 +25143,37 @@ function planJsx(
 		ctx.runtimeNeeded.add('ifBlock');
 		registerDirectiveOrigin(ctx, org, ['_$ifBlock', ic.thenHelper, ic.elseHelper]);
 		registerClauseOrigin(ctx, ic.alternateKeyword, [ic.elseHelper]);
-		const call = b.stmt(
-			b.call(
-				'_$ifBlock',
-				b.id('__s'),
-				b.literal(slotIndex),
-				hostExpr,
-				condition,
-				helperRefNode(ic.thenHelper),
-				inheritOriginLoc(helperRefNode(ic.elseHelper ?? 'null'), ic.alternateKeyword),
-				...trailing,
-			),
+		let invocation = b.call(
+			'_$ifBlock',
+			b.id('__s'),
+			b.literal(slotIndex),
+			hostExpr,
+			condition,
+			helperRefNode(ic.thenHelper),
+			inheritOriginLoc(helperRefNode(ic.elseHelper ?? 'null'), ic.alternateKeyword),
+			...trailing,
 		);
-		pushAfterStmt(ic.id, org, conditionDeclaration ? b.block([conditionDeclaration, call]) : call);
+		if (ctx.presentationHydration?.structural && ic.bindingSite) {
+			invocation = b.call(
+				requireRuntimeForContext(ctx, 'presentationStructure'),
+				invocation.callee,
+				b.literal('if'),
+				b.literal(bindingMarker(ic.bindingSite, '')),
+				...invocation.arguments,
+			);
+		}
+		const call = b.stmt(invocation);
+		pushAfterStmt(ic.id, org, conditionDeclaration ? b.block([conditionDeclaration, call]) : call);
 	}
 	for (const cc of compCalls) {
 		const slotIndex = cc.slotIndex;
 		const org = cc.origin ?? planOrigin;
 		const hostExpr = () => hostNodeFor(`_compHost$${cc.id}`);
 		if (cc.hostChildrenBinding != null) {
-			const props = () => bagFieldNode(bag, `_host$${cc.hostChildrenBinding.id}`);
+			const props = () => {
+				const host = bagFieldNode(bag, `_host$${cc.hostChildrenBinding.id}`);
+				return cc.hostChildrenBinding.signalHostSources ? b.member(host, 'resolved') : host;
+			};
 			cc.valueExpr = b.conditional(
 				propertyIsEnumerableCall(props(), 'children'),
 				b.member(props(), 'children'),
@@ -23777,6 +25188,59 @@ function planJsx(
 		// component calls; only the emitted runtime call differs.
 		if (cc.isChild) {
 			const V = () => b.id('_v');
+			const childAnchor = anchorNodeFor(cc, 'compAnchor');
+			if (cc.bindingMarker) {
+				ctx.runtimeNeeded.add('bindingChildSlot');
+				pushAfterStmt(
+					cc.id,
+					org,
+					b.stmt(
+						b.call(
+							'_$bindingChildSlot',
+							b.id('__s'),
+							b.literal(slotIndex),
+							hostExpr(),
+							cc.valueExpr,
+							b.literal(cc.bindingMarker),
+							childAnchor ?? b.literal(null),
+							cc.anchorVar ? b.literal(true) : undefinedNode(),
+						),
+					),
+				);
+				continue;
+			}
+			if (!noTemplate && cc.signalSite != null && (ctx.signalBindingsUsed || ctx.nativeReads)) {
+				ctx.signalBindingsUsed = true;
+				ctx.signalBindingsEager = true;
+				ctx.runtimeNeeded.add('bindSignalChild');
+				const tokenKey = `_sigch$${cc.id}`;
+				bag.constField(tokenKey, b.literal(null));
+				pushAfterStmt(
+					cc.id,
+					org,
+					b.stmt(
+						b.assignment(
+							'=',
+							bagFieldNode(bag, tokenKey),
+							b.call(
+								'_$bindSignalChild',
+								b.id('__s'),
+								bagFieldNode(bag, tokenKey),
+								b.literal(slotIndex),
+								hostExpr(),
+								cc.valueExpr,
+								b.literal(cc.signalSite),
+								childAnchor ?? b.literal(null),
+								cc.anchorVar ? b.literal(true) : undefinedNode(),
+								undefinedNode(),
+								cc.coalesceRange ? b.literal(true) : undefinedNode(),
+								cc.onlyChildText ? b.literal(true) : undefinedNode(),
+							),
+						),
+					),
+				);
+				continue;
+			}
 			// MARKERLESS only-child renderable: append a primitive as a single Text
 			// node (no `<!>`, no slot state). Either the shared helper or the inline
 			// row guard compares its cached value/node before the ordinary child path.
@@ -23883,7 +25347,6 @@ function planJsx(
 			}
 			// Anchor node (null = append into an in-template element host) — see
 			// anchorNodeFor.
-			const childAnchor = anchorNodeFor(cc, 'compAnchor');
 			if (noTemplate) {
 				// No bag to cache on → the small `textSlot` wrapper (fast inline for a
 				// primitive into a text slot; delegates to `childSlot` otherwise).
@@ -23968,17 +25431,36 @@ function planJsx(
 				liteMemo ? 'componentSlotLite' : cc.voidComponent ? 'componentSlotVoid' : 'componentSlot',
 			);
 			const memoAnchor = anchorNodeFor(cc, 'compAnchor');
-			const trailing = memoAnchor ? [memoAnchor] : [];
-			if (!liteMemo && cc.inheritRange) {
-				if (trailing.length === 0) trailing.push(undefinedNode());
-				trailing.push(undefinedNode(), undefinedNode(), b.literal(true));
-			} else if (!liteMemo && cc.singleRoot) {
-				if (trailing.length === 0) trailing.push(undefinedNode());
-				trailing.push(undefinedNode(), b.literal(true));
-			}
+			const trailing = liteMemo
+				? [memoAnchor ?? undefinedNode(), b.literal(cc.invocationSite)]
+				: [
+						memoAnchor ?? undefinedNode(),
+						undefinedNode(),
+						cc.singleRoot ? b.literal(true) : undefinedNode(),
+						cc.inheritRange ? b.literal(true) : undefinedNode(),
+						undefinedNode(),
+						b.literal(cc.invocationSite),
+					];
 			const witnessMiss = cc.autoMemoWitnesses.length
 				? witnessMissChain(cc.autoMemoWitnesses)
 				: null;
+			let invocation = b.call(
+				componentHelper,
+				b.id('__s'),
+				b.literal(slotIndex),
+				hostExpr(),
+				cc.compNode,
+				cc.propsExpr,
+				...trailing,
+			);
+			if (ctx.presentationHydration?.structural && cc.bindingSite)
+				invocation = b.call(
+					requireRuntimeForContext(ctx, 'presentationStructure'),
+					invocation.callee,
+					b.literal('view'),
+					b.literal(bindingMarker(cc.bindingSite, 'v')),
+					...invocation.arguments,
+				);
 			pushAfterStmt(
 				cc.id,
 				org,
@@ -23986,17 +25468,7 @@ function planJsx(
 					ctx,
 					cc.autoMemoDeps,
 					slotIndex,
-					b.stmt(
-						b.call(
-							componentHelper,
-							b.id('__s'),
-							b.literal(slotIndex),
-							hostExpr(),
-							cc.compNode,
-							cc.propsExpr,
-							...trailing,
-						),
-					),
+					b.stmt(invocation),
 					witnessMiss,
 					cc.autoMemoContextAware,
 					depNodeFor(cc),
@@ -24036,6 +25508,8 @@ function planJsx(
 						undefinedNode(),
 						undefinedNode(),
 						b.literal(true),
+						undefinedNode(),
+						b.literal(cc.invocationSite),
 					),
 				),
 			);
@@ -24062,7 +25536,8 @@ function planJsx(
 						hostExpr(),
 						cc.compNode,
 						cc.propsExpr,
-						...(liteAnchor ? [liteAnchor] : []),
+						liteAnchor ?? undefinedNode(),
+						b.literal(cc.invocationSite),
 					),
 				),
 			);
@@ -24075,52 +25550,32 @@ function planJsx(
 		// unmount move the slot DOM along with the block; an element host with
 		// no in-template anchor can safely append).
 		const compAnchor = anchorNodeFor(cc, 'compAnchor');
-		const trailing = [];
-		let anchorFilled = false;
-		if (compAnchor) {
-			trailing.push(compAnchor);
-			anchorFilled = true;
-		}
-		// key arg is positional AFTER anchor in componentSlot's signature. When a
-		// key is present but anchor isn't, supply `undefined` for the anchor slot
-		// so the key lands in the right argument position — the runtime's
-		// `anchor ?? null` still routes through appendChild as before.
-		if (cc.keyExpr != null) {
-			if (!anchorFilled) {
-				trailing.push(undefinedNode());
-				anchorFilled = true;
-			}
-			trailing.push(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. `true` = proven same-module single-element root; `2` = the
-		// cross-module sentinel (runtime checks the callee's $$singleRoot stamp).
-		if (cc.singleRoot || cc.maybeSingleRoot) {
-			if (!anchorFilled) {
-				trailing.push(undefinedNode());
-				anchorFilled = true;
-			}
-			trailing.push(undefinedNode(), cc.singleRoot ? b.literal(true) : b.literal(2));
-		}
-		// Persist key ownership separately from the current key VALUE so
-		// `key={undefined}` remains an independent reconciliation boundary.
-		if (cc.keyExpr != null) trailing.push(undefinedNode(), undefinedNode(), b.literal(true));
-		pushAfterStmt(
-			cc.id,
-			org,
-			b.stmt(
-				b.call(
-					componentHelper,
-					b.id('__s'),
-					b.literal(slotIndex),
-					hostExpr(),
-					cc.compNode,
-					cc.propsExpr,
-					...trailing,
-				),
-			),
+		const trailing = [
+			compAnchor ?? undefinedNode(),
+			cc.keyExpr ?? undefinedNode(),
+			cc.singleRoot ? b.literal(true) : cc.maybeSingleRoot ? b.literal(2) : undefinedNode(),
+			undefinedNode(),
+			cc.keyExpr != null ? b.literal(true) : undefinedNode(),
+			b.literal(cc.invocationSite),
+		];
+		let invocation = b.call(
+			componentHelper,
+			b.id('__s'),
+			b.literal(slotIndex),
+			hostExpr(),
+			cc.compNode,
+			cc.propsExpr,
+			...trailing,
 		);
+		if (ctx.presentationHydration?.structural && cc.bindingSite)
+			invocation = b.call(
+				requireRuntimeForContext(ctx, 'presentationStructure'),
+				invocation.callee,
+				b.literal('view'),
+				b.literal(bindingMarker(cc.bindingSite, 'v')),
+				...invocation.arguments,
+			);
+		pushAfterStmt(cc.id, org, b.stmt(invocation));
 	}
 	for (const pc of ctx._portalCalls) {
 		const slotIndex = pc.slotIndex;
@@ -24497,6 +25952,70 @@ function commitSourceRows(sources, valueOf) {
 	return b.array(rows);
 }
 
+// Preserve the authored rest site's identity through known-spread expansion.
+// Its authored spread ordinal is not the eventual host-source row index.
+function presentationHostSourcesCall(bind, ...args) {
+	const call = b.call('_$bindSignalHostPropSources', ...args);
+	const receipts = bind.sources.flatMap(({ binding }, source) =>
+		binding.bindingRest ? [{ ...binding.bindingRest, source }] : [],
+	);
+	return receipts.length === 0 ? call : { ...call, _octanePresentationHostSources: receipts };
+}
+
+// Recombine a native spread snapshot only for mount/hydration or a key collision.
+// Spreading the snapshot cannot replay getters: the authored spreads already
+// copied their values before any of the trailing expressions were evaluated.
+function styleSpreadObject(bind, spread, valueOf) {
+	return b.object([
+		b.spread(spread),
+		...bind.properties.map((property, i) =>
+			b.prop(
+				'init',
+				inheritOriginLoc(b.literal(property.name), property.key),
+				valueOf(property, i),
+			),
+		),
+	]);
+}
+
+function styleSpreadNeedsFullStyle(bind, spread) {
+	return orChain([
+		...bind.properties.map((property) => b.binary('in', b.literal(property.name), spread)),
+		b.unary('!', b.call('_$canSplitStyleProperties')),
+	]);
+}
+
+// Native spreads create writable own data properties. Complete that fresh
+// snapshot in place only when it will be retained as the full style, and no
+// inherited setter or read-only property could intercept a trailing assignment.
+function completeStyleSpread(bind, spread, valueOf, needsFull) {
+	return b.conditional(
+		b.logical(
+			'&&',
+			needsFull,
+			b.unary(
+				'!',
+				orChain(
+					bind.properties.map((property) =>
+						b.binary('in', b.literal(property.name), b.id('_$styleObjectPrototype')),
+					),
+				),
+			),
+		),
+		b.sequence([
+			...bind.properties.map((property, i) =>
+				b.assignment(
+					'=',
+					b.member(spread, inheritOriginLoc(b.literal(property.name), property.key), true),
+					valueOf(property, i),
+				),
+			),
+			spread,
+		]),
+		styleSpreadObject(bind, spread, valueOf),
+	);
+}
+
 // 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
@@ -24504,15 +26023,18 @@ function commitSourceRows(sources, valueOf) {
 // `setClassName(el, undefined)` no-op on a freshly-cloned element (so the output
 // is byte-identical to the old unconditional mount write).
 function emitDeferredMount(bind, elVar, bag) {
-	// Whole-object styles diff on `_sty`; grouped styles use it only as a
-	// first-render marker. Each grouped property keeps a scalar previous value.
+	// Whole-object and spread-prefix styles diff on `_sty`; other grouped styles
+	// use it only as a first-render marker. Each trailing property keeps a scalar.
 	bag.constField(
-		bind.kind === 'style' || bind.kind === 'styleProperties'
-			? `_sty$${bind.id}`
-			: `_prev$${bind.id}`,
+		bind.signalDirect
+			? `_sig$${bind.id}`
+			: bind.kind === 'style' || bind.kind === 'styleProperties'
+				? `_sty$${bind.id}`
+				: `_prev$${bind.id}`,
 		bind.kind === 'styleProperty' || bind.kind === 'styleProperties' ? 'style-unset' : 'undefined',
 	);
 	if (bind.kind === 'styleProperties') {
+		if (bind.spread) bag.constField(`_styFull$${bind.id}`, 'undefined');
 		for (let i = 0; i < bind.properties.length; i++) {
 			bag.constField(`_prev$${bind.id}_${i}`, 'undefined');
 		}
@@ -24532,7 +26054,57 @@ function bindingOrigin(bind) {
 	return bind.expr && bind.expr.loc ? bind.expr : bind.origin;
 }
 
+function directSignalBindingHelper(bind) {
+	if (!bind.signalDirect) return null;
+	if (bind.kind === 'text' || bind.kind === 'textOnlyChild') return 'bindSignalText';
+	if (bind.kind === 'value' || bind.kind === 'selectValue') return 'bindSignalValue';
+	if (bind.kind === 'checked' || bind.kind === 'checkedCheckable') return 'bindSignalChecked';
+	return 'bindSignalAttribute';
+}
+
+function directSignalBindingArgs(bind, host, previous, value = bind.expr, previousValue) {
+	const common = [b.id('__s'), previous, host];
+	if (bind.kind === 'text' || bind.kind === 'textOnlyChild') {
+		return [
+			...common,
+			value,
+			b.literal(bind.signalSite, JSON.stringify(bind.signalSite)),
+			b.literal(bind.kind === 'textOnlyChild'),
+			...(previousValue !== undefined
+				? [
+						bind.seededText ? b.literal(1) : undefinedNode(),
+						bind.bindingMarker ? b.literal(bind.bindingMarker) : undefinedNode(),
+						previousValue,
+					]
+				: bind.bindingMarker
+					? [bind.seededText ? b.literal(1) : undefinedNode(), b.literal(bind.bindingMarker)]
+					: bind.seededText
+						? [b.literal(1)]
+						: []),
+		];
+	}
+	if (
+		bind.kind === 'value' ||
+		bind.kind === 'selectValue' ||
+		bind.kind === 'checked' ||
+		bind.kind === 'checkedCheckable'
+	) {
+		return [...common, bind.expr, b.literal(bind.signalSite, JSON.stringify(bind.signalSite))];
+	}
+	return [
+		...common,
+		attrLoweringToken(b.literal(bind.name), bind),
+		bind.expr,
+		b.literal(bind.signalSite, JSON.stringify(bind.signalSite)),
+		b.literal(bind.kind, JSON.stringify(bind.kind)),
+	];
+}
+
 function emitBindingMount(bind, elVar, bag) {
+	const knownExpression = resolveKnownAttributeSource(bind.expr, (source) =>
+		b.id(bag.local(`_prev$${source.binding.id}`)),
+	);
+	if (knownExpression !== bind.expr) bind = { ...bind, expr: knownExpression };
 	if (bind.deferred) return emitDeferredMount(bind, elVar, bag);
 	const org = bindingOrigin(bind);
 	const st = (node) => inheritOriginLoc(node, org);
@@ -24546,6 +26118,46 @@ function emitBindingMount(bind, elVar, bag) {
 	// name; everything else in the call maps to the value expression.
 	const callee = () => attrLoweringToken(b.id(`_$${attrBindingHelper(bind)}`), bind);
 	const nameLit = () => attrLoweringToken(b.literal(bind.name), bind);
+	const signalHelper = directSignalBindingHelper(bind);
+	if (signalHelper !== null) {
+		const text = bind.kind === 'text' || bind.kind === 'textOnlyChild';
+		let mount = b.call(
+			attrLoweringToken(b.id(`_$${signalHelper}`), bind),
+			...directSignalBindingArgs(bind, el(), undefinedNode(), text ? V() : bind.expr),
+		);
+		if (text) {
+			// A possible handle is not a subscription. Primitive text mounts through
+			// the canonical hydration/seeded-placeholder writer, without journaling
+			// a freshly cloned Text as though it were an existing update target.
+			const scalarMount =
+				bind.kind === 'textOnlyChild'
+					? b.call('_$htext', el(), V(), ...(bind.seededText ? [b.literal(1)] : []))
+					: bind.bindingMarker
+						? b.call('_$bindingText', el(), V(), b.literal(bind.bindingMarker))
+						: b.call('_$htextSwap', el(), V());
+			mount = b.conditional(
+				b.logical(
+					'||',
+					b.binary('===', V(), b.literal(null)),
+					b.logical(
+						'&&',
+						b.binary('!==', b.unary('typeof', V()), b.literal('object')),
+						b.binary('!==', b.unary('typeof', V()), b.literal('function')),
+					),
+				),
+				scalarMount,
+				mount,
+			);
+		}
+		return st(
+			b.block([
+				...mountHost(),
+				...(text ? [b.const('_v', bind.expr)] : []),
+				b.stmt(b.assignment('=', local(`_sig$${bind.id}`), mount)),
+				...(text ? [b.stmt(b.assignment('=', local(`_prev$${bind.id}`), V()))] : []),
+			]),
+		);
+	}
 	// `suppressHydrationWarning`: stamp a JS flag (NOT a DOM attribute) the runtime reads to
 	// keep the server value + skip the warning on a hydration mismatch for this element.
 	if (bind.kind === 'suppress') {
@@ -24571,11 +26183,42 @@ function emitBindingMount(bind, elVar, bag) {
 	if (bind.kind === 'formDiagnostic') {
 		const args = [el(), b.literal(bind.diagnosticKind)];
 		if (bind.selectedBinding !== undefined) {
-			args.push(b.arrow([], bagFieldNode(bag, `_prev$${bind.selectedBinding.id}`)));
+			const selected = bind.selectedBinding;
+			args.push(
+				b.arrow(
+					[],
+					bagFieldNode(bag, `${selected.signalDirect ? '_sig' : '_prev'}$${selected.id}`),
+				),
+			);
 		}
 		return st(b.stmt(b.call('_$queueFormAuthoringDiagnostic', ...args)));
 	}
 	switch (bind.kind) {
+		case 'nativeProjection': {
+			return st(
+				b.block([
+					...mountHost(),
+					b.stmt(
+						b.call(
+							bind.helper,
+							b.id('__s'),
+							b.literal(bind.slotIndex),
+							el(),
+							b.arrow([], bind.expr),
+							b.array(bind.fields.map((field) => b.literal(field))),
+						),
+					),
+				]),
+			);
+		}
+		case 'nativeStyle': {
+			return st(
+				b.block([
+					...mountHost(),
+					b.stmt(b.call(bind.helper, b.id('__s'), b.literal(bind.slotIndex), el(), bind.expr)),
+				]),
+			);
+		}
 		case 'textOnlyChild': {
 			// Only compiler-admitted native placeholders may be reused. An old
 			// two-argument caller or an excluded custom/template host must retain
@@ -24649,6 +26292,29 @@ function emitBindingMount(bind, elVar, bag) {
 			const sources = commitSourceRows(bind.sources, (binding, spread) =>
 				b.id(bag.local(`${spread ? '_sp' : '_prev'}$${binding.id}`)),
 			);
+			if (bind.signalHostSources) {
+				return st(
+					b.block([
+						...hostMount,
+						b.stmt(
+							b.assignment(
+								'=',
+								propsLocal,
+								presentationHostSourcesCall(
+									bind,
+									b.id('__s'),
+									undefinedNode(),
+									el(),
+									sources,
+									b.literal(bind.signalSite, JSON.stringify(bind.signalSite)),
+									b.literal(bind.hasNestedChildren === true),
+									...(bind.readStyle ? [b.id(bind.readStyle)] : []),
+								),
+							),
+						),
+					]),
+				);
+			}
 			// 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
 			// `_host$` field is re-written by updates, so the read must be live.
@@ -24674,6 +26340,7 @@ function emitBindingMount(bind, elVar, bag) {
 								undefinedNode(),
 								b.id('__s'),
 								b.literal(bind.hasNestedChildren === true),
+								...(bind.readStyle ? [b.id(bind.readStyle)] : []),
 							),
 						),
 					),
@@ -24692,7 +26359,18 @@ function emitBindingMount(bind, elVar, bag) {
 			return st(
 				b.block([
 					b.const('_v', bind.expr),
-					b.stmt(b.assignment('=', local(`_txt$${bind.id}`), b.call('_$htextSwap', el(), V()))),
+					b.stmt(
+						b.assignment(
+							'=',
+							local(`_txt$${bind.id}`),
+							b.call(
+								bind.bindingMarker ? '_$bindingText' : '_$htextSwap',
+								el(),
+								V(),
+								...(bind.bindingMarker ? [b.literal(bind.bindingMarker)] : []),
+							),
+						),
+					),
 					b.stmt(b.assignment('=', local(`_prev$${bind.id}`), V())),
 				]),
 			);
@@ -24754,6 +26432,34 @@ function emitBindingMount(bind, elVar, bag) {
 		}
 		case 'styleProperties': {
 			for (let i = 0; i < bind.properties.length; i++) bag.local(`_prev$${bind.id}_${i}`);
+			if (bind.spread) {
+				const spreadValues = () => b.id(bind.spreadName);
+				const spread = () => b.member(spreadValues(), b.literal(0), true);
+				const full = () => b.id(bind.fullName);
+				const merged = () => b.id(bind.mergedName);
+				const valueOf = (property) =>
+					b.member(spreadValues(), b.literal(property.evaluationIndex + 1), true);
+				return st(
+					b.block([
+						b.const(bind.spreadName, bind.expr),
+						b.const(bind.fullName, styleSpreadNeedsFullStyle(bind, spread())),
+						b.const(bind.mergedName, completeStyleSpread(bind, spread(), valueOf, full())),
+						b.stmt(b.call(callee(), el(), merged(), undefinedNode())),
+						...mountHost(),
+						b.stmt(
+							b.assignment(
+								'=',
+								local(`_sty$${bind.id}`),
+								b.conditional(full(), merged(), spread()),
+							),
+						),
+						b.stmt(b.assignment('=', local(`_styFull$${bind.id}`), full())),
+						...bind.properties.map((property, i) =>
+							b.stmt(b.assignment('=', local(`_prev$${bind.id}_${i}`), valueOf(property))),
+						),
+					]),
+				);
+			}
 			const entries =
 				bind.properties.length === bind.evaluations.length
 					? V()
@@ -24920,6 +26626,10 @@ function emitBindingMount(bind, elVar, bag) {
 }
 
 function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
+	const knownExpression = resolveKnownAttributeSource(bind.expr, (source) =>
+		bagFieldNode(bag, `_prev$${source.binding.id}`),
+	);
+	if (knownExpression !== bind.expr) bind = { ...bind, expr: knownExpression };
 	if (bind.mountOnly) return null;
 	const org = bindingOrigin(bind);
 	const st = (node) => inheritOriginLoc(node, org);
@@ -24932,7 +26642,79 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 	const callee = () =>
 		attrLoweringToken(b.id(`_$${attrBindingUpdateHelper(bind, inlineBindingGuards)}`), bind);
 	const nameLit = () => attrLoweringToken(b.literal(bind.name), bind);
+	const signalHelper = directSignalBindingHelper(bind);
+	if (signalHelper !== null) {
+		if (bind.kind === 'text' || bind.kind === 'textOnlyChild') {
+			return st(
+				b.block([
+					b.const('_v', bind.expr),
+					// Repeated primitives need neither a binding read nor a bag write.
+					// Objects/functions still re-enter: an unchanged handle can have
+					// changed value, pending, or error state since the last render.
+					b.if(
+						b.logical(
+							'||',
+							b.binary('!==', F('_prev'), V()),
+							b.logical(
+								'&&',
+								b.binary('!==', V(), b.literal(null)),
+								b.logical(
+									'||',
+									b.binary('===', b.unary('typeof', V()), b.literal('object')),
+									b.binary('===', b.unary('typeof', V()), b.literal('function')),
+								),
+							),
+						),
+						b.block([
+							b.stmt(
+								b.assignment(
+									'=',
+									F('_sig'),
+									b.call(
+										b.id(`_$${signalHelper}`),
+										...directSignalBindingArgs(bind, F('_el'), F('_sig'), V(), F('_prev')),
+									),
+								),
+							),
+							b.stmt(b.assignment('=', F('_prev'), V())),
+						]),
+					),
+				]),
+			);
+		}
+		return st(
+			b.stmt(
+				b.assignment(
+					'=',
+					F('_sig'),
+					b.call(
+						attrLoweringToken(b.id(`_$${signalHelper}`), bind),
+						...directSignalBindingArgs(bind, F('_el'), F('_sig')),
+					),
+				),
+			),
+		);
+	}
 	switch (bind.kind) {
+		case 'nativeProjection': {
+			return st(
+				b.stmt(
+					b.call(
+						bind.helper,
+						b.id('__s'),
+						b.literal(bind.slotIndex),
+						F('_el'),
+						b.arrow([], bind.expr),
+						b.array(bind.fields.map((field) => b.literal(field))),
+					),
+				),
+			);
+		}
+		case 'nativeStyle': {
+			return st(
+				b.stmt(b.call(bind.helper, b.id('__s'), b.literal(bind.slotIndex), F('_el'), bind.expr)),
+			);
+		}
 		case 'nativeChangeRuntime': {
 			return st(b.stmt(b.call('_$queueNativeChangeDiagnostic', F('_el'))));
 		}
@@ -25002,6 +26784,26 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 			const sources = commitSourceRows(bind.sources, (binding, spread) =>
 				bagFieldNode(bag, `${spread ? '_sp' : '_prev'}$${binding.id}`),
 			);
+			if (bind.signalHostSources) {
+				return st(
+					b.stmt(
+						b.assignment(
+							'=',
+							F('_host'),
+							presentationHostSourcesCall(
+								bind,
+								b.id('__s'),
+								F('_host'),
+								F('_el'),
+								sources,
+								b.literal(bind.signalSite, JSON.stringify(bind.signalSite)),
+								b.literal(bind.hasNestedChildren === true),
+								...(bind.readStyle ? [b.id(bind.readStyle)] : []),
+							),
+						),
+					),
+				);
+			}
 			return st(
 				b.stmt(
 					b.assignment(
@@ -25014,6 +26816,7 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 							F('_host'),
 							b.id('__s'),
 							b.literal(bind.hasNestedChildren === true),
+							...(bind.readStyle ? [b.id(bind.readStyle)] : []),
 						),
 					),
 				),
@@ -25131,8 +26934,76 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 			// Evaluate every authored value before the first CSS write, including
 			// fixed literal suffix values. Mount and hydration compare one complete
 			// style; ordinary updates only call the scalar setter for changed cells.
-			const values = bind.evaluations.map((value, i) => b.const(`_v${i}`, value));
-			const valueOf = (property) => b.id(`_v${property.evaluationIndex}`);
+			const valueName = (i) => bind.valueNames?.[i] ?? `_v${i}`;
+			const values = bind.evaluations.map((value, i) => b.const(valueName(i), value));
+			const valueOf = (property) => b.id(valueName(property.evaluationIndex));
+			if (bind.spread) {
+				const spread = b.id(bind.spreadName);
+				const needsFull = b.id(bind.fullName);
+				const merged = b.id(bind.mergedName);
+				const previous = (property, i) => bagFieldNode(bag, `_prev$${bind.id}_${i}`);
+				const initial = bind.deferred ? b.binary('===', F('_sty'), b.id('__s')) : b.literal(false);
+				const previousStyle = b.conditional(
+					F('_styFull'),
+					F('_sty'),
+					styleSpreadObject(bind, F('_sty'), previous),
+				);
+				const full = b.stmt(
+					b.call(
+						callee(),
+						F('_el'),
+						merged,
+						bind.deferred ? b.conditional(initial, undefinedNode(), previousStyle) : previousStyle,
+					),
+				);
+				const scalar = bind.properties.map((property, i) =>
+					b.if(
+						b.binary('!==', previous(property, i), valueOf(property)),
+						b.block([
+							b.stmt(
+								b.call(
+									attrLoweringToken(b.id('_$setStyleProperty'), bind),
+									F('_el'),
+									inheritOriginLoc(b.literal(property.name), property.key),
+									valueOf(property),
+									b.literal(''),
+									previous(property, i),
+								),
+							),
+						]),
+						null,
+					),
+				);
+				// A spread can insert a trailing key before a shorthand. Retain the
+				// complete object when required, so consecutive full diffs reuse it.
+				// This also preserves mutations by inherited getters on the complete
+				// receiver. Leaving full mode needs one complete diff before returning
+				// to prefix/scalar updates.
+				return st(
+					b.block([
+						b.const(bind.spreadName, bind.spread),
+						...values,
+						b.const(bind.fullName, styleSpreadNeedsFullStyle(bind, spread)),
+						b.if(
+							orChain([initial, needsFull, F('_styFull')]),
+							b.block([
+								b.const(bind.mergedName, completeStyleSpread(bind, spread, valueOf, needsFull)),
+								full,
+								b.stmt(b.assignment('=', F('_sty'), b.conditional(needsFull, merged, spread))),
+							]),
+							b.block([
+								b.stmt(b.call(callee(), F('_el'), spread, F('_sty'))),
+								...scalar,
+								b.stmt(b.assignment('=', F('_sty'), spread)),
+							]),
+						),
+						b.stmt(b.assignment('=', F('_styFull'), needsFull)),
+						...bind.properties.map((property, i) =>
+							b.stmt(b.assignment('=', previous(property, i), valueOf(property))),
+						),
+					]),
+				);
+			}
 			const entries = b.array(
 				bind.properties.flatMap((property) => [
 					inheritOriginLoc(b.literal(property.name), property.key),
@@ -25275,233 +27146,35 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 			// detaches the new ref.
 			const fi = () => b.id('_fi');
 			const cur = () => b.member(fi(), '_currentRef');
-			return st(
-				b.block([
-					b.const('_r', bind.expr),
-					b.const('_fi', F('_fi')),
-					b.if(
-						andChain([fi(), b.binary('!==', b.id('_r'), cur())]),
-						b.stmt(
-							b.assignment(
-								'=',
-								cur(),
-								b.call('_$replaceRef', b.id('__s'), cur(), b.id('_r'), fi()),
-							),
-						),
-						null,
-					),
-				]),
-			);
-		}
-	}
-	return null;
-}
-
-// ===========================================================================
-// HTML emission
-// ===========================================================================
-
-// ---------------------------------------------------------------------------
-// Template IR + origin recording (`inspect: true`). Static template HTML is
-// runtime DATA, not JavaScript syntax: the browser-facing `template(html)` ABI
-// intentionally stays a string. The compiler represents that data as an
-// structured tree of elements and typed data chunks until allocTemplate
-// serializes the completed template exactly once. Child templates compose by
-// transferring nodes, so no intermediate HTML is joined and no origin offsets
-// need to be shifted during construction. Origin spans remain local to their
-// chunk; the one serializer shifts them into final logical-HTML coordinates.
-//
-// Origin collection stays gated on `ctx.inspect`. The normal compile path pays
-// for the template chunks (the structural representation replacing string
-// concatenation) but not for source-span arrays.
-// ---------------------------------------------------------------------------
-
-/**
- * @typedef {{ start: number, end: number, srcStart: number, srcEnd: number,
- *   kind: 'tag-open' | 'tag-close' | 'attr-name' | 'attr-value' | 'text' }} TemplateOrigin
- */
-
-/**
- * @typedef {'syntax' | 'tag-open' | 'tag-close' | 'attribute' | 'text' |
- *   'anchor' | 'fragment-open' | 'fragment-close' | 'raw'} TemplatePartKind
- */
-
-/**
- * @typedef {{
- *   type: 'TemplatePart',
- *   kind: TemplatePartKind,
- *   value: string,
- *   origins: TemplateOrigin[] | null,
- *   length: number,
- * }} TemplatePart
- */
-
-/**
- * @typedef {{
- *   type: 'TemplateElement',
- *   tag: string,
- *   namespace: string,
- *   synthetic: boolean,
- *   opening: TemplatePart,
- *   attributes: TemplatePart[],
- *   openingEnd: TemplatePart,
- *   children: TemplateNode[],
- *   closing: TemplatePart | null,
- *   length: number,
- * }} TemplateElement
- */
-
-/** @typedef {TemplatePart | TemplateElement} TemplateNode */
-
-/**
- * @typedef {{
- *   type: 'Template',
- *   parts: TemplateNode[],
- *   length: number,
- * }} TemplateIR
- */
-
-/** @returns {TemplateIR} */
-function createTemplateIr() {
-	return { type: 'Template', parts: [], length: 0 };
-}
-
-/**
- * @param {string} value
- * @param {TemplatePartKind} [kind]
- * @param {TemplateOrigin[] | null} [origins]
- * @returns {TemplatePart}
- */
-function createTemplatePart(value, kind = 'raw', origins = null) {
-	return { type: 'TemplatePart', kind, value, origins, length: value.length };
-}
-
-/** @param {TemplateIR} template @param {TemplateNode} node */
-function appendTemplateNode(template, node) {
-	template.parts.push(node);
-	template.length += node.length;
-}
-
-/**
- * @param {TemplateIR} template
- * @param {string} value
- * @param {TemplatePartKind} [kind]
- * @param {TemplateOrigin[] | null} [origins]
- */
-function appendTemplatePart(template, value, kind = 'raw', origins = null) {
-	if (value === '') return;
-	appendTemplateNode(template, createTemplatePart(value, kind, origins));
-}
-
-/** @param {TemplateIR} into @param {TemplateIR} child */
-function appendTemplateIr(into, child) {
-	if (child.length === 0) return;
-	for (const part of child.parts) into.parts.push(part);
-	into.length += child.length;
-}
-
-/**
- * @param {string} value
- * @param {TemplatePartKind} [kind]
- * @param {TemplateOrigin[] | null} [origins]
- * @returns {TemplateIR}
- */
-function templatePart(value, kind = 'raw', origins = null) {
-	const template = createTemplateIr();
-	appendTemplatePart(template, value, kind, origins);
-	return template;
-}
-
-/**
- * @param {string} tag
- * @param {string} namespace
- * @param {boolean} voidElement
- * @param {TemplateIR} attributes
- * @param {TemplateIR} children
- * @param {TemplateOrigin[] | null} openOrigins
- * @param {TemplateOrigin[] | null} closeOrigins
- * @param {boolean} [synthetic]
- * @returns {TemplateIR}
- */
-function templateElement(
-	tag,
-	namespace,
-	voidElement,
-	attributes,
-	children,
-	openOrigins,
-	closeOrigins,
-	synthetic = false,
-) {
-	const opening = createTemplatePart(`<${tag}`, 'tag-open', openOrigins);
-	const openingEnd = createTemplatePart(voidElement ? '/>' : '>', 'syntax');
-	const closing = voidElement ? null : createTemplatePart(`</${tag}>`, 'tag-close', closeOrigins);
-	const node = {
-		type: 'TemplateElement',
-		tag,
-		namespace,
-		synthetic,
-		opening,
-		attributes: /** @type {TemplatePart[]} */ (attributes.parts),
-		openingEnd,
-		children: children.parts,
-		closing,
-		length:
-			opening.value.length +
-			attributes.length +
-			openingEnd.value.length +
-			children.length +
-			(closing === null ? 0 : closing.value.length),
-	};
-	const template = createTemplateIr();
-	appendTemplateNode(template, node);
-	return template;
-}
-
-/**
- * Serialize the completed template once. The IR already contains the exact
- * runtime bytes; this pass only joins them and converts chunk-local origins to
- * final logical-HTML offsets.
- *
- * @param {TemplateIR} template
- */
-function serializeTemplateIr(template) {
-	const values = [];
-	let origins = null;
-	let offset = 0;
-	const appendPart = (part) => {
-		values.push(part.value);
-		if (part.origins !== null) {
-			origins ??= [];
-			for (const origin of part.origins) {
-				origins.push({
-					start: origin.start + offset,
-					end: origin.end + offset,
-					srcStart: origin.srcStart,
-					srcEnd: origin.srcEnd,
-					kind: origin.kind,
-				});
-			}
-		}
-		offset += part.value.length;
-	};
-	const visit = (node) => {
-		if (node.type === 'TemplatePart') {
-			appendPart(node);
-			return;
+			return st(
+				b.block([
+					b.const('_r', bind.expr),
+					b.const('_fi', F('_fi')),
+					b.if(
+						andChain([fi(), b.binary('!==', b.id('_r'), cur())]),
+						b.stmt(
+							b.assignment(
+								'=',
+								cur(),
+								b.call('_$replaceRef', b.id('__s'), cur(), b.id('_r'), fi()),
+							),
+						),
+						null,
+					),
+				]),
+			);
 		}
-		appendPart(node.opening);
-		for (const attribute of node.attributes) appendPart(attribute);
-		appendPart(node.openingEnd);
-		for (const child of node.children) visit(child);
-		if (node.closing !== null) appendPart(node.closing);
-	};
-	for (const node of template.parts) {
-		visit(node);
 	}
-	return { html: values.join(''), origins };
+	return null;
 }
 
+// ===========================================================================
+// HTML emission
+// ===========================================================================
+
+/** @typedef {import('./template-ir.js').TemplateIR} TemplateIR */
+/** @typedef {import('./template-ir.js').TemplateOrigin} TemplateOrigin */
+
 // Record the origin entries for one static-attribute chunk appended at `base`
 // (a bakeStaticAttr result or the inline ` style="…"` bakes, which share the
 // same layout). Uses bakeStaticAttr's documented LAYOUT INVARIANT — ` name`
@@ -25572,15 +27245,36 @@ function emitNodeHtml(
 	parentNs = 'html',
 	cssHash = null,
 ) {
+	if (node._octaneBindingValue || node._octaneBindingSlot) {
+		const ch = makeChildCall(node.expression, ctx, componentName, inlinedSubs, cssHash, parentNs);
+		ch.bindingMarker = bindingChildMarker(node);
+		ch.hostPath = path.slice(0, -1);
+		ch.anchorPath = path;
+		compCalls.push(ch);
+		return templatePart('<!>', 'anchor');
+	}
 	if (node.type === 'Text') {
-		if (isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals)) {
-			bindings.push({
-				id: bindings.length,
-				kind: 'text',
-				expr: resolveStyleExpr(node.expression, cssHash),
-				path: path.slice(0, -1),
-				childIndex: path[path.length - 1],
-			});
+		if (
+			isDirectSignalHandleExpression(node.expression) ||
+			isKnownTextChildExpression(node.expression, ctx.knownStringChildLocals)
+		) {
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'text',
+						expr: resolveStyleExpr(node.expression, cssHash),
+						bindingMarker: node._octaneBindingText
+							? bindingMarker(node._octaneBindingText, 't')
+							: undefined,
+						path: path.slice(0, -1),
+						childIndex: path[path.length - 1],
+					},
+					ctx,
+					node.expression,
+					'binding',
+				),
+			);
 			return templatePart('<!>', 'anchor');
 		}
 		// Bare `{expr}` (no string cast) → RENDERABLE hole at a top-level / multi-
@@ -25599,6 +27293,28 @@ function emitNodeHtml(
 	// cannot represent a Fragment ref or template-only control flow in that body.
 	// Ordinary root portals keep their existing descriptor/childSlot lowering.
 	if (node.type === 'TSRXExpression') {
+		if (isDirectSignalHandleExpression(node.expression)) {
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'text',
+						expr: tsrxExprNode(
+							resolveStyleExpr(node.expression, cssHash),
+							ctx,
+							componentName,
+							inlinedSubs,
+						),
+						path: path.slice(0, -1),
+						childIndex: path[path.length - 1],
+					},
+					ctx,
+					node.expression,
+					'binding',
+				),
+			);
+			return templatePart('<!>', 'anchor');
+		}
 		const fragmentBindings = ctx._fragRefStack;
 		if (
 			isCreatePortalCall(node.expression) &&
@@ -25908,7 +27624,9 @@ function emitElementHtml(
 	const hostNs = nsForSelf(tag, parentNs);
 	const childNs = nsForChildren(tag, parentNs);
 	// Collect attributes.
-	const attrs = node.attributes || node.openingElement?.attributes || [];
+	const attrs = expandKnownAttributeSpreads(
+		node.attributes || node.openingElement?.attributes || [],
+	);
 	// A null/undefined child alongside direct raw HTML is semantically absent.
 	// Suppress its child binding so hydration cannot clear the raw HTML that the
 	// preceding binding just adopted/applied.
@@ -25924,7 +27642,7 @@ function emitElementHtml(
 	// into the template HTML (the spread would clobber them at runtime) —
 	// emit them as bindings in source order instead.
 	const firstSpreadIdx = attrs.findIndex(
-		(a) => a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute',
+		(a) => !a.knownSource && (a.type === 'SpreadAttribute' || a.type === 'JSXSpreadAttribute'),
 	);
 	const directPropIdentities = new Set();
 	let hasDuplicateDirectProp = false;
@@ -25959,11 +27677,21 @@ function emitElementHtml(
 		(tag === 'select' &&
 			directPropNames.has('multiple') &&
 			(directPropNames.has('value') || directPropNames.has('defaultValue')));
+	const hasDirectSignalStyle =
+		!ctx.nativeReads &&
+		attrs.some((attr) => {
+			if (attr.type !== 'Attribute' && attr.type !== 'JSXAttribute') return false;
+			if (normalizeJsxAttrName(jsxAttrRawName(attr), tag, hostNs) !== 'style') return false;
+			const value = attr.value;
+			const inner = value?.type === 'JSXExpressionContainer' ? value.expression : value;
+			return spreadContainsDirectSignalHandle(inner);
+		});
 	const resolveHostPropsAcrossSources =
 		firstSpreadIdx !== -1 ||
 		hasDuplicateDirectProp ||
 		hasDirectFormCascade ||
-		resolveDevCustomizedHost;
+		resolveDevCustomizedHost ||
+		hasDirectSignalStyle;
 	const hostClientSources = [];
 	let directChildrenClientBinding = null;
 	let hostCommitClientBinding = null;
@@ -26004,9 +27732,45 @@ function emitElementHtml(
 		typeWriters.length === 1 &&
 		(staticInputType === 'checkbox' || staticInputType === 'radio');
 	const attrTemplate = createTemplateIr();
+	let directSignalControlSite = null;
+	const ensureDirectControlSite = (site) => {
+		if (directSignalControlSite !== null) return;
+		if (directPropNames.has('data-octane-input')) {
+			throw new Error(
+				'`data-octane-input` is reserved for compiler-owned writable signal controls.',
+			);
+		}
+		directSignalControlSite = site;
+		appendTemplatePart(attrTemplate, ` data-octane-input="${escapeAttr(site)}"`, 'attribute', null);
+	};
+	const markDirectControl = (binding, expression, origin) => {
+		if (!canCarryDirectSignalHandle(expression)) return binding;
+		const site = directSignalSite(ctx, node, 'input');
+		ensureDirectControlSite(site);
+		ctx.signalBindingsUsed = true;
+		ctx.signalBindingsEager = true;
+		return { ...binding, signalDirect: true, signalSite: site };
+	};
+	const hostSignalSite = directSignalSite(ctx, node, 'binding');
+	if (firstSpreadIdx !== -1 && (tag === 'input' || tag === 'textarea' || tag === 'select')) {
+		ensureDirectControlSite(hostSignalSite);
+	}
 	let sawRef = false;
 	for (let attrI = 0; attrI < attrs.length; attrI++) {
 		const attr = attrs[attrI];
+		if (attr._octaneKnownProjectionSource) continue;
+		if (attr.knownSource) {
+			const binding = {
+				id: bindings.length,
+				kind: attr.knownSource.projection ? 'nativeProjection' : 'hostValue',
+				expr: tsrxExprNode(attr.argument, ctx, componentName, inlinedSubs),
+				fields: attr.knownSource.fields,
+				path,
+			};
+			attr.knownSource.binding = binding;
+			bindings.push(binding);
+			continue;
+		}
 		// `<div {...props}/>` — runtime spread. Emits one setSpread binding that
 		// routes each key (class / style / on… / attr / ref) and diffs against
 		// the prior spread object to clear removed keys.
@@ -26015,6 +27779,7 @@ function emitElementHtml(
 			const binding = {
 				id: bindings.length,
 				kind: 'hostSpread',
+				...(attr._octaneBindingRest ? { bindingRest: attr._octaneBindingRest } : {}),
 				// The INNER spread argument; the emit re-derives the
 				// `_$snapshotSpread(…)` wrapper around it.
 				expr: tsrxExprNode(attr.argument, ctx, componentName, inlinedSubs),
@@ -26027,6 +27792,24 @@ function emitElementHtml(
 		}
 		if (attr.type !== 'Attribute' && attr.type !== 'JSXAttribute') continue;
 		const rawAttrName = jsxAttrRawName(attr);
+		if (attr._octaneBindingClassGroups) {
+			const group = attr._octaneBindingClassGroups;
+			bindings.push({
+				id: bindings.length,
+				kind: 'attr',
+				name: group.receipt,
+				attributeHelper: 'setBindingClass',
+				expr: tsrxExprNode(
+					b.array([b.array(group.baseline), b.array(group.groups)]),
+					ctx,
+					componentName,
+					inlinedSubs,
+				),
+				path,
+				nameOrigin: attr.name,
+			});
+			continue;
+		}
 		if (resolveHostPropsAcrossSources) {
 			if (rawAttrName === 'ref') {
 				if (sawRef) {
@@ -26066,6 +27849,13 @@ function emitElementHtml(
 						ctx.inspect,
 					);
 				}
+				if (
+					(tag === 'input' || tag === 'textarea' || tag === 'select') &&
+					(rawAttrName === 'value' || (tag === 'input' && rawAttrName === 'checked')) &&
+					isDirectSignalHandleExpression(inner)
+				) {
+					ensureDirectControlSite(hostSignalSite);
+				}
 				expr = tsrxExprNode(inner, ctx, componentName, inlinedSubs);
 			}
 			const binding = {
@@ -26257,19 +28047,17 @@ function emitElementHtml(
 			resolveFormControlsAcrossSpreads &&
 			(ctlKind !== null || (tag === 'select' && attrName === 'multiple'))
 		) {
+			const sourceExpr =
+				val == null
+					? b.literal(true, 'true', attr)
+					: val.type === 'JSXExpressionContainer'
+						? val.expression
+						: val;
 			const binding = {
 				id: bindings.length,
 				kind: 'formValue',
 				name: attrName,
-				expr:
-					val == null
-						? b.literal(true, 'true', attr)
-						: tsrxExprNode(
-								val.type === 'JSXExpressionContainer' ? val.expression : val,
-								ctx,
-								componentName,
-								inlinedSubs,
-							),
+				expr: tsrxExprNode(sourceExpr, ctx, componentName, inlinedSubs),
 				path,
 			};
 			bindings.push(binding);
@@ -26287,22 +28075,28 @@ function emitElementHtml(
 			} else if (ctlKind === 'checked' && leanChecked) {
 				ctlKind = 'checkedCheckable';
 			}
-			bindings.push({
+			const sourceExpr =
+				val == null
+					? b.literal(true, 'true', attr)
+					: val.type === 'JSXExpressionContainer'
+						? val.expression
+						: val;
+			const binding = {
 				id: bindings.length,
 				kind: ctlKind,
-				expr:
-					val == null
-						? b.literal(true, 'true', attr)
-						: tsrxExprNode(
-								val.type === 'JSXExpressionContainer' ? val.expression : val,
-								ctx,
-								componentName,
-								inlinedSubs,
-							),
+				expr: tsrxExprNode(sourceExpr, ctx, componentName, inlinedSubs),
 				path,
 				ns: hostNs,
 				nameOrigin: attr.name,
-			});
+			};
+			bindings.push(
+				ctlKind === 'value' ||
+					ctlKind === 'selectValue' ||
+					ctlKind === 'checked' ||
+					ctlKind === 'checkedCheckable'
+					? markDirectControl(binding, sourceExpr, attr)
+					: binding,
+			);
 			continue;
 		}
 		// `autoFocus` never bakes/writes an attribute — React parity: the
@@ -26359,11 +28153,32 @@ function emitElementHtml(
 		// template (unless we're after a spread, which would clobber it); a fixed
 		// literal prefix plus dynamic suffix can avoid a whole-object diff.
 		if (attrName === 'style') {
+			if (!ctx.nativeReads && isDirectSignalHandleExpression(inner)) {
+				throw new Error(
+					'Direct signal style objects cannot install property-targeted bindings. ' +
+						'Use fixed style properties such as `style={{ color: color$ }}`, or use `.get()` ' +
+						'for a one-way whole-style value.',
+				);
+			}
 			if (!isAfterSpread && inner.type === 'Literal' && typeof inner.value === 'string') {
 				const chunk = ` style="${escapeAttr(inner.value)}"`;
 				appendBakedAttribute(attrTemplate, chunk, attrName, attr.name, inner, ctx.inspect);
 				continue;
 			}
+			if (
+				ctx.nativeReads &&
+				(inner.type !== 'ObjectExpression' || !objectExprIsStaticLiteral(inner))
+			) {
+				bindings.push({
+					id: bindings.length,
+					kind: 'nativeStyle',
+					expr: tsrxExprNode(inner, ctx, componentName, inlinedSubs),
+					path,
+					ns: hostNs,
+					nameOrigin: attr.name,
+				});
+				continue;
+			}
 			if (
 				!isAfterSpread &&
 				inner.type === 'ObjectExpression' &&
@@ -26398,7 +28213,7 @@ function emitElementHtml(
 					for (const entry of mixed.dynamics) {
 						registerAttrLoweringOrigin(ctx, entry.key, null, entry.name);
 					}
-					if (mixed.dynamics.length === 1) {
+					if (mixed.dynamics.length === 1 && mixed.spread === null) {
 						const entry = mixed.dynamics[0];
 						bindings.push({
 							id: bindings.length,
@@ -26413,6 +28228,9 @@ function emitElementHtml(
 							staticCss: mixed.css,
 						});
 					} else {
+						const spread = mixed.spread
+							? tsrxExprNode(mixed.spread, ctx, componentName, inlinedSubs)
+							: null;
 						const entries = [];
 						const propertyBindings = new Map();
 						const evaluations = [];
@@ -26429,7 +28247,14 @@ function emitElementHtml(
 						bindings.push({
 							id: bindings.length,
 							kind: 'styleProperties',
-							expr: inheritOriginLoc(b.array(entries), inner),
+							expr: inheritOriginLoc(b.array(spread ? [spread, ...evaluations] : entries), inner),
+							spread,
+							spreadName: spread ? allocCompilerName(ctx, '__styleSpread') : null,
+							fullName: spread ? allocCompilerName(ctx, '__styleFull') : null,
+							mergedName: spread ? allocCompilerName(ctx, '__styleObject') : null,
+							valueNames: spread
+								? evaluations.map(() => allocCompilerName(ctx, '__styleValue'))
+								: null,
 							properties: [...propertyBindings.values()],
 							evaluations,
 							path,
@@ -26559,7 +28384,7 @@ function emitElementHtml(
 		} else if (attrName === 'class') {
 			// (`className` was already normalized to `class` above.)
 			const scalar = firstSpreadIdx === -1 ? scalarStateClass(inner, ctx) : null;
-			bindings.push({
+			const binding = {
 				id: bindings.length,
 				kind: 'class',
 				expr: scalar === null ? expr : tsrxExprNode(scalar, ctx, componentName, inlinedSubs),
@@ -26567,7 +28392,9 @@ function emitElementHtml(
 				ns: hostNs,
 				fresh: scalar === null && isFreshBindingExpr(inner),
 				nameOrigin: attr.name,
-			});
+				name: 'class',
+			};
+			bindings.push(markDirectSignalBinding(binding, ctx, inner, 'binding'));
 		} else if (
 			(tag === 'form' && attrName === 'action') ||
 			((tag === 'button' || tag === 'input') &&
@@ -26592,15 +28419,22 @@ function emitElementHtml(
 			// namespace, URL, controlled-form, and validity routing. Their value
 			// contract is uniform across native/custom HTML, SVG, and MathML:
 			// nullish removes and everything else stringifies.
-			bindings.push({
-				id: bindings.length,
-				kind: 'ariaAttr',
-				name: attrName,
-				expr,
-				path,
-				ns: hostNs,
-				nameOrigin: attr.name,
-			});
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'ariaAttr',
+						name: attrName,
+						expr,
+						path,
+						ns: hostNs,
+						nameOrigin: attr.name,
+					},
+					ctx,
+					inner,
+					'binding',
+				),
+			);
 		} else if (
 			!((hostNs === 'html' || hostNs === 'opaque') && tag.includes('-')) &&
 			BOOLEAN_ATTR_PROPS.has(attrName.toLowerCase())
@@ -26608,15 +28442,22 @@ function emitElementHtml(
 			// Exact native boolean props all share the canonical presence contract.
 			// The lowercase name is the final DOM spelling (including camelCase JSX
 			// aliases such as allowFullScreen -> allowfullscreen).
-			bindings.push({
-				id: bindings.length,
-				kind: 'booleanAttr',
-				name: attrName.toLowerCase(),
-				expr,
-				path,
-				ns: hostNs,
-				nameOrigin: attr.name,
-			});
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'booleanAttr',
+						name: attrName.toLowerCase(),
+						expr,
+						path,
+						ns: hostNs,
+						nameOrigin: attr.name,
+					},
+					ctx,
+					inner,
+					'binding',
+				),
+			);
 		} else if (
 			/^data-[a-z][a-z0-9_-]*$/.test(attrName) &&
 			isKnownStringExpression(inner, ctx.knownStringLocals)
@@ -26627,33 +28468,57 @@ function emitElementHtml(
 			// data attribute in HTML, SVG, and MathML, so destination-opaque component
 			// templates can retain this specialization. Production also admits unknown
 			// scalar data values through staticAttributeWriter below.
-			bindings.push({
-				id: bindings.length,
-				kind: 'stringData',
-				name: attrName,
-				expr,
-				path,
-				ns: hostNs,
-				nameOrigin: attr.name,
-			});
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'stringData',
+						name: attrName,
+						expr,
+						path,
+						ns: hostNs,
+						nameOrigin: attr.name,
+					},
+					ctx,
+					inner,
+					'binding',
+				),
+			);
 		} else {
 			const writer = ctx.dev ? null : staticAttributeWriter(tag, attrName);
-			bindings.push({
-				id: bindings.length,
-				kind: 'attr',
-				attributeHelper: writer?.helper,
-				name:
-					ctx.dev && (rawAttrName === 'tabIndex' || rawAttrName === 'htmlFor')
-						? rawAttrName
-						: (writer?.name ?? attrName),
-				expr,
-				path,
-				ns: hostNs,
-				nameOrigin: attr.name,
-			});
+			bindings.push(
+				markDirectSignalBinding(
+					{
+						id: bindings.length,
+						kind: 'attr',
+						attributeHelper: writer?.helper,
+						name:
+							ctx.dev && (rawAttrName === 'tabIndex' || rawAttrName === 'htmlFor')
+								? rawAttrName
+								: (writer?.name ?? attrName),
+						expr,
+						path,
+						ns: hostNs,
+						nameOrigin: attr.name,
+					},
+					ctx,
+					inner,
+					'binding',
+				),
+			);
 		}
 	}
 	if (resolveHostPropsAcrossSources) {
+		const signalHostSources =
+			firstSpreadIdx !== -1 ||
+			hasDirectSignalStyle ||
+			hostClientSources.some(
+				(source) => !source.spread && canCarryDirectSignalHandle(source.binding.expr),
+			);
+		if (signalHostSources) {
+			ctx.signalBindingsUsed = true;
+			ctx.signalBindingsEager = true;
+		}
 		hostCommitClientBinding = {
 			id: bindings.length,
 			kind: 'hostCommit',
@@ -26661,6 +28526,8 @@ function emitElementHtml(
 			origin: node,
 			sources: hostClientSources,
 			hasNestedChildren: hasNestedJsxChildren,
+			signalHostSources,
+			signalSite: signalHostSources ? hostSignalSite : null,
 		};
 		bindings.push(hostCommitClientBinding);
 	} else if (resolveDangerouslySetInnerHTMLAcrossSpreads) {
@@ -26736,13 +28603,16 @@ function emitElementHtml(
 		}
 	}
 	if (
+		!VOID_ELEMENTS.has(tag) &&
 		!hasNestedJsxChildren &&
 		(hostCommitClientBinding !== null || directChildrenClientBinding !== null)
 	) {
 		compCalls.push({
 			id: ctx.nextHelperId++,
 			loc: devLoc(ctx, node),
+			origin: node,
 			isChild: true,
+			signalSite: directSignalSite(ctx, node, 'binding'),
 			hostPath: path,
 			onlyChildText: true,
 			potentialDangerouslySetInnerHTML,
@@ -26787,7 +28657,14 @@ function emitElementHtml(
 		if (hasNestedHoist) children = children.filter((n) => n.type !== 'HeadHoist');
 	}
 	// Special case: a single Text child (only-child text fast path).
-	if (children.length === 1 && children[0].type === 'Text') {
+	if (
+		children.length === 1 &&
+		children[0].type === 'Text' &&
+		!children[0]._octaneBindingText &&
+		!children[0]._octaneBindingOpaque &&
+		!children[0]._octaneBindingValue &&
+		!children[0]._octaneBindingSlot
+	) {
 		const txtChild = children[0];
 		const staticLit = staticTextLiteral(txtChild.expression);
 		if (staticLit !== null) {
@@ -26811,15 +28688,23 @@ function emitElementHtml(
 						]
 					: null;
 			appendTemplatePart(html, escaped, 'text', origins);
-		} else if (isKnownTextChildExpression(txtChild.expression, ctx.knownStringChildLocals)) {
+		} else if (
+			isDirectSignalHandleExpression(txtChild.expression) ||
+			isKnownTextChildExpression(txtChild.expression, ctx.knownStringChildLocals)
+		) {
+			const binding = markDirectSignalBinding(
+				{
+					id: bindings.length,
+					kind: 'textOnlyChild',
+					expr: resolveStyleExpr(txtChild.expression, cssHash),
+					path,
+				},
+				ctx,
+				txtChild.expression,
+				'binding',
+			);
 			const seededText = tag !== 'template' && !tag.includes('-') && !directPropNames.has('is');
-			bindings.push({
-				id: bindings.length,
-				kind: 'textOnlyChild',
-				expr: resolveStyleExpr(txtChild.expression, cssHash),
-				path,
-				seededText,
-			});
+			bindings.push({ ...binding, seededText });
 			// A nonempty placeholder survives the HTML parser as one Text node. The
 			// mount writes its actual value before the cloned host is inserted, so
 			// even an empty value retains one stable text binding node. <template>
@@ -26961,8 +28846,23 @@ function emitElementHtml(
 				childIdx++;
 				continue;
 			}
-			if (child.type === 'Text') {
-				const staticLit = staticTextLiteral(child.expression);
+			if (child._octaneBindingValue || child._octaneBindingSlot) {
+				const ch = makeChildCall(
+					child.expression,
+					ctx,
+					componentName,
+					inlinedSubs,
+					cssHash,
+					childNs,
+				);
+				ch.bindingMarker = bindingChildMarker(child);
+				ch.hostPath = path;
+				ch.anchorPath = [...path, childIdx];
+				compCalls.push(ch);
+				appendTemplatePart(html, '<!>', 'anchor');
+				childIdx++;
+			} else if (child.type === 'Text') {
+				const staticLit = child._octaneBindingText ? null : staticTextLiteral(child.expression);
 				if (staticLit === '') {
 					// Renders nothing: bake nothing and consume no childIndex (an empty
 					// text produces NO node when the template HTML is parsed, so counting
@@ -26994,17 +28894,30 @@ function emitElementHtml(
 					appendTemplatePart(html, escaped, 'text', origins);
 					prevBakedText = true;
 					if (!prevBaked) childIdx++;
-				} else if (isKnownTextChildExpression(child.expression, ctx.knownStringChildLocals)) {
-					bindings.push({
-						id: bindings.length,
-						kind: 'text',
-						expr: resolveStyleExpr(child.expression, cssHash),
-						path,
-						childIndex: childIdx,
-						// A text-producing neighbour → the server emits a `<!-- -->`
-						// separator here; the walk must be hole-aware (see hasHoles).
-						adjacentText: hasTextNeighbor(adjKinds, childI),
-					});
+				} else if (
+					isDirectSignalHandleExpression(child.expression) ||
+					isKnownTextChildExpression(child.expression, ctx.knownStringChildLocals)
+				) {
+					bindings.push(
+						markDirectSignalBinding(
+							{
+								id: bindings.length,
+								kind: 'text',
+								expr: resolveStyleExpr(child.expression, cssHash),
+								bindingMarker: child._octaneBindingText
+									? bindingMarker(child._octaneBindingText, 't')
+									: undefined,
+								path,
+								childIndex: childIdx,
+								// A text-producing neighbour → the server emits a `<!-- -->`
+								// separator here; the walk must be hole-aware (see hasHoles).
+								adjacentText: hasTextNeighbor(adjKinds, childI),
+							},
+							ctx,
+							child.expression,
+							'binding',
+						),
+					);
 					appendTemplatePart(html, '<!>', 'anchor'); // placeholder we'll replace at mount
 					childIdx++;
 				} else {
@@ -27183,24 +29096,36 @@ function emitElementHtml(
 				} else if (isConditionalJsx(expr)) {
 					// Lower `{cond ? A : B}` (where A or B is JSX) to an IfStatement so
 					// each branch renders real DOM via the existing ifBlock machinery.
-					const asIf = {
-						...b.if(expr.test, wrapAsBlockStmt(expr.consequent), wrapAsBlockStmt(expr.alternate)),
-						loc: expr.loc, // carry source position for dev hydration-mismatch LOC
-					};
+					const asIf = conditionalJsxStatement(expr);
 					const ic = makeIfCall(asIf, ctx, inlinedSubs, childNs, cssHash);
 					ic.hostPath = path;
 					ic.anchorPath = [...path, childIdx];
 					ifCalls.push(ic);
 					appendTemplatePart(html, '<!>', 'anchor');
 					childIdx++;
-				} else if (isKnownTextChildExpression(expr, ctx.knownStringChildLocals)) {
-					bindings.push({
-						id: bindings.length,
-						kind: 'text',
-						expr: tsrxExprNode(resolveStyleExpr(expr, cssHash), ctx, componentName, inlinedSubs),
-						path,
-						childIndex: childIdx,
-					});
+				} else if (
+					isDirectSignalHandleExpression(expr) ||
+					isKnownTextChildExpression(expr, ctx.knownStringChildLocals)
+				) {
+					bindings.push(
+						markDirectSignalBinding(
+							{
+								id: bindings.length,
+								kind: 'text',
+								expr: tsrxExprNode(
+									resolveStyleExpr(expr, cssHash),
+									ctx,
+									componentName,
+									inlinedSubs,
+								),
+								path,
+								childIndex: childIdx,
+							},
+							ctx,
+							expr,
+							'binding',
+						),
+					);
 					appendTemplatePart(html, '<!>', 'anchor');
 					childIdx++;
 				} else {
@@ -27409,6 +29334,17 @@ function hoistBodyHelper(
 			id: b.id(helperName, idOrigin ?? fakeOrigin ?? undefined),
 			params: params || [],
 			body: bodyStmts,
+			...(ctx.presentationHydration?.structural
+				? {
+						_octanePresentationHydration: {
+							id: ctx.presentationHydration.id,
+							supported:
+								ctx.presentationHydration.supported ||
+								ctx.presentationHydration.conditionalRest === true,
+							structural: true,
+						},
+					}
+				: {}),
 		},
 		fakeOrigin,
 	);
@@ -27553,6 +29489,7 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 		origin: node,
 		condExpr: node.test, // the fold replaces this with a `props.hN` member read
 		condTest: node.test, // raw test AST — the fold threads it as a `props.hN` hole
+		bindingSite: node._octaneBindingSite,
 		envNames,
 		thenHelper: thenHelperName,
 		elseHelper: elseHelperName,
@@ -27801,6 +29738,7 @@ function makeChildCall(expr, ctx, componentName, inlinedSubs, cssHash, parentNs
 		loc: devLoc(ctx, expr),
 		origin: expr,
 		isChild: true,
+		signalSite: directSignalSite(ctx, expr, 'binding'),
 		valueExpr: tsrxExprNode(
 			resolveStyleExpr(rewriteChildHoleValue(expr, ctx), cssHash),
 			ctx,
@@ -28010,6 +29948,7 @@ function makeCompCall(
 	cssHash = null,
 ) {
 	const id = ctx.nextHelperId++;
+	const invocationSite = componentInvocationSite(ctx, node);
 	const compName = tagBindingName(node);
 	const staticFragmentRenderer = node.openingElement?.metadata?.staticFragmentRenderer;
 	const activityDescriptor = isActivityLongForm(node, ctx);
@@ -28149,23 +30088,31 @@ function makeCompCall(
 				ctx.hoistedHelpers.push(inheritOriginLoc(b.const(bodyIdentity, b.object([])), node));
 				childrenArgs.push(b.id(bodyIdentity));
 			}
-			propNodes.push(
-				b.prop('init', b.literal('children'), b.call('_$markChildrenBlock', ...childrenArgs)),
-			);
+			let childrenValue = b.call('_$markChildrenBlock', ...childrenArgs);
+			if (ctx.presentationHydration?.structural && node._octaneBindingSite)
+				childrenValue = b.call(
+					requireRuntimeForContext(ctx, 'markBindingChildren'),
+					childrenValue,
+					b.literal(node._octaneBindingSite.id + ';' + node._octaneBindingSite.site),
+				);
+			propNodes.push(b.prop('init', b.literal('children'), childrenValue));
 		}
 	}
 
 	// The props object as a node; the call-site emit embeds it directly.
 	const propsExpr = staticFragmentRenderer?.props ?? inheritOriginLoc(b.object(propNodes), node);
 	if (descriptorConfig) {
-		ctx.runtimeNeeded.add('createElement');
+		ctx.runtimeNeeded.add('createElementFromConfig');
 		return {
 			id,
 			loc: devLoc(ctx, node),
 			origin: node,
 			isChild: true,
 			anchorlessAppendSafe: true,
-			valueExpr: inheritOriginLoc(b.call('_$createElement', compNode, propsExpr), node),
+			valueExpr: inheritOriginLoc(
+				b.call('_$createElementFromConfig', b.literal(invocationSite), compNode, propsExpr),
+				node,
+			),
 		};
 	}
 
@@ -28341,11 +30288,13 @@ function makeCompCall(
 
 	return {
 		id,
+		invocationSite,
 		compNode,
 		propsExpr,
 		hostPath: null,
 		keyExpr,
-		liteEligible,
+		bindingSite: node._octaneBindingSite,
+		liteEligible: node._octaneBindingSite ? false : liteEligible,
 		anchorlessAppendSafe,
 		autoMemoDeps,
 		autoMemoDepNodes,
@@ -28354,8 +30303,8 @@ function makeCompCall(
 		autoMemoLite,
 		autoMemoPublicationWitnesses,
 		voidComponent,
-		singleRoot,
-		maybeSingleRoot,
+		singleRoot: node._octaneBindingSite ? false : singleRoot,
+		maybeSingleRoot: node._octaneBindingSite ? false : maybeSingleRoot,
 		loc: devLoc(ctx, node),
 		origin: node,
 	};
@@ -28662,7 +30611,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 				'`use(promise)` first.',
 		);
 	}
-	// node.left = const x  OR  const &{x,y} / const [a,b]  (destructured)
+	// node.left = const x  OR  const {x,y} / const [a,b]  (destructured)
 	// node.right = expr, node.body = BlockStatement,
 	// node.key = optional `key …` expression, node.index = optional `index <id>`.
 	// `@for (...) { ... } @empty { ... }` — hoist the empty branch as its own
@@ -28678,7 +30627,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = 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
-	// plain `const x of …`, that's `x`. For a destructured `const &{id} of …`,
+	// plain `const x of …`, that's `x`. For a destructured `const {id} of …`,
 	// we synthesize a fresh name and emit the destructuring inside the body so
 	// the keyFn still gets the whole item and the body still sees the fields.
 	const itemName = isDestructured ? '_item' : leftDeclId.name;
@@ -28785,7 +30734,7 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 			]
 		: [];
 
-	// Destructured header `const &{x,y} of …` — synthesize a destructure stmt
+	// Destructured header `const {x,y} of …` — synthesize a destructure stmt
 	// at the top of the body so the user fields bind from the synthetic item.
 	const destructureInjection = isDestructured
 		? [
@@ -29133,6 +31082,10 @@ function makeForCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null)
 		}
 	}
 
+	if (node._octaneBindingSite) {
+		singleRoot = false;
+		singleRootExpr = null;
+	}
 	const ssrMarkerless = isSsrMarkerlessForItem(node);
 	const hostRootTag = subStmts[0]?.id?.name ?? subStmts[0]?.openingElement?.name?.name;
 	const hostMountSafe =