akanjs 3.0.0-beta.9 → 3.0.1

package/webkit/useCsrValues.ts

@@ -3,15 +3,14 @@ import { useSpringValue } from "@react-spring/web";
 import { useDrag } from "@use-gesture/react";
 import {
   type CsrContextType,
-  type CsrTransitionStyles,
   router as clientRouter,
   Device,
   debugFrame,
   defaultPageState,
   getPathInfo,
+  type Location,
   type LocationState,
   type NavigationIntent,
-  normalizeDeepLinkHref,
   type PageState,
   type PageTransition,
   type PathRoute,
@@ -22,9 +21,12 @@ import {
   type TransitionType,
   type UseCsrTransition,
 } from "akanjs/client";
-import { loadCapacitorApp } from "akanjs/client/capacitor";
 import { clamp, parseAkanI18nEnv, parseBasePaths } from "akanjs/common";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CsrStack } from "./CsrStack";
+import { CsrFrameDump } from "./csrFrameDump";
+import { type NativeBackProgress, NativeNavigation } from "./nativeNavigation";
+import { NativeUpdates } from "./nativeUpdates";
 import {
   createFrameSnapshot,
   createTransitionPlan,
@@ -91,27 +93,110 @@ const getSyncRouteHref = (location: {
   return `${path}${search ? `?${search}` : ""}${location.hash ? `#${location.hash}` : ""}`;
 };
 
-const getKeyboardAwarePageHeight = ({ frameLayout }: RouteState) => frameLayout.contentViewport.height;
+type Progress = UseCsrTransition["transProgress"];
+type FramePageState = PathRoute["pageState"];
 
-const getKeyboardAwareBottomPadding = ({ frameLayout }: RouteState, pageState: PathRoute["pageState"]) =>
-  Math.max(
+const tween = (progress: Progress, from: number, to: number) => progress.to([0, 1], [from, to]);
+const fadeIn = (progress: Progress) => ({ opacity: progress.to((value) => value) });
+const fadeOut = (progress: Progress) => ({ opacity: progress.to((value) => 1 - value) });
+
+const pageContentStyle = ({ frameLayout }: RouteState, pageState: FramePageState) => ({
+  paddingTop: pageState.topSafeArea + pageState.topInset,
+  paddingBottom: Math.max(
     pageState.bottomSafeArea,
     pageState.bottomInset +
       pageState.bottomSafeArea -
       (frameLayout.keyboard.sticky ? frameLayout.keyboardAccessory.height : 0),
-  );
+  ),
+  height: frameLayout.contentViewport.height,
+});
+
+const prevPageContentStyle = (clientHeight: number, prevPageState: FramePageState) => ({
+  paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+  paddingBottom: prevPageState.bottomInset + prevPageState.bottomSafeArea,
+  height: clientHeight,
+});
+
+const tweenedSafeAreas = (
+  progress: Progress,
+  clientHeight: number,
+  pageState: FramePageState,
+  prevPageState: FramePageState,
+) => ({
+  topSafeArea: {
+    containerStyle: {
+      backgroundColor: pageState.topSafeAreaColor,
+      height: tween(progress, prevPageState.topSafeArea, pageState.topSafeArea),
+    },
+  },
+  bottomSafeArea: {
+    containerStyle: {
+      backgroundColor: pageState.bottomSafeAreaColor,
+      top: tween(progress, clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea),
+      height: tween(progress, prevPageState.bottomSafeArea, pageState.bottomSafeArea),
+    },
+  },
+});
+
+const tweenedTopInset = (progress: Progress, pageState: FramePageState, prevPageState: FramePageState) => ({
+  top: tween(progress, prevPageState.topSafeArea, pageState.topSafeArea),
+  height: tween(progress, prevPageState.topInset, pageState.topInset),
+});
+
+const tweenedBottomInset = (
+  progress: Progress,
+  clientHeight: number,
+  pageState: FramePageState,
+  prevPageState: FramePageState,
+) => ({
+  height: tween(progress, prevPageState.bottomInset, pageState.bottomInset),
+  top: tween(progress, getBottomInsetTop(clientHeight, prevPageState), getBottomInsetTop(clientHeight, pageState)),
+});
+
+const useFadeSpring = () => {
+  const transUnit = useSpringValue(1, { config: { clamp: true } });
+  const transUnitRange = useMemo(() => [0, 1], []);
+  return {
+    transUnit,
+    transUnitRange,
+    transProgress: transUnit.to((unit) => unit),
+    transPercent: transUnit.to([0, 1], [0, 100], "clamp"),
+  };
+};
+
+const useSlideSpring = (size: number) => {
+  const transUnit = useSpringValue(0, { config: { clamp: true } });
+  const transUnitRange = useMemo(() => [size, 0], [size]);
+  const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
+  const transUnitRangeReversed = useMemo(() => [0, size], [size]);
+  return {
+    transUnit,
+    transUnitRange,
+    transProgress: transUnitReversed.to(transUnitRangeReversed, [0, 1], "clamp"),
+    transPercent: transUnitReversed.to(transUnitRangeReversed, [0, 100], "clamp"),
+  };
+};
+
+const usePlayOnForward = (
+  { transUnit, transUnitRange }: Pick<UseCsrTransition, "transUnit" | "transUnitRange">,
+  { history, location }: RouteState,
+  config: { duration: number; easing?: (t: number) => number },
+) => {
+  useEffect(() => {
+    if (history.current.type === "forward") {
+      void transUnit.start(transUnitRange[0], { immediate: true });
+      void transUnit.start(transUnitRange[1], { config });
+    } else void transUnit.start(transUnitRange[1], { immediate: true });
+  }, [location.entryId ?? location.pathname]);
+};
 
 const useNoneTrans = (routeState: RouteState): UseCsrTransition => {
   const { clientHeight, location, prevLocation } = routeState;
-  const pageContentHeight = getKeyboardAwarePageHeight(routeState);
-  const transDirection = "none";
   const transUnit = useSpringValue(0, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [0, 0], []);
-  const transProgress = transUnit.to((unit) => 1);
-  const transPercent = transUnit.to((unit) => 100);
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
-  const csrTranstionStyles: CsrTransitionStyles = {
+  return {
     topSafeArea: {
       containerStyle: {
         backgroundColor: pageState.topSafeAreaColor,
@@ -131,11 +216,7 @@ const useNoneTrans = (routeState: RouteState): UseCsrTransition => {
         left: 0,
         height: clientHeight,
       },
-      contentStyle: {
-        paddingTop: pageState.topSafeArea + pageState.topInset,
-        paddingBottom: getKeyboardAwareBottomPadding(routeState, pageState),
-        height: pageContentHeight,
-      },
+      contentStyle: pageContentStyle(routeState, pageState),
     },
     prevPage: {
       containerStyle: {
@@ -162,34 +243,25 @@ const useNoneTrans = (routeState: RouteState): UseCsrTransition => {
     bottomInset: {
       containerStyle: {
         height: pageState.bottomInset,
-        top: clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+        top: getBottomInsetTop(clientHeight, pageState),
       },
       contentStyle: { opacity: 1 },
       prevContentStyle: { opacity: 0 },
     },
-  };
-
-  const useCsrTransition: UseCsrTransition = {
-    ...csrTranstionStyles,
     pageBind: () => ({}),
     pageClassName: "touch-pan-y",
-    transDirection,
+    transDirection: "none",
     transUnitRange,
     transUnit,
-    transPercent,
-    transProgress,
+    transProgress: transUnit.to(() => 1),
+    transPercent: transUnit.to(() => 100),
   };
-  return useCsrTransition;
 };
 
 const useFadeTrans = (routeState: RouteState): UseCsrTransition => {
-  const { clientHeight, location, prevLocation, onBack, history } = routeState;
-  const pageContentHeight = getKeyboardAwarePageHeight(routeState);
-  const transDirection = "none";
-  const transUnit = useSpringValue(1, { config: { clamp: true } });
-  const transUnitRange = useMemo(() => [0, 1], []);
-  const transProgress = transUnit.to((unit) => unit);
-  const transPercent = transUnit.to([0, 1], [0, 100], "clamp");
+  const { clientHeight, location, prevLocation, onBack } = routeState;
+  const spring = useFadeSpring();
+  const { transUnit, transUnitRange, transProgress } = spring;
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
   const pageBottomInsetTop = getBottomInsetTop(clientHeight, pageState);
@@ -200,90 +272,44 @@ const useFadeTrans = (routeState: RouteState): UseCsrTransition => {
       await transUnit.start(transUnitRange[0]);
     };
   }, []);
-  useEffect(() => {
-    if (history.current.type === "forward") {
-      void transUnit.start(transUnitRange[0], { immediate: true });
-      void transUnit.start(transUnitRange[1], { config: { duration: 150 } });
-    } else {
-      void transUnit.start(transUnitRange[1], { immediate: true });
-      return;
-    }
-  }, [location.pathname]);
+  usePlayOnForward(spring, routeState, { duration: 150 });
 
-  const csrTranstionStyles: CsrTransitionStyles = {
-    topSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.topSafeAreaColor,
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
-    },
-    bottomSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.bottomSafeAreaColor,
-        top: transProgress.to(
-          [0, 1],
-          [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea],
-        ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
-    },
+  return {
+    ...tweenedSafeAreas(transProgress, clientHeight, pageState, prevPageState),
     page: {
       containerStyle: {},
-      contentStyle: {
-        paddingTop: pageState.topSafeArea + pageState.topInset,
-        paddingBottom: getKeyboardAwareBottomPadding(routeState, pageState),
-        opacity: transUnit,
-        height: pageContentHeight,
-      },
+      contentStyle: { ...pageContentStyle(routeState, pageState), opacity: transUnit },
     },
     prevPage: {
       containerStyle: {
         opacity: transProgress.to((progress) => 1 - progress),
       },
-      contentStyle: {
-        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        paddingBottom: prevPageState.bottomInset + prevPageState.bottomSafeArea,
-        height: clientHeight,
-      },
+      contentStyle: prevPageContentStyle(clientHeight, prevPageState),
     },
     topInset: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress,
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: { opacity: transProgress },
+      prevContentStyle: fadeOut(transProgress),
     },
     topLeftAction: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
       contentStyle: {
-        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => progress),
+        top: tween(transProgress, 0, -(pageState.bottomInset - prevPageState.bottomInset) * 2),
+        ...fadeIn(transProgress),
       },
       prevContentStyle: {
-        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => 1 - progress),
+        top: tween(transProgress, 0, -(pageState.bottomInset - prevPageState.bottomInset) * 2),
+        ...fadeOut(transProgress),
       },
     },
     bottomInset: {
-      containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.bottomInset, pageState.bottomInset]),
-        top: transProgress.to([0, 1], [prevBottomInsetTop, pageBottomInsetTop]),
-      },
+      containerStyle: tweenedBottomInset(transProgress, clientHeight, pageState, prevPageState),
       contentStyle: {
         height: pageState.bottomInset,
         translateY: transProgress.to((progress) =>
           getFrameContentOffset(pageBottomInsetTop, prevBottomInsetTop, pageBottomInsetTop, progress),
         ),
-        opacity: transProgress.to((progress) => progress),
-        
+        ...fadeIn(transProgress),
         transformOrigin: "top",
       },
       prevContentStyle: {
@@ -291,33 +317,21 @@ const useFadeTrans = (routeState: RouteState): UseCsrTransition => {
         translateY: transProgress.to((progress) =>
           getFrameContentOffset(prevBottomInsetTop, prevBottomInsetTop, pageBottomInsetTop, progress),
         ),
-        opacity: transProgress.to((progress) => 1 - progress),
+        ...fadeOut(transProgress),
         transformOrigin: "top",
       },
     },
-  };
-
-  const useCsrTransition: UseCsrTransition = {
-    ...csrTranstionStyles,
     pageBind: () => ({}),
     pageClassName: "",
-    transDirection,
-    transUnitRange,
-    transUnit,
-    transPercent,
-    transProgress,
+    transDirection: "none",
+    ...spring,
   };
