react-panel-layout 0.5.1 → 0.6.0

package/dist/modules/stack/types.d.ts

@@ -0,0 +1,194 @@
+/**
+ * @file Type definitions for the Stack navigation component system.
+ *
+ * Stack manages hierarchical navigation where panels stack as you drill down.
+ * Similar to iOS/iPadOS navigation controllers.
+ */
+import type * as React from "react";
+import type { SwipeInputState } from "../../hooks/gesture/types.js";
+/**
+ * Display mode for stack panels.
+ * - "overlay": Panels fully overlap (mobile style)
+ * - "slide": Panels slide in from edge
+ * - "stack": Panels stack with visual depth (tablet style)
+ */
+export type StackDisplayMode = "overlay" | "slide" | "stack";
+/**
+ * Transition mode for stack animations.
+ * - "css": Uses CSS transitions/animations
+ * - "none": No transitions (uses React.Activity for memory optimization)
+ */
+export type StackTransitionMode = "css" | "none";
+/**
+ * A panel in the stack.
+ */
+export type StackPanel<TId extends string = string> = {
+    /** Unique identifier for this panel */
+    id: TId;
+    /** Human-readable title for the panel (used in headers, back buttons) */
+    title?: string;
+    /** The content to render */
+    content: React.ReactNode;
+    /**
+     * Enable content caching to preserve React component state.
+     * When disabled (default), content is re-created on each render.
+     * @default false
+     */
+    cache?: boolean;
+};
+/**
+ * State of the stack navigation.
+ */
+export type StackNavigationState<TId extends string = string> = {
+    /** Stack of panel IDs representing the navigation hierarchy */
+    stack: ReadonlyArray<TId>;
+    /** Current depth in the stack (0-indexed) */
+    depth: number;
+    /** Whether a parent panel is being revealed (peeking) */
+    isRevealing: boolean;
+    /** Depth of the revealed parent, if any */
+    revealDepth: number | null;
+};
+/**
+ * Props returned by getPanelProps for panel elements.
+ */
+export type StackPanelProps = {
+    "data-stack-panel": string;
+    "data-depth": number;
+    "data-active": "true" | "false";
+    "aria-hidden": boolean;
+};
+/**
+ * Props returned by getBackButtonProps for back navigation.
+ */
+export type StackBackButtonProps = {
+    onClick: () => void;
+    disabled: boolean;
+    "aria-label": string;
+};
+/**
+ * Options for useStackNavigation hook.
+ */
+export type UseStackNavigationOptions<TId extends string = string> = {
+    /** Array of available panels */
+    panels: ReadonlyArray<StackPanel<TId>>;
+    /** Initial panel ID to display. @default first panel */
+    initialPanelId?: TId;
+    /** Display mode for panels */
+    displayMode: StackDisplayMode;
+    /** Transition mode for animations. @default "css" */
+    transitionMode?: StackTransitionMode;
+    /** Callback when panel changes */
+    onPanelChange?: (id: TId, depth: number) => void;
+};
+/**
+ * Result from useStackNavigation hook.
+ */
+export type UseStackNavigationResult<TId extends string = string> = {
+    /** Current navigation state */
+    state: StackNavigationState<TId>;
+    /**
+     * Push a new panel onto the stack.
+     * @param id - Panel ID to push
+     */
+    push: (id: TId) => void;
+    /**
+     * Navigate in a direction relative to current depth.
+     * @param direction - Number of steps: -1=back, -2=back2, etc.
+     */
+    go: (direction: number) => void;
+    /**
+     * Move to an absolute depth in the stack.
+     * @param depth - Target depth (0-indexed)
+     */
+    move: (depth: number) => void;
+    /**
+     * Replace the current panel with a new one.
+     * @param id - Panel ID to replace with
+     */
+    replace: (id: TId) => void;
+    /**
+     * Temporarily reveal a parent panel.
+     * @param depth - Depth to reveal to (defaults to depth-1)
+     */
+    revealParent: (depth?: number) => void;
+    /**
+     * Reveal the root panel.
+     */
+    revealRoot: () => void;
+    /**
+     * Dismiss the parent reveal and return to current panel.
+     */
+    dismissReveal: () => void;
+    /**
+     * Get props for a panel element.
+     * @param id - Panel ID
+     */
+    getPanelProps: (id: TId) => StackPanelProps;
+    /**
+     * Get props for a back button.
+     */
+    getBackButtonProps: () => StackBackButtonProps;
+    /**
+     * Check if navigation in a direction is possible.
+     * @param direction - Direction to check
+     */
+    canGo: (direction: number) => boolean;
+    /** Current panel ID (top of stack) */
+    currentPanelId: TId;
+    /** Previous panel ID (one step back), or null if at root */
+    previousPanelId: TId | null;
+    /** Outlet component that renders the stack content */
+    Outlet: React.FC;
+};
+/**
+ * Options for useStackSwipeInput hook.
+ */
+export type UseStackSwipeInputOptions = {
+    /** Reference to the swipe container element */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Stack navigation result from useStackNavigation */
+    navigation: Pick<UseStackNavigationResult, "go" | "canGo" | "revealParent" | "dismissReveal" | "state">;
+    /** Edge to detect swipes from. @default "left" */
+    edge?: "left" | "right";
+    /** Width of the edge detection zone. @default 20 */
+    edgeWidth?: number;
+    /** Whether swipe input is enabled. @default true */
+    enabled?: boolean;
+};
+/**
+ * Result from useStackSwipeInput hook.
+ */
+export type UseStackSwipeInputResult = {
+    /** Whether currently swiping from edge */
+    isEdgeSwiping: boolean;
+    /** Swipe progress (0-1) for animation */
+    progress: number;
+    /** Full swipe input state for direct DOM manipulation */
+    inputState: SwipeInputState;
+    /** Props to spread on the container element */
+    containerProps: React.HTMLAttributes<HTMLElement> & {
+        style: React.CSSProperties;
+    };
+};
+/**
+ * Props for StackContent component.
+ */
+export type StackContentProps = {
+    /** Panel ID */
+    id: string;
+    /** Panel depth in the stack */
+    depth: number;
+    /** Whether this panel is currently active (top of stack) */
+    isActive: boolean;
+    /** Display mode */
+    displayMode: StackDisplayMode;
+    /** Transition mode */
+    transitionMode: StackTransitionMode;
+    /** Current navigation state */
+    navigationState: StackNavigationState;
+    /** Swipe progress for animation (0-1) */
+    swipeProgress?: number;
+    /** Content to render */
+    children: React.ReactNode;
+};

