foldkit 0.157.0 → 0.158.0

package/dist/runtime/runtime.js

@@ -1,587 +1,34 @@
-import { Array, Cause, Context, Duration, Effect, Exit, Fiber, Function, Layer, Match, Option, Predicate, PubSub, Record, Ref, Runtime, Scheduler, Schema, Stream, SubscriptionRef, pipe, } from 'effect';
-import { HYDRATION_BUILD_ATTRIBUTE } from '../buildToken.js';
-import { __CurrentRegistry as __CurrentInterruptRegistry, __makeRegistry as __makeInterruptRegistry, } from '../command/interruptible/index.js';
-import { createDevToolsStore, } from '../devTools/store.js';
-import { startWebSocketBridge } from '../devTools/webSocketBridge.js';
-import { __beginRender as beginHtmlRender, __beginReplayRender as beginReplayHtmlRender, __clearRuntime as clearHtmlRuntime, __createBoundaryRegistry as createHtmlBoundaryRegistry, __endReplayRender as endReplayHtmlRender, __flushReplayUnmountsAfterPatchFailure as flushReplayUnmountsAfterPatchFailure, __htmlBuilder as htmlBuilderFor, __setRuntime as setHtmlRuntime, textDirectionToAttribute, } from '../html/index.js';
-import { __hydrateVNode } from '../hydrate.js';
-import { FOLDKIT_APP_ATTRIBUTE, FOLDKIT_FLAGS_ATTRIBUTE, } from '../hydrationMarker.js';
-import { MountRuntime, MountTracker, liveViewStateChanges, } from '../mount/index.js';
-import { __CurrentPortChannels, __makeInboundChannel, } from '../port/index.js';
+import { Array, Duration, Effect, Exit, Option, Predicate, PubSub, Schema, pipe, } from 'effect';
+import { __htmlBuilder as htmlBuilderFor, } from '../html/index.js';
 import { RenderCommit, createCommitNotifier } from '../render/commit.js';
 import { fromString as urlFromString } from '../url/index.js';
-import { __patchVNode, __recoverVNodeAfterPatchFailure, } from '../vdom.js';
-import { addNavigationEventListeners } from './browserListeners.js';
-import { defaultCrashView, noOpDispatch } from './crashUI.js';
+import { addNavigationEventListeners, } from './browserListeners.js';
 import { deepFreeze } from './deepFreeze.js';
-import { PreserveModelMessage, RequestModelMessage, RestoreModelMessage, } from './hmrProtocol.js';
+import { makeDevToolsIntegration } from './devToolsIntegration.js';
+import { createDuplicateIdScanner } from './duplicateIdScanner.js';
+import { preserveModel } from './hmrModelBridge.js';
 import { preserveScrollPosition, restorePreservedScrollPosition, } from './hmrScroll.js';
