react-panel-layout 0.6.1 → 0.7.1

package/dist/modules/drawer/strategies/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Drawer transform strategies module.
+ *
+ * Exports strategy implementations for different drawer animation modes.
+ */
+export * from "./types.js";
+export { revealStrategy } from "./revealStrategy.js";
+export { overlayStrategy } from "./overlayStrategy.js";

package/dist/modules/drawer/strategies/overlayStrategy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file Overlay mode drawer transform strategy.
+ *
+ * Implements the overlay animation where:
+ * - Drawer slides from ±100% to 0% (slides over content)
+ * - Backdrop opacity changes from 0 to 1
+ */
+import type { DrawerTransformStrategy, OverlayPosition } from "./types.js";
+/**
+ * Overlay mode drawer transform strategy.
+ */
+export declare const overlayStrategy: DrawerTransformStrategy<OverlayPosition>;

package/dist/modules/drawer/strategies/revealStrategy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file Reveal mode drawer transform strategy.
+ *
+ * Implements the reveal animation where:
+ * - Drawer slides from -30% to 0% (parallax effect)
+ * - Content slides from 0 to +drawerSize (reveals drawer behind)
+ */
+import type { DrawerTransformStrategy, RevealPosition } from "./types.js";
+/**
+ * Reveal mode drawer transform strategy.
+ */
+export declare const revealStrategy: DrawerTransformStrategy<RevealPosition>;

package/dist/modules/drawer/strategies/types.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @file Drawer transform strategy types.
+ *
+ * Defines the strategy pattern interface for different drawer animation modes.
+ * Each mode (reveal, overlay) implements this interface with mode-specific
+ * position calculations and DOM operations.
+ */
+import type { DrawerPlacement } from "../../../components/window/drawerStyles.js";
+/**
+ * Position values for reveal mode.
+ * - Drawer moves from -30% to 0%
+ * - Content moves from 0 to +drawerSize
+ */
+export type RevealPosition = {
+    /** Drawer offset in pixels */
+    drawerPx: number;
+    /** Content offset in pixels */
+    contentPx: number;
+};
+/**
+ * Position values for overlay mode.
+ * - Drawer moves from ±100% to 0%
+ * - Backdrop opacity changes from 0 to 1
+ */
+export type OverlayPosition = {
+    /** Drawer offset in pixels */
+    drawerPx: number;
+    /** Backdrop opacity (0-1) */
+    backdropOpacity: number;
+};
+/**
+ * Configuration for drawer strategy calculations.
+ */
+export type DrawerStrategyConfig = {
+    /** Drawer placement (left, right, top, bottom) */
+    placement: DrawerPlacement;
+    /** Drawer size in pixels */
+    drawerSize: number;
+    /** Content background color (reveal mode) */
+    contentBackground?: string;
+};
+/**
+ * DOM elements used by drawer strategies.
+ */
+export type DrawerElements = {
+    /** Drawer element */
+    drawer: HTMLElement | null;
+    /** Content element (reveal mode) */
+    content: HTMLElement | null;
+    /** Backdrop element (overlay mode) */
+    backdrop: HTMLElement | null;
+};
+/**
+ * Placement configuration for transform calculations.
+ */
+export type PlacementConfig = {
+    /** Transform axis (X or Y) */
+    axis: "X" | "Y";
+    /** Sign for transform direction (1 or -1) */
+    sign: 1 | -1;
+};
+/**
+ * Lookup table for placement configuration.
+ */
+export declare const PLACEMENT_CONFIG: Record<DrawerPlacement, PlacementConfig>;
+/**
+ * Get placement configuration for a drawer placement.
+ */
+export declare function getPlacementConfig(placement: DrawerPlacement): PlacementConfig;
+/**
+ * Strategy interface for drawer transform calculations.
+ *
+ * Each drawer mode (reveal, overlay) implements this interface to provide
+ * mode-specific position calculations and DOM operations while sharing
+ * the common state machine logic.
+ *
+ * @typeParam TPosition - The position type used by this strategy
+ */
+export type DrawerTransformStrategy<TPosition> = {
+    /**
+     * Get the closed position (progress = 0).
+     */
+    getClosedPosition: (config: DrawerStrategyConfig) => TPosition;
+    /**
+     * Get the open position (progress = 1).
+     */
+    getOpenPosition: (config: DrawerStrategyConfig) => TPosition;
+    /**
+     * Compute position from progress (0 = closed, 1 = open).
+     */
+    computePositionFromProgress: (progress: number, config: DrawerStrategyConfig) => TPosition;
+    /**
+     * Interpolate between two positions.
+     */
+    interpolatePosition: (from: TPosition, to: TPosition, progress: number) => TPosition;
+    /**
+     * Determine if animation is needed between two positions.
+     */
+    shouldAnimate: (from: TPosition, to: TPosition) => boolean;
+    /**
+     * Apply position to DOM elements.
+     */
+    applyToDOM: (position: TPosition, elements: DrawerElements, config: DrawerStrategyConfig) => void;
+    /**
+     * Clear transforms from DOM elements.
+     */
+    clearFromDOM: (elements: DrawerElements, config: DrawerStrategyConfig) => void;
+    /**
+     * Called when opening animation starts (optional).
+     */
+    onOpeningStart?: (elements: DrawerElements, config: DrawerStrategyConfig) => void;
+    /**
+     * Called when closing animation completes (optional).
+     */
+    onClosingComplete?: (elements: DrawerElements, config: DrawerStrategyConfig) => void;
+};

