@akanjs/next 0.0.39 → 0.0.40

package/src/useCsrValues.js

@@ -0,0 +1,924 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useCsrValues_exports = {};
+__export(useCsrValues_exports, {
+  useCsrValues: () => useCsrValues
+});
+module.exports = __toCommonJS(useCsrValues_exports);
+var import_client = require("@akanjs/client");
+var import_app = require("@capacitor/app");
+var import_web = require("@react-spring/web");
+var import_react = require("@use-gesture/react");
+var import_react2 = require("react");
+var import_useHistory = require("./useHistory");
+var import_useLocation = require("./useLocation");
+const useNoneTrans = /* @__PURE__ */ __name(({ clientHeight, location, prevLocation }) => {
+  const transDirection = "none";
+  const transUnit = (0, import_web.useSpringValue)(0, {
+    config: {
+      clamp: true
+    }
+  });
+  const transUnitRange = (0, import_react2.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 ?? import_client.defaultPageState;
+  const csrTranstionStyles = {
+    topSafeArea: {
+      containerStyle: {
+        height: pageState.topSafeArea
+      }
+    },
+    bottomSafeArea: {
+      containerStyle: {
+        top: clientHeight - pageState.bottomSafeArea,
+        height: pageState.bottomSafeArea
+      }
+    },
+    page: {
+      containerStyle: {},
+      contentStyle: {
+        paddingTop: pageState.topSafeArea + pageState.topInset,
+        paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
+        height: clientHeight
+      }
+    },
+    prevPage: {
+      containerStyle: {
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset
+      },
+      contentStyle: {
+        opacity: 0
+      }
+    },
+    topInset: {
+      containerStyle: {
+        top: pageState.topSafeArea,
+        height: pageState.topInset
+      },
+      contentStyle: {
+        opacity: 1
+      },
+      prevContentStyle: {
+        opacity: 0
+      }
+    },
+    topLeftAction: {
+      containerStyle: {
+        top: pageState.topSafeArea,
+        height: pageState.topInset
+      },
+      contentStyle: {
+        opacity: 1
+      },
+      prevContentStyle: {
+        opacity: 0
+      }
+    },
+    bottomInset: {
+      containerStyle: {
+        height: pageState.bottomInset,
+        top: clientHeight - pageState.bottomInset - pageState.bottomSafeArea
+      },
+      contentStyle: {
+        opacity: 1
+      },
+      prevContentStyle: {
+        opacity: 0
+      }
+    }
+  };
+  const useCsrTransition = {
+    ...csrTranstionStyles,
+    pageBind: /* @__PURE__ */ __name(() => ({}), "pageBind"),
+    pageClassName: "touch-pan-y",
+    transDirection,
+    transUnitRange,
+    transUnit,
+    transPercent,
+    transProgress
+  };
+  return useCsrTransition;
+}, "useNoneTrans");
+const useFadeTrans = /* @__PURE__ */ __name(({ clientHeight, location, prevLocation, onBack, history }) => {
+  const transDirection = "none";
+  const transUnit = (0, import_web.useSpringValue)(1, {
+    config: {
+      clamp: true
+    }
+  });
+  const transUnitRange = (0, import_react2.useMemo)(() => [
+    0,
+    1
+  ], []);
+  const transProgress = transUnit.to((unit) => unit);
+  const transPercent = transUnit.to([
+    0,
+    1
+  ], [
+    0,
+    100
+  ], "clamp");
+  const pageState = location.pathRoute.pageState;
+  const prevPageState = prevLocation?.pathRoute.pageState ?? import_client.defaultPageState;
+  (0, import_react2.useEffect)(() => {
+    onBack.current.fade = async () => {
+      await transUnit.start(transUnitRange[0]);
+    };
+  }, []);
+  (0, import_react2.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
+  ]);
+  const csrTranstionStyles = {
+    topSafeArea: {
+      containerStyle: {
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.topSafeArea,
+          pageState.topSafeArea
+        ])
+      }
+    },
+    bottomSafeArea: {
+      containerStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          clientHeight - prevPageState.bottomSafeArea,
+          clientHeight - pageState.bottomSafeArea
+        ]),
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.bottomSafeArea,
+          pageState.bottomSafeArea
+        ])
+      }
+    },
+    page: {
+      containerStyle: {},
+      contentStyle: {
+        paddingTop: pageState.topSafeArea + pageState.topInset,
+        paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
+        opacity: transUnit,
+        height: clientHeight
+      }
+    },
+    prevPage: {
+      containerStyle: {
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+        opacity: transProgress.to((progress) => 1 - progress)
+      },
+      contentStyle: {}
+    },
+    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)
+      }
+    },
+    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)
+      }
+    },
+    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: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => progress)
+      },
+      prevContentStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
+  };
+  const useCsrTransition = {
+    ...csrTranstionStyles,
+    pageBind: /* @__PURE__ */ __name(() => ({}), "pageBind"),
+    pageClassName: "",
+    transDirection,
+    transUnitRange,
+    transUnit,
+    transPercent,
+    transProgress
+  };
+  return useCsrTransition;
+}, "useFadeTrans");
+const useStackTrans = /* @__PURE__ */ __name(({ clientWidth, clientHeight, location, prevLocation, history, onBack }) => {
+  const transDirection = "horizontal";
+  const transUnit = (0, import_web.useSpringValue)(0, {
+    config: {
+      clamp: true
+    }
+  });
+  const transUnitRange = (0, import_react2.useMemo)(() => [
+    clientWidth,
+    0
+  ], []);
+  const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
+  const transUnitRangeReversed = (0, import_react2.useMemo)(() => [
+    0,
+    clientWidth
+  ], []);
+  const transProgress = transUnitReversed.to(transUnitRangeReversed, [
+    0,
+    1
+  ], "clamp");
+  const transPercent = transUnitReversed.to(transUnitRangeReversed, [
+    0,
+    100
+  ], "clamp");
+  const initThreshold = (0, import_react2.useMemo)(() => Math.floor(clientWidth), []);
+  const threshold = (0, import_react2.useMemo)(() => Math.floor(clientWidth / 3), []);
+  const pageState = location.pathRoute.pageState;
+  const prevPageState = prevLocation?.pathRoute.pageState ?? import_client.defaultPageState;
+  const pageClassName = "touch-pan-y";
+  (0, import_react2.useEffect)(() => {
+    onBack.current.stack = async () => {
+      await transUnit.start(transUnitRange[0]);
+    };
+  }, []);
+  (0, import_react2.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
+  ]);
+  const pageBind = (0, import_react.useDrag)(({ first, down, last, movement: [mx], initial: [ix], cancel }) => {
+    if (first) void import_client.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) import_client.router.back();
+  }, {
+    axis: "x",
+    filterTaps: true
+  });
+  const csrTranstionStyles = {
+    topSafeArea: {
+      containerStyle: {
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.topSafeArea,
+          pageState.topSafeArea
+        ])
+      }
+    },
+    bottomSafeArea: {
+      containerStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          clientHeight - prevPageState.bottomSafeArea,
+          clientHeight - pageState.bottomSafeArea
+        ]),
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.bottomSafeArea,
+          pageState.bottomSafeArea
+        ])
+      }
+    },
+    page: {
+      containerStyle: {},
+      contentStyle: {
+        paddingTop: pageState.topSafeArea + pageState.topInset,
+        paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
+        translateX: transUnit,
+        height: clientHeight
+      }
+    },
+    prevPage: {
+      containerStyle: {
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+        translateX: transUnit.to((unit) => (unit - clientWidth) / 5)
+      },
+      contentStyle: {
+        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
+        ])
+      }
+    },
+    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)
+      }
+    },
+    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: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => progress)
+      },
+      prevContentStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
+  };
+  const useCsrTransition = {
+    ...csrTranstionStyles,
+    pageBind,
+    pageClassName,
+    transDirection,
+    transUnitRange,
+    transUnit,
+    transPercent,
+    transProgress
+  };
+  return useCsrTransition;
+}, "useStackTrans");
+const useBottomUpTrans = /* @__PURE__ */ __name(({ clientWidth, clientHeight, history, location, prevLocation, onBack }) => {
+  const transDirection = "vertical";
+  const transUnit = (0, import_web.useSpringValue)(0, {
+    config: {
+      clamp: true
+    }
+  });
+  const transUnitRange = (0, import_react2.useMemo)(() => [
+    clientHeight,
+    0
+  ], []);
+  const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
+  const transUnitRangeReversed = (0, import_react2.useMemo)(() => [
+    0,
+    clientWidth
+  ], []);
+  const transProgress = transUnitReversed.to(transUnitRangeReversed, [
+    0,
+    1
+  ], "clamp");
+  const transPercent = transUnitReversed.to(transUnitRangeReversed, [
+    0,
+    100
+  ], "clamp");
+  const initThreshold = (0, import_react2.useMemo)(() => Math.floor(clientWidth / 3), []);
+  const threshold = (0, import_react2.useMemo)(() => Math.floor(clientWidth / 2), []);
+  const pageState = location.pathRoute.pageState;
+  const prevPageState = prevLocation?.pathRoute.pageState ?? import_client.defaultPageState;
+  (0, import_react2.useEffect)(() => {
+    onBack.current.bottomUp = async () => {
+      await transUnit.start(transUnitRange[0]);
+    };
+  }, []);
+  (0, import_react2.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
+  ]);
+  const pageBind = (0, import_react.useDrag)(({ first, last, movement: [, my], initial: [, iy], cancel }) => {
+    if (first) void import_client.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) import_client.router.back();
+  }, {
+    axis: "y",
+    filterTaps: true,
+    threshold: 10
+  });
+  const csrTranstionStyles = {
+    topSafeArea: {
+      containerStyle: {
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.topSafeArea,
+          pageState.topSafeArea
+        ])
+      }
+    },
+    bottomSafeArea: {
+      containerStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          clientHeight - prevPageState.bottomSafeArea,
+          clientHeight - pageState.bottomSafeArea
+        ]),
+        height: transProgress.to([
+          0,
+          1
+        ], [
+          prevPageState.bottomSafeArea,
+          pageState.bottomSafeArea
+        ])
+      }
+    },
+    page: {
+      containerStyle: {},
+      contentStyle: {
+        paddingTop: pageState.topSafeArea + pageState.topInset,
+        paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
+        translateY: transUnit,
+        height: clientHeight
+      }
+    },
+    prevPage: {
+      containerStyle: {
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+        translateY: 0
+      },
+      contentStyle: {
+        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)
+      }
+    },
+    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)
+      }
+    },
+    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: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => progress)
+      },
+      prevContentStyle: {
+        top: transProgress.to([
+          0,
+          1
+        ], [
+          0,
+          -(pageState.bottomInset - prevPageState.bottomInset) * 2
+        ]),
+        opacity: transProgress.to((progress) => 1 - progress)
+      }
+    }
+  };
+  const useCsrTransition = {
+    ...csrTranstionStyles,
+    pageBind,
+    pageClassName: "touch-pan-x",
+    transDirection,
+    transUnitRange,
+    transUnit,
+    transPercent,
+    transProgress
+  };
+  return useCsrTransition;
+}, "useBottomUpTrans");
+const useCsrValues = /* @__PURE__ */ __name((rootRouteGuide, pathRoutes) => {
+  const clientWidth = (0, import_react2.useRef)(window.innerWidth);
+  const clientHeight = (0, import_react2.useRef)(window.innerHeight);
+  const topSafeAreaRef = (0, import_react2.useRef)(null);
+  const bottomSafeAreaRef = (0, import_react2.useRef)(null);
+  const pageContentRef = (0, import_react2.useRef)(null);
+  const prevPageContentRef = (0, import_react2.useRef)(null);
+  const onBack = (0, import_react2.useRef)({});
+  const frameRootRef = (0, import_react2.useRef)(null);
+  const { getLocation } = (0, import_useLocation.useLocation)({
+    rootRouteGuide
+  });
+  const { history, setHistoryForward, setHistoryBack, getCurrentLocation, getPrevLocation, getScrollTop } = (0, import_useHistory.useHistory)([
+    getLocation(window.location.pathname)
+  ]);
+  const [{ location, prevLocation }, setLocationState] = (0, import_react2.useState)({
+    location: getCurrentLocation(),
+    prevLocation: getPrevLocation()
+  });
+  const getRouter = (0, import_react2.useCallback)(() => {
+    const router3 = {
+      push: /* @__PURE__ */ __name((href) => {
+        const location2 = getCurrentLocation();
+        const scrollTop = pageContentRef.current?.scrollTop ?? 0;
+        setHistoryForward({
+          type: "push",
+          location: getLocation(href),
+          scrollTop
+        });
+        setLocationState({
+          location: getCurrentLocation(),
+          prevLocation: location2
+        });
+        window.history.pushState({}, "", href);
+      }, "push"),
+      replace: /* @__PURE__ */ __name((href) => {
+        const scrollTop = pageContentRef.current?.scrollTop ?? 0;
+        setHistoryForward({
+          type: "replace",
+          location: getLocation(href),
+          scrollTop
+        });
+        setLocationState({
+          location: getCurrentLocation(),
+          prevLocation
+        });
+        window.history.replaceState({}, "", href);
+      }, "replace"),
+      refresh: /* @__PURE__ */ __name(() => {
+        window.location.reload();
+      }, "refresh"),
+      back: /* @__PURE__ */ __name(async () => {
+        const location2 = getCurrentLocation();
+        await onBack.current[location2.pathRoute.pageState.transition]?.();
+        const scrollTop = pageContentRef.current?.scrollTop ?? 0;
+        setHistoryBack({
+          type: "back",
+          location: location2,
+          scrollTop
+        });
+        setLocationState({
+          location: getCurrentLocation(),
+          prevLocation: getPrevLocation()
+        });
+        window.history.back();
+      }, "back")
+    };
+    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 === "forward") {
+        const location2 = getCurrentLocation();
+        setHistoryForward({
+          type: "popForward",
+          location: location2,
+          scrollTop
+        });
+        setLocationState({
+          location: getCurrentLocation(),
+          prevLocation: location2
+        });
+      } else {
+        const location2 = getCurrentLocation();
+        await onBack.current[location2.pathRoute.pageState.transition]?.();
+        setHistoryBack({
+          type: "popBack",
+          location: location2,
+          scrollTop
+        });
+        setLocationState({
+          location: getCurrentLocation(),
+          prevLocation: getPrevLocation()
+        });
+      }
+    };
+    return router3;
+  }, [
+    location
+  ]);
+  const router2 = getRouter();
+  const routeState = {
+    clientWidth: clientWidth.current,
+    clientHeight: clientHeight.current,
+    location,
+    prevLocation,
+    history,
+    topSafeAreaRef,
+    bottomSafeAreaRef,
+    prevPageContentRef,
+    pageContentRef,
+    frameRootRef,
+    onBack,
+    router: router2,
+    pathRoutes
+  };
+  const useNonTransition = useNoneTrans(routeState);
+  const useFadeTransition = useFadeTrans(routeState);
+  const useStackTransition = useStackTrans(routeState);
+  const useBottomUpTransition = useBottomUpTrans(routeState);
+  const useCsrTransitionMap = {
+    none: useNonTransition,
+    fade: useFadeTransition,
+    stack: useStackTransition,
+    bottomUp: useBottomUpTransition,
+    scaleOut: useNonTransition
+  };
+  (0, import_react2.useEffect)(() => {
+    if (pageContentRef.current) pageContentRef.current.scrollTop = getScrollTop(location.pathname);
+    if (prevPageContentRef.current) prevPageContentRef.current.scrollTop = prevLocation ? getScrollTop(prevLocation.pathname) : 0;
+    void import_app.App.addListener("backButton", () => {
+      router2.back();
+    });
+    return () => {
+      void import_app.App.removeAllListeners();
+    };
+  }, [
+    location.pathname
+  ]);
+  return {
+    ...routeState,
+    ...useCsrTransitionMap[location.pathRoute.pageState.transition]
+  };
+}, "useCsrValues");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCsrValues
+});