-  return useCsrTransition;
 };
 
 const useScaleOutTrans = (routeState: RouteState): UseCsrTransition => {
-  const { clientHeight, location, prevLocation, onBack, history } = routeState;
-  const pageContentHeight = getKeyboardAwarePageHeight(routeState);
-  const transDirection = "none";
-  const transUnit = useSpringValue(1, { config: { clamp: true } });
-  const transUnitRange = useMemo(() => [0, 1], []);
-  const transProgress = transUnit.to((unit) => unit);
-  const transPercent = transUnit.to([0, 1], [0, 100], "clamp");
+  const { clientHeight, location, prevLocation, onBack } = routeState;
+  const spring = useFadeSpring();
+  const { transUnit, transUnitRange, transProgress } = spring;
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
 
@@ -326,127 +340,55 @@ const useScaleOutTrans = (routeState: RouteState): UseCsrTransition => {
       await transUnit.start(transUnitRange[0], { config: { duration: ANDROID_SCALE_TRANSITION_DURATION } });
     };
   }, []);
-  useEffect(() => {
-    if (history.current.type === "forward") {
-      void transUnit.start(transUnitRange[0], { immediate: true });
-      void transUnit.start(transUnitRange[1], { config: { duration: ANDROID_SCALE_TRANSITION_DURATION } });
-    } else {
-      void transUnit.start(transUnitRange[1], { immediate: true });
-      return;
-    }
-  }, [location.pathname]);
+  usePlayOnForward(spring, routeState, { duration: ANDROID_SCALE_TRANSITION_DURATION });
 