package/dist/panels.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PanelSystem-D603LKKv.cjs");exports.DropSuggestOverlay=e.DropSuggestOverlay;exports.PanelGroupView=e.PanelGroupView;exports.PanelSystem=e.PanelSystem;exports.PanelSystemProvider=e.PanelSystemProvider;exports.addTabToGroup=e.addTabToGroup;exports.addTabToGroupAtIndex=e.addTabToGroupAtIndex;exports.buildInitialState=e.buildInitialState;exports.closeLeaf=e.closeLeaf;exports.collectGroupsInOrder=e.collectGroupsInOrder;exports.createEmptyGroup=e.createEmptyGroup;exports.focusGroupIndex=e.focusGroupIndex;exports.isGroup=e.isGroup;exports.moveTab=e.moveTab;exports.nextGroup=e.nextGroup;exports.prevGroup=e.prevGroup;exports.refreshGroupOrder=e.refreshGroupOrder;exports.removeTabFromGroup=e.removeTabFromGroup;exports.reorderTabWithinGroup=e.reorderTabWithinGroup;exports.setActiveTab=e.setActiveTab;exports.setFocusedGroup=e.setFocusedGroup;exports.setSplitRatio=e.setSplitRatio;exports.splitGroup=e.splitGroup;exports.splitLeaf=e.splitLeaf;exports.usePanelSystem=e.usePanelSystem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PanelSystem-Dmy5YI_6.cjs");exports.DropSuggestOverlay=e.DropSuggestOverlay;exports.PanelGroupView=e.PanelGroupView;exports.PanelSystem=e.PanelSystem;exports.PanelSystemProvider=e.PanelSystemProvider;exports.addTabToGroup=e.addTabToGroup;exports.addTabToGroupAtIndex=e.addTabToGroupAtIndex;exports.buildInitialState=e.buildInitialState;exports.closeLeaf=e.closeLeaf;exports.collectGroupsInOrder=e.collectGroupsInOrder;exports.createEmptyGroup=e.createEmptyGroup;exports.focusGroupIndex=e.focusGroupIndex;exports.isGroup=e.isGroup;exports.moveTab=e.moveTab;exports.nextGroup=e.nextGroup;exports.prevGroup=e.prevGroup;exports.refreshGroupOrder=e.refreshGroupOrder;exports.removeTabFromGroup=e.removeTabFromGroup;exports.reorderTabWithinGroup=e.reorderTabWithinGroup;exports.setActiveTab=e.setActiveTab;exports.setFocusedGroup=e.setFocusedGroup;exports.setSplitRatio=e.setSplitRatio;exports.splitGroup=e.splitGroup;exports.splitLeaf=e.splitLeaf;exports.usePanelSystem=e.usePanelSystem;
 //# sourceMappingURL=panels.cjs.map

package/dist/panels.js