package/dist/modules/stack/useStackAnimationState.d.ts

@@ -0,0 +1,32 @@
+export type PanelAnimationPhase = "entering" | "active" | "exiting";
+export type AnimatedPanel = {
+    id: string;
+    depth: number;
+    phase: PanelAnimationPhase;
+};
+export type UseStackAnimationStateOptions = {
+    /** Current stack from navigation */
+    stack: ReadonlyArray<string>;
+    /** Called when an exiting panel's animation completes */
+    onExitComplete?: (id: string) => void;
+};
+export type UseStackAnimationStateResult = {
+    /** All panels to render (active + exiting) */
+    panels: ReadonlyArray<AnimatedPanel>;
+    /** Mark a panel's enter animation as complete */
+    markEnterComplete: (id: string) => void;
+    /** Mark a panel's exit animation as complete */
+    markExitComplete: (id: string) => void;
+};
+/**
+ * Computes animated panels from current and previous stack.
+ * Pure function for easy testing.
+ */
+export declare function computeAnimatedPanels(prevPanels: ReadonlyArray<AnimatedPanel>, prevStack: ReadonlyArray<string>, currentStack: ReadonlyArray<string>): ReadonlyArray<AnimatedPanel>;
+/**
+ * Hook for managing stack animation state.
+ *
+ * Uses a ref-based approach to compute panels synchronously during render,
+ * avoiding the flash that would occur with useEffect.
+ */
+export declare function useStackAnimationState(options: UseStackAnimationStateOptions): UseStackAnimationStateResult;

package/dist/modules/stack/useStackNavigation.d.ts

@@ -0,0 +1,23 @@
+import type { UseStackNavigationOptions, UseStackNavigationResult } from "./types.js";
+/**
+ * Headless hook for managing hierarchical stack navigation.
+ *
+ * @example
+ * ```tsx
+ * const { state, push, go, Outlet } = useStackNavigation({
+ *   panels: [
+ *     { id: 'list', title: 'Items', content: <ListPage /> },
+ *     { id: 'detail', title: 'Detail', content: <DetailPage /> },
+ *   ],
+ *   displayMode: 'overlay',
+ * });
+ *
+ * return (
+ *   <div>
+ *     <button onClick={() => push('detail')}>View Detail</button>
+ *     <Outlet />
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useStackNavigation<TId extends string = string>(options: UseStackNavigationOptions<TId>): UseStackNavigationResult<TId>;

package/dist/modules/stack/useStackSwipeInput.d.ts

@@ -0,0 +1,27 @@
+import type { UseStackSwipeInputOptions, UseStackSwipeInputResult } from "./types.js";
+/**
+ * Hook for binding edge swipe input to Stack navigation.
+ *
+ * Detects swipe gestures from the specified edge and triggers navigation:
+ * - Left edge swipe → go(-1) (go back)
+ * - Right edge swipe → reveals parent or custom action
+ *
+ * During a swipe, provides progress for animation.
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const navigation = useStackNavigation({ panels, displayMode: 'overlay' });
+ * const { isEdgeSwiping, progress, containerProps } = useStackSwipeInput({
+ *   containerRef,
+ *   navigation,
+ * });
+ *
+ * return (
+ *   <div ref={containerRef} {...containerProps}>
+ *     <navigation.Outlet />
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useStackSwipeInput(options: UseStackSwipeInputOptions): UseStackSwipeInputResult;

package/dist/panels/index.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @file Panels entry point - VSCode-like panel system
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/panels`.
+ *
+ * ## Overview
+ * Panels provides a VSCode-like panel system with tabbed groups, drag-and-drop
+ * tab reordering, split views, and keyboard navigation. Supports both controlled
+ * and uncontrolled state management.
+ *
+ * ## Installation
+ * ```ts
+ * import { PanelSystem, buildInitialState, usePanelSystem } from "react-panel-layout/panels";
+ * ```
+ *
+ * ## Basic Usage
+ * ```tsx
+ * const tabs = [
+ *   { id: 'file1', title: 'index.ts', render: () => <Editor file="index.ts" /> },
+ *   { id: 'file2', title: 'app.tsx', render: () => <Editor file="app.tsx" /> },
+ * ];
+ *
+ * function App() {
+ *   const initialState = buildInitialState(tabs);
+ *   let groupCounter = 1;
+ *
+ *   return (
+ *     <PanelSystem
+ *       initialState={initialState}
+ *       createGroupId={() => `g_${++groupCounter}`}
+ *       layoutMode="grid"
+ *       gridTracksInteractive={true}
+ *       dragThresholdPx={5}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Controlled State
+ * ```tsx
+ * const [state, setState] = useState(() => buildInitialState(tabs));
+ *
+ * <PanelSystem
+ *   initialState={state}
+ *   state={state}
+ *   onStateChange={setState}
+ *   // ...
+ * />
+ * ```
+ *
+ * ## Using Context
+ * ```tsx
+ * function TabActions() {
+ *   const { actions } = usePanelSystem();
+ *   return <button onClick={() => actions.splitFocused('vertical')}>Split</button>;
+ * }
+ * ```
+ */
+export { PanelSystem } from "../modules/panels/system/PanelSystem.js";
+export { PanelGroupView } from "../components/panels/PanelGroupView.js";
+export { DropSuggestOverlay } from "../components/panels/DropSuggestOverlay.js";
+export { PanelSystemProvider, usePanelSystem, } from "../modules/panels/state/PanelSystemContext.js";
+export { collectGroupsInOrder, splitLeaf, closeLeaf, isGroup, setSplitRatio, createEmptyGroup, addTabToGroup, removeTabFromGroup, moveTab, setActiveTab, reorderTabWithinGroup, addTabToGroupAtIndex, setFocusedGroup, focusGroupIndex, nextGroup, prevGroup, refreshGroupOrder, splitGroup, buildInitialState, } from "../modules/panels/index.js";
+export type { PanelId, GroupId, SplitDirection, TabDefinition, GroupModel, PanelTree, PanelSystemState, DropZone, DraggingTab, PanelCommands, PanelSystemProps, PanelSplitLimits, IdFactory, } from "../modules/panels/index.js";
+export type { PanelSystemContextValue, PanelSystemProviderProps, PanelStateAction, PanelStateActions, } from "../modules/panels/state/PanelSystemContext.js";
+export type { PanelGroupViewProps } from "../components/panels/PanelGroupView.js";