+import { makePortChannels, validatePorts, } from './hostConnector.js';
+import { resolveHydrationHandoff, } from './hydrationHandoff.js';
+import { forkManagedResourceFibers } from './managedResourceFibers.js';
+import { makeMessageQueue } from './messageQueue.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 };
-let registeredDevToolsOverlay;
-/** Registers the overlay supplied by the Foldkit Vite plugin. */
-export const __setDevToolsOverlay = (overlay) => {
-    registeredDevToolsOverlay = overlay;
-};
-const DEFAULT_DEV_TOOLS_SHOW = 'Development';
-const DEFAULT_DEV_TOOLS_POSITION = 'BottomRight';
-const DEFAULT_DEV_TOOLS_MODE = 'TimeTravel';
-const resolveDevToolsMode = (config) => {
-    if (typeof config === 'string') {
-        return config;
-    }
-    else {
-        return import.meta.hot ? config.development : config.production;
-    }
-};
-const DEV_TOOLS_MAX_ENTRIES_MIN = 20;
-const DEV_TOOLS_MAX_ENTRIES_MAX = 500;
-const DEV_TOOLS_KEYFRAME_INTERVAL_MIN = 1;
-/** Phase names measured by the slow warning runtime option. */
-export const SlowPhase = Schema.Literals([
-    'Update',
-    'View',
-    'Patch',
-    'SubscriptionDependencies',
-]);
-const DEFAULT_SLOW_SHOW = 'Development';
-const DEFAULT_SLOW_VIEW_THRESHOLD_MS = 16;
-const DEFAULT_SLOW_UPDATE_THRESHOLD_MS = 4;
-const DEFAULT_SLOW_PATCH_THRESHOLD_MS = 8;
-const DEFAULT_SLOW_SUBSCRIPTION_DEPENDENCIES_THRESHOLD_MS = 2;
-const ALL_SLOW_PHASES = [
-    'Update',
-    'View',
-    'Patch',
-    'SubscriptionDependencies',
-];
-const resolveSlowPhase = (isMeasured, thresholdMs, onSlow) => Option.liftPredicate({
-    thresholdMs,
-    onSlow,
-}, () => isMeasured);
-export const __resolveSlowConfig = (slow, isSlowVisible) => {
-    const maybeSlowConfig = Match.value(slow).pipe(Match.withReturnType(), Match.when(false, () => Option.none()), Match.when(Predicate.isUndefined, () => Option.some({})), Match.orElse(config => Option.some(config)));
-    return pipe(maybeSlowConfig, Option.filter(config => isSlowVisible(config.show ?? DEFAULT_SLOW_SHOW)), Option.map(config => {
-        const onSlow = config.onSlow ?? defaultSlowCallback;
-        const measuredPhases = config.measuredPhases ?? ALL_SLOW_PHASES;
-        const isPhaseMeasured = (phase) => Array.contains(measuredPhases, phase);
-        return {
-            view: resolveSlowPhase(isPhaseMeasured('View'), config.thresholdOverrides?.View ?? DEFAULT_SLOW_VIEW_THRESHOLD_MS, onSlow),
-            update: resolveSlowPhase(isPhaseMeasured('Update'), config.thresholdOverrides?.Update ?? DEFAULT_SLOW_UPDATE_THRESHOLD_MS, onSlow),
-            patch: resolveSlowPhase(isPhaseMeasured('Patch'), config.thresholdOverrides?.Patch ?? DEFAULT_SLOW_PATCH_THRESHOLD_MS, onSlow),
-            subscriptionDependencies: resolveSlowPhase(isPhaseMeasured('SubscriptionDependencies'), config.thresholdOverrides?.SubscriptionDependencies ??
-                DEFAULT_SLOW_SUBSCRIPTION_DEPENDENCIES_THRESHOLD_MS, onSlow),
-        };
-    }));
-};
-const measureSlowPhase = (maybeConfig, run) => {
-    if (Option.isSome(maybeConfig)) {
-        const start = performance.now();
-        const result = run();
-        return [result, Option.some(performance.now() - start)];
-    }
-    else {
-        return [run(), Option.none()];
-    }
-};
-const reportSlowPhase = (maybeConfig, maybeDurationMs, makeContext) => {
-    if (Option.isSome(maybeConfig)) {
-        const { thresholdMs, onSlow } = maybeConfig.value;
-        const maybeExceededDuration = Option.filter(maybeDurationMs, durationMs => durationMs > thresholdMs);
-        if (Option.isSome(maybeExceededDuration)) {
-            onSlow(makeContext(maybeExceededDuration.value, thresholdMs));
-        }
-    }
-};
-const messageTag = (rawMessage) => pipe(rawMessage, Option.liftPredicate(Predicate.isObject), Option.flatMap(Record.get('_tag')), Option.match({
-    onNone: () => 'unknown',
-    onSome: String,
-}));
-const optionMessageTrigger = (maybeMessage) => Option.match(maybeMessage, {
-    onNone: () => 'init',
-    onSome: messageTag,
-});
-const TUNING_HINT = 'Set slow.thresholdOverrides to change budgets or pass slow: false to disable warnings.';
-export const defaultSlowCallback = (context) => {
-    const { durationMs, thresholdMs: budget } = context;
-    const duration = durationMs.toFixed(1);
-    const summary = Match.value(context).pipe(Match.tagsExhaustive({
-        View: ({ message }) => `Slow view: ${duration}ms (budget: ${budget}ms), triggered by ${optionMessageTrigger(message)}. Keep render-only work in the view path and memoize expensive subtrees with createLazy or createKeyedLazy.`,
-        Update: ({ message }) => `Slow update: ${duration}ms (budget: ${budget}ms), triggered by ${messageTag(message)}. Inspect the triggering Message branch; move render-only derivations to memoized views and keep update focused on state transitions.`,
-        Patch: ({ message }) => `Slow patch: ${duration}ms (budget: ${budget}ms), triggered by ${optionMessageTrigger(message)}. Key mapped lists by stable ids, split large views, or memoize stable subtrees with createLazy.`,
-        SubscriptionDependencies: ({ subscriptionKey }) => `Slow subscription dependencies: ${duration}ms (budget: ${budget}ms) for subscription "${subscriptionKey}". Keep modelToDependencies a cheap projection from modeled fields; avoid scans, sorting, serialization, and large dependency objects.`,
-    }));
-    const maybeRawMessage = Match.value(context).pipe(Match.withReturnType(), Match.tagsExhaustive({
-        Update: ({ message }) => Option.some(message),
-        View: ({ message }) => message,
-        Patch: ({ message }) => message,
-        SubscriptionDependencies: () => Option.none(),
-    }));
-    console.warn(`[foldkit] ${summary} ${TUNING_HINT}`, context, ...Option.toArray(maybeRawMessage));
-};
-/** Dev-only scan for duplicate DOM ids within the Foldkit-rendered root.
- *
- *  Duplicate ids are invalid HTML but browsers do not report them, so
- *  `getElementById` / `querySelector` silently resolve to the first match and
- *  focus or ARIA labelling can target the wrong element with no error. The
- *  scan is scoped to `root` (not the whole document) so unrelated page ids do
- *  not trigger it, warns rather than throws, and dedupes through `warnedIds`
- *  so the same collision is reported at most once instead of every render. */
-const warnDuplicateIds = (root, warnedIds) => {
-    if (!(root instanceof Element)) {
-        return;
-    }
-    const seenIds = new Set();
-    const duplicateIds = new Set();
-    const elementsWithId = Array.fromIterable(root.querySelectorAll('[id]'));
-    if (root.id !== '') {
-        elementsWithId.unshift(root);
-    }
-    for (const element of elementsWithId) {
-        const { id } = element;
-        if (seenIds.has(id)) {
-            duplicateIds.add(id);
-        }
-        else {
-            seenIds.add(id);
-        }
-    }
-    for (const id of duplicateIds) {
-        if (!warnedIds.has(id)) {
-            warnedIds.add(id);
-            console.warn(`[foldkit] Duplicate DOM id "${id}" in the rendered tree. Ids must be ` +
-                'unique within the document; otherwise focus and ARIA labelling can ' +
-                'silently target the wrong element. Give each element a unique id.');
-        }
-    }
-};
-const DUPLICATE_ID_SCAN_INTERVAL_MS = 1000;
-/** Coalesces `warnDuplicateIds` scans so rapid successive renders trigger at
- *  most one full-tree scan per `DUPLICATE_ID_SCAN_INTERVAL_MS`, bounding the
- *  cost under high-frequency dev rendering such as animationFrame subscriptions
- *  or per-keystroke input. A real duplicate id persists across renders, so
- *  scanning the latest tree on a trailing timer never misses a genuine
- *  collision, and the retained `warnedIds` keeps each id to a single warning.
- *  Dev-only: the runtime both creates the scanner and calls `schedule` behind
- *  `import.meta.hot`, so the scanner and its DOM scan tree-shake out of
- *  production builds. */
-const createDuplicateIdScanner = () => {
-    const warnedIds = new Set();
-    let timeoutHandle;
-    let latestRoot;
-    const schedule = (root) => {
-        latestRoot = root;
-        if (timeoutHandle !== undefined) {
-            return;
-        }
-        timeoutHandle = setTimeout(() => {
-            timeoutHandle = undefined;
-            warnDuplicateIds(latestRoot, warnedIds);
-        }, DUPLICATE_ID_SCAN_INTERVAL_MS);
-    };
-    const cancel = () => {
-        if (timeoutHandle !== undefined) {
-            clearTimeout(timeoutHandle);
-            timeoutHandle = undefined;
-        }
-        latestRoot = undefined;
-    };
-    return { schedule, cancel };
-};
-/** Effect service tag that provides message dispatching to the view layer. */
-export class Dispatch extends Context.Service()('@foldkit/Dispatch') {
-}
-const hydrationForRoot = (root, isFlagsRequired) => {
-    const runtimeId = root.getAttribute(FOLDKIT_APP_ATTRIBUTE) ?? '';
-    const flagsScripts = pipe(Array.fromIterable(document.querySelectorAll(`script[${FOLDKIT_FLAGS_ATTRIBUTE}]`)), Array.filter(script => script.getAttribute(FOLDKIT_FLAGS_ATTRIBUTE) === runtimeId));
-    return { root, runtimeId, flagsScripts, isFlagsRequired };
-};
-// NOTE: hydration is scoped to the app's own stamped root so a server-rendered
-// app never adopts another app's DOM. A container that carries the stamp is that
-// root. A container that does not is a non-root element the caller resolved,
-// which happens when the rendered view has its own element with the container's
-// id (a descendant `id="root"`) and `getElementById` returned that inner element
-// instead of the stamped root above it. That inner element resolves to the app
-// root only when the page has exactly one stamped root and this container sits
-// inside it. A container outside that root is a refused handoff, not a fresh
-// application beside server markup that remains live. A null container is the
-// replace-parity case, where the server root took the placeholder's place and
-// `getElementById` no longer finds it, so the stamp is the only handle.
-// A runtime id names one application for the whole page: it pairs a root with
-// its Flags payload, and it keys the Model and scroll position hot reloading
-// preserves. Two roots sharing one are not two applications but one claimed
-// twice, so whichever boots second would read the other's handoff and restore
-// the other's Model. `injectIntoTemplate` refuses to build such a page; this is
-// the check for a page assembled some other way.
-//
-// Distinct ids do not make two hydrated applications independent, which is not
-// a supported arrangement: each page-owning application rewrites the document's
-// metadata and installs document-wide navigation listeners.
-const assertRuntimeIdsAreUnique = (stampedRoots) => {
-    const seen = new Set();
-    for (const root of stampedRoots) {
-        const runtimeId = root.getAttribute(FOLDKIT_APP_ATTRIBUTE) ?? '';
-        if (runtimeId === '') {
-            containRefusedPage(root.ownerDocument);
-            throw new Error('[foldkit] Found a server-rendered root with an empty ' +
-                `\`${FOLDKIT_APP_ATTRIBUTE}\` stamp. A hydratable root must carry ` +
-                'a nonempty runtime id so the runtime can pair it with its Flags ' +
-                'payload and preserved HMR state.');
-        }
-        if (!root.ownerDocument.body?.contains(root)) {
-            containRefusedPage(root.ownerDocument);
-            throw new Error('[foldkit] Found a server-rendered root outside the document body. ' +
-                'Runtime.hydrate supports one page-owning application in the ' +
-                'document light DOM. Do not hydrate a root in the head, a shadow ' +
-                'tree, or a detached subtree.');
-        }
-        if (seen.has(runtimeId)) {
-            containRefusedPage(root.ownerDocument);
-            throw new Error(`[foldkit] Found more than one server-rendered root stamped ` +
-                `"${runtimeId}". A runtime id names one application for the whole ` +
-                'page: it pairs a root with its Flags payload and keys the Model and ' +
-                'scroll position hot reloading preserves, so two roots sharing one ' +
-                "would take each other's state. Remove the duplicate root. Foldkit " +
-                'hydrates one page-owning application per document.');
-        }
-        seen.add(runtimeId);
-    }
-};
-const assertSinglePageApplication = (stampedRoots) => {
-    if (stampedRoots.length > 1) {
-        containRefusedPage(document);
-        throw new Error('[foldkit] Found more than one page-owning application stamped with ' +
-            `\`${FOLDKIT_APP_ATTRIBUTE}\`. Hydrating multiple applications in ` +
-            'one document is not supported: each application owns the document ' +
-            'metadata and installs document-wide navigation listeners. Render ' +
-            'one application per page.');
-    }
-};
-// The reason this page cannot be adopted by this client, or `undefined` when
-// the two name the same deployment.
-//
-// The client's id is required and must be non-empty. An absent one would
-// otherwise equal the absent marker on a page served before build ids existed,
-// which reads a page from an unknown deployment as one of this build's own: the
-// exact case the id exists to refuse.
-const buildSkew = (root, buildId, runtimeId) => {
-    if (!Predicate.isString(buildId) || buildId === '') {
-        return new Error('[foldkit] Runtime.hydrate was given no build id. Hydration compares ' +
-            'the id the server stamped on the root with this client’s own before ' +
-            'it adopts any DOM, and without one a page from any deployment would ' +
-            'be adopted as this one. Pass ' +
-            '`buildId: import.meta.env.FOLDKIT_BUILD_ID`, the same value the ' +
-            'server entry passes to `renderToString`.');
-    }
-    const servedBuild = root.getAttribute(HYDRATION_BUILD_ATTRIBUTE);
-    if (servedBuild === buildId) {
-        return undefined;
-    }
-    return new Error(`[foldkit] Runtime.hydrate found application "${runtimeId}" served by ` +
-        `${servedBuild === null ? 'no known deployment' : `deployment "${servedBuild}"`}` +
-        `, but this client belongs to deployment "${buildId}". Startup stops ` +
-        'here rather than reading a handoff written by other code: the Flags in ' +
-        'the page are that deployment’s, and this build could accept them while ' +
-        'every value in them means something else. Serve the page from the ' +
-        'running deployment, and keep stale HTML out of shared caches.');
-};
-const REFUSED_ATTRIBUTE = 'data-foldkit-refused';
-const REFUSAL_SHIELD_ATTRIBUTE = 'data-foldkit-refusal-shield';
-const refusalShields = new WeakMap();
-const REFUSAL_SHIELD_INPUT_EVENTS = [
-    'auxclick',
-    'click',
-    'contextmenu',
-    'dblclick',
-    'keydown',
-    'keypress',
-    'keyup',
-    'mousedown',
-    'mouseup',
-    'pointerdown',
-    'pointerup',
-    'touchend',
-    'touchstart',
-];
-const REFUSAL_DOCUMENT_INPUT_EVENTS = ['keydown', 'keypress', 'keyup'];
-const preventRefusalShieldInteraction = (event) => {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-};
-// NOTE: `showModal` throws when the owning document is not fully active. A
-// foreign or detached document still needs the original Foldkit refusal rather
-// than a browser exception from its containment UI.
-const tryOpenRefusalShieldAsModal = (shield) => {
-    if (typeof shield.showModal !== 'function') {
-        return false;
-    }
-    try {
-        shield.showModal();
-        return true;
-    }
-    catch {
-        return false;
-    }
-};
-const openRefusalShield = (shield) => {
-    shield.inert = true;
-    shield.setAttribute('inert', '');
-    if (shield.open && typeof shield.close === 'function') {
-        shield.close();
-    }
-    if (!tryOpenRefusalShieldAsModal(shield)) {
-        shield.setAttribute('open', '');
-    }
-    shield.inert = false;
-    shield.removeAttribute('inert');
-    shield.focus({ preventScroll: true });
-};
-const installRefusalShield = (ownerDocument) => {
-    const existing = refusalShields.get(ownerDocument);
-    if (existing !== undefined && existing.isConnected) {
-        openRefusalShield(existing);
-        return;
-    }
-    const shield = ownerDocument.createElement('dialog');
-    shield.setAttribute(REFUSAL_SHIELD_ATTRIBUTE, '');
-    shield.setAttribute('aria-label', 'Page unavailable');
-    shield.setAttribute('aria-modal', 'true');
-    shield.setAttribute('closedby', 'none');
-    shield.tabIndex = -1;
-    shield.textContent =
-        'This page could not start safely. Reload to get the current version.';
-    shield.style.alignItems = 'center';
-    shield.style.background = 'rgba(15, 23, 42, 0.96)';
-    shield.style.border = '0';
-    shield.style.boxSizing = 'border-box';
-    shield.style.color = 'white';
-    shield.style.font = '600 1rem/1.5 system-ui, sans-serif';
-    shield.style.display = 'grid';
-    shield.style.height = '100vh';
-    shield.style.inset = '0';
-    shield.style.margin = '0';
-    shield.style.maxHeight = 'none';
-    shield.style.maxWidth = 'none';
-    shield.style.overflow = 'hidden';
-    shield.style.padding = '2rem';
-    shield.style.position = 'fixed';
-    shield.style.touchAction = 'none';
-    shield.style.userSelect = 'none';
-    shield.style.width = '100vw';
-    shield.addEventListener('cancel', preventRefusalShieldInteraction);
-    for (const eventName of REFUSAL_SHIELD_INPUT_EVENTS) {
-        shield.addEventListener(eventName, preventRefusalShieldInteraction, {
-            capture: true,
-            passive: false,
-        });
-    }
-    for (const eventName of REFUSAL_DOCUMENT_INPUT_EVENTS) {
-        ownerDocument.addEventListener(eventName, preventRefusalShieldInteraction, {
-            capture: true,
-            passive: false,
-        });
-    }
-    ownerDocument.documentElement.appendChild(shield);
-    refusalShields.set(ownerDocument, shield);
-    openRefusalShield(shield);
-};
-const containRefusedPage = (ownerDocument) => {
-    const boundary = ownerDocument.body ?? ownerDocument.documentElement;
-    boundary.inert = true;
-    boundary.setAttribute('inert', '');
-    boundary.setAttribute('aria-hidden', 'true');
-    boundary.setAttribute(REFUSED_ATTRIBUTE, '');
-    installRefusalShield(ownerDocument);
-};
-// Whether this page carries anything a Foldkit server render leaves behind. A
-// resolution failure on such a page is a refused handoff, and the markup is
-// contained; the same failure on a page with none of these markers is a client
-// application whose container never existed, where there is no server render to
-// refuse and nothing to take out of reach.
-const hasServerRenderedMarkup = (ownerDocument) => ownerDocument.querySelector(`[${FOLDKIT_APP_ATTRIBUTE}], [${HYDRATION_BUILD_ATTRIBUTE}], ` +
-    `[${FOLDKIT_FLAGS_ATTRIBUTE}]`) !== null;
-const findDocumentHydration = (container, isFlagsRequired) => {
-    const stampedRoots = Array.fromIterable(document.querySelectorAll(`[${FOLDKIT_APP_ATTRIBUTE}]`));
-    assertRuntimeIdsAreUnique(stampedRoots);
-    assertSinglePageApplication(stampedRoots);
-    if (container !== null) {
-        const stampedAncestor = container.closest(`[${FOLDKIT_APP_ATTRIBUTE}]`);
-        if (container.hasAttribute(FOLDKIT_APP_ATTRIBUTE)) {
-            const isDocumentRoot = Option.match(Array.head(stampedRoots), {
-                onNone: () => false,
-                onSome: root => root === container,
-            });
-            if (!isDocumentRoot) {
-                containRefusedPage(container.ownerDocument);
-                throw new Error('[foldkit] Runtime.hydrate received a stamped container that is ' +
-                    'not the single server root in the document light DOM. Hydration ' +
-                    'supports one page-owning application under the document body. ' +
-                    'Do not hydrate a root in a shadow tree or detached subtree.');
-            }
-            return hydrationForRoot(container, isFlagsRequired);
-        }
-        return Array.match(stampedRoots, {
-            onEmpty: () => {
-                if (stampedAncestor === null) {
-                    return undefined;
-                }
-                containRefusedPage(container.ownerDocument);
-                throw new Error('[foldkit] Runtime.hydrate received a container under a stamped ' +
-                    'root outside the document body light DOM. Do not hydrate a root ' +
-                    'in a shadow tree, detached subtree, or another document.');
-            },
-            onNonEmpty: roots => {
-                const onlyRoot = Array.headNonEmpty(roots);
-                if (stampedAncestor === onlyRoot) {
-                    return hydrationForRoot(onlyRoot, isFlagsRequired);
-                }
-                containRefusedPage(container.ownerDocument);
-                throw new Error('[foldkit] Runtime.hydrate received a container outside the ' +
-                    "document's server-rendered application root. A page-owning " +
-                    'application must adopt that single root rather than boot beside ' +
-                    'server markup it does not own.');
-            },
-        });
-    }
-    return Option.match(Array.head(stampedRoots), {
-        onNone: () => undefined,
-        onSome: root => hydrationForRoot(root, isFlagsRequired),
-    });
-};
-const makeHostConnector = () => {
-    let isDisposed = false;
-    let maybeDeliverInbound = Option.none();
-    const pendingInboundSends = [];
-    const listenersByPort = new Map();
-    const sendInbound = (portName, port, value) => {
-        if (isDisposed) {
-            return Exit.void;
-        }
-        const decodeExit = Schema.decodeUnknownExit(port.schema)(value);
-        Exit.match(decodeExit, {
-            onFailure: cause => {
-                console.error(`[foldkit] Inbound port "${portName}" rejected a value:`, Cause.squash(cause));
-            },
-            onSuccess: decodedValue => {
-                Option.match(maybeDeliverInbound, {
-                    onNone: () => {
-                        pendingInboundSends.push({ port, value: decodedValue });
-                    },
-                    onSome: deliverInbound => deliverInbound(port, decodedValue),
-                });
-            },
-        });
-        return Exit.asVoid(decodeExit);
-    };
-    const addListener = (port, listener) => {
-        if (isDisposed) {
-            return Function.constVoid;
-        }
-        const listeners = listenersByPort.get(port) ?? new Set();
-        listenersByPort.set(port, listeners);
-        listeners.add(listener);
-        return () => {
-            listeners.delete(listener);
-        };
-    };
-    // NOTE: delivery is deferred to a microtask so a host listener never runs
-    // inside the runtime's Command fiber (a listener that synchronously calls
-    // send or dispose must not re-enter the runtime), and so a host that
-    // subscribes synchronously right after embed() returns still receives
-    // emissions from init Commands.
-    const deliverOutbound = (port, encodedValue) => {
-        if (isDisposed) {
-            return;
-        }
-        queueMicrotask(() => {
-            if (isDisposed) {
-                return;
-            }
-            const listeners = listenersByPort.get(port) ?? new Set();
-            listeners.forEach(listener => {
-                try {
-                    listener(encodedValue);
-                }
-                catch (listenerError) {
-                    console.error('[foldkit] An outbound port listener threw:', listenerError);
-                }
-            });
-        });
-    };
-    const bind = (deliverInbound) => {
-        maybeDeliverInbound = Option.some(deliverInbound);
-        const flushedSends = pendingInboundSends.splice(0);
-        flushedSends.forEach(({ port, value }) => deliverInbound(port, value));
-    };
-    const unbind = () => {
-        maybeDeliverInbound = Option.none();
-    };
-    const dispose = () => {
-        isDisposed = true;
-        pendingInboundSends.length = 0;
-        listenersByPort.forEach(listeners => listeners.clear());
-        listenersByPort.clear();
-    };
-    return { sendInbound, addListener, deliverOutbound, bind, unbind, dispose };
-};
-const makePortChannels = (ports, maybeConnector) => {
-    const inboundChannelsByPort = new Map();
-    Object.values(ports.inbound ?? {}).forEach(port => {
-        inboundChannelsByPort.set(port, __makeInboundChannel());
-    });
-    const outboundPorts = new Set(Object.values(ports.outbound ?? {}));
-    const channels = {
-        isConfigured: true,
-        lookupInbound: port => Option.fromNullishOr(inboundChannelsByPort.get(port)),
-        lookupOutbound: port => outboundPorts.has(port)
-            ? Option.some(encodedValue => Option.match(maybeConnector, {
-                onNone: Function.constVoid,
-                onSome: connector => connector.deliverOutbound(port, encodedValue),
-            }))
-            : Option.none(),
-    };
-    const deliverInbound = (port, value) => {
-        Option.match(Option.fromNullishOr(inboundChannelsByPort.get(port)), {
-            onNone: Function.constVoid,
-            onSome: channel => channel.deliver(value),
-        });
-    };
-    return { channels, deliverInbound };
-};
-const validatePorts = (ports) => {
-    const inboundEntries = Object.entries(ports.inbound ?? {});
-    const outboundEntries = Object.entries(ports.outbound ?? {});
-    const inboundNames = new Set(inboundEntries.map(([name]) => name));
-    outboundEntries.forEach(([name]) => {
-        if (inboundNames.has(name)) {
-            throw new Error(`[foldkit] Port name "${name}" appears in both inbound and outbound. ` +
-                'Port names share one namespace on the EmbedHandle, so each name ' +
-                'must be unique across both records.');
-        }
-    });
-    const seenPorts = new Set();
-    const allEntries = [...inboundEntries, ...outboundEntries];
-    allEntries.forEach(([name, port]) => {
-        if (seenPorts.has(port)) {
-            throw new Error(`[foldkit] The Port registered as "${name}" is also registered under ` +
-                'another name. Each entry in the ports record needs its own ' +
-                'Port.inbound or Port.outbound value.');
-        }
-        seenPorts.add(port);
-    });
-};
-const runtimeInternals = new WeakMap();
-const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, isFlagsRequired, init, update, view, manageDocument, subscriptions, container, hydration, 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);
+import { makeRenderer } from './renderer.js';
+import { makeResourceProvider } from './resourceProvider.js';
+import { makeRuntimeStatus } from './runtimeStatus.js';
+import { __resolveSlowConfig, measureSlowPhase, reportSlowPhase, } from './slowPhase.js';
+import { forkSubscriptionFibers } from './subscriptionFibers.js';
+import { __resolveStartViewTransition, } from './viewTransition.js';
+import { isVisible } from './visibility.js';
+export const runtimeInternals = new WeakMap();
+export const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, isFlagsRequired, init, update, view, manageDocument, subscriptions, container, hydration, routing: routingConfig, crash, slow, viewTransition, freezeModel, preserveScroll, resources, managedResources, devTools, }) => {
+    const isSlowVisible = (show) => isVisible(show, !!import.meta.hot);
     const htmlBuilder = htmlBuilderFor();
-    const resolvedSlow = __resolveSlowConfig(slow, isSlowVisible);
-    const resolvedSlowView = Option.flatMap(resolvedSlow, ({ view }) => view);
-    const resolvedSlowUpdate = Option.flatMap(resolvedSlow, ({ update }) => update);
-    const resolvedSlowPatch = Option.flatMap(resolvedSlow, ({ patch }) => patch);
-    const resolvedSlowSubscriptionDependencies = Option.flatMap(resolvedSlow, ({ subscriptionDependencies }) => subscriptionDependencies);
+    const maybeResolvedSlow = __resolveSlowConfig(slow, isSlowVisible);
+    const maybeSlowView = Option.flatMap(maybeResolvedSlow, ({ view }) => view);
+    const maybeSlowUpdate = Option.flatMap(maybeResolvedSlow, ({ update }) => update);
+    const maybeSlowPatch = Option.flatMap(maybeResolvedSlow, ({ patch }) => patch);
+    const maybeSlowSubscriptionDependencies = Option.flatMap(maybeResolvedSlow, ({ 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
@@ -596,18 +43,6 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
     const duplicateIdScanner = import.meta.hot
         ? createDuplicateIdScanner()
         : undefined;
-    const excludeFromHistoryTags = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.flatMapNullishOr(config => config.excludeFromHistory), Option.match({
-        onNone: () => new Set(),
-        onSome: tags => new Set(tags),
-    }));
-    const devToolsMaxEntries = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.flatMapNullishOr(config => config.maxEntries), Option.match({
-        onNone: () => undefined,
-        onSome: value => Math.max(DEV_TOOLS_MAX_ENTRIES_MIN, Math.min(DEV_TOOLS_MAX_ENTRIES_MAX, value)),
-    }));
-    const devToolsKeyframeInterval = pipe(devTools ?? {}, Option.liftPredicate(config => config !== false), Option.flatMapNullishOr(config => config.keyframeInterval), Option.match({
-        onNone: () => undefined,
-        onSome: value => Math.max(DEV_TOOLS_KEYFRAME_INTERVAL_MIN, Math.floor(value)),
-    }));
     const maybeFreezeModel = (model) => isFreezeModelActive ? deepFreeze(model) : model;
     if (Predicate.isNotUndefined(ports)) {
         validatePorts(ports);
@@ -621,11 +56,6 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
         // the same signal. A commit in one embedded application must never wake a
         // `Render.afterCommit` awaiting inside another.
         const commitNotifier = createCommitNotifier();
-        const settlePendingCommit = () => {
-            if (commitNotifier.service.isCommitPending()) {
-                commitNotifier.notifyCommitted();
-            }
-        };
         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. ' +
@@ -638,21 +68,6 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
             // 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,
@@ -661,167 +76,23 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                 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 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 */
-                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 { managedResourceRefs, provideAllResources, provideResources } = yield* makeResourceProvider({
+                resources,
+                managedResources,
+                runtimeScope,
+                maybePortChannels,
             });
-            const maybeResolveFreshFlags = Option.orElse(Option.fromNullishOr(bootFlags), () => configuredFlags);
-            const resolveFreshFlags = Option.match(maybeResolveFreshFlags, {
-                onNone: () => isFlagsRequired
-                    ? Effect.die(new Error('[foldkit] This application declares Flags. Pass its ' +
-                        'Flags Effect to Runtime.run or Runtime.embed.'))
-                    : /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                        Effect.succeed(undefined),
-                onSome: provideResources,
-            });
-            // Every hydration refusal that knows which root it was going to adopt
-            // contains that root first. The build id is one reason to refuse; a
-            // missing, duplicated, malformed, or Schema-incompatible Flags payload
-            // is another, and the page left behind is just as live in each case.
-            const refuseHydration = (root, message, cause) => {
-                containRefusedPage(root.ownerDocument);
-                return Effect.die(cause === undefined
-                    ? new Error(message)
-                    : new Error(message, { cause }));
-            };
-            const decodeFlagsPayload = (payload, runtimeId, root) => Effect.try({
-                try: () => {
-                    const parsedPayload = JSON.parse(payload);
-                    return pipe(
-                    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                    Schema.toCodecJson(FlagsCodec), Schema.decodeUnknownSync, decode => decode(parsedPayload));
-                },
-                catch: cause => cause,
-            }).pipe(Effect.catch(cause => refuseHydration(root, '[foldkit] Runtime.hydrate could not decode the server ' +
-                `Flags payload for application "${runtimeId}". The HTML ` +
-                'and client bundle must use the same Flags Schema.', cause)));
-            const maybeRequestedHydration = bootMode === 'Hydrate'
-                ? Option.fromNullishOr(hydration)
-                : Option.none();
-            if (bootMode === 'Hydrate' && Option.isNone(maybeRequestedHydration)) {
-                // A hydrating client that finds no stamped root will not adopt
-                // whatever the page holds, so the page is contained whether or not the
-                // caller named a container.
-                containRefusedPage(container === null ? document : container.ownerDocument);
-                return yield* Effect.die(new Error('[foldkit] Runtime.hydrate could not find a server-rendered ' +
-                    `root stamped with \`${FOLDKIT_APP_ATTRIBUTE}\`. Use ` +
-                    'Runtime.run for a fresh client boot.'));
-            }
-            // The build the served page came from is settled here, before the Flags
-            // payload text is accessed, parsed, or decoded, before `init` runs, and
-            // therefore before any Command, Subscription, ManagedResource, or port
-            // this boot would start. A page from another deployment carries that
-            // deployment's Flags, which the current Schema may well accept while
-            // every value in them means something else, so deferring the comparison
-            // to the DOM patch lets stale data reach new code that already acted on
-            // it.
-            if (Option.isSome(maybeRequestedHydration)) {
-                const skew = buildSkew(maybeRequestedHydration.value.root, buildId, maybeRequestedHydration.value.runtimeId);
-                if (skew !== undefined) {
-                    containRefusedPage(maybeRequestedHydration.value.root.ownerDocument);
-                    return yield* Effect.die(skew);
-                }
-            }
-            // NOTE: an HMR-restored Model wins over DOM adoption because the
-            // server DOM reflects older code. The hydration handoff is still
-            // required, but the restored Model gets a fresh patch against its
-            // stamped root.
-            const maybeHydrationRoot = Predicate.isUndefined(hmrModel)
-                ? Option.map(maybeRequestedHydration, requestedHydration => requestedHydration.root)
-                : Option.none();
-            const maybeHydrationFlags = yield* Option.match(maybeRequestedHydration, {
-                onNone: () => Effect.succeed(Option.none()),
-                onSome: requestedHydration => Effect.map(requestedHydration.isFlagsRequired
-                    ? Array.match(requestedHydration.flagsScripts, {
-                        onEmpty: () => refuseHydration(requestedHydration.root, '[foldkit] Runtime.hydrate found application ' +
-                            `"${requestedHydration.runtimeId}" but its ` +
-                            'server Flags payload is missing.'),
-                        onNonEmpty: ([payloadScript, ...remainingScripts]) => Array.isArrayNonEmpty(remainingScripts)
-                            ? refuseHydration(requestedHydration.root, '[foldkit] Runtime.hydrate found multiple ' +
-                                'server Flags payloads for application ' +
-                                `"${requestedHydration.runtimeId}".`)
-                            : decodeFlagsPayload(payloadScript.textContent ?? '', requestedHydration.runtimeId, requestedHydration.root),
-                    })
-                    : /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                        Effect.succeed(undefined), Option.some),
-            });
-            const resolveFlags = Option.match(maybeHydrationFlags, {
-                onNone: () => resolveFreshFlags,
-                onSome: Effect.succeed,
+            const { maybeHydrationRoot, resolveFlags } = yield* resolveHydrationHandoff({
+                bootMode,
+                hydration,
+                bootFlags,
+                configuredFlags,
+                isFlagsRequired,
+                FlagsCodec,
+                hmrModel,
+                container,
+                buildId,
+                provideResources,
             });
             const ModelJsonCodec = Schema.toCodecJson(
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
@@ -881,267 +152,64 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                 }), 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;
-            // 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: resume clears the DevTools store's pause flag before its frame
-            // patches the live view. This distinguishes that intentional repaint
-            // from an ordinary frame that was already queued when jumpTo installed
-            // the historical view.
-            let isLiveViewRestorePending = 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 status = makeRuntimeStatus();
+            // NOTE: `processMessagePlain` and `crashWith` are defined further
+            // down, so they are wrapped here instead of passed by reference. The
+            // queue has to exist before the navigation listeners attach below,
+            // and reading a `const` before its line has run throws. The type
+            // annotation is needed too: the `crashWith` wrapper calls the
+            // renderer's, and the renderer takes this queue, so without it
+            // TypeScript cannot infer either one.
+            const messageQueue = yield* makeMessageQueue({
+                status,
+                processMessage: message => processMessagePlain(message),
+                crashWith: (cause, maybeMessage) => crashWith(cause, maybeMessage),
+            });
+            const { enqueueMessage, enqueueMessageEffect, completeBoot } = messageQueue;
             const initModel = maybeFreezeModel(initModelRaw);
-            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(registeredDevToolsOverlay),
-            })));
             const modelPubSub = yield* PubSub.unbounded();
