octane 0.2.8 → 0.2.10

package/dist/cjs/index.cjs

@@ -120,6 +120,7 @@ __export(index_exports, {
   injectStyle: () => import_runtime.injectStyle,
   invokeManualHook: () => import_runtime.invokeManualHook,
   isChildrenBlock: () => import_runtime.isChildrenBlock,
+  isHydratingStyle: () => import_runtime.isHydratingStyle,
   isInActScope: () => import_runtime.isInActScope,
   isValidElement: () => import_runtime.isValidElement,
   keyedForBlock: () => import_runtime.keyedForBlock,
@@ -188,6 +189,7 @@ __export(index_exports, {
   setSpread: () => import_runtime.setSpread,
   setStringData: () => import_runtime.setStringData,
   setStyle: () => import_runtime.setStyle,
+  setStyleProperties: () => import_runtime.setStyleProperties,
   setStyleProperty: () => import_runtime.setStyleProperty,
   setText: () => import_runtime.setText,
   setTransitionFallbackTimeout: () => import_runtime.setTransitionFallbackTimeout,
@@ -348,6 +350,7 @@ var import_method_dep = require("./method-dep.cjs");
   injectStyle,
   invokeManualHook,
   isChildrenBlock,
+  isHydratingStyle,
   isInActScope,
   isValidElement,
   keyedForBlock,
@@ -416,6 +419,7 @@ var import_method_dep = require("./method-dep.cjs");
   setSpread,
   setStringData,
   setStyle,
+  setStyleProperties,
   setStyleProperty,
   setText,
   setTransitionFallbackTimeout,

package/dist/cjs/runtime.cjs

@@ -131,6 +131,7 @@ __export(runtime_exports, {
   injectStyle: () => injectStyle,
   invokeManualHook: () => invokeManualHook,
   isChildrenBlock: () => isChildrenBlock,
+  isHydratingStyle: () => isHydratingStyle,
   isInActScope: () => isInActScope,
   isValidElement: () => isValidElement,
   keyedForBlock: () => keyedForBlock,
@@ -229,6 +230,7 @@ __export(runtime_exports, {
   setStringData: () => setStringData,
   setStringDataIfChanged: () => setStringDataIfChanged,
   setStyle: () => setStyle,
+  setStyleProperties: () => setStyleProperties,
   setStyleProperty: () => setStyleProperty,
   setText: () => setText,
   setTransitionFallbackTimeout: () => setTransitionFallbackTimeout,
@@ -8731,7 +8733,7 @@ class HydrationCapability {
       this.classWrites.clear();
     }
   }
-  applyStyle(el, value, _prev, staticCss) {
+  applyStyle(el, value, _prev, staticCss, entries) {
     const mode = hydrationMismatchMode(el);
     if (mode === 1) return true;
     const style = el.style;
@@ -8739,7 +8741,14 @@ class HydrationCapability {
     const before = style.cssText;
     const expectedStyle = document.createElement("div").style;
     if (staticCss !== void 0) expectedStyle.cssText = staticCss;
-    applyStyleValue(el, expectedStyle, value, void 0);
+    if (entries === void 0) applyStyleValue(el, expectedStyle, value, void 0);
+    else {
+      for (let i = 0; i < entries.length; i += 2) {
+        const entry = entries[i + 1];
+        if (entry != null && typeof entry !== "boolean")
+          applyStyleProperty(el, expectedStyle, entries[i], entry);
+      }
+    }
     const expected = expectedStyle.cssText;
     const expectsStyleAttribute = expected !== "";
     if (before === expected && hadStyleAttribute === expectsStyleAttribute) return true;
@@ -10198,6 +10207,9 @@ function setDeoptClass(el, value) {
   }
 }
 const IMPORTANT_SUFFIX = "!important";
+function isHydratingStyle() {
+  return activeHydration() !== null;
+}
 function setStyle(el, value, prev) {
   const style = el.style;
   const hydration = activeHydration();
@@ -10220,6 +10232,26 @@ function setStyleProperty(el, name, value, staticCss, previous) {
   if (remove) style.removeProperty((0, import_css.styleName)(name));
   else applyStyleProperty(el, style, name, value);
 }
+function setStyleProperties(el, entries, staticCss) {
+  const hydration = activeHydration();
+  if (hydration !== null) {
+    hydration.applyStyle(el, null, void 0, staticCss, entries);
+    return;
+  }
+  const style = el.style;
+  let journaled = false;
+  for (let i = 0; i < entries.length; i += 2) {
+    const value = entries[i + 1];
+    if (value == null || typeof value === "boolean") continue;
+    if (!journaled && TRANSITION_JOURNAL !== null) {
+      journalAttr(el, "style");
+      journaled = true;
+    }
+    const name = entries[i];
+    if (hiddenStyleWriter !== null && hiddenStyleWriter(el, value, void 0, name)) continue;
+    applyStyleProperty(el, style, name, value);
+  }
+}
 function applyStyleValue(el, style, value, prev) {
   if (value == null || value === false || value === "") {
     if (prev && typeof prev === "object") {
@@ -22726,6 +22758,7 @@ function scriptResource(attrs) {
   injectStyle,
   invokeManualHook,
   isChildrenBlock,
+  isHydratingStyle,
   isInActScope,
   isValidElement,
   keyedForBlock,
@@ -22824,6 +22857,7 @@ function scriptResource(attrs) {
   setStringData,
   setStringDataIfChanged,
   setStyle,
+  setStyleProperties,
   setStyleProperty,
   setText,
   setTransitionFallbackTimeout,

package/dist/cjs/version.cjs

@@ -21,7 +21,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "0.2.8";
+const version = "0.2.10";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   version

package/dist/compiler/compile.js

@@ -37,6 +37,7 @@ import {
 	createStyleClassMapFromStylesheet,
 	clone_ast_node as cloneAstNode,
 	strongHash,
+	withDeferredImports,
 } from '@tsrx/core';
 import { parseModule } from '#octane/compiler-parser';
 import { createStyleScopePass } from './style-scopes.js';
@@ -436,6 +437,8 @@ function attrBindingHelper(bind) {
 			return 'setStyle';
 		case 'styleProperty':
 			return 'setStyleProperty';
+		case 'styleProperties':
+			return 'setStyleProperties';
 		// SVG/MathML `className` is read-only — setClassAttr sets the attribute and
 		// clsx-composes (setClassName composes on HTML).
 		case 'class':
@@ -2152,24 +2155,30 @@ function staticStyleObjectNeedsDevValidation(obj) {
 // dynamic styles are byte-identical in innerHTML.
 function staticObjectToCssString(obj) {
 	const parts = [];
+	const properties = new Map();
 	for (const p of obj.properties || []) {
 		const name = p.key.type === 'Identifier' ? p.key.name : p.key.value;
-		const value = p.value.value;
-		if (value == null || value === false || value === '') continue;
-		const cssValue = value === true ? '' : cssStyleValue(name, value);
+		properties.set(name, p.value.value);
+	}
+	for (const [name, value] of properties) {
+		if (value == null || typeof value === 'boolean' || value === '') continue;
+		const cssValue = cssStyleValue(name, value);
 		parts.push(`${hyphenateStyleName(name)}: ${cssValue};`);
 	}
 	return parts.join(' ');
 }
 
-// Preserve both CSS declaration order and JavaScript object evaluation order:
-// only a nonempty literal prefix followed by exactly one dynamic own property
-// can move into the template plus an independently guarded scalar binding.
+// 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.
 function mixedStaticStyle(obj) {
-	if (obj?.type !== 'ObjectExpression' || obj.properties.length < 2) return null;
-	const seen = new Set();
+	if (obj?.type !== 'ObjectExpression' || obj.properties.length === 0) return null;
+	const seen = new Map();
+	let duplicates = false;
 	const prefix = [];
-	let dynamic = null;
+	const dynamics = [];
 	for (const property of obj.properties) {
 		if (
 			(property.type !== 'Property' && property.type !== 'ObjectProperty') ||
@@ -2185,29 +2194,56 @@ function mixedStaticStyle(obj) {
 		}
 		const name = key.type === 'Identifier' ? key.name : key.value;
 		const normalized = hyphenateStyleName(name);
-		if (name === '__proto__' || name === 'dangerouslySetInnerHTML' || seen.has(normalized)) {
+		if (
+			name === '__proto__' ||
+			name === 'dangerouslySetInnerHTML' ||
+			(seen.has(normalized) && seen.get(normalized) !== name)
+		) {
 			return null;
 		}
-		seen.add(normalized);
+		if (seen.has(normalized)) duplicates = true;
+		seen.set(normalized, name);
 
 		const value = property.value;
-		if (value?.type === 'Literal') {
-			if (
-				dynamic !== null ||
-				(typeof value.value !== 'string' && typeof value.value !== 'number') ||
-				value.value === ''
-			) {
-				return null;
-			}
+		const unwrappedValue = unwrapTsExpr(value);
+		// Extracting an anonymous function/class into a temporary changes its
+		// inferred name. A discarded class can observe that name in a static
+		// initializer, so preserve the original object evaluation in this case.
+		if (
+			unwrappedValue?.type === 'ArrowFunctionExpression' ||
+			((unwrappedValue?.type === 'FunctionExpression' ||
+				unwrappedValue?.type === 'ClassExpression') &&
+				!unwrappedValue.id)
+		) {
+			return null;
+		}
+		if (
+			value?.type === 'Literal' &&
+			dynamics.length === 0 &&
+			(typeof value.value === 'string' || typeof value.value === 'number') &&
+			value.value !== ''
+		) {
 			prefix.push(property);
 		} else {
-			if (dynamic !== null) return null;
-			dynamic = { name, key, value };
+			dynamics.push({ name, key, value });
 		}
 	}
-	if (prefix.length === 0 || dynamic === null) return null;
+	// A duplicate retains its first insertion position but uses its last value.
+	// Keep every authored evaluation, including overwritten values, and avoid
+	// baking declarations that a later duplicate could replace or remove.
+	if (duplicates) {
+		return {
+			css: '',
+			dynamics: obj.properties.map((property) => ({
+				name: property.key.type === 'Identifier' ? property.key.name : property.key.value,
+				key: property.key,
+				value: property.value,
+			})),
+		};
+	}
+	if (dynamics.length === 0) return null;
 	const css = staticObjectToCssString({ properties: prefix });
-	return css === '' ? null : { css, ...dynamic };
+	return prefix.length !== 0 && css === '' ? null : { css, dynamics };
 }
 
 // ===========================================================================
@@ -9922,7 +9958,11 @@ function compileInternal(
 				}).nodes,
 			);
 			if (hmrEnabled) hmrComponents.push({ name: node.declaration.id.name, exportKind: 'default' });
-		} else if (node.type === 'ImportDeclaration' && node.source.value === 'octane') {
+		} else if (
+			node.type === 'ImportDeclaration' &&
+			node.source.value === 'octane' &&
+			node.phase !== 'defer'
+		) {
 			// Preserve ALL user-imported names from octane (Portal, createContext,
 			// use, custom helpers, etc.) — merged into the single prelude import.
 			addUserImportSpecifiers(ctx, node);
@@ -10572,8 +10612,16 @@ function compileServer(
 					: compileServerComponent({ ...node.declaration, default: true }, ctx)),
 			);
 		} else if (node.type === 'ImportDeclaration' && node.source.value === 'octane') {
-			// User imports from 'octane' resolve to the server runtime instead.
-			addUserImportSpecifiers(ctx, node);
+			// Preserve the authored deferred namespace while routing it to the server runtime.
+			// Other user imports are merged into the eager server runtime prelude.
+			if (node.phase === 'defer') {
+				bodyNodes.push({
+					...node,
+					source: { ...node.source, value: 'octane/server', raw: '"octane/server"' },
+				});
+			} else {
+				addUserImportSpecifiers(ctx, node);
+			}
 		} else if (
 			(node.type === 'ImportDeclaration' ||
 				node.type === 'ExportNamedDeclaration' ||
@@ -22511,7 +22559,12 @@ function planJsx(
 		}
 		let mixedStylePaths = '';
 		for (const binding of elementBindings) {
-			if (binding.kind === 'styleProperty') mixedStylePaths += `|${binding.path.join('.')}`;
+			if (
+				(binding.kind === 'styleProperty' || binding.kind === 'styleProperties') &&
+				binding.staticCss !== ''
+			) {
+				mixedStylePaths += `|${binding.path.join('.')}`;
+			}
 		}
 		const cloneCall =
 			mixedStylePaths !== ''
@@ -22790,6 +22843,10 @@ function planJsx(
 			ctx.runtimeNeeded.add(`evt${arity}`);
 			if (!b.mountOnly) ctx.runtimeNeeded.add(`evt${arity}u`);
 		}
+		if (b.kind === 'styleProperties') {
+			ctx.runtimeNeeded.add('setStyleProperty');
+			ctx.runtimeNeeded.add('isHydratingStyle');
+		}
 		if (b.kind === 'spread') {
 			ctx.runtimeNeeded.add('setSpread');
 			ctx.runtimeNeeded.add('queueOwnRefDetach'); // unmount-detach of a spread-supplied ref
@@ -23945,6 +24002,7 @@ const DEFERRABLE_MOUNT_KINDS = new Set([
 	'class',
 	'style',
 	'styleProperty',
+	'styleProperties',
 	'formAction',
 	'htmlOnlyChild',
 ]);
@@ -24153,11 +24211,19 @@ 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 `style` diffs on `_sty`; scalar styles and other values on `_prev`.
+	// Whole-object styles diff on `_sty`; grouped styles use it only as a
+	// first-render marker. Each grouped property keeps a scalar previous value.
 	bag.constField(
-		bind.kind === 'style' ? `_sty$${bind.id}` : `_prev$${bind.id}`,
-		bind.kind === 'styleProperty' ? 'style-unset' : 'undefined',
+		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') {
+		for (let i = 0; i < bind.properties.length; i++) {
+			bag.constField(`_prev$${bind.id}_${i}`, 'undefined');
+		}
+	}
 	const key = `_el$${bind.id}`;
 	if (!bag.host(key, elVar)) return null;
 	return inheritOriginLoc(
@@ -24386,6 +24452,34 @@ function emitBindingMount(bind, elVar, bag) {
 				]),
 			);
 		}
+		case 'styleProperties': {
+			for (let i = 0; i < bind.properties.length; i++) bag.local(`_prev$${bind.id}_${i}`);
+			const entries =
+				bind.properties.length === bind.evaluations.length
+					? V()
+					: b.array(
+							bind.properties.flatMap((property) => [
+								inheritOriginLoc(b.literal(property.name), property.key),
+								b.member(V(), b.literal(property.evaluationIndex * 2 + 1), true),
+							]),
+						);
+			return st(
+				b.block([
+					b.const('_v', bind.expr),
+					b.stmt(b.call(callee(), el(), entries, b.literal(bind.staticCss))),
+					...mountHost(),
+					...bind.properties.map((property, i) =>
+						b.stmt(
+							b.assignment(
+								'=',
+								local(`_prev$${bind.id}_${i}`),
+								b.member(V(), b.literal(property.evaluationIndex * 2 + 1), true),
+							),
+						),
+					),
+				]),
+			);
+		}
 		case 'spread': {
 			// Detach a spread-supplied `ref` on unmount. setSpread attaches/updates
 			// the ref during mount/update, but only a scope cleanup can detach it
@@ -24733,6 +24827,55 @@ function emitBindingUpdate(bind, bag, inlineBindingGuards = false) {
 				]),
 			);
 		}
+		case 'styleProperties': {
+			// 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 entries = b.array(
+				bind.properties.flatMap((property) => [
+					inheritOriginLoc(b.literal(property.name), property.key),
+					valueOf(property),
+				]),
+			);
+			const publish = bind.properties.map((property, i) =>
+				b.stmt(b.assignment('=', bagFieldNode(bag, `_prev$${bind.id}_${i}`), valueOf(property))),
+			);
+			const grouped = [
+				b.stmt(b.call(callee(), F('_el'), entries, b.literal(bind.staticCss))),
+				...(bind.deferred ? [b.stmt(b.assignment('=', F('_sty'), b.literal(null)))] : []),
+				...publish,
+			];
+			const propertyCallee = () =>
+				attrLoweringToken(b.id(`_$${attrBindingHelper({ kind: 'styleProperty' })}`), bind);
+			const scalar = bind.properties.map((property, i) => {
+				const previous = bagFieldNode(bag, `_prev$${bind.id}_${i}`);
+				const value = valueOf(property);
+				return b.if(
+					b.binary('!==', previous, value),
+					b.block([
+						b.stmt(
+							b.call(
+								propertyCallee(),
+								F('_el'),
+								inheritOriginLoc(b.literal(property.name), property.key),
+								value,
+								b.literal(''),
+								previous,
+							),
+						),
+						b.stmt(b.assignment('=', previous, value)),
+					]),
+					null,
+				);
+			});
+			const hydrate = b.call('_$isHydratingStyle');
+			const needsGroup = bind.deferred
+				? b.logical('||', b.binary('===', F('_sty'), b.id('__s')), hydrate)
+				: hydrate;
+			return st(b.block([...values, b.if(needsGroup, b.block(grouped), b.block(scalar))]));
+		}
 		case 'spread': {
 			// setSpread does its own per-key diffing internally and handles cleanup
 			// of keys that vanished — always call it, but skip if the reference is
@@ -25913,8 +26056,8 @@ function emitElementHtml(
 		inner = resolveStyleExpr(inner, cssHash);
 
 		// `style={...}` — static literal object/string serialises into the HTML
-		// template (unless we're after a spread, which would clobber it); dynamic
-		// values become a setStyle binding.
+		// 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 (!isAfterSpread && inner.type === 'Literal' && typeof inner.value === 'string') {
 				const chunk = ` style="${escapeAttr(inner.value)}"`;
@@ -25942,27 +26085,59 @@ function emitElementHtml(
 			) {
 				const mixed = mixedStaticStyle(inner);
 				if (mixed !== null) {
-					appendBakedAttribute(
-						attrTemplate,
-						` style="${escapeAttr(mixed.css)}"`,
-						attrName,
-						attr.name,
-						inner,
-						ctx.inspect,
-					);
-					registerAttrLoweringOrigin(ctx, mixed.key, null, mixed.name);
-					bindings.push({
-						id: bindings.length,
-						kind: 'styleProperty',
-						name: mixed.name,
-						expr: tsrxExprNode(mixed.value, ctx, componentName, inlinedSubs),
-						path,
-						ns: hostNs,
-						nameOrigin: attr.name,
-						propertyOrigin: mixed.key,
-						staticOrigin: inner,
-						staticCss: mixed.css,
-					});
+					if (mixed.css !== '') {
+						appendBakedAttribute(
+							attrTemplate,
+							` style="${escapeAttr(mixed.css)}"`,
+							attrName,
+							attr.name,
+							inner,
+							ctx.inspect,
+						);
+					}
+					for (const entry of mixed.dynamics) {
+						registerAttrLoweringOrigin(ctx, entry.key, null, entry.name);
+					}
+					if (mixed.dynamics.length === 1) {
+						const entry = mixed.dynamics[0];
+						bindings.push({
+							id: bindings.length,
+							kind: 'styleProperty',
+							name: entry.name,
+							expr: tsrxExprNode(entry.value, ctx, componentName, inlinedSubs),
+							path,
+							ns: hostNs,
+							nameOrigin: attr.name,
+							propertyOrigin: entry.key,
+							staticOrigin: inner,
+							staticCss: mixed.css,
+						});
+					} else {
+						const entries = [];
+						const propertyBindings = new Map();
+						const evaluations = [];
+						for (const entry of mixed.dynamics) {
+							const value = tsrxExprNode(entry.value, ctx, componentName, inlinedSubs);
+							entries.push(inheritOriginLoc(b.literal(entry.name), entry.key), value);
+							propertyBindings.set(entry.name, {
+								name: entry.name,
+								key: entry.key,
+								evaluationIndex: evaluations.length,
+							});
+							evaluations.push(value);
+						}
+						bindings.push({
+							id: bindings.length,
+							kind: 'styleProperties',
+							expr: inheritOriginLoc(b.array(entries), inner),
+							properties: [...propertyBindings.values()],
+							evaluations,
+							path,
+							ns: hostNs,
+							nameOrigin: attr.name,
+							staticCss: mixed.css,
+						});
+					}
 					continue;
 				}
 			}
@@ -29464,7 +29639,7 @@ const esrapCommentOptions = {
 function printNodeWithMap(node, ctx) {
 	const printable = stripTsOnlyWrappers(escapeMultilineStringLiterals(node));
 	if (assertPrintedLocs()) assertNodeLocs(printable);
-	const { code, map } = esrapPrint(printable, esrapTsx(esrapCommentOptions), {
+	const { code, map } = esrapPrint(printable, withDeferredImports(esrapTsx(esrapCommentOptions)), {
 		sourceMapSource: ctx.mapSourceName,
 		sourceMapContent: ctx.mapSource,
 		sourceMapEncodeMappings: false,

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { initializeHydrationEventCapture } from './hydration/event-capture.js';
 export { attachBehaviorRoot } from './behavior-root.js';
 export type * from './behavior-root.js';
 export { createSubSlot, subSlot, type SubSlot, type SlotlessSubSlot, type SubSlotOptions, } from './sub-slot.js';
-export { createRoot, hydrateRoot, flushSync, act, isInActScope, type Root, type RootContainer, type RootOptions, useState, useLinkedState, type LinkedStatePrevious, type LinkedStateOptions, useReducer, useEffect, useLayoutEffect, useInsertionEffect, useMemo, useCallback, useRef, useId, useImperativeHandle, useEffectEvent, useSyncExternalStore, useDeferredValue, useTransition, useActionState, useActionState as useFormState, useFormStatus, useOptimistic, useDebugValue, type FormStatus, startTransition, requestFormReset, memo, lazy, preload, preinit, preloadModule, preinitModule, preconnect, prefetchDNS, createContext, use, useContext, type Context, type ForeignHostContext, Suspense, ErrorBoundary, Hydrate, Activity, Activity as unstable_Activity, ViewTransition, addTransitionType, ViewTransition as unstable_ViewTransition, addTransitionType as unstable_addTransitionType, ViewTransitionPseudoElement, type ViewTransitionProps, type ViewTransitionInstance, Fragment, createPortal, type PortalDescriptor, createElement, cloneElement, isValidElement, isChildrenBlock, descriptorChildren, Children, type ElementDescriptor, type ComponentBody, type OctaneNode, TsrxErrorBoundary, __useStateWithGetter, __useLinkedStateWithGetter, __useReducerWithGetter, __createVoidRoot, bindRendererRegionOwner, EXTERNAL_HYDRATION_PROMISE, HYDRATION_RANGE_BOUNDARY, createHostContextRequest, __vtSeen, template, clone, drainFrag, bag0, bag1, bag2, bag3, bag4, bag5, bag6, bag7, bag8, bag9, bag10, bag11, bag12, bag13, bag14, bag15, bag16, bagOf, evt0, evt0u, evt1, evt1u, evt2, evt2u, evtN, evtNu, setEventHandler, devEventListener, devHtmlNesting, htext, htextSwap, child, sibling, setText, setScriptText, setHTML, setDangerouslySetInnerHTML, setDangerouslySetInnerHTMLSources, markDangerouslySetInnerHTMLChildren, setAttribute, setStringData, setBooleanAttribute, setAriaAttribute, setClassName, setClassAttr, normalizeClass, setStyle, setStyleProperty, setSpread, snapshotSpread, setHostPropSources, queueNativeChangeDiagnostic, queueFormAuthoringDiagnostic, markNativeChangeDiagnosticStatic, setFormAction, setValue, setFormControlSources, setChecked, setCheckedCheckable, setSelectValue, setDefaultValue, setDefaultValueUncontrolled, setDefaultChecked, setAutoFocus, attachRef, queueRefAttach, queueRefDetach, replaceRef, queueOwnRefDetach, injectStyle, headBlock, stylesheetResource, styleResource, scriptResource, namespaceHead, namespaceHeadElement, delegateEvents, delegateCaptureEvents, fastForBlock, fastKeyedForBlock, fastMapSlot, forBlock, keyedForBlock, mapSlot, ifBlock, errorBlock, tryBlock, switchBlock, activityBlock, componentSlot, componentSlotVoid, componentSlotLite, compilerCacheArray, compilerCacheImmutableArrayFilter, compilerCacheMappedArray, compilerCacheContext, compilerOwnsContextProvider, markSingleRoot, markWarm, markSingleRoot as __s, markChildrenBlock, createScopedValue, createScopedElement, childSlot, positionalChildren, textSlot, textHole, childTextHole, hostComponent, renderBlock, portal, hookSlots, withSlot, manualHook, invokeManualHook, useBatch, registerWarmPlan, seedOrCreate, warmMemo, warmChild, puMiss, puTake0, puTake1, puTake2, puTake3, puTake4, puPub, provideContext, mountFragmentRef, FragmentInstance, hmr, HMR, hasPendingWork, type Scope, type Block, drainPassiveEffects, setIsOctaneActEnvironment, resetFloatResourceState, setTransitionFallbackTimeout, getTransitionFallbackTimeout, } from './runtime.js';
+export { createRoot, hydrateRoot, flushSync, act, isInActScope, type Root, type RootContainer, type RootOptions, useState, useLinkedState, type LinkedStatePrevious, type LinkedStateOptions, useReducer, useEffect, useLayoutEffect, useInsertionEffect, useMemo, useCallback, useRef, useId, useImperativeHandle, useEffectEvent, useSyncExternalStore, useDeferredValue, useTransition, useActionState, useActionState as useFormState, useFormStatus, useOptimistic, useDebugValue, type FormStatus, startTransition, requestFormReset, memo, lazy, preload, preinit, preloadModule, preinitModule, preconnect, prefetchDNS, createContext, use, useContext, type Context, type ForeignHostContext, Suspense, ErrorBoundary, Hydrate, Activity, Activity as unstable_Activity, ViewTransition, addTransitionType, ViewTransition as unstable_ViewTransition, addTransitionType as unstable_addTransitionType, ViewTransitionPseudoElement, type ViewTransitionProps, type ViewTransitionInstance, Fragment, createPortal, type PortalDescriptor, createElement, cloneElement, isValidElement, isChildrenBlock, descriptorChildren, Children, type ElementDescriptor, type ComponentBody, type OctaneNode, TsrxErrorBoundary, __useStateWithGetter, __useLinkedStateWithGetter, __useReducerWithGetter, __createVoidRoot, bindRendererRegionOwner, EXTERNAL_HYDRATION_PROMISE, HYDRATION_RANGE_BOUNDARY, createHostContextRequest, __vtSeen, template, clone, drainFrag, bag0, bag1, bag2, bag3, bag4, bag5, bag6, bag7, bag8, bag9, bag10, bag11, bag12, bag13, bag14, bag15, bag16, bagOf, evt0, evt0u, evt1, evt1u, evt2, evt2u, evtN, evtNu, setEventHandler, devEventListener, devHtmlNesting, htext, htextSwap, child, sibling, setText, setScriptText, setHTML, setDangerouslySetInnerHTML, setDangerouslySetInnerHTMLSources, markDangerouslySetInnerHTMLChildren, setAttribute, setStringData, setBooleanAttribute, setAriaAttribute, setClassName, setClassAttr, normalizeClass, isHydratingStyle, setStyle, setStyleProperty, setStyleProperties, setSpread, snapshotSpread, setHostPropSources, queueNativeChangeDiagnostic, queueFormAuthoringDiagnostic, markNativeChangeDiagnosticStatic, setFormAction, setValue, setFormControlSources, setChecked, setCheckedCheckable, setSelectValue, setDefaultValue, setDefaultValueUncontrolled, setDefaultChecked, setAutoFocus, attachRef, queueRefAttach, queueRefDetach, replaceRef, queueOwnRefDetach, injectStyle, headBlock, stylesheetResource, styleResource, scriptResource, namespaceHead, namespaceHeadElement, delegateEvents, delegateCaptureEvents, fastForBlock, fastKeyedForBlock, fastMapSlot, forBlock, keyedForBlock, mapSlot, ifBlock, errorBlock, tryBlock, switchBlock, activityBlock, componentSlot, componentSlotVoid, componentSlotLite, compilerCacheArray, compilerCacheImmutableArrayFilter, compilerCacheMappedArray, compilerCacheContext, compilerOwnsContextProvider, markSingleRoot, markWarm, markSingleRoot as __s, markChildrenBlock, createScopedValue, createScopedElement, childSlot, positionalChildren, textSlot, textHole, childTextHole, hostComponent, renderBlock, portal, hookSlots, withSlot, manualHook, invokeManualHook, useBatch, registerWarmPlan, seedOrCreate, warmMemo, warmChild, puMiss, puTake0, puTake1, puTake2, puTake3, puTake4, puPub, provideContext, mountFragmentRef, FragmentInstance, hmr, HMR, hasPendingWork, type Scope, type Block, drainPassiveEffects, setIsOctaneActEnvironment, resetFloatResourceState, setTransitionFallbackTimeout, getTransitionFallbackTimeout, } from './runtime.js';
 export type { HydrateOptions, HydrateProps, HydrateWhen, HydrationInteractionEvent, HydrationInteractionEvents, HydrationPrefetchContext, HydrationPrefetchFunction, HydrationPrefetchStrategy, HydrationPrefetchWaitReason, HydrationStrategy, HydrationWhen, } from './hydration/types.js';
 export { __serverRpc } from './server-rpc-client.js';
 export { __methodDep } from './method-dep.js';

package/dist/index.js

@@ -122,8 +122,10 @@ import {
   setClassName,
   setClassAttr,
   normalizeClass,
+  isHydratingStyle,
   setStyle,
   setStyleProperty,
+  setStyleProperties,
   setSpread,
   snapshotSpread,
   setHostPropSources,
@@ -320,6 +322,7 @@ export {
   injectStyle,
   invokeManualHook,
   isChildrenBlock,
+  isHydratingStyle,
   isInActScope,
   isValidElement,
   keyedForBlock,
@@ -388,6 +391,7 @@ export {
   setSpread,
   setStringData,
   setStyle,
+  setStyleProperties,
   setStyleProperty,
   setText,
   setTransitionFallbackTimeout,

package/dist/runtime.d.ts

@@ -1435,6 +1435,8 @@ import { normalizeClass } from './css.js';
 export { normalizeClass };
 export declare function setClassName(el: Element, value: unknown): void;
 export declare function setClassAttr(el: Element, value: unknown): void;
+/** Whether a grouped style must compare its complete value during hydration. @internal */
+export declare function isHydratingStyle(): boolean;
 export declare function setStyle(el: HTMLElement | SVGElement, value: any, prev: any): void;
 /**
  * Update one dynamic declaration after a compiler-baked static style prefix.
@@ -1443,6 +1445,12 @@ export declare function setStyle(el: HTMLElement | SVGElement, value: any, prev:
  * @internal
  */
 export declare function setStyleProperty(el: HTMLElement | SVGElement, name: string, value: any, staticCss: string, previous: any): void;
+/**
+ * Apply ordered fixed-key declarations on mount. The compiler writes changed
+ * values with scalar setters on updates; hydration compares the whole value.
+ * @internal
+ */
+export declare function setStyleProperties(el: HTMLElement | SVGElement, entries: readonly unknown[], staticCss: string): void;
 /** Snapshot a JSX spread with own-enumerable Object.assign semantics. */
 export declare function snapshotSpread(value: unknown): Record<string, unknown> | null;
 type HostPropSource = readonly [

package/dist/runtime.js

@@ -8559,7 +8559,7 @@ class HydrationCapability {
       this.classWrites.clear();
     }
   }
-  applyStyle(el, value, _prev, staticCss) {
+  applyStyle(el, value, _prev, staticCss, entries) {
     const mode = hydrationMismatchMode(el);
     if (mode === 1) return true;
     const style = el.style;
@@ -8567,7 +8567,14 @@ class HydrationCapability {
     const before = style.cssText;
     const expectedStyle = document.createElement("div").style;
     if (staticCss !== void 0) expectedStyle.cssText = staticCss;
-    applyStyleValue(el, expectedStyle, value, void 0);
+    if (entries === void 0) applyStyleValue(el, expectedStyle, value, void 0);
+    else {
+      for (let i = 0; i < entries.length; i += 2) {
+        const entry = entries[i + 1];
+        if (entry != null && typeof entry !== "boolean")
+          applyStyleProperty(el, expectedStyle, entries[i], entry);
+      }
+    }
     const expected = expectedStyle.cssText;
     const expectsStyleAttribute = expected !== "";
     if (before === expected && hadStyleAttribute === expectsStyleAttribute) return true;
@@ -10033,6 +10040,9 @@ function setDeoptClass(el, value) {
   }
 }
 const IMPORTANT_SUFFIX = "!important";
+function isHydratingStyle() {
+  return activeHydration() !== null;
+}
 function setStyle(el, value, prev) {
   const style = el.style;
   const hydration = activeHydration();
@@ -10055,6 +10065,26 @@ function setStyleProperty(el, name, value, staticCss, previous) {
   if (remove) style.removeProperty(styleName(name));
   else applyStyleProperty(el, style, name, value);
 }
+function setStyleProperties(el, entries, staticCss) {
+  const hydration = activeHydration();
+  if (hydration !== null) {
+    hydration.applyStyle(el, null, void 0, staticCss, entries);
+    return;
+  }
+  const style = el.style;
+  let journaled = false;
+  for (let i = 0; i < entries.length; i += 2) {
+    const value = entries[i + 1];
+    if (value == null || typeof value === "boolean") continue;
+    if (!journaled && TRANSITION_JOURNAL !== null) {
+      journalAttr(el, "style");
+      journaled = true;
+    }
+    const name = entries[i];
+    if (hiddenStyleWriter !== null && hiddenStyleWriter(el, value, void 0, name)) continue;
+    applyStyleProperty(el, style, name, value);
+  }
+}
 function applyStyleValue(el, style, value, prev) {
   if (value == null || value === false || value === "") {
     if (prev && typeof prev === "object") {
@@ -22560,6 +22590,7 @@ export {
   injectStyle,
   invokeManualHook,
   isChildrenBlock,
+  isHydratingStyle,
   isInActScope,
   isValidElement,
   keyedForBlock,
@@ -22658,6 +22689,7 @@ export {
   setStringData,
   setStringDataIfChanged,
   setStyle,
+  setStyleProperties,
   setStyleProperty,
   setText,
   setTransitionFallbackTimeout,

package/dist/version.js

@@ -1,4 +1,4 @@
-const version = "0.2.8";
+const version = "0.2.10";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octane",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "license": "MIT",
   "type": "module",
   "sideEffects": [