package/dist/panels.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PanelSystem-Bs8bQwQF.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.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/panels.js

@@ -0,0 +1,28 @@
+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-Dr1TBhxM.js";
+export {
+  e as DropSuggestOverlay,
+  r as PanelGroupView,
+  o as PanelSystem,
+  t as PanelSystemProvider,
+  p as addTabToGroup,
+  u as addTabToGroupAtIndex,
+  i as buildInitialState,
+  l as closeLeaf,
+  G as collectGroupsInOrder,
+  d as createEmptyGroup,
+  n as focusGroupIndex,
+  m as isGroup,
+  b as moveTab,
+  c as nextGroup,
+  T as prevGroup,
+  v as refreshGroupOrder,
+  f as removeTabFromGroup,
+  P as reorderTabWithinGroup,
+  S as setActiveTab,
+  y as setFocusedGroup,
+  x as setSplitRatio,
+  I as splitGroup,
+  g as splitLeaf,
+  h as usePanelSystem
+};
+//# sourceMappingURL=panels.js.map

package/dist/panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/pivot/index.d.ts

@@ -4,5 +4,8 @@
  * Import via: import { usePivot } from "react-panel-layout/pivot";
  */
 export { usePivot } from "../modules/pivot";
+export { SwipePivotTabBar } from "../modules/pivot";
+export { scaleInputState } from "../modules/pivot";
 export type { PivotItem, UsePivotOptions, UsePivotResult, PivotItemProps } from "../modules/pivot";
+export type { SwipePivotTabBarProps, IndicatorRenderProps } from "../modules/pivot";
 export type { PivotBehavior, PivotBehaviorItem } from "../types";

package/dist/pivot.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./usePivot-BS-DGfwd.cjs");exports.usePivot=e.usePivot;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./SwipePivotTabBar-BrQismcZ.cjs"),s=(e,c,l)=>{if(c<=0||l<=0||e.phase==="idle")return e;const o=l/c;return{...e,displacement:{x:e.displacement.x*o,y:e.displacement.y*o},velocity:{x:e.velocity.x*o,y:e.velocity.y*o}}};exports.SwipePivotTabBar=r.SwipePivotTabBar;exports.usePivot=r.usePivot;exports.scaleInputState=s;
 //# sourceMappingURL=pivot.cjs.map

package/dist/pivot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pivot.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"pivot.cjs","sources":["../src/modules/pivot/scaleInputState.ts"],"sourcesContent":["/**\n * @file Utility for scaling SwipeInputState between containers of different sizes.\n *\n * This enables synchronized swipe behavior between containers with different widths,\n * such as a narrow tab bar and a wide content area moving together proportionally.\n */\nimport type { SwipeInputState } from \"../../hooks/gesture/types.js\";\n\n/**\n * Scale SwipeInputState displacement and velocity proportionally for different container sizes.\n *\n * When swiping in a container of one size, this function transforms the input state\n * to appear as if the swipe occurred in a container of a different size.\n * This allows tabs and content to move in sync despite different widths.\n *\n * @param inputState - The original swipe input state\n * @param sourceWidth - Width of the source container (where the swipe originated)\n * @param targetWidth - Width of the target container (where the scaled state will be applied)\n * @returns Scaled SwipeInputState with proportionally adjusted displacement and velocity\n *\n * @example\n * ```tsx\n * // Content area is 400px wide, each tab is 80px wide (5 tabs)\n * const contentWidth = 400;\n * const tabWidth = 80;\n *\n * // Swipe happens on content area\n * const { inputState } = usePivotSwipeInput({ containerRef, pivot, axis: \"horizontal\" });\n *\n * // Scale for tabs: 100px content swipe → 20px tab movement\n * const tabInputState = scaleInputState(inputState, contentWidth, tabWidth);\n *\n * // Apply to tabs and content respectively\n * <SwipePivotContent inputState={tabInputState} containerSize={tabWidth} />\n * <SwipePivotContent inputState={inputState} containerSize={contentWidth} />\n * ```\n */\nexport const scaleInputState = (\n  inputState: SwipeInputState,\n  sourceWidth: number,\n  targetWidth: number,\n): SwipeInputState => {\n  // Guard against invalid dimensions\n  if (sourceWidth <= 0 || targetWidth <= 0) {\n    return inputState;\n  }\n\n  // Idle state needs no scaling\n  if (inputState.phase === \"idle\") {\n    return inputState;\n  }\n\n  const scale = targetWidth / sourceWidth;\n\n  return {\n    ...inputState,\n    displacement: {\n      x: inputState.displacement.x * scale,\n      y: inputState.displacement.y * scale,\n    },\n    velocity: {\n      x: inputState.velocity.x * scale,\n      y: inputState.velocity.y * scale,\n    },\n  };\n};\n"],"names":["scaleInputState","inputState","sourceWidth","targetWidth","scale"],"mappings":"mIAqCaA,EAAkB,CAC7BC,EACAC,EACAC,IACoB,CAOpB,GALID,GAAe,GAAKC,GAAe,GAKnCF,EAAW,QAAU,OACvB,OAAOA,EAGT,MAAMG,EAAQD,EAAcD,EAE5B,MAAO,CACL,GAAGD,EACH,aAAc,CACZ,EAAGA,EAAW,aAAa,EAAIG,EAC/B,EAAGH,EAAW,aAAa,EAAIG,CAAA,EAEjC,SAAU,CACR,EAAGH,EAAW,SAAS,EAAIG,EAC3B,EAAGH,EAAW,SAAS,EAAIG,CAAA,CAC7B,CAEJ"}

