@ahnseungchan/webviewkit 2.0.0 → 2.2.0

package/dist/index.mjs

@@ -1,10 +1,12 @@
 // src/constants.ts
-var STACK_TRANSITION_MS = 300;
+var STACK_TRANSITION_MS = 500;
 var TRANSITION_END_GRACE_MS = 50;
 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";
@@ -779,19 +781,61 @@ import styled4 from "@emotion/styled";
 
 // src/stack-router/stack-router-provider.tsx
 import styled3 from "@emotion/styled";
-import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+import {
+  createContext as createContext2,
+  useContext as useContext3,
+  useEffect as useEffect6,
+  useMemo,
+  useRef as useRef6
+} from "react";
 
 // src/stack-router/_components/header.tsx
 import styled from "@emotion/styled";
+import { useContext as useContext2 } from "react";
+
+// src/stack-router/activity-context.tsx
+import { createContext, useContext, useEffect as useEffect2, useRef as useRef2 } from "react";
+var ActivityContext = createContext(null);
+function useActivity() {
+  const context = 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 = useRef2(callback);
+  callbackRef.current = callback;
+  const lastRevisionRef = useRef2(revision);
+  useEffect2(() => {
+    if (revision > lastRevisionRef.current) callbackRef.current(data);
+    lastRevisionRef.current = revision;
+  }, [revision, data]);
+}
+
+// src/stack-router/_components/header.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
 var Header = ({ title }) => {
+  var _a;
+  const activity = useContext2(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__ */ jsxs2(StyledHeader, { children: [
-    canGoBack && /* @__PURE__ */ jsx3(back_router_default, {}),
-    /* @__PURE__ */ jsx3(StyledTitle, { children: title != null ? title : currentPath2 })
+    showBack && /* @__PURE__ */ jsx3(back_router_default, {}),
+    /* @__PURE__ */ jsx3(StyledTitle, { children: title != null ? title : path })
   ] });
 };
 var StyledHeader = styled.header`
+  position: sticky;
+  top: 0;
+  z-index: 1;
   width: 100%;
   height: 64px;
   flex-shrink: 0;
@@ -804,32 +848,48 @@ var StyledHeader = styled.header`
 `;
 var StyledTitle = styled.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
 import { css, keyframes } from "@emotion/react";
 import styled2 from "@emotion/styled";
-import { useLayoutEffect, useRef as useRef2 } from "react";
+import { useLayoutEffect, useRef as useRef3 } from "react";
 import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
-var slideInRight = keyframes`
-  from { transform: translate3d(100%, 0, 0); }
-  to { transform: translate3d(0, 0, 0); }
-`;
-var slideOutLeft = keyframes`
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
+var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var FADE_EASING = "ease";
+var PARALLAX_OFFSET = "-30%";
+var EDGE_SHADOW = "var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12))";
+var coverIn = keyframes`
+  from { transform: translate3d(100%, 0, 0); box-shadow: none; }
+  to { transform: translate3d(0, 0, 0); box-shadow: ${EDGE_SHADOW}; }
 `;
-var slideInLeft = keyframes`
-  from { transform: translate3d(-30%, 0, 0); opacity: 0.6; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
+var coverOut = keyframes`
+  from { transform: translate3d(0, 0, 0); box-shadow: ${EDGE_SHADOW}; }
+  to { transform: translate3d(100%, 0, 0); box-shadow: none; }
 `;
-var slideOutRight = keyframes`
+var parallaxOut = keyframes`
   from { transform: translate3d(0, 0, 0); }
-  to { transform: translate3d(100%, 0, 0); }
+  to { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+`;
+var parallaxIn = keyframes`
+  from { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+`;
+var dimIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var dimOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
 `;
 var fadeIn = keyframes`
   from { opacity: 0; }
@@ -839,14 +899,26 @@ var fadeOut = keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
 `;
-var SLIDE_KEYFRAMES = {
-  push: { enter: slideInRight, exit: slideOutLeft },
-  pop: { enter: slideInLeft, exit: slideOutRight }
-};
-var FADE_KEYFRAMES = { enter: fadeIn, exit: fadeOut };
-function pickKeyframes(transition, direction, pageState) {
-  if (transition === "fade") return FADE_KEYFRAMES[pageState];
-  return SLIDE_KEYFRAMES[direction][pageState];
+var layerOf = (direction, pageState) => direction === "push" === (pageState === "enter") ? "upper" : "lower";
+function slideStyles(direction, pageState, duration) {
+  const timing = `${duration}ms ${IOS_EASING} forwards`;
+  if (layerOf(direction, pageState) === "upper") {
+    return css`
+      animation: ${direction === "push" ? coverIn : coverOut} ${timing};
+    `;
+  }
+  return css`
+    animation: ${direction === "push" ? parallaxOut : parallaxIn} ${timing};
+    &::after {
+      content: "";
+      /* transform 중인 페이지 기준 fixed = 스크롤과 무관하게 페이지 전체를 덮음 */
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background: var(--wvk-dim-color, rgba(0, 0, 0, 0.12));
+      animation: ${direction === "push" ? dimIn : dimOut} ${timing};
+    }
+  `;
 }
 var PageWrapper = styled2.div`
   position: absolute;
@@ -855,14 +927,20 @@ var PageWrapper = styled2.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 css`
+        will-change: opacity;
+        animation: ${pageState === "enter" ? fadeIn : fadeOut} ${duration}ms
+          ${FADE_EASING} forwards;
+      `;
+  }
   return css`
-      will-change: transform, opacity;
-      animation: ${pickKeyframes(transitionType, direction, pageState)}
-        ${duration}ms ease-in-out forwards;
+      will-change: transform;
+      ${slideStyles(direction, pageState, duration)}
     `;
 }}
 `;
@@ -872,7 +950,7 @@ function StackPage({
   children,
   ...wrapperProps
 }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   useLayoutEffect(() => {
     var _a;
     (_a = ref.current) == null ? void 0 : _a.toggleAttribute("inert", !isTop);
@@ -885,39 +963,126 @@ function StackPage({
       "data-state": wrapperProps.pageState,
       "aria-hidden": isTop ? void 0 : true,
       onAnimationEnd: (event) => {
-        if (event.target === event.currentTarget) onAnimationEnd == null ? void 0 : onAnimationEnd();
+        if (event.target === event.currentTarget && !event.pseudoElement) {
+          onAnimationEnd == null ? void 0 : onAnimationEnd();
+        }
       },
       children
     }
   );
 }
 
-// src/stack-router/activity-context.tsx
-import { createContext, useContext } from "react";
-var ActivityContext = createContext(null);
-function useActivity() {
-  const context = 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 ? {
@@ -927,20 +1092,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: {
@@ -950,21 +1129,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") {
@@ -977,10 +1215,11 @@ function getRenderedPages(state) {
     }
     return { entry, pageState, isTop };
   });
+  return [...cachedPages, ...stackPages];
 }
 
 // src/stack-router/use-prefers-reduced-motion.ts
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect3, useState } from "react";
 var QUERY = "(prefers-reduced-motion: reduce)";
 var getMediaQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
 function usePrefersReducedMotion() {
@@ -990,7 +1229,7 @@ function usePrefersReducedMotion() {
       return (_b = (_a = getMediaQuery()) == null ? void 0 : _a.matches) != null ? _b : false;
     }
   );
-  useEffect2(() => {
+  useEffect3(() => {
     var _a;
     const mediaQuery = getMediaQuery();
     if (!mediaQuery) return;
@@ -1005,13 +1244,13 @@ function usePrefersReducedMotion() {
 }
 
 // src/stack-router/use-stack-bridge-sync.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function useStackBridgeSync(bridge, router, onBackAtRoot) {
   const enabled = Boolean(bridge);
   const options = typeof bridge === "object" ? bridge : {};
-  const latest = useRef3({ router, options, onBackAtRoot });
+  const latest = useRef4({ router, options, onBackAtRoot });
   latest.current = { router, options, onBackAtRoot };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled) return;
     return installBridgeHost({
       allowUrl: latest.current.options.allowUrl,
@@ -1036,7 +1275,7 @@ function useStackBridgeSync(bridge, router, onBackAtRoot) {
   }, [enabled]);
   const { depth, currentPath: currentPath2 } = router;
   const emit = enabled && options.emitStackChanged !== false;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!emit || !isNativeBridgeHost(detectBridgeHost())) return;
     createWebViewBridgeClient().notifyStackChanged({ depth, path: currentPath2 }).catch((error) => {
       var _a, _b;
@@ -1046,7 +1285,7 @@ function useStackBridgeSync(bridge, router, onBackAtRoot) {
 }
 
 // src/stack-router/use-stack-navigation.ts
-import { useCallback, useEffect as useEffect4, useReducer, useRef as useRef4 } from "react";
+import { useCallback, useEffect as useEffect5, useReducer, useRef as useRef5 } from "react";
 
 // src/stack-router/match-path.ts
 var splitSegments = (pathname) => pathname.split("/").filter((segment) => segment.length > 0);
@@ -1097,32 +1336,52 @@ 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 = useRef4(options);
+  const optionsRef = useRef5(options);
   optionsRef.current = options;
   const [state, dispatch] = 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 = useRef4(state);
+  const stateRef = useRef5(state);
   stateRef.current = state;
-  const busyRef = useRef4(false);
+  const newEntry = (hit, path, data, key) => createEntry(hit, path, stateRef.current.cacheLimit, data, key);
+  const busyRef = useRef5(false);
+  const ignorePopRef = useRef5(0);
+  const pendingTravelRef = useRef5(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 = useCallback((path) => {
     const { activities, initialActivity } = optionsRef.current;
     return findActivity([...activities, initialActivity], path);
@@ -1144,27 +1403,33 @@ function useStackNavigation(options) {
   const animate = () => optionsRef.current.duration > 0;
   const push = 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 = 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,
@@ -1177,19 +1442,44 @@ function useStackNavigation(options) {
   );
   const reset = 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 resetPush = 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 = 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);
@@ -1198,12 +1488,8 @@ function useStackNavigation(options) {
     const delta = Math.min(Math.max(1, count), entries.length - 1);
     const targetIndex = entries.length - 1 - delta;
     busyRef.current = true;
-    void history.travel(-delta).then((popped) => {
-      if (!popped) {
-        busyRef.current = false;
-        dispatch({ type: "POP_TO", index: targetIndex, animate: false });
-      }
-    });
+    dispatch({ type: "POP_TO", index: targetIndex, animate: animate() });
+    void travel(-delta, false);
     return true;
   }, []);
   const back = useCallback(() => pop(1), [pop]);
@@ -1222,8 +1508,12 @@ function useStackNavigation(options) {
   const endTransition = useCallback(() => {
     dispatch({ type: "END_TRANSITION" });
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     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) {
@@ -1233,12 +1523,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,
@@ -1256,8 +1560,8 @@ function useStackNavigation(options) {
       removeListener();
     };
   }, [resolveOrNotify]);
-  const restoredRef = useRef4(false);
-  useEffect4(() => {
+  const restoredRef = useRef5(false);
+  useEffect5(() => {
     if (restoredRef.current) return;
     restoredRef.current = true;
     const root = stateRef.current.entries[0];
@@ -1268,7 +1572,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] });
@@ -1278,7 +1582,7 @@ function useStackNavigation(options) {
     history.push(url, { key: top.key, index: 1, data: savedData });
     dispatch({ type: "RESTORE", entries: [root, top] });
   }, [resolve]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!state.transition) {
       busyRef.current = false;
       return;
@@ -1289,14 +1593,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
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var StackRouterContext = createContext2(null);
 var useStackRouter = () => {
-  const context = useContext2(StackRouterContext);
+  const context = useContext3(StackRouterContext);
   if (!context) {
     throw new Error("useStackRouter must be used within a StackRouterProvider");
   }
@@ -1306,6 +1620,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 = [],
@@ -1315,6 +1631,8 @@ var StackRouterProvider = ({
   transition = "slide",
   duration = STACK_TRANSITION_MS,
   restoreStack = "with-root",
+  keepAliveLimit = KEEP_ALIVE_LIMIT,
+  maxMountedPages,
   safeArea = false,
   onBackAtRoot,
   onNotFound,
@@ -1328,6 +1646,7 @@ var StackRouterProvider = ({
     activities: Activities,
     duration: effectiveDuration,
     restoreStack,
+    keepAliveLimit,
     onBackAtRoot,
     onNotFound
   });
@@ -1359,6 +1678,7 @@ var StackRouterProvider = ({
       push: navigation.push,
       replace: navigation.replace,
       reset: navigation.reset,
+      resetPush: navigation.resetPush,
       back: navigation.back,
       pop: navigation.pop,
       popTo: navigation.popTo,
@@ -1369,11 +1689,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 = useRef6(/* @__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 = useRef6([]);
+  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 = useRef6(false);
+  useEffect6(() => {
+    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__ */ jsxs3(StackRouterContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx5(LayoutContainer, { safeArea, children: /* @__PURE__ */ jsxs3(Layout, { maxWidth, "data-testid": "layout", children: [
-      isShowHeader && /* @__PURE__ */ jsx5(header_default, {}),
-      /* @__PURE__ */ jsx5(PageContainer, { children: pages.map(({ entry, pageState, isTop }, index) => /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx5(LayoutContainer, { safeArea, children: /* @__PURE__ */ jsx5(Layout, { maxWidth, "data-testid": "layout", children: /* @__PURE__ */ jsx5(PageContainer, { children: domPages.map(({ page, index }) => {
+      var _a2;
+      const { entry, pageState, isTop } = page;
+      return /* @__PURE__ */ jsx5(
         ActivityContext.Provider,
         {
           value: {
@@ -1383,10 +1752,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__ */ jsx5(
+          children: /* @__PURE__ */ jsxs3(
             StackPage,
             {
               pageState,
@@ -1396,13 +1767,16 @@ var StackRouterProvider = ({
               zIndex: index,
               isTop,
               onAnimationEnd: pageState === "enter" ? endTransition : void 0,
-              children: elementFor(entry.pattern)
+              children: [
+                mountedKeys.has(entry.key) && isShowHeader && /* @__PURE__ */ jsx5(header_default, {}),
+                mountedKeys.has(entry.key) ? elementFor(entry.pattern) : null
+              ]
             }
           )
         },
         entry.key
-      )) })
-    ] }) }),
+      );
+    }) }) }) }),
     /* @__PURE__ */ jsx5(
       StackDevRoadmap,
       {
@@ -1506,6 +1880,7 @@ export {
   FLUTTER_READY_EVENT,
   FLUTTER_UNIFIED_HANDLER,
   HistoryAction,
+  KEEP_ALIVE_LIMIT,
   RN_BRIDGE_HANDLER,
   STACK_BRIDGE_METHODS,
   STACK_TRANSITION_MS,
@@ -1539,6 +1914,7 @@ export {
   serializeBridgeMessage,
   toStackPath,
   useActivity,
+  useOnRevive,
   useParams,
   useStackRouter,
   waitForBridgeHost