@@ -1,4 +1,4 @@
-import { D as e, a as r, P as o, b as t, g as p, k as u, v as i, d as l, c as G, f as d, n, i as m, m as b, o as c, p as T, q as v, r as f, j as P, h as S, l as y, e as x, t as I, s as g, u as h } from "./PanelSystem-BqUzNtf2.js";
+import { D as e, a as r, P as o, b as t, g as p, k as u, v as i, d as l, c as G, f as d, n, i as m, m as b, o as c, p as T, q as v, r as f, j as P, h as S, l as y, e as x, t as I, s as g, u as h } from "./PanelSystem-DrYsYwuV.js";
 export {
   e as DropSuggestOverlay,
   r as PanelGroupView,

package/dist/stack.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),Z=require("react"),X=require("./styles-qf6ptVLD.cjs"),z=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),ee=require("./useContentCache-DqXtLrLs.cjs"),G=require("./useNativeGestureGuard-C7TSqEkr.cjs");function te(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,i.get?i:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const r=te(Z);function ne(t){const{wasActive:e,isActive:n,transitionMode:i}=t;return i!=="css"||e===n?null:n?"push":"pop"}function re(t){const{displayMode:e,depth:n,navigationDepth:i,isActive:o,isAnimatingOut:c,isRevealing:u,revealDepth:s}=t;return e==="overlay"?o||c||u&&n===s?"visible":"hidden":n<=i||c?"visible":"hidden"}function se(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(${.3*100}%)`;if(u)return"translateX(0)";if(s)switch(i){case"overlay":return"translateX(0)";case"slide":return"translateX(-30%)";case"stack":{const l=(n-e)*-5,f=1-(n-e)*.05;return`translateX(${l}%) scale(${f})`}}return"translateX(100%)"}function ie(t,e,n){return e===void 0||e<=0||!n?t:`translateX(${e*100}%)`}function ce(t){if(t==="css")return`transform ${X.STACK_TRANSITION_DURATION} ${X.STACK_TRANSITION_EASING}`}function oe(t){const{depth:e,isActive:n,wasActive:i,currentAnimationType:o,displayMode:c,transitionMode:u,navigationState:s,swipeProgress:l}=t,m=ne({wasActive:i,isActive:n,transitionMode:u})??o,v=m==="pop",a=re({displayMode:c,depth:e,navigationDepth:s.depth,isActive:n,isAnimatingOut:v,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),g=se({depth:e,activeDepth:s.depth,displayMode:c,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),y=ie(g,l,n),R=(()=>{if(u==="css"){if(m==="push")return X.STACK_ANIMATION_PUSH;if(m==="pop")return X.STACK_ANIMATION_POP}})(),d=ce(u);return{nextAnimationType:m,visibility:a,transform:y,animation:R,transition:d,zIndex:e,pointerEvents:n?"auto":"none"}}const ae={position:"absolute",inset:0,width:"100%",height:"100%"},q=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=oe({depth:e,isActive:n,wasActive:f.current,currentAnimationType:m,displayMode:i,transitionMode:o,navigationState:c,swipeProgress:u});z.useIsomorphicLayoutEffect(()=>{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)},[]),y=r.useMemo(()=>{const d={...ae,transform:a.transform,pointerEvents:a.pointerEvents,zIndex:a.zIndex,visibility:a.visibility};return a.animation!==void 0&&(d.animation=a.animation),a.transition!==void 0&&(d.transition=a.transition),d},[a.transform,a.pointerEvents,a.zIndex,a.visibility,a.animation,a.transition]),R=E.jsx("div",{ref:l,"data-stack-content":t,"data-depth":e,"data-active":n?"true":"false",style:y,onAnimationEnd:g,children:s});return o==="none"?E.jsx(r.Activity,{mode:n?"visible":"hidden",children:R}):R});function ue(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 V=r.createContext(null),le=r.memo(()=>{const t=r.useContext(V);if(!t)throw new Error("StackOutlet must be used within useStackNavigation");const[,e]=r.useReducer(s=>s+1,0);r.useEffect(()=>t.subscribe(e),[t]);const{panels:n,navigationState:i,displayMode:o,transitionMode:c}=t.getState(),u=r.useMemo(()=>i.stack.map((s,l)=>{const f=n.find(m=>m.id===s);return f?{panel:f,depth:l}:null}).filter(s=>s!==null),[i.stack,n]);return E.jsx(E.Fragment,{children:u.map(({panel:s,depth:l})=>E.jsx(q,{id:s.id,depth:l,isActive:l===i.depth,displayMode:o,transitionMode:c,navigationState:i,children:s.cache?t.getCachedContent(s.id):s.content},s.id))})});function fe(t){const{panels:e,initialPanelId:n,displayMode:i,transitionMode:o="css",onPanelChange:c}=t,u=n??e[0]?.id;if(!u)throw new Error("useStackNavigation: No panels provided");const[s,l]=r.useReducer(ue,[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,y=r.useMemo(()=>({stack:s,depth:g,isRevealing:v.isRevealing,revealDepth:v.revealDepth}),[s,g,v.isRevealing,v.revealDepth]),R=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]),A=r.useCallback(p=>{l({type:"go",direction:p})},[]),k=r.useCallback(p=>{l({type:"move",targetDepth:p})},[]),x=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 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})},[]),O=r.useCallback(()=>{a({isRevealing:!1,revealDepth:null})},[]),N=r.useCallback(p=>{const C=f.current,b=C.indexOf(p),U=C.length-1,j=b===U;return{"data-stack-panel":p,"data-depth":b,"data-active":j?"true":"false","aria-hidden":!j}},[]),S=r.useCallback(()=>{const p=f.current,C=p.length-1,b=C>0,U=C>0?p[C-1]:null,j=U?e.find(Q=>Q.id===U):null,J=j?.title?`Back to ${j.title}`:"Go back";return{onClick:()=>A(-1),disabled:!b,"aria-label":J}},[e,A]),T=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]),D=r.useRef({panels:e,navigationState:y,displayMode:i,transitionMode:o});D.current={panels:e,navigationState:y,displayMode:i,transitionMode:o};const w=r.useRef(new Set);r.useEffect(()=>{w.current.forEach(p=>p())},[y,i,o]);const L=r.useCallback(p=>D.current.panels.find(b=>b.id===p)?.content??null,[]),I=r.useMemo(()=>e.map(p=>p.id),[e]),{getCachedContent:P}=ee.useContentCache({resolveContent:L,validIds:I}),$=r.useMemo(()=>({getState:()=>D.current,subscribe:p=>(w.current.add(p),()=>w.current.delete(p)),getCachedContent:P}),[P]),Y=r.useMemo(()=>{const p=()=>E.jsx(V.Provider,{value:$,children:E.jsx("div",{style:T,"data-stack-container":!0,children:E.jsx(le,{})})});return p.displayName="StackOutlet",p},[$,T]);return{state:y,push:h,go:A,move:k,replace:x,revealParent:_,revealRoot:F,dismissReveal:O,getPanelProps:N,getBackButtonProps:S,canGo:M,currentPanelId:R,previousPanelId:d,Outlet:Y}}function pe(t){const{containerRef:e,navigation:n,edge:i="left",edgeWidth:o=20,enabled:c=!0}=t,[u,s]=r.useState(null),l=r.useCallback(d=>{s(null),i==="left"&&d.direction===1&&n.canGo(-1)&&n.go(-1)},[i,n]),{isEdgeGesture:f,state:m,containerProps:v}=G.useEdgeSwipeInput({containerRef:e,edge:i,edgeWidth:o,enabled:c?n.canGo(-1):!1,onSwipeEnd:l});r.useEffect(()=>{f&&(m.phase==="swiping"||m.phase==="tracking")?s(m):m.phase==="idle"&&s(null)},[f,m]);const{containerProps:a}=G.useNativeGestureGuard({containerRef:e,active:f,preventEdgeBack:!0,preventOverscroll:!0,edgeWidth:o}),g=r.useMemo(()=>{if(!u||!e.current)return 0;const d=e.current.clientWidth;if(d===0)return 0;const h=u.displacement.x;if(i==="left"&&h<=0||i==="right"&&h>=0)return 0;const A=Math.abs(h);return Math.min(A/d,1)},[u,e,i]),y=r.useMemo(()=>G.mergeGestureContainerProps(v,a),[v,a]),R=f?m:G.IDLE_SWIPE_INPUT_STATE;return{isEdgeSwiping:f,progress:g,inputState:R,containerProps:y}}const K={easeOutExpo:t=>t===1?1:1-Math.pow(2,-10*t)},de=300;function me(t){const{duration:e=de,easing:n=K.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=y=>{l.current===null&&(l.current=y);const R=y-l.current,d=Math.min(R/e,1),h=n(d),A=d>=1,k={progress:d,easedProgress:h,elapsed:R,isComplete:A};f.current?.(k),A?(s.current=null,l.current=null,u(!1),m.current?.()):s.current=requestAnimationFrame(g)};s.current=requestAnimationFrame(g)},[e,n,v]);return r.useEffect(()=>()=>{s.current!==null&&cancelAnimationFrame(s.current)},[]),{isAnimating:c,start:a,cancel:v}}function he(t,e,n){return t+(e-t)*n}const ve=300,B=t=>t==="horizontal"?"translateX":"translateY",ge=(t,e,n,i)=>t||e===void 0||e<=0||n===void 0||n===i?null:{from:n,to:i},ye=(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},Re=(t,e,n)=>t===void 0||t===e||t<=0?null:n;function Ae(t){const{elementRef:e,targetPx:n,displacement:i,isOperating:o,axis:c="horizontal",animationDuration:u=ve,containerSize:s,animateOnTargetChange:l=!1,initialPx:f,skipTargetChangeAnimation:m=!1}=t,v=f??n,a=r.useRef(v),g=r.useRef(null),y=r.useRef(n),R=r.useRef(s),d=r.useRef(null),h=r.useRef(!1),A=ge(h.current,s,f,n);A!==null&&(d.current=A,h.current=!0);const k=ye(n,y.current,a.current,o,g.current!==null,l,m);k.type==="animate"?(d.current=k.animation,y.current=n):k.type==="snap"&&(a.current=k.position,y.current=n);const x=Re(s,R.current,n);x!==null&&(a.current=x,R.current=s);const M=r.useCallback(({easedProgress:S})=>{const T=e.current,D=g.current;if(!T||!D)return;const w=he(D.from,D.to,S);a.current=w,T.style.transform=`${B(c)}(${w}px)`},[c,e]),_=r.useCallback(()=>{g.current=null,a.current=n,y.current=n},[n]),{isAnimating:F,start:O,cancel:N}=me({duration:u,easing:K.easeOutExpo,onFrame:M,onComplete:_});return r.useLayoutEffect(()=>{if(o){N(),g.current=null,d.current=null;return}if(d.current){const D=d.current;g.current=D,d.current=null;const w=e.current;w&&(w.style.transform=`${B(c)}(${D.from}px)`),O();return}const S=a.current;Math.abs(S-n)>1?(g.current={from:S,to:n},O()):(a.current=n,y.current=n)},[o,n,O,N]),r.useLayoutEffect(()=>{const S=e.current;if(!S||F||g.current!==null||d.current!==null)return;const T=n+i;a.current=T,S.style.transform=`${B(c)}(${T}px)`},[n,i,c,F,e]),{isAnimating:F,currentPx:a.current,animationDirection:g.current}}function be(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 W=-.3;function Ce(t){return Math.max(0,t)}function ke(t,e,n=W){if(e<=0)return 0;const i=Math.max(0,t),o=Math.min(i/e,1),c=n*e,u=Math.abs(n)*o*e;return c+u}function Se(t){const{depth:e,navigationDepth:n,isActive:i,isOperating:o,isAnimating:c}=t;return!!(i||e===n-1&&(o||c))}function Te(t,e){return t===e?"active":t===e-1?"behind":"hidden"}const De=300,Ie=.05,Ee=.1,we={position:"absolute",inset:0,width:"100%",height:"100%"},xe=(t,e)=>t.phase==="idle"?0:e==="horizontal"?t.displacement.x:t.displacement.y,Me="-5px 0 15px rgba(0, 0, 0, 0.1)",H=r.memo(({id:t,depth:e,navigationDepth:n,isActive:i,operationState:o,containerSize:c,axis:u="horizontal",behindOffset:s=W,animationDuration:l=De,animateOnMount:f=!1,showShadow:m=!0,displayMode:v="overlay",showDimming:a=!0,children:g})=>{const y=r.useRef(null),R=xe(o,u),d=o.phase==="operating",h=Te(e,n),{value:A,changedDuringOperation:k}=be(h,R>0),x=r.useMemo(()=>{switch(A){case"active":return 0;case"behind":return s*c;case"hidden":return c}},[A,s,c]),M=r.useMemo(()=>{if(R<=0)return 0;switch(A){case"active":return Ce(R);case"behind":{const I=ke(R,c,s),P=s*c;return I-P}case"hidden":return 0}},[A,R,c,s]),_=r.useMemo(()=>{if(f&&h==="active"&&e>0)return c},[f,h,e,c]),{isAnimating:F}=Ae({elementRef:y,targetPx:x,displacement:M,isOperating:d,axis:u,animationDuration:l,containerSize:c,animateOnTargetChange:!0,initialPx:_,skipTargetChangeAnimation:k}),O=Se({depth:e,navigationDepth:n,isActive:i,isOperating:d,isAnimating:F}),N=r.useMemo(()=>c<=0||R<=0?0:Math.min(R/c,1),[R,c]),S=r.useMemo(()=>{if(v!=="stack")return 1;const I=n-e;if(h==="active")return 1;if(h==="behind"){const P=1-I*Ie;return P+N*(1-P)}return 1},[v,h,e,n,N]),T=r.useMemo(()=>!a||h!=="behind"?0:Ee*(1-N),[a,h,N]);r.useLayoutEffect(()=>{const I=y.current;I&&(I.style.visibility=O?"visible":"hidden")},[O]),r.useLayoutEffect(()=>{const I=y.current;if(!I||v!=="stack")return;const P=I.style.transform;if(P.includes("translateX")){const $=P.match(/translateX\([^)]+\)/);$&&(I.style.transform=`${$[0]} scale(${S})`)}else I.style.transform=`scale(${S})`},[S,v]);const D=m?e>0&&h==="active":!1,w=r.useMemo(()=>({...we,pointerEvents:i?"auto":"none",willChange:"transform",zIndex:e,visibility:O?"visible":"hidden",boxShadow:D?Me:void 0}),[i,e,O,D]),L=r.useMemo(()=>T<=0?null:{position:"absolute",inset:0,backgroundColor:`rgba(0, 0, 0, ${T})`,pointerEvents:"none",zIndex:1},[T]);return E.jsxs("div",{ref:y,"data-stack-content":t,"data-depth":e,"data-active":i?"true":"false","data-role":h,style:w,children:[g,L!=null?E.jsx("div",{style:L,"data-dimming-overlay":!0}):null]})}),Oe=300;function Pe(t,e,n){const{stack:i,depth:o}=e,c=[o];o>0&&c.push(o-1);const u=[];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(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((s,l)=>s.depth-l.depth)}const Ne=r.memo(({panels:t,navigationState:e,operationState:n,containerSize:i,getCachedContent:o,behindOffset:c,animateOnMount:u=!1,animationDuration:s=Oe,showShadow:l,displayMode:f,showDimming:m})=>{const[v,a]=r.useState(null),g=r.useRef(e.depth),y=r.useRef(e.stack);r.useLayoutEffect(()=>{const h=g.current,A=y.current,{depth:k,stack:x}=e;if(g.current=k,y.current=x,k<h){const M=A[h];if(M!=null){a(M);const _=setTimeout(()=>{a(null)},s);return()=>clearTimeout(_)}}},[e.depth,e.stack,s]);const R=r.useMemo(()=>Pe(t,e,v),[t,e,v]),d=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]);return E.jsx("div",{style:d,"data-swipe-stack-container":!0,children:R.map(({panel:h,depth:A,isExiting:k})=>{const x=A===e.depth&&!k,M=o?.(h.id)??h.content;return E.jsx(H,{id:h.id,depth:A,navigationDepth:e.depth,isActive:x,operationState:n,containerSize:i,behindOffset:c,animateOnMount:u,animationDuration:s,showShadow:l,displayMode:f,showDimming:m,children:M},h.id)})})});exports.StackContent=q;exports.SwipeStackContent=H;exports.SwipeStackOutlet=Ne;exports.useStackNavigation=fe;exports.useStackSwipeInput=pe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),Q=require("react"),B=require("./styles-qf6ptVLD.cjs"),Z=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),z=require("./useContentCache-DqXtLrLs.cjs"),j=require("./useAnimationFrame-XRpDXkwV.cjs");function ee(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const r=ee(Q);function te(n){const{wasActive:e,isActive:t,transitionMode:i}=n;return i!=="css"||e===t?null:t?"push":"pop"}function ne(n){const{displayMode:e,depth:t,navigationDepth:i,isActive:a,isAnimatingOut:c,isRevealing:u,revealDepth:s}=n;return e==="overlay"?a||c||u&&t===s?"visible":"hidden":t<=i||c?"visible":"hidden"}function re(n){const{depth:e,activeDepth:t,displayMode:i,isRevealing:a,revealDepth:c}=n,u=e===t,s=e<t;if(a&&u&&c!==null)return`translateX(${.3*100}%)`;if(u)return"translateX(0)";if(s)switch(i){case"overlay":return"translateX(0)";case"slide":return"translateX(-30%)";case"stack":{const l=(t-e)*-5,f=1-(t-e)*.05;return`translateX(${l}%) scale(${f})`}}return"translateX(100%)"}function se(n,e,t){return e===void 0||e<=0||!t?n:`translateX(${e*100}%)`}function ie(n){if(n==="css")return`transform ${B.STACK_TRANSITION_DURATION} ${B.STACK_TRANSITION_EASING}`}function ce(n){const{depth:e,isActive:t,wasActive:i,currentAnimationType:a,displayMode:c,transitionMode:u,navigationState:s,swipeProgress:l}=n,m=te({wasActive:i,isActive:t,transitionMode:u})??a,g=m==="pop",o=ne({displayMode:c,depth:e,navigationDepth:s.depth,isActive:t,isAnimatingOut:g,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),v=re({depth:e,activeDepth:s.depth,displayMode:c,isRevealing:s.isRevealing,revealDepth:s.revealDepth}),y=se(v,l,t),b=(()=>{if(u==="css"){if(m==="push")return B.STACK_ANIMATION_PUSH;if(m==="pop")return B.STACK_ANIMATION_POP}})(),d=ie(u);return{nextAnimationType:m,visibility:o,transform:y,animation:b,transition:d,zIndex:e,pointerEvents:t?"auto":"none"}}const oe={position:"absolute",inset:0,width:"100%",height:"100%"},V=r.memo(({id:n,depth:e,isActive:t,displayMode:i,transitionMode:a,navigationState:c,swipeProgress:u,children:s})=>{const l=r.useRef(null),f=r.useRef(t),[m,g]=r.useState(null),o=ce({depth:e,isActive:t,wasActive:f.current,currentAnimationType:m,displayMode:i,transitionMode:a,navigationState:c,swipeProgress:u});Z.useIsomorphicLayoutEffect(()=>{const d=f.current;f.current=t,d!==t&&g(o.nextAnimationType)},[t,o.nextAnimationType]);const v=r.useCallback(d=>{d.target===d.currentTarget&&g(null)},[]),y=r.useMemo(()=>{const d={...oe,transform:o.transform,pointerEvents:o.pointerEvents,zIndex:o.zIndex,visibility:o.visibility};return o.animation!==void 0&&(d.animation=o.animation),o.transition!==void 0&&(d.transition=o.transition),d},[o.transform,o.pointerEvents,o.zIndex,o.visibility,o.animation,o.transition]),b=E.jsx("div",{ref:l,"data-stack-content":n,"data-depth":e,"data-active":t?"true":"false",style:y,onAnimationEnd:v,children:s});return a==="none"?E.jsx(r.Activity,{mode:t?"visible":"hidden",children:b}):b});function ae(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]}}const q=r.createContext(null),ue=r.memo(()=>{const n=r.useContext(q);if(!n)throw new Error("StackOutlet must be used within useStackNavigation");const[,e]=r.useReducer(s=>s+1,0);r.useEffect(()=>n.subscribe(e),[n]);const{panels:t,navigationState:i,displayMode:a,transitionMode:c}=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 E.jsx(E.Fragment,{children:u.map(({panel:s,depth:l})=>E.jsx(V,{id:s.id,depth:l,isActive:l===i.depth,displayMode:a,transitionMode:c,navigationState:i,children:s.cache?n.getCachedContent(s.id):s.content},s.id))})});function le(n){const{panels:e,initialPanelId:t,displayMode:i,transitionMode:a="css",onPanelChange:c}=n,u=t??e[0]?.id;if(!u)throw new Error("useStackNavigation: No panels provided");const[s,l]=r.useReducer(ae,[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 S=s.length-1,A=s[S];A!==void 0&&c(A,S)}},[s,c]);const[g,o]=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]),b=s[v],d=v>0?s[v-1]:null,h=r.useCallback(p=>{e.find(A=>A.id===p)&&l({type:"push",id:p})},[e]),R=r.useCallback(p=>{l({type:"go",direction:p})},[]),k=r.useCallback(p=>{l({type:"move",targetDepth:p})},[]),x=r.useCallback(p=>{e.find(A=>A.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 S=f.current.length-1,A=p??S-1;A<0||A>=S||o({isRevealing:!0,revealDepth:A})},[]),$=r.useCallback(()=>{f.current.length-1!==0&&o({isRevealing:!0,revealDepth:0})},[]),O=r.useCallback(()=>{o({isRevealing:!1,revealDepth:null})},[]),N=r.useCallback(p=>{const S=f.current,A=S.indexOf(p),X=S.length-1,F=A===X;return{"data-stack-panel":p,"data-depth":A,"data-active":F?"true":"false","aria-hidden":!F}},[]),C=r.useCallback(()=>{const p=f.current,S=p.length-1,A=S>0,X=S>0?p[S-1]:null,F=X?e.find(J=>J.id===X):null,Y=F?.title?`Back to ${F.title}`:"Go back";return{onClick:()=>R(-1),disabled:!A,"aria-label":Y}},[e,R]),T=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]),D=r.useRef({panels:e,navigationState:y,displayMode:i,transitionMode:a});D.current={panels:e,navigationState:y,displayMode:i,transitionMode:a};const w=r.useRef(new Set);r.useEffect(()=>{w.current.forEach(p=>p())},[y,i,a]);const U=r.useCallback(p=>D.current.panels.find(A=>A.id===p)?.content??null,[]),I=r.useMemo(()=>e.map(p=>p.id),[e]),{getCachedContent:P}=z.useContentCache({resolveContent:U,validIds:I}),L=r.useMemo(()=>({getState:()=>D.current,subscribe:p=>(w.current.add(p),()=>w.current.delete(p)),getCachedContent:P}),[P]),H=r.useMemo(()=>{const p=()=>E.jsx(q.Provider,{value:L,children:E.jsx("div",{style:T,"data-stack-container":!0,children:E.jsx(ue,{})})});return p.displayName="StackOutlet",p},[L,T]);return{state:y,push:h,go:R,move:k,replace:x,revealParent:_,revealRoot:$,dismissReveal:O,getPanelProps:N,getBackButtonProps:C,canGo:M,currentPanelId:b,previousPanelId:d,Outlet:H}}function fe(n){const{containerRef:e,navigation:t,edge:i="left",edgeWidth:a=20,enabled:c=!0}=n,[u,s]=r.useState(null),l=r.useCallback(d=>{s(null),i==="left"&&d.direction===1&&t.canGo(-1)&&t.go(-1)},[i,t]),{isEdgeGesture:f,state:m,containerProps:g}=j.useEdgeSwipeInput({containerRef:e,edge:i,edgeWidth:a,enabled:c?t.canGo(-1):!1,onSwipeEnd:l});r.useEffect(()=>{f&&(m.phase==="swiping"||m.phase==="tracking")?s(m):m.phase==="idle"&&s(null)},[f,m]);const{containerProps:o}=j.useNativeGestureGuard({containerRef:e,active:f,preventEdgeBack:!0,preventOverscroll:!0,edgeWidth:a}),v=r.useMemo(()=>{if(!u||!e.current)return 0;const d=e.current.clientWidth;if(d===0)return 0;const h=u.displacement.x;if(i==="left"&&h<=0||i==="right"&&h>=0)return 0;const R=Math.abs(h);return Math.min(R/d,1)},[u,e,i]),y=r.useMemo(()=>j.mergeGestureContainerProps(g,o),[g,o]),b=f?m:j.IDLE_SWIPE_INPUT_STATE;return{isEdgeSwiping:f,progress:v,inputState:b,containerProps:y}}const pe=300,G=n=>n==="horizontal"?"translateX":"translateY",de=(n,e,t,i)=>n||e===void 0||e<=0||t===void 0||t===i?null:{from:t,to:i},me=(n,e,t,i,a,c,u)=>n===e?{type:"none"}:i?{type:"none"}:a?{type:"none"}:c?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},he=(n,e,t)=>n===void 0||n===e||n<=0?null:t;function ve(n){const{elementRef:e,targetPx:t,displacement:i,isOperating:a,axis:c="horizontal",animationDuration:u=pe,containerSize:s,animateOnTargetChange:l=!1,initialPx:f,skipTargetChangeAnimation:m=!1}=n,g=f??t,o=r.useRef(g),v=r.useRef(null),y=r.useRef(t),b=r.useRef(s),d=r.useRef(null),h=r.useRef(!1),R=de(h.current,s,f,t);R!==null&&(d.current=R,h.current=!0);const k=me(t,y.current,o.current,a,v.current!==null,l,m);k.type==="animate"?(d.current=k.animation,y.current=t):k.type==="snap"&&(o.current=k.position,y.current=t);const x=he(s,b.current,t);x!==null&&(o.current=x,b.current=s);const M=r.useCallback(({easedProgress:C})=>{const T=e.current,D=v.current;if(!T||!D)return;const w=j.interpolate(D.from,D.to,C);o.current=w,T.style.transform=`${G(c)}(${w}px)`},[c,e]),_=r.useCallback(()=>{v.current=null,o.current=t,y.current=t},[t]),{isAnimating:$,start:O,cancel:N}=j.useAnimationFrame({duration:u,easing:j.easings.easeOutExpo,onFrame:M,onComplete:_});return r.useLayoutEffect(()=>{if(a){N(),v.current=null,d.current=null;return}if(d.current){const D=d.current;v.current=D,d.current=null;const w=e.current;w&&(w.style.transform=`${G(c)}(${D.from}px)`),O();return}const C=o.current;Math.abs(C-t)>1?(v.current={from:C,to:t},O()):(o.current=t,y.current=t)},[a,t,O,N]),r.useLayoutEffect(()=>{const C=e.current;if(!C||$||v.current!==null||d.current!==null)return;const T=t+i;o.current=T,C.style.transform=`${G(c)}(${T}px)`},[t,i,c,$,e]),{isAnimating:$,currentPx:o.current,animationDirection:v.current}}function ge(n,e){const t=r.useRef(e),i=r.useRef(n),a=r.useRef(!1),u=t.current?!e:!1,s=n!==i.current,l=e?s:!1,g=(a.current?!0:l)?!0:u?s:!1,o=e?i.current:n;return r.useLayoutEffect(()=>{e?l&&(a.current=!0):(a.current=!1,i.current=n),t.current=e}),{value:o,changedDuringOperation:g,operationJustEnded:u}}const K=-.3;function ye(n){return Math.max(0,n)}function be(n,e,t=K){if(e<=0)return 0;const i=Math.max(0,n),a=Math.min(i/e,1),c=t*e,u=Math.abs(t)*a*e;return c+u}function Re(n){const{depth:e,navigationDepth:t,isActive:i,isOperating:a,isAnimating:c}=n;return!!(i||e===t-1&&(a||c))}function Ae(n,e){return n===e?"active":n===e-1?"behind":"hidden"}const Se=300,ke=.05,Ce=.1,Te={position:"absolute",inset:0,width:"100%",height:"100%"},De=(n,e)=>n.phase==="idle"?0:e==="horizontal"?n.displacement.x:n.displacement.y,Ie="-5px 0 15px rgba(0, 0, 0, 0.1)",W=r.memo(({id:n,depth:e,navigationDepth:t,isActive:i,operationState:a,containerSize:c,axis:u="horizontal",behindOffset:s=K,animationDuration:l=Se,animateOnMount:f=!1,showShadow:m=!0,displayMode:g="overlay",showDimming:o=!0,children:v})=>{const y=r.useRef(null),b=De(a,u),d=a.phase==="operating",h=Ae(e,t),{value:R,changedDuringOperation:k}=ge(h,b>0),x=r.useMemo(()=>{switch(R){case"active":return 0;case"behind":return s*c;case"hidden":return c}},[R,s,c]),M=r.useMemo(()=>{if(b<=0)return 0;switch(R){case"active":return ye(b);case"behind":{const I=be(b,c,s),P=s*c;return I-P}case"hidden":return 0}},[R,b,c,s]),_=r.useMemo(()=>{if(f&&h==="active"&&e>0)return c},[f,h,e,c]),{isAnimating:$}=ve({elementRef:y,targetPx:x,displacement:M,isOperating:d,axis:u,animationDuration:l,containerSize:c,animateOnTargetChange:!0,initialPx:_,skipTargetChangeAnimation:k}),O=Re({depth:e,navigationDepth:t,isActive:i,isOperating:d,isAnimating:$}),N=r.useMemo(()=>c<=0||b<=0?0:Math.min(b/c,1),[b,c]),C=r.useMemo(()=>{if(g!=="stack")return 1;const I=t-e;if(h==="active")return 1;if(h==="behind"){const P=1-I*ke;return P+N*(1-P)}return 1},[g,h,e,t,N]),T=r.useMemo(()=>!o||h!=="behind"?0:Ce*(1-N),[o,h,N]);r.useLayoutEffect(()=>{const I=y.current;I&&(I.style.visibility=O?"visible":"hidden")},[O]),r.useLayoutEffect(()=>{const I=y.current;if(!I||g!=="stack")return;const P=I.style.transform;if(P.includes("translateX")){const L=P.match(/translateX\([^)]+\)/);L&&(I.style.transform=`${L[0]} scale(${C})`)}else I.style.transform=`scale(${C})`},[C,g]);const D=m?e>0&&h==="active":!1,w=r.useMemo(()=>({...Te,pointerEvents:i?"auto":"none",willChange:"transform",zIndex:e,visibility:O?"visible":"hidden",boxShadow:D?Ie:void 0}),[i,e,O,D]),U=r.useMemo(()=>T<=0?null:{position:"absolute",inset:0,backgroundColor:`rgba(0, 0, 0, ${T})`,pointerEvents:"none",zIndex:1},[T]);return E.jsxs("div",{ref:y,"data-stack-content":n,"data-depth":e,"data-active":i?"true":"false","data-role":h,style:w,children:[v,U!=null?E.jsx("div",{style:U,"data-dimming-overlay":!0}):null]})}),Ee=300;function we(n,e,t){const{stack:i,depth:a}=e,c=[a];a>0&&c.push(a-1);const u=[];for(const s of c){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(l=>l.panel.id===t)){const l=n.find(f=>f.id===t);l&&u.push({panel:l,depth:a+1,isExiting:!0})}return u.sort((s,l)=>s.depth-l.depth)}const xe=r.memo(({panels:n,navigationState:e,operationState:t,containerSize:i,getCachedContent:a,behindOffset:c,animateOnMount:u=!1,animationDuration:s=Ee,showShadow:l,displayMode:f,showDimming:m})=>{const[g,o]=r.useState(null),v=r.useRef(e.depth),y=r.useRef(e.stack);r.useLayoutEffect(()=>{const h=v.current,R=y.current,{depth:k,stack:x}=e;if(v.current=k,y.current=x,k<h){const M=R[h];if(M!=null){o(M);const _=setTimeout(()=>{o(null)},s);return()=>clearTimeout(_)}}},[e.depth,e.stack,s]);const b=r.useMemo(()=>we(n,e,g),[n,e,g]),d=r.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]);return E.jsx("div",{style:d,"data-swipe-stack-container":!0,children:b.map(({panel:h,depth:R,isExiting:k})=>{const x=R===e.depth&&!k,M=a?.(h.id)??h.content;return E.jsx(W,{id:h.id,depth:R,navigationDepth:e.depth,isActive:x,operationState:t,containerSize:i,behindOffset:c,animateOnMount:u,animationDuration:s,showShadow:l,displayMode:f,showDimming:m,children:M},h.id)})})});exports.StackContent=V;exports.SwipeStackContent=W;exports.SwipeStackOutlet=xe;exports.useStackNavigation=le;exports.useStackSwipeInput=fe;
 //# sourceMappingURL=stack.cjs.map