@fluixi/core 1.0.0-alpha.84 → 1.0.0-alpha.85

package/dist/src/lib/plugins/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/core v1.0.0-alpha.84 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/core v1.0.0-alpha.85 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/dist/src/lib/plugins/index.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/core v1.0.0-alpha.84 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/core v1.0.0-alpha.85 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/lib/plugins/vite.ts
 import { fluixi, createVitePlugin } from "@fluixi/vite-plugin";

package/dist/src/lib/render/index.cjs

@@ -63,7 +63,7 @@ var import_signal6 = require("@fluixi/reactive/signal");
 var import_dom = require("@fluixi/dom");
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/render/versions.ts
 var import_dom2 = require("@fluixi/dom");

package/dist/src/lib/render/index.mjs

@@ -6,7 +6,7 @@ import { createRoot as createRoot2 } from "@fluixi/reactive/signal";
 import { registerCoreVersion } from "@fluixi/dom";
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/render/versions.ts
 import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";

package/dist/src/lib/render/versions.cjs

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(versions_exports);
 var import_dom = require("@fluixi/dom");
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/render/versions.ts
 var import_dom2 = require("@fluixi/dom");

package/dist/src/lib/render/versions.mjs

@@ -2,7 +2,7 @@
 import { registerCoreVersion } from "@fluixi/dom";
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/render/versions.ts
 import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";