-  const csrTranstionStyles: CsrTransitionStyles = {
-    topSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.topSafeAreaColor,
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
-    },
-    bottomSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.bottomSafeAreaColor,
-        top: transProgress.to(
-          [0, 1],
-          [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea],
-        ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
-    },
+  return {
+    ...tweenedSafeAreas(transProgress, clientHeight, pageState, prevPageState),
     page: {
       containerStyle: {
         transform: transProgress.to((progress) => `scale(${0.92 + progress * 0.08})`),
       },
-      contentStyle: {
-        paddingTop: pageState.topSafeArea + pageState.topInset,
-        paddingBottom: getKeyboardAwareBottomPadding(routeState, pageState),
-        opacity: transProgress,
-        height: pageContentHeight,
-      },
+      contentStyle: { ...pageContentStyle(routeState, pageState), opacity: transProgress },
     },
     prevPage: {
       containerStyle: {
         transform: transProgress.to((progress) => `scale(${1 - progress * 0.02})`),
       },
       contentStyle: {
-        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        paddingBottom: prevPageState.bottomInset + prevPageState.bottomSafeArea,
+        ...prevPageContentStyle(clientHeight, prevPageState),
         opacity: transProgress.to((progress) => 1 - progress * 0.35),
-        height: clientHeight,
       },
     },
     topInset: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress,
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: { opacity: transProgress },
+      prevContentStyle: fadeOut(transProgress),
     },
     topLeftAction: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress,
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: { opacity: transProgress },
+      prevContentStyle: fadeOut(transProgress),
     },
     bottomInset: {
-      containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.bottomInset, pageState.bottomInset]),
-        top: transProgress.to(
-          [0, 1],
-          [
-            clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
-          ],
-        ),
-      },
-      contentStyle: {
-        opacity: transProgress,
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedBottomInset(transProgress, clientHeight, pageState, prevPageState),
+      contentStyle: { opacity: transProgress },
+      prevContentStyle: fadeOut(transProgress),
     },
-  };
-
-  const useCsrTransition: UseCsrTransition = {
-    ...csrTranstionStyles,
     pageBind: () => ({}),
     pageClassName: "",
-    transDirection,
-    transUnitRange,
-    transUnit,
-    transPercent,
-    transProgress,
+    transDirection: "none",
+    ...spring,
   };
-  return useCsrTransition;
 };
 
 const useStackTrans = (routeState: RouteState): UseCsrTransition => {
-  const { clientWidth, clientHeight, location, prevLocation, history, onBack, pageContentRef } = routeState;
-  const pageContentHeight = getKeyboardAwarePageHeight(routeState);
-  const transDirection = "horizontal";
-  const transUnit = useSpringValue(0, { config: { clamp: true } });
-  const transUnitRange = useMemo(() => [clientWidth, 0], [clientWidth]);
-  const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
-  const transUnitRangeReversed = useMemo(() => [0, clientWidth], [clientWidth]);
-  const transProgress = transUnitReversed.to(transUnitRangeReversed, [0, 1], "clamp");
-  const transPercent = transUnitReversed.to(transUnitRangeReversed, [0, 100], "clamp");
+  const { clientWidth, clientHeight, location, prevLocation, onBack, pageContentRef } = routeState;
+  const spring = useSlideSpring(clientWidth);
+  const { transUnit, transUnitRange, transProgress } = spring;
   const initThreshold = useMemo(() => Math.floor(clientWidth), [clientWidth]);
   const threshold = useMemo(() => Math.floor(clientWidth / 3), [clientWidth]);
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
-  const pageClassName = "touch-pan-y";
   const gestureIntent = useRef<GestureIntent>("pending");
   const scrollLockRef = useRef<{ overflowY: string; touchAction: string } | null>(null);
   const stackBackConfigRef = useRef<{ duration: number } | null>(null);
@@ -476,15 +418,7 @@ const useStackTrans = (routeState: RouteState): UseCsrTransition => {
     };
   }, []);
   useEffect(() => unlockPageScroll, [unlockPageScroll]);