package/dist/pivot.js

@@ -1,5 +1,23 @@
-import { u as r } from "./usePivot-BvOGxLQQ.js";
+import { S as x, u as v } from "./SwipePivotTabBar-BGO9X94m.js";
+const o = (e, c, l) => {
+  if (c <= 0 || l <= 0 || e.phase === "idle")
+    return e;
+  const s = l / c;
+  return {
+    ...e,
+    displacement: {
+      x: e.displacement.x * s,
+      y: e.displacement.y * s
+    },
+    velocity: {
+      x: e.velocity.x * s,
+      y: e.velocity.y * s
+    }
+  };
+};
 export {
-  r as usePivot
+  x as SwipePivotTabBar,
+  o as scaleInputState,
+  v as usePivot
 };
 //# sourceMappingURL=pivot.js.map

package/dist/pivot.js.map

@@ -1 +1 @@
-{"version":3,"file":"pivot.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"pivot.js","sources":["../src/modules/pivot/scaleInputState.ts"],"sourcesContent":["/**\n * @file Utility for scaling SwipeInputState between containers of different sizes.\n *\n * This enables synchronized swipe behavior between containers with different widths,\n * such as a narrow tab bar and a wide content area moving together proportionally.\n */\nimport type { SwipeInputState } from \"../../hooks/gesture/types.js\";\n\n/**\n * Scale SwipeInputState displacement and velocity proportionally for different container sizes.\n *\n * When swiping in a container of one size, this function transforms the input state\n * to appear as if the swipe occurred in a container of a different size.\n * This allows tabs and content to move in sync despite different widths.\n *\n * @param inputState - The original swipe input state\n * @param sourceWidth - Width of the source container (where the swipe originated)\n * @param targetWidth - Width of the target container (where the scaled state will be applied)\n * @returns Scaled SwipeInputState with proportionally adjusted displacement and velocity\n *\n * @example\n * ```tsx\n * // Content area is 400px wide, each tab is 80px wide (5 tabs)\n * const contentWidth = 400;\n * const tabWidth = 80;\n *\n * // Swipe happens on content area\n * const { inputState } = usePivotSwipeInput({ containerRef, pivot, axis: \"horizontal\" });\n *\n * // Scale for tabs: 100px content swipe → 20px tab movement\n * const tabInputState = scaleInputState(inputState, contentWidth, tabWidth);\n *\n * // Apply to tabs and content respectively\n * <SwipePivotContent inputState={tabInputState} containerSize={tabWidth} />\n * <SwipePivotContent inputState={inputState} containerSize={contentWidth} />\n * ```\n */\nexport const scaleInputState = (\n  inputState: SwipeInputState,\n  sourceWidth: number,\n  targetWidth: number,\n): SwipeInputState => {\n  // Guard against invalid dimensions\n  if (sourceWidth <= 0 || targetWidth <= 0) {\n    return inputState;\n  }\n\n  // Idle state needs no scaling\n  if (inputState.phase === \"idle\") {\n    return inputState;\n  }\n\n  const scale = targetWidth / sourceWidth;\n\n  return {\n    ...inputState,\n    displacement: {\n      x: inputState.displacement.x * scale,\n      y: inputState.displacement.y * scale,\n    },\n    velocity: {\n      x: inputState.velocity.x * scale,\n      y: inputState.velocity.y * scale,\n    },\n  };\n};\n"],"names":["scaleInputState","inputState","sourceWidth","targetWidth","scale"],"mappings":";AAqCO,MAAMA,IAAkB,CAC7BC,GACAC,GACAC,MACoB;AAOpB,MALID,KAAe,KAAKC,KAAe,KAKnCF,EAAW,UAAU;AACvB,WAAOA;AAGT,QAAMG,IAAQD,IAAcD;AAE5B,SAAO;AAAA,IACL,GAAGD;AAAA,IACH,cAAc;AAAA,MACZ,GAAGA,EAAW,aAAa,IAAIG;AAAA,MAC/B,GAAGH,EAAW,aAAa,IAAIG;AAAA,IAAA;AAAA,IAEjC,UAAU;AAAA,MACR,GAAGH,EAAW,SAAS,IAAIG;AAAA,MAC3B,GAAGH,EAAW,SAAS,IAAIG;AAAA,IAAA;AAAA,EAC7B;AAEJ;"}

