@akanjs/next 0.0.52 → 0.0.54

package/{useCsrValues.ts → useCsrValues.js}

@@ -1,27 +1,16 @@
 "use client";
 import {
-  type CsrContextType,
-  type CsrTransitionStyles,
   defaultPageState,
   device,
-  LocationState,
-  PathRoute,
-  type RouteGuide,
-  router,
-  type RouterInstance,
-  type RouteState,
-  type TransitionType,
-  type UseCsrTransition,
+  router
 } from "@akanjs/client";
 import { App } from "@capacitor/app";
 import { useSpringValue } from "@react-spring/web";
 import { useDrag } from "@use-gesture/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
 import { useHistory } from "./useHistory";
 import { useLocation } from "./useLocation";
-
-const useNoneTrans = ({ clientHeight, location, prevLocation }: RouteState): UseCsrTransition => {
+const useNoneTrans = ({ clientHeight, location, prevLocation }) => {
   const transDirection = "none";
   const transUnit = useSpringValue(0, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [0, 0], []);
@@ -29,59 +18,58 @@ const useNoneTrans = ({ clientHeight, location, prevLocation }: RouteState): Use
   const transPercent = transUnit.to((unit) => 100);
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
-  const csrTranstionStyles: CsrTransitionStyles = {
+  const csrTranstionStyles = {
     topSafeArea: {
       containerStyle: {
-        height: pageState.topSafeArea,
-      },
+        height: pageState.topSafeArea
+      }
     },
     bottomSafeArea: {
       containerStyle: {
         top: clientHeight - pageState.bottomSafeArea,
-        height: pageState.bottomSafeArea,
-      },
+        height: pageState.bottomSafeArea
+      }
     },
     page: {
       containerStyle: {},
       contentStyle: {
         paddingTop: pageState.topSafeArea + pageState.topInset,
         paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
-        height: clientHeight,
-      },
+        height: clientHeight
+      }
     },
     prevPage: {
       containerStyle: {
-        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset
       },
-      contentStyle: { opacity: 0 },
+      contentStyle: { opacity: 0 }
     },
     topInset: {
       containerStyle: {
         top: pageState.topSafeArea,
-        height: pageState.topInset,
+        height: pageState.topInset
       },
       contentStyle: { opacity: 1 },
-      prevContentStyle: { opacity: 0 },
+      prevContentStyle: { opacity: 0 }
     },
     topLeftAction: {
       containerStyle: {
         top: pageState.topSafeArea,
-        height: pageState.topInset,
+        height: pageState.topInset
       },
       contentStyle: { opacity: 1 },
-      prevContentStyle: { opacity: 0 },
+      prevContentStyle: { opacity: 0 }
     },
     bottomInset: {
       containerStyle: {
         height: pageState.bottomInset,
-        top: clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+        top: clientHeight - pageState.bottomInset - pageState.bottomSafeArea
       },
       contentStyle: { opacity: 1 },
-      prevContentStyle: { opacity: 0 },
-    },
+      prevContentStyle: { opacity: 0 }
+    }
   };
-
-  const useCsrTransition: UseCsrTransition = {
+  const useCsrTransition = {
     ...csrTranstionStyles,
     pageBind: () => ({}),
     pageClassName: "touch-pan-y",
@@ -89,12 +77,11 @@ const useNoneTrans = ({ clientHeight, location, prevLocation }: RouteState): Use
     transUnitRange,
     transUnit,
     transPercent,
-    transProgress,
+    transProgress
   };
   return useCsrTransition;
 };
-
-const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }: RouteState): UseCsrTransition => {
+const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }) => {
   const transDirection = "none";
   const transUnit = useSpringValue(1, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [0, 1], []);
@@ -102,7 +89,6 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
   const transPercent = transUnit.to([0, 1], [0, 100], "clamp");
   const pageState = location.pathRoute.pageState;
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
-
   useEffect(() => {
     onBack.current.fade = async () => {
       await transUnit.start(transUnitRange[0]);
@@ -117,12 +103,11 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
       return;
     }
   }, [location.pathname]);
-
-  const csrTranstionStyles: CsrTransitionStyles = {
+  const csrTranstionStyles = {
     topSafeArea: {
       containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea])
+      }
     },
     bottomSafeArea: {
       containerStyle: {
@@ -130,8 +115,8 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
           [0, 1],
           [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea]
         ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea])
