react-panel-layout 0.6.0 → 0.6.1

package/dist/stack.js

@@ -1,234 +1,250 @@
-import { jsx as O, Fragment as Z, jsxs as J } from "react/jsx-runtime";
-import * as n from "react";
-import { S as Q, B as ee, E as te, I as ne } from "./styles-DPPuJ0sf.js";
-import { u as re } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
-import { u as se } from "./useContentCache-CO3LYNmz.js";
-import { a as oe } from "./useDocumentPointerEvents-CKdhGXd0.js";
-import { u as U } from "./useEffectEvent-Dp7HLCf0.js";
-function ce(r) {
-  const { wasActive: e, isActive: t, transitionMode: s } = r;
-  return s !== "css" || e === t ? null : t ? "push" : "pop";
+import { jsx as P, Fragment as j, jsxs as q } 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";
 }
-function ie(r) {
+function oe(t) {
   const {
     displayMode: e,
-    depth: t,
-    navigationDepth: s,
-    isActive: a,
+    depth: n,
+    navigationDepth: i,
+    isActive: o,
     isAnimatingOut: c,
     isRevealing: u,
-    revealDepth: i
-  } = r;
-  return e === "overlay" ? a || c || u && t === i ? "visible" : "hidden" : t <= s || c ? "visible" : "hidden";
+    revealDepth: s
+  } = t;
+  return e === "overlay" ? o || c || u && n === s ? "visible" : "hidden" : n <= i || c ? "visible" : "hidden";
 }
-function ae(r) {
-  const { depth: e, activeDepth: t, displayMode: s, isRevealing: a, revealDepth: c } = r, u = e === t, i = e < t;
-  if (a && u && c !== null)
+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)
     return `translateX(${0.3 * 100}%)`;
   if (u)
     return "translateX(0)";
-  if (i)
-    switch (s) {
+  if (s)
+    switch (i) {
       case "overlay":
         return "translateX(0)";
       case "slide":
         return "translateX(-30%)";
       case "stack": {
-        const f = (t - e) * -5, p = 1 - (t - e) * 0.05;
-        return `translateX(${f}%) scale(${p})`;
+        const l = (n - e) * -5, f = 1 - (n - e) * 0.05;
+        return `translateX(${l}%) scale(${f})`;
       }
     }
   return "translateX(100%)";
 }
