react-panel-layout 0.6.0 → 0.7.0

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 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 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 ie(r) {
+function ue(n) {
   const {
     displayMode: e,
     depth: t,
-    navigationDepth: s,
-    isActive: a,
-    isAnimatingOut: c,
+    navigationDepth: i,
+    isActive: c,
+    isAnimatingOut: o,
     isRevealing: u,
-    revealDepth: i
-  } = r;
-  return e === "overlay" ? a || c || u && t === i ? "visible" : "hidden" : t <= s || c ? "visible" : "hidden";
+    revealDepth: s
+  } = n;
+  return e === "overlay" ? c || o || u && t === s ? "visible" : "hidden" : t <= i || o ? "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 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)";
-  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 = (t - e) * -5, f = 1 - (t - 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 fe(n, e, t) {
+  return e === void 0 || e <= 0 || !t ? n : `translateX(${e * 100}%)`;
 }
-function le(r) {
-  if (r === "css")
-    return `transform ${Q} ${ee}`;
+function pe(n) {
+  if (n === "css")
+    return `transform ${J} ${q}`;
 }
-function fe(r) {
+function de(n) {
   const {
     depth: e,
     isActive: t,
-    wasActive: s,
-    currentAnimationType: a,
-    displayMode: c,
+    wasActive: i,
+    currentAnimationType: c,
+    displayMode: o,
     transitionMode: u,
-    navigationState: i,
-    swipeProgress: f
-  } = r, o = ce({
-    wasActive: s,
+    navigationState: s,
+    swipeProgress: l
+  } = n, m = ce({
+    wasActive: i,
     isActive: t,
     transitionMode: u
-  }) ?? a, d = o === "pop", m = ie({
-    displayMode: c,
+  }) ?? c, g = m === "pop", a = ue({
+    displayMode: o,
     depth: e,
-    navigationDepth: i.depth,
+    navigationDepth: s.depth,
     isActive: t,
-    isAnimatingOut: d,
-    isRevealing: i.isRevealing,
-    revealDepth: i.revealDepth
-  }), g = ae({
+    isAnimatingOut: g,
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
+  }), v = le({
     depth: e,
-    activeDepth: i.depth,
-    displayMode: c,
-    isRevealing: i.isRevealing,
-    revealDepth: i.revealDepth
-  }), T = ue(g, f, t), v = (() => {
+    activeDepth: s.depth,
+    displayMode: o,
+    isRevealing: s.isRevealing,
+    revealDepth: s.revealDepth
+  }), y = fe(v, l, t), A = (() => {
     if (u === "css") {
-      if (o === "push")
-        return te;
-      if (o === "pop")
-        return ne;
+      if (m === "push")
+        return Q;
+      if (m === "pop")
+        return Z;
     }
-  })(), h = le(u);
+  })(), d = pe(u);
   return {
-    nextAnimationType: o,
-    visibility: m,
-    transform: T,
-    animation: v,
-    transition: h,
+    nextAnimationType: m,
+    visibility: a,
+    transform: y,
+    animation: A,
+    transition: d,
     zIndex: e,
     pointerEvents: t ? "auto" : "none"
   };
 }
-const de = {
+const me = {
   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({
+}, 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: t,
-      wasActive: p.current,
-      currentAnimationType: o,
-      displayMode: s,
-      transitionMode: a,
-      navigationState: c,
+      wasActive: f.current,
+      currentAnimationType: m,
+      displayMode: i,
+      transitionMode: c,
+      navigationState: o,
       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
+    z(() => {
+      const d = f.current;
+      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 = {
+        ...me,
+        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__ */ O(
       "div",
       {
-        ref: f,
-        "data-stack-content": r,
+        ref: l,
+        "data-stack-content": n,
         "data-depth": e,
         "data-active": t ? "true" : "false",
-        style: T,
-        onAnimationEnd: g,
-        children: i
+        style: y,
+        onAnimationEnd: v,
+        children: s
       }
     );
-    return a === "none" ? /* @__PURE__ */ O(n.Activity, { mode: t ? "visible" : "hidden", children: v }) : v;
+    return c === "none" ? /* @__PURE__ */ O(r.Activity, { mode: t ? "visible" : "hidden", children: A }) : A;
+  }
+);
+function ve(n, e) {
+  switch (e.type) {
+    case "push":
+      return [...n, e.id];
+    case "go": {
+      if (e.direction >= 0)
+        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 >= n.length ? n : n.slice(0, e.targetDepth + 1);
+    case "replace":
+      return n.length === 0 ? [e.id] : [...n.slice(0, -1), e.id];
   }
-), V = n.createContext(null), me = n.memo(() => {
-  const r = n.useContext(V);
-  if (!r)
+}
+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] = 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(() => 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, t]);
+  return /* @__PURE__ */ O(Y, { children: u.map(({ panel: s, depth: l }) => /* @__PURE__ */ O(
+    he,
     {
-      id: i.id,
-      depth: f,
-      isActive: f === s.depth,
-      displayMode: a,
-      transitionMode: c,
-      navigationState: s,
-      children: i.cache ? r.getCachedContent(i.id) : i.content
+      id: s.id,
+      depth: l,
+      isActive: l === i.depth,
+      displayMode: c,
+      transitionMode: o,
+      navigationState: i,
+      children: s.cache ? n.getCachedContent(s.id) : s.content
     },
-    i.id
+    s.id
   )) });
 });
-function Ze(r) {
+function Ge(n) {
   const {
     panels: e,
     initialPanelId: t,
-    displayMode: s,
-    transitionMode: a = "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;
+    displayMode: i,
+    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(
+    ve,
+    [u]
+  ), f = r.useRef(s);
+  f.current = s;
+  const m = r.useRef(s);
+  r.useEffect(() => {
+    const p = m.current;
+    if (m.current = s, o && s !== p) {
+      const k = s.length - 1, b = s[k];
+      b !== void 0 && o(b, k);
+    }
+  }, [s, o]);
+  const [g, a] = r.useState({ isRevealing: !1, revealDepth: null }), v = s.length - 1, y = r.useMemo(() => ({
+    stack: s,
+    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]), R = r.useCallback((p) => {
+    l({ type: "go", direction: p });
+  }, []), C = r.useCallback((p) => {
+    l({ type: "move", targetDepth: p });
+  }, []), w = r.useCallback((p) => {
+    e.find((b) => b.id === p) && l({ type: "replace", id: p });
+  }, [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 k = f.current, b = k.indexOf(p), X = k.length - 1, F = 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": F ? "true" : "false",
+      "aria-hidden": !F
     };
-  }, [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, 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: () => v(-1),
-      disabled: !l,
-      "aria-label": A
+      onClick: () => R(-1),
+      disabled: !b,
+      "aria-label": W
     };
-  }, [o, g, e, v]), I = n.useMemo(
+  }, [e, R]), S = r.useMemo(
     () => ({
       position: "relative",
       width: "100%",
@@ -236,708 +252,392 @@ function Ze(r) {
       overflow: "hidden"
     }),
     []
-  ), C = n.useRef({
+  ), D = r.useRef({
     panels: e,
-    navigationState: d,
-    displayMode: s,
-    transitionMode: a
+    navigationState: y,
+    displayMode: i,
+    transitionMode: c
   });
-  C.current = {
+  D.current = {
     panels: e,
-    navigationState: d,
-    displayMode: s,
-    transitionMode: a
+    navigationState: y,
+    displayMode: i,
+    transitionMode: c
   };
-  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());
+  }, [y, i, c]);
+  const U = r.useCallback(
+    (p) => D.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(
+  ), I = r.useMemo(() => e.map((p) => p.id), [e]), { getCachedContent: P } = ee({
+    resolveContent: U,
+    validIds: I
+  }), L = r.useMemo(
     () => ({
-      getState: () => C.current,
-      subscribe: (l) => (L.current.add(l), () => L.current.delete(l)),
-      getCachedContent: b
+      getState: () => D.current,
+      subscribe: (p) => (E.current.add(p), () => E.current.delete(p)),
+      getCachedContent: P
     }),
-    [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]);
+    [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;
+  }, [L, S]);
   return {
-    state: d,
-    push: T,
-    go: v,
-    move: h,
+    state: y,
+    push: h,
+    go: R,
+    move: C,
     replace: w,
-    revealParent: k,
-    revealRoot: x,
-    dismissReveal: P,
-    getPanelProps: D,
-    getBackButtonProps: M,
-    canGo: E,
-    currentPanelId: m,
-    previousPanelId: g,
-    Outlet: S
+    revealParent: _,
+    revealRoot: $,
+    dismissReveal: x,
+    getPanelProps: N,
+    getBackButtonProps: T,
+    canGo: M,
+    currentPanelId: A,
+    previousPanelId: d,
+    Outlet: K
   };
 }
-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) {
-  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) {
+function Ve(n) {
   const {
     containerRef: e,
     navigation: t,
-    edge: s = "left",
-    edgeWidth: a = 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);
+    edge: i = "left",
+    edgeWidth: c = 20,
+    enabled: o = !0
+  } = n, [u, s] = r.useState(null), l = r.useCallback(
+    (d) => {
+      s(null), i === "left" && d.direction === 1 && t.canGo(-1) && t.go(-1);
     },
-    [s, t]
-  ), { isEdgeGesture: p, state: o, containerProps: d } = ke({
+    [i, t]
+  ), { isEdgeGesture: f, state: m, containerProps: g } = te({
     containerRef: e,
-    edge: s,
-    edgeWidth: a,
-    enabled: c && t.canGo(-1),
+    edge: i,
+    edgeWidth: c,
+    enabled: o ? t.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 } = ne({
     containerRef: e,
-    active: p,
+    active: f,
     preventEdgeBack: !0,
     preventOverscroll: !0,
-    edgeWidth: a
-  }), g = n.useMemo(() => {
+    edgeWidth: c
+  }), v = 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 R = Math.abs(h);
+    return Math.min(R / d, 1);
+  }, [u, e, i]), y = r.useMemo(
+    () => re(g, a),
+    [g, a]
   );
   return {
-    isEdgeSwiping: p,
-    progress: g,
-    inputState: p ? o : B,
-    containerProps: T
-  };
-}
-const j = {
-  /** 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) {
-  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
-      };
-      p.current?.(k), E ? (i.current = null, f.current = null, u(!1), o.current?.()) : i.current = requestAnimationFrame(g);
-    };
-    i.current = requestAnimationFrame(g);
-  }, [e, t, d]);
-  return n.useEffect(() => () => {
-    i.current !== null && cancelAnimationFrame(i.current);
-  }, []), {
-    isAnimating: c,
-    start: m,
-    cancel: d
+    isEdgeSwiping: f,
+    progress: v,
+    inputState: f ? m : se,
+    containerProps: y
   };
 }
-function Ce(r, e, t) {
-  return r + (e - r) * t;
-}
-const Pe = 300, X = (r) => r === "horizontal" ? "translateX" : "translateY";
-function Ie(r) {
+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: t,
-    displacement: s,
-    isSwiping: a,
-    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)
+    displacement: i,
+    isOperating: c,
+    axis: o = "horizontal",
+    animationDuration: u = ye,
+    containerSize: s,
+    animateOnTargetChange: l = !1,
+    initialPx: f,
+    skipTargetChangeAnimation: m = !1
+  } = 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,
+    t
+  );
+  R !== null && (d.current = R, h.current = !0);
+  const C = Re(
+    t,
+    y.current,
+    a.current,
+    c,
+    v.current !== null,
+    l,
+    m
+  );
+  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,
+    t
+  );
+  w !== null && (a.current = w, A.current = s);
+  const M = r.useCallback(
+    ({ easedProgress: T }) => {
+      const S = e.current, D = v.current;
+      if (!S || !D)
         return;
-      const C = Ce(I.from, I.to, D);
-      d.current = C, M.style.transform = `${X(c)}(${C}px)`;
+      const E = ie(D.from, D.to, T);
+      a.current = E, S.style.transform = `${B(o)}(${E}px)`;
     },
-    [c, e]
-  ), E = n.useCallback(() => {
-    m.current = null, d.current = t, g.current = t;
-  }, [t]), { isAnimating: k, start: x, cancel: P } = De({
+    [o, e]
+  ), _ = r.useCallback(() => {
+    v.current = null, a.current = t, y.current = t;
+  }, [t]), { isAnimating: $, start: x, cancel: N } = oe({
     duration: u,
-    easing: j.easeOutExpo,
-    onFrame: w,
-    onComplete: E
+    easing: ae.easeOutExpo,
+    onFrame: M,
+    onComplete: _
   });
-  return n.useLayoutEffect(() => {
-    if (a) {
-      P(), m.current = null, v.current = null;
+  return r.useLayoutEffect(() => {
+    if (c) {
+      N(), v.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 D = d.current;
+      v.current = D, d.current = null;
+      const E = e.current;
+      E && (E.style.transform = `${B(o)}(${D.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 - 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 || $ || v.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 S = t + i;
+    a.current = S, T.style.transform = `${B(o)}(${S}px)`;
+  }, [t, i, o, $, e]), {
+    isAnimating: $,
+    currentPx: a.current,
+    animationDirection: v.current
+  };
+}
+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 && (c.current = !0) : (c.current = !1, i.current = n), t.current = e;
+  }), {
+    value: a,
+    changedDuringOperation: g,
+    operationJustEnded: u
   };
 }
-const q = -0.3;
-function Me(r) {
-  return Math.max(0, r);
+const V = -0.3;
+function Te(n) {
+  return Math.max(0, n);
 }
-function Le(r, e, t = q) {
+function Se(n, e, t = V) {
   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;
-  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 Oe(r) {
-  const { depth: e, navigationDepth: t, isActive: s, isSwiping: a, isAnimating: c } = r;
-  return !!(s || e === t - 1 && (a || c));
+function De(n) {
+  const { depth: e, navigationDepth: t, isActive: i, isOperating: c, isAnimating: o } = n;
+  return !!(i || e === t - 1 && (c || o));
 }
-function _e(r, e) {
-  return r === e ? "active" : r === e - 1 ? "behind" : "hidden";
+function Ie(n, e) {
+  return n === e ? "active" : n === e - 1 ? "behind" : "hidden";
 }
-const Ne = 300, Fe = 0.05, Ue = 0.1, Be = {
+const Ee = 300, we = 0.05, Me = 0.1, xe = {
   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 = (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: r,
+    id: n,
     depth: e,
     navigationDepth: t,
-    isActive: s,
-    inputState: a,
-    containerSize: c,
+    isActive: i,
+    operationState: c,
+    containerSize: o,
     axis: u = "horizontal",
-    behindOffset: i = q,
-    animationDuration: f = Ne,
-    animateOnMount: p = !1,
-    showShadow: o = !0,
-    displayMode: d = "overlay",
-    showDimming: m = !0,
-    children: g
+    behindOffset: s = V,
+    animationDuration: l = Ee,
+    animateOnMount: f = !1,
+    showShadow: m = !0,
+    displayMode: g = "overlay",
+    showDimming: a = !0,
+    children: v
   }) => {
-    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 y = r.useRef(null), A = Pe(c, u), d = c.phase === "operating", h = Ie(e, t), { value: R, changedDuringOperation: C } = Ce(
+      h,
+      A > 0
+    ), w = r.useMemo(() => {
+      switch (R) {
         case "active":
           return 0;
         case "behind":
-          return i * c;
+          return s * o;
         case "hidden":
-          return c;
+          return o;
       }
-    }, [E, i, c]), P = n.useMemo(() => {
-      if (h <= 0)
+    }, [R, s, o]), M = r.useMemo(() => {
+      if (A <= 0)
         return 0;
-      switch (E) {
+      switch (R) {
         case "active":
-          return Me(h);
+          return Te(A);
         case "behind": {
-          const S = Le(h, c, i), l = i * c;
-          return S - l;
+          const I = Se(A, o, s), P = s * o;
+          return I - P;
         }
         case "hidden":
           return 0;
       }
-    }, [E, h, c, i]), D = n.useMemo(() => {
-      if (!(!k || !p) && E === "active" && e > 0)
-        return c;
-    }, [k, p, E, e, c]), { isAnimating: M } = Ie({
-      elementRef: T,
-      targetPx: x,
-      displacement: P,
-      isSwiping: w,
+    }, [R, A, o, s]), _ = r.useMemo(() => {
+      if (f && h === "active" && e > 0)
+        return o;
+    }, [f, h, e, o]), { isAnimating: $ } = ke({
+      elementRef: y,
+      targetPx: w,
+      displacement: M,
+      isOperating: d,
       axis: u,
-      animationDuration: f,
-      containerSize: c,
+      animationDuration: l,
+      containerSize: o,
       // 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: C
+    }), x = De({
       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")
+      isActive: i,
+      isOperating: d,
+      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 = t - e;
-      if (E === "active")
+      const I = t - e;
+      if (h === "active")
         return 1;
-      if (E === "behind") {
-        const l = 1 - S * Fe;
-        return l + C * (1 - l);
+      if (h === "behind") {
+        const P = 1 - I * we;
+        return P + N * (1 - P);
       }
       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")
+    }, [g, h, e, t, N]), S = r.useMemo(() => !a || h !== "behind" ? 0 : Me * (1 - N), [a, h, N]);
+    r.useLayoutEffect(() => {
+      const I = y.current;
+      I && (I.style.visibility = x ? "visible" : "hidden");
+    }, [x]), r.useLayoutEffect(() => {
+      const I = y.current;
+      if (!I || g !== "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 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(${L})`;
-    }, [L, d]);
-    const N = o && e > 0 && E === "active", b = n.useMemo(
+        I.style.transform = `scale(${T})`;
+    }, [T, g]);
+    const D = m ? e > 0 && h === "active" : !1, E = r.useMemo(
       () => ({
-        ...Be,
-        pointerEvents: s ? "auto" : "none",
+        ...xe,
+        pointerEvents: i ? "auto" : "none",
         willChange: "transform",
         zIndex: e,
-        visibility: I ? "visible" : "hidden",
-        boxShadow: N ? Xe : void 0
+        visibility: x ? "visible" : "hidden",
+        boxShadow: D ? Oe : void 0
       }),
-      [s, e, I, N]
-    ), R = n.useMemo(() => _ <= 0 ? null : {
+      [i, e, x, D]
+    ), U = r.useMemo(() => S <= 0 ? null : {
       position: "absolute",
       inset: 0,
-      backgroundColor: `rgba(0, 0, 0, ${_})`,
+      backgroundColor: `rgba(0, 0, 0, ${S})`,
       pointerEvents: "none",
       zIndex: 1
-    }, [_]);
-    return /* @__PURE__ */ J(
+    }, [S]);
+    return /* @__PURE__ */ j(
       "div",
       {
-        ref: T,
-        "data-stack-content": r,
+        ref: y,
+        "data-stack-content": n,
         "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 })
+          v,
+          U != null ? /* @__PURE__ */ O("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);
+), _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 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 o) {
+    const l = i[s], f = n.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 (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((i, f) => i.depth - f.depth);
+  return u.sort((s, l) => s.depth - l.depth);
 }
-const Qe = n.memo(
+const Ke = r.memo(
   ({
-    panels: r,
+    panels: n,
     navigationState: e,
-    inputState: t,
-    containerSize: s,
-    getCachedContent: a,
-    behindOffset: c,
+    operationState: t,
+    containerSize: i,
+    getCachedContent: c,
+    behindOffset: o,
     animateOnMount: u = !1,
-    animationDuration: i = Ge,
-    showShadow: f,
-    displayMode: p,
-    showDimming: o
+    animationDuration: s = _e,
+    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 [g, a] = r.useState(null), v = r.useRef(e.depth), y = r.useRef(e.stack);
+    r.useLayoutEffect(() => {
+      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);
+          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(n, e, g),
+      [n, e, g]
+    ), d = r.useMemo(
       () => ({
         position: "relative",
         width: "100%",
@@ -946,35 +646,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("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(
-        We,
+        Ne,
         {
-          id: w.id,
-          depth: E,
+          id: h.id,
+          depth: R,
           navigationDepth: e.depth,
-          isActive: x,
-          inputState: t,
-          containerSize: s,
-          behindOffset: c,
+          isActive: w,
+          operationState: t,
+          containerSize: i,
+          behindOffset: o,
           animateOnMount: u,
-          animationDuration: i,
-          showShadow: f,
-          displayMode: p,
-          showDimming: o,
-          children: P
+          animationDuration: s,
+          showShadow: l,
+          displayMode: f,
+          showDimming: m,
+          children: M
         },
-        w.id
+        h.id
       );
     }) });
   }
 );
 export {
-  pe as StackContent,
-  We as SwipeStackContent,
-  Qe as SwipeStackOutlet,
-  Ze as useStackNavigation,
-  Je as useStackSwipeInput
+  he as StackContent,
+  Ne as SwipeStackContent,
+  Ke as SwipeStackOutlet,
+  Ge as useStackNavigation,
+  Ve as useStackSwipeInput
 };
 //# sourceMappingURL=stack.js.map