-            let currentViewState = 'Live';
-            const maybeViewStatePubSub = Option.isSome(resolvedDevTools)
-                ? Option.some(yield* PubSub.unbounded({
-                    replay: 1,
-                }))
-                : Option.none();
-            const viewStateChanges = Option.match(maybeViewStatePubSub, {
-                onNone: () => liveViewStateChanges,
-                onSome: viewStatePubSub => {
-                    PubSub.publishUnsafe(viewStatePubSub, currentViewState);
-                    return Stream.fromPubSub(viewStatePubSub);
-                },
+            const devToolsIntegration = yield* makeDevToolsIntegration({
+                devTools,
+                update,
+                maybeFreezeModel,
+                enqueueMessageEffect,
             });
-            const setViewState = (nextViewState) => {
-                if (nextViewState === currentViewState) {
-                    return;
-                }
-                currentViewState = nextViewState;
-                if (Option.isSome(maybeViewStatePubSub)) {
-                    PubSub.publishUnsafe(maybeViewStatePubSub.value, nextViewState);
-                }
-            };
+            const { installDevToolsStore, recordInit, recordMessage } = devToolsIntegration;
             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.
+            // NOTE: the Model is plain closure state. `processMessagePlain`
+            // reads and writes it directly, and the render side (the frame, and
+            // `crashWith` inside its `Effect.sync`) reads it synchronously
+            // through `readLiveModel`, 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;
-            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();
-                    pendingViewTransition.update.isInvalidated = true;
-                    try {
-                        pendingViewTransition.handle.skipTransition();
-                    }
-                    catch {
-                        // NOTE: skipping runs on teardown and crash paths, so a refusal
-                        // must not propagate into them.
-                    }
-                }
-            };
-            const vnodeSlot = { maybeCurrentVNode: Option.none() };
-            const patchRuntimeVNode = (maybeCurrentVNode, nextVNode, seen) => {
-                try {
-                    return __patchVNode(maybeCurrentVNode, nextVNode, container, seen, patchedVNode => {
-                        vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
-                    });
-                }
-                catch (error) {
-                    try {
-                        const maybeRecoveryVNode = vnodeSlot.maybeCurrentVNode;
-                        if (Option.isSome(maybeRecoveryVNode)) {
-                            vnodeSlot.maybeCurrentVNode = Option.some(__recoverVNodeAfterPatchFailure(maybeRecoveryVNode.value));
-                        }
-                    }
-                    finally {
-                        flushReplayUnmountsAfterPatchFailure();
-                    }
-                    throw error;
-                }
-            };
-            // NOTE: consumed by the first render only. Set when this boot found
-            // an adoptable server-rendered root; the first patch then goes
-            // through `__hydrateVNode` instead of replacing the container.
-            let pendingHydrationRoot = Option.getOrNull(maybeHydrationRoot);
-            // 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 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;
-                }
-                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);
-                settlePendingCommit();
+            // NOTE: the runtime context for OnMount forking and Command forking
+            // is captured once here; it is constant for the lifetime of the
+            // runtime.
+            const runtimeContext = yield* Effect.context();
+            const { crashWith, render, setLastDirtyMessage, scheduleRenderFrame, skipPendingViewTransition, devToolsRenderBridge, } = yield* makeRenderer({
+                status,
+                container,
+                view,
+                htmlBuilder,
+                manageDocument,
+                crash,
+                buildId,
+                initModel,
+                maybeHydrationRoot,
+                maybeSlowView,
+                maybeSlowPatch,
+                duplicateIdScanner,
+                maybeResolvedViewTransition,
+                commitNotifier,
+                runtimeContext,
+                readLiveModel: () => liveModel,
+                messageQueue,
+                devToolsIntegration,
             });