-  useEffect(() => {
-    if (history.current.type === "forward") {
-      void transUnit.start(transUnitRange[0], { immediate: true });
-      void transUnit.start(transUnitRange[1], { config: { duration: 150 } });
-    } else {
-      void transUnit.start(transUnitRange[1], { immediate: true });
-      return;
-    }
-  }, [location.pathname]);
+  usePlayOnForward(spring, routeState, { duration: 150 });
 
   const pageBind = useDrag(
     ({ first, last, movement: [mx, my], velocity: [vx], direction: [dx], initial: [ix], cancel }) => {
@@ -533,31 +467,11 @@ const useStackTrans = (routeState: RouteState): UseCsrTransition => {
     { filterTaps: true },
   );
 
-  const csrTranstionStyles: CsrTransitionStyles = {
-    topSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.topSafeAreaColor,
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
-    },
-    bottomSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.bottomSafeAreaColor,
-        top: transProgress.to(
-          [0, 1],
-          [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea],
-        ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
-    },
+  return {
+    ...tweenedSafeAreas(transProgress, clientHeight, pageState, prevPageState),
     page: {
       containerStyle: {},
-      contentStyle: {
-        paddingTop: pageState.topSafeArea + pageState.topInset,
-        paddingBottom: getKeyboardAwareBottomPadding(routeState, pageState),
-        translateX: transUnit,
-        height: pageContentHeight,
-      },
+      contentStyle: { ...pageContentStyle(routeState, pageState), translateX: transUnit },
     },
     prevPage: {
       containerStyle: {
@@ -567,88 +481,45 @@ const useStackTrans = (routeState: RouteState): UseCsrTransition => {
         translateX: transUnit.to((unit) => (unit - clientWidth) / 5),
       },
       contentStyle: {
-        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        paddingBottom: prevPageState.bottomInset + prevPageState.bottomSafeArea,
-        height: clientHeight,
+        ...prevPageContentStyle(clientHeight, prevPageState),
         opacity: transProgress.to((progress) => 1 - progress / 2),
       },
     },
     topInset: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress.to((progress) => progress),
-        translateX: transProgress.to([0, 1], [clientWidth / 5, 0]),
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-        translateX: transProgress.to([0, 1], [0, -clientWidth / 5]),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: { ...fadeIn(transProgress), translateX: tween(transProgress, clientWidth / 5, 0) },
+      prevContentStyle: { ...fadeOut(transProgress), translateX: tween(transProgress, 0, -clientWidth / 5) },
     },
     topLeftAction: {
       containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-        minWidth: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress.to((progress) => progress),
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
+        ...tweenedTopInset(transProgress, pageState, prevPageState),
+        minWidth: tween(transProgress, prevPageState.topInset, pageState.topInset),
       },
+      contentStyle: fadeIn(transProgress),
+      prevContentStyle: fadeOut(transProgress),
     },
     bottomInset: {
-      containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.bottomInset, pageState.bottomInset]),
-        top: transProgress.to(
-          [0, 1],
-          [
-            clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
-          ],
-        ),
-      },
-      contentStyle: {
-        height: pageState.bottomInset,
-        translateX: transUnit,
-        opacity: transProgress.to((progress) => progress),
-      },
+      containerStyle: tweenedBottomInset(transProgress, clientHeight, pageState, prevPageState),
+      contentStyle: { height: pageState.bottomInset, translateX: transUnit, ...fadeIn(transProgress) },
       prevContentStyle: {
         height: prevPageState.bottomInset,
         translateX: transUnit.to((unit) => (unit - clientWidth) / 5),
-        opacity: transProgress.to((progress) => 1 - progress),
+        ...fadeOut(transProgress),
       },
     },
-  };
-
-  const useCsrTransition: UseCsrTransition = {
-    ...csrTranstionStyles,
     pageBind,
-    pageClassName,
-    transDirection,
-    transUnitRange,
-    transUnit,
-    transPercent,
-    transProgress,
+    pageClassName: "touch-pan-y",
+    transDirection: "horizontal",
+    ...spring,
   };
