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

package/dist/src/cdn/{chunk-VNLCQBFQ.mjs → chunk-MDJLC3PE.mjs}

@@ -20,8 +20,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,
@@ -422,7 +473,7 @@ function renderChild(ctx) {
   );
   createEffect(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if (untrack2(childComp) !== c) setChildComp(() => c);
   });
   return createMemo2(() => {
     const component = childComp();
@@ -460,6 +511,7 @@ function buildDefaultNotFound() {
   el.appendChild(p);
   return el;
 }
+var pendingTransitionMode;
 function Router(props) {
   const history = props.history ?? createBrowserHistory();
   const router = createCoreRouter({
@@ -468,10 +520,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)
@@ -604,12 +681,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);
@@ -714,6 +795,8 @@ export {
   setHydrating,
   deserializeHydrationData,
   cleanupHydration,
+  supportsViewTransitions,
+  prefersReducedMotion,
   cache,
   revalidate,
   createAsync,

package/dist/src/cdn/core.cjs

@@ -245,6 +245,59 @@ var init_hydration = __esm({
   }
 });
 
+// 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);
+  }
+}
+var init_transition = __esm({
+  "src/lib/router/transition.ts"() {
+    "use strict";
+  }
+});
+
 // src/lib/router/data.ts
 function cache(fn, name) {
   return async (...args) => {
@@ -381,10 +434,12 @@ __export(router_exports, {
   lazy: () => lazy,
   matchPath: () => import_router2.matchPath,
   matchRoutes: () => import_router2.matchRoutes,
+  prefersReducedMotion: () => prefersReducedMotion,
   preloadRoutes: () => preloadRoutes,
   revalidate: () => revalidate,
   runWithOwner: () => import_signal16.runWithOwner,
   select: () => select,
+  supportsViewTransitions: () => supportsViewTransitions,
   useAction: () => useAction,
   useLevelParams: () => useLevelParams,
   useLinkNavigation: () => useLinkNavigation,
@@ -443,7 +498,7 @@ function renderChild(ctx) {
   );
   (0, import_signal14.createEffect)(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if ((0, import_signal14.untrack)(childComp) !== c) setChildComp(() => c);
   });
   return (0, import_signal14.createMemo)(() => {
     const component = childComp();
@@ -489,10 +544,35 @@ function Router(props) {
     history
   });
   const [state, setState] = (0, import_signal14.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_signal14.flush)();
+    };
+    if (!prepared) {
+      void runTransition(mode, commit);
+      return;
+    }
+    void prepared.then(() => {
+      if (id !== navigationId) return;
+      return runTransition(mode, commit);
+    });
+  });
   (0, import_signal14.onCleanup)(() => {
     unsub();
     router.destroy();
+    navigationId++;
   });
   const matched = (0, import_signal14.createMemo)(
     () => (state().match?.matched ?? []).filter((m) => m.component)
@@ -619,12 +699,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_signal15.useContext)(RouteDataContext2);
@@ -703,11 +787,12 @@ async function preloadRoutes(routes, pathname) {
   }
   await Promise.all(loads);
 }
-var import_signal14, import_dom16, import_signal15, import_object, import_compare, import_router, import_router2, import_signal16, RouterContext, OutletContext, LevelParamsContext, RouteDataContext2, _ssrRouterStub, read, LINK_OWN_PROPS, A;
+var import_signal14, import_dom16, import_signal15, import_object, import_compare, import_router, import_router2, import_signal16, RouterContext, OutletContext, LevelParamsContext, RouteDataContext2, pendingTransitionMode, _ssrRouterStub, read, LINK_OWN_PROPS, A;
 var init_router = __esm({
   "src/lib/router/index.ts"() {
     "use strict";
     import_signal14 = require("@fluixi/reactive/signal");
+    init_transition();
     import_dom16 = require("@fluixi/dom");
     import_signal15 = require("@fluixi/reactive/signal");
     import_object = require("@fluixi/utils/object");
@@ -716,6 +801,7 @@ var init_router = __esm({
     import_router2 = require("@fluixi/router");
     init_data();
     init_lazy();
+    init_transition();
     import_signal16 = require("@fluixi/reactive/signal");
     RouterContext = (0, import_signal15.createContext)(void 0, "router");
     OutletContext = (0, import_signal15.createContext)(void 0, "outlet");
@@ -857,7 +943,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/cdn/core.mjs

@@ -25,7 +25,7 @@ import {
   useProvide,
   useRouter,
   useSearchParams
-} from "./chunk-VNLCQBFQ.mjs";
+} from "./chunk-MDJLC3PE.mjs";
 
 // src/lib/index.ts
 import {
@@ -59,7 +59,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";
@@ -508,7 +508,7 @@ async function startClient(App, options = {}) {
   stripHeadMarker(container);
   if (shouldHydrate) {
     if (options.routes && options.routes.length) {
-      const { preloadRoutes } = await import("./router-WMN2AA7E.mjs");
+      const { preloadRoutes } = await import("./router-JYFZP3EZ.mjs");
       await preloadRoutes(options.routes, window.location.pathname);
     }
     deserializeHydrationData();

package/dist/src/cdn/{router-WMN2AA7E.mjs → router-JYFZP3EZ.mjs}

@@ -13,10 +13,12 @@ import {
   lazy,
   matchPath,
   matchRoutes,
+  prefersReducedMotion,
   preloadRoutes,
   revalidate,
   runWithOwner,
   select,
+  supportsViewTransitions,
   useAction,
   useLevelParams,
   useLinkNavigation,
@@ -30,7 +32,7 @@ import {
   useRouter,
   useSearchParams,
   useSubmission
-} from "./chunk-VNLCQBFQ.mjs";
+} from "./chunk-MDJLC3PE.mjs";
 export {
   A,
   Form,
@@ -46,10 +48,12 @@ export {
   lazy,
   matchPath,
   matchRoutes,
+  prefersReducedMotion,
   preloadRoutes,
   revalidate,
   runWithOwner,
   select,
+  supportsViewTransitions,
   useAction,
   useLevelParams,
   useLinkNavigation,

package/dist/src/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;
@@ -141,7 +141,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/core.ts
 var import_signal15 = require("@fluixi/reactive/signal");
@@ -887,6 +887,56 @@ function createTheme(options) {
 
 // src/lib/router/index.ts
 var import_signal12 = 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_dom15 = require("@fluixi/dom");
 var import_signal13 = require("@fluixi/reactive/signal");
 var import_object = require("@fluixi/utils/object");
@@ -989,7 +1039,7 @@ function renderChild(ctx) {
   );
   (0, import_signal12.createEffect)(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if ((0, import_signal12.untrack)(childComp) !== c) setChildComp(() => c);
   });
   return (0, import_signal12.createMemo)(() => {
     const component = childComp();
@@ -1027,6 +1077,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)({
@@ -1035,10 +1086,35 @@ function Router(props) {
     history
   });
   const [state, setState] = (0, import_signal12.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_signal12.flush)();
+    };
+    if (!prepared) {
+      void runTransition(mode, commit);
+      return;
+    }
+    void prepared.then(() => {
+      if (id !== navigationId) return;
+      return runTransition(mode, commit);
+    });
+  });
   (0, import_signal12.onCleanup)(() => {
     unsub();
     router.destroy();
+    navigationId++;
   });
   const matched = (0, import_signal12.createMemo)(
     () => (state().match?.matched ?? []).filter((m) => m.component)
@@ -1093,7 +1169,10 @@ function useLocation() {
 }
 function useNavigate() {
   const { router } = useRouter();
-  return (to, options) => router.navigate(to, options);
+  return (to, options) => {
+    pendingTransitionMode = options?.transition;
+    router.navigate(to, options);
+  };
 }
 var read = (v) => typeof v === "function" ? v() : v;
 var LINK_OWN_PROPS = /* @__PURE__ */ new Set([

package/dist/src/index.mjs

@@ -1,7 +1,7 @@
-/*! @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/version.generated.ts
-var VERSION = "1.0.0-alpha.84";
+var VERSION = "1.0.0-alpha.85";
 
 // src/lib/core.ts
 import {
@@ -820,8 +820,59 @@ import {
   createEffect as createEffect3,
   getOwner as getOwner2,
   onCleanup as onCleanup2,
-  untrack as untrack3
+  untrack as untrack3,
+  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 as insert2,
   createComponent as createComponent4,
@@ -942,7 +993,7 @@ function renderChild(ctx) {
   );
   createEffect3(() => {
     const c = ctx.matched()[childIdx]?.component;
-    setChildComp(() => c);
+    if (untrack3(childComp) !== c) setChildComp(() => c);
   });
   return createMemo6(() => {
     const component = childComp();
@@ -980,6 +1031,7 @@ function buildDefaultNotFound() {
   el.appendChild(p);
   return el;
 }
+var pendingTransitionMode;
 function Router(props) {
   const history = props.history ?? createBrowserHistory();
   const router = createCoreRouter({
@@ -988,10 +1040,35 @@ function Router(props) {
     history
   });
   const [state, setState] = createSignal7(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);
+    });
+  });
   onCleanup2(() => {
     unsub();
     router.destroy();
+    navigationId++;
   });
   const matched = createMemo6(
     () => (state().match?.matched ?? []).filter((m) => m.component)
@@ -1046,7 +1123,10 @@ function useLocation() {
 }
 function useNavigate() {
   const { router } = useRouter();
-  return (to, options) => router.navigate(to, options);
+  return (to, options) => {
+    pendingTransitionMode = options?.transition;
+    router.navigate(to, options);
+  };
 }
 var read = (v) => typeof v === "function" ? v() : v;
 var LINK_OWN_PROPS = /* @__PURE__ */ new Set([

package/dist/src/lib/client/{chunk-2C2KDDQV.mjs → chunk-7IUN2FLI.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/server/hydration.ts
 import { isServer as domIsServer } from "@fluixi/dom";