-            // 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 mountRuntime = MountRuntime.of({
-                captureViewStateChanges: () => Stream.concat(Stream.make(currentViewState), viewStateChanges).pipe(Stream.changes),
-            });
-            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
@@ -1152,9 +220,9 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
             // `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`.
+            // Stream step) would reschedule through clamped `setTimeout`
+            // instead of the browser microtask scheduler carried by
+            // `runtimeContext`.
             const forkCommand = (command, message) => {
                 queueMicrotask(() => {
                     // NOTE: `isCrashed` as well as `isRuntimeDisposed`. A crash is
@@ -1164,21 +232,21 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                     // 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) {
+                    if (status.isRuntimeDisposed || status.isCrashed) {
                         return;
                     }
-                    Effect.runForkWith(runtimeContextForCommands)(Effect.forkIn(runtimeScope)(command.effect.pipe(Effect.withSpan(command.name, {
+                    Effect.runForkWith(runtimeContext)(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 [messageUpdate, maybeUpdateDuration] = measureSlowPhase(resolvedSlowUpdate, () => update(currentModel, message));
+                const [messageUpdate, maybeUpdateDuration] = measureSlowPhase(maybeSlowUpdate, () => update(currentModel, message));
                 const nextModelRaw = messageUpdate.model;
                 const commands = messageUpdate.commands ?? [];
                 const nextModel = maybeFreezeModel(nextModelRaw);
-                reportSlowPhase(resolvedSlowUpdate, maybeUpdateDuration, (durationMs, thresholdMs) => ({
+                reportSlowPhase(maybeSlowUpdate, maybeUpdateDuration, (durationMs, thresholdMs) => ({
                     _tag: 'Update',
                     previousModel: currentModel,
                     nextModel,
@@ -1188,7 +256,7 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                 }));
                 if (currentModel !== nextModel) {
                     liveModel = nextModel;
-                    maybeLastDirtyMessage = Option.some(message);
+                    setLastDirtyMessage(message);
                     PubSub.publishUnsafe(modelPubSub, nextModel);
                     if (import.meta.hot) {
                         Effect.runSync(schedulePreserveModel(nextModel));
@@ -1202,307 +270,9 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                         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(
-                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                        commands, toCommandRecord), isModelChanged));
-                    }
-                    else if (isModelChanged) {
-                        Effect.runFork(store.updateLatestModel(nextModel));
-                    }
-                }
+                recordMessage(message, currentModel, nextModel, commands);
             };
-            // 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();
-                    };
-                }
-                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;
-                            }
-                        }
-                    }
-                }
-                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 live dispatch but is overridable
-            // so a time-travel render can bind both declarative handlers and newly
-            // acquired Mounts to `noOpDispatch`. A live Mount keeps its dispatcher
-            // across replay, while a replay-created Mount stays muted until a live
-            // resume patch releases it and starts the live action. This preserves
-            // valid async results from live Mounts without granting a historical
-            // acquisition access to the live Model.
-            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, renderMode);
-                    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, () => {
-                    if (Option.isNone(maybeCurrentVNode) &&
-                        pendingHydrationRoot !== null) {
-                        const hydrationRoot = pendingHydrationRoot;
-                        pendingHydrationRoot = null;
-                        // NOTE: strip the stamp before the patch, not after, so the
-                        // patch is the sole owner of the root's attributes. It has
-                        // already served its purpose of locating the root, and
-                        // removing it after would delete a `data-foldkit-app` the view
-                        // itself declares, which a later equal-vnode patch would not
-                        // restore. Removing it here also stops a later boot on the same
-                        // container (a dispose-then-embed remount) from re-detecting
-                        // this now-consumed root as hydratable.
-                        hydrationRoot.removeAttribute(FOLDKIT_APP_ATTRIBUTE);
-                        // An empty id reaches the adoption step's own check as a
-                        // value that matches nothing. Boot already refused a
-                        // hydration without an id, so this stands in only for a
-                        // caller that reached here another way.
-                        return __hydrateVNode(hydrationRoot, nextVNode, boundaryRegistry.dedupeSeen, buildId ?? '');
-                    }
-                    return patchRuntimeVNode(maybeCurrentVNode, nextVNode, 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), Effect.provideService(MountRuntime, mountRuntime));
-            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 replayUpdate = update(model, message);
-                        return maybeFreezeModel(replayUpdate.model);
-                    },
-                    /* eslint-enable @typescript-eslint/consistent-type-assertions */
-                    // NOTE: passes `noOpDispatch` so declarative handlers and Mounts
-                    // acquired by the replay cannot reach the live Model. Their
-                    // fibers stay alive and can observe view-state changes while the
-                    // historical view owns them. If resume reuses such an element,
-                    // OnMount releases the replay acquisition before starting the
-                    // live action. 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;
-                        const previousRenderedModel = lastRenderedModel;
-                        // NOTE: a Mount surviving from the live view must observe
-                        // Paused before the historical patch can expose different
-                        // DOM. Mounts inserted by that patch capture this state when
-                        // acquired, so asynchronous setup cannot skip Paused even if
-                        // it consumes the Stream only after the live view returns.
-                        setViewState('Paused');
-                        // 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();
-                        const replayRenderExit = yield* Effect.exit(render(replayedModel, Option.none(), noOpDispatch, 'Replay'));
-                        if (Exit.isFailure(replayRenderExit)) {
-                            drainMountEvents();
-                            if (isPausedNow()) {
-                                // NOTE: the failed patch may already have changed the
-                                // DOM. Repaint the Model at the store's previous paused
-                                // index before returning the failure. If that Model no
-                                // longer renders either, resume the store so its normal
-                                // live frame becomes the single recovery path.
-                                const rollbackExit = yield* Effect.exit(render(previousRenderedModel, Option.none(), noOpDispatch, 'Replay'));
-                                drainMountEvents();
-                                if (Exit.isFailure(rollbackExit) &&
-                                    devToolsStore !== null) {
-                                    yield* devToolsStore.resume;
-                                }
-                            }
-                            else {
-                                // NOTE: a failed first jump leaves the store live. Keep
-                                // Mounts Paused through the recovery patch, which
-                                // publishes Live only after the live DOM is restored.
-                                yield* Effect.sync(() => scheduleRenderFrame(true));
-                            }
-                            return yield* Effect.failCause(replayRenderExit.cause);
-                        }
-                        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(true)),
-                }, {
-                    ...(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);
-                }
-            }
+            yield* installDevToolsStore(devToolsRenderBridge);
             const initRenderExit = yield* Effect.exit(render(initModel, Option.none()));
             if (Exit.isFailure(initRenderExit)) {
                 yield* crashWith(initRenderExit.cause, Option.none());
@@ -1515,315 +285,26 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
             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(Context.add(runtimeContextForCommands, Dispatch, dispatch), MountTracker, mountTracker), MountRuntime, mountRuntime);