+      }
     },
     page: {
       containerStyle: {},
@@ -139,39 +124,39 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
         paddingTop: pageState.topSafeArea + pageState.topInset,
         paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
         opacity: transUnit,
-        height: clientHeight,
-      },
+        height: clientHeight
+      }
     },
     prevPage: {
       containerStyle: {
         paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        opacity: transProgress.to((progress) => 1 - progress),
+        opacity: transProgress.to((progress) => 1 - progress)
       },
-      contentStyle: {},
+      contentStyle: {}
     },
     topInset: {
       containerStyle: {
         top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
-        opacity: transProgress,
+        opacity: transProgress
       },
       prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
     },
     topLeftAction: {
       containerStyle: {
         top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
     },
     bottomInset: {
       containerStyle: {
@@ -180,22 +165,21 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
           [0, 1],
           [
             clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+            clientHeight - pageState.bottomInset - pageState.bottomSafeArea
           ]
-        ),
+        )
       },
       contentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
-    },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
   };
-
-  const useCsrTransition: UseCsrTransition = {
+  const useCsrTransition = {
     ...csrTranstionStyles,
     pageBind: () => ({}),
     pageClassName: "",
@@ -203,19 +187,18 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
     transUnitRange,
     transUnit,
     transPercent,
-    transProgress,
+    transProgress
   };
   return useCsrTransition;
 };
-
 const useStackTrans = ({
   clientWidth,
   clientHeight,
   location,
   prevLocation,
   history,
-  onBack,
-}: RouteState): UseCsrTransition => {
+  onBack
+}) => {
   const transDirection = "horizontal";
   const transUnit = useSpringValue(0, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [clientWidth, 0], []);
@@ -242,28 +225,32 @@ const useStackTrans = ({
       return;
     }
   }, [location.pathname]);
-
   const pageBind = useDrag(
     ({ first, down, last, movement: [mx], initial: [ix], cancel }) => {
-      if (first) void device.hideKeyboard();
+      if (first)
+        void device.hideKeyboard();
       if (ix > initThreshold) {
         cancel();
         return;
       }
-      if (mx < transUnitRange[1]) void transUnit.start(transUnitRange[1], { immediate: true });
-      else if (mx > transUnitRange[0]) void transUnit.start(transUnitRange[0], { immediate: true });
-      else if (!last) void transUnit.start(mx, { immediate: true });
-      else if (mx < threshold) void transUnit.start(transUnitRange[1]);
-      if (last && mx > threshold) router.back();
+      if (mx < transUnitRange[1])
+        void transUnit.start(transUnitRange[1], { immediate: true });
+      else if (mx > transUnitRange[0])
+        void transUnit.start(transUnitRange[0], { immediate: true });
+      else if (!last)
+        void transUnit.start(mx, { immediate: true });
+      else if (mx < threshold)
+        void transUnit.start(transUnitRange[1]);
+      if (last && mx > threshold)
+        router.back();
     },
     { axis: "x", filterTaps: true }
   );
-
-  const csrTranstionStyles: CsrTransitionStyles = {
+  const csrTranstionStyles = {
     topSafeArea: {
       containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea])
+      }
     },
     bottomSafeArea: {
       containerStyle: {
@@ -271,8 +258,8 @@ const useStackTrans = ({
           [0, 1],
           [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea]
         ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea])
+      }
     },
     page: {
       containerStyle: {},
@@ -280,44 +267,44 @@ const useStackTrans = ({
         paddingTop: pageState.topSafeArea + pageState.topInset,
         paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
         translateX: transUnit,
-        height: clientHeight,
-      },
+        height: clientHeight
+      }
     },
     prevPage: {
       containerStyle: {
         paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        translateX: transUnit.to((unit) => (unit - clientWidth) / 5),
+        translateX: transUnit.to((unit) => (unit - clientWidth) / 5)
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress / 2),
-      },
+        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]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
         opacity: transProgress.to((progress) => progress),
