octane 0.1.20 → 0.1.22

package/dist/compiler/compile.js

@@ -3936,6 +3936,78 @@ function containsAutoMemoUnsafeStructure(stmts) {
 	return found;
 }
 
+/**
+ * Bundling MOVES an argument's evaluation out of the arrow body and into the
+ * component body, so it now runs on mount and on every update instead of once
+ * per event. That rewrite is only sound for an expression that is
+ * side-effect-free and O(1)-ish to evaluate: `() => setData(makeData(1000))`
+ * otherwise rebuilds the whole dataset on every unrelated render, and the user
+ * never sees a call they can attribute to the click that did not happen.
+ *
+ * The whitelist is deliberately narrower than "pure", for two reasons.
+ *
+ * A fresh identity per evaluation defeats the runtime arg diff the bundle
+ * exists for — an `ArrayExpression`/`ObjectExpression`/arrow arg can never
+ * compare equal, so it would pay a per-render allocation to skip nothing.
+ * Regex is rejected for the same reason `isInvariantLiteral` rejects it.
+ *
+ * The line is drawn at VALUE STABILITY, not at "provably pure". An accepted
+ * expression must yield at render time what it would have yielded at click
+ * time, and must not do unbounded or author-visible work to get there. A
+ * property read can reach a getter and `a + b` can reach `valueOf` — but that
+ * is the standing premise of the optimization, not a new risk: `select(row.id)`
+ * is the shape it was built for, and refusing property reads would leave it
+ * with nothing to optimize. Refusing arithmetic while accepting `row.id` would
+ * draw the same line in two places, so both stay.
+ *
+ * What cannot stay are the expressions that break value stability outright:
+ * a CALL does unbounded work and can be observed happening (`makeData(1000)`
+ * rebuilt a whole dataset per render), a fresh array/object/regex allocates an
+ * identity that can never compare equal, and an assignment or `++` mutates.
+ *
+ * `.current` is rejected because a ref genuinely returns the WRONG VALUE here,
+ * not merely an early one: `queueRefAttach` runs AFTER the mount that reads it,
+ * so a hoisted `ref.current` hands the first click the `null` it held before
+ * the ref was attached. Computed members fail closed for the same reason —
+ * `ref[key]` can spell `current` without saying so, and
+ * `isAutoMemoCalculationDependency` already refuses every computed key.
+ */
+function isDeferralSafeBundleArg(node) {
+	const value = unwrapTsExpr(node);
+	if (!value) return false;
+	switch (value.type) {
+		case 'Literal':
+			return isInvariantLiteral(value);
+		case 'Identifier':
+			return true;
+		case 'ChainExpression':
+			return isDeferralSafeBundleArg(value.expression);
+		case 'MemberExpression':
+			// Computed keys fail closed: the key is only known at runtime, so
+			// `ref[k]` can reach `.current` without naming it.
+			if (value.computed) return false;
+			if (value.property?.name === 'current') return false;
+			return isDeferralSafeBundleArg(value.object);
+		case 'TemplateLiteral':
+			// A fresh string still compares by VALUE, so the arg diff works.
+			return (value.expressions || []).every(isDeferralSafeBundleArg);
+		case 'UnaryExpression':
+			// `delete` mutates; the rest only read their operand.
+			return value.operator !== 'delete' && isDeferralSafeBundleArg(value.argument);
+		case 'BinaryExpression':
+		case 'LogicalExpression':
+			return isDeferralSafeBundleArg(value.left) && isDeferralSafeBundleArg(value.right);
+		case 'ConditionalExpression':
+			return (
+				isDeferralSafeBundleArg(value.test) &&
+				isDeferralSafeBundleArg(value.consequent) &&
+				isDeferralSafeBundleArg(value.alternate)
+			);
+		default:
+			return false;
+	}
+}
+
 /**
  * `() => fn(a, b, …)` — a zero-param arrow whose body is a single
  * function call. Returns `{ callee, args }` if so, else null. Used to compile
@@ -3967,8 +4039,9 @@ function detectStableEventBundle(node) {
 	if (!body || body.type !== 'CallExpression') return null;
 	// Identifier callees only — see the receiver-loss note above.
 	if (!body.callee || body.callee.type !== 'Identifier') return null;
-	// Bail if any arg is a spread — bundle args are positional only.
-	if (body.arguments.some((a) => a.type === 'SpreadElement')) return null;
+	// Bail if any arg is a spread — bundle args are positional only. Everything
+	// else has to survive being hoisted to render time; see the note above.
+	if (!body.arguments.every(isDeferralSafeBundleArg)) return null;
 	return { callee: body.callee, args: body.arguments };
 }
 
@@ -3995,11 +4068,22 @@ function isConditionalJsx(node) {
 	);
 }
 
-/** Wrap an expression as a BlockStatement body, so makeIfCall can consume it. */
+/** Wrap a ternary arm as a BlockStatement body, so makeIfCall can consume it. */
 function wrapAsBlockStmt(node) {
 	if (!node) return null;
 	// null / Literal(null) / Literal(false) → no branch
 	if (node.type === 'Literal' && (node.value === null || node.value === false)) return null;
+	if (!isJsxLike(node)) {
+		// A non-JSX arm (`{cond ? xs.map(…) : <Jsx/>}`, a string, a variable
+		// holding an element, a nested ternary) is the branch's render VALUE. As
+		// a bare statement the branch body would evaluate-and-discard it, so wrap
+		// it as the authored-equivalent `<>{expr}</>` — the branch renders the
+		// value through the fragment's child hole. The hole sits at the
+		// fragment's ROOT, a value position on both compilers: a nested ternary
+		// stays a value hole here (it is NOT re-claimed into a nested ifBlock),
+		// which is why the server claim requires host-child position too.
+		node = inheritOriginLoc(b.jsx_fragment([b.jsx_expression_container(node, node)]), node);
+	}
 	return b.block([node]);
 }
 