-            // 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;
-                const isResuming = currentViewState === 'Paused';
-                if (isResuming) {
-                    // NOTE: Messages accumulated while a historical view owned the DOM
-                    // did not cause this repaint. A Message arriving during the patch
-                    // can repopulate this field when the buffered queue drains.
-                    maybeLastDirtyMessage = Option.none();
-                }
-                try {
-                    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;
-                    // NOTE: resume clears the store's pause flag before this frame.
-                    // Publish Live only after the live DOM has been installed.
-                    setViewState('Live');
-                    if (devToolsStore !== null) {
-                        const mountEvents = drainMountEvents();
-                        Effect.runFork(devToolsStore.attachRenderedMounts(mountEvents.starts, mountEvents.ends));
-                    }
-                }
-                catch (error) {
-                    Effect.runFork(crashWith(Cause.die(error), maybeLastDirtyMessage));
-                }
-                finally {
-                    isRenderingFrame = false;
-                }
-                // 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.
-                settlePendingCommit();
-            };
-            // 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 (currentViewState === 'Paused') {
-                    return false;
-                }
-                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: invalidate an older transition before this one takes
-                // ownership of the latest live repaint. The browser may still call
-                // the older update callback, but its invalidation guard leaves the
-                // DOM and commit notifier to this transition.
-                skipPendingViewTransition();
-                try {
-                    const update = {
-                        isInvalidated: false,
-                        didRun: false,
-                    };
-                    const handle = resolved.startViewTransition(() => {
-                        if (update.isInvalidated || update.didRun) {
-                            return;
-                        }
-                        update.didRun = true;
-                        // NOTE: `currentViewState` closes the resume window after the
-                        // store is live but before its plain frame has restored the live
-                        // DOM. A transition invalidated by jumpTo stays invalid forever,
-                        // so its callback cannot repaint inside the stale transition
-                        // even if it arrives after resume has published `Live`.
-                        if (isRuntimeDisposed ||
-                            isCrashed ||
-                            isPausedNow() ||
-                            currentViewState === 'Paused') {
-                            settlePendingCommit();
-                            return;
-                        }
-                        runRenderFrameBody();
-                    }, maybeDecision.value.maybeTypes);
-                    maybePendingViewTransition = Option.some({ handle, update });
-                    __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;
-                const isRestoringLiveView = isLiveViewRestorePending;
-                isLiveViewRestorePending = false;
-                // NOTE: a frame scheduled before disposal fires after it; a
-                // disposed runtime must not repaint the released container.
-                if (isRuntimeDisposed) {
-                    settlePendingCommit();
-                    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) {
-                    settlePendingCommit();
-                    return;
-                }
-                if (isPausedNow()) {
-                    settlePendingCommit();
-                    return;
-                }
-                if (currentViewState === 'Paused' && !isRestoringLiveView) {
-                    settlePendingCommit();
-                    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 maybeCurrentVNode = vnodeSlot.maybeCurrentVNode;
-                const [patchedVNode, maybePatchDuration] = measureSlowPhase(resolvedSlowPatch, () => patchRuntimeVNode(maybeCurrentVNode, nextDocument.body, 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 = (isRestoringLiveView = false) => {
-                if (isRestoringLiveView) {
-                    isLiveViewRestorePending = true;
-                }
-                if (isRenderFrameScheduled) {
-                    return;
-                }
-                isRenderFrameScheduled = true;
-                commitNotifier.markCommitPending();
-                requestAnimationFrame(renderFramePlain);
-            };
+            yield* recordInit(initModel, initCommands);
             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,
-                        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) => ({
-                            _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;
+                yield* forkSubscriptionFibers({
+                    subscriptions,
+                    initModel,
+                    modelPubSub,
+                    runtimeScope,
+                    maybeSlowSubscriptionDependencies,
+                    enqueueMessageEffect,
+                    provideAllResources,
+                    crashWith,
                 });
-                const release = (value) => Effect.gen(function* () {
-                    yield* config
-                        .release(value)
-                        .pipe(Effect.catchCause(() => Effect.void));
-                    yield* Ref.set(resourceRef, Option.none());
-                    yield* enqueueMessageEffect(config.onReleased());
-                });
-                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,
+            }
+            yield* forkManagedResourceFibers({
+                managedResourceRefs,
+                initModel,
+                modelPubSub,
+                runtimeScope,
+                enqueueMessageEffect,
+                crashWith,
             });
             // NOTE: registered before the boot buffer drains, so an interrupt
             // landing anywhere after this yield tears down with the flag set
@@ -1834,7 +315,7 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
             // 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;
+                status.isRuntimeDisposed = true;
                 // NOTE: a transition outliving the runtime would keep animating
                 // over a container the teardown is about to restore.
                 skipPendingViewTransition();
@@ -1852,8 +333,7 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
                 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
                 command, Option.none());
             }
-            isBootComplete = true;
-            drainPendingMessages();
+            completeBoot();
             // 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
@@ -1876,549 +356,3 @@ const makeRuntime = ({ ports, kind, Model, Flags: FlagsCodec, configuredFlags, i
     });
     return program;
 };
-// NOTE: how long one synchronous drain may hold the stack before the
-// remaining Messages defer to a new task so the browser can paint. Only
-// multi-Message bursts ever reach the check; the single-Message path never
-// reads the clock beyond the drain start.
-const DRAIN_BUDGET_MS = 5;
-const currentLocationUrl = () => {
-    const { origin, pathname, search } = window.location;
-    return `${origin}${pathname}${search}`;
-};
-const documentMetadataStates = new WeakMap();
-const observeDocumentMetadataMutations = (observer) => {
-    const observedHead = document.head;
-    observer.observe(observedHead, {
-        attributes: true,
-        attributeFilter: ['rel', 'href', 'property', 'content'],
-        childList: true,
-        characterData: true,
-        subtree: true,
-    });
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['lang', 'dir'],
-    });
-    return observedHead;
-};
-const getOrCreateDocumentMetadataState = () => {
-    const existingState = documentMetadataStates.get(document);
-    if (existingState !== undefined) {
-        return existingState;
-    }
-    const invalidation = { isInvalidated: true };
-    const observer = new MutationObserver(() => {
-        invalidation.isInvalidated = true;
-    });
-    const metadataState = {
-        elements: {},
-        observer,
-        invalidation,
-        observedHead: observeDocumentMetadataMutations(observer),
-    };
-    documentMetadataStates.set(document, metadataState);
-    return metadataState;
-};
-const findOrCreateDocumentMetadataElements = (metadataState) => {
-    const { elements } = metadataState;
-    let canonical = elements.canonical;
-    if (canonical === undefined || canonical.parentNode !== document.head) {
-        canonical =
-            document.head.querySelector('link[rel="canonical"]') ??
-                document.head.appendChild(document.createElement('link'));
-        elements.canonical = canonical;
-    }
-    let ogUrl = elements.ogUrl;
-    if (ogUrl === undefined || ogUrl.parentNode !== document.head) {
-        ogUrl =
-            document.head.querySelector('meta[property="og:url"]') ??
-                document.head.appendChild(document.createElement('meta'));
-        elements.ogUrl = ogUrl;
-    }
-    return { canonical, ogUrl };
-};
-const readOrCacheCurrentLocationUrl = (metadataState) => {
-    const currentLocationHref = window.location.href;
-    if (metadataState.cachedLocationHref === currentLocationHref &&
-        metadataState.cachedLocationCanonical !== undefined) {
-        return metadataState.cachedLocationCanonical;
-    }
-    const canonicalUrl = currentLocationUrl();
-    metadataState.cachedLocationHref = currentLocationHref;
-    metadataState.cachedLocationCanonical = canonicalUrl;
-    return canonicalUrl;
-};
-const rebindDocumentMetadataObserverToCurrentHead = (metadataState) => {
-    // NOTE: a MutationObserver remains attached to a detached head after
-    // document.head is replaced. Rebind it and invalidate the metadata snapshot
-    // before the next unchanged guard.
-    metadataState.observer.disconnect();
-    metadataState.observedHead = observeDocumentMetadataMutations(metadataState.observer);
-    metadataState.invalidation.isInvalidated = true;
-};
-const reconcileDocumentMetadata = (metadataState, nextMetadata) => {
-    if (document.title !== nextMetadata.title) {
-        document.title = nextMetadata.title;
-    }
-    const { documentElement } = document;
-    if (nextMetadata.lang !== undefined &&
-        documentElement.lang !== nextMetadata.lang) {
-        documentElement.lang = nextMetadata.lang;
-    }
-    if (nextMetadata.dirAttribute !== undefined &&
-        documentElement.dir !== nextMetadata.dirAttribute) {
-        documentElement.dir = nextMetadata.dirAttribute;
-    }
-    const metadataElements = findOrCreateDocumentMetadataElements(metadataState);
-    if (metadataElements.canonical.getAttribute('rel') !== 'canonical') {
-        metadataElements.canonical.setAttribute('rel', 'canonical');
-    }
-    if (metadataElements.canonical.getAttribute('href') !==
-        nextMetadata.canonicalUrl) {
-        metadataElements.canonical.setAttribute('href', nextMetadata.canonicalUrl);
-    }
-    if (metadataElements.ogUrl.getAttribute('property') !== 'og:url') {
-        metadataElements.ogUrl.setAttribute('property', 'og:url');
-    }
-    if (metadataElements.ogUrl.getAttribute('content') !== nextMetadata.ogUrl) {
-        metadataElements.ogUrl.setAttribute('content', nextMetadata.ogUrl);
-    }
-    metadataState.lastApplied = nextMetadata;
-    metadataState.invalidation.isInvalidated = false;
-    // NOTE: clear the records produced by Foldkit's own writes before the
-    // observer callback runs. Otherwise the next unchanged render would be
-    // marked dirty and repeat every DOM read this cache is meant to avoid.
-    metadataState.observer.takeRecords();
-};
-const applyDocumentMetadata = (nextDocument, mountedRoot) => {
-    if (!mountedRoot || !document.body.contains(mountedRoot)) {
-        return;
-    }
-    const metadataState = getOrCreateDocumentMetadataState();
-    if (metadataState.observedHead !== document.head) {
-        rebindDocumentMetadataObserverToCurrentHead(metadataState);
-    }
-    const canonicalUrl = nextDocument.canonical ?? readOrCacheCurrentLocationUrl(metadataState);
-    const ogUrl = nextDocument.ogUrl ?? canonicalUrl;
-    const dirAttribute = nextDocument.dir === undefined
-        ? undefined
-        : textDirectionToAttribute(nextDocument.dir);
-    // NOTE: MutationObserver callbacks are asynchronous. Consume queued records
-    // synchronously before trusting the unchanged fast path.
-    if (Array.isArrayNonEmpty(metadataState.observer.takeRecords())) {
-        metadataState.invalidation.isInvalidated = true;
-    }
-    const lastApplied = metadataState.lastApplied;
-    const isAppliedMetadataCurrent = !metadataState.invalidation.isInvalidated &&
-        lastApplied !== undefined &&
-        lastApplied.title === nextDocument.title &&
-        lastApplied.lang === nextDocument.lang &&
-        lastApplied.dirAttribute === dirAttribute &&
-        lastApplied.canonicalUrl === canonicalUrl &&
-        lastApplied.ogUrl === ogUrl;
-    if (isAppliedMetadataCurrent) {
-        return;
-    }
-    reconcileDocumentMetadata(metadataState, {
-        title: nextDocument.title,
-        lang: nextDocument.lang,
-        dirAttribute,
-        canonicalUrl,
-        ogUrl,
-    });
-};
-const renderCrashView = (context, crash, container, vnodeSlot, manageDocument) => {
-    console.error('[foldkit] Application crash:', context.error);
-    if (crash?.report) {
-        try {
-            crash.report(context);
-        }
-        catch (reportError) {
-            console.error('[foldkit] crash.report failed:', reportError);
-        }
-    }
-    const crashContext = Context.make(Dispatch, noOpDispatch).pipe(Context.add(MountTracker, {
-        started: () => { },
-        ended: () => { },
-    }));
-    try {
-        setHtmlRuntime(noOpDispatch.dispatchSync, crashContext);
-        let crashDocument;
-        try {
-            crashDocument = crash?.view
-                ? crash.view(context, htmlBuilderFor())
-                : defaultCrashView(context);
-        }
-        finally {
-            clearHtmlRuntime();
-        }
-        const patchedVNode = __patchVNode(vnodeSlot.maybeCurrentVNode, crashDocument.body, container);
-        vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
-        if (manageDocument) {
-            applyDocumentMetadata(crashDocument, patchedVNode.elm);
-        }
-    }
-    catch (viewError) {
-        console.error('[foldkit] crash.view failed:', viewError);
-        const fallbackViewError = viewError instanceof Error ? viewError : new Error(String(viewError));
-        setHtmlRuntime(noOpDispatch.dispatchSync, crashContext);
-        let fallbackDocument;
-        try {
-            fallbackDocument = defaultCrashView(context, fallbackViewError);
-        }
-        finally {
-            clearHtmlRuntime();
-        }
-        const patchedVNode = __patchVNode(vnodeSlot.maybeCurrentVNode, fallbackDocument.body, container);
-        vnodeSlot.maybeCurrentVNode = Option.some(patchedVNode);
-        if (manageDocument) {
-            applyDocumentMetadata(fallbackDocument, patchedVNode.elm);
-        }
-    }
-};
-export function makeApplication(config) {
-    const { container } = config;
-    const hasRouting = 'routing' in config;
-    const hasFlags = 'Flags' in config;
-    const hydration = findDocumentHydration(container, hasFlags);
-    const resolvedContainer = hydration?.root ?? container;
-    if (resolvedContainer === null) {
-        // A server-rendered page whose root lost its stamp reaches exactly here:
-        // template injection put the render where the placeholder was, so
-        // `getElementById` finds nothing and the stamp that would have named the
-        // root is gone. There is no handoff to refuse further along, and the markup
-        // is as live as any other refused page, so it is contained here.
-        if (hasServerRenderedMarkup(document)) {
-            containRefusedPage(document);
-        }
-        throw new Error('[foldkit] Container is null. Make sure the element exists in the DOM ' +
-            'before calling makeApplication (e.g. that your <div id="root"></div> has ' +
-            'rendered, and your script runs after it). On a server-rendered page ' +
-            'the runtime instead finds the root by its `data-foldkit-app` stamp.');
-    }
-    const currentUrl = hasRouting
-        ? Option.getOrThrow(urlFromString(window.location.href))
-        : undefined;
-    const baseConfig = {
-        kind: 'Application',
-        Model: config.Model,
-        update: config.update,
-        view: config.view,
-        manageDocument: true,
-        ports: config.ports,
-        ...(config.subscriptions && { subscriptions: config.subscriptions }),
-        container: resolvedContainer,
-        ...(hydration && { hydration }),
-        ...(hasRouting && { routing: config.routing }),
-        ...(config.crash && { crash: config.crash }),
-        ...(Predicate.isNotUndefined(config.slow) && {
-            slow: config.slow,
-        }),
-        ...(Predicate.isNotUndefined(config.viewTransition) && {
-            viewTransition: config.viewTransition,
-        }),
-        ...(Predicate.isNotUndefined(config.freezeModel) && {
-            freezeModel: config.freezeModel,
-        }),
-        ...(Predicate.isNotUndefined(config.preserveScroll) && {
-            preserveScroll: config.preserveScroll,
-        }),
-        ...(config.resources && { resources: config.resources }),
-        ...(config.managedResources && {
-            managedResources: config.managedResources,
-        }),
-        ...(Predicate.isNotUndefined(config.devTools) && {
-            devTools: config.devTools,
-        }),
-    };
-    /* eslint-disable @typescript-eslint/consistent-type-assertions */
-    if (hasFlags && hasRouting) {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: config.Flags,
-            configuredFlags: Option.none(),
-            isFlagsRequired: true,
-            init: (flags, url) => config.init(flags, url ?? currentUrl),
-        });
-    }
-    else if (hasRouting) {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: Schema.Void,
-            configuredFlags: Option.none(),
-            isFlagsRequired: false,
-            init: (_flags, url) => config.init(url ?? currentUrl),
-        });
-    }
-    else if (hasFlags) {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: config.Flags,
-            configuredFlags: Option.none(),
-            isFlagsRequired: true,
-            init: (flags) => config.init(flags),
-        });
-    }
-    else {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: Schema.Void,
-            configuredFlags: Option.none(),
-            isFlagsRequired: false,
-            init: () => config.init(),
-        });
-    }
-    /* eslint-enable @typescript-eslint/consistent-type-assertions */
-}
-const toCrashConfig = (crash) => {
-    if (Predicate.isUndefined(crash)) {
-        return undefined;
-    }
-    const elementCrashView = crash.view;
-    return {
-        ...(Predicate.isNotUndefined(elementCrashView) && {
-            view: (context, h) => ({
-                title: '',
-                body: elementCrashView(context, h),
-            }),
-        }),
-        ...(Predicate.isNotUndefined(crash.report) && {
-            report: crash.report,
-        }),
-    };
-};
-export function makeElement(config) {
-    const { container } = config;
-    if (container === null) {
-        throw new Error('[foldkit] Container is null. Make sure the element exists in the DOM ' +
-            'before calling makeElement (e.g. that your <div id="root"></div> has ' +
-            'rendered, and your script runs after it).');
-    }
-    const hasFlags = 'Flags' in config;
-    const elementView = config.view;
-    const view = (model, h) => ({
-        title: '',
-        body: elementView(model, h),
-    });
-    const crash = toCrashConfig(config.crash);
-    const baseConfig = {
-        kind: 'Element',
-        Model: config.Model,
-        update: config.update,
-        view,
-        manageDocument: false,
-        ports: config.ports,
-        ...(config.subscriptions && { subscriptions: config.subscriptions }),
-        container,
-        ...(Predicate.isNotUndefined(crash) && { crash }),
-        ...(Predicate.isNotUndefined(config.slow) && {
-            slow: config.slow,
-        }),
-        ...(Predicate.isNotUndefined(config.viewTransition) && {
-            viewTransition: config.viewTransition,
-        }),
-        ...(Predicate.isNotUndefined(config.freezeModel) && {
-            freezeModel: config.freezeModel,
-        }),
-        ...(config.resources && { resources: config.resources }),
-        ...(config.managedResources && {
-            managedResources: config.managedResources,
-        }),
-        ...(Predicate.isNotUndefined(config.devTools) && {
-            devTools: config.devTools,
-        }),
-    };
-    /* eslint-disable @typescript-eslint/consistent-type-assertions */
-    if (hasFlags) {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: config.Flags,
-            configuredFlags: Option.some(config.flags),
-            isFlagsRequired: true,
-            init: (flags) => config.init(flags),
-        });
-    }
-    else {
-        return makeRuntime({
-            ...baseConfig,
-            Flags: Schema.Void,
-            configuredFlags: Option.none(),
-            isFlagsRequired: false,
-            init: () => config.init(),
-        });
-    }
-    /* eslint-enable @typescript-eslint/consistent-type-assertions */
-}
-const encodePreserveModelMessage = Schema.encodeUnknownSync(PreserveModelMessage);
-const encodeRequestModelMessage = Schema.encodeUnknownSync(RequestModelMessage);
-const decodeRestoreModelMessage = Schema.decodeUnknownExit(RestoreModelMessage);
-const preserveModel = (id, encodedModel, isHmrReload) => {
-    if (import.meta.hot) {
-        import.meta.hot.send('foldkit:preserve-model', encodePreserveModelMessage(PreserveModelMessage.make({ id, model: encodedModel, isHmrReload })));
-    }
-};
-const PLUGIN_RESPONSE_TIMEOUT_MS = 500;
-// NOTE: scheduling fix for browser performance. Effect needs to defer work
-// onto a future tick of the event loop. The default browser scheduler picks
-// `setTimeout(f, 0)`, but browsers clamp `setTimeout` to a minimum of 4ms.
-// `queueMicrotask` runs on the very next tick (sub-millisecond). Dispatch no
-// longer routes through the Effect scheduler, but Command and Subscription
-// fibers still do; without this override every fiber yield (for example, an
-// op-budget suspension, or a Stream step) would take an extra 4-16ms
-// round-trip before
-// its result Message lands.
-const microtaskSetImmediate = (callback) => {
-    let cancelled = false;
-    queueMicrotask(() => {
-        if (!cancelled)
-            callback();
-    });
-    return () => {
-        cancelled = true;
-    };
-};
-const browserScheduler = new Scheduler.MixedScheduler('async', microtaskSetImmediate);
-const provideBrowserScheduler = (effect) => Effect.provide(effect, Layer.succeed(Scheduler.Scheduler, browserScheduler));
-// NOTE: asks @foldkit/vite-plugin for a model preserved across the last HMR
-// reload. The plugin only serves a model whose preservation was flushed by a
-// reload, so a host-driven dispose-then-embed remount initializes fresh while
-// a code reload restores state.
-const resolveHmrModel = (runtimeId) => {
-    const hot = import.meta.hot;
-    if (!hot) {
-        return Effect.succeed(undefined);
-    }
-    return pipe(Effect.callback(resume => {
-        const handler = (message) => {
-            Exit.match(decodeRestoreModelMessage(message), {
-                onFailure: Function.constVoid,
-                onSuccess: ({ id, model }) => {
-                    if (id === runtimeId) {
-                        hot.off('foldkit:restore-model', handler);
-                        resume(Effect.succeed(model));
-                    }
-                },
-            });
-        };
-        hot.on('foldkit:restore-model', handler);
-        hot.send('foldkit:request-model', encodeRequestModelMessage(RequestModelMessage.make({ id: runtimeId })));
-        return Effect.sync(() => hot.off('foldkit:restore-model', handler));
-    }), Effect.timeout(PLUGIN_RESPONSE_TIMEOUT_MS), Effect.catchTag('TimeoutError', () => {
-        console.warn('[foldkit] No response from @foldkit/vite-plugin. Add it to your vite.config.ts for HMR model preservation:\n\n' +
-            "  import { foldkit } from '@foldkit/vite-plugin'\n\n" +
-            '  export default defineConfig({ plugins: [foldkit()] })\n\n' +
-            'Starting without HMR support.');
-        return Effect.succeed(undefined);
-    }));
-};
-/** Starts a program Effect with explicit boot inputs for runtime tests.
- * @internal */
-export const __startProgram = (program, hmrModel, bootMode, flags, buildId) => {
-    const internals = runtimeInternals.get(program);
-    if (Predicate.isUndefined(internals)) {
-        return Effect.die(new Error('[foldkit] Runtime boot expects a program created by ' +
-            'makeApplication or makeElement.'));
-    }
-    if (bootMode === 'Hydrate' && internals.kind !== 'Application') {
-        return Effect.die(new Error('[foldkit] Runtime.hydrate expects a program created by ' +
-            'makeApplication.'));
-    }
-    return internals.startWith(Option.none(), hmrModel, bootMode, flags, buildId);
-};
-// NOTE: deliberately not `BrowserRuntime.runMain`, which interrupts the
-// runtime on `beforeunload`. `beforeunload` is a question, not a commitment:
-// the browser also fires it for a click on a download link, for a navigation
-// the user cancels, and when freezing the page into the back/forward cache.
-// The document survives all three, but the interrupt finalizer has already
-// put the container element back empty, so the page is left alive with no app
-// in it. A page-owning runtime gains nothing from tearing itself down while
-// the document is on its way out, so it starts with no page-lifecycle
-// interrupt at all and lets the document take the runtime with it. Error
-// reporting and the keep-alive interval come from `makeRunMain` either way.
-const runMainWithoutUnloadInterrupt = Runtime.makeRunMain(Function.constVoid);
-const startProgram = (program, bootMode, flags, buildId) => {
-    runMainWithoutUnloadInterrupt(provideBrowserScheduler(Effect.flatMap(resolveHmrModel(program.runtimeId), hmrModel => __startProgram(program, hmrModel, bootMode, flags, buildId))));
-};
-export function run(program, options) {
-    startProgram(program, 'Fresh', options?.flags);
-}
-/** Starts a Foldkit runtime by adopting a server-rendered DOM in place instead
- *  of building it fresh. Use this as the client entry for a page served by
- *  `renderToString`: the first render attaches to the stamped root, keeps the
- *  existing nodes, and reconstructs the Model from the Flags the server
- *  embedded. The handoff is strict: a missing server root, an empty or
- *  duplicated root stamp, more than one stamped root, a requested root outside
- *  the document body light DOM, a missing Flags payload, an undecodable
- *  payload, or a page from another deployment terminates startup. Every one of
- *  those contains the page first:
- *  the document's body is marked `inert` and a nondismissable modal shield is
- *  opened above existing top-layer content, so pointer and physical keyboard
- *  input do not activate same-document native links, forms, or controls.
- *  Containment leaves author-owned dialogs open without calling `close` or
- *  dispatching `cancel`.
- *  Nothing is moved, so no custom element reconnects and no frame reloads.
- *  This is not a script, event, or embedded-document sandbox: existing
- *  capture-phase handlers, browser-generated top-layer events, timers, and
- *  stale scripts can still run. Controls in embedded documents can still
- *  receive input if stale code focuses them. Stale code can also open newer
- *  top-layer UI. Use `run` in a separate client-only entry when the page should
- *  boot without server output.
- *
- * @experimental Server rendering and hydration are experimental while their
- * contracts settle. */
-export const hydrate = (program, options) => {
-    startProgram(program, 'Hydrate', undefined, options?.buildId);
-};
-const buildPortHandles = (ports, connector) => {
-    const handles = {};
-    if (Predicate.isNotUndefined(ports)) {
-        Object.entries(ports.inbound ?? {}).forEach(([portName, port]) => {
-            handles[portName] = {
-                send: (value) => connector.sendInbound(portName, port, value),
-            };
-        });
-        Object.entries(ports.outbound ?? {}).forEach(([portName, port]) => {
-            handles[portName] = {
-                subscribe: (listener) => connector.addListener(port, listener),
-            };
-        });
-    }
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    return handles;
-};
-export function embed(program, options) {
-    const internals = runtimeInternals.get(program);
-    if (Predicate.isUndefined(internals)) {
-        throw new Error('[foldkit] embed expects a program created by makeApplication or makeElement.');
-    }
-    if (internals.isEmbedActive) {
-        throw new Error('[foldkit] This program is already embedded. Dispose the existing ' +
-            'handle first, or create a separate program: each program owns one ' +
-            'container.');
-    }
-    internals.isEmbedActive = true;
-    const connector = makeHostConnector();
-    // NOTE: a dispose immediately followed by a fresh embed (React strict mode
-    // runs effects exactly that way) must not start the new runtime while the
-    // old one is still tearing down: the teardown finalizer is what puts the
-    // container element back in the DOM. Awaiting the previous fiber's exit
-    // sequences the two.
-    const startEffect = pipe(Option.match(internals.maybeActiveFiber, {
-        onNone: () => Effect.void,
-        onSome: previousFiber => Effect.asVoid(Fiber.await(previousFiber)),
-    }), Effect.andThen(resolveHmrModel(program.runtimeId)), Effect.flatMap(hmrModel => internals.startWith(Option.some(connector), hmrModel, 'Fresh', options?.flags)));
-    const fiber = Effect.runFork(provideBrowserScheduler(startEffect));
-    internals.maybeActiveFiber = Option.some(fiber);
-    let isHandleDisposed = false;
-    const dispose = () => {
-        if (isHandleDisposed) {
-            return;
-        }
-        isHandleDisposed = true;
-        connector.dispose();
-        internals.isEmbedActive = false;
-        Effect.runFork(Fiber.interrupt(fiber));
-    };
-    const ports = buildPortHandles(program.ports, connector);
-    return { ports, dispose };
-}