-        translateX: transProgress.to([0, 1], [clientWidth / 5, 0]),
+        translateX: transProgress.to([0, 1], [clientWidth / 5, 0])
       },
       prevContentStyle: {
         opacity: transProgress.to((progress) => 1 - progress),
-        translateX: transProgress.to([0, 1], [0, -clientWidth / 5]),
-      },
+        translateX: transProgress.to([0, 1], [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]),
+        minWidth: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
     },
     bottomInset: {
       containerStyle: {
@@ -326,22 +313,21 @@ const useStackTrans = ({
           [0, 1],
           [
             clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+            clientHeight - pageState.bottomInset - pageState.bottomSafeArea
           ]
-        ),
+        )
       },
       contentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
-    },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
   };
-
-  const useCsrTransition: UseCsrTransition = {
+  const useCsrTransition = {
     ...csrTranstionStyles,
     pageBind,
     pageClassName,
@@ -349,19 +335,18 @@ const useStackTrans = ({
     transUnitRange,
     transUnit,
     transPercent,
-    transProgress,
+    transProgress
   };
   return useCsrTransition;
 };
-
 const useBottomUpTrans = ({
   clientWidth,
   clientHeight,
   history,
   location,
   prevLocation,
-  onBack,
-}: RouteState): UseCsrTransition => {
+  onBack
+}) => {
   const transDirection = "vertical";
   const transUnit = useSpringValue(0, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [clientHeight, 0], []);
@@ -387,28 +372,32 @@ const useBottomUpTrans = ({
       return;
     }
   }, [location.pathname]);
-
   const pageBind = useDrag(
     ({ first, last, movement: [, my], initial: [, iy], cancel }) => {
-      if (first) void device.hideKeyboard();
+      if (first)
+        void device.hideKeyboard();
       if (iy > initThreshold) {
         cancel();
         return;
       }
-      if (my < transUnitRange[1]) void transUnit.start(transUnitRange[1], { immediate: true });
-      else if (my > transUnitRange[0]) void transUnit.start(transUnitRange[0], { immediate: true });
-      else if (!last) void transUnit.start(my, { immediate: true });
-      else if (my < threshold) void transUnit.start(transUnitRange[1]);
-      if (last && my > threshold) router.back();
+      if (my < transUnitRange[1])
+        void transUnit.start(transUnitRange[1], { immediate: true });
+      else if (my > transUnitRange[0])
+        void transUnit.start(transUnitRange[0], { immediate: true });
+      else if (!last)
+        void transUnit.start(my, { immediate: true });
+      else if (my < threshold)
+        void transUnit.start(transUnitRange[1]);
+      if (last && my > threshold)
+        router.back();
     },
     { axis: "y", filterTaps: true, threshold: 10 }
   );
-
-  const csrTranstionStyles: CsrTransitionStyles = {
+  const csrTranstionStyles = {
     topSafeArea: {
       containerStyle: {
-        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea])
+      }
     },
     bottomSafeArea: {
       containerStyle: {
@@ -416,8 +405,8 @@ const useBottomUpTrans = ({
           [0, 1],
           [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea]
         ),
-        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
-      },
+        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea])
+      }
     },
     page: {
       containerStyle: {},
@@ -425,43 +414,43 @@ const useBottomUpTrans = ({
         paddingTop: pageState.topSafeArea + pageState.topInset,
         paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
         translateY: transUnit,
-        height: clientHeight,
-      },
+        height: clientHeight
+      }
     },
     prevPage: {
       containerStyle: {
         paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
-        translateY: 0,
+        translateY: 0
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress / 2),
-      },
+        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]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
         // translateX: transProgress.to([0, 1], [clientWidth / 5, 0]),
       },
       prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
