@ahnseungchan/webviewkit 2.1.0 → 2.2.0

package/dist/index.js

@@ -44,6 +44,7 @@ __export(index_exports, {
   FLUTTER_READY_EVENT: () => FLUTTER_READY_EVENT,
   FLUTTER_UNIFIED_HANDLER: () => FLUTTER_UNIFIED_HANDLER,
   HistoryAction: () => HistoryAction,
+  KEEP_ALIVE_LIMIT: () => KEEP_ALIVE_LIMIT,
   RN_BRIDGE_HANDLER: () => RN_BRIDGE_HANDLER,
   STACK_BRIDGE_METHODS: () => STACK_BRIDGE_METHODS,
   STACK_TRANSITION_MS: () => STACK_TRANSITION_MS,
@@ -77,6 +78,7 @@ __export(index_exports, {
   serializeBridgeMessage: () => serializeBridgeMessage,
   toStackPath: () => toStackPath,
   useActivity: () => useActivity,
+  useOnRevive: () => useOnRevive,
   useParams: () => useParams,
   useStackRouter: () => useStackRouter,
   waitForBridgeHost: () => waitForBridgeHost
@@ -90,6 +92,8 @@ var BACK_TIMEOUT_MS = 1e3;
 var BRIDGE_TIMEOUT_MS = 5e3;
 var BRIDGE_HOST_WAIT_MS = 3e3;
 var BRIDGE_HOST_POLL_MS = 100;
+var KEEP_ALIVE_LIMIT = 5;
+var DEV_MOUNTED_PAGES_WARN = 15;
 
 // src/bridge/detect-host.ts
 var FLUTTER_READY_EVENT = "flutterInAppWebViewPlatformReady";
@@ -864,19 +868,55 @@ var import_styled4 = __toESM(require("@emotion/styled"));
 
 // src/stack-router/stack-router-provider.tsx
 var import_styled3 = __toESM(require("@emotion/styled"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/stack-router/_components/header.tsx
 var import_styled = __toESM(require("@emotion/styled"));
+var import_react4 = require("react");
+
+// src/stack-router/activity-context.tsx
+var import_react3 = require("react");
+var ActivityContext = (0, import_react3.createContext)(null);
+function useActivity() {
+  const context = (0, import_react3.useContext)(ActivityContext);
+  if (!context) {
+    throw new Error(
+      "useActivity must be used inside a StackRouterProvider page"
+    );
+  }
+  return context;
+}
+function useParams() {
+  return useActivity().params;
+}
+function useOnRevive(callback) {
+  const { revision, data } = useActivity();
+  const callbackRef = (0, import_react3.useRef)(callback);
+  callbackRef.current = callback;
+  const lastRevisionRef = (0, import_react3.useRef)(revision);
+  (0, import_react3.useEffect)(() => {
+    if (revision > lastRevisionRef.current) callbackRef.current(data);
+    lastRevisionRef.current = revision;
+  }, [revision, data]);
+}
+
+// src/stack-router/_components/header.tsx
 var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
 var Header = ({ title }) => {
+  var _a;
+  const activity = (0, import_react4.useContext)(ActivityContext);
   const { currentPath: currentPath2, canGoBack } = useStackRouter();
+  const path = (_a = activity == null ? void 0 : activity.path) != null ? _a : currentPath2;
+  const showBack = activity ? activity.index > 0 : canGoBack;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledHeader, { children: [
-    canGoBack && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(back_router_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledTitle, { children: title != null ? title : currentPath2 })
+    showBack && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(back_router_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledTitle, { children: title != null ? title : path })
   ] });
 };
 var StyledHeader = import_styled.default.header`
+  position: sticky;
+  top: 0;
+  z-index: 1;
   width: 100%;
   height: 64px;
   flex-shrink: 0;
@@ -889,49 +929,54 @@ var StyledHeader = import_styled.default.header`
 `;
 var StyledTitle = import_styled.default.h1`
   margin: 0;
+  min-width: 0;
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--wvk-header-color, #111827);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var header_default = Header;
 
 // src/stack-router/_components/stack-page.tsx
-var import_react3 = require("@emotion/react");
+var import_react5 = require("@emotion/react");
 var import_styled2 = __toESM(require("@emotion/styled"));
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
 var FADE_EASING = "ease";
 var PARALLAX_OFFSET = "-30%";
-var coverIn = import_react3.keyframes`
-  from { transform: translate3d(100%, 0, 0); }
-  to { transform: translate3d(0, 0, 0); }
+var EDGE_SHADOW = "var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12))";
+var coverIn = import_react5.keyframes`
+  from { transform: translate3d(100%, 0, 0); box-shadow: none; }
+  to { transform: translate3d(0, 0, 0); box-shadow: ${EDGE_SHADOW}; }
 `;
-var coverOut = import_react3.keyframes`
-  from { transform: translate3d(0, 0, 0); }
-  to { transform: translate3d(100%, 0, 0); }
+var coverOut = import_react5.keyframes`
+  from { transform: translate3d(0, 0, 0); box-shadow: ${EDGE_SHADOW}; }
+  to { transform: translate3d(100%, 0, 0); box-shadow: none; }
 `;
-var parallaxOut = import_react3.keyframes`
+var parallaxOut = import_react5.keyframes`
   from { transform: translate3d(0, 0, 0); }
   to { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
 `;
-var parallaxIn = import_react3.keyframes`
+var parallaxIn = import_react5.keyframes`
   from { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
   to { transform: translate3d(0, 0, 0); }
 `;
-var dimIn = import_react3.keyframes`
+var dimIn = import_react5.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
 `;
-var dimOut = import_react3.keyframes`
+var dimOut = import_react5.keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-var fadeIn = import_react3.keyframes`
+var fadeIn = import_react5.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
 `;
-var fadeOut = import_react3.keyframes`
+var fadeOut = import_react5.keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
@@ -939,12 +984,11 @@ var layerOf = (direction, pageState) => direction === "push" === (pageState ===
 function slideStyles(direction, pageState, duration) {
   const timing = `${duration}ms ${IOS_EASING} forwards`;
   if (layerOf(direction, pageState) === "upper") {
-    return import_react3.css`
+    return import_react5.css`
       animation: ${direction === "push" ? coverIn : coverOut} ${timing};
-      box-shadow: var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12));
     `;
   }
-  return import_react3.css`
+  return import_react5.css`
     animation: ${direction === "push" ? parallaxOut : parallaxIn} ${timing};
     &::after {
       content: "";
@@ -964,18 +1008,18 @@ var PageWrapper = import_styled2.default.div`
   -webkit-overflow-scrolling: touch;
   background: var(--wvk-page-bg, #ffffff);
   z-index: ${({ zIndex }) => zIndex};
-  visibility: ${({ pageState }) => pageState === "covered" ? "hidden" : "visible"};
+  visibility: ${({ pageState }) => pageState === "covered" || pageState === "cached" ? "hidden" : "visible"};
   ${({ pageState, direction, transitionType, duration }) => {
   if (pageState !== "enter" && pageState !== "exit") return "";
   if (transitionType === "none" || duration === 0) return "";
   if (transitionType === "fade") {
-    return import_react3.css`
+    return import_react5.css`
         will-change: opacity;
         animation: ${pageState === "enter" ? fadeIn : fadeOut} ${duration}ms
           ${FADE_EASING} forwards;
       `;
   }
-  return import_react3.css`
+  return import_react5.css`
       will-change: transform;
       ${slideStyles(direction, pageState, duration)}
     `;
@@ -987,8 +1031,8 @@ function StackPage({
   children,
   ...wrapperProps
 }) {
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useLayoutEffect)(() => {
+  const ref = (0, import_react6.useRef)(null);
+  (0, import_react6.useLayoutEffect)(() => {
     var _a;
     (_a = ref.current) == null ? void 0 : _a.toggleAttribute("inert", !isTop);
   }, [isTop]);
@@ -1009,32 +1053,117 @@ function StackPage({
   );
 }
 
-// src/stack-router/activity-context.tsx
-var import_react5 = require("react");
-var ActivityContext = (0, import_react5.createContext)(null);
-function useActivity() {
-  const context = (0, import_react5.useContext)(ActivityContext);
-  if (!context) {
-    throw new Error(
-      "useActivity must be used inside a StackRouterProvider page"
-    );
-  }
-  return context;
-}
-function useParams() {
-  return useActivity().params;
-}
-
 // src/stack-router/stack-reducer.ts
 var topOf = (entries) => entries[entries.length - 1];
-function createStackState(entry) {
-  return { entries: [entry], leaving: [], transition: null };
+var bumpRevision = (entry) => {
+  var _a;
+  return {
+    ...entry,
+    revision: ((_a = entry.revision) != null ? _a : 0) + 1
+  };
+};
+function createStackState(entry, cacheLimit = 0) {
+  return {
+    entries: [entry],
+    leaving: [],
+    transition: null,
+    cached: [],
+    cacheLimit
+  };
+}
+function cacheEntries(state, removed) {
+  const { entries, cached, cacheLimit } = state;
+  const incoming = removed.filter((entry) => entry.keepAlive);
+  if (cacheLimit <= 0 || incoming.length === 0) return cached;
+  const incomingPaths = new Set(incoming.map((entry) => entry.path));
+  const merged = [
+    ...cached.filter((entry) => !incomingPaths.has(entry.path)),
+    ...incoming
+  ];
+  const capacity = cacheLimit - entries.filter((e) => e.keepAlive).length;
+  return capacity > 0 ? merged.slice(-capacity) : [];
+}
+function withoutPath(list, path) {
+  return list.filter((entry) => entry.path !== path);
+}
+function flushLeaving(state, nextEntries) {
+  const alive = new Set(nextEntries.map((entry) => entry.key));
+  const removed = state.leaving.filter((entry) => !alive.has(entry.key));
+  return cacheEntries({ ...state, entries: nextEntries }, removed);
+}
+function revive(state, action) {
+  const { direction, index, animate } = action;
+  const entry = bumpRevision(action.entry);
+  const previousTop = topOf(state.entries);
+  const entries = [...state.entries.slice(0, index), entry];
+  const removed = state.entries.slice(index);
+  const cached = state.cached.filter((item) => item.key !== entry.key);
+  const base = { ...state, entries, cached };
+  if (!animate || direction === "pop" && removed.length === 0) {
+    return {
+      ...base,
+      cached: cacheEntries(base, removed),
+      leaving: [],
+      transition: null
+    };
+  }
+  if (direction === "push") {
+    const stillInStack = !removed.includes(previousTop);
+    return {
+      ...base,
+      cached: cacheEntries(
+        base,
+        removed.filter((item) => item !== previousTop)
+      ),
+      leaving: stillInStack ? [] : [previousTop],
+      transition: {
+        type: "push",
+        enterKey: entry.key,
+        exitKey: previousTop.key
+      }
+    };
+  }
+  return {
+    ...base,
+    leaving: removed,
+    transition: {
+      type: "pop",
+      enterKey: entry.key,
+      exitKeys: removed.map((item) => item.key)
+    }
+  };
 }
+function findRevivable(state, path, opts = {}) {
+  const matches = (entry) => entry.path === path;
+  const fromStack = opts.includeRemovable ? [...state.entries.slice(1)].reverse().find((entry) => entry.keepAlive && matches(entry)) : void 0;
+  return fromStack != null ? fromStack : [...state.cached].reverse().find((entry) => matches(entry));
+}
+var OVERWRITES_LEAVING = /* @__PURE__ */ new Set([
+  "PUSH",
+  "POP_TO",
+  "RESET",
+  "RESET_PUSH",
+  "RESTORE",
+  "REVIVE"
+]);
 function stackReducer(state, action) {
+  if (!OVERWRITES_LEAVING.has(action.type) || state.leaving.length === 0) {
+    return reduce(state, action);
+  }
+  const settled = { ...state, leaving: [] };
+  const next = reduce(settled, action);
+  if (next === settled) return state;
+  return reduce(
+    { ...settled, cached: flushLeaving(state, next.entries) },
+    action
+  );
+}
+function reduce(state, action) {
   switch (action.type) {
     case "PUSH": {
       const previousTop = topOf(state.entries);
       return {
+        ...state,
         entries: [...state.entries, action.entry],
         leaving: [],
         transition: action.animate ? {
@@ -1044,20 +1173,34 @@ function stackReducer(state, action) {
         } : null
       };
     }
-    case "REPLACE":
+    case "REPLACE": {
+      const entries = [...state.entries.slice(0, -1), action.entry];
+      const { path } = action.entry;
       return {
         ...state,
-        entries: [...state.entries.slice(0, -1), action.entry]
+        entries,
+        cached: cacheEntries(
+          { ...state, entries, cached: withoutPath(state.cached, path) },
+          withoutPath([topOf(state.entries)], path)
+        )
       };
+    }
     case "POP_TO": {
       const index = Math.max(0, action.index);
       if (index >= state.entries.length - 1) return state;
       const entries = state.entries.slice(0, index + 1);
       const leaving = state.entries.slice(index + 1);
       if (!action.animate) {
-        return { entries, leaving: [], transition: null };
+        return {
+          ...state,
+          entries,
+          leaving: [],
+          transition: null,
+          cached: cacheEntries({ ...state, entries }, leaving)
+        };
       }
       return {
+        ...state,
         entries,
         leaving,
         transition: {
@@ -1067,21 +1210,80 @@ function stackReducer(state, action) {
         }
       };
     }
-    case "RESET":
-      return createStackState(action.entry);
+    case "RESET": {
+      const next = createStackState(action.entry, state.cacheLimit);
+      const { path } = action.entry;
+      return {
+        ...next,
+        cached: cacheEntries(
+          {
+            ...state,
+            entries: next.entries,
+            cached: withoutPath(state.cached, path)
+          },
+          withoutPath(state.entries, path)
+        )
+      };
+    }
+    case "REVIVE":
+      return revive(state, action);
+    case "RESET_PUSH": {
+      const [root] = state.entries;
+      const previousTop = topOf(state.entries);
+      const reusedKey = action.entry.key;
+      const isReused = [...state.entries, ...state.cached].some(
+        (entry) => entry.key === reusedKey
+      );
+      const entries = [
+        root,
+        isReused ? bumpRevision(action.entry) : action.entry
+      ];
+      const sameTop = previousTop.key === reusedKey;
+      const dropped = (action.animate ? state.entries.slice(1, -1) : state.entries.slice(1)).filter((entry) => entry.key !== reusedKey);
+      const cached = state.cached.filter((entry) => entry.key !== reusedKey);
+      const exiting = action.animate && !sameTop;
+      return {
+        ...state,
+        entries,
+        cached: cacheEntries({ ...state, entries, cached }, dropped),
+        leaving: exiting ? [previousTop] : [],
+        transition: exiting ? {
+          type: "push",
+          enterKey: action.entry.key,
+          exitKey: previousTop.key
+        } : null
+      };
+    }
     case "RESTORE":
-      return { entries: action.entries, leaving: [], transition: null };
-    case "END_TRANSITION":
+      return {
+        ...state,
+        entries: action.entries,
+        leaving: [],
+        transition: null
+      };
+    case "END_TRANSITION": {
       if (!state.transition && state.leaving.length === 0) return state;
-      return { ...state, leaving: [], transition: null };
+      return {
+        ...state,
+        leaving: [],
+        transition: null,
+        cached: flushLeaving(state, state.entries)
+      };
+    }
     default:
       return state;
   }
 }
 function getRenderedPages(state) {
-  const { entries, leaving, transition } = state;
+  const { entries, leaving, transition, cached } = state;
   const top = topOf(entries);
-  return [...entries, ...leaving].map((entry) => {
+  const ordered = (transition == null ? void 0 : transition.type) === "push" ? [...entries.slice(0, -1), ...leaving, top] : [...entries, ...leaving];
+  const cachedPages = cached.map((entry) => ({
+    entry,
+    pageState: "cached",
+    isTop: false
+  }));
+  const stackPages = ordered.map((entry) => {
     const isTop = entry.key === top.key;
     let pageState = isTop ? "idle" : "covered";
     if ((transition == null ? void 0 : transition.type) === "push") {
@@ -1094,20 +1296,21 @@ function getRenderedPages(state) {
     }
     return { entry, pageState, isTop };
   });
+  return [...cachedPages, ...stackPages];
 }
 
 // src/stack-router/use-prefers-reduced-motion.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var QUERY = "(prefers-reduced-motion: reduce)";
 var getMediaQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = (0, import_react6.useState)(
+  const [reduced, setReduced] = (0, import_react7.useState)(
     () => {
       var _a, _b;
       return (_b = (_a = getMediaQuery()) == null ? void 0 : _a.matches) != null ? _b : false;
     }
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     var _a;
     const mediaQuery = getMediaQuery();
     if (!mediaQuery) return;
@@ -1122,13 +1325,13 @@ function usePrefersReducedMotion() {
 }
 
 // src/stack-router/use-stack-bridge-sync.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useStackBridgeSync(bridge, router, onBackAtRoot) {
   const enabled = Boolean(bridge);
   const options = typeof bridge === "object" ? bridge : {};
-  const latest = (0, import_react7.useRef)({ router, options, onBackAtRoot });
+  const latest = (0, import_react8.useRef)({ router, options, onBackAtRoot });
   latest.current = { router, options, onBackAtRoot };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled) return;
     return installBridgeHost({
       allowUrl: latest.current.options.allowUrl,
@@ -1153,7 +1356,7 @@ function useStackBridgeSync(bridge, router, onBackAtRoot) {
   }, [enabled]);
   const { depth, currentPath: currentPath2 } = router;
   const emit = enabled && options.emitStackChanged !== false;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!emit || !isNativeBridgeHost(detectBridgeHost())) return;
     createWebViewBridgeClient().notifyStackChanged({ depth, path: currentPath2 }).catch((error) => {
       var _a, _b;
@@ -1163,7 +1366,7 @@ function useStackBridgeSync(bridge, router, onBackAtRoot) {
 }
 
 // src/stack-router/use-stack-navigation.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/stack-router/match-path.ts
 var splitSegments = (pathname) => pathname.split("/").filter((segment) => segment.length > 0);
@@ -1214,37 +1417,57 @@ var isDev2 = () => {
   var _a;
   return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production";
 };
-function createEntry(hit, path, data, key = createBridgeId()) {
+function createEntry(hit, path, cacheLimit, data, key = createBridgeId()) {
   return {
     key,
     path,
     pattern: hit.activity.path,
     params: hit.match.params,
     query: hit.match.query,
-    data
+    data,
+    keepAlive: hit.activity.keepAlive === true && cacheLimit > 0
   };
 }
 var currentUrl = () => window.location.pathname + window.location.search;
 function useStackNavigation(options) {
-  const optionsRef = (0, import_react8.useRef)(options);
+  const optionsRef = (0, import_react9.useRef)(options);
   optionsRef.current = options;
-  const [state, dispatch] = (0, import_react8.useReducer)(stackReducer, void 0, () => {
+  const [state, dispatch] = (0, import_react9.useReducer)(stackReducer, void 0, () => {
+    var _a;
     const { initialActivity } = options;
+    const cacheLimit = (_a = options.keepAliveLimit) != null ? _a : KEEP_ALIVE_LIMIT;
     return createStackState(
       createEntry(
         { activity: initialActivity, match: { params: {}, query: {} } },
-        initialActivity.path
-      )
+        initialActivity.path,
+        cacheLimit
+      ),
+      cacheLimit
     );
   });
-  const stateRef = (0, import_react8.useRef)(state);
+  const stateRef = (0, import_react9.useRef)(state);
   stateRef.current = state;
-  const busyRef = (0, import_react8.useRef)(false);
-  const resolve = (0, import_react8.useCallback)((path) => {
+  const newEntry = (hit, path, data, key) => createEntry(hit, path, stateRef.current.cacheLimit, data, key);
+  const busyRef = (0, import_react9.useRef)(false);
+  const ignorePopRef = (0, import_react9.useRef)(0);
+  const pendingTravelRef = (0, import_react9.useRef)(0);
+  const isLocked = () => busyRef.current || pendingTravelRef.current > 0;
+  const travel = (delta, ignorePop) => {
+    pendingTravelRef.current += 1;
+    if (ignorePop) ignorePopRef.current += 1;
+    return history.travel(delta).then((popped) => {
+      pendingTravelRef.current -= 1;
+      if (!popped && ignorePop) {
+        ignorePopRef.current = Math.max(0, ignorePopRef.current - 1);
+      }
+      return popped;
+    });
+  };
+  const resolve = (0, import_react9.useCallback)((path) => {
     const { activities, initialActivity } = optionsRef.current;
     return findActivity([...activities, initialActivity], path);
   }, []);
-  const resolveOrNotify = (0, import_react8.useCallback)(
+  const resolveOrNotify = (0, import_react9.useCallback)(
     (path) => {
       var _a, _b;
       const hit = resolve(path);
@@ -1259,29 +1482,35 @@ function useStackNavigation(options) {
     [resolve]
   );
   const animate = () => optionsRef.current.duration > 0;
-  const push = (0, import_react8.useCallback)(
+  const push = (0, import_react9.useCallback)(
     (path, data) => {
-      if (busyRef.current) return false;
+      if (isLocked()) return false;
       const hit = resolveOrNotify(path);
       if (!hit) return false;
-      const entry = createEntry(hit, path, data);
+      const { entries } = stateRef.current;
+      const revived = findRevivable(stateRef.current, path);
+      const entry = revived ? { ...revived, data } : newEntry(hit, path, data);
       busyRef.current = true;
-      history.push(path, {
-        key: entry.key,
-        index: stateRef.current.entries.length,
-        data
-      });
-      dispatch({ type: "PUSH", entry, animate: animate() });
+      history.push(path, { key: entry.key, index: entries.length, data });
+      dispatch(
+        revived ? {
+          type: "REVIVE",
+          entry,
+          direction: "push",
+          index: entries.length,
+          animate: animate()
+        } : { type: "PUSH", entry, animate: animate() }
+      );
       return true;
     },
     [resolveOrNotify]
   );
-  const replace = (0, import_react8.useCallback)(
+  const replace = (0, import_react9.useCallback)(
     (path, data) => {
-      if (busyRef.current) return false;
+      if (isLocked()) return false;
       const hit = resolveOrNotify(path);
       if (!hit) return false;
-      const entry = createEntry(hit, path, data);
+      const entry = newEntry(hit, path, data);
       history.replace(path, {
         key: entry.key,
         index: stateRef.current.entries.length - 1,
@@ -1292,21 +1521,46 @@ function useStackNavigation(options) {
     },
     [resolveOrNotify]
   );
-  const reset = (0, import_react8.useCallback)(
+  const reset = (0, import_react9.useCallback)(
     (path, data) => {
-      if (busyRef.current) return false;
+      if (isLocked()) return false;
       const hit = resolveOrNotify(path);
       if (!hit) return false;
-      const entry = createEntry(hit, path, data);
-      history.replace(path, { key: entry.key, index: 0, data });
+      const entry = newEntry(hit, path, data);
+      const depth = stateRef.current.entries.length;
       dispatch({ type: "RESET", entry });
+      const commit = () => {
+        history.replace(path, { key: entry.key, index: 0, data });
+      };
+      if (depth === 1) commit();
+      else void travel(-(depth - 1), true).then(commit);
       return true;
     },
     [resolveOrNotify]
   );
-  const pop = (0, import_react8.useCallback)((count = 1) => {
+  const resetPush = (0, import_react9.useCallback)(
+    (path, data) => {
+      const { entries } = stateRef.current;
+      if (entries.length === 1) return push(path, data);
+      if (isLocked()) return false;
+      const hit = resolveOrNotify(path);
+      if (!hit) return false;
+      const revivable = findRevivable(stateRef.current, path, {
+        includeRemovable: true
+      });
+      const entry = revivable ? { ...revivable, data } : newEntry(hit, path, data);
+      busyRef.current = true;
+      dispatch({ type: "RESET_PUSH", entry, animate: animate() });
+      void travel(-(entries.length - 1), true).then(() => {
+        history.push(path, { key: entry.key, index: 1, data });
+      });
+      return true;
+    },
+    [push, resolveOrNotify]
+  );
+  const pop = (0, import_react9.useCallback)((count = 1) => {
     var _a, _b;
-    if (busyRef.current) return false;
+    if (isLocked()) return false;
     const { entries } = stateRef.current;
     if (entries.length <= 1) {
       (_b = (_a = optionsRef.current).onBackAtRoot) == null ? void 0 : _b.call(_a);
@@ -1316,11 +1570,11 @@ function useStackNavigation(options) {
     const targetIndex = entries.length - 1 - delta;
     busyRef.current = true;
     dispatch({ type: "POP_TO", index: targetIndex, animate: animate() });
-    void history.travel(-delta);
+    void travel(-delta, false);
     return true;
   }, []);
-  const back = (0, import_react8.useCallback)(() => pop(1), [pop]);
-  const popTo = (0, import_react8.useCallback)(
+  const back = (0, import_react9.useCallback)(() => pop(1), [pop]);
+  const popTo = (0, import_react9.useCallback)(
     (path) => {
       const { entries } = stateRef.current;
       for (let i = entries.length - 2; i >= 0; i -= 1) {
@@ -1332,11 +1586,15 @@ function useStackNavigation(options) {
     },
     [pop]
   );
-  const endTransition = (0, import_react8.useCallback)(() => {
+  const endTransition = (0, import_react9.useCallback)(() => {
     dispatch({ type: "END_TRANSITION" });
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const onPop = (historyState) => {
+      if (ignorePopRef.current > 0) {
+        ignorePopRef.current -= 1;
+        return;
+      }
       const { entries } = stateRef.current;
       const index = historyState.key ? entries.findIndex((entry2) => entry2.key === historyState.key) : -1;
       if (index !== -1) {
@@ -1346,12 +1604,26 @@ function useStackNavigation(options) {
         }
         return;
       }
+      const cachedEntry = historyState.key ? stateRef.current.cached.find((item) => item.key === historyState.key) : void 0;
+      const targetIndex = historyState.index;
+      if (cachedEntry && typeof targetIndex === "number" && // 루트 자리(0)는 되살리지 않는다. 아래 일반 처리(reset)로 넘긴다
+      targetIndex >= 1 && targetIndex <= entries.length) {
+        busyRef.current = true;
+        dispatch({
+          type: "REVIVE",
+          entry: { ...cachedEntry, data: historyState.data },
+          direction: targetIndex === entries.length ? "push" : "pop",
+          index: targetIndex,
+          animate: animate()
+        });
+        return;
+      }
       const hit = resolveOrNotify(historyState.path);
       if (!hit) {
         busyRef.current = false;
         return;
       }
-      const entry = createEntry(
+      const entry = newEntry(
         hit,
         historyState.path,
         historyState.data,
@@ -1369,8 +1641,8 @@ function useStackNavigation(options) {
       removeListener();
     };
   }, [resolveOrNotify]);
-  const restoredRef = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const restoredRef = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
     if (restoredRef.current) return;
     restoredRef.current = true;
     const root = stateRef.current.entries[0];
@@ -1381,7 +1653,7 @@ function useStackNavigation(options) {
       return;
     }
     const savedData = history.getCurrentState().data;
-    const top = createEntry(hit, url, savedData);
+    const top = newEntry(hit, url, savedData);
     if (optionsRef.current.restoreStack === "top-only") {
       history.replace(url, { key: top.key, index: 0, data: savedData });
       dispatch({ type: "RESTORE", entries: [top] });
@@ -1391,7 +1663,7 @@ function useStackNavigation(options) {
     history.push(url, { key: top.key, index: 1, data: savedData });
     dispatch({ type: "RESTORE", entries: [root, top] });
   }, [resolve]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!state.transition) {
       busyRef.current = false;
       return;
@@ -1402,14 +1674,24 @@ function useStackNavigation(options) {
     );
     return () => clearTimeout(timer);
   }, [state, endTransition]);
-  return { state, push, replace, reset, back, pop, popTo, endTransition };
+  return {
+    state,
+    push,
+    replace,
+    reset,
+    resetPush,
+    back,
+    pop,
+    popTo,
+    endTransition
+  };
 }
 
 // src/stack-router/stack-router-provider.tsx
 var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
-var StackRouterContext = (0, import_react9.createContext)(null);
+var StackRouterContext = (0, import_react10.createContext)(null);
 var useStackRouter = () => {
-  const context = (0, import_react9.useContext)(StackRouterContext);
+  const context = (0, import_react10.useContext)(StackRouterContext);
   if (!context) {
     throw new Error("useStackRouter must be used within a StackRouterProvider");
   }
@@ -1419,6 +1701,8 @@ var isDevEnv = () => {
   var _a;
   return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development";
 };
+var MIN_MOUNTED_PAGES = 1;
+var CACHED_ACTIVITY_INDEX = -1;
 var StackRouterProvider = ({
   initialActivity,
   Activities = [],
@@ -1428,6 +1712,8 @@ var StackRouterProvider = ({
   transition = "slide",
   duration = STACK_TRANSITION_MS,
   restoreStack = "with-root",
+  keepAliveLimit = KEEP_ALIVE_LIMIT,
+  maxMountedPages,
   safeArea = false,
   onBackAtRoot,
   onNotFound,
@@ -1441,6 +1727,7 @@ var StackRouterProvider = ({
     activities: Activities,
     duration: effectiveDuration,
     restoreStack,
+    keepAliveLimit,
     onBackAtRoot,
     onNotFound
   });
@@ -1450,7 +1737,7 @@ var StackRouterProvider = ({
     return (_b2 = (_a2 = Activities.find((activity) => activity.path === pattern)) == null ? void 0 : _a2.element) != null ? _b2 : initialActivity.path === pattern ? initialActivity.element : null;
   };
   const top = state.entries[state.entries.length - 1];
-  const value = (0, import_react9.useMemo)(
+  const value = (0, import_react10.useMemo)(
     () => ({
       currentPath: top.path,
       currentState: {
@@ -1472,6 +1759,7 @@ var StackRouterProvider = ({
       push: navigation.push,
       replace: navigation.replace,
       reset: navigation.reset,
+      resetPush: navigation.resetPush,
       back: navigation.back,
       pop: navigation.pop,
       popTo: navigation.popTo,
@@ -1482,11 +1770,60 @@ var StackRouterProvider = ({
   useStackBridgeSync(bridge, value, onBackAtRoot);
   const direction = (_b = (_a = state.transition) == null ? void 0 : _a.type) != null ? _b : "push";
   const pages = getRenderedPages(state);
+  const stackIndexByKey = new Map(
+    state.entries.map((entry, index) => [entry.key, index])
+  );
+  const activityIndexOf = (entry) => {
+    const stackIndex = stackIndexByKey.get(entry.key);
+    if (stackIndex !== void 0) return stackIndex;
+    const leavingIndex = state.leaving.findIndex(
+      (item) => item.key === entry.key
+    );
+    return leavingIndex === -1 ? CACHED_ACTIVITY_INDEX : state.entries.length + leavingIndex;
+  };
+  const mountLimit = maxMountedPages === void 0 || !Number.isFinite(maxMountedPages) ? Infinity : Math.max(MIN_MOUNTED_PAGES, maxMountedPages);
+  const mountedKeysRef = (0, import_react10.useRef)(/* @__PURE__ */ new Set());
+  const wasMounted = mountedKeysRef.current;
+  const shouldMount = (page) => {
+    const { entry, pageState } = page;
+    if (pageState === "cached" || entry.keepAlive) return true;
+    const stackIndex = stackIndexByKey.get(entry.key);
+    if (stackIndex === void 0) return wasMounted.has(entry.key);
+    if (pageState === "enter" || pageState === "exit") return true;
+    return state.entries.length - stackIndex <= mountLimit;
+  };
+  const mountedKeys = new Set(
+    pages.filter(shouldMount).map((page) => page.entry.key)
+  );
+  mountedKeysRef.current = mountedKeys;
+  const mountedCount = mountedKeys.size;
+  const domOrderRef = (0, import_react10.useRef)([]);
+  const currentKeys = new Set(pages.map((page) => page.entry.key));
+  const knownKeys = new Set(domOrderRef.current);
+  domOrderRef.current = [
+    ...domOrderRef.current.filter((key) => currentKeys.has(key)),
+    ...pages.map((page) => page.entry.key).filter((key) => !knownKeys.has(key))
+  ];
+  const domOrder = domOrderRef.current;
+  const domPages = pages.map((page, index) => ({ page, index })).sort(
+    (a, b) => domOrder.indexOf(a.page.entry.key) - domOrder.indexOf(b.page.entry.key)
+  );
+  const hasWarnedRef = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
+    if (hasWarnedRef.current || !isDevEnv() || mountedCount <= DEV_MOUNTED_PAGES_WARN) {
+      return;
+    }
+    hasWarnedRef.current = true;
+    console.warn(
+      `[webviewkit] \uB9C8\uC6B4\uD2B8\uB41C \uD398\uC774\uC9C0\uAC00 ${mountedCount}\uAC1C\uC785\uB2C8\uB2E4. \uBA54\uBAA8\uB9AC \uC0AC\uC6A9\uC774 \uCEE4\uC9C8 \uC218 \uC788\uC73C\uB2C8 maxMountedPages \uB85C \uC0C1\uD55C\uC744 \uB450\uC138\uC694.`
+    );
+  }, [mountedCount]);
   const showDevTools = enableDevTools != null ? enableDevTools : isDevEnv();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(StackRouterContext.Provider, { value, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LayoutContainer, { safeArea, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Layout, { maxWidth, "data-testid": "layout", children: [
-      isShowHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(header_default, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PageContainer, { children: pages.map(({ entry, pageState, isTop }, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LayoutContainer, { safeArea, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { maxWidth, "data-testid": "layout", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PageContainer, { children: domPages.map(({ page, index }) => {
+      var _a2;
+      const { entry, pageState, isTop } = page;
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ActivityContext.Provider,
         {
           value: {
@@ -1496,10 +1833,12 @@ var StackRouterProvider = ({
             params: entry.params,
             query: entry.query,
             data: entry.data,
-            index,
-            isTop
+            index: activityIndexOf(entry),
+            isTop,
+            isCached: pageState === "cached",
+            revision: (_a2 = entry.revision) != null ? _a2 : 0
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             StackPage,
             {
               pageState,
@@ -1509,13 +1848,16 @@ var StackRouterProvider = ({
               zIndex: index,
               isTop,
               onAnimationEnd: pageState === "enter" ? endTransition : void 0,
-              children: elementFor(entry.pattern)
+              children: [
+                mountedKeys.has(entry.key) && isShowHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(header_default, {}),
+                mountedKeys.has(entry.key) ? elementFor(entry.pattern) : null
+              ]
             }
           )
         },
         entry.key
-      )) })
-    ] }) }),
+      );
+    }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       StackDevRoadmap,
       {
@@ -1620,6 +1962,7 @@ var BackIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   FLUTTER_READY_EVENT,
   FLUTTER_UNIFIED_HANDLER,
   HistoryAction,
+  KEEP_ALIVE_LIMIT,
   RN_BRIDGE_HANDLER,
   STACK_BRIDGE_METHODS,
   STACK_TRANSITION_MS,
@@ -1653,6 +1996,7 @@ var BackIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   serializeBridgeMessage,
   toStackPath,
   useActivity,
+  useOnRevive,
   useParams,
   useStackRouter,
   waitForBridgeHost