-function ue(r, e, t) {
-  return e === void 0 || e <= 0 || !t ? r : `translateX(${e * 100}%)`;
+function ue(t, e, n) {
+  return e === void 0 || e <= 0 || !n ? t : `translateX(${e * 100}%)`;
 }
-function le(r) {
-  if (r === "css")
-    return `transform ${Q} ${ee}`;
+function le(t) {
+  if (t === "css")
+    return `transform ${J} ${Q}`;
 }
-function fe(r) {
+function fe(t) {
   const {
     depth: e,
-    isActive: t,
-    wasActive: s,
-    currentAnimationType: a,
+    isActive: n,
+    wasActive: i,
+    currentAnimationType: o,
     displayMode: c,
     transitionMode: u,
-    navigationState: i,
-    swipeProgress: f
-  } = r, o = ce({
-    wasActive: s,
-    isActive: t,
+    navigationState: s,
+    swipeProgress: l
+  } = t, m = ce({
+    wasActive: i,
+    isActive: n,
     transitionMode: u
-  }) ?? a, d = o === "pop", m = ie({
+  }) ?? o, v = m === "pop", a = oe({
     displayMode: c,
     depth: e,
-    navigationDepth: i.depth,
-    isActive: t,
-    isAnimatingOut: d,
-    isRevealing: i.isRevealing,
-    revealDepth: i.revealDepth
+    navigationDepth: s.depth,
+    isActive: n,
+    isAnimatingOut: v,
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
   }), g = ae({
     depth: e,
-    activeDepth: i.depth,
+    activeDepth: s.depth,
     displayMode: c,
-    isRevealing: i.isRevealing,
-    revealDepth: i.revealDepth
-  }), T = ue(g, f, t), v = (() => {
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
+  }), R = ue(g, l, n), A = (() => {
     if (u === "css") {
-      if (o === "push")
-        return te;
-      if (o === "pop")
-        return ne;
+      if (m === "push")
+        return Z;
+      if (m === "pop")
+        return z;
     }
-  })(), h = le(u);
+  })(), d = le(u);
   return {
-    nextAnimationType: o,
-    visibility: m,
-    transform: T,
-    animation: v,
-    transition: h,
+    nextAnimationType: m,
+    visibility: a,
+    transform: R,
+    animation: A,
+    transition: d,
     zIndex: e,
-    pointerEvents: t ? "auto" : "none"
+    pointerEvents: n ? "auto" : "none"
   };
 }
-const de = {
+const pe = {
   position: "absolute",
   inset: 0,
   width: "100%",
   height: "100%"
-}, pe = n.memo(
-  ({ id: r, depth: e, isActive: t, displayMode: s, transitionMode: a, navigationState: c, swipeProgress: u, children: i }) => {
-    const f = n.useRef(null), p = n.useRef(t), [o, d] = n.useState(null), m = fe({
+}, 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({
       depth: e,
-      isActive: t,
-      wasActive: p.current,
-      currentAnimationType: o,
-      displayMode: s,
-      transitionMode: a,
+      isActive: n,
+      wasActive: f.current,
+      currentAnimationType: m,
+      displayMode: i,
+      transitionMode: o,
       navigationState: c,
       swipeProgress: u
     });
-    re(() => {
-      const h = p.current;
-      p.current = t, h !== t && d(m.nextAnimationType);
-    }, [t, m.nextAnimationType]);
-    const g = n.useCallback((h) => {
-      h.target === h.currentTarget && d(null);
-    }, []), T = n.useMemo(() => {
-      const h = {
-        ...de,
-        transform: m.transform,
-        pointerEvents: m.pointerEvents,
-        zIndex: m.zIndex,
-        visibility: m.visibility
+    ee(() => {
+      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(() => {
+      const d = {
+        ...pe,
+        transform: a.transform,
+        pointerEvents: a.pointerEvents,
+        zIndex: a.zIndex,
+        visibility: a.visibility
       };
-      return m.animation !== void 0 && (h.animation = m.animation), m.transition !== void 0 && (h.transition = m.transition), h;
+      return a.animation !== void 0 && (d.animation = a.animation), a.transition !== void 0 && (d.transition = a.transition), d;
     }, [
-      m.transform,
-      m.pointerEvents,
-      m.zIndex,
-      m.visibility,
-      m.animation,
-      m.transition
-    ]), v = /* @__PURE__ */ O(
+      a.transform,
+      a.pointerEvents,
+      a.zIndex,
+      a.visibility,
+      a.animation,
+      a.transition
+    ]), A = /* @__PURE__ */ P(
       "div",
       {
-        ref: f,
-        "data-stack-content": r,
+        ref: l,
+        "data-stack-content": t,
         "data-depth": e,
-        "data-active": t ? "true" : "false",
-        style: T,
+        "data-active": n ? "true" : "false",
+        style: R,
         onAnimationEnd: g,
-        children: i
+        children: s
       }
     );
-    return a === "none" ? /* @__PURE__ */ O(n.Activity, { mode: t ? "visible" : "hidden", children: v }) : v;
+    return o === "none" ? /* @__PURE__ */ P(r.Activity, { mode: n ? "visible" : "hidden", children: A }) : A;
   }
-), V = n.createContext(null), me = n.memo(() => {
-  const r = n.useContext(V);
-  if (!r)
+);
+function me(t, e) {
+  switch (e.type) {
+    case "push":
+      return [...t, 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);
+    }
+    case "move":
+      return e.targetDepth < 0 || e.targetDepth >= t.length ? t : t.slice(0, e.targetDepth + 1);
+    case "replace":
+      return t.length === 0 ? [e.id] : [...t.slice(0, -1), e.id];
+  }
+}
+const G = r.createContext(null), he = r.memo(() => {
+  const t = r.useContext(G);
+  if (!t)
     throw new Error("StackOutlet must be used within useStackNavigation");
-  const [, e] = n.useReducer((i) => i + 1, 0);
-  n.useEffect(() => r.subscribe(e), [r]);
-  const { panels: t, navigationState: s, displayMode: a, transitionMode: c } = r.getState(), u = n.useMemo(() => s.stack.map((i, f) => {
-    const p = t.find((o) => o.id === i);
-    return p ? { panel: p, depth: f } : null;
-  }).filter((i) => i !== null), [s.stack, t]);
-  return /* @__PURE__ */ O(Z, { children: u.map(({ panel: i, depth: f }) => /* @__PURE__ */ O(
-    pe,
+  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);
+    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,
     {
-      id: i.id,
-      depth: f,
-      isActive: f === s.depth,
-      displayMode: a,
+      id: s.id,
+      depth: l,
+      isActive: l === i.depth,
+      displayMode: o,
       transitionMode: c,
-      navigationState: s,
-      children: i.cache ? r.getCachedContent(i.id) : i.content
+      navigationState: i,
+      children: s.cache ? t.getCachedContent(s.id) : s.content
     },
-    i.id
+    s.id
   )) });
 });
-function Ze(r) {
+function Ve(t) {
   const {
     panels: e,
-    initialPanelId: t,
-    displayMode: s,
-    transitionMode: a = "css",
+    initialPanelId: n,
+    displayMode: i,
+    transitionMode: o = "css",
     onPanelChange: c
-  } = r, [u, i] = n.useState(() => {
-    const l = t ?? e[0]?.id;
-    if (!l)
-      throw new Error("useStackNavigation: No panels provided");
-    return [l];
-  }), [f, p] = n.useState({ isRevealing: !1, revealDepth: null }), o = u.length - 1, d = n.useMemo(() => ({
-    stack: u,
-    depth: o,
-    isRevealing: f.isRevealing,
-    revealDepth: f.revealDepth
-  }), [u, o, f.isRevealing, f.revealDepth]), m = u[o], g = o > 0 ? u[o - 1] : null, T = n.useCallback((l) => {
-    e.find((A) => A.id === l) && (i((A) => [...A, l]), c?.(l, o + 1));
-  }, [e, o, c]), v = n.useCallback((l) => {
-    if (l >= 0)
-      return;
-    const y = o + l;
-    if (y < 0)
-      return;
-    i((F) => F.slice(0, y + 1));
-    const A = u[y];
-    c?.(A, y);
-  }, [o, u, c]), h = n.useCallback((l) => {
-    if (l < 0 || l >= u.length)
-      return;
-    i((A) => A.slice(0, l + 1));
-    const y = u[l];
-    c?.(y, l);
-  }, [u, c]), w = n.useCallback((l) => {
-    e.find((A) => A.id === l) && (i((A) => [...A.slice(0, -1), l]), c?.(l, o));
-  }, [e, o, c]), E = n.useCallback((l) => l >= 0 ? !1 : o + l >= 0, [o]), k = n.useCallback((l) => {
-    const y = l ?? o - 1;
-    y < 0 || y >= o || p({ isRevealing: !0, revealDepth: y });
-  }, [o]), x = n.useCallback(() => {
-    o !== 0 && p({ isRevealing: !0, revealDepth: 0 });
-  }, [o]), P = n.useCallback(() => {
-    p({ isRevealing: !1, revealDepth: null });
-  }, []), D = n.useCallback((l) => {
-    const y = u.indexOf(l), A = y === o;
+  } = t, u = n ?? e[0]?.id;
+  if (!u)
+    throw new Error("useStackNavigation: No panels provided");
+  const [s, l] = r.useReducer(
+    me,
+    [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);
+    }
+  }, [s, c]);
+  const [v, a] = r.useState({ isRevealing: !1, revealDepth: null }), g = s.length - 1, R = 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) => {
+    e.find((b) => b.id === p) && l({ type: "push", id: p });
+  }, [e]), y = r.useCallback((p) => {
+    l({ type: "go", direction: p });
+  }, []), k = r.useCallback((p) => {
+    l({ type: "move", targetDepth: p });
+  }, []), M = 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(() => {
+    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;
     return {
-      "data-stack-panel": l,
-      "data-depth": y,
-      "data-active": A ? "true" : "false",
-      "aria-hidden": !A
+      "data-stack-panel": p,
+      "data-depth": b,
+      "data-active": L ? "true" : "false",
+      "aria-hidden": !L
     };
-  }, [u, o]), M = n.useCallback(() => {
-    const l = o > 0, y = g ? e.find((F) => F.id === g) : null, A = y?.title ? `Back to ${y.title}` : "Go back";
+  }, []), 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";
     return {
-      onClick: () => v(-1),
-      disabled: !l,
-      "aria-label": A
+      onClick: () => y(-1),
+      disabled: !b,
+      "aria-label": H
     };
-  }, [o, g, e, v]), I = n.useMemo(
+  }, [e, y]), D = r.useMemo(
     () => ({
       position: "relative",
       width: "100%",
@@ -236,708 +252,433 @@ function Ze(r) {
       overflow: "hidden"
     }),
     []
-  ), C = n.useRef({
+  ), I = r.useRef({
     panels: e,
-    navigationState: d,
-    displayMode: s,
-    transitionMode: a
+    navigationState: R,
+    displayMode: i,
+    transitionMode: o
   });
-  C.current = {
+  I.current = {
     panels: e,
-    navigationState: d,
-    displayMode: s,
-    transitionMode: a
+    navigationState: R,
+    displayMode: i,
+    transitionMode: o
   };
-  const L = n.useRef(/* @__PURE__ */ new Set());
-  n.useEffect(() => {
-    L.current.forEach((l) => l());
-  }, [d, s, a]);
-  const _ = n.useCallback(
-    (l) => C.current.panels.find((A) => A.id === l)?.content ?? null,
+  const E = r.useRef(/* @__PURE__ */ new Set());
+  r.useEffect(() => {
+    E.current.forEach((p) => p());
+  }, [R, i, o]);
+  const U = r.useCallback(
+    (p) => I.current.panels.find((b) => b.id === p)?.content ?? null,
     []
-  ), N = n.useMemo(() => e.map((l) => l.id), [e]), { getCachedContent: b } = se({
-    resolveContent: _,
-    validIds: N
-  }), R = n.useMemo(
+  ), S = r.useMemo(() => e.map((p) => p.id), [e]), { getCachedContent: O } = te({
+    resolveContent: U,
+    validIds: S
+  }), $ = r.useMemo(
     () => ({
-      getState: () => C.current,
-      subscribe: (l) => (L.current.add(l), () => L.current.delete(l)),
-      getCachedContent: b
+      getState: () => I.current,
+      subscribe: (p) => (E.current.add(p), () => E.current.delete(p)),
+      getCachedContent: O
     }),
-    [b]
-  ), S = n.useMemo(() => {
-    const l = () => /* @__PURE__ */ O(V.Provider, { value: R, children: /* @__PURE__ */ O("div", { style: I, "data-stack-container": !0, children: /* @__PURE__ */ O(me, {}) }) });
-    return l.displayName = "StackOutlet", l;
-  }, [R, I]);
+    [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, {}) }) });
+    return p.displayName = "StackOutlet", p;
+  }, [$, D]);
   return {
-    state: d,
-    push: T,
-    go: v,
-    move: h,
-    replace: w,
-    revealParent: k,
-    revealRoot: x,
-    dismissReveal: P,
-    getPanelProps: D,
-    getBackButtonProps: M,
-    canGo: E,
-    currentPanelId: m,
-    previousPanelId: g,
-    Outlet: S
+    state: R,
+    push: h,
+    go: y,
+    move: k,
+    replace: M,
+    revealParent: _,
+    revealRoot: F,
+    dismissReveal: x,
+    getPanelProps: N,
+    getBackButtonProps: T,
+    canGo: w,
+    currentPanelId: A,
+    previousPanelId: d,
+    Outlet: W
   };
 }