package/dist/src/lib/router/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/core v1.0.0-alpha.84 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/core v1.0.0-alpha.85 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -35,10 +35,12 @@ __export(index_exports, {
   lazy: () => lazy,
   matchPath: () => import_router2.matchPath,
   matchRoutes: () => import_router2.matchRoutes,
+  prefersReducedMotion: () => prefersReducedMotion,
   preloadRoutes: () => preloadRoutes,
   revalidate: () => revalidate,
   runWithOwner: () => import_signal7.runWithOwner,
   select: () => select,
+  supportsViewTransitions: () => supportsViewTransitions,
   useAction: () => useAction,
   useLevelParams: () => useLevelParams,
   useLinkNavigation: () => useLinkNavigation,
@@ -55,6 +57,56 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_signal5 = require("@fluixi/reactive/signal");
+
+// src/lib/router/transition.ts
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}
+
+// src/lib/router/index.ts
 var import_dom4 = require("@fluixi/dom");
 var import_signal6 = require("@fluixi/reactive/signal");
 var import_object = require("@fluixi/utils/object");
@@ -347,7 +399,7 @@ function renderChild(ctx) {
   );
   (0, import_signal5.createEffect)(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if ((0, import_signal5.untrack)(childComp) !== c) setChildComp(() => c);
   });
   return (0, import_signal5.createMemo)(() => {
     const component = childComp();
@@ -385,6 +437,7 @@ function buildDefaultNotFound() {
   el.appendChild(p);
   return el;
 }
+var pendingTransitionMode;
 function Router(props) {
   const history = props.history ?? (0, import_router.createBrowserHistory)();
   const router = (0, import_router.createRouter)({
@@ -393,10 +446,35 @@ function Router(props) {
     history
   });
   const [state, setState] = (0, import_signal5.createSignal)(router.state());
-  const unsub = router.subscribe(setState);
+  let navigationId = 0;
+  const takeMode = () => {
+    const mode = pendingTransitionMode ?? (props.transition ?? "auto");
+    pendingTransitionMode = void 0;
+    return mode;
+  };
+  const unsub = router.subscribe((next) => {
+    const id = ++navigationId;
+    const mode = takeMode();
+    const prepared = prepareComponents(
+      (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
+    );
+    const commit = () => {
+      setState(next);
+      return (0, import_signal5.flush)();
+    };
+    if (!prepared) {
+      void runTransition(mode, commit);
+      return;
+    }
+    void prepared.then(() => {
+      if (id !== navigationId) return;
+      return runTransition(mode, commit);
+    });
+  });
   (0, import_signal5.onCleanup)(() => {
     unsub();
     router.destroy();
+    navigationId++;
   });
   const matched = (0, import_signal5.createMemo)(
     () => (state().match?.matched ?? []).filter((m) => m.component)
@@ -529,12 +607,16 @@ function useLinkNavigation(options = {}) {
     if (url.hash && url.pathname === window.location.pathname && url.search === window.location.search) return;
     if (options.shouldNavigate && !options.shouldNavigate(url, anchor)) return;
     event.preventDefault();
+    pendingTransitionMode = options.transition;
     ctx.router.navigate(url.pathname + url.search + url.hash, { replace: options.replace });
   };
 }
 function useNavigate() {
   const { router } = useRouter();
-  return (to, options) => router.navigate(to, options);
+  return (to, options) => {
+    pendingTransitionMode = options?.transition;
+    router.navigate(to, options);
+  };
 }
 function useRouteData() {
   const acc = (0, import_signal6.useContext)(RouteDataContext2);

package/dist/src/lib/router/index.d.ts

@@ -1,16 +1,4 @@
-/**
- *
- * Renders the resolved match tree TOP-DOWN. Each layer's component is rendered
- * inside the PARENT layer's <Outlet/> scope, so a child route inherits whatever
- * context a parent layout provides. <Outlet/> is reactive but keyed on the child's
- * component reference, so it only re-renders when the child route at that depth
- * actually changes: sibling navigation reuses the layout, deeper navigation
- * leaves shallower layouts untouched.
- *
- * No parentGate, no deferred content memo: a child is rendered straight from the
- * matched array, never by re-entering a still-building parent, so deeply nested
- * <Outlet/> works at any depth.
- */
+import { type TransitionMode } from './transition.js';
 import { type GetAtPath } from '@fluixi/utils/object';
 import type { IsUndefined } from '@fluixi/utils/primitive';
 import { type RouteDefinition, type Router as CoreRouter, type HistoryAdapter, type RouterLocation, type NavigateOptions } from '@fluixi/router';
@@ -29,6 +17,16 @@ export interface RouterProps<C = any> {
      * that keeps your layout/chrome, add a catch-all file route instead (`[...slug].tsx` -> `*`).
      */
     notFound?: any;
+    /**
+     * How route changes are presented. `'auto'` (the default) hands the DOM swap to the
+     * browser's View Transition API where there is one, and navigates directly where
+     * there is not; `'none'` always navigates directly.
+     *
+     * A reader who asked for reduced motion never gets an animation either way. Styling
+     * is the native mechanism: `::view-transition-old(root)` and
+     * `::view-transition-new(root)`: so the router imposes no visual style of its own.
+     */
+    transition?: TransitionMode;
 }
 /**
  * The router. Matches the current URL against `routes` and renders what matches.
@@ -118,6 +116,8 @@ export declare function useLocation(): RouterLocation;
 export interface LinkNavigationOptions {
     /** Replace the current history entry instead of pushing a new one. */
     replace?: boolean;
+    /** How this navigation is presented. Defaults to the Router's own setting. */
+    transition?: TransitionMode;
     /**
      * Called with the resolved URL before navigating. Return false to leave the click
      * alone, for a section of the app that must load as a document (a different
@@ -164,7 +164,9 @@ export declare function useLinkNavigation(options?: LinkNavigationOptions): (eve
  * navigate(`/posts/${id}`, { replace: true });
  * ```
  */
-export declare function useNavigate(): (to: string, options?: NavigateOptions) => void;
+export declare function useNavigate(): (to: string, options?: NavigateOptions & {
+    transition?: TransitionMode;
+}) => void;
 /**
  * The resolved data for the nearest route that declared a `data` loader. Always
  * returns a callable accessor (matching the old router): it suspends under
@@ -244,5 +246,6 @@ export type { RouteDefinition, RouteMatch, MatchedRoute, RouterLocation, Navigat
 export { cache, action, revalidate, createAsync, useSubmission, useAction, } from './data.js';
 export type { RouteDataArgs, RouteLoadFunc, Action, Submission, CacheFn, } from './data.js';
 export { lazy } from '../render/lazy.js';
+export { supportsViewTransitions, prefersReducedMotion, type TransitionMode, } from './transition.js';
 export { runWithOwner } from '@fluixi/reactive/signal';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/router/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/router/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/router/index.ts"],"names":[],"mappings":"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"}

package/dist/src/lib/router/index.js

@@ -11,7 +11,8 @@
  * matched array, never by re-entering a still-building parent, so deeply nested
  * <Outlet/> works at any depth.
  */
-import { createSignal, createMemo, createResource, createEffect, getOwner, onCleanup, untrack, } from '@fluixi/reactive/signal';
+import { createSignal, createMemo, createResource, createEffect, getOwner, onCleanup, untrack, flush, } from '@fluixi/reactive/signal';
+import { prepareComponents, runTransition, } from './transition.js';
 import { insert, createComponent, createNativeElement, setAttribute, } from '@fluixi/dom';
 // Reactive context (not fluixi createProvider, which destructures children
 // eagerly) so a `get children()` getter renders after the context is stamped.
@@ -88,7 +89,11 @@ function renderChild(ctx) {
     const [childComp, setChildComp] = createSignal(untrack(() => ctx.matched()[childIdx]?.component));
     createEffect(() => {
         const c = ctx.matched()[childIdx]?.component;
-        setChildComp(() => c);
+        // `matched` is invalidated more than once per navigation, so this effect runs more
+        // than once. Writing only on a real change keeps the redundant runs from touching
+        // the graph at all.
+        if (untrack(childComp) !== c)
+            setChildComp(() => c);
     });
     return createMemo(() => {
         const component = childComp();
@@ -134,6 +139,11 @@ function buildDefaultNotFound() {
     el.appendChild(p);
     return el;
 }
+/**
+ * The presentation for the navigation about to happen, handed from `useNavigate` to the
+ * subscriber in `Router`. Read and cleared within the same synchronous call.
+ */
+let pendingTransitionMode;
 /**
  * The router. Matches the current URL against `routes` and renders what matches.
  *
@@ -156,10 +166,62 @@ export function Router(props) {
         history,
     });
     const [state, setState] = createSignal(router.state());
-    const unsub = router.subscribe(setState);
+    /**
+     * Which navigation is allowed to commit.
+     *
+     * Preparation is async, so two navigations can be in flight at once: A→B starts
+     * loading B's chunk, the reader clicks through to C before it lands. Each navigation
+     * takes the next number and checks it is still the current one before writing the
+     * match signal, so B resolving late finds itself superseded and returns without
+     * touching anything. Without this, B would commit over C, the URL would say /c and
+     * the page would show B.
+     */
+    let navigationId = 0;
+    /**
+     * How to present the next commit, set by `useNavigate` immediately before it calls
+     * into the core router.
+     *
+     * A module-level hand-off rather than a parameter because the core router's
+     * `navigate` does not carry options through to its listeners, and it notifies
+     * synchronously: the value is written and read within the same call, never left
+     * lying around for an unrelated navigation to pick up.
+     */
+    const takeMode = () => {
+        const mode = pendingTransitionMode ?? (props.transition ?? 'auto');
+        pendingTransitionMode = undefined;
+        return mode;
+    };
+    const unsub = router.subscribe((next) => {
+        const id = ++navigationId;
+        const mode = takeMode();
+        // Load the modules the next route needs before anything is torn down, so a lazy
+        // route renders straight through instead of suspending into a fallback with the
+        // old page already gone.
+        const prepared = prepareComponents((next.match?.matched ?? []).map((m) => m.component).filter(Boolean));
+        const commit = () => {
+            setState(next);
+            // The write only queues; effects are scheduled. Flushing here is what lets the
+            // browser snapshot a settled DOM rather than a half-built one.
+            return flush();
+        };
+        if (!prepared) {
+            // Nothing to wait for: stay on the tick this navigation was already on.
+            void runTransition(mode, commit);
+            return;
+        }
+        void prepared.then(() => {
+            // Superseded while the module loaded. The newer navigation owns the DOM now.
+            if (id !== navigationId)
+                return;
+            return runTransition(mode, commit);
+        });
+    });
     onCleanup(() => {
         unsub();
         router.destroy();
+        // Anything still preparing is now stale, so nothing can commit into a torn-down
+        // router.
+        navigationId++;
     });
     // Drop pathless layers (no component), their params still appear in the merged
     // params exposed by RouterContext.
@@ -390,6 +452,7 @@ export function useLinkNavigation(options = {}) {
         if (options.shouldNavigate && !options.shouldNavigate(url, anchor))
             return;
         event.preventDefault();
+        pendingTransitionMode = options.transition;
         ctx.router.navigate(url.pathname + url.search + url.hash, { replace: options.replace });
     };
 }
@@ -414,7 +477,13 @@ export function useNavigate() {
     // detached), so navigation degrades to a no-op during SSR and only throws on
     // genuine client-side misuse outside <Router>.
     const { router } = useRouter();
-    return (to, options) => router.navigate(to, options);
+    return (to, options) => {
+        // Handed to the Router's subscriber, which runs synchronously inside the call
+        // below and clears it. `transition: 'none'` on one navigation leaves the router's
+        // own setting alone for the next.
+        pendingTransitionMode = options?.transition;
+        router.navigate(to, options);
+    };
 }
 /**
  * The resolved data for the nearest route that declared a `data` loader. Always
@@ -598,5 +667,8 @@ export { createMemoryHistory, createBrowserHistory, matchRoutes, matchPath, } fr
 // swap its import path wholesale. (Routing hooks above are the router ones.)
 export { cache, action, revalidate, createAsync, useSubmission, useAction, } from './data.js';
 export { lazy } from '../render/lazy.js';
+// Navigation presentation. The router owns the integration; these are exported for
+// apps that need to ask what the environment supports.
+export { supportsViewTransitions, prefersReducedMotion, } from './transition.js';
 // Carried over from the barrel this replaced; route codegen imports it from here.
 export { runWithOwner } from '@fluixi/reactive/signal';

package/dist/src/lib/router/index.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/core v1.0.0-alpha.84 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/core v1.0.0-alpha.85 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/lib/router/index.ts
 import {
@@ -8,8 +8,59 @@ import {
   createEffect,
   getOwner,
   onCleanup,
-  untrack as untrack2
+  untrack as untrack2,
+  flush
 } from "@fluixi/reactive/signal";
+
+// src/lib/router/transition.ts
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}
+
+// src/lib/router/index.ts
 import {
   insert,
   createComponent as createComponent2,
@@ -326,7 +377,7 @@ function renderChild(ctx) {
   );
   createEffect(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if (untrack2(childComp) !== c) setChildComp(() => c);
   });
   return createMemo2(() => {
     const component = childComp();
@@ -364,6 +415,7 @@ function buildDefaultNotFound() {
   el.appendChild(p);
   return el;
 }
+var pendingTransitionMode;
 function Router(props) {
   const history = props.history ?? createBrowserHistory();
   const router = createCoreRouter({
@@ -372,10 +424,35 @@ function Router(props) {
     history
   });
   const [state, setState] = createSignal2(router.state());
-  const unsub = router.subscribe(setState);
+  let navigationId = 0;
+  const takeMode = () => {
+    const mode = pendingTransitionMode ?? (props.transition ?? "auto");
+    pendingTransitionMode = void 0;
+    return mode;
+  };
+  const unsub = router.subscribe((next) => {
+    const id = ++navigationId;
+    const mode = takeMode();
+    const prepared = prepareComponents(
+      (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
+    );
+    const commit = () => {
+      setState(next);
+      return flush();
+    };
+    if (!prepared) {
+      void runTransition(mode, commit);
+      return;
+    }
+    void prepared.then(() => {
+      if (id !== navigationId) return;
+      return runTransition(mode, commit);
+    });
+  });
   onCleanup(() => {
     unsub();
     router.destroy();
+    navigationId++;
   });
   const matched = createMemo2(
     () => (state().match?.matched ?? []).filter((m) => m.component)
@@ -508,12 +585,16 @@ function useLinkNavigation(options = {}) {
     if (url.hash && url.pathname === window.location.pathname && url.search === window.location.search) return;
     if (options.shouldNavigate && !options.shouldNavigate(url, anchor)) return;
     event.preventDefault();
+    pendingTransitionMode = options.transition;
     ctx.router.navigate(url.pathname + url.search + url.hash, { replace: options.replace });
   };
 }
 function useNavigate() {
   const { router } = useRouter();
-  return (to, options) => router.navigate(to, options);
+  return (to, options) => {
+    pendingTransitionMode = options?.transition;
+    router.navigate(to, options);
+  };
 }
 function useRouteData() {
   const acc = useContext2(RouteDataContext2);
@@ -619,10 +700,12 @@ export {
   lazy,
   matchPath2 as matchPath,
   matchRoutes2 as matchRoutes,
+  prefersReducedMotion,
   preloadRoutes,
   revalidate,
   runWithOwner,
   select,
+  supportsViewTransitions,
   useAction,
   useLevelParams,
   useLinkNavigation,

package/dist/src/lib/router/transition.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/router/transition.ts
+var transition_exports = {};
+__export(transition_exports, {
+  prefersReducedMotion: () => prefersReducedMotion,
+  prepareComponents: () => prepareComponents,
+  runTransition: () => runTransition,
+  shouldAnimate: () => shouldAnimate,
+  supportsViewTransitions: () => supportsViewTransitions
+});
+module.exports = __toCommonJS(transition_exports);
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}