foldkit 0.136.0 → 0.138.0

package/dist/runtime/runtime.js

@@ -6,6 +6,7 @@ import { startWebSocketBridge } from '../devTools/webSocketBridge.js';
 import { __beginRender as beginHtmlRender, __beginReplayRender as beginReplayHtmlRender, __clearRuntime as clearHtmlRuntime, __createBoundaryRegistry as createHtmlBoundaryRegistry, __endReplayRender as endReplayHtmlRender, __htmlBuilder as htmlBuilderFor, __setRuntime as setHtmlRuntime, } from '../html/index.js';
 import { MountTracker } from '../mount/index.js';
 import { __CurrentPortChannels, __makeInboundChannel, } from '../port/index.js';
+import { RenderCommit, createCommitNotifier } from '../render/commit.js';
 import { fromString as urlFromString } from '../url/index.js';
 import { __patchVNode } from '../vdom.js';
 import { addBfcacheRestoreListener, addNavigationEventListeners, } from './browserListeners.js';
@@ -14,6 +15,7 @@ import { deepFreeze } from './deepFreeze.js';
 import { PreserveModelMessage, RequestModelMessage, RestoreModelMessage, } from './hmrProtocol.js';
 import { preserveScrollPosition, restorePreservedScrollPosition, } from './hmrScroll.js';
 import { makePreserveScheduler } from './preserveScheduler.js';
+import { __decideViewTransition, __resolveStartViewTransition, __silenceViewTransitionRejections, } from './viewTransition.js';
 const toCommandRecord = (command) => command.args !== undefined
     ? { name: command.name, args: command.args }
     : { name: command.name };
@@ -308,7 +310,7 @@ const validatePorts = (ports) => {
     });
 };
 const runtimeInternals = new WeakMap();