-  return useCsrTransition;
 };
 
 const useBottomUpTrans = (routeState: RouteState): UseCsrTransition => {
-  const { clientWidth, clientHeight, history, location, prevLocation, onBack } = routeState;
-  const pageContentHeight = getKeyboardAwarePageHeight(routeState);
-  const transDirection = "vertical";
-  const transUnit = useSpringValue(0, { config: { clamp: true } });
-  const transUnitRange = useMemo(() => [clientHeight, 0], [clientHeight]);
-  const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
-  const transUnitRangeReversed = useMemo(() => [0, clientHeight], [clientHeight]);
-  const transProgress = transUnitReversed.to(transUnitRangeReversed, [0, 1], "clamp");
-  const transPercent = transUnitReversed.to(transUnitRangeReversed, [0, 100], "clamp");
-  const initThreshold = useMemo(() => Math.floor(clientWidth / 3), [clientWidth]);
-  const threshold = useMemo(() => Math.floor(clientWidth / 2), [clientWidth]);
+  const { clientHeight, location, prevLocation, onBack } = routeState;
+  const spring = useSlideSpring(clientHeight);
+  const { transUnit, transUnitRange, transProgress } = spring;
+  const initThreshold = useMemo(() => Math.floor(clientHeight / 3), [clientHeight]);
+  const threshold = useMemo(() => Math.floor(clientHeight / 2), [clientHeight]);
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
   useEffect(() => {
@@ -656,15 +527,7 @@ const useBottomUpTrans = (routeState: RouteState): UseCsrTransition => {
       await transUnit.start(transUnitRange[0], { config: { duration: 220, easing: linearEasing } });
     };
   }, []);
-  useEffect(() => {
-    if (history.current.type === "forward") {
-      void transUnit.start(transUnitRange[0], { immediate: true });
-      void transUnit.start(transUnitRange[1], { config: { duration: 220, easing: linearEasing } });
-    } else {
-      void transUnit.start(transUnitRange[1], { immediate: true });
-      return;
-    }
-  }, [location.pathname]);
+  usePlayOnForward(spring, routeState, { duration: 220, easing: linearEasing });
 
   const pageBind = useDrag(
     ({ first, last, movement: [, my], initial: [, iy], cancel }) => {
@@ -682,98 +545,41 @@ const useBottomUpTrans = (routeState: RouteState): UseCsrTransition => {
     { axis: "y", filterTaps: true, threshold: 10 },
   );
 
-  const csrTranstionStyles: CsrTransitionStyles = {
-    topSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.topSafeAreaColor,
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
-    },
-    bottomSafeArea: {
-      containerStyle: {
-        backgroundColor: pageState.bottomSafeAreaColor,
-        top: transProgress.to(
-          [0, 1],
-          [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea],
-        ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
-    },
+  return {
+    ...tweenedSafeAreas(transProgress, clientHeight, pageState, prevPageState),
     page: {
       containerStyle: {},
-      contentStyle: {
-        paddingTop: pageState.topSafeArea + pageState.topInset,
-        paddingBottom: getKeyboardAwareBottomPadding(routeState, pageState),
-        translateY: transUnit,
-        height: pageContentHeight,
-      },
+      contentStyle: { ...pageContentStyle(routeState, pageState), translateY: transUnit },
     },
     prevPage: {
       containerStyle: {
         translateY: 0,
       },
       contentStyle: {
-        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        paddingBottom: prevPageState.bottomInset + prevPageState.bottomSafeArea,
-        height: clientHeight,
+        ...prevPageContentStyle(clientHeight, prevPageState),
         opacity: transProgress.to((progress) => 1 - progress / 2),
       },
     },
     topInset: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress.to((progress) => progress),
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: fadeIn(transProgress),
+      prevContentStyle: fadeOut(transProgress),
     },
     topLeftAction: {
-      containerStyle: {
-        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
-      },
-      contentStyle: {
-        opacity: transProgress.to((progress) => progress),
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedTopInset(transProgress, pageState, prevPageState),
+      contentStyle: fadeIn(transProgress),
+      prevContentStyle: fadeOut(transProgress),
     },
     bottomInset: {
-      containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.bottomInset, pageState.bottomInset]),
-        top: transProgress.to(
-          [0, 1],
-          [
-            clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
-          ],
-        ),
-      },
-      contentStyle: {
-        opacity: transProgress.to((progress) => progress),
-      },
-      prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+      containerStyle: tweenedBottomInset(transProgress, clientHeight, pageState, prevPageState),
+      contentStyle: fadeIn(transProgress),
+      prevContentStyle: fadeOut(transProgress),
     },
-  };
-
-  const useCsrTransition: UseCsrTransition = {
-    ...csrTranstionStyles,
     pageBind,
     pageClassName: "touch-pan-x",
-    transDirection,
-    transUnitRange,
-    transUnit,
-    transPercent,
-    transProgress,
+    transDirection: "vertical",
+    ...spring,
   };
-  return useCsrTransition;
 };
 
 export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]) => {
@@ -793,17 +599,24 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   const onBack = useRef<{ [K in TransitionType]?: () => Promise<void> }>({});
   const frameRootRef = useRef<HTMLDivElement>(null);
   const lastBroadcastSyncHref = useRef<string | null>(null);
+  const syncNavigationReset = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const { getLocation } = useLocation({ rootRouteGuide });
+  const [initialStack] = useState(() => {
+    const current = getLocation(window.location.href.replace(window.location.origin, ""));
+    return CsrStack.restore(current, getLocation) ?? { locations: [current], idx: 0 };
+  });
   const {
     history,
     setHistoryForward,
     setHistoryBack,
+    setHistoryJump,
     getNextLocation,
     getCurrentLocation,
     getPrevLocation,
     getScrollTop,
-  } = useHistory([getLocation(window.location.href.replace(window.location.origin, ""))]);
+  } = useHistory(initialStack.locations, initialStack);
+  const [isBackgrounded, setIsBackgrounded] = useState(() => document.visibilityState === "hidden");
   const [locationState, setLocationState] = useState<LocationState>({
     location: getCurrentLocation(),
     prevLocation: getPrevLocation(),
@@ -862,6 +675,34 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   const resolvedLocation = resolveLocationWithFrameState(location, resolvedPathRouteMap) ?? location;
   const resolvedPrevLocation = resolveLocationWithFrameState(prevLocation, resolvedPathRouteMap);
   const resolvedPendingLocation = resolveLocationWithFrameState(pendingLocation, resolvedPathRouteMap);
+  const stackEntries = CsrStack.entriesOf({
+    history: history.current,
+    location,
+    prevLocation,
+    pendingLocation,
+    phase,
+  }).map((entry) => ({
+    ...entry,
+    location: resolveLocationWithFrameState(entry.location, resolvedPathRouteMap) ?? entry.location,
+  }));
+  const frameDumpRef = useRef({ phase, location, prevLocation, pendingLocation, stackEntries });
+  frameDumpRef.current = { phase, location, prevLocation, pendingLocation, stackEntries };
+  useEffect(() => {
+    CsrFrameDump.watchFrame(() => {
+      const frame = frameDumpRef.current;
+      return {
+        phase: frame.phase,
+        location: frame.location.href,
+        prevLocation: frame.prevLocation?.href ?? null,
+        pendingLocation: frame.pendingLocation?.href ?? null,
+        stack: frame.stackEntries.map(({ key, location: entry, pageType }) => ({
+          key,
+          path: entry.pathRoute.path,
+          pageType,
+        })),
+      };
+    });
+  }, []);
   const platformProfile = getFramePlatformProfile();
   const accessoryHeight = resolveKeyboardAccessoryHeight(resolvedLocation.pathRoute.path, frameSlots);
   const shouldAnchorContentBottom = hasBottomAnchoredKeyboardSlot(resolvedLocation.pathRoute.path, frameSlots);
@@ -998,9 +839,18 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     window.setTimeout(() => setTransitionPageStateSnapshot(null), 360);
     await prepareForFrameTransition();
   }, []);