@@ -6062,6 +6146,7 @@ function compileInternal(source, filename, options, analyzedAst, mode, bundlerMe
 		nextHookMemoCacheId: 0, // unique non-index slots property per compiled render function
 		currentInvariantLocals: null, // Set<string> of component-lifetime-stable local values
 		currentEventInvariantLocals: null, // Set<string> safe to retain in native event slots
+		currentBodyIsComponentScope: false, // planning the component body itself, not a nested arm
 		currentProfileComponentId: null,
 		knownStringLocals: null, // Set<string> of provably-string locals (text-hole inference)
 		nextHookSymId: 0,
@@ -7482,7 +7567,15 @@ function ssrCompileBodyWithMapTemps(
 		((!!(node.body && node.body.type === 'JSXCodeBlock') && !returnedOutput) ||
 			returnedFragmentRoot) &&
 		inheritSoleCompRoot(bodyNodes, ctx);
+	// Body/sub ROOTS (including fragment-root children) are not host-element
+	// children: the client routes rich holes there through the de-opt value
+	// path (a portal has no host to stamp — see the emitNodeHtml root branch),
+	// so the ternary claim must stay off until an element's own children walk
+	// (ssrEmitElement) turns the flag on.
+	const prevHostChildPos = ctx._ssrHostChildPos;
+	ctx._ssrHostChildPos = false;
 	const htmlExpr = ssrEmitNodes(bodyNodes, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
+	ctx._ssrHostChildPos = prevHostChildPos;
 	ctx._ssrInheritRoot = prevInheritRoot;
 	ctx._returnedFragmentTemplate = prevReturnedFragmentTemplate;
 	ctx._tsxValuePos = prevValuePos;
@@ -8587,6 +8680,11 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 		// pre/textarea/listing: the parser eats a '\n' right after the opening tag —
 		// the first text part must protect a leading newline (see ssrEmitNodes).
 		const nlGuardFirst = tag === 'pre' || tag === 'textarea' || tag === 'listing';
+		// These children sit directly under a host element — the one position
+		// where the client claims `{cond ? A : B}` holes (emitElementHtml). Root
+		// positions reset this in ssrCompileBody.
+		const prevHostChildPos = ctx._ssrHostChildPos;
+		ctx._ssrHostChildPos = true;
 		childrenExpr = ssrEmitNodes(
 			normChildren,
 			ctx,
@@ -8597,6 +8695,7 @@ function ssrEmitElement(node, ctx, name, inlinedSubs, parentNs, cssHash, compone
 			childComponentNs,
 			nlGuardFirst,
 		);
+		ctx._ssrHostChildPos = prevHostChildPos;
 	}
 	// `children=` and spread-held children are content props, not attributes.
 	// With no nested JSX children, the last present writer renders as the host's
@@ -8925,18 +9024,35 @@ function ssrCompileSub(
 ) {
 	const fnName = `${baseName}$${ctx.nextHelperId++}`;
 	const synth = { params: paramNodes || [], body: bodyStmts };
-	const fn = ssrCompileBody(
-		synth,
-		ctx,
-		fnName,
-		cssHash,
-		[],
-		parentNs || 'html',
-		false,
-		componentNs,
-		returnedFragmentTemplate,
-		returnedFragmentRoot,
-	);
+	// Returned-tree mirror subs (`__sfragment`): extractFragment folds EVERY
+	// expression hole in the mirrored tree into a descriptor value hole on the
+	// client (`props.hN` + childTextHole), even holes sitting inside host
+	// elements. Mark them so ssrEmitTsrxExpression keeps `{cond ? A : B}` on
+	// ssrChild throughout the mirror, matching that fold. Directive-arm subs
+	// reset the flag through this same save/restore, so an @if INSIDE a mirror
+	// claims again, exactly like the client. (Component `__schildren` subs are
+	// NOT folded wholesale — only their ROOT holes are the children-as-props
+	// value, which `_ssrHostChildPos` already leaves unclaimed — while a hole
+	// inside a host element within children claims like any template child.)
+	const prevFoldedExprHoles = ctx._ssrFoldedExprHoles;
+	ctx._ssrFoldedExprHoles = baseName === '__sfragment';
+	let fn;
+	try {
+		fn = ssrCompileBody(
+			synth,
+			ctx,
+			fnName,
+			cssHash,
+			[],
+			parentNs || 'html',
+			false,
+			componentNs,
+			returnedFragmentTemplate,
+			returnedFragmentRoot,
+		);
+	} finally {
+		ctx._ssrFoldedExprHoles = prevFoldedExprHoles;
+	}
 	return { fnName, fn };
 }
 
@@ -8944,10 +9060,19 @@ function ssrEmitIf(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs)
 	// rewriteHookCalls: key any `use(thenable)` in the @if test (it bypasses the
 	// setup rewrite, so without a stable key it collides with sibling/body use()).
 	const testExpr = rewriteHookCalls(node.test, ctx, name);
-	const thenStmts =
-		node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
-	const thenSub = ssrCompileSub(thenStmts, ctx, '__sif', [], cssHash, parentNs, componentNs);
-	inlinedSubs.push(thenSub.fn);
+	// A null consequent (`{cond ? null : <Jsx/>}` lowered by wrapAsBlockStmt)
+	// means "no then branch". It must emit like a MISSING @else — plain '' with
+	// no inner arm range — because the hydrating client renders that branch with
+	// a null body and adopts an empty slot range.
+	const thenStmts = node.consequent
+		? node.consequent.type === 'BlockStatement'
+			? node.consequent.body
+			: [node.consequent]
+		: null;
+	const thenSub = thenStmts
+		? ssrCompileSub(thenStmts, ctx, '__sif', [], cssHash, parentNs, componentNs)
+		: null;
+	if (thenSub) inlinedSubs.push(thenSub.fn);
 	let elseCall = ssrHtmlTemplate([], node, ctx);
 	let elseFnName = null;
 	if (node.alternate) {
@@ -8968,26 +9093,33 @@ function ssrEmitIf(node, ctx, name, inlinedSubs, parentNs, cssHash, componentNs)
 	ctx.runtimeNeeded.add('ssrBlock');
 	ctx.runtimeNeeded.add('ssrControl');
 	ctx.runtimeNeeded.add('ssrArm');
-	registerDirectiveOrigin(ctx, node, ['_$ssrControl', '_$ssrArm', thenSub.fnName, elseFnName]);
+	registerDirectiveOrigin(ctx, node, [
+		'_$ssrControl',
+		'_$ssrArm',
+		thenSub ? thenSub.fnName : null,
+		elseFnName,
+	]);
 	// Nested ranges: the OUTER ssrBlock is the if-slot; the INNER one wraps the
 	// taken branch's content. The client adopts BOTH on hydration (slot = outer,
 	// branch = inner) so no comment markers are inserted — byte-for-byte, exactly
 	// like @for. The not-taken arm emits no inner range (just `''`).
-	const thenInner = ssrCall(
-		'ssrArm',
-		[
-			b.literal('then', '"then"'),
-			ssrThunk(
-				ssrCall(
-					'ssrBlock',
-					[ssrSubCall(thenSub.fnName, [b.id('undefined')], node.consequent)],
-					node.consequent,
-				),
+	const thenInner = thenSub
+		? ssrCall(
+				'ssrArm',
+				[
+					b.literal('then', '"then"'),
+					ssrThunk(
+						ssrCall(
+							'ssrBlock',
+							[ssrSubCall(thenSub.fnName, [b.id('undefined')], node.consequent)],
+							node.consequent,
+						),
+						node.consequent,
+					),
+				],
 				node.consequent,
-			),
-		],
-		node.consequent,
-	);
+			)
+		: ssrHtmlTemplate([], node, ctx);
 	const elseInner = node.alternate
 		? ssrCall(
 				'ssrArm',
@@ -9441,6 +9573,30 @@ function ssrEmitTsrxExpression(node, ctx, name, inlinedSubs, parentNs, cssHash,
 		ctx.runtimeNeeded.add('ssrPortal');
 		return ssrCall('ssrPortal', [], node);
 	}
+	if (
+		node.returnedJsxValue !== true &&
+		ctx._tsxValuePos !== true &&
+		ctx._ssrFoldedExprHoles !== true &&
+		ctx._ssrHostChildPos === true &&
+		isConditionalJsx(expr)
+	) {
+		// Mirror the client's claim EXACTLY: only emitElementHtml's children
+		// walk lowers `{cond ? A : B}` with a JSX arm to an @if, so both sides
+		// compile each arm as an ordinary arm body and the hydration shapes
+		// (control key, arm ranges, a keyed `.map` claimed inside a value arm)
+		// agree by construction. Everywhere else the hole is a VALUE on the
+		// client and must stay on ssrChild here: returned `.tsx` trees
+		// (`_tsxValuePos`), returned-tree mirrors whose holes extractFragment
+		// folds to `props.hN` (`_ssrFoldedExprHoles`), and every non-host-child
+		// 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
+		};
+		return ssrEmitIf(asIf, ctx, name, inlinedSubs, parentNs, cssHash, componentNs);
+	}
 	ctx.runtimeNeeded.add('ssrChild');
 	// rewriteHookCalls first (key any `use(thenable)` in the hole — it bypasses the
 	// setup rewrite), then rewriteJsxValues (lower nested JSX to createElement).
@@ -10381,6 +10537,11 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	}
 	ctx.currentInvariantLocals = invariantLocals;
 	ctx.currentEventInvariantLocals = eventInvariantLocals;
+	// Same gate `findMountEventCallbackSinks` uses: the lifetime proof below is
+	// defined relative to the COMPONENT's scope, so it is only sound while
+	// planning that scope's own JSX.
+	const prevBodyIsComponentScope = ctx.currentBodyIsComponentScope;
+	ctx.currentBodyIsComponentScope = options?.autoCallback === true;
 	// M3 inherit-range: only a real `@{ … }` (JSXCodeBlock) component body spans
 	// its block's whole range — synthetic sub-bodies (@if/@for/@try arms,
 	// children render-fns) pass statement arrays and stay unflagged. planJsx
@@ -10414,6 +10575,7 @@ function compileFunctionBody(node, ctx, name, parentNs = 'html', cssHash = null,
 	}
 	ctx.currentInvariantLocals = prevInvariantLocals;
 	ctx.currentEventInvariantLocals = prevEventInvariantLocals;
+	ctx.currentBodyIsComponentScope = prevBodyIsComponentScope;
 	ctx._inheritBody = prevInheritBody;
 	ctx._fnOrigin = prevFnOrigin;
 	ctx._foldedDirectiveCalls = prevFDC;
@@ -10985,6 +11147,49 @@ function isEventHandlerInvariantExpr(node, ctx) {
 	);
 }
 
+/**
+ * An inline `onClick={() => …}` arrow is rebuilt and reassigned to its DOM slot
+ * on every render. When nothing the arrow reads can change, that write is dead
+ * work: the handler can be installed once at mount and left alone, which is
+ * already what a NAMED handler gets through `findMountEventCallbackSinks`.
+ * Recognising the inline form closes the gap between the two spellings.
+ *
+ * "Nothing it reads can change" means every free identifier is either proven
+ * event-invariant for this component (a useState setter, a ref object, a
+ * useEffectEvent wrapper, …) or is not a component local at all — module scope,
+ * an import, or a global, each fixed for the module's lifetime. That second
+ * clause is the same inference `isArrowStableOver` makes.
+ *
+ * Sound only while planning the component body's own JSX.
+ * `collectComponentLocals` deliberately ignores nested blocks, so inside a
+ * `@for` item body the loop variable is absent from the set and would read as
+ * module scope — and a keyed survivor can be handed a different item without
+ * remounting, which would freeze the first item's capture in the slot forever.
+ */
+function isMountStableInlineHandler(node, ctx) {
+	if (ctx.hmr || ctx.profile || !ctx.currentBodyIsComponentScope) return false;
+	const value = unwrapTsExpr(node);
+	// A FunctionExpression is reachable through its own binding name and carries
+	// its own `this`/`arguments`; only the arrow form is a pure lexical capture.
+	if (value?.type !== 'ArrowFunctionExpression') return false;
+	const locals = ctx.currentComponentLocals;
+	if (!locals) return false;
+	const paramScope = new Set();
+	for (const p of value.params || []) collectBindings(p, paramScope);
+	// Params are walked alongside the body: their names are already bound in
+	// `paramScope`, but a default (`(e, x = n) => …`) is an ordinary expression
+	// that runs per call and can reach a changing local.
+	for (const name of collectFreeIdentifiers([value.body, ...(value.params || [])], paramScope)) {
+		// `arguments` is the render call's own, and a DIRECT `eval` resolves
+		// component locals this walk cannot see — either would tie the installed
+		// closure to whatever the first render happened to hold.
+		if (name === 'arguments' || name === 'eval') return false;
+		if (!locals.has(name)) continue;
+		if (ctx.currentEventInvariantLocals?.has(name) !== true) return false;
+	}
+	return true;
+}
+
 // Object/array/function literals allocate a new identity on every evaluation,
 // so an identity diff can never skip their update. This currently feeds the
 // class binding path, where dropping the dead previous-value field preserves
@@ -19408,7 +19613,8 @@ function emitElementHtml(
 					slotKey,
 					ns: hostNs,
 					dev: ctx.dev,
-					mountOnly: isEventHandlerInvariantExpr(inner, ctx),
+					mountOnly:
+						isEventHandlerInvariantExpr(inner, ctx) || isMountStableInlineHandler(inner, ctx),
 				});
 			}
 		} else if (attrName === 'class') {
@@ -20169,10 +20375,16 @@ function hoistBodyHelper(
 // ===========================================================================
 
 function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
-	// node.test, node.consequent (BlockStatement | Element), node.alternate (BlockStatement | IfStatement | null)
-
-	const thenStmts =
-		node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
+	// node.test, node.consequent (BlockStatement | Element | null), node.alternate (BlockStatement | IfStatement | null)
+	// A null consequent (`{cond ? null : <Jsx/>}` lowered by wrapAsBlockStmt)
+	// means "no then branch" — same contract as the null alternate: the helper
+	// slot compiles to `null` and the runtime renders an empty branch.
+
+	const thenStmts = node.consequent
+		? node.consequent.type === 'BlockStatement'
+			? node.consequent.body
+			: [node.consequent]
+		: null;
 	const elseStmts = node.alternate
 		? node.alternate.type === 'BlockStatement'
 			? node.alternate.body
@@ -20180,20 +20392,22 @@ function makeIfCall(node, ctx, inlinedSubs, parentNs = 'html', cssHash = null) {
 		: null;
 	// Phase 2: one shared env tuple for both branches (see unionEnv).
 	const envNames = unionEnv(ctx, [
-		{ stmts: thenStmts, params: [] },
+		thenStmts && { stmts: thenStmts, params: [] },
 		elseStmts && { stmts: elseStmts, params: [] },
 	]);
-	const thenHelperName = hoistBodyHelper(
-		ctx,
-		inlinedSubs,
-		'__then',
-		thenStmts,
-		[],
-		parentNs,
-		cssHash,
-		envNames,
-		directiveKeywordOrigin(ctx, node),
-	);
+	const thenHelperName = thenStmts
+		? hoistBodyHelper(
+				ctx,
+				inlinedSubs,
+				'__then',
+				thenStmts,
+				[],
+				parentNs,
+				cssHash,
+				envNames,
+				directiveKeywordOrigin(ctx, node),
+			)
+		: null;
 
 	let elseHelperName = null;
 	if (elseStmts) {

package/dist/runtime.js

@@ -315,6 +315,13 @@ function flushTransitionActionBatch(batch) {
       );
     scheduleRender(block);
   }
+  if (batch.updates.size > 0) {
+    const retained = [];
+    for (const update of batch.updates.values()) {
+      if (!update.block.disposed) retained.push(update);
+    }
+    if (retained.length > 0) FLUSHED_TRANSITION_UPDATES.push(retained);
+  }
   batch.updates.clear();
   if (IN_FLIGHT_TRANSITION_ACTION_BATCH === batch) {
     IN_FLIGHT_TRANSITION_ACTION_BATCH = null;
@@ -331,6 +338,183 @@ const HELD_TRANSITIONS = /* @__PURE__ */ new Set();
 const STAGED_REVEALS = /* @__PURE__ */ new Set();
 let flushingStagedReveals = false;
 let deferringStagedRevealEffects = false;
+let ACTIVE_TRANSITION_ATTEMPT = null;
+let FLUSHED_TRANSITION_UPDATES = [];
+let HELD_SYNC_TRANSITION = null;
+let PROMOTED_PU_SWAPS = null;
+let PROMOTED_WARM_HARVEST = null;
+function beginTransitionAttempt(block) {
+  if (block.pendingMode !== "transition" || ACTIVE_TRANSITION_ATTEMPT !== null) return null;
+  TRANSITION_JOURNAL ??= [];
+  TRANSITION_JOURNAL_BAGS ??= /* @__PURE__ */ new Set();
+  TRANSITION_JOURNAL_DEPTH++;
+  const attempt = {
+    origin: block,
+    journalCheckpoint: TRANSITION_JOURNAL.length,
+    effects: [effectQueues[0].length, effectQueues[1].length, effectQueues[2].length],
+    effectEvents: effectEventQueue.length,
+    effectEventActions: effectEventCommitActions.length,
+    stores: storeSyncQueue.length,
+    refAttach: refAttachQueue.length,
+    refDetach: refDetachQueue.length,
+    effectDeps: snapshotSubtreeEffectDeps(block),
+    heldSlots: null,
+    puSwaps: null
+  };
+  ACTIVE_TRANSITION_ATTEMPT = attempt;
+  return attempt;
+}
+function endTransitionAttempt(attempt) {
+  if (attempt === null) return;
+  ACTIVE_TRANSITION_ATTEMPT = null;
+  const held = attempt.heldSlots;
+  if (held === null || held.size === 0) {
+    PROMOTED_PU_SWAPS = null;
+    PROMOTED_WARM_HARVEST = null;
+  }
+  let entries = null;
+  if (held !== null && held.size > 0) {
+    entries = [];
+    for (let i = FLUSHED_TRANSITION_UPDATES.length - 1; i >= 0; i--) {
+      const group = FLUSHED_TRANSITION_UPDATES[i];
+      let single = true;
+      for (let k = 0; k < group.length; k++) {
+        if (group[k].block !== attempt.origin) {
+          single = false;
+          break;
+        }
+      }
+      if (!single) continue;
+      for (let k = 0; k < group.length; k++) entries.push(group[k]);
+      FLUSHED_TRANSITION_UPDATES.splice(i, 1);
+    }
+  }
+  if (held !== null && held.size > 0 && entries !== null && entries.length > 0) {
+    rollbackTransitionJournal(attempt.journalCheckpoint);
+    for (let phase = 0; phase < 3; phase++) {
+      effectQueues[phase].length = attempt.effects[phase];
+    }
+    effectEventQueue.length = attempt.effectEvents;
+    effectEventCommitActions.length = attempt.effectEventActions;
+    for (let i = attempt.stores; i < storeSyncQueue.length; i++) {
+      storeSyncQueue[i].queued = false;
+    }
+    storeSyncQueue.length = attempt.stores;
+    refAttachQueue.length = attempt.refAttach;
+    refDetachQueue.length = attempt.refDetach;
+    restoreSubtreeEffectDeps(attempt.origin, attempt.effectDeps);
+    const continuing = PROMOTED_PU_SWAPS !== null || PROMOTED_WARM_HARVEST !== null;
+    let puSwaps = attempt.puSwaps;
+    if (continuing) {
+      if (PROMOTED_PU_SWAPS !== null) {
+        puSwaps = puSwaps === null ? PROMOTED_PU_SWAPS : PROMOTED_PU_SWAPS.concat(puSwaps);
+        PROMOTED_PU_SWAPS = null;
+      }
+    } else if (puSwaps !== null) {
+      for (let i = puSwaps.length - 1; i >= 0; i--) {
+        const [hooks, slot, prev] = puSwaps[i];
+        if (prev === void 0) hooks.delete(slot);
+        else hooks.set(slot, prev);
+      }
+    }
+    for (let i = 0; i < entries.length; i++) {
+      entries[i].slot.value = entries[i].baseValue;
+    }
+    let warmHarvest = PROMOTED_WARM_HARVEST;
+    PROMOTED_WARM_HARVEST = null;
+    if (warmHarvest !== null) {
+      for (let i = 0; i < warmHarvest.length; i++) warmHarvest[i].taken = false;
+    }
+    const harvest = (scope) => {
+      const cache = scope.block.__warmCache;
+      if (cache !== void 0) {
+        for (const [slot, list] of cache) {
+          for (let i = 0; i < list.length; i++) {
+            const entry = list[i];
+            if (entry.available) {
+              (warmHarvest ??= []).push({
+                slot,
+                deps: entry.deps,
+                value: entry.value,
+                taken: false
+              });
+            }
+          }
+        }
+      }
+      forEachSubtreeChild(scope, harvest);
+    };
+    harvest(attempt.origin);
+    HELD_SYNC_TRANSITION = {
+      origin: attempt.origin,
+      entries,
+      puSwaps,
+      warmHarvest,
+      holders: new Set(held)
+    };
+    if (!continuing) scheduleRender(attempt.origin);
+  }
+  if (--TRANSITION_JOURNAL_DEPTH === 0) {
+    TRANSITION_JOURNAL = null;
+    TRANSITION_JOURNAL_BAGS = null;
+    flushParkedItems();
+  }
+}
+function journalPuEntry(scope, slot, next) {
+  const attempt = ACTIVE_TRANSITION_ATTEMPT;
+  if (attempt === null) return;
+  const hooks = ensureHooks(scope);
+  (attempt.puSwaps ??= []).push([hooks, slot, hooks.get(slot), next]);
+}
+function heldSyncCellsIntact(state) {
+  const held = HELD_SYNC_TRANSITION;
+  if (held === null || !held.holders.has(state)) return false;
+  for (let i = 0; i < held.entries.length; i++) {
+    const entry = held.entries[i];
+    if (!Object.is(entry.slot.value, entry.baseValue)) return false;
+  }
+  return true;
+}
+function promoteHeldSyncTransition() {
+  const held = HELD_SYNC_TRANSITION;
+  if (held === null) return false;
+  HELD_SYNC_TRANSITION = null;
+  const puSwaps = held.puSwaps;
+  if (puSwaps !== null) {
+    for (let i = 0; i < puSwaps.length; i++) {
+      const [hooks, slot, , next] = puSwaps[i];
+      hooks.set(slot, next);
+    }
+    PROMOTED_PU_SWAPS = PROMOTED_PU_SWAPS === null ? puSwaps : PROMOTED_PU_SWAPS.concat(puSwaps);
+  }
+  PROMOTED_WARM_HARVEST = held.warmHarvest;
+  const promoted = [];
+  TRANSITION_DEPTH++;
+  try {
+    for (let i = 0; i < held.entries.length; i++) {
+      const entry = held.entries[i];
+      if (!Object.is(entry.slot.value, entry.baseValue)) continue;
+      entry.slot.value = entry.value;
+      if (!entry.block.disposed) {
+        promoted.push(entry);
+        scheduleRender(entry.block);
+      }
+    }
+  } finally {
+    TRANSITION_DEPTH--;
+  }
+  if (promoted.length > 0) FLUSHED_TRANSITION_UPDATES.push(promoted);
+  return true;
+}
+function discardHeldSyncTransition(state) {
+  const held = HELD_SYNC_TRANSITION;
+  if (held === null || !held.holders.delete(state)) return;
+  if (held.holders.size === 0) {
+    HELD_SYNC_TRANSITION = null;
+    PROMOTED_PU_SWAPS = null;
+    PROMOTED_WARM_HARVEST = null;
+  }
+}
 const JOURNAL_TEXT = 0;
 const JOURNAL_ATTR = 1;
 const JOURNAL_BAG = 2;
@@ -1007,7 +1191,12 @@ function drainQueue() {
         block.drainStamp = drainId;
         block.drainRenders = 1;
       }
-      renderBlock(block);
+      const attempt = beginTransitionAttempt(block);
+      try {
+        renderBlock(block);
+      } finally {
+        endTransitionAttempt(attempt);
+      }
     } catch (err) {
       try {
         handleRenderError(block, err);
@@ -1040,6 +1229,7 @@ function flush() {
 }
 function flushWork() {
   inFlush = true;
+  const clearRetainedTransitionUpdates = FLUSHED_TRANSITION_UPDATES.length > 0;
   const viewTransitionDriver = VIEW_TRANSITION_DRIVER;
   const clearViewTransitionTypes = viewTransitionDriver?.shouldClearTypesAfterFlush() === true;
   try {
@@ -1049,6 +1239,8 @@ function flushWork() {
     if (pendingError !== null) throw pendingError.err;
   } finally {
     inFlush = false;
+    if (clearRetainedTransitionUpdates || FLUSHED_TRANSITION_UPDATES.length > 0)
+      FLUSHED_TRANSITION_UPDATES.length = 0;
     if (typeof __OCTANE_PROFILE_ENABLED__ !== "undefined" && __OCTANE_PROFILE_ENABLED__)
       __devtoolsNotifyFlush();
     if (clearViewTransitionTypes) viewTransitionDriver.clearTypes();
@@ -2766,16 +2958,19 @@ function useMemo(compute, deps, slot) {
   if (WARM_EVER && d !== void 0) {
     const adopted = adoptWarmValue(s, d);
     if (adopted !== WARM_MISS) {
-      ensureHooks(scope).set(s, {
+      const adoptedEntry = {
         deps: d,
         value: adopted,
         warmEpisode: CURRENT_WARM_EPISODE
-      });
+      };
+      if (ACTIVE_TRANSITION_ATTEMPT !== null) journalPuEntry(scope, s, adoptedEntry);
+      ensureHooks(scope).set(s, adoptedEntry);
       return adopted;
     }
   }
   const value = compute.apply(null, d ?? []);
   const entry = { deps: d, value };
+  if (ACTIVE_TRANSITION_ATTEMPT !== null) journalPuEntry(scope, s, entry);
   ensureHooks(scope).set(s, entry);
   if (d !== void 0 && recordRealWarmMemo(s, d, entry)) {
     entry.warmEpisode = CURRENT_WARM_EPISODE;
@@ -4332,6 +4527,16 @@ function adoptWarmValue(slot, deps) {
     }
     b = b.parentBlock;
   }
+  const harvestList = HELD_SYNC_TRANSITION?.warmHarvest ?? PROMOTED_WARM_HARVEST;
+  if (harvestList !== null && harvestList !== void 0) {
+    for (let i = 0; i < harvestList.length; i++) {
+      const entry = harvestList[i];
+      if (!entry.taken && entry.slot === slot && !depsChanged(entry.deps, deps)) {
+        entry.taken = true;
+        return entry.value;
+      }
+    }
+  }
   return WARM_MISS;
 }
 const puMiss = /* @__PURE__ */ Symbol("octane.pu.miss");
@@ -4344,11 +4549,13 @@ function puHit(slot, entry) {
 function puAdopt(slot, deps) {
   const adopted = adoptWarmValue(slot, deps);
   if (adopted === WARM_MISS) return puMiss;
-  ensureHooks(CURRENT_SCOPE).set(slot, {
+  const adoptedEntry = {
     deps,
     value: adopted,
     warmEpisode: CURRENT_WARM_EPISODE
-  });
+  };
+  if (ACTIVE_TRANSITION_ATTEMPT !== null) journalPuEntry(CURRENT_SCOPE, slot, adoptedEntry);
+  ensureHooks(CURRENT_SCOPE).set(slot, adoptedEntry);
   return adopted;
 }
 function puTake0(slot) {
@@ -4403,6 +4610,7 @@ function puTake4(slot, d0, d1, d2, d3) {
 }
 function puPub(slot, value, ...deps) {
   const entry = { deps, value };
+  if (ACTIVE_TRANSITION_ATTEMPT !== null) journalPuEntry(CURRENT_SCOPE, slot, entry);
   ensureHooks(CURRENT_SCOPE).set(slot, entry);
   if (recordRealWarmMemo(slot, deps, entry)) entry.warmEpisode = CURRENT_WARM_EPISODE;
   return value;
@@ -7848,7 +8056,8 @@ function createScopedValue(readElement) {
   const resolve = () => {
     const scope = CURRENT_SCOPE;
     const epoch = COMPILER_CACHE_CONTEXT_EPOCH;
-    if (resolved === void 0 || resolvedScope !== scope || resolvedEpoch !== epoch) {
+    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block && scope.$$ctxValues === null;
+    if (resolved === void 0 || !sameScope || resolvedEpoch !== epoch) {
       const next = readElement();
       if (next.key === null && KEYED_ELEMENT_DESCRIPTORS.has(next)) {
         KEYED_ELEMENT_DESCRIPTORS.add(descriptor);
@@ -7856,6 +8065,8 @@ function createScopedValue(readElement) {
       resolvedScope = scope;
       resolvedEpoch = epoch;
       resolved = next;
+    } else if (resolvedScope !== scope) {
+      resolvedScope = scope;
     }
     return resolved;
   };
@@ -7894,7 +8105,7 @@ function createScopedElement(type, props, readChildren) {
   const children = () => {
     const scope = CURRENT_SCOPE;
     const epoch = COMPILER_CACHE_CONTEXT_EPOCH;
-    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block;
+    const sameScope = resolvedScope === scope || resolvedScope !== null && scope !== null && scope.block.parentBlock === resolvedScope.block && scope.$$ctxValues === null;
     if (!resolved || !sameScope || resolvedEpoch !== epoch) {
       const nextChildren = readChildren();
       resolvedScope = scope;
@@ -9721,6 +9932,10 @@ function childSlot(parentScope, slotKey, domParent, value, anchor, ownEnd, ownsH
   if (preparedList !== null) {
     if (state.forSlot === null) {
       if (hydration === null && !upgradeArmed) clearChildContent(state);
+      if (state.end !== null && state.end.parentNode === null) {
+        state.end = null;
+        state.start = null;
+      }
       if (state.end === null) {
         state.end = document.createComment("");
         domParent.insertBefore(state.end, null);
@@ -10563,8 +10778,10 @@ function tryBlock(parentScope, slotKey, domParent, tryBody, catchBody, pendingBo
     const journalCheckpoint = armTransitionJournal(s);
     try {
       renderBlock(s.tryBlock);
-      releaseHeldTransition(s);
-      s.pendingThenable = null;
+      if (!heldSyncCellsIntact(s)) {
+        releaseHeldTransition(s);
+        s.pendingThenable = null;
+      }
     } catch (err) {
       if (isHostContextRequest(err)) throw err;
       if (isSuspenseException(err)) {
@@ -10790,6 +11007,7 @@ function showTryBlock(state) {
   }
 }
 function releaseHeldTransition(state) {
+  discardHeldSyncTransition(state);
   if (state.transitionHeld) {
     state.transitionHeld = false;
     tickTransitionCount(-1);
@@ -10804,6 +11022,9 @@ function handleSuspense(state, thenable, sourceBlock, journalCheckpoint = -1) {
   const isTransition = sourceBlock.currentRenderMode === "transition";
   if ((isTransition || state.transitionHeld) && state.hasResolved && state.branch === 1 && state.hiddenDom === null) {
     rollbackTransitionJournal(journalCheckpoint);
+    if (ACTIVE_TRANSITION_ATTEMPT !== null) {
+      (ACTIVE_TRANSITION_ATTEMPT.heldSlots ??= /* @__PURE__ */ new Set()).add(state);
+    }
     if (!state.transitionHeld) {
       state.transitionHeld = true;
       tickTransitionCount(1);
@@ -10920,6 +11141,9 @@ function refreshPendingBody(state) {
 }
 function swapToPendingFallback(state) {
   if (!state.pendingBody || state.branch !== 1 || !state.tryBlock) return;
+  if (HELD_SYNC_TRANSITION !== null && HELD_SYNC_TRANSITION.holders.has(state)) {
+    promoteHeldSyncTransition();
+  }
   hideTryContentAndMountPending(state);
 }
 function commitResume(state) {
@@ -11275,6 +11499,20 @@ function rebaseOffscreenCaptureSeq(capture) {
 }
 function flushStagedReveals() {
   if (flushingStagedReveals) return;
+  if (HELD_SYNC_TRANSITION !== null) {
+    let allVisible = true;
+    for (const holder of HELD_SYNC_TRANSITION.holders) {
+      if (holder.hiddenDom !== null) {
+        allVisible = false;
+        break;
+      }
+    }
+    if (allVisible && promoteHeldSyncTransition()) {
+      STAGED_REVEALS.clear();
+      flush();
+      return;
+    }
+  }
   flushingStagedReveals = true;
   try {
     const run = () => {
@@ -11970,10 +12208,31 @@ function renderBranchSlot(parentScope, slotKey, state, domParent, next, body, ma
         let bStart;
         let bEnd;
         let borrowed = false;
+        let rebuild = false;
+        let inner = null;
+        let innerEnd = null;
         if (hydration !== null && hydration.isOpen(state.start.nextSibling)) {
-          bStart = state.start.nextSibling;
-          bEnd = hydration.close(bStart);
-          hydration.node = bStart.nextSibling;
+          inner = state.start.nextSibling;
+          innerEnd = hydration.close(inner);
+          if (innerEnd !== state.end && innerEnd.nextSibling !== state.end) {
+            if (process.env.NODE_ENV !== "production") {
+              const mmLoc = siteLoc(parentScope, slotKey);
+              if (mmLoc)
+                hydration.warnStructural(
+                  mmLoc,
+                  "a single branch range",
+                  hydration.describe(innerEnd.nextSibling)
+                );
+            }
+            removeRange(state.start.nextSibling, state.end);
+            inner = null;
+            rebuild = true;
+          }
+        }
+        if (inner !== null) {
+          bStart = inner;
+          bEnd = innerEnd;
+          hydration.node = inner.nextSibling;
         } else {
           bStart = state.start;
           bEnd = state.end;
@@ -11992,7 +12251,12 @@ function renderBranchSlot(parentScope, slotKey, state, domParent, next, body, ma
         );
         if (borrowed) b.exclusiveMarkers = true;
         state.block = b;
-        renderBlock(b);
+        if (rebuild) {
+          hydration.suspend(() => renderBlock(b));
+          hydration.node = state.end.nextSibling;
+        } else {
+          renderBlock(b);
+        }
       } else if (hydration !== null && state.start.nextSibling !== state.end) {
         if (process.env.NODE_ENV !== "production") {
           const mmLoc = siteLoc(parentScope, slotKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octane",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -119,11 +119,14 @@
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
+    "@wagmi/connectors": "8.0.25",
+    "@wagmi/core": "3.6.4",
     "esbuild": "^0.28.1",
     "happy-dom": "^20.11.0",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "viem": "2.55.10",
     "vite": "^8.1.5",
     "vitest": "^4.1.10"
   },