-const $ = {
-  isDown: !1,
-  start: null,
-  current: null,
-  pointerId: null,
-  wasCanceled: !1
-}, G = (r, e) => ({
-  x: r,
-  y: e,
-  timestamp: performance.now()
-});
-function he(r) {
-  const { enabled: e, primaryOnly: t = !0 } = r, [s, a] = n.useState($), c = n.useCallback(() => {
-    a($);
-  }, []), u = U((d) => {
-    if (!e || t && !d.isPrimary || d.pointerType === "mouse" && d.button !== 0)
-      return;
-    const m = G(d.clientX, d.clientY);
-    a({
-      isDown: !0,
-      start: m,
-      current: m,
-      pointerId: d.pointerId,
-      wasCanceled: !1
-    });
-  }), i = U((d) => {
-    if (s.pointerId !== d.pointerId)
-      return;
-    const m = G(d.clientX, d.clientY);
-    a((g) => ({
-      ...g,
-      current: m
-    }));
-  }), f = U(() => {
-    a($);
-  }), p = U(() => {
-    a({ ...$, wasCanceled: !0 });
-  }), o = s.isDown ? e : !1;
-  return oe(o, {
-    onMove: i,
-    onUp: f,
-    onCancel: p
-  }), n.useEffect(() => {
-    !e && s.isDown && c();
-  }, [e, s.isDown, c]), {
-    state: s,
-    onPointerDown: u,
-    reset: c
-  };
-}
-const ve = 10, ge = (r, e) => {
-  const t = Math.abs(r), s = Math.abs(e);
-  return t === 0 && s === 0 ? null : t > s * 1.5 ? "horizontal" : s > t * 1.5 ? "vertical" : null;
-};
-function Ee(r) {
-  const { tracking: e, lockThreshold: t = ve } = r, [s, a] = n.useState(null), c = n.useCallback(() => {
-    a(null);
-  }, []);
-  return n.useEffect(() => {
-    if (!e.isDown) {
-      s !== null && c();
-      return;
-    }
-    if (s !== null || !e.start || !e.current)
-      return;
-    const u = e.current.x - e.start.x, i = e.current.y - e.start.y;
-    if (Math.max(Math.abs(u), Math.abs(i)) < t)
-      return;
-    const p = ge(u, i);
-    p !== null && a(p);
-  }, [e.isDown, e.start, e.current, s, t, c]), {
-    lockedAxis: s,
-    isLocked: s !== null,
-    reset: c
-  };
-}
-const H = (r, e, t) => {
-  const s = t - e;
-  return s <= 0 ? 0 : r / s;
-}, W = (r) => r > 0 ? 1 : r < 0 ? -1 : 0, be = (...r) => {
-  const e = {}, t = [];
-  for (const a of r)
-    Object.assign(e, a.style), a.onPointerDown && t.push(a.onPointerDown);
-  return {
-    onPointerDown: (a) => {
-      for (const c of t)
-        c?.(a);
-    },
-    style: e
-  };
-}, Y = {
-  distanceThreshold: 100,
-  velocityThreshold: 0.5,
-  lockThreshold: 10
-}, K = 20, B = {
-  phase: "idle",
-  displacement: { x: 0, y: 0 },
-  velocity: { x: 0, y: 0 },
-  direction: 0
-}, ye = 150, z = (r, e, t, s, a) => {
-  const c = t === "horizontal" ? r.x : r.y, u = t === "horizontal" ? e.x : e.y, i = Math.abs(c), f = Math.abs(u);
-  if (i >= s.distanceThreshold || f >= s.velocityThreshold) {
-    const o = W(c);
-    a?.({
-      phase: "ended",
-      displacement: r,
-      velocity: e,
-      direction: o
-    });
-  }
-};
-function Te(r) {
+function Ke(t) {
   const {
     containerRef: e,
-    axis: t,
-    enabled: s = !0,
-    thresholds: a,
-    onSwipeEnd: c,
-    enableWheel: u = !0,
-    pointerStartFilter: i
-  } = r, f = {
-    ...Y,
-    ...a
-  }, p = U(c), { state: o, onPointerDown: d } = he({
-    enabled: s
-  }), m = n.useCallback(
-    (b) => {
-      if (s) {
-        if (i) {
-          const R = e.current;
-          if (!R || !i(b, R))
-            return;
-        }
-        d(b);
-      }
-    },
-    [s, i, e, d]
-  ), { lockedAxis: g, isLocked: T } = Ee({
-    tracking: o,
-    lockThreshold: f.lockThreshold
-  }), v = n.useRef(null), h = n.useRef(!1);
-  n.useEffect(() => {
-    h.current = T ? g === t : !1;
-  }, [T, g, t]), n.useEffect(() => {
-    const b = e.current;
-    if (!b || !s)
-      return;
-    const R = (y) => {
-      y.preventDefault();
-    }, S = (y) => {
-      h.current && y.preventDefault(), document.addEventListener("touchmove", R, { passive: !1 });
-    }, l = () => {
-      document.removeEventListener("touchmove", R);
-    };
-    return document.addEventListener("touchend", l), document.addEventListener("touchcancel", l), b.addEventListener("touchstart", S, { passive: !1 }), () => {
-      b.removeEventListener("touchstart", S), document.removeEventListener("touchend", l), document.removeEventListener("touchcancel", l);
-    };
-  }, [e, s]);
-  const [w, E] = n.useState(B), k = n.useRef({ x: 0, y: 0 }), x = n.useRef(null), P = n.useRef(!1), D = n.useRef(null), M = n.useCallback(() => {
-    k.current = { x: 0, y: 0 }, P.current = !1, D.current = null, E(B);
-  }, []), I = n.useCallback(() => {
-    const b = { ...k.current };
-    z(b, { x: 0, y: 0 }, t, f, p), M();
-  }, [t, f, p, M]), C = U((b) => {
-    if (!s || !u || o.isDown)
-      return;
-    const { deltaX: R, deltaY: S } = b;
-    if (!P.current) {
-      const A = Math.abs(R), F = Math.abs(S);
-      (A >= f.lockThreshold || F >= f.lockThreshold) && (P.current = !0, D.current = A > F ? "horizontal" : "vertical");
-    }
-    if (P.current && D.current !== t)
-      return;
-    k.current.x -= R, k.current.y -= S;
-    const l = k.current, y = t === "horizontal" ? l.x : l.y;
-    E({
-      phase: "swiping",
-      displacement: { ...l },
-      velocity: { x: 0, y: 0 },
-      direction: W(y)
-    }), x.current !== null && clearTimeout(x.current), x.current = setTimeout(I, ye);
-  });
-  n.useEffect(() => {
-    const b = e.current;
-    if (!b || !s || !u)
-      return;
-    const R = (S) => {
-      S.preventDefault(), C(S);
-    };
-    return b.addEventListener("wheel", R, { passive: !1 }), () => {
-      b.removeEventListener("wheel", R), x.current !== null && clearTimeout(x.current);
-    };
-  }, [e, s, u, C]), n.useEffect(() => () => {
-    x.current !== null && clearTimeout(x.current);
-  }, []);
-  const L = n.useMemo(() => {
-    if (!o.isDown || !o.start || !o.current)
-      return B;
-    const b = o.current.x - o.start.x, R = o.current.y - o.start.y, S = { x: b, y: R }, l = {
-      x: H(b, o.start.timestamp, o.current.timestamp),
-      y: H(R, o.start.timestamp, o.current.timestamp)
-    };
-    return !T || g !== t ? { phase: "tracking", displacement: S, velocity: l, direction: 0 } : {
-      phase: "swiping",
-      displacement: S,
-      velocity: l,
-      direction: W(t === "horizontal" ? b : R)
-    };
-  }, [o.isDown, o.start, o.current, T, g, t]);
-  n.useEffect(() => {
-    L.phase !== "idle" && (v.current = L);
-  }, [L]), n.useEffect(() => {
-    if (o.isDown)
-      return;
-    const b = v.current;
-    !b || b.phase !== "swiping" && b.phase !== "tracking" || (v.current = null, !o.wasCanceled && z(b.displacement, b.velocity, t, f, p));
-  }, [o.isDown, o.wasCanceled, t, f, p]);
-  const _ = L.phase !== "idle" ? L : w, N = n.useMemo(() => ({
-    onPointerDown: m,
-    style: {
-      touchAction: t === "horizontal" ? "pan-y pinch-zoom" : "pan-x pinch-zoom",
-      userSelect: "none",
-      WebkitUserSelect: "none"
-    }
-  }), [t, m]);
-  return { state: _, containerProps: N };
-}
-const we = (r) => r === "left" || r === "right" ? "horizontal" : "vertical", Se = (r, e, t, s, a) => {
-  const c = t.getBoundingClientRect();
-  switch (s) {
-    case "left":
-      return r >= c.left && r <= c.left + a;
-    case "right":
-      return r >= c.right - a && r <= c.right;
-    case "top":
-      return e >= c.top && e <= c.top + a;
-    case "bottom":
-      return e >= c.bottom - a && e <= c.bottom;
-  }
-};
-function ke(r) {
-  const {
-    containerRef: e,
-    edge: t,
-    edgeWidth: s = K,
-    enabled: a = !0,
-    thresholds: c,
-    onSwipeEnd: u
-  } = r, i = {
-    ...Y,
-    ...c
-  }, f = we(t), [p, o] = n.useState(!1), d = n.useCallback(
-    (v, h) => {
-      const w = Se(v.clientX, v.clientY, h, t, s);
-      return o(w), w;
-    },
-    [t, s]
-  ), { state: m, containerProps: g } = Te({
-    containerRef: e,
-    axis: f,
-    enabled: a,
-    thresholds: i,
-    onSwipeEnd: u,
-    enableWheel: !1,
-    // Edge swipe doesn't use wheel events
-    pointerStartFilter: d
-  });
-  return n.useEffect(() => {
-    m.phase === "idle" && o(!1);
-  }, [m.phase]), {
-    isEdgeGesture: p,
-    state: p ? m : B,
-    containerProps: g
-  };
-}
-const Re = (r, e, t) => {
-  const s = e.getBoundingClientRect();
-  return r >= s.left && r <= s.left + t;
-};
-function Ae(r) {
-  const {
-    containerRef: e,
-    active: t,
-    preventEdgeBack: s = !0,
-    preventOverscroll: a = !0,
-    edgeWidth: c = K
-  } = r, u = n.useRef(null), i = n.useCallback(() => {
-    if (!a) return;
-    const o = document.documentElement;
-    u.current === null && (u.current = o.style.overscrollBehavior), o.style.overscrollBehavior = "none";
-  }, [a]);
-  n.useEffect(() => {
-    t || !a || u.current !== null && (document.documentElement.style.overscrollBehavior = u.current, u.current = null);
-  }, [t, a]), n.useEffect(() => () => {
-    u.current !== null && (document.documentElement.style.overscrollBehavior = u.current, u.current = null);
-  }, []);
-  const f = n.useCallback((o) => {
-    if (!s)
-      return;
-    const d = e.current;
-    d && o.pointerType === "touch" && Re(o.clientX, d, c) && (i(), o.preventDefault());
-  }, [s, e, c, i]);
-  return {
-    containerProps: n.useMemo(() => ({
-      onPointerDown: s ? f : void 0,
-      style: {
-        // Always apply to prevent browser navigation gestures
-        overscrollBehavior: a ? "contain" : void 0,
-        WebkitOverflowScrolling: "touch"
-      }
-    }), [a, s, f])
-  };
-}
-function Je(r) {
-  const {
-    containerRef: e,
-    navigation: t,
-    edge: s = "left",
-    edgeWidth: a = 20,
+    navigation: n,
+    edge: i = "left",
+    edgeWidth: o = 20,
     enabled: c = !0
-  } = r, [u, i] = n.useState(null), f = n.useCallback(
-    (h) => {
-      i(null), s === "left" && h.direction === 1 && t.canGo(-1) && t.go(-1);
+  } = t, [u, s] = r.useState(null), l = r.useCallback(
+    (d) => {
+      s(null), i === "left" && d.direction === 1 && n.canGo(-1) && n.go(-1);
     },
-    [s, t]
-  ), { isEdgeGesture: p, state: o, containerProps: d } = ke({
+    [i, n]
+  ), { isEdgeGesture: f, state: m, containerProps: v } = ne({
     containerRef: e,
-    edge: s,
-    edgeWidth: a,
-    enabled: c && t.canGo(-1),
+    edge: i,
+    edgeWidth: o,
+    enabled: c ? n.canGo(-1) : !1,
     // Only enable if can go back
-    onSwipeEnd: f
+    onSwipeEnd: l
   });
-  n.useEffect(() => {
-    p && (o.phase === "swiping" || o.phase === "tracking") ? i(o) : o.phase === "idle" && i(null);
-  }, [p, o]);
-  const { containerProps: m } = Ae({
+  r.useEffect(() => {
+    f && (m.phase === "swiping" || m.phase === "tracking") ? s(m) : m.phase === "idle" && s(null);
+  }, [f, m]);
+  const { containerProps: a } = re({
     containerRef: e,
-    active: p,
+    active: f,
     preventEdgeBack: !0,
     preventOverscroll: !0,
-    edgeWidth: a
-  }), g = n.useMemo(() => {
+    edgeWidth: o
+  }), g = r.useMemo(() => {
     if (!u || !e.current)
       return 0;
-    const h = e.current.clientWidth;
-    if (h === 0)
+    const d = e.current.clientWidth;
+    if (d === 0)
       return 0;
-    const w = u.displacement.x;
-    if (s === "left" && w <= 0 || s === "right" && w >= 0)
+    const h = u.displacement.x;
+    if (i === "left" && h <= 0 || i === "right" && h >= 0)
       return 0;
-    const E = Math.abs(w);
-    return Math.min(E / h, 1);
-  }, [u, e, s]), T = n.useMemo(
-    () => be(d, m),
-    [d, m]
+    const y = Math.abs(h);
+    return Math.min(y / d, 1);
+  }, [u, e, i]), R = r.useMemo(
+    () => se(v, a),
+    [v, a]
   );
   return {
-    isEdgeSwiping: p,
+    isEdgeSwiping: f,
     progress: g,
-    inputState: p ? o : B,
-    containerProps: T
+    inputState: f ? m : ie,
+    containerProps: R
   };
 }
-const j = {
+const V = {
   /** Ease out expo (similar to cubic-bezier(0.22, 1, 0.36, 1)) */
-  easeOutExpo: (r) => r === 1 ? 1 : 1 - Math.pow(2, -10 * r)
-}, xe = 300;
-function De(r) {
+  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+}, ve = 300;
+function ge(t) {
   const {
-    duration: e = xe,
-    easing: t = j.easeOutExpo,
-    onFrame: s,
-    onComplete: a
-  } = r, [c, u] = n.useState(!1), i = n.useRef(null), f = n.useRef(null), p = n.useRef(s), o = n.useRef(a);
-  n.useEffect(() => {
-    p.current = s, o.current = a;
-  }, [s, a]);
-  const d = n.useCallback(() => {
-    i.current !== null && (cancelAnimationFrame(i.current), i.current = null), f.current = null, u(!1);
-  }, []), m = n.useCallback(() => {
-    d(), u(!0), f.current = null;
-    const g = (T) => {
-      f.current === null && (f.current = T);
-      const v = T - f.current, h = Math.min(v / e, 1), w = t(h), E = h >= 1, k = {
-        progress: h,
-        easedProgress: w,
-        elapsed: v,
-        isComplete: E
+    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
       };
-      p.current?.(k), E ? (i.current = null, f.current = null, u(!1), o.current?.()) : i.current = requestAnimationFrame(g);
+      f.current?.(k), y ? (s.current = null, l.current = null, u(!1), m.current?.()) : s.current = requestAnimationFrame(g);
     };
-    i.current = requestAnimationFrame(g);
-  }, [e, t, d]);
-  return n.useEffect(() => () => {
-    i.current !== null && cancelAnimationFrame(i.current);
+    s.current = requestAnimationFrame(g);
+  }, [e, n, v]);
+  return r.useEffect(() => () => {
+    s.current !== null && cancelAnimationFrame(s.current);
   }, []), {
     isAnimating: c,
-    start: m,
-    cancel: d
+    start: a,
+    cancel: v
   };
 }
-function Ce(r, e, t) {
-  return r + (e - r) * t;
+function Re(t, e, n) {
+  return t + (e - t) * n;
 }
-const Pe = 300, X = (r) => r === "horizontal" ? "translateX" : "translateY";
-function Ie(r) {
+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 {
     elementRef: e,
-    targetPx: t,
-    displacement: s,
-    isSwiping: a,
+    targetPx: n,
+    displacement: i,
+    isOperating: o,
     axis: c = "horizontal",
-    animationDuration: u = Pe,
-    containerSize: i,
-    animateOnTargetChange: f = !1,
-    initialPx: p
-  } = r, o = p ?? t, d = n.useRef(o), m = n.useRef(null), g = n.useRef(t), T = n.useRef(i), v = n.useRef(null), h = n.useRef(!0);
-  h.current && p !== void 0 && p !== t ? (v.current = { from: p, to: t }, h.current = !1) : h.current && (h.current = !1), t !== g.current && !a && m.current === null && (f && Math.abs(d.current - t) > 1 ? v.current = { from: d.current, to: t } : d.current = t, g.current = t), i !== void 0 && i !== T.current && i > 0 && (d.current = t, T.current = i);
-  const w = n.useCallback(
-    ({ easedProgress: D }) => {
-      const M = e.current, I = m.current;
-      if (!M || !I)
+    animationDuration: u = Ae,
+    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(
+    h.current,
+    s,
+    f,
+    n
+  );
+  y !== null && (d.current = y, h.current = !0);
+  const k = be(
+    n,
+    R.current,
+    a.current,
+    o,
+    g.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(
+    s,
+    A.current,
+    n
+  );
+  M !== null && (a.current = M, A.current = s);
+  const w = r.useCallback(
+    ({ easedProgress: T }) => {
+      const D = e.current, I = g.current;
+      if (!D || !I)
         return;
-      const C = Ce(I.from, I.to, D);
-      d.current = C, M.style.transform = `${X(c)}(${C}px)`;
+      const E = Re(I.from, I.to, T);
+      a.current = E, D.style.transform = `${B(c)}(${E}px)`;
     },
     [c, e]
-  ), E = n.useCallback(() => {
-    m.current = null, d.current = t, g.current = t;
-  }, [t]), { isAnimating: k, start: x, cancel: P } = De({
+  ), _ = r.useCallback(() => {
+    g.current = null, a.current = n, R.current = n;
+  }, [n]), { isAnimating: F, start: x, cancel: N } = ge({
     duration: u,
-    easing: j.easeOutExpo,
+    easing: V.easeOutExpo,
     onFrame: w,
-    onComplete: E
+    onComplete: _
   });
-  return n.useLayoutEffect(() => {
-    if (a) {
-      P(), m.current = null, v.current = null;
+  return r.useLayoutEffect(() => {
+    if (o) {
+      N(), g.current = null, d.current = null;
       return;
     }
-    if (v.current) {
-      const I = v.current;
-      m.current = I, v.current = null;
-      const C = e.current;
-      C && (C.style.transform = `${X(c)}(${I.from}px)`), x();
+    if (d.current) {
+      const I = d.current;
+      g.current = I, d.current = null;
+      const E = e.current;
+      E && (E.style.transform = `${B(c)}(${I.from}px)`), x();
       return;
     }
-    const D = d.current;
-    Math.abs(D - t) > 1 ? (m.current = { from: D, to: t }, x()) : (d.current = t, g.current = t);
-  }, [a, t, x, P]), n.useLayoutEffect(() => {
-    const D = e.current;
-    if (!D || k || m.current !== null || v.current !== null)
+    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(() => {
+    const T = e.current;
+    if (!T || F || g.current !== null || d.current !== null)
       return;
-    const M = t + s;
-    d.current = M, D.style.transform = `${X(c)}(${M}px)`;
-  }, [t, s, c, k, e]), {
-    isAnimating: k,
-    currentPx: d.current,
-    animationDirection: m.current
+    const D = n + i;
+    a.current = D, T.style.transform = `${B(c)}(${D}px)`;
+  }, [n, i, c, F, e]), {
+    isAnimating: F,
+    currentPx: a.current,
+    animationDirection: g.current
   };
 }
-const q = -0.3;
-function Me(r) {
-  return Math.max(0, r);
+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;
+  return r.useLayoutEffect(() => {
+    e ? l && (o.current = !0) : (o.current = !1, i.current = t), n.current = e;
+  }), {
+    value: a,
+    changedDuringOperation: v,
+    operationJustEnded: u
+  };
+}
+const K = -0.3;
+function De(t) {
+  return Math.max(0, t);
 }
-function Le(r, e, t = q) {
+function Ie(t, e, n = K) {
   if (e <= 0)
     return 0;
-  const s = Math.max(0, r), a = Math.min(s / e, 1), c = t * e, u = Math.abs(t) * a * e;
+  const i = Math.max(0, t), o = Math.min(i / e, 1), c = n * e, u = Math.abs(n) * o * e;
   return c + u;
 }
-function Oe(r) {
-  const { depth: e, navigationDepth: t, isActive: s, isSwiping: a, isAnimating: c } = r;
-  return !!(s || e === t - 1 && (a || c));
+function Se(t) {
+  const { depth: e, navigationDepth: n, isActive: i, isOperating: o, isAnimating: c } = t;
+  return !!(i || e === n - 1 && (o || c));
 }
-function _e(r, e) {
-  return r === e ? "active" : r === e - 1 ? "behind" : "hidden";
+function Ee(t, e) {
+  return t === e ? "active" : t === e - 1 ? "behind" : "hidden";
 }
-const Ne = 300, Fe = 0.05, Ue = 0.1, Be = {
+const Me = 300, we = 0.05, xe = 0.1, Oe = {
   position: "absolute",
   inset: 0,
   width: "100%",
   height: "100%"
-}, $e = (r, e) => r.phase === "idle" ? 0 : e === "horizontal" ? r.displacement.x : r.displacement.y, Xe = "-5px 0 15px rgba(0, 0, 0, 0.1)", We = n.memo(
+}, 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(
   ({
-    id: r,
+    id: t,
     depth: e,
-    navigationDepth: t,
-    isActive: s,
-    inputState: a,
+    navigationDepth: n,
+    isActive: i,
+    operationState: o,
     containerSize: c,
     axis: u = "horizontal",
-    behindOffset: i = q,
-    animationDuration: f = Ne,
-    animateOnMount: p = !1,
-    showShadow: o = !0,
-    displayMode: d = "overlay",
-    showDimming: m = !0,
+    behindOffset: s = K,
+    animationDuration: l = Me,
+    animateOnMount: f = !1,
+    showShadow: m = !0,
+    displayMode: v = "overlay",
+    showDimming: a = !0,
     children: g
   }) => {
-    const T = n.useRef(null), v = n.useRef(!0), h = $e(a, u), w = a.phase === "swiping" || a.phase === "tracking", E = _e(e, t), k = v.current;
-    v.current && (v.current = !1);
-    const x = n.useMemo(() => {
-      switch (E) {
+    const R = r.useRef(null), A = Pe(o, u), d = o.phase === "operating", h = Ee(e, n), { value: y, changedDuringOperation: k } = Te(
+      h,
+      A > 0
+    ), M = r.useMemo(() => {
+      switch (y) {
         case "active":
           return 0;
         case "behind":
-          return i * c;
+          return s * c;
         case "hidden":
           return c;
       }
-    }, [E, i, c]), P = n.useMemo(() => {
-      if (h <= 0)
+    }, [y, s, c]), w = r.useMemo(() => {
+      if (A <= 0)
         return 0;
-      switch (E) {
+      switch (y) {
         case "active":
-          return Me(h);
+          return De(A);
         case "behind": {
-          const S = Le(h, c, i), l = i * c;
-          return S - l;
+          const S = Ie(A, c, s), O = s * c;
+          return S - O;
         }
         case "hidden":
           return 0;
       }
-    }, [E, h, c, i]), D = n.useMemo(() => {
-      if (!(!k || !p) && E === "active" && e > 0)
+    }, [y, A, c, s]), _ = r.useMemo(() => {
+      if (f && h === "active" && e > 0)
         return c;
-    }, [k, p, E, e, c]), { isAnimating: M } = Ie({
-      elementRef: T,
-      targetPx: x,
-      displacement: P,
-      isSwiping: w,
+    }, [f, h, e, c]), { isAnimating: F } = ke({
+      elementRef: R,
+      targetPx: M,
+      displacement: w,
+      isOperating: d,
       axis: u,
-      animationDuration: f,
+      animationDuration: l,
       containerSize: c,
       // Animate when targetPx changes (button navigation)
       animateOnTargetChange: !0,
       // For push animation: start from off-screen
-      initialPx: D
-    }), I = Oe({
+      initialPx: _,
+      // Skip backward animation if role changed during the operation.
+      // 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({
       depth: e,
-      navigationDepth: t,
-      isActive: s,
-      isSwiping: w,
-      isAnimating: M
-    }), C = n.useMemo(() => c <= 0 || h <= 0 ? 0 : Math.min(h / c, 1), [h, c]), L = n.useMemo(() => {
-      if (d !== "stack")
+      navigationDepth: n,
+      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")
         return 1;
-      const S = t - e;
-      if (E === "active")
+      const S = n - e;
+      if (h === "active")
         return 1;
-      if (E === "behind") {
-        const l = 1 - S * Fe;
-        return l + C * (1 - l);
+      if (h === "behind") {
+        const O = 1 - S * we;
+        return O + N * (1 - O);
       }
       return 1;
-    }, [d, E, e, t, C]), _ = n.useMemo(() => !m || E !== "behind" ? 0 : Ue * (1 - C), [m, E, C]);
-    n.useLayoutEffect(() => {
-      const S = T.current;
-      S && (S.style.visibility = I ? "visible" : "hidden");
-    }, [I]), n.useLayoutEffect(() => {
-      const S = T.current;
-      if (!S || d !== "stack")
+    }, [v, h, e, n, N]), D = r.useMemo(() => !a || h !== "behind" ? 0 : xe * (1 - N), [a, h, N]);
+    r.useLayoutEffect(() => {
+      const S = R.current;
+      S && (S.style.visibility = x ? "visible" : "hidden");
+    }, [x]), r.useLayoutEffect(() => {
+      const S = R.current;
+      if (!S || v !== "stack")
         return;
-      const l = S.style.transform;
-      if (l.includes("translateX")) {
-        const y = l.match(/translateX\([^)]+\)/);
-        y && (S.style.transform = `${y[0]} scale(${L})`);
+      const O = S.style.transform;
+      if (O.includes("translateX")) {
+        const $ = O.match(/translateX\([^)]+\)/);
+        $ && (S.style.transform = `${$[0]} scale(${T})`);
       } else
-        S.style.transform = `scale(${L})`;
-    }, [L, d]);
-    const N = o && e > 0 && E === "active", b = n.useMemo(
+        S.style.transform = `scale(${T})`;
+    }, [T, v]);
+    const I = m ? e > 0 && h === "active" : !1, E = r.useMemo(
       () => ({
-        ...Be,
-        pointerEvents: s ? "auto" : "none",
+        ...Oe,
+        pointerEvents: i ? "auto" : "none",
         willChange: "transform",
         zIndex: e,
-        visibility: I ? "visible" : "hidden",
-        boxShadow: N ? Xe : void 0
+        visibility: x ? "visible" : "hidden",
+        boxShadow: I ? Ne : void 0
       }),
-      [s, e, I, N]
-    ), R = n.useMemo(() => _ <= 0 ? null : {
+      [i, e, x, I]
+    ), U = r.useMemo(() => D <= 0 ? null : {
       position: "absolute",
       inset: 0,
-      backgroundColor: `rgba(0, 0, 0, ${_})`,
+      backgroundColor: `rgba(0, 0, 0, ${D})`,
       pointerEvents: "none",
       zIndex: 1
-    }, [_]);
-    return /* @__PURE__ */ J(
+    }, [D]);
+    return /* @__PURE__ */ q(
       "div",
       {
-        ref: T,
-        "data-stack-content": r,
+        ref: R,
+        "data-stack-content": t,
         "data-depth": e,
-        "data-active": s ? "true" : "false",
-        "data-role": E,
-        style: b,
+        "data-active": i ? "true" : "false",
+        "data-role": h,
+        style: E,
         children: [
           g,
-          R != null && /* @__PURE__ */ O("div", { style: R, "data-dimming-overlay": !0 })
+          U != null ? /* @__PURE__ */ P("div", { style: U, "data-dimming-overlay": !0 }) : null
         ]
       }
     );
   }
-), Ge = 300;
-function He(r, e, t) {
-  const { stack: s, depth: a } = e, c = [a];
-  a > 0 && c.push(a - 1);
+), Fe = 300;
+function $e(t, e, n) {
+  const { stack: i, depth: o } = e, c = [o];
+  o > 0 && c.push(o - 1);
   const u = [];
-  for (const i of c) {
-    const f = s[i], p = r.find((o) => o.id === f);
-    p && u.push({ panel: p, depth: i, isExiting: !1 });
+  for (const s of c) {
+    const l = i[s], f = t.find((m) => m.id === l);
+    f && u.push({ panel: f, depth: s, isExiting: !1 });
   }
-  if (t != null && !u.some((f) => f.panel.id === t)) {
-    const f = r.find((p) => p.id === t);
-    f && u.push({ panel: f, depth: a + 1, isExiting: !0 });
+  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 });
   }
-  return u.sort((i, f) => i.depth - f.depth);
+  return u.sort((s, l) => s.depth - l.depth);
 }
-const Qe = n.memo(
+const We = r.memo(
   ({
-    panels: r,
+    panels: t,
     navigationState: e,
-    inputState: t,
-    containerSize: s,
-    getCachedContent: a,
+    operationState: n,
+    containerSize: i,
+    getCachedContent: o,
     behindOffset: c,
     animateOnMount: u = !1,
-    animationDuration: i = Ge,
-    showShadow: f,
-    displayMode: p,
-    showDimming: o
+    animationDuration: s = Fe,
+    showShadow: l,
+    displayMode: f,
+    showDimming: m
   }) => {
-    const [d, m] = n.useState(null), g = n.useRef(e.depth), T = n.useRef(e.stack);
-    n.useLayoutEffect(() => {
-      const w = g.current, E = T.current, { depth: k, stack: x } = e;
-      if (g.current = k, T.current = x, k < w) {
-        const P = E[w];
-        if (P != null) {
-          m(P);
-          const D = setTimeout(() => {
-            m(null);
-          }, i);
-          return () => clearTimeout(D);
+    const [v, a] = r.useState(null), g = r.useRef(e.depth), R = 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 _ = setTimeout(() => {
+            a(null);
+          }, s);
+          return () => clearTimeout(_);
         }
       }
-    }, [e.depth, e.stack, i]);
-    const v = n.useMemo(
-      () => He(r, e, d),
-      [r, e, d]
-    ), h = n.useMemo(
+    }, [e.depth, e.stack, s]);
+    const A = r.useMemo(
+      () => $e(t, e, v),
+      [t, e, v]
+    ), d = r.useMemo(
       () => ({
         position: "relative",
         width: "100%",
@@ -946,35 +687,35 @@ const Qe = n.memo(
       }),
       []
     );
-    return /* @__PURE__ */ O("div", { style: h, "data-swipe-stack-container": !0, children: v.map(({ panel: w, depth: E, isExiting: k }) => {
-      const x = E === e.depth && !k, P = a?.(w.id) ?? w.content;
-      return /* @__PURE__ */ O(
-        We,
+    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,
         {
-          id: w.id,
-          depth: E,
+          id: h.id,
+          depth: y,
           navigationDepth: e.depth,
-          isActive: x,
-          inputState: t,
-          containerSize: s,
+          isActive: M,
+          operationState: n,
+          containerSize: i,
           behindOffset: c,
           animateOnMount: u,
-          animationDuration: i,
-          showShadow: f,
-          displayMode: p,
-          showDimming: o,
-          children: P
+          animationDuration: s,
+          showShadow: l,
+          displayMode: f,
+          showDimming: m,
+          children: w
         },
-        w.id
+        h.id
       );
     }) });
   }
 );
 export {
-  pe as StackContent,
-  We as SwipeStackContent,
-  Qe as SwipeStackOutlet,
-  Ze as useStackNavigation,
-  Je as useStackSwipeInput
+  de as StackContent,
+  _e as SwipeStackContent,
+  We as SwipeStackOutlet,
+  Ve as useStackNavigation,
+  Ke as useStackSwipeInput
 };
 //# sourceMappingURL=stack.js.map