package/dist/resizer/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file Resizer entry point - Resize handle components and hooks
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/resizer`.
+ *
+ * ## Overview
+ * Resizer provides draggable resize handles for creating resizable layouts.
+ * Includes both ready-to-use components and a low-level hook for custom implementations.
+ *
+ * ## Installation
+ * ```ts
+ * import { ResizeHandle, useResizeDrag } from "react-panel-layout/resizer";
+ * ```
+ *
+ * ## Basic Usage with ResizeHandle
+ * ```tsx
+ * function ResizableLayout() {
+ *   const [width, setWidth] = useState(300);
+ *
+ *   return (
+ *     <div style={{ display: 'flex' }}>
+ *       <div style={{ width }}>Left Panel</div>
+ *       <ResizeHandle
+ *         direction="vertical"
+ *         onResize={(delta) => setWidth((w) => w + delta)}
+ *       />
+ *       <div style={{ flex: 1 }}>Right Panel</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## Custom Handle with useResizeDrag
+ * ```tsx
+ * function CustomHandle({ onResize }) {
+ *   const { ref, isDragging, onPointerDown } = useResizeDrag({
+ *     axis: 'x',
+ *     onResize,
+ *   });
+ *
+ *   return (
+ *     <div
+ *       ref={ref}
+ *       onPointerDown={onPointerDown}
+ *       style={{ cursor: 'col-resize', background: isDragging ? 'blue' : 'gray' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export { useResizeDrag } from "../modules/resizer/useResizeDrag.js";
+export { ResizeHandle } from "../components/resizer/ResizeHandle.js";
+export { HorizontalDivider } from "../components/resizer/HorizontalDivider.js";
+export type { ResizeDragAxis, UseResizeDragOptions, UseResizeDragResult, } from "../modules/resizer/useResizeDrag.js";
+export type { ResizeHandleProps } from "../components/resizer/ResizeHandle.js";
+export type { HorizontalDividerProps } from "../components/resizer/HorizontalDivider.js";

package/dist/resizer.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ResizeHandle-CScipO5l.cjs"),i=require("./HorizontalDivider-B5Z-KZLk.cjs");exports.ResizeHandle=e.ResizeHandle;exports.useResizeDrag=e.useResizeDrag;exports.HorizontalDivider=i.HorizontalDivider;
+//# sourceMappingURL=resizer.cjs.map

package/dist/resizer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/resizer.js

@@ -0,0 +1,8 @@
+import { R as a, u as o } from "./ResizeHandle-CdA_JYfN.js";
+import { H as i } from "./HorizontalDivider-WF1k_qND.js";
+export {
+  i as HorizontalDivider,
+  a as ResizeHandle,
+  o as useResizeDrag
+};
+//# sourceMappingURL=resizer.js.map

package/dist/resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/stack/index.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @file Stack entry point - Hierarchical navigation with swipe support
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/stack`.
+ *
+ * ## Overview
+ * Stack provides iOS/iPadOS-style hierarchical navigation where panels stack
+ * as users drill down into content. Supports swipe-to-go-back gestures.
+ *
+ * ## Installation
+ * ```ts
+ * import { useStackNavigation, SwipeStackOutlet } from "react-panel-layout/stack";
+ * ```
+ *
+ * ## Basic Usage
+ * ```tsx
+ * const panels = [
+ *   { id: 'list', title: 'Items', content: <ListPage /> },
+ *   { id: 'detail', title: 'Detail', content: <DetailPage /> },
+ * ];
+ *
+ * function App() {
+ *   const { push, go, Outlet } = useStackNavigation({
+ *     panels,
+ *     displayMode: 'overlay',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => push('detail')}>View Detail</button>
+ *       <button onClick={() => go(-1)}>Back</button>
+ *       <Outlet />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ## With Swipe Gestures (SwipeStackContent)
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const navigation = useStackNavigation({ panels, displayMode: 'overlay' });
+ * const swipeInput = useStackSwipeInput({ containerRef, navigation });
+ * const { rect } = useResizeObserver(containerRef);
+ *
+ * return (
+ *   <div ref={containerRef} {...swipeInput.containerProps}>
+ *     {panels.map((panel, index) => (
+ *       <SwipeStackContent
+ *         key={panel.id}
+ *         id={panel.id}
+ *         depth={index}
+ *         navigationDepth={navigation.state.depth}
+ *         isActive={navigation.currentPanelId === panel.id}
+ *         inputState={swipeInput.inputState}
+ *         containerSize={rect?.width ?? 0}
+ *       >
+ *         {panel.content}
+ *       </SwipeStackContent>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+export { useStackNavigation } from "../modules/stack/useStackNavigation.js";
+export { useStackSwipeInput } from "../modules/stack/useStackSwipeInput.js";
+export { StackContent } from "../modules/stack/StackContent.js";
+export { SwipeStackContent } from "../modules/stack/SwipeStackContent.js";
+export { SwipeStackOutlet } from "../modules/stack/SwipeStackOutlet.js";
+export type { StackDisplayMode, StackTransitionMode, StackPanel, StackNavigationState, StackPanelProps, StackBackButtonProps, UseStackNavigationOptions, UseStackNavigationResult, UseStackSwipeInputOptions, UseStackSwipeInputResult, StackContentProps, } from "../modules/stack/types.js";
+export type { SwipeStackContentProps } from "../modules/stack/SwipeStackContent.js";
+export type { SwipeStackOutletProps } from "../modules/stack/SwipeStackOutlet.js";

package/dist/stack.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),ee=require("react"),B=require("./styles-qf6ptVLD.cjs"),te=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),ne=require("./useContentCache-DqXtLrLs.cjs"),re=require("./useDocumentPointerEvents-ChqrKXDk.cjs"),U=require("./useEffectEvent-huSsGUnl.cjs");function se(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const n=se(ee);function oe(r){const{wasActive:e,isActive:t,transitionMode:s}=r;return s!=="css"||e===t?null:t?"push":"pop"}function ce(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 ie(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(${.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)*.05;return`translateX(${f}%) scale(${p})`}}return"translateX(100%)"}function ae(r,e,t){return e===void 0||e<=0||!t?r:`translateX(${e*100}%)`}function ue(r){if(r==="css")return`transform ${B.STACK_TRANSITION_DURATION} ${B.STACK_TRANSITION_EASING}`}function le(r){const{depth:e,isActive:t,wasActive:s,currentAnimationType:a,displayMode:c,transitionMode:u,navigationState:i,swipeProgress:f}=r,o=oe({wasActive:s,isActive:t,transitionMode:u})??a,d=o==="pop",h=ce({displayMode:c,depth:e,navigationDepth:i.depth,isActive:t,isAnimatingOut:d,isRevealing:i.isRevealing,revealDepth:i.revealDepth}),g=ie({depth:e,activeDepth:i.depth,displayMode:c,isRevealing:i.isRevealing,revealDepth:i.revealDepth}),S=ae(g,f,t),v=(()=>{if(u==="css"){if(o==="push")return B.STACK_ANIMATION_PUSH;if(o==="pop")return B.STACK_ANIMATION_POP}})(),m=ue(u);return{nextAnimationType:o,visibility:h,transform:S,animation:v,transition:m,zIndex:e,pointerEvents:t?"auto":"none"}}const fe={position:"absolute",inset:0,width:"100%",height:"100%"},z=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),h=le({depth:e,isActive:t,wasActive:p.current,currentAnimationType:o,displayMode:s,transitionMode:a,navigationState:c,swipeProgress:u});te.useIsomorphicLayoutEffect(()=>{const m=p.current;p.current=t,m!==t&&d(h.nextAnimationType)},[t,h.nextAnimationType]);const g=n.useCallback(m=>{m.target===m.currentTarget&&d(null)},[]),S=n.useMemo(()=>{const m={...fe,transform:h.transform,pointerEvents:h.pointerEvents,zIndex:h.zIndex,visibility:h.visibility};return h.animation!==void 0&&(m.animation=h.animation),h.transition!==void 0&&(m.transition=h.transition),m},[h.transform,h.pointerEvents,h.zIndex,h.visibility,h.animation,h.transition]),v=L.jsx("div",{ref:f,"data-stack-content":r,"data-depth":e,"data-active":t?"true":"false",style:S,onAnimationEnd:g,children:i});return a==="none"?L.jsx(n.Activity,{mode:t?"visible":"hidden",children:v}):v}),V=n.createContext(null),de=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 L.jsx(L.Fragment,{children:u.map(({panel:i,depth:f})=>L.jsx(z,{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 pe(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]),h=u[o],g=o>0?u[o-1]:null,S=n.useCallback(l=>{e.find(R=>R.id===l)&&(i(R=>[...R,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 R=u[y];c?.(R,y)},[o,u,c]),m=n.useCallback(l=>{if(l<0||l>=u.length)return;i(R=>R.slice(0,l+1));const y=u[l];c?.(y,l)},[u,c]),w=n.useCallback(l=>{e.find(R=>R.id===l)&&(i(R=>[...R.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]),A=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),R=y===o;return{"data-stack-panel":l,"data-depth":y,"data-active":R?"true":"false","aria-hidden":!R}},[u,o]),M=n.useCallback(()=>{const l=o>0,y=g?e.find(F=>F.id===g):null,R=y?.title?`Back to ${y.title}`:"Go back";return{onClick:()=>v(-1),disabled:!l,"aria-label":R}},[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 O=n.useRef(new Set);n.useEffect(()=>{O.current.forEach(l=>l())},[d,s,a]);const _=n.useCallback(l=>C.current.panels.find(R=>R.id===l)?.content??null,[]),N=n.useMemo(()=>e.map(l=>l.id),[e]),{getCachedContent:b}=ne.useContentCache({resolveContent:_,validIds:N}),x=n.useMemo(()=>({getState:()=>C.current,subscribe:l=>(O.current.add(l),()=>O.current.delete(l)),getCachedContent:b}),[b]),T=n.useMemo(()=>{const l=()=>L.jsx(V.Provider,{value:x,children:L.jsx("div",{style:I,"data-stack-container":!0,children:L.jsx(de,{})})});return l.displayName="StackOutlet",l},[x,I]);return{state:d,push:S,go:v,move:m,replace:w,revealParent:k,revealRoot:A,dismissReveal:P,getPanelProps:D,getBackButtonProps:M,canGo:E,currentPanelId:h,previousPanelId:g,Outlet:T}}const j={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(j),c=n.useCallback(()=>{a(j)},[]),u=U.useEffectEvent(d=>{if(!e||t&&!d.isPrimary||d.pointerType==="mouse"&&d.button!==0)return;const h=G(d.clientX,d.clientY);a({isDown:!0,start:h,current:h,pointerId:d.pointerId,wasCanceled:!1})}),i=U.useEffectEvent(d=>{if(s.pointerId!==d.pointerId)return;const h=G(d.clientX,d.clientY);a(g=>({...g,current:h}))}),f=U.useEffectEvent(()=>{a(j)}),p=U.useEffectEvent(()=>{a({...j,wasCanceled:!0})}),o=s.isDown?e:!1;return re.useDocumentPointerEvents(o,{onMove:i,onUp:f,onCancel:p}),n.useEffect(()=>{!e&&s.isDown&&c()},[e,s.isDown,c]),{state:s,onPointerDown:u,reset:c}}const me=10,ve=(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 ge(r){const{tracking:e,lockThreshold:t=me}=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=ve(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,Ee=(...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:.5,lockThreshold:10},K=20,$={phase:"idle",displacement:{x:0,y:0},velocity:{x:0,y:0},direction:0},be=150,q=(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 ye(r){const{containerRef:e,axis:t,enabled:s=!0,thresholds:a,onSwipeEnd:c,enableWheel:u=!0,pointerStartFilter:i}=r,f={...Y,...a},p=U.useEffectEvent(c),{state:o,onPointerDown:d}=he({enabled:s}),h=n.useCallback(b=>{if(s){if(i){const x=e.current;if(!x||!i(b,x))return}d(b)}},[s,i,e,d]),{lockedAxis:g,isLocked:S}=ge({tracking:o,lockThreshold:f.lockThreshold}),v=n.useRef(null),m=n.useRef(!1);n.useEffect(()=>{m.current=S?g===t:!1},[S,g,t]),n.useEffect(()=>{const b=e.current;if(!b||!s)return;const x=y=>{y.preventDefault()},T=y=>{m.current&&y.preventDefault(),document.addEventListener("touchmove",x,{passive:!1})},l=()=>{document.removeEventListener("touchmove",x)};return document.addEventListener("touchend",l),document.addEventListener("touchcancel",l),b.addEventListener("touchstart",T,{passive:!1}),()=>{b.removeEventListener("touchstart",T),document.removeEventListener("touchend",l),document.removeEventListener("touchcancel",l)}},[e,s]);const[w,E]=n.useState($),k=n.useRef({x:0,y:0}),A=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($)},[]),I=n.useCallback(()=>{const b={...k.current};q(b,{x:0,y:0},t,f,p),M()},[t,f,p,M]),C=U.useEffectEvent(b=>{if(!s||!u||o.isDown)return;const{deltaX:x,deltaY:T}=b;if(!P.current){const R=Math.abs(x),F=Math.abs(T);(R>=f.lockThreshold||F>=f.lockThreshold)&&(P.current=!0,D.current=R>F?"horizontal":"vertical")}if(P.current&&D.current!==t)return;k.current.x-=x,k.current.y-=T;const l=k.current,y=t==="horizontal"?l.x:l.y;E({phase:"swiping",displacement:{...l},velocity:{x:0,y:0},direction:W(y)}),A.current!==null&&clearTimeout(A.current),A.current=setTimeout(I,be)});n.useEffect(()=>{const b=e.current;if(!b||!s||!u)return;const x=T=>{T.preventDefault(),C(T)};return b.addEventListener("wheel",x,{passive:!1}),()=>{b.removeEventListener("wheel",x),A.current!==null&&clearTimeout(A.current)}},[e,s,u,C]),n.useEffect(()=>()=>{A.current!==null&&clearTimeout(A.current)},[]);const O=n.useMemo(()=>{if(!o.isDown||!o.start||!o.current)return $;const b=o.current.x-o.start.x,x=o.current.y-o.start.y,T={x:b,y:x},l={x:H(b,o.start.timestamp,o.current.timestamp),y:H(x,o.start.timestamp,o.current.timestamp)};return!S||g!==t?{phase:"tracking",displacement:T,velocity:l,direction:0}:{phase:"swiping",displacement:T,velocity:l,direction:W(t==="horizontal"?b:x)}},[o.isDown,o.start,o.current,S,g,t]);n.useEffect(()=>{O.phase!=="idle"&&(v.current=O)},[O]),n.useEffect(()=>{if(o.isDown)return;const b=v.current;!b||b.phase!=="swiping"&&b.phase!=="tracking"||(v.current=null,!o.wasCanceled&&q(b.displacement,b.velocity,t,f,p))},[o.isDown,o.wasCanceled,t,f,p]);const _=O.phase!=="idle"?O:w,N=n.useMemo(()=>({onPointerDown:h,style:{touchAction:t==="horizontal"?"pan-y pinch-zoom":"pan-x pinch-zoom",userSelect:"none",WebkitUserSelect:"none"}}),[t,h]);return{state:_,containerProps:N}}const Se=r=>r==="left"||r==="right"?"horizontal":"vertical",we=(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 Te(r){const{containerRef:e,edge:t,edgeWidth:s=K,enabled:a=!0,thresholds:c,onSwipeEnd:u}=r,i={...Y,...c},f=Se(t),[p,o]=n.useState(!1),d=n.useCallback((v,m)=>{const w=we(v.clientX,v.clientY,m,t,s);return o(w),w},[t,s]),{state:h,containerProps:g}=ye({containerRef:e,axis:f,enabled:a,thresholds:i,onSwipeEnd:u,enableWheel:!1,pointerStartFilter:d});return n.useEffect(()=>{h.phase==="idle"&&o(!1)},[h.phase]),{isEdgeGesture:p,state:p?h:$,containerProps:g}}const ke=(r,e,t)=>{const s=e.getBoundingClientRect();return r>=s.left&&r<=s.left+t};function xe(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"&&ke(o.clientX,d,c)&&(i(),o.preventDefault())},[s,e,c,i]);return{containerProps:n.useMemo(()=>({onPointerDown:s?f:void 0,style:{overscrollBehavior:a?"contain":void 0,WebkitOverflowScrolling:"touch"}}),[a,s,f])}}function Re(r){const{containerRef:e,navigation:t,edge:s="left",edgeWidth:a=20,enabled:c=!0}=r,[u,i]=n.useState(null),f=n.useCallback(m=>{i(null),s==="left"&&m.direction===1&&t.canGo(-1)&&t.go(-1)},[s,t]),{isEdgeGesture:p,state:o,containerProps:d}=Te({containerRef:e,edge:s,edgeWidth:a,enabled:c&&t.canGo(-1),onSwipeEnd:f});n.useEffect(()=>{p&&(o.phase==="swiping"||o.phase==="tracking")?i(o):o.phase==="idle"&&i(null)},[p,o]);const{containerProps:h}=xe({containerRef:e,active:p,preventEdgeBack:!0,preventOverscroll:!0,edgeWidth:a}),g=n.useMemo(()=>{if(!u||!e.current)return 0;const m=e.current.clientWidth;if(m===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/m,1)},[u,e,s]),S=n.useMemo(()=>Ee(d,h),[d,h]);return{isEdgeSwiping:p,progress:g,inputState:p?o:$,containerProps:S}}const Z={easeOutExpo:r=>r===1?1:1-Math.pow(2,-10*r)},Ae=300;function De(r){const{duration:e=Ae,easing:t=Z.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)},[]),h=n.useCallback(()=>{d(),u(!0),f.current=null;const g=S=>{f.current===null&&(f.current=S);const v=S-f.current,m=Math.min(v/e,1),w=t(m),E=m>=1,k={progress:m,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:h,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),h=n.useRef(null),g=n.useRef(t),S=n.useRef(i),v=n.useRef(null),m=n.useRef(!0);m.current&&p!==void 0&&p!==t?(v.current={from:p,to:t},m.current=!1):m.current&&(m.current=!1),t!==g.current&&!a&&h.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!==S.current&&i>0&&(d.current=t,S.current=i);const w=n.useCallback(({easedProgress:D})=>{const M=e.current,I=h.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(()=>{h.current=null,d.current=t,g.current=t},[t]),{isAnimating:k,start:A,cancel:P}=De({duration:u,easing:Z.easeOutExpo,onFrame:w,onComplete:E});return n.useLayoutEffect(()=>{if(a){P(),h.current=null,v.current=null;return}if(v.current){const I=v.current;h.current=I,v.current=null;const C=e.current;C&&(C.style.transform=`${X(c)}(${I.from}px)`),A();return}const D=d.current;Math.abs(D-t)>1?(h.current={from:D,to:t},A()):(d.current=t,g.current=t)},[a,t,A,P]),n.useLayoutEffect(()=>{const D=e.current;if(!D||k||h.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:h.current}}const J=-.3;function Me(r){return Math.max(0,r)}function Oe(r,e,t=J){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 Le(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=.05,Ue=.1,$e={position:"absolute",inset:0,width:"100%",height:"100%"},je=(r,e)=>r.phase==="idle"?0:e==="horizontal"?r.displacement.x:r.displacement.y,Be="-5px 0 15px rgba(0, 0, 0, 0.1)",Q=n.memo(({id:r,depth:e,navigationDepth:t,isActive:s,inputState:a,containerSize:c,axis:u="horizontal",behindOffset:i=J,animationDuration:f=Ne,animateOnMount:p=!1,showShadow:o=!0,displayMode:d="overlay",showDimming:h=!0,children:g})=>{const S=n.useRef(null),v=n.useRef(!0),m=je(a,u),w=a.phase==="swiping"||a.phase==="tracking",E=_e(e,t),k=v.current;v.current&&(v.current=!1);const A=n.useMemo(()=>{switch(E){case"active":return 0;case"behind":return i*c;case"hidden":return c}},[E,i,c]),P=n.useMemo(()=>{if(m<=0)return 0;switch(E){case"active":return Me(m);case"behind":{const T=Oe(m,c,i),l=i*c;return T-l}case"hidden":return 0}},[E,m,c,i]),D=n.useMemo(()=>{if(!(!k||!p)&&E==="active"&&e>0)return c},[k,p,E,e,c]),{isAnimating:M}=Ie({elementRef:S,targetPx:A,displacement:P,isSwiping:w,axis:u,animationDuration:f,containerSize:c,animateOnTargetChange:!0,initialPx:D}),I=Le({depth:e,navigationDepth:t,isActive:s,isSwiping:w,isAnimating:M}),C=n.useMemo(()=>c<=0||m<=0?0:Math.min(m/c,1),[m,c]),O=n.useMemo(()=>{if(d!=="stack")return 1;const T=t-e;if(E==="active")return 1;if(E==="behind"){const l=1-T*Fe;return l+C*(1-l)}return 1},[d,E,e,t,C]),_=n.useMemo(()=>!h||E!=="behind"?0:Ue*(1-C),[h,E,C]);n.useLayoutEffect(()=>{const T=S.current;T&&(T.style.visibility=I?"visible":"hidden")},[I]),n.useLayoutEffect(()=>{const T=S.current;if(!T||d!=="stack")return;const l=T.style.transform;if(l.includes("translateX")){const y=l.match(/translateX\([^)]+\)/);y&&(T.style.transform=`${y[0]} scale(${O})`)}else T.style.transform=`scale(${O})`},[O,d]);const N=o&&e>0&&E==="active",b=n.useMemo(()=>({...$e,pointerEvents:s?"auto":"none",willChange:"transform",zIndex:e,visibility:I?"visible":"hidden",boxShadow:N?Be:void 0}),[s,e,I,N]),x=n.useMemo(()=>_<=0?null:{position:"absolute",inset:0,backgroundColor:`rgba(0, 0, 0, ${_})`,pointerEvents:"none",zIndex:1},[_]);return L.jsxs("div",{ref:S,"data-stack-content":r,"data-depth":e,"data-active":s?"true":"false","data-role":E,style:b,children:[g,x!=null&&L.jsx("div",{style:x,"data-dimming-overlay":!0})]})}),Xe=300;function We(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 Ge=n.memo(({panels:r,navigationState:e,inputState:t,containerSize:s,getCachedContent:a,behindOffset:c,animateOnMount:u=!1,animationDuration:i=Xe,showShadow:f,displayMode:p,showDimming:o})=>{const[d,h]=n.useState(null),g=n.useRef(e.depth),S=n.useRef(e.stack);n.useLayoutEffect(()=>{const w=g.current,E=S.current,{depth:k,stack:A}=e;if(g.current=k,S.current=A,k<w){const P=E[w];if(P!=null){h(P);const D=setTimeout(()=>{h(null)},i);return()=>clearTimeout(D)}}},[e.depth,e.stack,i]);const v=n.useMemo(()=>We(r,e,d),[r,e,d]),m=n.useMemo(()=>({position:"relative",width:"100%",height:"100%",overflow:"hidden"}),[]);return L.jsx("div",{style:m,"data-swipe-stack-container":!0,children:v.map(({panel:w,depth:E,isExiting:k})=>{const A=E===e.depth&&!k,P=a?.(w.id)??w.content;return L.jsx(Q,{id:w.id,depth:E,navigationDepth:e.depth,isActive:A,inputState:t,containerSize:s,behindOffset:c,animateOnMount:u,animationDuration:i,showShadow:f,displayMode:p,showDimming:o,children:P},w.id)})})});exports.StackContent=z;exports.SwipeStackContent=Q;exports.SwipeStackOutlet=Ge;exports.useStackNavigation=pe;exports.useStackSwipeInput=Re;
+//# sourceMappingURL=stack.cjs.map