react-panel-layout 0.6.1 → 0.7.0

package/dist/stack.js

@@ -1,28 +1,28 @@
-import { jsx as P, Fragment as j, jsxs as q } from "react/jsx-runtime";
+import { jsx as O, Fragment as Y, jsxs as j } from "react/jsx-runtime";
 import * as r from "react";
-import { S as J, s as Q, t as Z, u as z } from "./styles-NkjuMOVS.js";
-import { u as ee } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
-import { u as te } from "./useContentCache-CO3LYNmz.js";
-import { u as ne, a as re, m as se, I as ie } from "./useNativeGestureGuard-CGYo6O0r.js";
-function ce(t) {
-  const { wasActive: e, isActive: n, transitionMode: i } = t;
-  return i !== "css" || e === n ? null : n ? "push" : "pop";
+import { S as J, s as q, t as Q, u as Z } from "./styles-NkjuMOVS.js";
+import { u as z } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { u as ee } from "./useContentCache-CO3LYNmz.js";
+import { u as te, a as ne, m as re, I as se, i as ie, b as oe, e as ae } from "./useAnimationFrame-Bg4e-H8O.js";
+function ce(n) {
+  const { wasActive: e, isActive: t, transitionMode: i } = n;
+  return i !== "css" || e === t ? null : t ? "push" : "pop";
 }
-function oe(t) {
+function ue(n) {
   const {
     displayMode: e,
-    depth: n,
+    depth: t,
     navigationDepth: i,
-    isActive: o,
-    isAnimatingOut: c,
+    isActive: c,
+    isAnimatingOut: o,
     isRevealing: u,
     revealDepth: s
-  } = t;
-  return e === "overlay" ? o || c || u && n === s ? "visible" : "hidden" : n <= i || c ? "visible" : "hidden";
+  } = n;
+  return e === "overlay" ? c || o || u && t === s ? "visible" : "hidden" : t <= i || o ? "visible" : "hidden";
 }
-function ae(t) {
-  const { depth: e, activeDepth: n, displayMode: i, isRevealing: o, revealDepth: c } = t, u = e === n, s = e < n;
-  if (o && u && c !== null)
+function le(n) {
+  const { depth: e, activeDepth: t, displayMode: i, isRevealing: c, revealDepth: o } = n, u = e === t, s = e < t;
+  if (c && u && o !== null)
     return `translateX(${0.3 * 100}%)`;
   if (u)
     return "translateX(0)";
@@ -33,91 +33,91 @@ function ae(t) {
       case "slide":
         return "translateX(-30%)";
       case "stack": {
-        const l = (n - e) * -5, f = 1 - (n - e) * 0.05;
+        const l = (t - e) * -5, f = 1 - (t - e) * 0.05;
         return `translateX(${l}%) scale(${f})`;
       }
     }
   return "translateX(100%)";
 }
-function ue(t, e, n) {
-  return e === void 0 || e <= 0 || !n ? t : `translateX(${e * 100}%)`;
+function fe(n, e, t) {
+  return e === void 0 || e <= 0 || !t ? n : `translateX(${e * 100}%)`;
 }
-function le(t) {
-  if (t === "css")
-    return `transform ${J} ${Q}`;
+function pe(n) {
+  if (n === "css")
+    return `transform ${J} ${q}`;
 }
-function fe(t) {
+function de(n) {
   const {
     depth: e,
-    isActive: n,
+    isActive: t,
     wasActive: i,
-    currentAnimationType: o,
-    displayMode: c,
+    currentAnimationType: c,
+    displayMode: o,
     transitionMode: u,
     navigationState: s,
     swipeProgress: l
-  } = t, m = ce({
+  } = n, m = ce({
     wasActive: i,
-    isActive: n,
+    isActive: t,
     transitionMode: u
-  }) ?? o, v = m === "pop", a = oe({
-    displayMode: c,
+  }) ?? c, g = m === "pop", a = ue({
+    displayMode: o,
     depth: e,
     navigationDepth: s.depth,
-    isActive: n,
-    isAnimatingOut: v,
+    isActive: t,
+    isAnimatingOut: g,
     isRevealing: s.isRevealing,
     revealDepth: s.revealDepth
-  }), g = ae({
+  }), v = le({
     depth: e,
     activeDepth: s.depth,
-    displayMode: c,
+    displayMode: o,
     isRevealing: s.isRevealing,
     revealDepth: s.revealDepth
-  }), R = ue(g, l, n), A = (() => {
+  }), y = fe(v, l, t), A = (() => {
     if (u === "css") {
       if (m === "push")
-        return Z;
+        return Q;
       if (m === "pop")
-        return z;
+        return Z;
     }
-  })(), d = le(u);
+  })(), d = pe(u);
   return {
     nextAnimationType: m,
     visibility: a,
-    transform: R,
+    transform: y,
     animation: A,
     transition: d,
     zIndex: e,
-    pointerEvents: n ? "auto" : "none"
+    pointerEvents: t ? "auto" : "none"
   };
 }
-const pe = {
+const me = {
   position: "absolute",
   inset: 0,
   width: "100%",
   height: "100%"
-}, de = r.memo(
-  ({ id: t, depth: e, isActive: n, displayMode: i, transitionMode: o, navigationState: c, swipeProgress: u, children: s }) => {
-    const l = r.useRef(null), f = r.useRef(n), [m, v] = r.useState(null), a = fe({
+}, he = r.memo(
+  ({ id: n, depth: e, isActive: t, displayMode: i, transitionMode: c, navigationState: o, swipeProgress: u, children: s }) => {
+    const l = r.useRef(null), f = r.useRef(t), [m, g] = r.useState(null), a = de({
       depth: e,
-      isActive: n,
+      isActive: t,
       wasActive: f.current,
       currentAnimationType: m,
       displayMode: i,
-      transitionMode: o,
-      navigationState: c,
+      transitionMode: c,
+      navigationState: o,
       swipeProgress: u
     });
-    ee(() => {
+    z(() => {
       const d = f.current;
-      f.current = n, d !== n && v(a.nextAnimationType);
-    }, [n, a.nextAnimationType]);
-    const g = r.useCallback((d) => {
-      d.target === d.currentTarget && v(null);
-    }, []), R = r.useMemo(() => {
+      f.current = t, d !== t && g(a.nextAnimationType);
+    }, [t, a.nextAnimationType]);
+    const v = r.useCallback((d) => {
+      d.target === d.currentTarget && g(null);
+    }, []), y = r.useMemo(() => {
       const d = {
-        ...pe,
+        ...me,
         transform: a.transform,
         pointerEvents: a.pointerEvents,
         zIndex: a.zIndex,
@@ -131,120 +131,120 @@ const pe = {
       a.visibility,
       a.animation,
       a.transition
-    ]), A = /* @__PURE__ */ P(
+    ]), A = /* @__PURE__ */ O(
       "div",
       {
         ref: l,
-        "data-stack-content": t,
+        "data-stack-content": n,
         "data-depth": e,
-        "data-active": n ? "true" : "false",
-        style: R,
-        onAnimationEnd: g,
+        "data-active": t ? "true" : "false",
+        style: y,
+        onAnimationEnd: v,
         children: s
       }
     );
-    return o === "none" ? /* @__PURE__ */ P(r.Activity, { mode: n ? "visible" : "hidden", children: A }) : A;
+    return c === "none" ? /* @__PURE__ */ O(r.Activity, { mode: t ? "visible" : "hidden", children: A }) : A;
   }
 );
-function me(t, e) {
+function ve(n, e) {
   switch (e.type) {
     case "push":
-      return [...t, e.id];
+      return [...n, e.id];
     case "go": {
       if (e.direction >= 0)
-        return t;
-      const i = t.length - 1 + e.direction;
-      return i < 0 ? t : t.slice(0, i + 1);
+        return n;
+      const i = n.length - 1 + e.direction;
+      return i < 0 ? n : n.slice(0, i + 1);
     }
     case "move":
-      return e.targetDepth < 0 || e.targetDepth >= t.length ? t : t.slice(0, e.targetDepth + 1);
+      return e.targetDepth < 0 || e.targetDepth >= n.length ? n : n.slice(0, e.targetDepth + 1);
     case "replace":
-      return t.length === 0 ? [e.id] : [...t.slice(0, -1), e.id];
+      return n.length === 0 ? [e.id] : [...n.slice(0, -1), e.id];
   }
 }
-const G = r.createContext(null), he = r.memo(() => {
-  const t = r.useContext(G);
-  if (!t)
+const G = r.createContext(null), ge = r.memo(() => {
+  const n = r.useContext(G);
+  if (!n)
     throw new Error("StackOutlet must be used within useStackNavigation");
   const [, e] = r.useReducer((s) => s + 1, 0);
-  r.useEffect(() => t.subscribe(e), [t]);
-  const { panels: n, navigationState: i, displayMode: o, transitionMode: c } = t.getState(), u = r.useMemo(() => i.stack.map((s, l) => {
-    const f = n.find((m) => m.id === s);
+  r.useEffect(() => n.subscribe(e), [n]);
+  const { panels: t, navigationState: i, displayMode: c, transitionMode: o } = n.getState(), u = r.useMemo(() => i.stack.map((s, l) => {
+    const f = t.find((m) => m.id === s);
     return f ? { panel: f, depth: l } : null;
-  }).filter((s) => s !== null), [i.stack, n]);
-  return /* @__PURE__ */ P(j, { children: u.map(({ panel: s, depth: l }) => /* @__PURE__ */ P(
-    de,
+  }).filter((s) => s !== null), [i.stack, t]);
+  return /* @__PURE__ */ O(Y, { children: u.map(({ panel: s, depth: l }) => /* @__PURE__ */ O(
+    he,
     {
       id: s.id,
       depth: l,
       isActive: l === i.depth,
-      displayMode: o,
-      transitionMode: c,
+      displayMode: c,
+      transitionMode: o,
       navigationState: i,
-      children: s.cache ? t.getCachedContent(s.id) : s.content
+      children: s.cache ? n.getCachedContent(s.id) : s.content
     },
     s.id
   )) });
 });
-function Ve(t) {
+function Ge(n) {
   const {
     panels: e,
-    initialPanelId: n,
+    initialPanelId: t,
     displayMode: i,
-    transitionMode: o = "css",
-    onPanelChange: c
-  } = t, u = n ?? e[0]?.id;
+    transitionMode: c = "css",
+    onPanelChange: o
+  } = n, u = t ?? e[0]?.id;
   if (!u)
     throw new Error("useStackNavigation: No panels provided");
   const [s, l] = r.useReducer(
-    me,
+    ve,
     [u]
   ), f = r.useRef(s);
   f.current = s;
   const m = r.useRef(s);
   r.useEffect(() => {
     const p = m.current;
-    if (m.current = s, c && s !== p) {
-      const C = s.length - 1, b = s[C];
-      b !== void 0 && c(b, C);
+    if (m.current = s, o && s !== p) {
+      const k = s.length - 1, b = s[k];
+      b !== void 0 && o(b, k);
     }
-  }, [s, c]);
-  const [v, a] = r.useState({ isRevealing: !1, revealDepth: null }), g = s.length - 1, R = r.useMemo(() => ({
+  }, [s, o]);
+  const [g, a] = r.useState({ isRevealing: !1, revealDepth: null }), v = s.length - 1, y = r.useMemo(() => ({
     stack: s,
-    depth: g,
-    isRevealing: v.isRevealing,
-    revealDepth: v.revealDepth
-  }), [s, g, v.isRevealing, v.revealDepth]), A = s[g], d = g > 0 ? s[g - 1] : null, h = r.useCallback((p) => {
+    depth: v,
+    isRevealing: g.isRevealing,
+    revealDepth: g.revealDepth
+  }), [s, v, g.isRevealing, g.revealDepth]), A = s[v], d = v > 0 ? s[v - 1] : null, h = r.useCallback((p) => {
     e.find((b) => b.id === p) && l({ type: "push", id: p });
-  }, [e]), y = r.useCallback((p) => {
+  }, [e]), R = r.useCallback((p) => {
     l({ type: "go", direction: p });
-  }, []), k = r.useCallback((p) => {
+  }, []), C = r.useCallback((p) => {
     l({ type: "move", targetDepth: p });
-  }, []), M = r.useCallback((p) => {
+  }, []), w = r.useCallback((p) => {
     e.find((b) => b.id === p) && l({ type: "replace", id: p });
-  }, [e]), w = r.useCallback((p) => p >= 0 ? !1 : f.current.length - 1 + p >= 0, []), _ = r.useCallback((p) => {
-    const C = f.current.length - 1, b = p ?? C - 1;
-    b < 0 || b >= C || a({ isRevealing: !0, revealDepth: b });
-  }, []), F = r.useCallback(() => {
+  }, [e]), M = r.useCallback((p) => p >= 0 ? !1 : f.current.length - 1 + p >= 0, []), _ = r.useCallback((p) => {
+    const k = f.current.length - 1, b = p ?? k - 1;
+    b < 0 || b >= k || a({ isRevealing: !0, revealDepth: b });
+  }, []), $ = r.useCallback(() => {
     f.current.length - 1 !== 0 && a({ isRevealing: !0, revealDepth: 0 });
   }, []), x = r.useCallback(() => {
     a({ isRevealing: !1, revealDepth: null });
   }, []), N = r.useCallback((p) => {
-    const C = f.current, b = C.indexOf(p), X = C.length - 1, L = b === X;
+    const k = f.current, b = k.indexOf(p), X = k.length - 1, F = b === X;
     return {
       "data-stack-panel": p,
       "data-depth": b,
-      "data-active": L ? "true" : "false",
-      "aria-hidden": !L
+      "data-active": F ? "true" : "false",
+      "aria-hidden": !F
     };
   }, []), T = r.useCallback(() => {
-    const p = f.current, C = p.length - 1, b = C > 0, X = C > 0 ? p[C - 1] : null, L = X ? e.find((Y) => Y.id === X) : null, H = L?.title ? `Back to ${L.title}` : "Go back";
+    const p = f.current, k = p.length - 1, b = k > 0, X = k > 0 ? p[k - 1] : null, F = X ? e.find((H) => H.id === X) : null, W = F?.title ? `Back to ${F.title}` : "Go back";
     return {
-      onClick: () => y(-1),
+      onClick: () => R(-1),
       disabled: !b,
-      "aria-label": H
+      "aria-label": W
     };
-  }, [e, y]), D = r.useMemo(
+  }, [e, R]), S = r.useMemo(
     () => ({
       position: "relative",
       width: "100%",
@@ -252,86 +252,86 @@ function Ve(t) {
       overflow: "hidden"
     }),
     []
-  ), I = r.useRef({
+  ), D = r.useRef({
     panels: e,
-    navigationState: R,
+    navigationState: y,
     displayMode: i,
-    transitionMode: o
+    transitionMode: c
   });
-  I.current = {
+  D.current = {
     panels: e,
-    navigationState: R,
+    navigationState: y,
     displayMode: i,
-    transitionMode: o
+    transitionMode: c
   };
   const E = r.useRef(/* @__PURE__ */ new Set());
   r.useEffect(() => {
     E.current.forEach((p) => p());
-  }, [R, i, o]);
+  }, [y, i, c]);
   const U = r.useCallback(
-    (p) => I.current.panels.find((b) => b.id === p)?.content ?? null,
+    (p) => D.current.panels.find((b) => b.id === p)?.content ?? null,
     []
-  ), S = r.useMemo(() => e.map((p) => p.id), [e]), { getCachedContent: O } = te({
+  ), I = r.useMemo(() => e.map((p) => p.id), [e]), { getCachedContent: P } = ee({
     resolveContent: U,
-    validIds: S
-  }), $ = r.useMemo(
+    validIds: I
+  }), L = r.useMemo(
     () => ({
-      getState: () => I.current,
+      getState: () => D.current,
       subscribe: (p) => (E.current.add(p), () => E.current.delete(p)),
-      getCachedContent: O
+      getCachedContent: P
     }),
-    [O]
-  ), W = r.useMemo(() => {
-    const p = () => /* @__PURE__ */ P(G.Provider, { value: $, children: /* @__PURE__ */ P("div", { style: D, "data-stack-container": !0, children: /* @__PURE__ */ P(he, {}) }) });
+    [P]
+  ), K = r.useMemo(() => {
+    const p = () => /* @__PURE__ */ O(G.Provider, { value: L, children: /* @__PURE__ */ O("div", { style: S, "data-stack-container": !0, children: /* @__PURE__ */ O(ge, {}) }) });
     return p.displayName = "StackOutlet", p;
-  }, [$, D]);
+  }, [L, S]);
   return {
-    state: R,
+    state: y,
     push: h,
-    go: y,
-    move: k,
-    replace: M,
+    go: R,
+    move: C,
+    replace: w,
     revealParent: _,
-    revealRoot: F,
+    revealRoot: $,
     dismissReveal: x,
     getPanelProps: N,
     getBackButtonProps: T,
-    canGo: w,
+    canGo: M,
     currentPanelId: A,
     previousPanelId: d,
-    Outlet: W
+    Outlet: K
   };
 }
-function Ke(t) {
+function Ve(n) {
   const {
     containerRef: e,
-    navigation: n,
+    navigation: t,
     edge: i = "left",
-    edgeWidth: o = 20,
-    enabled: c = !0
-  } = t, [u, s] = r.useState(null), l = r.useCallback(
+    edgeWidth: c = 20,
+    enabled: o = !0
+  } = n, [u, s] = r.useState(null), l = r.useCallback(
     (d) => {
-      s(null), i === "left" && d.direction === 1 && n.canGo(-1) && n.go(-1);
+      s(null), i === "left" && d.direction === 1 && t.canGo(-1) && t.go(-1);
     },
-    [i, n]
-  ), { isEdgeGesture: f, state: m, containerProps: v } = ne({
+    [i, t]
+  ), { isEdgeGesture: f, state: m, containerProps: g } = te({
     containerRef: e,
     edge: i,
-    edgeWidth: o,
-    enabled: c ? n.canGo(-1) : !1,
+    edgeWidth: c,
+    enabled: o ? t.canGo(-1) : !1,
     // Only enable if can go back
     onSwipeEnd: l
   });
   r.useEffect(() => {
     f && (m.phase === "swiping" || m.phase === "tracking") ? s(m) : m.phase === "idle" && s(null);
   }, [f, m]);
-  const { containerProps: a } = re({
+  const { containerProps: a } = ne({
     containerRef: e,
     active: f,
     preventEdgeBack: !0,
     preventOverscroll: !0,
-    edgeWidth: o
-  }), g = r.useMemo(() => {
+    edgeWidth: c
+  }), v = r.useMemo(() => {
     if (!u || !e.current)
       return 0;
     const d = e.current.clientWidth;
@@ -340,224 +340,183 @@ function Ke(t) {
     const h = u.displacement.x;
     if (i === "left" && h <= 0 || i === "right" && h >= 0)
       return 0;
-    const y = Math.abs(h);
-    return Math.min(y / d, 1);
-  }, [u, e, i]), R = r.useMemo(
-    () => se(v, a),
-    [v, a]
+    const R = Math.abs(h);
+    return Math.min(R / d, 1);
+  }, [u, e, i]), y = r.useMemo(
+    () => re(g, a),
+    [g, a]
   );
   return {
     isEdgeSwiping: f,
-    progress: g,
-    inputState: f ? m : ie,
-    containerProps: R
+    progress: v,
+    inputState: f ? m : se,
+    containerProps: y
   };
 }
-const V = {
-  /** Ease out expo (similar to cubic-bezier(0.22, 1, 0.36, 1)) */
-  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
-}, ve = 300;
-function ge(t) {
-  const {
-    duration: e = ve,
-    easing: n = V.easeOutExpo,
-    onFrame: i,
-    onComplete: o
-  } = t, [c, u] = r.useState(!1), s = r.useRef(null), l = r.useRef(null), f = r.useRef(i), m = r.useRef(o);
-  r.useEffect(() => {
-    f.current = i, m.current = o;
-  }, [i, o]);
-  const v = r.useCallback(() => {
-    s.current !== null && (cancelAnimationFrame(s.current), s.current = null), l.current = null, u(!1);
-  }, []), a = r.useCallback(() => {
-    v(), u(!0), l.current = null;
-    const g = (R) => {
-      l.current === null && (l.current = R);
-      const A = R - l.current, d = Math.min(A / e, 1), h = n(d), y = d >= 1, k = {
-        progress: d,
-        easedProgress: h,
-        elapsed: A,
-        isComplete: y
-      };
-      f.current?.(k), y ? (s.current = null, l.current = null, u(!1), m.current?.()) : s.current = requestAnimationFrame(g);
-    };
-    s.current = requestAnimationFrame(g);
-  }, [e, n, v]);
-  return r.useEffect(() => () => {
-    s.current !== null && cancelAnimationFrame(s.current);
-  }, []), {
-    isAnimating: c,
-    start: a,
-    cancel: v
-  };
-}
-function Re(t, e, n) {
-  return t + (e - t) * n;
-}
-const Ae = 300, B = (t) => t === "horizontal" ? "translateX" : "translateY", ye = (t, e, n, i) => t || e === void 0 || e <= 0 || n === void 0 || n === i ? null : { from: n, to: i }, be = (t, e, n, i, o, c, u) => t === e ? { type: "none" } : i ? { type: "none" } : o ? { type: "none" } : c ? Math.abs(n - t) <= 1 ? { type: "snap", position: t } : u ? n > t ? { type: "snap", position: t } : { type: "animate", animation: { from: n, to: t } } : { type: "animate", animation: { from: n, to: t } } : { type: "snap", position: t }, Ce = (t, e, n) => t === void 0 || t === e || t <= 0 ? null : n;
-function ke(t) {
+const ye = 300, B = (n) => n === "horizontal" ? "translateX" : "translateY", Ae = (n, e, t, i) => n || e === void 0 || e <= 0 || t === void 0 || t === i ? null : { from: t, to: i }, Re = (n, e, t, i, c, o, u) => n === e ? { type: "none" } : i ? { type: "none" } : c ? { type: "none" } : o ? Math.abs(t - n) <= 1 ? { type: "snap", position: n } : u ? t > n ? { type: "snap", position: n } : { type: "animate", animation: { from: t, to: n } } : { type: "animate", animation: { from: t, to: n } } : { type: "snap", position: n }, be = (n, e, t) => n === void 0 || n === e || n <= 0 ? null : t;
+function ke(n) {
   const {
     elementRef: e,
-    targetPx: n,
+    targetPx: t,
     displacement: i,
-    isOperating: o,
-    axis: c = "horizontal",
-    animationDuration: u = Ae,
+    isOperating: c,
+    axis: o = "horizontal",
+    animationDuration: u = ye,
     containerSize: s,
     animateOnTargetChange: l = !1,
     initialPx: f,
     skipTargetChangeAnimation: m = !1
-  } = t, v = f ?? n, a = r.useRef(v), g = r.useRef(null), R = r.useRef(n), A = r.useRef(s), d = r.useRef(null), h = r.useRef(!1), y = ye(
+  } = n, g = f ?? t, a = r.useRef(g), v = r.useRef(null), y = r.useRef(t), A = r.useRef(s), d = r.useRef(null), h = r.useRef(!1), R = Ae(
     h.current,
     s,
     f,
-    n
+    t
   );
-  y !== null && (d.current = y, h.current = !0);
-  const k = be(
-    n,
-    R.current,
+  R !== null && (d.current = R, h.current = !0);
+  const C = Re(
+    t,
+    y.current,
     a.current,
-    o,
-    g.current !== null,
+    c,
+    v.current !== null,
     l,
     m
   );
-  k.type === "animate" ? (d.current = k.animation, R.current = n) : k.type === "snap" && (a.current = k.position, R.current = n);
-  const M = Ce(
+  C.type === "animate" ? (d.current = C.animation, y.current = t) : C.type === "snap" && (a.current = C.position, y.current = t);
+  const w = be(
     s,
     A.current,
-    n
+    t
   );
-  M !== null && (a.current = M, A.current = s);
-  const w = r.useCallback(
+  w !== null && (a.current = w, A.current = s);
+  const M = r.useCallback(
     ({ easedProgress: T }) => {
-      const D = e.current, I = g.current;
-      if (!D || !I)
+      const S = e.current, D = v.current;
+      if (!S || !D)
         return;
-      const E = Re(I.from, I.to, T);
-      a.current = E, D.style.transform = `${B(c)}(${E}px)`;
+      const E = ie(D.from, D.to, T);
+      a.current = E, S.style.transform = `${B(o)}(${E}px)`;
     },
-    [c, e]
+    [o, e]
   ), _ = r.useCallback(() => {
-    g.current = null, a.current = n, R.current = n;
-  }, [n]), { isAnimating: F, start: x, cancel: N } = ge({
+    v.current = null, a.current = t, y.current = t;
+  }, [t]), { isAnimating: $, start: x, cancel: N } = oe({
     duration: u,
-    easing: V.easeOutExpo,
-    onFrame: w,
+    easing: ae.easeOutExpo,
+    onFrame: M,
     onComplete: _
   });
   return r.useLayoutEffect(() => {
-    if (o) {
-      N(), g.current = null, d.current = null;
+    if (c) {
+      N(), v.current = null, d.current = null;
       return;
     }
     if (d.current) {
-      const I = d.current;
-      g.current = I, d.current = null;
+      const D = d.current;
+      v.current = D, d.current = null;
       const E = e.current;
-      E && (E.style.transform = `${B(c)}(${I.from}px)`), x();
+      E && (E.style.transform = `${B(o)}(${D.from}px)`), x();
       return;
     }
     const T = a.current;
-    Math.abs(T - n) > 1 ? (g.current = { from: T, to: n }, x()) : (a.current = n, R.current = n);
-  }, [o, n, x, N]), r.useLayoutEffect(() => {
+    Math.abs(T - t) > 1 ? (v.current = { from: T, to: t }, x()) : (a.current = t, y.current = t);
+  }, [c, t, x, N]), r.useLayoutEffect(() => {
     const T = e.current;
-    if (!T || F || g.current !== null || d.current !== null)
+    if (!T || $ || v.current !== null || d.current !== null)
       return;
-    const D = n + i;
-    a.current = D, T.style.transform = `${B(c)}(${D}px)`;
-  }, [n, i, c, F, e]), {
-    isAnimating: F,
+    const S = t + i;
+    a.current = S, T.style.transform = `${B(o)}(${S}px)`;
+  }, [t, i, o, $, e]), {
+    isAnimating: $,
     currentPx: a.current,
-    animationDirection: g.current
+    animationDirection: v.current
   };
 }
-function Te(t, e) {
-  const n = r.useRef(e), i = r.useRef(t), o = r.useRef(!1), u = n.current && !e, s = t !== i.current, l = e && s, v = o.current || l || u && s, a = e ? i.current : t;
+function Ce(n, e) {
+  const t = r.useRef(e), i = r.useRef(n), c = r.useRef(!1), u = t.current ? !e : !1, s = n !== i.current, l = e ? s : !1, g = (c.current ? !0 : l) ? !0 : u ? s : !1, a = e ? i.current : n;
   return r.useLayoutEffect(() => {
-    e ? l && (o.current = !0) : (o.current = !1, i.current = t), n.current = e;
+    e ? l && (c.current = !0) : (c.current = !1, i.current = n), t.current = e;
   }), {
     value: a,
-    changedDuringOperation: v,
+    changedDuringOperation: g,
     operationJustEnded: u
   };
 }
-const K = -0.3;
-function De(t) {
-  return Math.max(0, t);
+const V = -0.3;
+function Te(n) {
+  return Math.max(0, n);
 }
-function Ie(t, e, n = K) {
+function Se(n, e, t = V) {
   if (e <= 0)
     return 0;
-  const i = Math.max(0, t), o = Math.min(i / e, 1), c = n * e, u = Math.abs(n) * o * e;
-  return c + u;
+  const i = Math.max(0, n), c = Math.min(i / e, 1), o = t * e, u = Math.abs(t) * c * e;
+  return o + u;
 }
-function Se(t) {
-  const { depth: e, navigationDepth: n, isActive: i, isOperating: o, isAnimating: c } = t;
-  return !!(i || e === n - 1 && (o || c));
+function De(n) {
+  const { depth: e, navigationDepth: t, isActive: i, isOperating: c, isAnimating: o } = n;
+  return !!(i || e === t - 1 && (c || o));
 }
-function Ee(t, e) {
-  return t === e ? "active" : t === e - 1 ? "behind" : "hidden";
+function Ie(n, e) {
+  return n === e ? "active" : n === e - 1 ? "behind" : "hidden";
 }
-const Me = 300, we = 0.05, xe = 0.1, Oe = {
+const Ee = 300, we = 0.05, Me = 0.1, xe = {
   position: "absolute",
   inset: 0,
   width: "100%",
   height: "100%"
-}, Pe = (t, e) => t.phase === "idle" ? 0 : e === "horizontal" ? t.displacement.x : t.displacement.y, Ne = "-5px 0 15px rgba(0, 0, 0, 0.1)", _e = r.memo(
+}, Pe = (n, e) => n.phase === "idle" ? 0 : e === "horizontal" ? n.displacement.x : n.displacement.y, Oe = "-5px 0 15px rgba(0, 0, 0, 0.1)", Ne = r.memo(
   ({
-    id: t,
+    id: n,
     depth: e,
-    navigationDepth: n,
+    navigationDepth: t,
     isActive: i,
-    operationState: o,
-    containerSize: c,
+    operationState: c,
+    containerSize: o,
     axis: u = "horizontal",
-    behindOffset: s = K,
-    animationDuration: l = Me,
+    behindOffset: s = V,
+    animationDuration: l = Ee,
     animateOnMount: f = !1,
     showShadow: m = !0,
-    displayMode: v = "overlay",
+    displayMode: g = "overlay",
     showDimming: a = !0,
-    children: g
+    children: v
   }) => {
-    const R = r.useRef(null), A = Pe(o, u), d = o.phase === "operating", h = Ee(e, n), { value: y, changedDuringOperation: k } = Te(
+    const y = r.useRef(null), A = Pe(c, u), d = c.phase === "operating", h = Ie(e, t), { value: R, changedDuringOperation: C } = Ce(
       h,
       A > 0
-    ), M = r.useMemo(() => {
-      switch (y) {
+    ), w = r.useMemo(() => {
+      switch (R) {
         case "active":
           return 0;
         case "behind":
-          return s * c;
+          return s * o;
         case "hidden":
-          return c;
+          return o;
       }
-    }, [y, s, c]), w = r.useMemo(() => {
+    }, [R, s, o]), M = r.useMemo(() => {
       if (A <= 0)
         return 0;
-      switch (y) {
+      switch (R) {
         case "active":
-          return De(A);
+          return Te(A);
         case "behind": {
-          const S = Ie(A, c, s), O = s * c;
-          return S - O;
+          const I = Se(A, o, s), P = s * o;
+          return I - P;
         }
         case "hidden":
           return 0;
       }
-    }, [y, A, c, s]), _ = r.useMemo(() => {
+    }, [R, A, o, s]), _ = r.useMemo(() => {
       if (f && h === "active" && e > 0)
-        return c;
-    }, [f, h, e, c]), { isAnimating: F } = ke({
-      elementRef: R,
-      targetPx: M,
-      displacement: w,
+        return o;
+    }, [f, h, e, o]), { isAnimating: $ } = ke({
+      elementRef: y,
+      targetPx: w,
+      displacement: M,
       isOperating: d,
       axis: u,
       animationDuration: l,
-      containerSize: c,
+      containerSize: o,
       // Animate when targetPx changes (button navigation)
       animateOnTargetChange: !0,
       // For push animation: start from off-screen
@@ -566,108 +525,108 @@ const Me = 300, we = 0.05, xe = 0.1, Oe = {
       // This handles over-swipe where panel moves beyond 100% and needs to snap back.
       // useSwipeContentTransform allows forward animations (normal swipe-to-complete)
       // but skips backward animations (over-swipe snap).
-      skipTargetChangeAnimation: k
-    }), x = Se({
+      skipTargetChangeAnimation: C
+    }), x = De({
       depth: e,
-      navigationDepth: n,
+      navigationDepth: t,
       isActive: i,
       isOperating: d,
-      isAnimating: F
-    }), N = r.useMemo(() => c <= 0 || A <= 0 ? 0 : Math.min(A / c, 1), [A, c]), T = r.useMemo(() => {
-      if (v !== "stack")
+      isAnimating: $
+    }), N = r.useMemo(() => o <= 0 || A <= 0 ? 0 : Math.min(A / o, 1), [A, o]), T = r.useMemo(() => {
+      if (g !== "stack")
         return 1;
-      const S = n - e;
+      const I = t - e;
       if (h === "active")
         return 1;
       if (h === "behind") {
-        const O = 1 - S * we;
-        return O + N * (1 - O);
+        const P = 1 - I * we;
+        return P + N * (1 - P);
       }
       return 1;
-    }, [v, h, e, n, N]), D = r.useMemo(() => !a || h !== "behind" ? 0 : xe * (1 - N), [a, h, N]);
+    }, [g, h, e, t, N]), S = r.useMemo(() => !a || h !== "behind" ? 0 : Me * (1 - N), [a, h, N]);
     r.useLayoutEffect(() => {
-      const S = R.current;
-      S && (S.style.visibility = x ? "visible" : "hidden");
+      const I = y.current;
+      I && (I.style.visibility = x ? "visible" : "hidden");
     }, [x]), r.useLayoutEffect(() => {
-      const S = R.current;
-      if (!S || v !== "stack")
+      const I = y.current;
+      if (!I || g !== "stack")
         return;
-      const O = S.style.transform;
-      if (O.includes("translateX")) {
-        const $ = O.match(/translateX\([^)]+\)/);
-        $ && (S.style.transform = `${$[0]} scale(${T})`);
+      const P = I.style.transform;
+      if (P.includes("translateX")) {
+        const L = P.match(/translateX\([^)]+\)/);
+        L && (I.style.transform = `${L[0]} scale(${T})`);
       } else
-        S.style.transform = `scale(${T})`;
-    }, [T, v]);
-    const I = m ? e > 0 && h === "active" : !1, E = r.useMemo(
+        I.style.transform = `scale(${T})`;
+    }, [T, g]);
+    const D = m ? e > 0 && h === "active" : !1, E = r.useMemo(
       () => ({
-        ...Oe,
+        ...xe,
         pointerEvents: i ? "auto" : "none",
         willChange: "transform",
         zIndex: e,
         visibility: x ? "visible" : "hidden",
-        boxShadow: I ? Ne : void 0
+        boxShadow: D ? Oe : void 0
       }),
-      [i, e, x, I]
-    ), U = r.useMemo(() => D <= 0 ? null : {
+      [i, e, x, D]
+    ), U = r.useMemo(() => S <= 0 ? null : {
       position: "absolute",
       inset: 0,
-      backgroundColor: `rgba(0, 0, 0, ${D})`,
+      backgroundColor: `rgba(0, 0, 0, ${S})`,
       pointerEvents: "none",
       zIndex: 1
-    }, [D]);
-    return /* @__PURE__ */ q(
+    }, [S]);
+    return /* @__PURE__ */ j(
       "div",
       {
-        ref: R,
-        "data-stack-content": t,
+        ref: y,
+        "data-stack-content": n,
         "data-depth": e,
         "data-active": i ? "true" : "false",
         "data-role": h,
         style: E,
         children: [
-          g,
-          U != null ? /* @__PURE__ */ P("div", { style: U, "data-dimming-overlay": !0 }) : null
+          v,
+          U != null ? /* @__PURE__ */ O("div", { style: U, "data-dimming-overlay": !0 }) : null
         ]
       }
     );
   }
-), Fe = 300;
-function $e(t, e, n) {
-  const { stack: i, depth: o } = e, c = [o];
-  o > 0 && c.push(o - 1);
+), _e = 300;
+function $e(n, e, t) {
+  const { stack: i, depth: c } = e, o = [c];
+  c > 0 && o.push(c - 1);
   const u = [];
-  for (const s of c) {
-    const l = i[s], f = t.find((m) => m.id === l);
+  for (const s of o) {
+    const l = i[s], f = n.find((m) => m.id === l);
     f && u.push({ panel: f, depth: s, isExiting: !1 });
   }
-  if (n != null && !u.some((l) => l.panel.id === n)) {
-    const l = t.find((f) => f.id === n);
-    l && u.push({ panel: l, depth: o + 1, isExiting: !0 });
+  if (t != null && !u.some((l) => l.panel.id === t)) {
+    const l = n.find((f) => f.id === t);
+    l && u.push({ panel: l, depth: c + 1, isExiting: !0 });
   }
   return u.sort((s, l) => s.depth - l.depth);
 }
-const We = r.memo(
+const Ke = r.memo(
   ({
-    panels: t,
+    panels: n,
     navigationState: e,
-    operationState: n,
+    operationState: t,
     containerSize: i,
-    getCachedContent: o,
-    behindOffset: c,
+    getCachedContent: c,
+    behindOffset: o,
     animateOnMount: u = !1,
-    animationDuration: s = Fe,
+    animationDuration: s = _e,
     showShadow: l,
     displayMode: f,
     showDimming: m
   }) => {
-    const [v, a] = r.useState(null), g = r.useRef(e.depth), R = r.useRef(e.stack);
+    const [g, a] = r.useState(null), v = r.useRef(e.depth), y = r.useRef(e.stack);
     r.useLayoutEffect(() => {
-      const h = g.current, y = R.current, { depth: k, stack: M } = e;
-      if (g.current = k, R.current = M, k < h) {
-        const w = y[h];
-        if (w != null) {
-          a(w);
+      const h = v.current, R = y.current, { depth: C, stack: w } = e;
+      if (v.current = C, y.current = w, C < h) {
+        const M = R[h];
+        if (M != null) {
+          a(M);
           const _ = setTimeout(() => {
             a(null);
           }, s);
@@ -676,8 +635,8 @@ const We = r.memo(
       }
     }, [e.depth, e.stack, s]);
     const A = r.useMemo(
-      () => $e(t, e, v),
-      [t, e, v]
+      () => $e(n, e, g),
+      [n, e, g]
     ), d = r.useMemo(
       () => ({
         position: "relative",
@@ -687,24 +646,24 @@ const We = r.memo(
       }),
       []
     );
-    return /* @__PURE__ */ P("div", { style: d, "data-swipe-stack-container": !0, children: A.map(({ panel: h, depth: y, isExiting: k }) => {
-      const M = y === e.depth && !k, w = o?.(h.id) ?? h.content;
-      return /* @__PURE__ */ P(
-        _e,
+    return /* @__PURE__ */ O("div", { style: d, "data-swipe-stack-container": !0, children: A.map(({ panel: h, depth: R, isExiting: C }) => {
+      const w = R === e.depth && !C, M = c?.(h.id) ?? h.content;
+      return /* @__PURE__ */ O(
+        Ne,
         {
           id: h.id,
-          depth: y,
+          depth: R,
           navigationDepth: e.depth,
-          isActive: M,
-          operationState: n,
+          isActive: w,
+          operationState: t,
           containerSize: i,
-          behindOffset: c,
+          behindOffset: o,
           animateOnMount: u,
           animationDuration: s,
           showShadow: l,
           displayMode: f,
           showDimming: m,
-          children: w
+          children: M
         },
         h.id
       );
@@ -712,10 +671,10 @@ const We = r.memo(
   }
 );
 export {
-  de as StackContent,
-  _e as SwipeStackContent,
-  We as SwipeStackOutlet,
-  Ve as useStackNavigation,
-  Ke as useStackSwipeInput
+  he as StackContent,
+  Ne as SwipeStackContent,
+  Ke as SwipeStackOutlet,
+  Ge as useStackNavigation,
+  Ve as useStackSwipeInput
 };
 //# sourceMappingURL=stack.js.map