+        opacity: transProgress.to((progress) => 1 - progress)
         // translateX: transProgress.to([0, 1], [0, -clientWidth / 5]),
-      },
+      }
     },
     topLeftAction: {
       containerStyle: {
         top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
-        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset])
       },
       contentStyle: {
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
     },
     bottomInset: {
       containerStyle: {
@@ -470,22 +459,21 @@ const useBottomUpTrans = ({
           [0, 1],
           [
             clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
-            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+            clientHeight - pageState.bottomInset - pageState.bottomSafeArea
           ]
-        ),
+        )
       },
       contentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => progress),
+        opacity: transProgress.to((progress) => progress)
       },
       prevContentStyle: {
         top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
-        opacity: transProgress.to((progress) => 1 - progress),
-      },
-    },
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
   };
-
-  const useCsrTransition: UseCsrTransition = {
+  const useCsrTransition = {
     ...csrTranstionStyles,
     pageBind,
     pageClassName: "touch-pan-x",
@@ -493,39 +481,37 @@ const useBottomUpTrans = ({
     transUnitRange,
     transUnit,
     transPercent,
-    transProgress,
+    transProgress
   };
   return useCsrTransition;
 };
-
-export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]) => {
+const useCsrValues = (rootRouteGuide, pathRoutes) => {
   const clientWidth = useRef(window.innerWidth);
   const clientHeight = useRef(window.innerHeight);
-  const topSafeAreaRef = useRef<HTMLDivElement>(null);
-  const bottomSafeAreaRef = useRef<HTMLDivElement>(null);
-  const pageContentRef = useRef<HTMLDivElement>(null);
-  const prevPageContentRef = useRef<HTMLDivElement>(null);
-  const onBack = useRef<{ [K in TransitionType]?: () => Promise<void> }>({});
-  const frameRootRef = useRef<HTMLDivElement>(null);
-
+  const topSafeAreaRef = useRef(null);
+  const bottomSafeAreaRef = useRef(null);
+  const pageContentRef = useRef(null);
+  const prevPageContentRef = useRef(null);
+  const onBack = useRef({});
+  const frameRootRef = useRef(null);
   const { getLocation } = useLocation({ rootRouteGuide });
   const { history, setHistoryForward, setHistoryBack, getCurrentLocation, getPrevLocation, getScrollTop } = useHistory([
-    getLocation(window.location.pathname),
+    getLocation(window.location.pathname)
   ]);
-  const [{ location, prevLocation }, setLocationState] = useState<LocationState>({
+  const [{ location, prevLocation }, setLocationState] = useState({
     location: getCurrentLocation(),
-    prevLocation: getPrevLocation(),
+    prevLocation: getPrevLocation()
   });
-  const getRouter = useCallback((): RouterInstance => {
-    const router = {
-      push: (href: string) => {
-        const location = getCurrentLocation();
+  const getRouter = useCallback(() => {
+    const router3 = {
+      push: (href) => {
+        const location2 = getCurrentLocation();
         const scrollTop = pageContentRef.current?.scrollTop ?? 0;
         setHistoryForward({ type: "push", location: getLocation(href), scrollTop });
-        setLocationState({ location: getCurrentLocation(), prevLocation: location });
+        setLocationState({ location: getCurrentLocation(), prevLocation: location2 });
         window.history.pushState({}, "", href);
       },
-      replace: (href: string) => {
+      replace: (href) => {
         const scrollTop = pageContentRef.current?.scrollTop ?? 0;
         setHistoryForward({ type: "replace", location: getLocation(href), scrollTop });
         setLocationState({ location: getCurrentLocation(), prevLocation });
@@ -535,39 +521,34 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
         window.location.reload();
       },
       back: async () => {
-        const location = getCurrentLocation();
-        await onBack.current[location.pathRoute.pageState.transition]?.();
+        const location2 = getCurrentLocation();
+        await onBack.current[location2.pathRoute.pageState.transition]?.();
         const scrollTop = pageContentRef.current?.scrollTop ?? 0;
-        setHistoryBack({ type: "back", location, scrollTop });
+        setHistoryBack({ type: "back", location: location2, scrollTop });
         setLocationState({ location: getCurrentLocation(), prevLocation: getPrevLocation() });
         window.history.back();
-      },
+      }
     };
-    window.onpopstate = async (ev: PopStateEvent) => {
-      const routeType =
-        window.location.pathname === getCurrentLocation().pathname && history.current.type !== "back"
-          ? "forward"
-          : window.location.pathname === getPrevLocation()?.pathname
-            ? "back"
-            : null;
+    window.onpopstate = async (ev) => {
+      const routeType = window.location.pathname === getCurrentLocation().pathname && history.current.type !== "back" ? "forward" : window.location.pathname === getPrevLocation()?.pathname ? "back" : null;
       const scrollTop = pageContentRef.current?.scrollTop ?? 0;
-      if (!routeType) return;
+      if (!routeType)
+        return;
       if (routeType === "forward") {
-        const location = getCurrentLocation();
-        setHistoryForward({ type: "popForward", location, scrollTop });
-        setLocationState({ location: getCurrentLocation(), prevLocation: location });
+        const location2 = getCurrentLocation();
+        setHistoryForward({ type: "popForward", location: location2, scrollTop });
+        setLocationState({ location: getCurrentLocation(), prevLocation: location2 });
       } else {
-        // back
-        const location = getCurrentLocation();
-        await onBack.current[location.pathRoute.pageState.transition]?.();
-        setHistoryBack({ type: "popBack", location, scrollTop });
+        const location2 = getCurrentLocation();
+        await onBack.current[location2.pathRoute.pageState.transition]?.();
+        setHistoryBack({ type: "popBack", location: location2, scrollTop });
         setLocationState({ location: getCurrentLocation(), prevLocation: getPrevLocation() });
       }
     };
-    return router;
+    return router3;
   }, [location]);
-  const router = getRouter();
-  const routeState: RouteState = {
+  const router2 = getRouter();
+  const routeState = {
     clientWidth: clientWidth.current,
     clientHeight: clientHeight.current,
     location,
@@ -579,35 +560,37 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     pageContentRef,
     frameRootRef,
     onBack,
-    router,
-    pathRoutes,
+    router: router2,
+    pathRoutes
   };
   const useNonTransition = useNoneTrans(routeState);
   const useFadeTransition = useFadeTrans(routeState);
   const useStackTransition = useStackTrans(routeState);
   const useBottomUpTransition = useBottomUpTrans(routeState);
-  const useCsrTransitionMap: { [key in TransitionType]: UseCsrTransition } = {
+  const useCsrTransitionMap = {
     none: useNonTransition,
     fade: useFadeTransition,
     stack: useStackTransition,
     bottomUp: useBottomUpTransition,
-    scaleOut: useNonTransition,
+    scaleOut: useNonTransition
   };
-
   useEffect(() => {
-    if (pageContentRef.current) pageContentRef.current.scrollTop = getScrollTop(location.pathname);
+    if (pageContentRef.current)
+      pageContentRef.current.scrollTop = getScrollTop(location.pathname);
     if (prevPageContentRef.current)
       prevPageContentRef.current.scrollTop = prevLocation ? getScrollTop(prevLocation.pathname) : 0;
     void App.addListener("backButton", () => {
-      router.back();
+      router2.back();
     });
     return () => {
       void App.removeAllListeners();
     };
   }, [location.pathname]);
-
   return {
     ...routeState,
-    ...useCsrTransitionMap[location.pathRoute.pageState.transition],
-  } satisfies CsrContextType;
+    ...useCsrTransitionMap[location.pathRoute.pageState.transition]
+  };
+};
+export {
+  useCsrValues
 };