-const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, manageDocument, subscriptions, container, routing: routingConfig, crash, slow, freezeModel, preserveScroll, resources, managedResources, devTools, }) => {
+const makeRuntime = ({ ports, Model, flags: maybeResolveFlags, init, update, view, manageDocument, subscriptions, container, routing: routingConfig, crash, slow, viewTransition, freezeModel, preserveScroll, resources, managedResources, devTools, }) => {
     const isSlowVisible = (show) => Match.value(show).pipe(Match.when('Always', () => true), Match.when('Development', () => !!import.meta.hot), Match.exhaustive);
     const htmlBuilder = htmlBuilderFor();
     const resolvedSlow = __resolveSlowConfig(slow, isSlowVisible);
@@ -316,6 +318,15 @@ const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, ma
     const resolvedSlowUpdate = Option.flatMap(resolvedSlow, ({ update }) => update);
     const resolvedSlowPatch = Option.flatMap(resolvedSlow, ({ patch }) => patch);
     const resolvedSlowSubscriptionDependencies = Option.flatMap(resolvedSlow, ({ subscriptionDependencies }) => subscriptionDependencies);
+    // NOTE: detection sits inside the flatMap so it runs only for applications
+    // that configured the option. Resolved eagerly it would read
+    // `document.startViewTransition` and call `window.matchMedia` during
+    // `makeRuntime`, which otherwise touches no DOM global at construction.
+    const maybeResolvedViewTransition = pipe(Option.fromNullishOr(viewTransition), Option.flatMap(decide => Option.map(__resolveStartViewTransition(), startViewTransition => ({
+        decide,
+        startViewTransition,
+        reducedMotionQuery: window.matchMedia('(prefers-reduced-motion: reduce)'),
+    }))));
     const isFreezeModelActive = freezeModel !== false && !!import.meta.hot;
     const isPreserveScrollActive = preserveScroll !== false && manageDocument && !!import.meta.hot;
     const duplicateIdScanner = import.meta.hot
@@ -338,836 +349,1043 @@ const makeRuntime = ({ ports, Model, flags: resolveFlags, init, update, view, ma
         validatePorts(ports);
     }
     const runtimeId = container?.id ?? '';
-    const startWith = (maybeConnector, hmrModel) => Effect.scoped(Effect.gen(function* () {
-        if (runtimeId === '') {
-            return yield* Effect.die(new Error('[foldkit] Runtime container must have an `id` for HMR model preservation. ' +
-                'Set `container.id = "app"` (or any unique string) before passing it to makeApplication or makeElement.'));
-        }
-        // NOTE: every perpetual fiber (for example, Subscription streams
-        // and ManagedResource lifecycles) and every Command fiber forks
-        // into the runtime scope, so interrupting the runtime fiber (what
-        // dispose does) interrupts them all and runs their finalizers. A
-        // detached fork would outlive the runtime.
-        const runtimeScope = yield* Effect.scope;
-        // NOTE: `Effect.provide(effect, layer)` builds the Layer into a
-        // scope that closes when the provided effect ends, so providing the
-        // Layer per Command would construct and tear down every resource on
-        // each invocation. Building once into `runtimeScope` through a
-        // cached Effect is what makes `resources` long-lived: the first
-        // Command or Subscription that runs triggers construction, every
-        // later one shares the same built services, and release happens at
-        // runtime teardown. The build is uninterruptible because
-        // `Effect.cached` caches whatever Exit the first run produces:
-        // dispose racing an in-flight build would otherwise cache an
-        // interrupt, which every waiter would then surface as a crash.
-        const maybeAcquireResourceContext = yield* Option.match(Option.fromNullishOr(resources), {
-            onNone: () => Effect.succeed(Option.none()),
-            onSome: resourceLayer => Effect.map(Effect.cached(Effect.uninterruptible(Layer.buildWithScope(resourceLayer, runtimeScope))), Option.some),
-        });
-        const maybePortChannels = pipe(Option.fromNullishOr(ports), Option.map(portsConfig => makePortChannels(portsConfig, maybeConnector)));
-        yield* Option.match(Option.all({
-            connector: maybeConnector,
-            portChannels: maybePortChannels,
-        }), {
-            onNone: () => Effect.void,
-            onSome: ({ connector, portChannels }) => Effect.acquireRelease(Effect.sync(() => connector.bind(portChannels.deliverInbound)), () => Effect.sync(() => connector.unbind())),
-        });
-        // NOTE: One boundary registry per runtime instance, shared
-        // across renders so Submodel wrap descriptors registered by
-        // h.submodel persist between renders. The render function calls
-        // `beginHtmlRender` at the start of each pass; wraps for
-        // unmounted Submodels (e.g. an entry removed from a list) are
-        // dropped from the registry via snabbdom destroy hooks attached
-        // by `h.submodel` to each child vnode.
-        const boundaryRegistry = createHtmlBoundaryRegistry();
-        const managedResourceEntries = managedResources
-            ? /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                Record.toEntries(managedResources)
-            : [];
-        const managedResourceRefs = yield* Effect.forEach(managedResourceEntries, ([_key, config]) => Ref.make(Option.none()).pipe(Effect.map(ref => ({ config, ref }))));
-        const mergeResourceIntoLayer = (layer, { config, ref }) => Layer.merge(layer, Layer.succeed(
-        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        config.resource._tag, ref));
-        const maybeManagedResourceLayer = Array.match(managedResourceRefs, {
-            onEmpty: () => Option.none(),
-            onNonEmpty: refs => Option.some(Array.reduce(refs, 
-            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            Layer.empty, mergeResourceIntoLayer)),
-        });
-        const interruptRegistry = __makeInterruptRegistry();
-        const provideAllResources = (effect) => {
-            const withResources = Option.match(maybeAcquireResourceContext, {
-                onNone: () => effect,
-                onSome: acquireResourceContext => Effect.flatMap(acquireResourceContext, resourceContext => Effect.provideContext(effect, resourceContext)),
+    const startWith = (maybeConnector, hmrModel) => {
+        // NOTE: one notifier per runtime, provided across the whole runtime
+        // Effect so Commands, Subscriptions, and Mount-forked Effects all resolve
+        // the same signal. A commit in one embedded application must never wake a
+        // `Render.afterCommit` awaiting inside another.
+        const commitNotifier = createCommitNotifier();
+        return Effect.scoped(Effect.gen(function* () {
+            if (runtimeId === '') {
+                return yield* Effect.die(new Error('[foldkit] Runtime container must have an `id` for HMR model preservation. ' +
+                    'Set `container.id = "app"` (or any unique string) before passing it to makeApplication or makeElement.'));
+            }
+            // NOTE: every perpetual fiber (for example, Subscription streams
+            // and ManagedResource lifecycles) and every Command fiber forks
+            // into the runtime scope, so interrupting the runtime fiber (what
+            // dispose does) interrupts them all and runs their finalizers. A
+            // detached fork would outlive the runtime.
+            const runtimeScope = yield* Effect.scope;
+            // NOTE: `Effect.provide(effect, layer)` builds the Layer into a
+            // scope that closes when the provided effect ends, so providing the
+            // Layer per Command would construct and tear down every resource on
+            // each invocation. Building once into `runtimeScope` through a
+            // cached Effect is what makes `resources` long-lived: the first
+            // Command or Subscription that runs triggers construction, every
+            // later one shares the same built services, and release happens at
+            // runtime teardown. The build is uninterruptible because
+            // `Effect.cached` caches whatever Exit the first run produces:
+            // dispose racing an in-flight build would otherwise cache an
+            // interrupt, which every waiter would then surface as a crash.
+            const maybeAcquireResourceContext = yield* Option.match(Option.fromNullishOr(resources), {
+                onNone: () => Effect.succeed(Option.none()),
+                onSome: resourceLayer => Effect.map(Effect.cached(Effect.uninterruptible(Layer.buildWithScope(resourceLayer, runtimeScope))), Option.some),
+            });
+            const maybePortChannels = pipe(Option.fromNullishOr(ports), Option.map(portsConfig => makePortChannels(portsConfig, maybeConnector)));
+            yield* Option.match(Option.all({
+                connector: maybeConnector,
+                portChannels: maybePortChannels,
+            }), {
+                onNone: () => Effect.void,
+                onSome: ({ connector, portChannels }) => Effect.acquireRelease(Effect.sync(() => connector.bind(portChannels.deliverInbound)), () => Effect.sync(() => connector.unbind())),
             });
-            const withManagedResources = Option.match(maybeManagedResourceLayer, {
+            // NOTE: One boundary registry per runtime instance, shared
+            // across renders so Submodel wrap descriptors registered by
+            // h.submodel persist between renders. The render function calls
+            // `beginHtmlRender` at the start of each pass; wraps for
+            // unmounted Submodels (e.g. an entry removed from a list) are
+            // dropped from the registry via snabbdom destroy hooks attached
+            // by `h.submodel` to each child vnode.
+            const boundaryRegistry = createHtmlBoundaryRegistry();
+            const managedResourceEntries = managedResources
+                ? /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    Record.toEntries(managedResources)
+                : [];
+            const managedResourceRefs = yield* Effect.forEach(managedResourceEntries, ([_key, config]) => Ref.make(Option.none()).pipe(Effect.map(ref => ({ config, ref }))));
+            const mergeResourceIntoLayer = (layer, { config, ref }) => Layer.merge(layer, Layer.succeed(
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            config.resource._tag, ref));
+            const maybeManagedResourceLayer = Array.match(managedResourceRefs, {
+                onEmpty: () => Option.none(),
+                onNonEmpty: refs => Option.some(Array.reduce(refs, 
                 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                onNone: () => withResources,
-                onSome: managedLayer => 
+                Layer.empty, mergeResourceIntoLayer)),
+            });
+            const interruptRegistry = __makeInterruptRegistry();
+            const provideAllResources = (effect) => {
+                const withResources = Option.match(maybeAcquireResourceContext, {
+                    onNone: () => effect,
+                    onSome: acquireResourceContext => Effect.flatMap(acquireResourceContext, resourceContext => Effect.provideContext(effect, resourceContext)),
+                });
+                const withManagedResources = Option.match(maybeManagedResourceLayer, {
+                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    onNone: () => withResources,
+                    onSome: managedLayer => 
+                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    Effect.provide(withResources, managedLayer),
+                });
+                const withPortChannels = Option.match(maybePortChannels, {
+                    onNone: () => withManagedResources,
+                    onSome: portChannels => Effect.provideService(withManagedResources, __CurrentPortChannels, portChannels.channels),
+                });
+                return Effect.provideService(withPortChannels, __CurrentInterruptRegistry, interruptRegistry);
+            };
+            // NOTE: flags run through the same cached build that Commands and
+            // Subscriptions use, rather than being handed the Layer again, so a
+            // service needed both at startup and by a Command is constructed
+            // once. An app without flags never reaches it, which keeps the Layer
+            // lazy when the first thing that needs it is a Command.
+            //
+            // NOTE: a Layer that fails to build is not fatal here. Flags resolve
+            // before `init`, so there is no Model for a crash view to render
+            // against and a failure escaping this point kills the app with a
+            // blank container. Running flags against an empty context instead
+            // lets an app whose flags never touch the Layer boot as it did
+            // before flags could consume `resources`: the cached failure then
+            // surfaces at the first Command or Subscription, where `crashWith`
+            // does render the crash view. Flags that do need the Layer still
+            // fail here, and both causes are reported: the `Service not found`
+            // defect the empty context produced is useless on its own, and the
+            // build failure that explains it would be lost if it replaced the
+            // flags cause outright. Combining them also keeps a flags Effect
+            // that fails for its own unrelated reason visible instead of
+            // attributing its defect to the Layer. Interrupts propagate
+            // untouched on both sides, because dispose racing either the build
+            // or the flags run is not a failure to recover from, and
+            // `Effect.catchCause` hands the handler interrupt causes too.
+            const provideResources = (effect) => Option.match(maybeAcquireResourceContext, {
                 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                Effect.provide(withResources, managedLayer),
+                onNone: () => effect,
+                onSome: acquireResourceContext => Effect.matchCauseEffect(acquireResourceContext, {
+                    onFailure: buildCause => Cause.hasInterruptsOnly(buildCause)
+                        ? Effect.failCause(buildCause)
+                        : Effect.catchCause(Effect.provideContext(effect, 
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        Context.empty()), flagsCause => Cause.hasInterruptsOnly(flagsCause)
+                            ? Effect.failCause(flagsCause)
+                            : Effect.failCause(Cause.combine(buildCause, flagsCause))),
+                    onSuccess: resourceContext => Effect.provideContext(effect, resourceContext),
+                }),
             });
-            const withPortChannels = Option.match(maybePortChannels, {
-                onNone: () => withManagedResources,
-                onSome: portChannels => Effect.provideService(withManagedResources, __CurrentPortChannels, portChannels.channels),
+            const resolveFlags = Option.match(maybeResolveFlags, {
+                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                onNone: () => Effect.succeed(undefined),
+                onSome: provideResources,
             });
-            return Effect.provideService(withPortChannels, __CurrentInterruptRegistry, interruptRegistry);
-        };
-        const flags = yield* resolveFlags;
-        const ModelJsonCodec = Schema.toCodecJson(
-        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        Model);
-        const decodeHmrModel = Schema.decodeUnknownExit(ModelJsonCodec);
-        const encodeHmrModel = Schema.encodeUnknownSync(ModelJsonCodec);
-        // NOTE: keep `encodeHmrModel` off the dispatch hot path. It walks
-        // the entire Model graph (O(modelSize) per call) and blocks input
-        // on large Models. The scheduler defers encoding to a quiet window
-        // and the `vite:beforeFullReload` flush covers the HMR boundary.
-        const PRESERVE_DEBOUNCE = Duration.millis(200);
-        const preserveScheduler = yield* makePreserveScheduler({
-            onDebounce: model => Effect.sync(() => preserveModel(runtimeId, encodeHmrModel(model), false)),
-            onFlush: model => Effect.sync(() => preserveModel(runtimeId, encodeHmrModel(model), true)),
-        }, PRESERVE_DEBOUNCE);
-        const hot = import.meta.hot;
-        if (hot) {
-            yield* Effect.acquireRelease(Effect.sync(() => {
-                // NOTE: Effect.runSync requires `flush` to have no async
-                // suspensions. The scheduler is built to satisfy that: flush
-                // clears pending atomically and runs `onFlush` without
-                // interrupting the in-flight timer fiber, which keeps the
-                // whole effect synchronous. If a future change adds an async
-                // step (interrupt-await, sleep, fork) on this path, Vite may
-                // race ahead to location.reload() before the encoded model
-                // reaches the plugin.
-                const handler = () => {
-                    Effect.runSync(preserveScheduler.flush);
-                };
-                hot.on('vite:beforeFullReload', handler);
-                return handler;
-            }), handler => Effect.sync(() => hot.off('vite:beforeFullReload', handler)));
-            yield* Effect.addFinalizer(() => preserveScheduler.cancel);
-        }
-        if (hot && isPreserveScrollActive) {
-            yield* Effect.acquireRelease(Effect.sync(() => {
-                const handler = () => preserveScrollPosition(runtimeId);
-                hot.on('vite:beforeFullReload', handler);
-                return handler;
-            }), handler => Effect.sync(() => hot.off('vite:beforeFullReload', handler)));
-        }
-        const schedulePreserveModel = (model) => hot ? preserveScheduler.schedule(model) : Effect.void;
-        // NOTE: the dispatch hot path is plain JavaScript. A dispatched
-        // Message is pushed onto a plain array and drained synchronously on
-        // the spot, so update runs on the dispatching stack (for example, a
-        // DOM event handler, a Command fiber completing, or a Subscription
-        // emit) with no fiber hop in between. The drain guards against
-        // re-entrancy: a Message dispatched mid-drain (for example, by an
-        // update triggered from a synchronous Command) is queued and picked
-        // up by the outer drain loop in arrival order, and a Message
-        // dispatched while a render frame's patch is on the stack is
-        // buffered until the frame completes.
-        let pendingMessages = [];
-        let isProcessingMessages = false;
-        let isRenderFrameScheduled = false;
-        // NOTE: mirrors the old queue's boot behavior: a Message arriving
-        // before boot completes (for example, a navigation event during an
-        // async dev-mode boot step, or a boot-forked fiber emitting early)
-        // is buffered, not processed. Processing against a partially
-        // initialized runtime would race the init render, DevTools
-        // recording, and Subscription attachment. The flag flips as the
-        // last act of boot, which then drains the buffer. enqueueMessage
-        // checks it directly, not just the drain: dispatch sources go live
-        // mid-boot, before `drainPendingMessages` is initialized, and
-        // calling it from a pre-boot dispatch would hit the temporal dead
-        // zone.
-        let isBootComplete = false;
-        // NOTE: mirrors the old queue's post-interrupt behavior: a Message
-        // dispatched after the runtime scope closed (for example, an
-        // OnUnmount fired by the dispose teardown patch, or a stale DOM
-        // handler) is dropped
-        // instead of updating a disposed runtime. Set by a finalizer
-        // registered at the end of boot, so it runs before
-        // earlier-registered teardown (finalizers are LIFO).
-        let isRuntimeDisposed = false;
-        // NOTE: the differ fires destroy and insert hooks while `patch` is
-        // on the stack, and both can dispatch synchronously (for example,
-        // an OnUnmount dispatch, or a Mount stream's synchronous first
-        // emission). Draining
-        // inline would run update, and on a defect the crash renderer,
-        // against a DOM the outer patch is still mutating. The frame
-        // buffers such dispatches and drains them after it completes.
-        let isRenderingFrame = false;
-        // NOTE: a crash is terminal. The old runtime's drain fiber died on
-        // the first defect, so nothing was processed after a crash; this
-        // flag preserves that: the drain stops and later dispatches are
-        // dropped, so update, Command forks, and DevTools recording all
-        // stop with the crash view on screen.
-        let isCrashed = false;
-        const enqueueMessage = (message) => {
-            if (isRuntimeDisposed || isCrashed) {
-                return;
+            const ModelJsonCodec = Schema.toCodecJson(
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            Model);
+            const decodeHmrModel = Schema.decodeUnknownExit(ModelJsonCodec);
+            const encodeHmrModel = Schema.encodeUnknownSync(ModelJsonCodec);
+            const currentUrl = Option.fromNullishOr(routingConfig).pipe(Option.flatMap(() => urlFromString(window.location.href)));
+            // NOTE: a restored Model skips `init`, so resolving flags on that
+            // path would build the `resources` Layer only to discard what it
+            // produced. Gating the resolution on the restore decision is what
+            // stops a reload from reconnecting whatever the Layer holds. It has
+            // to stay ahead of the preserve-scheduler and HMR finalizers: a
+            // flags Effect that fails after those are registered tears down more
+            // than it used to, and their release defects would bury its cause.
+            const runInit = Effect.map(resolveFlags, flags => init(flags, Option.getOrUndefined(currentUrl)));
+            const [initModelRaw, initCommands] = yield* hmrModel !== undefined
+                ? Exit.match(decodeHmrModel(hmrModel), {
+                    onFailure: () => runInit,
+                    onSuccess: restoredModel => Effect.succeed([restoredModel, []]),
+                })
+                : runInit;
+            // NOTE: keep `encodeHmrModel` off the dispatch hot path. It walks
+            // the entire Model graph (O(modelSize) per call) and blocks input
+            // on large Models. The scheduler defers encoding to a quiet window
+            // and the `vite:beforeFullReload` flush covers the HMR boundary.
+            const PRESERVE_DEBOUNCE = Duration.millis(200);
+            const preserveScheduler = yield* makePreserveScheduler({
+                onDebounce: model => Effect.sync(() => preserveModel(runtimeId, encodeHmrModel(model), false)),
+                onFlush: model => Effect.sync(() => preserveModel(runtimeId, encodeHmrModel(model), true)),
+            }, PRESERVE_DEBOUNCE);
+            const hot = import.meta.hot;
+            if (hot) {
+                yield* Effect.acquireRelease(Effect.sync(() => {
+                    // NOTE: Effect.runSync requires `flush` to have no async
+                    // suspensions. The scheduler is built to satisfy that: flush
+                    // clears pending atomically and runs `onFlush` without
+                    // interrupting the in-flight timer fiber, which keeps the
+                    // whole effect synchronous. If a future change adds an async
+                    // step (interrupt-await, sleep, fork) on this path, Vite may
+                    // race ahead to location.reload() before the encoded model
+                    // reaches the plugin.
+                    const handler = () => {
+                        Effect.runSync(preserveScheduler.flush);
+                    };
+                    hot.on('vite:beforeFullReload', handler);
+                    return handler;
+                }), handler => Effect.sync(() => hot.off('vite:beforeFullReload', handler)));
+                yield* Effect.addFinalizer(() => preserveScheduler.cancel);
             }
-            pendingMessages.push(message);
-            if (!isBootComplete || isRenderingFrame) {
-                return;
+            if (hot && isPreserveScrollActive) {
+                yield* Effect.acquireRelease(Effect.sync(() => {
+                    const handler = () => preserveScrollPosition(runtimeId);
+                    hot.on('vite:beforeFullReload', handler);
+                    return handler;
+                }), handler => Effect.sync(() => hot.off('vite:beforeFullReload', handler)));
             }
-            drainPendingMessages();
-        };
-        const enqueueMessageEffect = (message) => Effect.sync(() => enqueueMessage(message));
-        const currentUrl = Option.fromNullishOr(routingConfig).pipe(Option.flatMap(() => urlFromString(window.location.href)));
-        const [initModelRaw, initCommands] = Predicate.isNotUndefined(hmrModel)
-            ? Exit.match(decodeHmrModel(hmrModel), {
-                onFailure: () => init(flags, Option.getOrUndefined(currentUrl)),
-                onSuccess: (restoredModel) => [restoredModel, []],
-            })
-            : init(flags, Option.getOrUndefined(currentUrl));
-        const initModel = maybeFreezeModel(initModelRaw);
-        const modelPubSub = yield* PubSub.unbounded();
-        if (import.meta.hot) {
-            yield* Effect.addFinalizer(() => Effect.sync(() => duplicateIdScanner?.cancel()));
-        }
-        if (routingConfig) {
-            yield* Effect.acquireRelease(Effect.sync(() => addNavigationEventListeners(enqueueMessage, routingConfig)), removeNavigationEventListeners => Effect.sync(() => removeNavigationEventListeners()));
-        }
-        // NOTE: the model and the current vnode are plain closure state.
-        // The hot path reads and writes them directly; the cold paths that
-        // run inside Effects (crash rendering, the dispose finalizer, the
-        // replay render) read the same variables synchronously, so no Ref
-        // is needed.
-        let liveModel = initModel;
-        const vnodeSlot = { maybeCurrentVNode: Option.none() };
-        // NOTE: registered before any perpetual fiber is forked so it runs
-        // after they are interrupted (scope finalizers are LIFO). Patching to
-        // an empty tree fires snabbdom destroy hooks, which is what releases
-        // Mounts; swapping the placeholder for the original container leaves
-        // the host DOM as it was before the first render, ready for a fresh
-        // embed of the same container. Gated on interruption: that is the
-        // dispose path. A runtime that stops because it crashed completes
-        // normally after rendering the crash view, and the crash view must
-        // stay visible.
-        yield* Effect.addFinalizer(exit => Effect.gen(function* () {
-            if (!Exit.hasInterrupts(exit)) {
-                return;
+            const schedulePreserveModel = (model) => hot ? preserveScheduler.schedule(model) : Effect.void;
+            // NOTE: the dispatch hot path is plain JavaScript. A dispatched
+            // Message is pushed onto a plain array and drained synchronously on
+            // the spot, so update runs on the dispatching stack (for example, a
+            // DOM event handler, a Command fiber completing, or a Subscription
+            // emit) with no fiber hop in between. The drain guards against
+            // re-entrancy: a Message dispatched mid-drain (for example, by an
+            // update triggered from a synchronous Command) is queued and picked
+            // up by the outer drain loop in arrival order, and a Message
+            // dispatched while a render frame's patch is on the stack is
+            // buffered until the frame completes.
+            let pendingMessages = [];
+            let isProcessingMessages = false;
+            // NOTE: `isRenderFrameScheduled` clears when the frame callback
+            // starts, which on the View Transition path is before the patch runs.
+            // `commitNotifier` tracks the patch itself, so `Render.afterCommit`
+            // waits for the commit rather than for the frame that scheduled it.
+            let isRenderFrameScheduled = false;
+            // NOTE: mirrors the old queue's boot behavior: a Message arriving
+            // before boot completes (for example, a navigation event during an
+            // async dev-mode boot step, or a boot-forked fiber emitting early)
+            // is buffered, not processed. Processing against a partially
+            // initialized runtime would race the init render, DevTools
+            // recording, and Subscription attachment. The flag flips as the
+            // last act of boot, which then drains the buffer. enqueueMessage
+            // checks it directly, not just the drain: dispatch sources go live
+            // mid-boot, before `drainPendingMessages` is initialized, and
+            // calling it from a pre-boot dispatch would hit the temporal dead
+            // zone.
+            let isBootComplete = false;
+            // NOTE: mirrors the old queue's post-interrupt behavior: a Message
+            // dispatched after the runtime scope closed (for example, an
+            // OnUnmount fired by the dispose teardown patch, or a stale DOM
+            // handler) is dropped
+            // instead of updating a disposed runtime. Set by a finalizer
+            // registered at the end of boot, so it runs before
+            // earlier-registered teardown (finalizers are LIFO).
+            let isRuntimeDisposed = false;
+            // NOTE: the differ fires destroy and insert hooks while `patch` is
+            // on the stack, and both can dispatch synchronously (for example,
+            // an OnUnmount dispatch, or a Mount stream's synchronous first
+            // emission). Draining
+            // inline would run update, and on a defect the crash renderer,
+            // against a DOM the outer patch is still mutating. The frame
+            // buffers such dispatches and drains them after it completes.
+            let isRenderingFrame = false;
+            // NOTE: a crash is terminal. The old runtime's drain fiber died on
+            // the first defect, so nothing was processed after a crash; this
+            // flag preserves that: the drain stops and later dispatches are
+            // dropped, so update, Command forks, and DevTools recording all
+            // stop with the crash view on screen.
+            let isCrashed = false;
+            const enqueueMessage = (message) => {
+                if (isRuntimeDisposed || isCrashed) {
+                    return;
+                }
+                pendingMessages.push(message);
+                if (!isBootComplete || isRenderingFrame) {
+                    return;
+                }
+                drainPendingMessages();
+            };
+            const enqueueMessageEffect = (message) => Effect.sync(() => enqueueMessage(message));
+            const initModel = maybeFreezeModel(initModelRaw);
+            const modelPubSub = yield* PubSub.unbounded();
+            if (import.meta.hot) {
+                yield* Effect.addFinalizer(() => Effect.sync(() => duplicateIdScanner?.cancel()));
             }
-            const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
-            yield* Option.match(maybeCurrentVNode, {
-                onNone: () => Effect.void,
-                onSome: currentVNode => Effect.sync(() => {
-                    const placeholderNode = __patchVNode(Option.some(currentVNode), null, container).elm;
-                    if (placeholderNode && placeholderNode.parentNode) {
-                        placeholderNode.parentNode.replaceChild(container, placeholderNode);
-                        container.replaceChildren();
-                    }
-                }),
-            });
-        }));
-        // NOTE: shared by every crash path: the init render, the plain
-        // message drain and render frame (which reach it through
-        // `Effect.runFork` from their catch blocks), and the Command and
-        // Subscription fibers (a Command's Effect and a Subscription's
-        // Stream are typed with a `never` error channel, so a cause
-        // escaping one can only be a `resources` Layer build failure or an
-        // escaped defect, both unrecoverable). Each path catches its own
-        // cause so a failure surfaces as the crash view instead of dying
-        // silently and leaving the DOM frozen at the last successful
-        // render. The first crash wins: concurrent Command fibers can fail
-        // on the same broken Layer, and only one should report and render.
-        const crashWith = (cause, maybeMessage) => Effect.sync(() => {
-            if (isCrashed) {
-                return;
+            if (routingConfig) {
+                yield* Effect.acquireRelease(Effect.sync(() => addNavigationEventListeners(enqueueMessage, routingConfig)), removeNavigationEventListeners => Effect.sync(() => removeNavigationEventListeners()));
             }
-            isCrashed = true;
-            const model = liveModel;
-            const squashed = Cause.squash(cause);
-            const error = squashed instanceof Error ? squashed : new Error(String(squashed));
-            renderCrashView({ error, model, message: maybeMessage }, crash, container, vnodeSlot, manageDocument);
-        });
-        // NOTE: drain-local state. Kept as plain closure variables instead
-        // of `Ref`s because nothing else reads or writes them concurrently,
-        // and JS's single-threaded model already orders writes against
-        // subsequent reads. `currentMessage` is read by the crash handler.
-        let currentMessage = Option.none();
-        let maybeLastDirtyMessage = Option.none();
-        // NOTE: the DevTools store is installed at most once during boot and
-        // never replaced. Caching it in a closure variable avoids a
-        // `Ref.get` on every message and on every render frame (the
-        // store powers the pause check). Plain `null` rather than `Option`:
-        // the hot path only ever presence-checks it, and the check should
-        // stay a bare comparison.
-        let devToolsStore = null;
-        const dispatchSync = (message) => {
-            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            enqueueMessage(message);
-        };
-        const dispatchAsync = (message) => 
-        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        enqueueMessageEffect(message);
-        const dispatch = { dispatchAsync, dispatchSync };
-        const isPausedNow = () => devToolsStore !== null &&
-            SubscriptionRef.getUnsafe(devToolsStore.stateRef).isPaused;
-        // NOTE: recording is gated on the DevTools store because the store
-        // is the only consumer. Without the gate every Mount start and end
-        // in a production frame would allocate a record just to be sliced
-        // and dropped.
-        const mountStartBuffer = [];
-        const mountEndBuffer = [];
-        const mountTracker = {
-            started: (name, args) => {
-                if (devToolsStore === null) {
-                    return;
+            // NOTE: the model and the current vnode are plain closure state.
+            // The hot path reads and writes them directly; the cold paths that
+            // run inside Effects (crash rendering, the dispose finalizer, the
+            // replay render) read the same variables synchronously, so no Ref
+            // is needed.
+            let liveModel = initModel;
+            // NOTE: the Model behind the DOM currently on screen, which is what a
+            // View Transition animates away from. Seeded with `initModel` because
+            // the init render paints it, and advanced only where a render actually
+            // commits. The `viewTransition` predicate never runs before a Message
+            // has dirtied the Model, and the init render completes behind the boot
+            // barrier, so this is always the model of a paint that happened.
+            let lastRenderedModel = initModel;
+            // NOTE: the transition the browser is still animating, if any. Held so
+            // the runtime can skip it: when a later frame supersedes it, when the
+            // runtime crashes, and at teardown, where the browser would otherwise
+            // animate over a released container. Declared above `crashWith`, which
+            // calls the skip and can run as early as the init render.
+            let maybePendingViewTransition = Option.none();
+            const skipPendingViewTransition = () => {
+                if (Option.isSome(maybePendingViewTransition)) {
+                    const { value: pendingViewTransition } = maybePendingViewTransition;
+                    // NOTE: cleared first. An implementation that runs the update
+                    // callback synchronously would otherwise re-enter this.
+                    maybePendingViewTransition = Option.none();
+                    try {
+                        pendingViewTransition.skipTransition();
+                    }
+                    catch {
+                        // NOTE: skipping runs on teardown and crash paths, so a refusal
+                        // must not propagate into them.
+                    }
                 }
-                mountStartBuffer.push(args === undefined ? { name } : { name, args });
-            },
-            ended: (name, args) => {
-                if (devToolsStore === null) {
+            };
+            const vnodeSlot = { maybeCurrentVNode: Option.none() };
+            // NOTE: registered before any perpetual fiber is forked so it runs
+            // after they are interrupted (scope finalizers are LIFO). Patching to
+            // an empty tree fires snabbdom destroy hooks, which is what releases
+            // Mounts; swapping the placeholder for the original container leaves
+            // the host DOM as it was before the first render, ready for a fresh
+            // embed of the same container. Gated on interruption: that is the
+            // dispose path. A runtime that stops because it crashed completes
+            // normally after rendering the crash view, and the crash view must
+            // stay visible.
+            yield* Effect.addFinalizer(exit => Effect.gen(function* () {
+                if (!Exit.hasInterrupts(exit)) {
                     return;
                 }
-                mountEndBuffer.push(args === undefined ? { name } : { name, args });
-            },
-        };
-        const drainMountEvents = () => {
-            const starts = mountStartBuffer.slice();
-            const ends = mountEndBuffer.slice();
-            mountStartBuffer.length = 0;
-            mountEndBuffer.length = 0;
-            return { starts, ends };
-        };
-        // NOTE: the fork is deferred one microtask so a Command's Effect
-        // never begins on the dispatching stack. Commands are facts from
-        // outside the update loop; their results always arrive
-        // asynchronously, exactly as under the old queue. The fork runs
-        // through `Effect.runForkWith` (which starts its fiber
-        // synchronously, so the child is registered in `runtimeScope`
-        // before this callback returns), not `Effect.runSyncWith`:
-        // `runSyncWith` injects a temporary synchronous scheduler into the
-        // fiber context, the child would inherit it, and every later yield
-        // in the Command (for example, an op-budget suspension, or a
-        // Stream step) would
-        // reschedule through clamped `setTimeout` instead of the browser
-        // microtask scheduler carried by `runtimeContextForCommands`.
-        const forkCommand = (command, message) => {
-            queueMicrotask(() => {
-                // NOTE: `isCrashed` as well as `isRuntimeDisposed`. A crash is
-                // terminal but does not dispose the runtime, and a Command forked
-                // by a Message processed just before the crashing Message sits in
-                // this microtask when the crash view paints. Without the crash
-                // check its effect would run behind the crash view, contradicting
-                // the crash-terminality contract. `crashWith` sets `isCrashed`
-                // synchronously, so it is already set by the time this runs.
-                if (isRuntimeDisposed || isCrashed) {
+                const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
+                yield* Option.match(maybeCurrentVNode, {
+                    onNone: () => Effect.void,
+                    onSome: currentVNode => Effect.sync(() => {
+                        const placeholderNode = __patchVNode(Option.some(currentVNode), null, container).elm;
+                        if (placeholderNode && placeholderNode.parentNode) {
+                            placeholderNode.parentNode.replaceChild(container, placeholderNode);
+                            container.replaceChildren();
+                        }
+                    }),
+                });
+            }));
+            // NOTE: shared by every crash path: the init render, the plain
+            // message drain and render frame (which reach it through
+            // `Effect.runFork` from their catch blocks), and the Command and
+            // Subscription fibers (a Command's Effect and a Subscription's
+            // Stream are typed with a `never` error channel, so a cause
+            // escaping one can only be a `resources` Layer build failure or an
+            // escaped defect, both unrecoverable). Each path catches its own
+            // cause so a failure surfaces as the crash view instead of dying
+            // silently and leaving the DOM frozen at the last successful
+            // render. The first crash wins: concurrent Command fibers can fail
+            // on the same broken Layer, and only one should report and render.
+            const crashWith = (cause, maybeMessage) => Effect.sync(() => {
+                if (isCrashed) {
                     return;
                 }
-                Effect.runForkWith(runtimeContextForCommands)(Effect.forkIn(runtimeScope)(command.effect.pipe(Effect.withSpan(command.name, {
-                    attributes: command.args ?? {},
-                }), provideAllResources, Effect.flatMap(enqueueMessageEffect), Effect.catchCause(cause => crashWith(cause, message)))));
+                isCrashed = true;
+                // NOTE: the crash view should appear at once, not animate in from
+                // a snapshot of the state that crashed.
+                skipPendingViewTransition();
+                const model = liveModel;
+                const squashed = Cause.squash(cause);
+                const error = squashed instanceof Error ? squashed : new Error(String(squashed));
+                renderCrashView({ error, model, message: maybeMessage }, crash, container, vnodeSlot, manageDocument);
             });
-        };
-        const processMessagePlain = (message) => {
-            const currentModel = liveModel;
-            const [[nextModelRaw, commands], maybeUpdateDuration] = measureSlowPhase(resolvedSlowUpdate, () => update(currentModel, message));
-            const nextModel = maybeFreezeModel(nextModelRaw);
-            reportSlowPhase(resolvedSlowUpdate, maybeUpdateDuration, (durationMs, thresholdMs) => ({
-                _tag: 'Update',
-                previousModel: currentModel,
-                nextModel,
-                message,
-                durationMs,
-                thresholdMs,
-            }));
-            if (currentModel !== nextModel) {
-                liveModel = nextModel;
-                maybeLastDirtyMessage = Option.some(message);
-                PubSub.publishUnsafe(modelPubSub, nextModel);
-                if (import.meta.hot) {
-                    Effect.runSync(schedulePreserveModel(nextModel));
+            // NOTE: drain-local state. Kept as plain closure variables instead
+            // of `Ref`s because nothing else reads or writes them concurrently,
+            // and JS's single-threaded model already orders writes against
+            // subsequent reads. `currentMessage` is read by the crash handler.
+            let currentMessage = Option.none();
+            let maybeLastDirtyMessage = Option.none();
+            // NOTE: the DevTools store is installed at most once during boot and
+            // never replaced. Caching it in a closure variable avoids a
+            // `Ref.get` on every message and on every render frame (the
+            // store powers the pause check). Plain `null` rather than `Option`:
+            // the hot path only ever presence-checks it, and the check should
+            // stay a bare comparison.
+            let devToolsStore = null;
+            const dispatchSync = (message) => {
+                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                enqueueMessage(message);
+            };
+            const dispatchAsync = (message) => 
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            enqueueMessageEffect(message);
+            const dispatch = { dispatchAsync, dispatchSync };
+            const isPausedNow = () => devToolsStore !== null &&
+                SubscriptionRef.getUnsafe(devToolsStore.stateRef).isPaused;
+            // NOTE: recording is gated on the DevTools store because the store
+            // is the only consumer. Without the gate every Mount start and end
+            // in a production frame would allocate a record just to be sliced
+            // and dropped.
+            const mountStartBuffer = [];
+            const mountEndBuffer = [];
+            const mountTracker = {
+                started: (name, args) => {
+                    if (devToolsStore === null) {
+                        return;
+                    }
+                    mountStartBuffer.push(args === undefined ? { name } : { name, args });
+                },
+                ended: (name, args) => {
+                    if (devToolsStore === null) {
+                        return;
+                    }
+                    mountEndBuffer.push(args === undefined ? { name } : { name, args });
+                },
+            };
+            const drainMountEvents = () => {
+                const starts = mountStartBuffer.slice();
+                const ends = mountEndBuffer.slice();
+                mountStartBuffer.length = 0;
+                mountEndBuffer.length = 0;
+                return { starts, ends };
+            };
+            // NOTE: the fork is deferred one microtask so a Command's Effect
+            // never begins on the dispatching stack. Commands are facts from
+            // outside the update loop; their results always arrive
+            // asynchronously, exactly as under the old queue. The fork runs
+            // through `Effect.runForkWith` (which starts its fiber
+            // synchronously, so the child is registered in `runtimeScope`
+            // before this callback returns), not `Effect.runSyncWith`:
+            // `runSyncWith` injects a temporary synchronous scheduler into the
+            // fiber context, the child would inherit it, and every later yield
+            // in the Command (for example, an op-budget suspension, or a
+            // Stream step) would
+            // reschedule through clamped `setTimeout` instead of the browser
+            // microtask scheduler carried by `runtimeContextForCommands`.
+            const forkCommand = (command, message) => {
+                queueMicrotask(() => {
+                    // NOTE: `isCrashed` as well as `isRuntimeDisposed`. A crash is
+                    // terminal but does not dispose the runtime, and a Command forked
+                    // by a Message processed just before the crashing Message sits in
+                    // this microtask when the crash view paints. Without the crash
+                    // check its effect would run behind the crash view, contradicting
+                    // the crash-terminality contract. `crashWith` sets `isCrashed`
+                    // synchronously, so it is already set by the time this runs.
+                    if (isRuntimeDisposed || isCrashed) {
+                        return;
+                    }
+                    Effect.runForkWith(runtimeContextForCommands)(Effect.forkIn(runtimeScope)(command.effect.pipe(Effect.withSpan(command.name, {
+                        attributes: command.args ?? {},
+                    }), provideAllResources, Effect.flatMap(enqueueMessageEffect), Effect.catchCause(cause => crashWith(cause, message)))));
+                });
+            };
+            const processMessagePlain = (message) => {
+                const currentModel = liveModel;
+                const [[nextModelRaw, commands], maybeUpdateDuration] = measureSlowPhase(resolvedSlowUpdate, () => update(currentModel, message));
+                const nextModel = maybeFreezeModel(nextModelRaw);
+                reportSlowPhase(resolvedSlowUpdate, maybeUpdateDuration, (durationMs, thresholdMs) => ({
+                    _tag: 'Update',
+                    previousModel: currentModel,
+                    nextModel,
+                    message,
+                    durationMs,
+                    thresholdMs,
+                }));
+                if (currentModel !== nextModel) {
+                    liveModel = nextModel;
+                    maybeLastDirtyMessage = Option.some(message);
+                    PubSub.publishUnsafe(modelPubSub, nextModel);
+                    if (import.meta.hot) {
+                        Effect.runSync(schedulePreserveModel(nextModel));
+                    }
+                    scheduleRenderFrame();
                 }
-                scheduleRenderFrame();
-            }
-            if (!Array.isReadonlyArrayEmpty(commands)) {
-                for (const command of commands) {
-                    forkCommand(
-                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                    command, Option.some(message));
+                if (!Array.isReadonlyArrayEmpty(commands)) {
+                    for (const command of commands) {
+                        forkCommand(
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        command, Option.some(message));
+                    }
                 }
-            }
-            // NOTE: store writes go through `Effect.runFork`, not
-            // `Effect.runSync`. Both complete inline when the store's state
-            // Ref is uncontended (the always case on this path), but a
-            // DevTools fiber holding the Ref's permit across a yield would
-            // make `runSync` throw and crash the app; `runFork` parks and
-            // finishes the write when the permit frees, and the Ref's FIFO
-            // permit queue preserves write order.
-            if (devToolsStore !== null) {
-                const store = devToolsStore;
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                const tag = message._tag;
-                const isModelChanged = currentModel !== nextModel;
-                if (!excludeFromHistoryTags.has(tag)) {
-                    Effect.runFork(store.recordMessage(
-                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                    message, currentModel, nextModel, Array.map(
+                // NOTE: store writes go through `Effect.runFork`, not
+                // `Effect.runSync`. Both complete inline when the store's state
+                // Ref is uncontended (the always case on this path), but a
+                // DevTools fiber holding the Ref's permit across a yield would
+                // make `runSync` throw and crash the app; `runFork` parks and
+                // finishes the write when the permit frees, and the Ref's FIFO
+                // permit queue preserves write order.
+                if (devToolsStore !== null) {
+                    const store = devToolsStore;
                     /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                    commands, toCommandRecord), isModelChanged));
+                    const tag = message._tag;
+                    const isModelChanged = currentModel !== nextModel;
+                    if (!excludeFromHistoryTags.has(tag)) {
+                        Effect.runFork(store.recordMessage(
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        message, currentModel, nextModel, Array.map(
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        commands, toCommandRecord), isModelChanged));
+                    }
+                    else if (isModelChanged) {
+                        Effect.runFork(store.updateLatestModel(nextModel));
+                    }
                 }
-                else if (isModelChanged) {
-                    Effect.runFork(store.updateLatestModel(nextModel));
+            };
+            // NOTE: escape hatch for synchronous bursts, so the page keeps
+            // painting under pathological load (for example, a fiber
+            // dispatching thousands of Messages in one task, or a fully
+            // synchronous Command chain). Bursts
+            // arrive as many single-Message drains within one browser task, so
+            // the budget is cumulative across drains: it accumulates processing
+            // time and resets when the browser demonstrably got control back (a
+            // render frame ran, or the gap since the last drain exceeds the
+            // budget). Once over budget, processing defers to a MessageChannel
+            // tick, which starts a new task so a pending frame can paint.
+            // setTimeout(0) would be clamped to 4ms+; MessageChannel delivers in
+            // ~0.5ms. The normal path pays two clock reads per drain.
+            let syncWorkMsSinceYield = 0;
+            let lastDrainEndedAt = 0;
+            let isDrainDeferredToNextTask = false;
+            let maybeDeferredDrainChannel = null;
+            const scheduleDeferredDrain = () => {
+                if (maybeDeferredDrainChannel === null) {
+                    maybeDeferredDrainChannel = new MessageChannel();
+                    maybeDeferredDrainChannel.port2.onmessage = () => {
+                        isDrainDeferredToNextTask = false;
+                        syncWorkMsSinceYield = 0;
+                        drainPendingMessages();
+                    };
                 }
-            }
-        };
-        // NOTE: escape hatch for synchronous bursts, so the page keeps
-        // painting under pathological load (for example, a fiber
-        // dispatching thousands of Messages in one task, or a fully
-        // synchronous Command chain). Bursts
-        // arrive as many single-Message drains within one browser task, so
-        // the budget is cumulative across drains: it accumulates processing
-        // time and resets when the browser demonstrably got control back (a
-        // render frame ran, or the gap since the last drain exceeds the
-        // budget). Once over budget, processing defers to a MessageChannel
-        // tick, which starts a new task so a pending frame can paint.
-        // setTimeout(0) would be clamped to 4ms+; MessageChannel delivers in
-        // ~0.5ms. The normal path pays two clock reads per drain.
-        let syncWorkMsSinceYield = 0;
-        let lastDrainEndedAt = 0;
-        let isDrainDeferredToNextTask = false;
-        let maybeDeferredDrainChannel = null;
-        const scheduleDeferredDrain = () => {
-            if (maybeDeferredDrainChannel === null) {
-                maybeDeferredDrainChannel = new MessageChannel();
-                maybeDeferredDrainChannel.port2.onmessage = () => {
-                    isDrainDeferredToNextTask = false;
+                isDrainDeferredToNextTask = true;
+                maybeDeferredDrainChannel.port1.postMessage(null);
+            };
+            yield* Effect.addFinalizer(() => Effect.sync(() => {
+                if (maybeDeferredDrainChannel !== null) {
+                    maybeDeferredDrainChannel.port1.close();
+                    maybeDeferredDrainChannel.port2.close();
+                    maybeDeferredDrainChannel = null;
+                }
+            }));
+            const drainPendingMessages = () => {
+                if (!isBootComplete ||
+                    isProcessingMessages ||
+                    isRenderingFrame ||
+                    isDrainDeferredToNextTask ||
+                    isRuntimeDisposed ||
+                    isCrashed) {
+                    return;
+                }
+                const drainStartedAt = performance.now();
+                if (drainStartedAt - lastDrainEndedAt > DRAIN_BUDGET_MS) {
                     syncWorkMsSinceYield = 0;
-                    drainPendingMessages();
-                };
-            }
-            isDrainDeferredToNextTask = true;
-            maybeDeferredDrainChannel.port1.postMessage(null);
-        };
-        yield* Effect.addFinalizer(() => Effect.sync(() => {
-            if (maybeDeferredDrainChannel !== null) {
-                maybeDeferredDrainChannel.port1.close();
-                maybeDeferredDrainChannel.port2.close();
-                maybeDeferredDrainChannel = null;
-            }
-        }));
-        const drainPendingMessages = () => {
-            if (!isBootComplete ||
-                isProcessingMessages ||
-                isRenderingFrame ||
-                isDrainDeferredToNextTask ||
-                isRuntimeDisposed ||
-                isCrashed) {
-                return;
-            }
-            const drainStartedAt = performance.now();
-            if (drainStartedAt - lastDrainEndedAt > DRAIN_BUDGET_MS) {
-                syncWorkMsSinceYield = 0;
-            }
-            if (syncWorkMsSinceYield > DRAIN_BUDGET_MS) {
-                scheduleDeferredDrain();
-                return;
-            }
-            isProcessingMessages = true;
-            try {
-                while (pendingMessages.length > 0) {
-                    const batch = pendingMessages;
-                    pendingMessages = [];
-                    for (let index = 0; index < batch.length; index++) {
-                        const message = batch[index];
-                        currentMessage = Option.some(message);
-                        processMessagePlain(message);
-                        const hasRemainingWork = index + 1 < batch.length || pendingMessages.length > 0;
-                        if (hasRemainingWork &&
-                            syncWorkMsSinceYield + (performance.now() - drainStartedAt) >
-                                DRAIN_BUDGET_MS) {
-                            // NOTE: unprocessed batch Messages arrived before
-                            // anything in pendingMessages, so they go back to the
-                            // front to keep arrival order.
-                            pendingMessages = batch
-                                .slice(index + 1)
-                                .concat(pendingMessages);
-                            scheduleDeferredDrain();
-                            return;
+                }
+                if (syncWorkMsSinceYield > DRAIN_BUDGET_MS) {
+                    scheduleDeferredDrain();
+                    return;
+                }
+                isProcessingMessages = true;
+                try {
+                    while (pendingMessages.length > 0) {
+                        const batch = pendingMessages;
+                        pendingMessages = [];
+                        for (let index = 0; index < batch.length; index++) {
+                            const message = batch[index];
+                            currentMessage = Option.some(message);
+                            processMessagePlain(message);
+                            const hasRemainingWork = index + 1 < batch.length || pendingMessages.length > 0;
+                            if (hasRemainingWork &&
+                                syncWorkMsSinceYield + (performance.now() - drainStartedAt) >
+                                    DRAIN_BUDGET_MS) {
+                                // NOTE: unprocessed batch Messages arrived before
+                                // anything in pendingMessages, so they go back to the
+                                // front to keep arrival order.
+                                pendingMessages = batch
+                                    .slice(index + 1)
+                                    .concat(pendingMessages);
+                                scheduleDeferredDrain();
+                                return;
+                            }
                         }
                     }
                 }
-            }
-            catch (error) {
-                Effect.runFork(crashWith(Cause.die(error), currentMessage));
-            }
-            finally {
-                const drainEndedAt = performance.now();
-                syncWorkMsSinceYield += drainEndedAt - drainStartedAt;
-                lastDrainEndedAt = drainEndedAt;
-                isProcessingMessages = false;
-            }
-        };
-        // NOTE: `dispatchService` defaults to the live dispatch but is
-        // overridable so the DevTools jumpTo render path can pass
-        // `noOpDispatch`. Mount Effects forked during a replay render still
-        // execute (so the rendered DOM looks correct: positioning,
-        // observer attachment, library setup), but their result Messages
-        // reach a no-op dispatchSync and are never processed.
-        // This prevents mount-derived Messages from polluting history when
-        // the user is just inspecting past state.
-        const render = (model, message, dispatchService = dispatch, renderMode = 'Live') => Effect.gen(function* () {
-            isRenderingFrame = true;
-            const runtimeContext = yield* Effect.context();
-            const maybeLiveRender = Option.liftPredicate(renderMode, mode => mode === 'Live');
-            if (renderMode === 'Replay') {
-                beginReplayHtmlRender();
-            }
-            const maybeLiveSlowView = Option.flatMap(maybeLiveRender, () => resolvedSlowView);
-            const maybeLiveSlowPatch = Option.flatMap(maybeLiveRender, () => resolvedSlowPatch);
-            const [nextDocument, maybeViewDuration] = measureSlowPhase(maybeLiveSlowView, () => {
-                beginHtmlRender(boundaryRegistry);
-                setHtmlRuntime(dispatchService.dispatchSync, runtimeContext, boundaryRegistry);
-                try {
-                    return view(model, htmlBuilder);
+                catch (error) {
+                    Effect.runFork(crashWith(Cause.die(error), currentMessage));
                 }
                 finally {
-                    clearHtmlRuntime();
+                    const drainEndedAt = performance.now();
+                    syncWorkMsSinceYield += drainEndedAt - drainStartedAt;
+                    lastDrainEndedAt = drainEndedAt;
+                    isProcessingMessages = false;
                 }
-            });
-            const nextVNode = nextDocument.body;
-            reportSlowPhase(maybeLiveSlowView, maybeViewDuration, (durationMs, thresholdMs) => ({
-                _tag: 'View',
-                model,
-                message,
-                durationMs,
-                thresholdMs,
-            }));
-            const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
-            const [patchedVNode, maybePatchDuration] = yield* Effect.sync(() => measureSlowPhase(maybeLiveSlowPatch, () => __patchVNode(maybeCurrentVNode, nextVNode, container, boundaryRegistry.dedupeSeen)));
-            vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
-            reportSlowPhase(maybeLiveSlowPatch, maybePatchDuration, (durationMs, thresholdMs) => ({
-                _tag: 'Patch',
-                model,
-                message,
-                durationMs,
-                thresholdMs,
-            }));
-            if (manageDocument) {
-                yield* Effect.sync(() => applyDocumentMetadata(nextDocument, patchedVNode.elm));
-            }
-            if (import.meta.hot) {
-                yield* Effect.sync(() => duplicateIdScanner?.schedule(patchedVNode.elm));
-            }
-        }).pipe(Effect.ensuring(Effect.sync(() => {
-            isRenderingFrame = false;
-            endReplayHtmlRender();
-            drainPendingMessages();
-        })), Effect.provideService(Dispatch, dispatchService), Effect.provideService(MountTracker, mountTracker));
-        const isInIframe = window.self !== window.top;
-        const resolvedDevTools = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.filter(config => Match.value(config.show ?? DEFAULT_DEV_TOOLS_SHOW).pipe(Match.when('Always', () => true), Match.when('Development', () => !!import.meta.hot && !isInIframe), Match.exhaustive)), Option.map(config => ({
-            position: config.position ?? DEFAULT_DEV_TOOLS_POSITION,
-            mode: resolveDevToolsMode(config.mode ?? DEFAULT_DEV_TOOLS_MODE),
-            maybeBanner: Option.fromNullishOr(config.banner),
-            maybeOverlay: Option.fromNullishOr(config.overlay),
-        })));
-        if (Option.isSome(resolvedDevTools)) {
-            const { position, mode, maybeBanner, maybeOverlay } = resolvedDevTools.value;
-            // NOTE: when excludeFromHistory is active, the runtime drops
-            // excluded Messages from the recorded history. Replay walks the
-            // recorded entries forward from the nearest keyframe. With
-            // exclusion, the dropped Messages aren't in that walk, so any
-            // cumulative state they would have produced is missing from the
-            // replayed model. Setting keyframeInterval to 1 stores a full
-            // snapshot on every recorded entry, so time-travel becomes a
-            // direct lookup that reflects the real live state at the moment
-            // the entry was recorded.
-            const isExcludingMessages = excludeFromHistoryTags.size > 0;
-            const store = yield* createDevToolsStore({
-                /* eslint-disable @typescript-eslint/consistent-type-assertions */
-                replay: (model, message) => {
-                    const [updatedModel] = update(model, message);
-                    return maybeFreezeModel(updatedModel);
-                },
-                /* eslint-enable @typescript-eslint/consistent-type-assertions */
-                // NOTE: passes `noOpDispatch` so mount Effects forked during
-                // the replay render dispatch their result Messages into a
-                // no-op (instead of enqueueing them as new history entries).
-                // Also discards mount events fired during the render so they
-                // don't get attributed to the next user-initiated dispatch.
-                render: model => Effect.gen(function* () {
-                    yield* render(
+            };
+            // NOTE: `dispatchService` defaults to the live dispatch but is
+            // overridable so the DevTools jumpTo render path can pass
+            // `noOpDispatch`. Mount Effects forked during a replay render still
+            // execute (so the rendered DOM looks correct: positioning,
+            // observer attachment, library setup), but their result Messages
+            // reach a no-op dispatchSync and are never processed.
+            // This prevents mount-derived Messages from polluting history when
+            // the user is just inspecting past state.
+            const render = (model, message, dispatchService = dispatch, renderMode = 'Live') => Effect.gen(function* () {
+                isRenderingFrame = true;
+                const runtimeContext = yield* Effect.context();
+                const maybeLiveRender = Option.liftPredicate(renderMode, mode => mode === 'Live');
+                if (renderMode === 'Replay') {
+                    beginReplayHtmlRender();
+                }
+                const maybeLiveSlowView = Option.flatMap(maybeLiveRender, () => resolvedSlowView);
+                const maybeLiveSlowPatch = Option.flatMap(maybeLiveRender, () => resolvedSlowPatch);
+                const [nextDocument, maybeViewDuration] = measureSlowPhase(maybeLiveSlowView, () => {
+                    beginHtmlRender(boundaryRegistry);
+                    setHtmlRuntime(dispatchService.dispatchSync, runtimeContext, boundaryRegistry);
+                    try {
+                        return view(model, htmlBuilder);
+                    }
+                    finally {
+                        clearHtmlRuntime();
+                    }
+                });
+                const nextVNode = nextDocument.body;
+                reportSlowPhase(maybeLiveSlowView, maybeViewDuration, (durationMs, thresholdMs) => ({
+                    _tag: 'View',
+                    model,
+                    message,
+                    durationMs,
+                    thresholdMs,
+                }));
+                const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
+                const [patchedVNode, maybePatchDuration] = yield* Effect.sync(() => measureSlowPhase(maybeLiveSlowPatch, () => __patchVNode(maybeCurrentVNode, nextVNode, container, boundaryRegistry.dedupeSeen)));
+                vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
+                reportSlowPhase(maybeLiveSlowPatch, maybePatchDuration, (durationMs, thresholdMs) => ({
+                    _tag: 'Patch',
+                    model,
+                    message,
+                    durationMs,
+                    thresholdMs,
+                }));
+                if (manageDocument) {
+                    yield* Effect.sync(() => applyDocumentMetadata(nextDocument, patchedVNode.elm));
+                }
+                if (import.meta.hot) {
+                    yield* Effect.sync(() => duplicateIdScanner?.schedule(patchedVNode.elm));
+                }
+            }).pipe(Effect.ensuring(Effect.sync(() => {
+                isRenderingFrame = false;
+                endReplayHtmlRender();
+                drainPendingMessages();
+            })), Effect.provideService(Dispatch, dispatchService), Effect.provideService(MountTracker, mountTracker));
+            const isInIframe = window.self !== window.top;
+            const resolvedDevTools = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.filter(config => Match.value(config.show ?? DEFAULT_DEV_TOOLS_SHOW).pipe(Match.when('Always', () => true), Match.when('Development', () => !!import.meta.hot && !isInIframe), Match.exhaustive)), Option.map(config => ({
+                position: config.position ?? DEFAULT_DEV_TOOLS_POSITION,
+                mode: resolveDevToolsMode(config.mode ?? DEFAULT_DEV_TOOLS_MODE),
+                maybeBanner: Option.fromNullishOr(config.banner),
+                maybeOverlay: Option.fromNullishOr(config.overlay),
+            })));
+            if (Option.isSome(resolvedDevTools)) {
+                const { position, mode, maybeBanner, maybeOverlay } = resolvedDevTools.value;
+                // NOTE: when excludeFromHistory is active, the runtime drops
+                // excluded Messages from the recorded history. Replay walks the
+                // recorded entries forward from the nearest keyframe. With
+                // exclusion, the dropped Messages aren't in that walk, so any
+                // cumulative state they would have produced is missing from the
+                // replayed model. Setting keyframeInterval to 1 stores a full
+                // snapshot on every recorded entry, so time-travel becomes a
+                // direct lookup that reflects the real live state at the moment
+                // the entry was recorded.
+                const isExcludingMessages = excludeFromHistoryTags.size > 0;
+                const store = yield* createDevToolsStore({
+                    /* eslint-disable @typescript-eslint/consistent-type-assertions */
+                    replay: (model, message) => {
+                        const [updatedModel] = update(model, message);
+                        return maybeFreezeModel(updatedModel);
+                    },
+                    /* eslint-enable @typescript-eslint/consistent-type-assertions */
+                    // NOTE: passes `noOpDispatch` so mount Effects forked during
+                    // the replay render dispatch their result Messages into a
+                    // no-op (instead of enqueueing them as new history entries).
+                    // Also discards mount events fired during the render so they
+                    // don't get attributed to the next user-initiated dispatch.
+                    render: model => Effect.gen(function* () {
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        const replayedModel = model;
+                        // NOTE: a transition still animating belongs to the live
+                        // state this replay is about to paint over. Left running it
+                        // animates a dead snapshot across the replayed DOM.
+                        skipPendingViewTransition();
+                        yield* render(replayedModel, Option.none(), noOpDispatch, 'Replay');
+                        drainMountEvents();
+                        // NOTE: a replay paints a past Model, so it owns the DOM on
+                        // screen until the next live frame. Leaving
+                        // `lastRenderedModel` on the pre-pause Model would hand the
+                        // `viewTransition` predicate a `previousModel` describing a
+                        // DOM that no longer exists, and the frame `resume`
+                        // schedules would animate the wrong direction out of the
+                        // wrong snapshot.
+                        lastRenderedModel = replayedModel;
+                        // NOTE: the Message that dirtied the pre-pause frame does not
+                        // describe this repaint. Clearing it means the frame `resume`
+                        // schedules renders plainly, matching the documented rule
+                        // that time-travel never animates.
+                        maybeLastDirtyMessage = Option.none();
+                    }),
+                    // NOTE: `resume` calls this after a jumpTo render attached DOM
+                    // listeners to `noOpDispatch`. Scheduling a frame renders the
+                    // live model with live dispatch and rebinds listeners.
+                    markRenderPending: Effect.sync(() => scheduleRenderFrame()),
+                }, {
+                    ...(devToolsKeyframeInterval !== undefined && {
+                        keyframeInterval: devToolsKeyframeInterval,
+                    }),
+                    ...(devToolsMaxEntries !== undefined && {
+                        maxEntries: devToolsMaxEntries,
+                    }),
+                    // NOTE: exclusion forces keyframeInterval to 1 regardless of any
+                    // configured value, since excluded Messages are never replayed
+                    // and a denser interval would leave gaps in the replayed model.
+                    // Spread last so it wins over `keyframeInterval` above.
+                    ...(isExcludingMessages && { keyframeInterval: 1 }),
+                });
+                devToolsStore = store;
+                // NOTE: init is recorded after the init render below, so the
+                // mount buffer reflects the Mounts that fired on the first paint.
+                yield* Option.match(maybeOverlay, {
+                    onNone: () => Effect.void,
+                    onSome: overlay => overlay(store, position, mode, maybeBanner),
+                });
+                if (import.meta.hot) {
+                    const maybeMessageSchema = devTools !== undefined && devTools !== false
+                        ? Option.fromNullishOr(devTools.Message)
+                        : Option.none();
+                    yield* startWebSocketBridge(store, import.meta.hot, 
                     /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                    model, Option.none(), noOpDispatch, 'Replay');
-                    drainMountEvents();
-                }),
-                // NOTE: `resume` calls this after a jumpTo render attached DOM
-                // listeners to `noOpDispatch`. Scheduling a frame renders the
-                // live model with live dispatch and rebinds listeners.
-                markRenderPending: Effect.sync(() => scheduleRenderFrame()),
-            }, {
-                ...(devToolsKeyframeInterval !== undefined && {
-                    keyframeInterval: devToolsKeyframeInterval,
-                }),
-                ...(devToolsMaxEntries !== undefined && {
-                    maxEntries: devToolsMaxEntries,
-                }),
-                // NOTE: exclusion forces keyframeInterval to 1 regardless of any
-                // configured value, since excluded Messages are never replayed
-                // and a denser interval would leave gaps in the replayed model.
-                // Spread last so it wins over `keyframeInterval` above.
-                ...(isExcludingMessages && { keyframeInterval: 1 }),
-            });
-            devToolsStore = store;
-            // NOTE: init is recorded after the init render below, so the
-            // mount buffer reflects the Mounts that fired on the first paint.
-            yield* Option.match(maybeOverlay, {
-                onNone: () => Effect.void,
-                onSome: overlay => overlay(store, position, mode, maybeBanner),
-            });
-            if (import.meta.hot) {
-                const maybeMessageSchema = devTools !== undefined && devTools !== false
-                    ? Option.fromNullishOr(devTools.Message)
-                    : Option.none();
-                yield* startWebSocketBridge(store, import.meta.hot, 
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                message => enqueueMessageEffect(message), 
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                maybeMessageSchema);
-            }
-        }
-        const initRenderExit = yield* Effect.exit(render(initModel, Option.none()));
-        if (Exit.isFailure(initRenderExit)) {
-            yield* crashWith(initRenderExit.cause, Option.none());
-            // NOTE: suspend instead of returning. Completing would close the
-            // runtime scope and tear down the crash view; the scope must stay
-            // open until the runtime is interrupted (dispose, or page unload).
-            return yield* Effect.never;
-        }
-        if (isPreserveScrollActive) {
-            yield* restorePreservedScrollPosition(runtimeId);
-        }
-        const initMountEvents = drainMountEvents();
-        if (devToolsStore !== null) {
-            yield* devToolsStore.recordInit(initModel, Array.map(initCommands, toCommandRecord), initMountEvents.starts);
-        }
-        // NOTE: maybeLastDirtyMessage holds the most recent dirtying
-        // Message, so slow render-phase callbacks during high-rate bursts attribute
-        // to the last Message in the frame batch, not the specific one that
-        // pushed the view past threshold. Acceptable for a debug callback;
-        // full attribution would require correlating each message with its
-        // render contribution, which isn't worth the complexity.
-        // NOTE: render frames run as plain JavaScript inside the
-        // requestAnimationFrame callback. Messages arriving between frames
-        // mark at most one pending frame; the callback renders once with the
-        // latest model. The runtime context for OnMount forking and Command
-        // forking is captured once here; it is constant for the lifetime of
-        // the runtime.
-        const runtimeContextForCommands = yield* Effect.context();
-        const liveRenderContext = Context.add(Context.add(runtimeContextForCommands, Dispatch, dispatch), MountTracker, mountTracker);
-        const renderFramePlain = () => {
-            isRenderFrameScheduled = false;
-            // NOTE: a frame scheduled before disposal fires after it; a
-            // disposed runtime must not repaint the released container.
-            if (isRuntimeDisposed) {
-                return;
-            }
-            // NOTE: a frame is running, so the browser got control back; the
-            // drain budget starts fresh.
-            syncWorkMsSinceYield = 0;
-            // NOTE: a Message that dirtied the model can also be the one
-            // whose Command crashed the runtime. Without this guard the
-            // next animation frame would render the live view over the
-            // crash view.
-            if (isCrashed) {
-                return;
-            }
-            if (isPausedNow()) {
-                return;
-            }
-            isRenderingFrame = true;
-            try {
-                renderSyncPlain(liveModel, maybeLastDirtyMessage);
-                if (devToolsStore !== null) {
-                    const mountEvents = drainMountEvents();
-                    Effect.runFork(devToolsStore.attachRenderedMounts(mountEvents.starts, mountEvents.ends));
+                    message => enqueueMessageEffect(message), 
+                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    maybeMessageSchema);
                 }
             }
-            catch (error) {
-                Effect.runFork(crashWith(Cause.die(error), maybeLastDirtyMessage));
+            const initRenderExit = yield* Effect.exit(render(initModel, Option.none()));
+            if (Exit.isFailure(initRenderExit)) {
+                yield* crashWith(initRenderExit.cause, Option.none());
+                // NOTE: suspend instead of returning. Completing would close the
+                // runtime scope and tear down the crash view; the scope must stay
+                // open until the runtime is interrupted (dispose, or page unload).
+                return yield* Effect.never;
             }
-            finally {
-                isRenderingFrame = false;
+            if (isPreserveScrollActive) {
+                yield* restorePreservedScrollPosition(runtimeId);
             }
-            // NOTE: Messages dispatched by patch-time hooks (for example,
-            // OnUnmount destroys, or Mount emissions) were buffered while the
-            // frame held the stack; they process now, after the patch has
-            // committed and the frame's Mount events are attributed.
-            drainPendingMessages();
-        };
-        const renderSyncPlain = (model, maybeMessage) => {
-            const [nextDocument, maybeViewDuration] = measureSlowPhase(resolvedSlowView, () => {
-                beginHtmlRender(boundaryRegistry);
-                setHtmlRuntime(dispatch.dispatchSync, liveRenderContext, boundaryRegistry);
+            const initMountEvents = drainMountEvents();
+            if (devToolsStore !== null) {
+                yield* devToolsStore.recordInit(initModel, Array.map(initCommands, toCommandRecord), initMountEvents.starts);
+            }
+            // NOTE: maybeLastDirtyMessage holds the most recent dirtying
+            // Message, so slow render-phase callbacks during high-rate bursts attribute
+            // to the last Message in the frame batch, not the specific one that
+            // pushed the view past threshold. Acceptable for a debug callback;
+            // full attribution would require correlating each message with its
+            // render contribution, which isn't worth the complexity.
+            // NOTE: render frames run as plain JavaScript inside the
+            // requestAnimationFrame callback. Messages arriving between frames
+            // mark at most one pending frame; the callback renders once with the
+            // latest model. The runtime context for OnMount forking and Command
+            // forking is captured once here; it is constant for the lifetime of
+            // the runtime.
+            const runtimeContextForCommands = yield* Effect.context();
+            const liveRenderContext = Context.add(Context.add(runtimeContextForCommands, Dispatch, dispatch), MountTracker, mountTracker);
+            // NOTE: the render, Mount drain, DevTools attribution, and
+            // patch-time-buffer flush. Shared by the plain path (called directly)
+            // and the View Transition path (called from the transition's update
+            // callback), which run identical work; only whether they run inside
+            // `document.startViewTransition` differs. `isRenderingFrame` gates the
+            // buffering of Messages dispatched by patch-time hooks, so it must
+            // wrap the actual patch, which on the transition path happens inside
+            // the callback, not when the frame is scheduled.
+            const runRenderFrameBody = () => {
+                isRenderingFrame = true;
+                // NOTE: captured before the patch, because `drainPendingMessages`
+                // below can advance `liveModel` again before the next frame reads
+                // it. What this frame painted is what the next transition animates
+                // away from.
+                const renderedModel = liveModel;
                 try {
-                    return view(model, htmlBuilder);
+                    renderSyncPlain(liveModel, maybeLastDirtyMessage);
+                    // NOTE: after the patch, so a render that threw leaves this on the
+                    // Model still on screen, and before `drainPendingMessages` below,
+                    // whose handlers can advance `liveModel` again.
+                    lastRenderedModel = renderedModel;
+                    if (devToolsStore !== null) {
+                        const mountEvents = drainMountEvents();
+                        Effect.runFork(devToolsStore.attachRenderedMounts(mountEvents.starts, mountEvents.ends));
+                    }
+                }
+                catch (error) {
+                    Effect.runFork(crashWith(Cause.die(error), maybeLastDirtyMessage));
                 }
                 finally {
-                    clearHtmlRuntime();
+                    isRenderingFrame = false;
                 }
-            });
-            reportSlowPhase(resolvedSlowView, maybeViewDuration, (durationMs, thresholdMs) => ({
-                _tag: 'View',
-                model,
-                message: maybeMessage,
-                durationMs,
-                thresholdMs,
-            }));
-            const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
-            const [patchedVNode, maybePatchDuration] = measureSlowPhase(resolvedSlowPatch, () => __patchVNode(maybeCurrentVNode, nextDocument.body, container, boundaryRegistry.dedupeSeen));
-            vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
-            reportSlowPhase(resolvedSlowPatch, maybePatchDuration, (durationMs, thresholdMs) => ({
-                _tag: 'Patch',
-                model,
-                message: maybeMessage,
-                durationMs,
-                thresholdMs,
-            }));
-            if (manageDocument) {
-                applyDocumentMetadata(nextDocument, patchedVNode.elm);
-            }
-            if (import.meta.hot) {
-                duplicateIdScanner?.schedule(patchedVNode.elm);
-            }
-        };
-        const scheduleRenderFrame = () => {
-            if (isRenderFrameScheduled) {
-                return;
-            }
-            isRenderFrameScheduled = true;
-            requestAnimationFrame(renderFramePlain);
-        };
-        // NOTE: reloading on bfcache restore is a page-level decision, so
-        // only a page-owning runtime that manages the document installs the
-        // listener. An app started through `embed` carries a host connector
-        // and must never force the host page to reload, so it is excluded
-        // even when it manages the document.
-        //
-        // The listener is installed for the page's whole lifetime and is
-        // deliberately not torn down with the runtime scope.
-        // `BrowserRuntime.runMain` interrupts the runtime on `beforeunload`,
-        // which is exactly when the browser freezes the page into the
-        // back/forward cache. A scope-bound listener would be removed by that
-        // interrupt before the freeze, so the `pageshow` restore would have
-        // nothing left to reload and the page would come back blank: the
-        // interrupt finalizer empties the container. A full document
-        // navigation (the only way into and out of a cross-origin-isolated
-        // page) is what exercises this path. Registration is idempotent, so an
-        // HMR re-run does not stack listeners.
-        if (manageDocument && Option.isNone(maybeConnector)) {
-            yield* Effect.sync(() => addBfcacheRestoreListener());
-        }
-        if (subscriptions) {
-            yield* pipe(subscriptions, Record.toEntries, Effect.forEach(([key, { dependenciesSchema, modelToDependencies, keepAliveEquivalence, dependenciesToStream, },]) => Effect.gen(function* () {
-                const equivalence = keepAliveEquivalence ??
-                    Schema.toEquivalence(dependenciesSchema);
-                const [initDependencies, maybeInitDependenciesDuration] = measureSlowPhase(resolvedSlowSubscriptionDependencies, () => modelToDependencies(initModel));
-                reportSlowPhase(resolvedSlowSubscriptionDependencies, maybeInitDependenciesDuration, (durationMs, thresholdMs) => ({
-                    _tag: 'SubscriptionDependencies',
-                    subscriptionKey: key,
-                    model: initModel,
+                // NOTE: Messages dispatched by patch-time hooks (for example,
+                // OnUnmount destroys, or Mount emissions) were buffered while the
+                // frame held the stack; they process now, after the patch has
+                // committed and the frame's Mount events are attributed.
+                drainPendingMessages();
+                // NOTE: last, so a waiter resumed by the commit observes the same
+                // DOM and the same processed-Message ordering it saw when
+                // `afterCommit` counted frames.
+                commitNotifier.notifyCommitted();
+            };
+            // NOTE: starts a View Transition around this frame's render when the
+            // `viewTransition` predicate matches, returning `true` when it did.
+            // `startViewTransition` invokes its update callback asynchronously
+            // after snapshotting the old DOM, so the callback reads `liveModel`
+            // and `maybeLastDirtyMessage` fresh (the plain loop may have advanced
+            // the model while the browser suppressed rendering) and re-checks the
+            // disposal and crash guards, which can flip while the transition is
+            // pending. The unconfigured path never reaches this function; the
+            // `Option.isNone` check in `renderFramePlain` returns first, so a
+            // runtime without `viewTransition` allocates no per-frame callback.
+            const startFrameViewTransition = (resolved) => {
+                if (resolved.reducedMotionQuery.matches) {
+                    return false;
+                }
+                if (Option.isNone(maybeLastDirtyMessage)) {
+                    return false;
+                }
+                const maybeDecision = __decideViewTransition(resolved.decide, {
+                    previousModel: lastRenderedModel,
+                    model: liveModel,
+                    message: maybeLastDirtyMessage.value,
+                });
+                if (Option.isNone(maybeDecision)) {
+                    return false;
+                }
+                // NOTE: the superseded transition's update callback still runs, so
+                // the patch it was holding is not lost. Skipping explicitly makes
+                // the hand-off deterministic rather than implementation-defined.
+                skipPendingViewTransition();
+                try {
+                    const handle = resolved.startViewTransition(() => {
+                        // NOTE: `isPausedNow` as well as the disposal and crash guards.
+                        // A DevTools jumpTo landing while this callback is outstanding
+                        // has already painted a past Model, and patching `liveModel`
+                        // over it would replace the replayed DOM the user is inspecting.
+                        if (isRuntimeDisposed || isCrashed || isPausedNow()) {
+                            commitNotifier.notifyCommitted();
+                            return;
+                        }
+                        runRenderFrameBody();
+                    }, maybeDecision.value.maybeTypes);
+                    maybePendingViewTransition = Option.some(handle);
+                    __silenceViewTransitionRejections(handle);
+                    return true;
+                }
+                catch {
+                    // NOTE: an escaping throw would leave the rAF callback without a
+                    // patch and without settling the commit notifier, parking every
+                    // `Render.afterCommit` on this frame forever.
+                    return false;
+                }
+            };
+            // NOTE: every path out of a scheduled frame settles the commit
+            // notifier, whether or not it patched. A frame abandoned silently
+            // would strand any `Render.afterCommit` registered against it, and
+            // the Dom helpers that gate on it would never run their DOM work.
+            const renderFramePlain = () => {
+                isRenderFrameScheduled = false;
+                // NOTE: a frame scheduled before disposal fires after it; a
+                // disposed runtime must not repaint the released container.
+                if (isRuntimeDisposed) {
+                    commitNotifier.notifyCommitted();
+                    return;
+                }
+                // NOTE: a frame is running, so the browser got control back; the
+                // drain budget starts fresh.
+                syncWorkMsSinceYield = 0;
+                // NOTE: a Message that dirtied the model can also be the one
+                // whose Command crashed the runtime. Without this guard the
+                // next animation frame would render the live view over the
+                // crash view.
+                if (isCrashed) {
+                    commitNotifier.notifyCommitted();
+                    return;
+                }
+                if (isPausedNow()) {
+                    commitNotifier.notifyCommitted();
+                    return;
+                }
+                // NOTE: the unconfigured path pays one `Option.isNone` check and
+                // renders directly, allocating no per-frame callback. Only a
+                // runtime configured with `viewTransition` reaches
+                // `startFrameViewTransition`, which decides per frame whether to
+                // wrap the render in `document.startViewTransition`. When it does,
+                // the render runs later, inside the transition's update callback.
+                if (Option.isNone(maybeResolvedViewTransition)) {
+                    runRenderFrameBody();
+                    return;
+                }
+                if (!startFrameViewTransition(maybeResolvedViewTransition.value)) {
+                    runRenderFrameBody();
+                }
+            };
+            const renderSyncPlain = (model, maybeMessage) => {
+                const [nextDocument, maybeViewDuration] = measureSlowPhase(resolvedSlowView, () => {
+                    beginHtmlRender(boundaryRegistry);
+                    setHtmlRuntime(dispatch.dispatchSync, liveRenderContext, boundaryRegistry);
+                    try {
+                        return view(model, htmlBuilder);
+                    }
+                    finally {
+                        clearHtmlRuntime();
+                    }
+                });
+                reportSlowPhase(resolvedSlowView, maybeViewDuration, (durationMs, thresholdMs) => ({
+                    _tag: 'View',
+                    model,
+                    message: maybeMessage,
                     durationMs,
                     thresholdMs,
                 }));
-                const latestDependenciesRef = yield* Ref.make(initDependencies);
-                const modelChangesStream = Stream.fromPubSub(modelPubSub).pipe(
-                // NOTE: Ref.set runs upstream of Stream.changesWith on
-                // every model change, so readDependencies() returns
-                // current values even when the equivalence filter
-                // doesn't emit. Moving this into a tap after
-                // changesWith would silently break subscribers whose
-                // dependencies are equivalence-stable across model
-                // changes.
-                Stream.mapEffect(model => Effect.gen(function* () {
-                    const [dependencies, maybeDependenciesDuration] = measureSlowPhase(resolvedSlowSubscriptionDependencies, () => modelToDependencies(model));
-                    reportSlowPhase(resolvedSlowSubscriptionDependencies, maybeDependenciesDuration, (durationMs, thresholdMs) => ({
+                const maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
+                const [patchedVNode, maybePatchDuration] = measureSlowPhase(resolvedSlowPatch, () => __patchVNode(maybeCurrentVNode, nextDocument.body, container, boundaryRegistry.dedupeSeen));
+                vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
+                reportSlowPhase(resolvedSlowPatch, maybePatchDuration, (durationMs, thresholdMs) => ({
+                    _tag: 'Patch',
+                    model,
+                    message: maybeMessage,
+                    durationMs,
+                    thresholdMs,
+                }));
+                if (manageDocument) {
+                    applyDocumentMetadata(nextDocument, patchedVNode.elm);
+                }
+                if (import.meta.hot) {
+                    duplicateIdScanner?.schedule(patchedVNode.elm);
+                }
+            };
+            const scheduleRenderFrame = () => {
+                if (isRenderFrameScheduled) {
+                    return;
+                }
+                isRenderFrameScheduled = true;
+                commitNotifier.markCommitPending();
+                requestAnimationFrame(renderFramePlain);
+            };
+            // NOTE: reloading on bfcache restore is a page-level decision, so
+            // only a page-owning runtime that manages the document installs the
+            // listener. An app started through `embed` carries a host connector
+            // and must never force the host page to reload, so it is excluded
+            // even when it manages the document.
+            //
+            // The listener is installed for the page's whole lifetime and is
+            // deliberately not torn down with the runtime scope.
+            // `BrowserRuntime.runMain` interrupts the runtime on `beforeunload`,
+            // which is exactly when the browser freezes the page into the
+            // back/forward cache. A scope-bound listener would be removed by that
+            // interrupt before the freeze, so the `pageshow` restore would have
+            // nothing left to reload and the page would come back blank: the
+            // interrupt finalizer empties the container. A full document
+            // navigation (the only way into and out of a cross-origin-isolated
+            // page) is what exercises this path. Registration is idempotent, so an
+            // HMR re-run does not stack listeners.
+            if (manageDocument && Option.isNone(maybeConnector)) {
+                yield* Effect.sync(() => addBfcacheRestoreListener());
+            }
+            if (subscriptions) {
+                yield* pipe(subscriptions, Record.toEntries, Effect.forEach(([key, { dependenciesSchema, modelToDependencies, keepAliveEquivalence, dependenciesToStream, },]) => Effect.gen(function* () {
+                    const equivalence = keepAliveEquivalence ??
+                        Schema.toEquivalence(dependenciesSchema);
+                    const [initDependencies, maybeInitDependenciesDuration] = measureSlowPhase(resolvedSlowSubscriptionDependencies, () => modelToDependencies(initModel));
+                    reportSlowPhase(resolvedSlowSubscriptionDependencies, maybeInitDependenciesDuration, (durationMs, thresholdMs) => ({
                         _tag: 'SubscriptionDependencies',
                         subscriptionKey: key,
-                        model,
+                        model: initModel,
                         durationMs,
                         thresholdMs,
                     }));
-                    yield* Ref.set(latestDependenciesRef, dependencies);
-                    return dependencies;
-                })));
-                yield* Effect.forkIn(runtimeScope)(Stream.concat(Stream.make(initDependencies), modelChangesStream).pipe(Stream.changesWith(equivalence), Stream.switchMap(dependencies => dependenciesToStream(dependencies, () => Ref.getUnsafe(latestDependenciesRef))), Stream.runForEach(message => 
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                enqueueMessageEffect(message)), provideAllResources, Effect.catchCause(cause => crashWith(cause, Option.none()))));
-            }), {
+                    const latestDependenciesRef = yield* Ref.make(initDependencies);
+                    const modelChangesStream = Stream.fromPubSub(modelPubSub).pipe(
+                    // NOTE: Ref.set runs upstream of Stream.changesWith on
+                    // every model change, so readDependencies() returns
+                    // current values even when the equivalence filter
+                    // doesn't emit. Moving this into a tap after
+                    // changesWith would silently break subscribers whose
+                    // dependencies are equivalence-stable across model
+                    // changes.
+                    Stream.mapEffect(model => Effect.gen(function* () {
+                        const [dependencies, maybeDependenciesDuration] = measureSlowPhase(resolvedSlowSubscriptionDependencies, () => modelToDependencies(model));
+                        reportSlowPhase(resolvedSlowSubscriptionDependencies, maybeDependenciesDuration, (durationMs, thresholdMs) => ({
+                            _tag: 'SubscriptionDependencies',
+                            subscriptionKey: key,
+                            model,
+                            durationMs,
+                            thresholdMs,
+                        }));
+                        yield* Ref.set(latestDependenciesRef, dependencies);
+                        return dependencies;
+                    })));
+                    yield* Effect.forkIn(runtimeScope)(Stream.concat(Stream.make(initDependencies), modelChangesStream).pipe(Stream.changesWith(equivalence), Stream.switchMap(dependencies => dependenciesToStream(dependencies, () => Ref.getUnsafe(latestDependenciesRef))), Stream.runForEach(message => 
+                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                    enqueueMessageEffect(message)), provideAllResources, Effect.catchCause(cause => crashWith(cause, Option.none()))));
+                }), {
+                    concurrency: 'unbounded',
+                    discard: true,
+                }));
+            }
+            const maybeRequirementsToLifecycle = (config, resourceRef) => (maybeRequirements) => {
+                if (Option.isOption(maybeRequirements) &&
+                    Option.isNone(maybeRequirements)) {
+                    return Stream.empty;
+                }
+                const requirements = Option.isOption(maybeRequirements)
+                    ? Option.getOrThrow(maybeRequirements)
+                    : maybeRequirements;
+                const acquire = Effect.gen(function* () {
+                    const value = yield* config.acquire(requirements);
+                    yield* Ref.set(resourceRef, Option.some(value));
+                    return value;
+                });
+                const release = (value) => Effect.gen(function* () {
+                    yield* config.release(value);
+                    yield* Ref.set(resourceRef, Option.none());
+                    yield* enqueueMessageEffect(config.onReleased());
+                }).pipe(Effect.catchCause(() => Effect.void));
+                return pipe(Stream.scoped(Stream.fromEffect(Effect.acquireRelease(acquire, release))), Stream.flatMap(value => Stream.concat(Stream.make(config.onAcquired(value)), Stream.never)), Stream.map(Effect.succeed), Stream.catch(error => Stream.make(Effect.succeed(config.onAcquireError(error)))));
+            };
+            const forkManagedResourceLifecycle = ({ config, ref: resourceRef, }) => Effect.gen(function* () {
+                const modelStream = Stream.concat(Stream.make(initModel), Stream.fromPubSub(modelPubSub));
+                const equivalence = Schema.toEquivalence(config.schema);
+                yield* Effect.forkIn(runtimeScope)(modelStream.pipe(Stream.map(config.modelToMaybeRequirements), Stream.changesWith(equivalence), Stream.switchMap(maybeRequirementsToLifecycle(config, resourceRef)), Stream.runForEach(Effect.flatMap(enqueueMessageEffect)), 
+                // NOTE: mirrors the Subscription fork so a defect in
+                // `modelToMaybeRequirements` or the equivalence surfaces as
+                // the crash view instead of dying silently in this detached
+                // fiber. `provideAllResources` is not needed: `acquire` only
+                // requires `Scope`, which `Stream.scoped` supplies, and
+                // `release` requires nothing.
+                Effect.catchCause(cause => crashWith(cause, Option.none()))));
+            });
+            yield* Effect.forEach(managedResourceRefs, forkManagedResourceLifecycle, {
                 concurrency: 'unbounded',
                 discard: true,
+            });
+            // NOTE: registered before the boot buffer drains, so an interrupt
+            // landing anywhere after this yield tears down with the flag set
+            // (finalizers are LIFO; this one runs before every
+            // earlier-registered teardown, including the container-restoring
+            // patch whose OnUnmount dispatches must be dropped). An interrupt
+            // landing before this yield tears down with isBootComplete still
+            // false, so every dispatch buffers and dies with the closure.
+            // Either way no Message is processed against a closing runtime.
+            yield* Effect.addFinalizer(() => Effect.sync(() => {
+                isRuntimeDisposed = true;
+                // NOTE: a transition outliving the runtime would keep animating
+                // over a container the teardown is about to restore.
+                skipPendingViewTransition();
             }));
-        }
-        const maybeRequirementsToLifecycle = (config, resourceRef) => (maybeRequirements) => {
-            if (Option.isOption(maybeRequirements) &&
-                Option.isNone(maybeRequirements)) {
-                return Stream.empty;
+            // NOTE: init Commands fork as the last act of boot, exactly where
+            // the old queue's drain loop used to start. Together with the
+            // isBootComplete barrier this guarantees no Command result (or any
+            // other Message) is processed until the init render has painted
+            // initModel and every boot subsystem (DevTools store, Subscriptions,
+            // ManagedResources, ports) is attached. forkCommand also defers each
+            // start by a microtask, so a fully synchronous init Command still
+            // delivers its result asynchronously.
+            for (const command of initCommands) {
+                forkCommand(
+                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                command, Option.none());
             }
-            const requirements = Option.isOption(maybeRequirements)
-                ? Option.getOrThrow(maybeRequirements)
-                : maybeRequirements;
-            const acquire = Effect.gen(function* () {
-                const value = yield* config.acquire(requirements);
-                yield* Ref.set(resourceRef, Option.some(value));
-                return value;
-            });
-            const release = (value) => Effect.gen(function* () {
-                yield* config.release(value);
-                yield* Ref.set(resourceRef, Option.none());
-                yield* enqueueMessageEffect(config.onReleased());
-            }).pipe(Effect.catchCause(() => Effect.void));
-            return pipe(Stream.scoped(Stream.fromEffect(Effect.acquireRelease(acquire, release))), Stream.flatMap(value => Stream.concat(Stream.make(config.onAcquired(value)), Stream.never)), Stream.map(Effect.succeed), Stream.catch(error => Stream.make(Effect.succeed(config.onAcquireError(error)))));
-        };
-        const forkManagedResourceLifecycle = ({ config, ref: resourceRef, }) => Effect.gen(function* () {
-            const modelStream = Stream.concat(Stream.make(initModel), Stream.fromPubSub(modelPubSub));
-            const equivalence = Schema.toEquivalence(config.schema);
-            yield* Effect.forkIn(runtimeScope)(modelStream.pipe(Stream.map(config.modelToMaybeRequirements), Stream.changesWith(equivalence), Stream.switchMap(maybeRequirementsToLifecycle(config, resourceRef)), Stream.runForEach(Effect.flatMap(enqueueMessageEffect)), 
-            // NOTE: mirrors the Subscription fork so a defect in
-            // `modelToMaybeRequirements` or the equivalence surfaces as
-            // the crash view instead of dying silently in this detached
-            // fiber. `provideAllResources` is not needed: `acquire` only
-            // requires `Scope`, which `Stream.scoped` supplies, and
-            // `release` requires nothing.
-            Effect.catchCause(cause => crashWith(cause, Option.none()))));
-        });
-        yield* Effect.forEach(managedResourceRefs, forkManagedResourceLifecycle, {
-            concurrency: 'unbounded',
-            discard: true,
-        });
-        // NOTE: registered before the boot buffer drains, so an interrupt
-        // landing anywhere after this yield tears down with the flag set
-        // (finalizers are LIFO; this one runs before every
-        // earlier-registered teardown, including the container-restoring
-        // patch whose OnUnmount dispatches must be dropped). An interrupt
-        // landing before this yield tears down with isBootComplete still
-        // false, so every dispatch buffers and dies with the closure.
-        // Either way no Message is processed against a closing runtime.
-        yield* Effect.addFinalizer(() => Effect.sync(() => {
-            isRuntimeDisposed = true;
-        }));
-        // NOTE: init Commands fork as the last act of boot, exactly where
-        // the old queue's drain loop used to start. Together with the
-        // isBootComplete barrier this guarantees no Command result (or any
-        // other Message) is processed until the init render has painted
-        // initModel and every boot subsystem (DevTools store, Subscriptions,
-        // ManagedResources, ports) is attached. forkCommand also defers each
-        // start by a microtask, so a fully synchronous init Command still
-        // delivers its result asynchronously.
-        for (const command of initCommands) {
-            forkCommand(
-            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            command, Option.none());
-        }
-        isBootComplete = true;
-        drainPendingMessages();
-        // NOTE: suspend forever. Messages are processed synchronously on
-        // the dispatching stack and render frames run as plain rAF
-        // callbacks, so this fiber's only remaining job is keeping the
-        // runtime scope open until interruption (dispose, or page unload).
-        yield* Effect.never;
-    }));
+            isBootComplete = true;
+            drainPendingMessages();
+            // NOTE: suspend forever. Messages are processed synchronously on
+            // the dispatching stack and render frames run as plain rAF
+            // callbacks, so this fiber's only remaining job is keeping the
+            // runtime scope open until interruption (dispose, or page unload).
+            yield* Effect.never;
+        })).pipe(Effect.provideService(RenderCommit, commitNotifier.service));
+    };
     const start = (hmrModel) => startWith(Option.none(), hmrModel);
     const program = { runtimeId, start, ports };
     runtimeInternals.set(program, {
@@ -1322,6 +1540,9 @@ export function makeApplication(config) {
         ...(Predicate.isNotUndefined(config.slow) && {
             slow: config.slow,
         }),
+        ...(Predicate.isNotUndefined(config.viewTransition) && {
+            viewTransition: config.viewTransition,
+        }),
         ...(Predicate.isNotUndefined(config.freezeModel) && {
             freezeModel: config.freezeModel,
         }),
@@ -1341,7 +1562,7 @@ export function makeApplication(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: config.Flags,
-            flags: config.flags,
+            flags: Option.some(config.flags),
             init: (flags, url) => config.init(flags, url ?? currentUrl),
         });
     }
@@ -1349,7 +1570,7 @@ export function makeApplication(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: Schema.Void,
-            flags: Effect.succeed(undefined),
+            flags: Option.none(),
             init: (_flags, url) => config.init(url ?? currentUrl),
         });
     }
@@ -1357,7 +1578,7 @@ export function makeApplication(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: config.Flags,
-            flags: config.flags,
+            flags: Option.some(config.flags),
             init: (flags) => config.init(flags),
         });
     }
@@ -1365,7 +1586,7 @@ export function makeApplication(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: Schema.Void,
-            flags: Effect.succeed(undefined),
+            flags: Option.none(),
             init: () => config.init(),
         });
     }
@@ -1414,6 +1635,9 @@ export function makeElement(config) {
         ...(Predicate.isNotUndefined(config.slow) && {
             slow: config.slow,
         }),
+        ...(Predicate.isNotUndefined(config.viewTransition) && {
+            viewTransition: config.viewTransition,
+        }),
         ...(Predicate.isNotUndefined(config.freezeModel) && {
             freezeModel: config.freezeModel,
         }),
@@ -1430,7 +1654,7 @@ export function makeElement(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: config.Flags,
-            flags: config.flags,
+            flags: Option.some(config.flags),
             init: (flags) => config.init(flags),
         });
     }
@@ -1438,7 +1662,7 @@ export function makeElement(config) {
         return makeRuntime({
             ...baseConfig,
             Flags: Schema.Void,
-            flags: Effect.succeed(undefined),
+            flags: Option.none(),
             init: () => config.init(),
         });
     }