+  const settle = (prev: LocationState["prevLocation"]) =>
+    setLocationState({
+      location: getCurrentLocation(),
+      prevLocation: prev,
+      pendingLocation: null,
+      navigationIntent: null,
+      phase: "idle",
+    });
   const applyingSyncNavigation = useRef(false);
   const broadcastSyncNavigation = useCallback((kind: "push" | "replace" | "back" | "pop", href: string) => {
-    if (applyingSyncNavigation.current) return;
+    if (applyingSyncNavigation.current || lastBroadcastSyncHref.current === href) return;
+    lastBroadcastSyncHref.current = href;
     const syncNavigation = (
       globalThis as typeof globalThis & {
         __AKAN_DEV_SYNC_NAVIGATION__?: (href: string, kind: "push" | "replace" | "back" | "pop") => void;
@@ -1011,22 +861,23 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   const runForwardNavigation = useCallback(
     (kind: "push" | "replace", href: string, { scrollToTop }: RouteOptions = {}) => {
       const fromLocation = getCurrentLocation();
-      const toLocation = getLocation(href);
+      const target = getLocation(href);
+      
+      const toLocation =
+        kind === "replace" && target.pathRoute.path === fromLocation.pathRoute.path
+          ? { ...target, entryId: fromLocation.entryId }
+          : target;
       const scrollTop = pageContentRef.current?.scrollTop ?? 0;
       const usePendingNavigation =
-        shouldPrepareFrameTransition(href) && toLocation.pathRoute.pageState.transition !== "none";
+        CsrStack.keyOf(toLocation) !== CsrStack.keyOf(fromLocation) &&
+        shouldPrepareFrameTransition(href) &&
+        toLocation.pathRoute.pageState.transition !== "none";
 
       if (!usePendingNavigation) {
         setHistoryForward({ type: kind, location: toLocation, scrollTop, scrollToTop });
-        setLocationState({
-          location: getCurrentLocation(),
-          prevLocation: kind === "replace" ? prevLocation : fromLocation,
-          pendingLocation: null,
-          navigationIntent: null,
-          phase: "idle",
-        });
-        if (kind === "push") window.history.pushState({}, "", href);
-        else window.history.replaceState({}, "", href);
+        settle(kind === "replace" ? prevLocation : fromLocation);
+        if (kind === "push") window.history.pushState({ akanEntryId: toLocation.entryId }, "", href);
+        else window.history.replaceState({ akanEntryId: toLocation.entryId }, "", href);
         return;
       }
 
@@ -1100,8 +951,8 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
           navigationIntent: intent,
           phase: "transitioning",
         });
-        if (kind === "push") window.history.pushState({}, "", href);
-        else window.history.replaceState({}, "", href);
+        if (kind === "push") window.history.pushState({ akanEntryId: toLocation.entryId }, "", href);
+        else window.history.replaceState({ akanEntryId: toLocation.entryId }, "", href);
         debugFrame("navigation.commit", { id: intent.id, kind, to: href });
         window.setTimeout(
           () => {
@@ -1187,30 +1038,25 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   ]);
   useEffect(() => {
     debugFrame("csr.mount", { path: resolvedLocation.pathRoute.path, viewport });
+    window.history.replaceState({ ...(window.history.state ?? {}), akanEntryId: getCurrentLocation().entryId }, "");
     return () => debugFrame("csr.unmount", { lastPath: resolvedLocation.pathRoute.path });
   }, []);
   const getRouter = useCallback((): RouterInstance => {
-    const router: RouterInstance = {
-      push: (href: string, { scrollToTop }: RouteOptions = {}) => {
-        const location = getCurrentLocation();
-        debugFrame("router.push", { from: location.href, to: href, scrollToTop });
-        if (location.href === href) {
-          if (!pageContentRef.current) return;
-          pageContentRef.current.scrollTop = getScrollTop(location);
-          return;
-        }
-        runForwardNavigation("push", href, { scrollToTop });
-      },
-      replace: (href: string, { scrollToTop }: RouteOptions = {}) => {
+    const forward =
+      (kind: "push" | "replace") =>
+      (href: string, { scrollToTop }: RouteOptions = {}) => {
         const location = getCurrentLocation();
-        debugFrame("router.replace", { from: location.href, to: href, scrollToTop });
+        debugFrame(`router.${kind}`, { from: location.href, to: href, scrollToTop });
         if (location.href === href) {
           if (!pageContentRef.current) return;
           pageContentRef.current.scrollTop = getScrollTop(location);
           return;
         }
-        runForwardNavigation("replace", href, { scrollToTop });
-      },
+        runForwardNavigation(kind, href, { scrollToTop });
+      };
+    const router: RouterInstance = {
+      push: forward("push"),
+      replace: forward("replace"),
       refresh: () => {
         window.location.reload();
       },
@@ -1219,58 +1065,58 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
         if (!targetLocation) return;
         const location = getCurrentLocation();
         debugFrame("router.back", { from: location.href, to: targetLocation.href, scrollToTop });
+        
+        broadcastSyncNavigation("back", getSyncRouteHref(targetLocation));
         if (shouldPrepareFrameTransition()) await startFrameTransition();
         await onBack.current[location.pathRoute.pageState.transition]?.();
         const scrollTop = pageContentRef.current?.scrollTop ?? 0;
         setHistoryBack({ type: "back", location, scrollTop, scrollToTop });
-        setLocationState({
-          location: getCurrentLocation(),
-          prevLocation: getPrevLocation(),
-          pendingLocation: null,
-          navigationIntent: null,
-          phase: "idle",
-        });
-        broadcastSyncNavigation("back", getSyncRouteHref(targetLocation));
+        settle(getPrevLocation());
         window.history.back();
       },
     };
-    window.onpopstate = async (ev: PopStateEvent) => {
+    window.onpopstate = async (event) => {
       const href = window.location.href.replace(window.location.origin, "");
-      const routeType =
-        href === getNextLocation()?.href 
-          ? "forward"
-          : href === getPrevLocation()?.href
-            ? "back"
-            : null;
+      const entryId = (window.history.state as { akanEntryId?: string } | null)?.akanEntryId;
+      const isAt = (target: Location | null | undefined) =>
+        !!target && (entryId ? target.entryId === entryId : target.href === href);
+      const routeType = isAt(getNextLocation()) ? "forward" : isAt(getPrevLocation()) ? "back" : null;
       const scrollTop = pageContentRef.current?.scrollTop ?? 0;
+      
+      const isUaAnimated =
+        (event as PopStateEvent & { hasUAVisualTransition?: boolean }).hasUAVisualTransition === true;
       debugFrame("router.popstate", { href, routeType, scrollTop });
-      if (!routeType) return;
+      if (!routeType) {
+        const target = history.current.locations.findIndex((candidate) => isAt(candidate));
+        if (target === history.current.idx) return;
+        if (target >= 0) setHistoryJump(target, scrollTop);
+        else {
+          
+          const found = getLocation(href);
+          const current = getCurrentLocation();
+          const inPlace = found.pathRoute.path === current.pathRoute.path;
+          setHistoryForward({
+            type: "replace",
+            location: inPlace ? { ...found, entryId: current.entryId } : found,
+            scrollTop,
+          });
+        }
+        settle(getPrevLocation());
+        broadcastSyncNavigation("pop", getSyncRouteHref(getLocation(href)));
+        return;
+      }
+      broadcastSyncNavigation(routeType === "back" ? "back" : "pop", getSyncRouteHref(getLocation(href)));
       if (routeType === "forward") {
         if (shouldPrepareFrameTransition(href)) await startFrameTransition();
         const location = getCurrentLocation();
         setHistoryForward({ type: "popForward", location, scrollTop });
-        setLocationState({
-          location: getCurrentLocation(),
-          prevLocation: location,
-          pendingLocation: null,
-          navigationIntent: null,
-          phase: "idle",
-        });
-        broadcastSyncNavigation("pop", getSyncRouteHref(getLocation(href)));
+        settle(location);
       } else {
-        
         const location = getCurrentLocation();
         if (shouldPrepareFrameTransition(href)) await startFrameTransition();
-        await onBack.current[location.pathRoute.pageState.transition]?.();
+        if (!isUaAnimated) await onBack.current[location.pathRoute.pageState.transition]?.();
         setHistoryBack({ type: "popBack", location, scrollTop });
-        setLocationState({
-          location: getCurrentLocation(),
-          prevLocation: getPrevLocation(),
-          pendingLocation: null,
-          navigationIntent: null,
-          phase: "idle",
-        });
-        broadcastSyncNavigation("pop", getSyncRouteHref(getLocation(href)));
+        settle(getPrevLocation());
       }
     };
     return router;
@@ -1278,13 +1124,14 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   const router = getRouter();
   useEffect(() => {
     const syncHref = getSyncRouteHref(resolvedLocation);
-    if (lastBroadcastSyncHref.current === null) {
+    if (
+      lastBroadcastSyncHref.current === null ||
+      applyingSyncNavigation.current ||
+      globalThis.__AKAN_DEV_SYNC_NAVIGATION_APPLYING__
+    ) {
       lastBroadcastSyncHref.current = syncHref;
       return;
     }
-    if (lastBroadcastSyncHref.current === syncHref) return;
-    lastBroadcastSyncHref.current = syncHref;
-    if (applyingSyncNavigation.current || globalThis.__AKAN_DEV_SYNC_NAVIGATION_APPLYING__) return;
     broadcastSyncNavigation(
       history.current.type === "back" ? "back" : history.current.type === "forward" ? "push" : "pop",
       syncHref,
@@ -1297,8 +1144,10 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     history,
   ]);
   useEffect(() => {
+    
     const resetSyncNavigation = () => {
-      window.setTimeout(() => {
+      if (syncNavigationReset.current) clearTimeout(syncNavigationReset.current);
+      syncNavigationReset.current = setTimeout(() => {
         applyingSyncNavigation.current = false;
         globalThis.__AKAN_DEV_SYNC_NAVIGATION_APPLYING__ = false;
       }, 1000);
@@ -1309,10 +1158,15 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
       if (!href) return;
       const target = new URL(href, window.location.origin);
       const targetHref = `${target.pathname}${target.search}${target.hash}`;
-      if (targetHref === getSyncRouteHref(getCurrentLocation())) return;
+      
+      if (targetHref === getSyncRouteHref(getCurrentLocation()) || targetHref === lastBroadcastSyncHref.current) return;
       applyingSyncNavigation.current = true;
       globalThis.__AKAN_DEV_SYNC_NAVIGATION_APPLYING__ = true;
-      if (kind === "replace" || kind === "back" || kind === "pop")
+      const previous = getPrevLocation();
+      
+      if (kind !== "push" && kind !== "replace" && previous && getSyncRouteHref(previous) === targetHref)
+        clientRouter.back({ scrollToTop: false });
+      else if (kind === "replace" || kind === "back" || kind === "pop")
         clientRouter.replace(targetHref, { scrollToTop: false });
       else clientRouter.push(targetHref, { scrollToTop: false });
       resetSyncNavigation();
@@ -1326,8 +1180,10 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     location: resolvedLocation,
     prevLocation: resolvedPrevLocation,
     pendingLocation: resolvedPendingLocation,
+    stackEntries,
     navigationIntent,
     phase,
+    isBackgrounded,
     history,
     topSafeAreaRef,
     bottomSafeAreaRef,
@@ -1361,7 +1217,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     bottomUp: useBottomUpTransition,
     scaleOut: useScaleOutTransition,
   };
-
+  
   const contentResizeStyle = useMemo(() => {
     if (!shouldAnchorContentBottom || !keyboardFrame.sticky) return null;
     const duration = keyboardFrame.animationDuration ?? 420;
@@ -1376,14 +1232,13 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     contentResizeStyle && csrTransition.page
       ? { ...csrTransition.page, contentStyle: { ...csrTransition.page.contentStyle, ...contentResizeStyle } }
       : csrTransition.page;
+  const nativeNavigation = useRef<NativeNavigation | null>(null);
   const nativeBackStateRef = useRef({
     path: resolvedLocation.pathRoute.path,
     keyboardHeight: keyboardFrame.height,
     keyboardVisible: keyboardFrame.visible,
     router,
   });
-  const handledDeepLinkRef = useRef<{ href: string; handledAt: number; resetStack: boolean } | null>(null);
-  const didResetDeepLinkStackRef = useRef(false);
 
   useEffect(() => {
     if (pageContentRef.current) pageContentRef.current.scrollTop = getScrollTop(location);
@@ -1391,6 +1246,21 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
       prevPageContentRef.current.scrollTop = prevLocation ? getScrollTop(prevLocation) : 0;
   }, [location.href]);
 
+  useEffect(() => {
+    for (const shown of [location, prevLocation]) if (shown?.entryId) history.current.dormant?.delete(shown.entryId);
+    CsrStack.save(history.current);
+  }, [location, prevLocation]);
+
+  useEffect(() => {
+    const sync = () => setIsBackgrounded(document.visibilityState === "hidden");
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+
+  useEffect(() => {
+    nativeNavigation.current?.showPushesExcept(location.pathname);
+  }, [location.pathname]);
+
   useEffect(() => {
     nativeBackStateRef.current = {
       path: resolvedLocation.pathRoute.path,
@@ -1398,126 +1268,50 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
       keyboardVisible: keyboardFrame.visible,
       router,
     };
+    nativeNavigation.current?.syncBack();
   }, [keyboardFrame.height, keyboardFrame.visible, resolvedLocation.pathRoute.path, router]);
 
-  useEffect(() => {
-    const isMobileTarget = Boolean(window.__AKAN_MOBILE_TARGET__);
-    if (Device.getDevice().info.platform === "web" && !isMobileTarget) return;
-    let removeListener: (() => void) | undefined;
-    let disposed = false;
-    const mountedAt = Date.now();
-
-    const enterDeepLinkWhenReady = (href: string, resetStack: boolean, attempt = 0) => {
-      if (!clientRouter.isInitialized) {
-        if (attempt < 40) window.setTimeout(() => enterDeepLinkWhenReady(href, resetStack, attempt + 1), 50);
-        else debugFrame("native.deepLink.skipped", { href, reason: "router-not-ready" });
-        return;
-      }
-      clientRouter.enterDeepLink(href, { resetStack, scrollToTop: true });
-    };
-
-    const handleDeepLink = (url: string | null | undefined, resetStack: boolean) => {
-      if (!url) return;
-      const href = normalizeDeepLinkHref(url);
-      const now = Date.now();
-      const lastHandled = handledDeepLinkRef.current;
-      const shouldResetStack = resetStack || (!lastHandled && now - mountedAt < 5000);
-      if (
-        lastHandled?.href === href &&
-        now - lastHandled.handledAt < 1000 &&
-        (!shouldResetStack || lastHandled.resetStack)
-      )
-        return;
-      handledDeepLinkRef.current = { href, handledAt: now, resetStack: shouldResetStack };
-      debugFrame("native.deepLink", {
-        href,
-        resetStack: shouldResetStack,
-        sourceResetStack: resetStack,
-        historyIdx: history.current.idx,
-        mountedForMs: now - mountedAt,
-        routerReady: clientRouter.isInitialized,
-      });
-      if (shouldResetStack) didResetDeepLinkStackRef.current = true;
-      enterDeepLinkWhenReady(href, shouldResetStack);
-    };
-
-    void loadCapacitorApp()
-      .then(({ App }) => {
-        debugFrame("native.deepLink.listener", { platform: Device.getDevice().info.platform, isMobileTarget });
-        const listener = App.addListener("appUrlOpen", (event: unknown) => {
-          handleDeepLink((event as { url?: string | null } | undefined)?.url, false);
-        });
-
-        void Promise.resolve(listener).then((handle) => {
-          const remove =
-            typeof (handle as { remove?: unknown } | undefined)?.remove === "function"
-              ? () => void (handle as { remove: () => Promise<void> | void }).remove()
-              : undefined;
-          if (disposed) remove?.();
-          else removeListener = remove;
-        });
-
-        void App.getLaunchUrl?.()
-          .then((launch) => {
-            debugFrame("native.deepLink.launchUrl", { url: launch?.url ?? null });
-            handleDeepLink(launch?.url, true);
-          })
-          .catch((error) => debugFrame("native.deepLink.launchUrlError", { error: String(error) }));
-      })
-      .catch((error) => debugFrame("native.deepLink.listenerError", { error: String(error) }));
-
-    return () => {
-      disposed = true;
-      removeListener?.();
-    };
+  const backFollow = useRef(csrTransition);
+  backFollow.current = csrTransition;
+  const followBack = useCallback(({ phase, progress }: NativeBackProgress) => {
+    const { transUnit, transUnitRange } = backFollow.current;
+    const transition = getCurrentLocation().pathRoute.pageState.transition;
+    if (transition === "none" || history.current.idx === 0 || nativeBackStateRef.current.keyboardVisible) return;
+    const [hidden, shown] = transUnitRange;
+    if (phase === "cancelled") {
+      void transUnit.start(shown);
+      return;
+    }
+    
+    const follow = transition === "stack" || transition === "bottomUp" ? progress : progress / 2;
+    void transUnit.start(shown + (hidden - shown) * follow, { immediate: true });
+  }, []);
+  const [, setReleased] = useState(0);
+  const latestStackEntries = useRef(stackEntries);
+  latestStackEntries.current = stackEntries;
+  const releaseHidden = useCallback(() => {
+    history.current.dormant ??= new Set();
+    for (const { pageType, location: hidden } of latestStackEntries.current)
+      if (pageType === "cached" && hidden.entryId) history.current.dormant.add(hidden.entryId);
+    setReleased((count) => count + 1);
   }, []);
 
   useEffect(() => {
-    if (Device.getDevice().info.platform === "web") return;
-    let removeListener: (() => void) | undefined;
-    let disposed = false;
-
-    void loadCapacitorApp().then(({ App }) => {
-      const listener = App.addListener("backButton", () => {
-        const nativeBackState = nativeBackStateRef.current;
-        debugFrame("native.backButton", {
-          historyIdx: history.current.idx,
-          path: nativeBackState.path,
-          keyboardHeight: nativeBackState.keyboardHeight,
-        });
-        if (nativeBackState.keyboardVisible) {
-          void prepareForFrameTransition();
-          return;
-        }
-        if (history.current.idx > 0) {
-          nativeBackState.router.back();
-          return;
-        }
-        const fallbackPath = window.__AKAN_MOBILE_TARGET__?.indexPath ?? "/";
-        if (didResetDeepLinkStackRef.current) {
-          void App.exitApp?.();
-          return;
-        }
-        if (nativeBackState.path !== fallbackPath) {
-          clientRouter.backOrFallback(fallbackPath, { scrollToTop: false });
-          return;
-        }
-        void App.exitApp?.();
-      });
-
-      void Promise.resolve(listener).then((handle) => {
-        const remove =
-          typeof (handle as { remove?: unknown } | undefined)?.remove === "function"
-            ? () => void (handle as { remove: () => Promise<void> | void }).remove()
-            : undefined;
-        if (disposed) remove?.();
-        else removeListener = remove;
-      });
+    const navigation = new NativeNavigation({
+      historyIdx: () => history.current.idx,
+      backState: () => nativeBackStateRef.current,
+      dismissKeyboard: prepareForFrameTransition,
+      onBackProgress: followBack,
+      onMemoryWarning: releaseHidden,
     });
-
+    nativeNavigation.current = navigation;
+    const stop = navigation.listen();
+    navigation.showPushesExcept(getCurrentLocation().pathname);
+    const stopUpdates = new NativeUpdates().listen();
     return () => {
-      disposed = true;
-      removeListener?.();
+      stop();
+      stopUpdates();
+      nativeNavigation.current = null;
     };
   }, []);