react-panel-layout 0.5.2 → 0.6.0

package/dist/stack.js

@@ -0,0 +1,980 @@
+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";
+}
+function ie(r) {
+  const {
+    displayMode: e,
+    depth: t,
+    navigationDepth: s,
+    isActive: a,
+    isAnimatingOut: c,
+    isRevealing: u,
+    revealDepth: i
+  } = r;
+  return e === "overlay" ? a || c || u && t === i ? "visible" : "hidden" : t <= s || 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)
+    return `translateX(${0.3 * 100}%)`;
+  if (u)
+    return "translateX(0)";
+  if (i)
+    switch (s) {
+      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})`;
+      }
+    }
+  return "translateX(100%)";
+}
+function ue(r, e, t) {
+  return e === void 0 || e <= 0 || !t ? r : `translateX(${e * 100}%)`;
+}
+function le(r) {
+  if (r === "css")
+    return `transform ${Q} ${ee}`;
+}
+function fe(r) {
+  const {
+    depth: e,
+    isActive: t,
+    wasActive: s,
+    currentAnimationType: a,
+    displayMode: c,
+    transitionMode: u,
+    navigationState: i,
+    swipeProgress: f
+  } = r, o = ce({
+    wasActive: s,
+    isActive: t,
+    transitionMode: u
+  }) ?? a, d = o === "pop", m = ie({
+    displayMode: c,
+    depth: e,
+    navigationDepth: i.depth,
+    isActive: t,
+    isAnimatingOut: d,
+    isRevealing: i.isRevealing,
+    revealDepth: i.revealDepth
+  }), g = ae({
+    depth: e,
+    activeDepth: i.depth,
+    displayMode: c,
+    isRevealing: i.isRevealing,
+    revealDepth: i.revealDepth
+  }), T = ue(g, f, t), v = (() => {
+    if (u === "css") {
+      if (o === "push")
+        return te;
+      if (o === "pop")
+        return ne;
+    }
+  })(), h = le(u);
+  return {
+    nextAnimationType: o,
+    visibility: m,
+    transform: T,
+    animation: v,
+    transition: h,
+    zIndex: e,
+    pointerEvents: t ? "auto" : "none"
+  };
+}
+const de = {
+  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({
+      depth: e,
+      isActive: t,
+      wasActive: p.current,
+      currentAnimationType: o,
+      displayMode: s,
+      transitionMode: a,
+      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
+      };
+      return m.animation !== void 0 && (h.animation = m.animation), m.transition !== void 0 && (h.transition = m.transition), h;
+    }, [
+      m.transform,
+      m.pointerEvents,
+      m.zIndex,
+      m.visibility,
+      m.animation,
+      m.transition
+    ]), v = /* @__PURE__ */ O(
+      "div",
+      {
+        ref: f,
+        "data-stack-content": r,
+        "data-depth": e,
+        "data-active": t ? "true" : "false",
+        style: T,
+        onAnimationEnd: g,
+        children: i
+      }
+    );
+    return a === "none" ? /* @__PURE__ */ O(n.Activity, { mode: t ? "visible" : "hidden", children: v }) : v;
+  }
+), V = n.createContext(null), me = n.memo(() => {
+  const r = n.useContext(V);
+  if (!r)
+    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,
+    {
+      id: i.id,
+      depth: f,
+      isActive: f === s.depth,
+      displayMode: a,
+      transitionMode: c,
+      navigationState: s,
+      children: i.cache ? r.getCachedContent(i.id) : i.content
+    },
+    i.id
+  )) });
+});
+function Ze(r) {
+  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;
+    return {
+      "data-stack-panel": l,
+      "data-depth": y,
+      "data-active": A ? "true" : "false",
+      "aria-hidden": !A
+    };
+  }, [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";
+    return {
+      onClick: () => v(-1),
+      disabled: !l,
+      "aria-label": A
+    };
+  }, [o, g, e, v]), I = n.useMemo(
+    () => ({
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }),
+    []
+  ), C = n.useRef({
+    panels: e,
+    navigationState: d,
+    displayMode: s,
+    transitionMode: a
+  });
+  C.current = {
+    panels: e,
+    navigationState: d,
+    displayMode: s,
+    transitionMode: a
+  };
+  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,
+    []
+  ), N = n.useMemo(() => e.map((l) => l.id), [e]), { getCachedContent: b } = se({
+    resolveContent: _,
+    validIds: N
+  }), R = n.useMemo(
+    () => ({
+      getState: () => C.current,
+      subscribe: (l) => (L.current.add(l), () => L.current.delete(l)),
+      getCachedContent: b
+    }),
+    [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]);
+  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
+  };
+}
+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) {
+  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);
+    },
+    [s, t]
+  ), { isEdgeGesture: p, state: o, containerProps: d } = ke({
+    containerRef: e,
+    edge: s,
+    edgeWidth: a,
+    enabled: c && t.canGo(-1),
+    // Only enable if can go back
+    onSwipeEnd: f
+  });
+  n.useEffect(() => {
+    p && (o.phase === "swiping" || o.phase === "tracking") ? i(o) : o.phase === "idle" && i(null);
+  }, [p, o]);
+  const { containerProps: m } = Ae({
+    containerRef: e,
+    active: p,
+    preventEdgeBack: !0,
+    preventOverscroll: !0,
+    edgeWidth: a
+  }), g = n.useMemo(() => {
+    if (!u || !e.current)
+      return 0;
+    const h = e.current.clientWidth;
+    if (h === 0)
+      return 0;
+    const w = u.displacement.x;
+    if (s === "left" && w <= 0 || s === "right" && w >= 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]
+  );
+  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
+  };
+}
+function Ce(r, e, t) {
+  return r + (e - r) * t;
+}
+const Pe = 300, X = (r) => r === "horizontal" ? "translateX" : "translateY";
+function Ie(r) {
+  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)
+        return;
+      const C = Ce(I.from, I.to, D);
+      d.current = C, M.style.transform = `${X(c)}(${C}px)`;
+    },
+    [c, e]
+  ), E = n.useCallback(() => {
+    m.current = null, d.current = t, g.current = t;
+  }, [t]), { isAnimating: k, start: x, cancel: P } = De({
+    duration: u,
+    easing: j.easeOutExpo,
+    onFrame: w,
+    onComplete: E
+  });
+  return n.useLayoutEffect(() => {
+    if (a) {
+      P(), m.current = null, v.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();
+      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)
+      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 q = -0.3;
+function Me(r) {
+  return Math.max(0, r);
+}
+function Le(r, e, t = q) {
+  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;
+}
+function Oe(r) {
+  const { depth: e, navigationDepth: t, isActive: s, isSwiping: a, isAnimating: c } = r;
+  return !!(s || e === t - 1 && (a || c));
+}
+function _e(r, e) {
+  return r === e ? "active" : r === e - 1 ? "behind" : "hidden";
+}
+const Ne = 300, Fe = 0.05, Ue = 0.1, Be = {
+  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(
+  ({
+    id: r,
+    depth: e,
+    navigationDepth: t,
+    isActive: s,
+    inputState: a,
+    containerSize: c,
+    axis: u = "horizontal",
+    behindOffset: i = q,
+    animationDuration: f = Ne,
+    animateOnMount: p = !1,
+    showShadow: o = !0,
+    displayMode: d = "overlay",
+    showDimming: m = !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) {
+        case "active":
+          return 0;
+        case "behind":
+          return i * c;
+        case "hidden":
+          return c;
+      }
+    }, [E, i, c]), P = n.useMemo(() => {
+      if (h <= 0)
+        return 0;
+      switch (E) {
+        case "active":
+          return Me(h);
+        case "behind": {
+          const S = Le(h, c, i), l = i * c;
+          return S - l;
+        }
+        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,
+      axis: u,
+      animationDuration: f,
+      containerSize: c,
+      // Animate when targetPx changes (button navigation)
+      animateOnTargetChange: !0,
+      // For push animation: start from off-screen
+      initialPx: D
+    }), I = Oe({
+      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")
+        return 1;
+      const S = t - e;
+      if (E === "active")
+        return 1;
+      if (E === "behind") {
+        const l = 1 - S * Fe;
+        return l + C * (1 - l);
+      }
+      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")
+        return;
+      const l = S.style.transform;
+      if (l.includes("translateX")) {
+        const y = l.match(/translateX\([^)]+\)/);
+        y && (S.style.transform = `${y[0]} scale(${L})`);
+      } else
+        S.style.transform = `scale(${L})`;
+    }, [L, d]);
+    const N = o && e > 0 && E === "active", b = n.useMemo(
+      () => ({
+        ...Be,
+        pointerEvents: s ? "auto" : "none",
+        willChange: "transform",
+        zIndex: e,
+        visibility: I ? "visible" : "hidden",
+        boxShadow: N ? Xe : void 0
+      }),
+      [s, e, I, N]
+    ), R = n.useMemo(() => _ <= 0 ? null : {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: `rgba(0, 0, 0, ${_})`,
+      pointerEvents: "none",
+      zIndex: 1
+    }, [_]);
+    return /* @__PURE__ */ J(
+      "div",
+      {
+        ref: T,
+        "data-stack-content": r,
+        "data-depth": e,
+        "data-active": s ? "true" : "false",
+        "data-role": E,
+        style: b,
+        children: [
+          g,
+          R != null && /* @__PURE__ */ O("div", { style: R, "data-dimming-overlay": !0 })
+        ]
+      }
+    );
+  }
+), Ge = 300;
+function He(r, e, t) {
+  const { stack: s, depth: a } = e, c = [a];
+  a > 0 && c.push(a - 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 });
+  }
+  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 });
+  }
+  return u.sort((i, f) => i.depth - f.depth);
+}
+const Qe = n.memo(
+  ({
+    panels: r,
+    navigationState: e,
+    inputState: t,
+    containerSize: s,
+    getCachedContent: a,
+    behindOffset: c,
+    animateOnMount: u = !1,
+    animationDuration: i = Ge,
+    showShadow: f,
+    displayMode: p,
+    showDimming: o
+  }) => {
+    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);
+        }
+      }
+    }, [e.depth, e.stack, i]);
+    const v = n.useMemo(
+      () => He(r, e, d),
+      [r, e, d]
+    ), h = n.useMemo(
+      () => ({
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      }),
+      []
+    );
+    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,
+        {
+          id: w.id,
+          depth: E,
+          navigationDepth: e.depth,
+          isActive: x,
+          inputState: t,
+          containerSize: s,
+          behindOffset: c,
+          animateOnMount: u,
+          animationDuration: i,
+          showShadow: f,
+          displayMode: p,
+          showDimming: o,
+          children: P
+        },
+        w.id
+      );
+    }) });
+  }
+);
+export {
+  pe as StackContent,
+  We as SwipeStackContent,
+  Qe as SwipeStackOutlet,
+  Ze as useStackNavigation,
+  Je as useStackSwipeInput
+};
+//# sourceMappingURL=stack.js.map