react-panel-layout 0.7.0 → 0.7.1

package/dist/useAnimationFrame-XRpDXkwV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimationFrame-XRpDXkwV.cjs","sources":["../src/hooks/gesture/usePointerTracking.ts","../src/hooks/gesture/useDirectionalLock.ts","../src/hooks/gesture/utils.ts","../src/hooks/gesture/types.ts","../src/hooks/gesture/useSwipeInput.ts","../src/hooks/gesture/useEdgeSwipeInput.ts","../src/hooks/gesture/useNativeGestureGuard.ts","../src/hooks/useAnimationFrame.ts"],"sourcesContent":["/**\n * @file Hook for tracking pointer state during gestures.\n *\n * Provides low-level pointer tracking with position, velocity, and timing.\n * This hook serves as the foundation for higher-level gesture hooks.\n */\nimport * as React from \"react\";\nimport { useDocumentPointerEvents } from \"../useDocumentPointerEvents.js\";\nimport { useEffectEvent } from \"../useEffectEvent.js\";\nimport type {\n  PointerTrackingState,\n  TimestampedPoint,\n  UsePointerTrackingOptions,\n  UsePointerTrackingResult,\n} from \"./types.js\";\n\n/**\n * Initial state for pointer tracking.\n */\nconst INITIAL_STATE: PointerTrackingState = {\n  isDown: false,\n  start: null,\n  current: null,\n  pointerId: null,\n  wasCanceled: false,\n};\n\n/**\n * Creates a timestamped point from pointer event coordinates.\n */\nconst createTimestampedPoint = (clientX: number, clientY: number): TimestampedPoint => ({\n  x: clientX,\n  y: clientY,\n  timestamp: performance.now(),\n});\n\n/**\n * Hook for tracking pointer state during gestures.\n *\n * Tracks pointer down/move/up events and provides position and timing data\n * that can be used by higher-level gesture detection hooks.\n *\n * @example\n * ```tsx\n * const { state, onPointerDown, reset } = usePointerTracking({\n *   enabled: true,\n *   primaryOnly: true,\n * });\n *\n * return (\n *   <div onPointerDown={onPointerDown}>\n *     {state.isDown && <span>Tracking...</span>}\n *   </div>\n * );\n * ```\n */\nexport function usePointerTracking(options: UsePointerTrackingOptions): UsePointerTrackingResult {\n  const { enabled, primaryOnly = true } = options;\n\n  const [state, setState] = React.useState<PointerTrackingState>(INITIAL_STATE);\n\n  const reset = React.useCallback(() => {\n    setState(INITIAL_STATE);\n  }, []);\n\n  const handlePointerDown = useEffectEvent((event: React.PointerEvent) => {\n    if (!enabled) {\n      return;\n    }\n\n    // Filter non-primary pointers if primaryOnly is set\n    if (primaryOnly && !event.isPrimary) {\n      return;\n    }\n\n    // Only track left mouse button or touch/pen\n    if (event.pointerType === \"mouse\" && event.button !== 0) {\n      return;\n    }\n\n    const point = createTimestampedPoint(event.clientX, event.clientY);\n\n    setState({\n      isDown: true,\n      start: point,\n      current: point,\n      pointerId: event.pointerId,\n      wasCanceled: false,\n    });\n  });\n\n  const handlePointerMove = useEffectEvent((event: PointerEvent) => {\n    // Verify this is the tracked pointer\n    if (state.pointerId !== event.pointerId) {\n      return;\n    }\n\n    const point = createTimestampedPoint(event.clientX, event.clientY);\n\n    setState((prev) => ({\n      ...prev,\n      current: point,\n    }));\n  });\n\n  const handlePointerUp = useEffectEvent(() => {\n    setState(INITIAL_STATE);\n  });\n\n  const handlePointerCancel = useEffectEvent(() => {\n    setState({ ...INITIAL_STATE, wasCanceled: true });\n  });\n\n  // Use document-level pointer events for tracking after pointer down\n  const shouldTrackDocument = state.isDown ? enabled : false;\n  useDocumentPointerEvents(shouldTrackDocument, {\n    onMove: handlePointerMove,\n    onUp: handlePointerUp,\n    onCancel: handlePointerCancel,\n  });\n\n  // Reset state when disabled\n  React.useEffect(() => {\n    if (!enabled && state.isDown) {\n      reset();\n    }\n  }, [enabled, state.isDown, reset]);\n\n  return {\n    state,\n    onPointerDown: handlePointerDown,\n    reset,\n  };\n}\n","/**\n * @file Hook for locking gesture direction after threshold is exceeded.\n *\n * Once the user moves beyond the lock threshold, the direction is locked\n * to either horizontal or vertical, preventing diagonal gestures from\n * triggering both scroll and swipe.\n */\nimport * as React from \"react\";\nimport type {\n  GestureAxis,\n  UseDirectionalLockOptions,\n  UseDirectionalLockResult,\n} from \"./types.js\";\n\nconst DEFAULT_LOCK_THRESHOLD = 10;\n\n/**\n * Determines which axis the gesture is primarily moving along.\n *\n * @param deltaX - Horizontal displacement from start\n * @param deltaY - Vertical displacement from start\n * @returns The dominant axis, or null if movement is insufficient\n */\nconst determineAxis = (deltaX: number, deltaY: number): GestureAxis | null => {\n  const absX = Math.abs(deltaX);\n  const absY = Math.abs(deltaY);\n\n  // Require at least some movement in one direction\n  if (absX === 0 && absY === 0) {\n    return null;\n  }\n\n  // Use a 1.5x ratio to ensure clear direction before locking\n  // This prevents near-diagonal gestures from locking prematurely\n  if (absX > absY * 1.5) {\n    return \"horizontal\";\n  }\n\n  if (absY > absX * 1.5) {\n    return \"vertical\";\n  }\n\n  // Still ambiguous\n  return null;\n};\n\n/**\n * Hook for locking gesture direction after threshold is exceeded.\n *\n * This hook tracks pointer movement and locks to horizontal or vertical\n * direction once the movement exceeds the configured threshold. This\n * prevents diagonal gestures from triggering both scroll and swipe behaviors.\n *\n * @example\n * ```tsx\n * const { state: tracking, onPointerDown } = usePointerTracking({ enabled: true });\n * const { lockedAxis, isLocked } = useDirectionalLock({\n *   tracking,\n *   lockThreshold: 10,\n * });\n *\n * // lockedAxis will be \"horizontal\" or \"vertical\" once determined\n * ```\n */\nexport function useDirectionalLock(options: UseDirectionalLockOptions): UseDirectionalLockResult {\n  const { tracking, lockThreshold = DEFAULT_LOCK_THRESHOLD } = options;\n\n  const [lockedAxis, setLockedAxis] = React.useState<GestureAxis | null>(null);\n\n  const reset = React.useCallback(() => {\n    setLockedAxis(null);\n  }, []);\n\n  // Determine direction when tracking is active\n  React.useEffect(() => {\n    // Reset lock when pointer is released\n    if (!tracking.isDown) {\n      if (lockedAxis !== null) {\n        reset();\n      }\n      return;\n    }\n\n    // Already locked, no need to recalculate\n    if (lockedAxis !== null) {\n      return;\n    }\n\n    // Need start and current positions\n    if (!tracking.start || !tracking.current) {\n      return;\n    }\n\n    const deltaX = tracking.current.x - tracking.start.x;\n    const deltaY = tracking.current.y - tracking.start.y;\n\n    // Check if we've exceeded the lock threshold\n    const distance = Math.max(Math.abs(deltaX), Math.abs(deltaY));\n    if (distance < lockThreshold) {\n      return;\n    }\n\n    // Try to determine axis\n    const axis = determineAxis(deltaX, deltaY);\n    if (axis !== null) {\n      setLockedAxis(axis);\n    }\n  }, [tracking.isDown, tracking.start, tracking.current, lockedAxis, lockThreshold, reset]);\n\n  return {\n    lockedAxis,\n    isLocked: lockedAxis !== null,\n    reset,\n  };\n}\n","/**\n * @file Utility functions for gesture detection hooks.\n *\n * Contains shared calculations and helper functions used across\n * gesture-related hooks to avoid code duplication.\n */\nimport type * as React from \"react\";\n\n/**\n * Calculate velocity from displacement and time elapsed.\n *\n * @param displacement - Distance traveled in pixels\n * @param startTime - Start timestamp in milliseconds\n * @param currentTime - Current timestamp in milliseconds\n * @returns Velocity in pixels per millisecond\n */\nexport const calculateVelocity = (\n  displacement: number,\n  startTime: number,\n  currentTime: number,\n): number => {\n  const elapsed = currentTime - startTime;\n  if (elapsed <= 0) {\n    return 0;\n  }\n  return displacement / elapsed;\n};\n\n/**\n * Determine direction from displacement.\n *\n * @param displacement - Distance from start position\n * @returns -1 for backward (left/up), 0 for no movement, 1 for forward (right/down)\n */\nexport const determineDirection = (displacement: number): -1 | 0 | 1 => {\n  if (displacement > 0) {\n    return 1;\n  }\n  if (displacement < 0) {\n    return -1;\n  }\n  return 0;\n};\n\n/**\n * Container props type for gesture handling.\n */\nexport type GestureContainerProps = React.HTMLAttributes<HTMLElement> & {\n  style: React.CSSProperties;\n};\n\n/**\n * Merge multiple container props objects for gesture handling.\n *\n * Combines style objects and chains onPointerDown handlers.\n * Useful when combining multiple gesture hooks that each provide\n * their own container props (e.g., swipe input + native gesture guard).\n *\n * @param propsArray - Array of container props to merge\n * @returns Merged container props with combined styles and handlers\n */\nexport const mergeGestureContainerProps = (\n  ...propsArray: GestureContainerProps[]\n): GestureContainerProps => {\n  const mergedStyle: React.CSSProperties = {};\n  const pointerDownHandlers: Array<\n    ((event: React.PointerEvent<HTMLElement>) => void) | undefined\n  > = [];\n\n  for (const props of propsArray) {\n    Object.assign(mergedStyle, props.style);\n    if (props.onPointerDown) {\n      pointerDownHandlers.push(props.onPointerDown);\n    }\n  }\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    for (const handler of pointerDownHandlers) {\n      handler?.(event);\n    }\n  };\n\n  return {\n    onPointerDown: handlePointerDown,\n    style: mergedStyle,\n  };\n};\n\n// ============================================================================\n// Scroll Detection Utilities\n// ============================================================================\n\n/**\n * Compute scroll size for an element based on axis.\n */\nfunction computeScrollSize(element: HTMLElement, isHorizontal: boolean): number {\n  if (isHorizontal) {\n    return element.scrollWidth - element.clientWidth;\n  }\n  return element.scrollHeight - element.clientHeight;\n}\n\n/**\n * Check if an element is scrollable in any direction.\n */\nexport function isScrollableElement(element: HTMLElement): boolean {\n  const style = getComputedStyle(element);\n\n  const isScrollableX =\n    (style.overflowX === \"scroll\" || style.overflowX === \"auto\") &&\n    element.scrollWidth > element.clientWidth;\n\n  const isScrollableY =\n    (style.overflowY === \"scroll\" || style.overflowY === \"auto\") &&\n    element.scrollHeight > element.clientHeight;\n\n  if (isScrollableX) {\n    return true;\n  }\n  return isScrollableY;\n}\n\n/**\n * Check if we should start drag based on scroll state.\n * Returns false if the target is inside a scrollable element.\n */\nexport function shouldStartDrag(\n  event: React.PointerEvent,\n  container: HTMLElement,\n): boolean {\n  // eslint-disable-next-line no-restricted-syntax -- loop variable requires let\n  let current = event.target as HTMLElement | null;\n\n  while (current !== null && current !== container) {\n    if (isScrollableElement(current)) {\n      return false;\n    }\n    current = current.parentElement;\n  }\n\n  return true;\n}\n\n/**\n * Check if an element or its ancestors are scrollable in the specified direction.\n * Returns true if scrolling is possible and would block the swipe gesture.\n *\n * @param element - The target element to check\n * @param container - The container boundary\n * @param axis - The axis to check (\"x\" or \"y\")\n * @param direction - The swipe direction (1 = right/down, -1 = left/up)\n */\nexport function isScrollableInDirection(\n  element: HTMLElement,\n  container: HTMLElement,\n  axis: \"x\" | \"y\",\n  direction: 1 | -1,\n): boolean {\n  // eslint-disable-next-line no-restricted-syntax -- loop variable requires let\n  let current: HTMLElement | null = element;\n\n  while (current !== null && current !== container) {\n    const style = getComputedStyle(current);\n    const isHorizontal = axis === \"x\";\n\n    const overflow = isHorizontal ? style.overflowX : style.overflowY;\n    const isScrollable = overflow === \"scroll\" || overflow === \"auto\";\n\n    if (isScrollable) {\n      const scrollSize = computeScrollSize(current, isHorizontal);\n\n      if (scrollSize > 0) {\n        const scrollPos = isHorizontal ? current.scrollLeft : current.scrollTop;\n\n        // If swiping in close direction and not at boundary, block swipe\n        if (direction === -1 && scrollPos > 1) {\n          return true; // Can scroll left/up, block swipe\n        }\n        if (direction === 1 && scrollPos < scrollSize - 1) {\n          return true; // Can scroll right/down, block swipe\n        }\n      }\n    }\n\n    current = current.parentElement;\n  }\n\n  return false;\n}\n","/**\n * @file Type definitions for gesture input detection hooks.\n *\n * These types support the separation of concerns:\n * - Operation: what to do (navigate, push, pop)\n * - Input: how to command (swipe, click, keyboard)\n * - Presentation: how to show (animation, transition)\n *\n * This file defines types for the Input layer, including the abstract\n * ContinuousOperationState that represents any continuous state transition\n * (whether controlled by human gesture or system animation).\n */\nimport type * as React from \"react\";\n\n/**\n * Axis for gesture detection.\n */\nexport type GestureAxis = \"horizontal\" | \"vertical\";\n\n/**\n * 2D vector for displacement and velocity.\n */\nexport type Vector2 = {\n  x: number;\n  y: number;\n};\n\n// ============================================================================\n// Continuous Operation State\n// ============================================================================\n// A continuous operation is any state transition that occurs over time,\n// where progress can be observed incrementally. The controlling agent\n// may be human (gesture) or system (animation).\n\n/**\n * Phase of a continuous operation lifecycle.\n * - \"idle\": No operation in progress\n * - \"operating\": Operation is in progress (human or system controlled)\n * - \"ended\": Operation has completed\n */\nexport type ContinuousOperationPhase = \"idle\" | \"operating\" | \"ended\";\n\n/**\n * State of a continuous operation.\n *\n * This is the abstract representation of any operation that occurs over time,\n * whether controlled by human gesture or system animation. Components that\n * accept this state can respond to both input types uniformly.\n */\nexport type ContinuousOperationState = {\n  /** Current phase of the operation */\n  phase: ContinuousOperationPhase;\n  /** Displacement from start position in pixels */\n  displacement: Vector2;\n  /** Current velocity in pixels per millisecond */\n  velocity: Vector2;\n};\n\n/**\n * Initial idle state for ContinuousOperationState.\n */\nexport const IDLE_CONTINUOUS_OPERATION_STATE: ContinuousOperationState = {\n  phase: \"idle\",\n  displacement: { x: 0, y: 0 },\n  velocity: { x: 0, y: 0 },\n};\n\n/**\n * Convert SwipeInputPhase to ContinuousOperationPhase.\n * - \"idle\" → \"idle\"\n * - \"tracking\" | \"swiping\" → \"operating\"\n * - \"ended\" → \"ended\"\n */\nexport function toContinuousPhase(phase: SwipeInputPhase): ContinuousOperationPhase {\n  if (phase === \"idle\") {\n    return \"idle\";\n  }\n  if (phase === \"ended\") {\n    return \"ended\";\n  }\n  return \"operating\";\n}\n\n/**\n * Convert SwipeInputState to ContinuousOperationState.\n */\nexport function toContinuousOperationState(state: SwipeInputState): ContinuousOperationState {\n  return {\n    phase: toContinuousPhase(state.phase),\n    displacement: state.displacement,\n    velocity: state.velocity,\n  };\n}\n\n// ============================================================================\n// Swipe Input (concrete implementation of continuous operation)\n// ============================================================================\n\n/**\n * Phase of swipe input lifecycle.\n * - \"idle\": No swipe in progress\n * - \"tracking\": Pointer down, tracking movement (direction not yet locked)\n * - \"swiping\": Direction locked, actively swiping\n * - \"ended\": Swipe gesture completed\n */\nexport type SwipeInputPhase = \"idle\" | \"tracking\" | \"swiping\" | \"ended\";\n\n/**\n * Point with timestamp for velocity calculation.\n */\nexport type TimestampedPoint = {\n  x: number;\n  y: number;\n  timestamp: number;\n};\n\n/**\n * Swipe input state during gesture.\n */\nexport type SwipeInputState = {\n  /** Current phase of the swipe input */\n  phase: SwipeInputPhase;\n  /** Displacement from start position in pixels */\n  displacement: Vector2;\n  /** Current velocity in pixels per millisecond */\n  velocity: Vector2;\n  /**\n   * Direction of movement as a number.\n   * -1 = backward (left/up), 0 = no movement, 1 = forward (right/down)\n   */\n  direction: -1 | 0 | 1;\n};\n\n/**\n * Thresholds for swipe input recognition.\n */\nexport type SwipeInputThresholds = {\n  /** Minimum distance in pixels to trigger swipe. @default 50 */\n  distanceThreshold: number;\n  /** Minimum velocity in px/ms to trigger swipe. @default 0.3 */\n  velocityThreshold: number;\n  /** Distance threshold before direction is locked. @default 10 */\n  lockThreshold: number;\n};\n\n/**\n * Options for usePointerTracking hook.\n */\nexport type UsePointerTrackingOptions = {\n  /** Whether tracking is enabled */\n  enabled: boolean;\n  /** Restrict to primary pointer only (ignore multitouch). @default true */\n  primaryOnly?: boolean;\n};\n\n/**\n * Result from usePointerTracking hook.\n */\nexport type UsePointerTrackingResult = {\n  /** Current tracking state */\n  state: PointerTrackingState;\n  /** Handler to attach to onPointerDown */\n  onPointerDown: (event: React.PointerEvent) => void;\n  /** Reset tracking state */\n  reset: () => void;\n};\n\n/**\n * Internal pointer tracking state.\n */\nexport type PointerTrackingState = {\n  /** Whether pointer is currently down */\n  isDown: boolean;\n  /** Start position and timestamp */\n  start: TimestampedPoint | null;\n  /** Current position and timestamp */\n  current: TimestampedPoint | null;\n  /** Active pointer ID */\n  pointerId: number | null;\n  /** Whether tracking ended via pointercancel (not pointerup) */\n  wasCanceled: boolean;\n};\n\n/**\n * Options for useDirectionalLock hook.\n */\nexport type UseDirectionalLockOptions = {\n  /** Pointer tracking state from usePointerTracking */\n  tracking: PointerTrackingState;\n  /** Lock threshold in pixels. @default 10 */\n  lockThreshold?: number;\n};\n\n/**\n * Result from useDirectionalLock hook.\n */\nexport type UseDirectionalLockResult = {\n  /** Locked axis, or null if not yet locked */\n  lockedAxis: GestureAxis | null;\n  /** Whether lock has been determined */\n  isLocked: boolean;\n  /** Reset the lock state */\n  reset: () => void;\n};\n\n/**\n * Options for useScrollBoundary hook.\n */\nexport type UseScrollBoundaryOptions = {\n  /** Scroll container ref. If null, checks document scroll. */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Axis to monitor */\n  axis: GestureAxis;\n  /** Tolerance in pixels for \"at boundary\" detection. @default 1 */\n  tolerance?: number;\n};\n\n/**\n * Result from useScrollBoundary hook.\n */\nexport type UseScrollBoundaryResult = {\n  /** Whether at the start boundary (top/left) */\n  atStart: boolean;\n  /** Whether at the end boundary (bottom/right) */\n  atEnd: boolean;\n  /** Current scroll position */\n  scrollPosition: number;\n  /** Maximum scroll position */\n  maxScrollPosition: number;\n};\n\n/**\n * Filter function to determine if a pointer event should start tracking.\n * Receives the pointer event and container element.\n * Return true to allow tracking, false to ignore the event.\n */\nexport type PointerStartFilter = (\n  event: React.PointerEvent,\n  container: HTMLElement,\n) => boolean;\n\n/**\n * Options for useSwipeInput hook.\n */\nexport type UseSwipeInputOptions = {\n  /** Ref to the container element */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Axis to detect swipes on */\n  axis: GestureAxis;\n  /** Whether swipe detection is enabled. @default true */\n  enabled?: boolean;\n  /** Swipe thresholds configuration */\n  thresholds?: Partial<SwipeInputThresholds>;\n  /** Callback when swipe is completed */\n  onSwipeEnd?: (state: SwipeInputState) => void;\n  /** Whether to enable trackpad two-finger swipe (wheel events). @default true */\n  enableWheel?: boolean;\n  /**\n   * Optional filter to determine if a pointer event should start tracking.\n   * If provided, only events that pass this filter will be tracked.\n   * Useful for edge-based swipe detection.\n   */\n  pointerStartFilter?: PointerStartFilter;\n};\n\n/**\n * Result from useSwipeInput hook.\n */\nexport type UseSwipeInputResult = {\n  /** Current swipe input state */\n  state: SwipeInputState;\n  /** Props to spread on the container element */\n  containerProps: React.HTMLAttributes<HTMLElement> & {\n    style: React.CSSProperties;\n  };\n};\n\n/**\n * Edge for edge-originated gestures.\n */\nexport type GestureEdge = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Options for useEdgeSwipeInput hook.\n */\nexport type UseEdgeSwipeInputOptions = {\n  /** Ref to the container element */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Which edge to detect swipes from */\n  edge: GestureEdge;\n  /** Width of the edge detection zone in pixels. @default 20 */\n  edgeWidth?: number;\n  /** Whether edge swipe detection is enabled. @default true */\n  enabled?: boolean;\n  /** Swipe thresholds configuration */\n  thresholds?: Partial<SwipeInputThresholds>;\n  /** Callback when edge swipe is completed */\n  onSwipeEnd?: (state: SwipeInputState) => void;\n};\n\n/**\n * Result from useEdgeSwipeInput hook.\n */\nexport type UseEdgeSwipeInputResult = {\n  /** Whether the current gesture started from the edge */\n  isEdgeGesture: boolean;\n  /** Current swipe input state */\n  state: SwipeInputState;\n  /** Props to spread on the container element */\n  containerProps: React.HTMLAttributes<HTMLElement> & {\n    style: React.CSSProperties;\n  };\n};\n\n/**\n * Options for useNativeGestureGuard hook.\n */\nexport type UseNativeGestureGuardOptions = {\n  /** Ref to the container element */\n  containerRef: React.RefObject<HTMLElement | null>;\n  /** Whether the guard is active */\n  active: boolean;\n  /** Prevent iOS/macOS edge back gesture. @default true */\n  preventEdgeBack?: boolean;\n  /** Prevent overscroll bounce effect. @default true */\n  preventOverscroll?: boolean;\n  /** Width of edge zone where back gesture is prevented. @default 20 */\n  edgeWidth?: number;\n};\n\n/**\n * Result from useNativeGestureGuard hook.\n */\nexport type UseNativeGestureGuardResult = {\n  /** Props to spread on the container element */\n  containerProps: React.HTMLAttributes<HTMLElement> & {\n    style: React.CSSProperties;\n  };\n};\n\n/**\n * Default swipe input thresholds.\n *\n * - distanceThreshold: 100px is ~27% of a 375px mobile screen\n * - velocityThreshold: 0.5px/ms = 500px/s, a moderate flick speed\n * - lockThreshold: 10px before direction is locked\n */\nexport const DEFAULT_SWIPE_THRESHOLDS: SwipeInputThresholds = {\n  distanceThreshold: 100,\n  velocityThreshold: 0.5,\n  lockThreshold: 10,\n};\n\n/**\n * Default edge width for edge gesture detection.\n */\nexport const DEFAULT_EDGE_WIDTH = 20;\n\n/**\n * Initial idle state for SwipeInputState.\n */\nexport const IDLE_SWIPE_INPUT_STATE: SwipeInputState = {\n  phase: \"idle\",\n  displacement: { x: 0, y: 0 },\n  velocity: { x: 0, y: 0 },\n  direction: 0,\n};\n","/**\n * @file Hook for detecting swipe gestures on a container element.\n *\n * Combines pointer tracking and directional locking to detect swipe gestures.\n * Also supports trackpad two-finger swipe via wheel events.\n * Returns swipe state and container props for gesture handling.\n */\nimport * as React from \"react\";\nimport { usePointerTracking } from \"./usePointerTracking.js\";\nimport { useDirectionalLock } from \"./useDirectionalLock.js\";\nimport { useEffectEvent } from \"../useEffectEvent.js\";\nimport { calculateVelocity, determineDirection } from \"./utils.js\";\nimport type {\n  GestureAxis,\n  SwipeInputState,\n  SwipeInputThresholds,\n  UseSwipeInputOptions,\n  UseSwipeInputResult,\n  Vector2,\n} from \"./types.js\";\nimport { DEFAULT_SWIPE_THRESHOLDS, IDLE_SWIPE_INPUT_STATE } from \"./types.js\";\n\n/** Idle timeout to reset wheel state after swipe stops */\nconst WHEEL_RESET_TIMEOUT = 150;\n\n/**\n * Evaluate swipe end and call callback if threshold is met.\n */\nconst evaluateSwipeEnd = (\n  displacement: Vector2,\n  velocity: Vector2,\n  axis: GestureAxis,\n  thresholds: SwipeInputThresholds,\n  onSwipeEnd: ((state: SwipeInputState) => void) | undefined,\n): void => {\n  const axisDisplacement = axis === \"horizontal\" ? displacement.x : displacement.y;\n  const axisVelocity = axis === \"horizontal\" ? velocity.x : velocity.y;\n\n  const absDisplacement = Math.abs(axisDisplacement);\n  const absVelocity = Math.abs(axisVelocity);\n\n  const triggered = absDisplacement >= thresholds.distanceThreshold || absVelocity >= thresholds.velocityThreshold;\n\n  if (triggered) {\n    const direction = determineDirection(axisDisplacement);\n    const endState: SwipeInputState = {\n      phase: \"ended\",\n      displacement,\n      velocity,\n      direction,\n    };\n    onSwipeEnd?.(endState);\n  }\n};\n\n/**\n * Hook for detecting swipe gestures on a container element.\n */\nexport function useSwipeInput(options: UseSwipeInputOptions): UseSwipeInputResult {\n  const {\n    containerRef,\n    axis,\n    enabled = true,\n    thresholds: customThresholds,\n    onSwipeEnd,\n    enableWheel = true,\n    pointerStartFilter,\n  } = options;\n\n  const thresholds: SwipeInputThresholds = {\n    ...DEFAULT_SWIPE_THRESHOLDS,\n    ...customThresholds,\n  };\n\n  // Stable callback for swipe end\n  const handleSwipeEnd = useEffectEvent(onSwipeEnd);\n\n  // ===== Pointer-based swipe tracking =====\n  const { state: tracking, onPointerDown: baseOnPointerDown } = usePointerTracking({\n    enabled,\n  });\n\n  // Wrap pointer down handler with optional filter\n  const onPointerDown = React.useCallback(\n    (event: React.PointerEvent) => {\n      if (!enabled) {\n        return;\n      }\n      if (pointerStartFilter) {\n        const container = containerRef.current;\n        if (!container) {\n          return;\n        }\n        if (!pointerStartFilter(event, container)) {\n          return;\n        }\n      }\n      baseOnPointerDown(event);\n    },\n    [enabled, pointerStartFilter, containerRef, baseOnPointerDown],\n  );\n\n  const { lockedAxis, isLocked } = useDirectionalLock({\n    tracking,\n    lockThreshold: thresholds.lockThreshold,\n  });\n\n  const lastActiveStateRef = React.useRef<SwipeInputState | null>(null);\n\n  // Prevent native scroll when swiping on iOS\n  const isLockedToSwipeAxisRef = React.useRef(false);\n\n  React.useEffect(() => {\n    isLockedToSwipeAxisRef.current = isLocked ? lockedAxis === axis : false;\n  }, [isLocked, lockedAxis, axis]);\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !enabled) {\n      return;\n    }\n    const disableTouchMove = (event: TouchEvent) => {\n      event.preventDefault();\n    };\n    const handleTouchStart = (event: TouchEvent) => {\n      if (isLockedToSwipeAxisRef.current) {\n        event.preventDefault();\n      }\n      document.addEventListener(\"touchmove\", disableTouchMove, { passive: false });\n    };\n    const handleTouchEnd = () => {\n      document.removeEventListener(\"touchmove\", disableTouchMove);\n    };\n    document.addEventListener(\"touchend\", handleTouchEnd);\n    document.addEventListener(\"touchcancel\", handleTouchEnd);\n    container.addEventListener(\"touchstart\", handleTouchStart, { passive: false });\n\n    return () => {\n      container.removeEventListener(\"touchstart\", handleTouchStart);\n      document.removeEventListener(\"touchend\", handleTouchEnd);\n      document.removeEventListener(\"touchcancel\", handleTouchEnd);\n      // Must also remove disableTouchMove in case unmount happens during active touch\n      document.removeEventListener(\"touchmove\", disableTouchMove);\n    };\n  }, [containerRef, enabled]);\n\n  // ===== Wheel-based swipe tracking =====\n  const [wheelState, setWheelState] = React.useState<SwipeInputState>(IDLE_SWIPE_INPUT_STATE);\n  const wheelAccumulatedRef = React.useRef({ x: 0, y: 0 });\n  const wheelIdleTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const wheelLockedRef = React.useRef(false);\n  const wheelLockedAxisRef = React.useRef<GestureAxis | null>(null);\n\n  const resetWheelState = React.useCallback(() => {\n    wheelAccumulatedRef.current = { x: 0, y: 0 };\n    wheelLockedRef.current = false;\n    wheelLockedAxisRef.current = null;\n    setWheelState(IDLE_SWIPE_INPUT_STATE);\n  }, []);\n\n  const endWheelSwipe = React.useCallback(() => {\n    const displacement = { ...wheelAccumulatedRef.current };\n    evaluateSwipeEnd(displacement, { x: 0, y: 0 }, axis, thresholds, handleSwipeEnd);\n    resetWheelState();\n  }, [axis, thresholds, handleSwipeEnd, resetWheelState]);\n\n  const handleWheel = useEffectEvent((event: WheelEvent) => {\n    if (!enabled || !enableWheel || tracking.isDown) {\n      return;\n    }\n\n    const { deltaX, deltaY } = event;\n\n    // Direction lock\n    if (!wheelLockedRef.current) {\n      const absX = Math.abs(deltaX);\n      const absY = Math.abs(deltaY);\n\n      if (absX >= thresholds.lockThreshold || absY >= thresholds.lockThreshold) {\n        wheelLockedRef.current = true;\n        wheelLockedAxisRef.current = absX > absY ? \"horizontal\" : \"vertical\";\n      }\n    }\n\n    // If locked to wrong axis, ignore\n    if (wheelLockedRef.current && wheelLockedAxisRef.current !== axis) {\n      return;\n    }\n\n    // Accumulate displacement (negate: wheel delta is scroll direction)\n    wheelAccumulatedRef.current.x -= deltaX;\n    wheelAccumulatedRef.current.y -= deltaY;\n\n    const accumulated = wheelAccumulatedRef.current;\n    const axisDisplacement = axis === \"horizontal\" ? accumulated.x : accumulated.y;\n\n    setWheelState({\n      phase: \"swiping\",\n      displacement: { ...accumulated },\n      velocity: { x: 0, y: 0 },\n      direction: determineDirection(axisDisplacement),\n    });\n\n    // When wheel stops, treat as \"release\"\n    if (wheelIdleTimerRef.current !== null) {\n      clearTimeout(wheelIdleTimerRef.current);\n    }\n    wheelIdleTimerRef.current = setTimeout(endWheelSwipe, WHEEL_RESET_TIMEOUT);\n  });\n\n  // Set up wheel event listener\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !enabled || !enableWheel) {\n      return;\n    }\n\n    const listener = (event: WheelEvent) => {\n      event.preventDefault();\n      handleWheel(event);\n    };\n\n    container.addEventListener(\"wheel\", listener, { passive: false });\n\n    return () => {\n      container.removeEventListener(\"wheel\", listener);\n      if (wheelIdleTimerRef.current !== null) {\n        clearTimeout(wheelIdleTimerRef.current);\n      }\n    };\n  }, [containerRef, enabled, enableWheel, handleWheel]);\n\n  React.useEffect(() => {\n    return () => {\n      if (wheelIdleTimerRef.current !== null) {\n        clearTimeout(wheelIdleTimerRef.current);\n      }\n    };\n  }, []);\n\n  // ===== Pointer swipe state =====\n  const pointerState = React.useMemo<SwipeInputState>(() => {\n    if (!tracking.isDown || !tracking.start || !tracking.current) {\n      return IDLE_SWIPE_INPUT_STATE;\n    }\n\n    const deltaX = tracking.current.x - tracking.start.x;\n    const deltaY = tracking.current.y - tracking.start.y;\n    const displacement = { x: deltaX, y: deltaY };\n\n    const velocity = {\n      x: calculateVelocity(deltaX, tracking.start.timestamp, tracking.current.timestamp),\n      y: calculateVelocity(deltaY, tracking.start.timestamp, tracking.current.timestamp),\n    };\n\n    if (!isLocked || lockedAxis !== axis) {\n      return { phase: \"tracking\", displacement, velocity, direction: 0 };\n    }\n\n    const axisDisplacement = axis === \"horizontal\" ? deltaX : deltaY;\n    return {\n      phase: \"swiping\",\n      displacement,\n      velocity,\n      direction: determineDirection(axisDisplacement),\n    };\n  }, [tracking.isDown, tracking.start, tracking.current, isLocked, lockedAxis, axis]);\n\n  React.useEffect(() => {\n    if (pointerState.phase !== \"idle\") {\n      lastActiveStateRef.current = pointerState;\n    }\n  }, [pointerState]);\n\n  // Handle pointer up (but not cancel)\n  React.useEffect(() => {\n    if (tracking.isDown) {\n      return;\n    }\n\n    const lastState = lastActiveStateRef.current;\n    if (!lastState || (lastState.phase !== \"swiping\" && lastState.phase !== \"tracking\")) {\n      return;\n    }\n\n    lastActiveStateRef.current = null;\n\n    // Skip navigation if the gesture was canceled (e.g., browser took over for native scroll)\n    if (tracking.wasCanceled) {\n      return;\n    }\n\n    evaluateSwipeEnd(lastState.displacement, lastState.velocity, axis, thresholds, handleSwipeEnd);\n  }, [tracking.isDown, tracking.wasCanceled, axis, thresholds, handleSwipeEnd]);\n\n  // Merge states\n  const state = pointerState.phase !== \"idle\" ? pointerState : wheelState;\n\n  const containerProps = React.useMemo(() => {\n    const touchAction = axis === \"horizontal\" ? \"pan-y pinch-zoom\" : \"pan-x pinch-zoom\";\n    return {\n      onPointerDown,\n      style: {\n        touchAction,\n        userSelect: \"none\" as const,\n        WebkitUserSelect: \"none\" as const,\n      },\n    };\n  }, [axis, onPointerDown]);\n\n  return { state, containerProps };\n}\n","/**\n * @file Hook for detecting swipe gestures that originate from the edge of a container.\n *\n * Edge swipes are commonly used for \"swipe back\" navigation in mobile apps.\n * This hook detects swipes that start within a configurable edge zone.\n *\n * Built on top of useSwipeInput with edge zone filtering.\n */\nimport * as React from \"react\";\nimport { useSwipeInput } from \"./useSwipeInput.js\";\nimport type {\n  GestureAxis,\n  GestureEdge,\n  SwipeInputState,\n  UseEdgeSwipeInputOptions,\n  UseEdgeSwipeInputResult,\n} from \"./types.js\";\nimport { DEFAULT_EDGE_WIDTH, DEFAULT_SWIPE_THRESHOLDS, IDLE_SWIPE_INPUT_STATE } from \"./types.js\";\n\n/**\n * Get the axis associated with an edge.\n */\nconst getAxisForEdge = (edge: GestureEdge): GestureAxis => {\n  if (edge === \"left\" || edge === \"right\") {\n    return \"horizontal\";\n  }\n  return \"vertical\";\n};\n\n/**\n * Check if a point is within the edge zone of a container.\n */\nconst isInEdgeZone = (\n  clientX: number,\n  clientY: number,\n  container: HTMLElement,\n  edge: GestureEdge,\n  edgeWidth: number,\n): boolean => {\n  const rect = container.getBoundingClientRect();\n\n  switch (edge) {\n    case \"left\":\n      return clientX >= rect.left && clientX <= rect.left + edgeWidth;\n    case \"right\":\n      return clientX >= rect.right - edgeWidth && clientX <= rect.right;\n    case \"top\":\n      return clientY >= rect.top && clientY <= rect.top + edgeWidth;\n    case \"bottom\":\n      return clientY >= rect.bottom - edgeWidth && clientY <= rect.bottom;\n  }\n};\n\n/**\n * Hook for detecting swipe gestures that originate from the edge of a container.\n *\n * This is useful for implementing \"swipe back\" navigation patterns where\n * the user must start their swipe from the edge of the screen.\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const { isEdgeGesture, state, containerProps } = useEdgeSwipeInput({\n *   containerRef,\n *   edge: \"left\",\n *   edgeWidth: 20,\n *   onSwipeEnd: (state) => {\n *     if (state.direction === 1) goBack();\n *   },\n * });\n *\n * return <div ref={containerRef} {...containerProps}>{children}</div>;\n * ```\n */\nexport function useEdgeSwipeInput(options: UseEdgeSwipeInputOptions): UseEdgeSwipeInputResult {\n  const {\n    containerRef,\n    edge,\n    edgeWidth = DEFAULT_EDGE_WIDTH,\n    enabled = true,\n    thresholds: customThresholds,\n    onSwipeEnd,\n  } = options;\n\n  const thresholds = {\n    ...DEFAULT_SWIPE_THRESHOLDS,\n    ...customThresholds,\n  };\n\n  const axis = getAxisForEdge(edge);\n\n  // Track whether the current gesture started from the edge\n  const [isEdgeGesture, setIsEdgeGesture] = React.useState(false);\n\n  // Create edge zone filter for pointer events\n  const pointerStartFilter = React.useCallback(\n    (event: React.PointerEvent, container: HTMLElement): boolean => {\n      const inEdge = isInEdgeZone(event.clientX, event.clientY, container, edge, edgeWidth);\n      setIsEdgeGesture(inEdge);\n      return inEdge;\n    },\n    [edge, edgeWidth],\n  );\n\n  // Use base swipe input with edge filtering\n  const { state, containerProps } = useSwipeInput({\n    containerRef,\n    axis,\n    enabled,\n    thresholds,\n    onSwipeEnd,\n    enableWheel: false, // Edge swipe doesn't use wheel events\n    pointerStartFilter,\n  });\n\n  // Reset edge gesture state when swipe ends\n  React.useEffect(() => {\n    if (state.phase === \"idle\") {\n      setIsEdgeGesture(false);\n    }\n  }, [state.phase]);\n\n  // If not an edge gesture, return idle state\n  const effectiveState: SwipeInputState = isEdgeGesture ? state : IDLE_SWIPE_INPUT_STATE;\n\n  return {\n    isEdgeGesture,\n    state: effectiveState,\n    containerProps,\n  };\n}\n","/**\n * @file Hook for preventing conflicts with native OS gestures.\n *\n * This hook helps prevent conflicts with:\n * - iOS/macOS edge swipe back navigation\n * - Overscroll bounce effects\n *\n * It applies appropriate CSS properties and event handlers to the container.\n */\nimport * as React from \"react\";\nimport type {\n  UseNativeGestureGuardOptions,\n  UseNativeGestureGuardResult,\n} from \"./types.js\";\nimport { DEFAULT_EDGE_WIDTH } from \"./types.js\";\n\n/**\n * Check if a pointer event is within the left edge zone.\n */\nconst isInLeftEdge = (clientX: number, container: HTMLElement, edgeWidth: number): boolean => {\n  const rect = container.getBoundingClientRect();\n  return clientX >= rect.left && clientX <= rect.left + edgeWidth;\n};\n\n/**\n * Hook for preventing conflicts with native OS gestures.\n *\n * When active, this hook:\n * - Prevents iOS/macOS edge back gesture by capturing pointerdown events in the edge zone\n * - Prevents overscroll bounce effect using CSS overscroll-behavior\n * - Dynamically applies overscroll-behavior: none to html element during gesture\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const { containerProps } = useNativeGestureGuard({\n *   containerRef,\n *   active: isSwipeActive,\n *   preventEdgeBack: true,\n *   preventOverscroll: true,\n * });\n *\n * return <div ref={containerRef} {...containerProps}>{children}</div>;\n * ```\n */\nexport function useNativeGestureGuard(options: UseNativeGestureGuardOptions): UseNativeGestureGuardResult {\n  const {\n    containerRef,\n    active,\n    preventEdgeBack = true,\n    preventOverscroll = true,\n    edgeWidth = DEFAULT_EDGE_WIDTH,\n  } = options;\n\n  // Track previous html overscroll-behavior value for restoration\n  const previousHtmlOverscrollRef = React.useRef<string | null>(null);\n\n  // Apply overscroll-behavior to html synchronously (called from onPointerDown)\n  const applyHtmlOverscroll = React.useCallback(() => {\n    if (!preventOverscroll) {\n      return;\n    }\n\n    const html = document.documentElement;\n    if (previousHtmlOverscrollRef.current === null) {\n      previousHtmlOverscrollRef.current = html.style.overscrollBehavior;\n    }\n    html.style.overscrollBehavior = \"none\";\n  }, [preventOverscroll]);\n\n  // Remove overscroll-behavior from html when gesture ends\n  React.useEffect(() => {\n    if (active || !preventOverscroll) {\n      return;\n    }\n\n    // Cleanup: restore previous value when deactivated\n    if (previousHtmlOverscrollRef.current !== null) {\n      document.documentElement.style.overscrollBehavior = previousHtmlOverscrollRef.current;\n      previousHtmlOverscrollRef.current = null;\n    }\n  }, [active, preventOverscroll]);\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      if (previousHtmlOverscrollRef.current !== null) {\n        document.documentElement.style.overscrollBehavior = previousHtmlOverscrollRef.current;\n        previousHtmlOverscrollRef.current = null;\n      }\n    };\n  }, []);\n\n  // Pointer down handler that prevents edge back gesture\n  // Note: This must run on EVERY pointerdown in edge zone, not just when active,\n  // because browser gesture recognition starts immediately on first touch.\n  const onPointerDown = React.useCallback((event: React.PointerEvent) => {\n    if (!preventEdgeBack) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    // Prevent for touch events in the left edge zone\n    // This must happen immediately, before we know if it's \"our\" gesture\n    if (event.pointerType === \"touch\" && isInLeftEdge(event.clientX, container, edgeWidth)) {\n      // Apply html overscroll-behavior synchronously before browser can recognize gesture\n      applyHtmlOverscroll();\n      // Prevent the browser from handling this as a back gesture\n      event.preventDefault();\n    }\n  }, [preventEdgeBack, containerRef, edgeWidth, applyHtmlOverscroll]);\n\n  // Build container props\n  // Styles are applied immediately (not waiting for active) to prevent browser gestures\n  const containerProps = React.useMemo(() => {\n    const style: React.CSSProperties = {\n      // Always apply to prevent browser navigation gestures\n      overscrollBehavior: preventOverscroll ? \"contain\" : undefined,\n      WebkitOverflowScrolling: \"touch\",\n    };\n\n    return {\n      onPointerDown: preventEdgeBack ? onPointerDown : undefined,\n      style,\n    };\n  }, [preventOverscroll, preventEdgeBack, onPointerDown]);\n\n  return {\n    containerProps,\n  };\n}\n","/**\n * @file Generic requestAnimationFrame-based animation hook.\n *\n * Provides a reusable animation loop with easing support.\n * This is the foundation for more specific animation hooks.\n */\nimport * as React from \"react\";\n\n/**\n * Easing function type.\n * Takes a progress value (0-1) and returns an eased value (0-1).\n */\nexport type EasingFunction = (t: number) => number;\n\n/**\n * Built-in easing functions.\n */\nexport const easings = {\n  /** Linear (no easing) */\n  linear: (t: number): number => t,\n\n  /** Ease out cubic */\n  easeOutCubic: (t: number): number => 1 - Math.pow(1 - t, 3),\n\n  /** Ease out expo (similar to cubic-bezier(0.22, 1, 0.36, 1)) */\n  easeOutExpo: (t: number): number => {\n    if (t === 1) {\n      return 1;\n    }\n    return 1 - Math.pow(2, -10 * t);\n  },\n\n  /** Ease out quart */\n  easeOutQuart: (t: number): number => 1 - Math.pow(1 - t, 4),\n\n  /** Ease in out cubic */\n  easeInOutCubic: (t: number): number => {\n    if (t < 0.5) {\n      return 4 * t * t * t;\n    }\n    return 1 - Math.pow(-2 * t + 2, 3) / 2;\n  },\n\n  /** Ease in expo (accelerating, for \"suck in\" effect) */\n  easeInExpo: (t: number): number => {\n    if (t === 0) {\n      return 0;\n    }\n    return Math.pow(2, 10 * t - 10);\n  },\n} as const;\n\n/**\n * Animation state passed to callbacks.\n */\nexport type AnimationState = {\n  /** Raw progress (0-1) */\n  progress: number;\n  /** Eased progress (0-1) */\n  easedProgress: number;\n  /** Elapsed time in ms */\n  elapsed: number;\n  /** Whether animation is complete */\n  isComplete: boolean;\n};\n\n/**\n * Options for useAnimationFrame hook.\n */\nexport type UseAnimationFrameOptions = {\n  /** Duration of animation in milliseconds */\n  duration?: number;\n  /** Easing function for the animation */\n  easing?: EasingFunction;\n  /** Callback called every frame with animation state */\n  onFrame?: (state: AnimationState) => void;\n  /** Callback when animation completes */\n  onComplete?: () => void;\n};\n\n/**\n * Result from useAnimationFrame hook.\n */\nexport type UseAnimationFrameResult = {\n  /** Whether animation is currently running */\n  isAnimating: boolean;\n  /** Start the animation */\n  start: () => void;\n  /** Cancel the animation */\n  cancel: () => void;\n};\n\n/** Default animation duration in ms */\nconst DEFAULT_DURATION = 300;\n\n/**\n * Generic requestAnimationFrame-based animation hook.\n *\n * Provides a reusable animation loop with progress calculation and easing.\n * Use this as a building block for specific animation behaviors.\n *\n * @example\n * ```tsx\n * const { start, isAnimating } = useAnimationFrame({\n *   duration: 300,\n *   easing: easings.easeOutExpo,\n *   onFrame: ({ easedProgress }) => {\n *     const value = fromValue + (toValue - fromValue) * easedProgress;\n *     element.style.transform = `translateX(${value}px)`;\n *   },\n *   onComplete: () => console.log('Done!'),\n * });\n *\n * // Start animation\n * start();\n * ```\n */\nexport function useAnimationFrame(options: UseAnimationFrameOptions): UseAnimationFrameResult {\n  const {\n    duration = DEFAULT_DURATION,\n    easing = easings.easeOutExpo,\n    onFrame,\n    onComplete,\n  } = options;\n\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  const rafIdRef = React.useRef<number | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  // Use refs for callbacks to avoid stale closures\n  const onFrameRef = React.useRef(onFrame);\n  const onCompleteRef = React.useRef(onComplete);\n  React.useEffect(() => {\n    onFrameRef.current = onFrame;\n    onCompleteRef.current = onComplete;\n  }, [onFrame, onComplete]);\n\n  const cancel = React.useCallback(() => {\n    if (rafIdRef.current !== null) {\n      cancelAnimationFrame(rafIdRef.current);\n      rafIdRef.current = null;\n    }\n    startTimeRef.current = null;\n    setIsAnimating(false);\n  }, []);\n\n  const start = React.useCallback(() => {\n    // Cancel any existing animation\n    cancel();\n\n    setIsAnimating(true);\n    startTimeRef.current = null;\n\n    const step = (timestamp: number) => {\n      if (startTimeRef.current === null) {\n        startTimeRef.current = timestamp;\n      }\n\n      const elapsed = timestamp - startTimeRef.current;\n      const progress = Math.min(elapsed / duration, 1);\n      const easedProgress = easing(progress);\n      const isComplete = progress >= 1;\n\n      const state: AnimationState = {\n        progress,\n        easedProgress,\n        elapsed,\n        isComplete,\n      };\n\n      onFrameRef.current?.(state);\n\n      if (!isComplete) {\n        rafIdRef.current = requestAnimationFrame(step);\n      } else {\n        // Animation complete\n        rafIdRef.current = null;\n        startTimeRef.current = null;\n        setIsAnimating(false);\n        onCompleteRef.current?.();\n      }\n    };\n\n    rafIdRef.current = requestAnimationFrame(step);\n  }, [duration, easing, cancel]);\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      if (rafIdRef.current !== null) {\n        cancelAnimationFrame(rafIdRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    isAnimating,\n    start,\n    cancel,\n  };\n}\n\n/**\n * Interpolate between two values using eased progress.\n */\nexport function interpolate(from: number, to: number, easedProgress: number): number {\n  return from + (to - from) * easedProgress;\n}\n"],"names":["INITIAL_STATE","createTimestampedPoint","clientX","clientY","usePointerTracking","options","enabled","primaryOnly","state","setState","React","reset","handlePointerDown","useEffectEvent","event","point","handlePointerMove","prev","handlePointerUp","handlePointerCancel","shouldTrackDocument","useDocumentPointerEvents","DEFAULT_LOCK_THRESHOLD","determineAxis","deltaX","deltaY","absX","absY","useDirectionalLock","tracking","lockThreshold","lockedAxis","setLockedAxis","axis","calculateVelocity","displacement","startTime","currentTime","elapsed","determineDirection","mergeGestureContainerProps","propsArray","mergedStyle","pointerDownHandlers","props","handler","computeScrollSize","element","isHorizontal","isScrollableInDirection","container","direction","current","style","overflow","scrollSize","scrollPos","IDLE_CONTINUOUS_OPERATION_STATE","DEFAULT_SWIPE_THRESHOLDS","DEFAULT_EDGE_WIDTH","IDLE_SWIPE_INPUT_STATE","WHEEL_RESET_TIMEOUT","evaluateSwipeEnd","velocity","thresholds","onSwipeEnd","axisDisplacement","axisVelocity","absDisplacement","absVelocity","useSwipeInput","containerRef","customThresholds","enableWheel","pointerStartFilter","handleSwipeEnd","baseOnPointerDown","onPointerDown","isLocked","lastActiveStateRef","isLockedToSwipeAxisRef","disableTouchMove","handleTouchStart","handleTouchEnd","wheelState","setWheelState","wheelAccumulatedRef","wheelIdleTimerRef","wheelLockedRef","wheelLockedAxisRef","resetWheelState","endWheelSwipe","handleWheel","accumulated","listener","pointerState","lastState","containerProps","getAxisForEdge","edge","isInEdgeZone","edgeWidth","rect","useEdgeSwipeInput","isEdgeGesture","setIsEdgeGesture","inEdge","isInLeftEdge","useNativeGestureGuard","active","preventEdgeBack","preventOverscroll","previousHtmlOverscrollRef","applyHtmlOverscroll","html","easings","DEFAULT_DURATION","useAnimationFrame","duration","easing","onFrame","onComplete","isAnimating","setIsAnimating","rafIdRef","startTimeRef","onFrameRef","onCompleteRef","cancel","start","step","timestamp","progress","easedProgress","isComplete","interpolate","from","to"],"mappings":"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"}

package/dist/window.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("./FloatingWindow-Cvyokf0m.cjs"),b=require("react/jsx-runtime"),z=require("react"),p=require("./useDocumentPointerEvents-DxDSOtip.cjs"),m=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),E=require("./styles-qf6ptVLD.cjs"),R=require("./useFloatingState-C4kRaW_R.cjs");function P(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const c=P(z),M=()=>typeof window>"u"?{width:0,height:0}:{width:window.innerWidth,height:window.innerHeight},j=(e,t,n,r,o)=>{const s=e+n>o.width?Math.max(0,o.width-n):e,i=t+r>o.height?Math.max(0,o.height-r):t;return{x:s,y:i}},S=new Map,L=e=>{const t=`resize-box:${e}`,n=S.get(t);if(n)return n;const r=new Map,o=new ResizeObserver(i=>{for(const a of i){const u=r.get(a.target);u&&u(a)}}),s={observe(i,a){return r.set(i,a),o.observe(i,{box:e}),()=>{r.delete(i),o.unobserve(i)}}};return S.set(t,s),s},C=e=>{const t=e.getBoundingClientRect();return{target:e,contentRect:t,borderBoxSize:[{inlineSize:t.width,blockSize:t.height}],contentBoxSize:[{inlineSize:t.width,blockSize:t.height}],devicePixelContentBoxSize:[]}},k=e=>{if(e.borderBoxSize?.length>0){const t=e.borderBoxSize[0];return new DOMRect(0,0,t.inlineSize,t.blockSize)}return e.contentRect};function I(e,{box:t="content-box"}){const[n,r]=c.useState(null);m.useIsomorphicLayoutEffect(()=>{const s=e.current;if(!s){r(null);return}return r(C(s)),L(t).observe(s,r)},[e,t]);const o=c.useMemo(()=>n?k(n):null,[n]);return{entry:n,rect:o}}const q={border:"none",padding:0,background:"transparent"},B={position:"fixed",zIndex:E.DIALOG_OVERLAY_Z_INDEX},F=typeof window<"u"&&typeof document<"u",_=({anchor:e,onClose:t,children:n,contentClassName:r,contentStyle:o,dataAttributes:s,onKeyDown:i,onPositionChange:a})=>{const u=c.useRef(null),{rect:l}=I(u,{box:"border-box"}),d=c.useMemo(()=>{const f=M(),h=l?.width??0,y=l?.height??0;return j(e.x,e.y,h,y,f)},[e.x,e.y,l?.width,l?.height]),g=p.useEffectEvent(a);c.useEffect(()=>{g?.(d)},[d]);const v=p.useEffectEvent(t);c.useEffect(()=>{const f=h=>{h.target instanceof Node&&u.current&&!u.current.contains(h.target)&&v()};return document.addEventListener("pointerdown",f),()=>document.removeEventListener("pointerdown",f)},[]);const D=c.useMemo(()=>({...B,...o,left:d.x,top:d.y}),[o,d.x,d.y]),O=c.useMemo(()=>s?Object.entries(s).reduce((f,[h,y])=>(y==null||(f[`data-${h}`]=y),f),{}):{},[s]);return b.jsx("div",{ref:u,className:r,style:D,onKeyDown:i,...O,children:n})},N=({visible:e,onClose:t,anchor:n,children:r,contentClassName:o,contentStyle:s,dataAttributes:i,onKeyDown:a,onPositionChange:u})=>{const l=c.useRef(null);m.useIsomorphicLayoutEffect(()=>{if(!l.current)return;const g=l.current;e?g.showModal():g.open&&g.close()},[e]);const d=c.useCallback(g=>{g.preventDefault(),t()},[t]);return b.jsx("dialog",{ref:l,style:q,onCancel:d,children:b.jsx(c.Activity,{mode:e?"visible":"hidden",children:b.jsx(_,{anchor:n,onClose:t,contentClassName:o,contentStyle:s,dataAttributes:i,onKeyDown:a,onPositionChange:u,children:r})})})},x=e=>F?b.jsx(N,{...e}):null;x.displayName="DialogOverlay";exports.Drawer=w.Drawer;exports.DrawerLayers=w.DrawerLayers;exports.FloatingWindow=w.FloatingWindow;exports.PopupLayerPortal=w.PopupLayerPortal;exports.SwipeSafeZone=w.SwipeSafeZone;exports.useDrawerState=w.useDrawerState;exports.useFloatingState=R.useFloatingState;exports.DialogOverlay=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("./FloatingWindow-DpFpmX1f.cjs"),b=require("react/jsx-runtime"),z=require("react"),p=require("./useDocumentPointerEvents-DxDSOtip.cjs"),m=require("./useIsomorphicLayoutEffect-DGRNF4Lf.cjs"),E=require("./styles-qf6ptVLD.cjs"),R=require("./useFloatingState-C4kRaW_R.cjs");function P(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const c=P(z),M=()=>typeof window>"u"?{width:0,height:0}:{width:window.innerWidth,height:window.innerHeight},j=(e,t,n,r,o)=>{const s=e+n>o.width?Math.max(0,o.width-n):e,i=t+r>o.height?Math.max(0,o.height-r):t;return{x:s,y:i}},S=new Map,L=e=>{const t=`resize-box:${e}`,n=S.get(t);if(n)return n;const r=new Map,o=new ResizeObserver(i=>{for(const a of i){const u=r.get(a.target);u&&u(a)}}),s={observe(i,a){return r.set(i,a),o.observe(i,{box:e}),()=>{r.delete(i),o.unobserve(i)}}};return S.set(t,s),s},C=e=>{const t=e.getBoundingClientRect();return{target:e,contentRect:t,borderBoxSize:[{inlineSize:t.width,blockSize:t.height}],contentBoxSize:[{inlineSize:t.width,blockSize:t.height}],devicePixelContentBoxSize:[]}},k=e=>{if(e.borderBoxSize?.length>0){const t=e.borderBoxSize[0];return new DOMRect(0,0,t.inlineSize,t.blockSize)}return e.contentRect};function I(e,{box:t="content-box"}){const[n,r]=c.useState(null);m.useIsomorphicLayoutEffect(()=>{const s=e.current;if(!s){r(null);return}return r(C(s)),L(t).observe(s,r)},[e,t]);const o=c.useMemo(()=>n?k(n):null,[n]);return{entry:n,rect:o}}const q={border:"none",padding:0,background:"transparent"},B={position:"fixed",zIndex:E.DIALOG_OVERLAY_Z_INDEX},F=typeof window<"u"&&typeof document<"u",_=({anchor:e,onClose:t,children:n,contentClassName:r,contentStyle:o,dataAttributes:s,onKeyDown:i,onPositionChange:a})=>{const u=c.useRef(null),{rect:l}=I(u,{box:"border-box"}),d=c.useMemo(()=>{const f=M(),h=l?.width??0,y=l?.height??0;return j(e.x,e.y,h,y,f)},[e.x,e.y,l?.width,l?.height]),g=p.useEffectEvent(a);c.useEffect(()=>{g?.(d)},[d]);const v=p.useEffectEvent(t);c.useEffect(()=>{const f=h=>{h.target instanceof Node&&u.current&&!u.current.contains(h.target)&&v()};return document.addEventListener("pointerdown",f),()=>document.removeEventListener("pointerdown",f)},[]);const D=c.useMemo(()=>({...B,...o,left:d.x,top:d.y}),[o,d.x,d.y]),O=c.useMemo(()=>s?Object.entries(s).reduce((f,[h,y])=>(y==null||(f[`data-${h}`]=y),f),{}):{},[s]);return b.jsx("div",{ref:u,className:r,style:D,onKeyDown:i,...O,children:n})},N=({visible:e,onClose:t,anchor:n,children:r,contentClassName:o,contentStyle:s,dataAttributes:i,onKeyDown:a,onPositionChange:u})=>{const l=c.useRef(null);m.useIsomorphicLayoutEffect(()=>{if(!l.current)return;const g=l.current;e?g.showModal():g.open&&g.close()},[e]);const d=c.useCallback(g=>{g.preventDefault(),t()},[t]);return b.jsx("dialog",{ref:l,style:q,onCancel:d,children:b.jsx(c.Activity,{mode:e?"visible":"hidden",children:b.jsx(_,{anchor:n,onClose:t,contentClassName:o,contentStyle:s,dataAttributes:i,onKeyDown:a,onPositionChange:u,children:r})})})},x=e=>F?b.jsx(N,{...e}):null;x.displayName="DialogOverlay";exports.Drawer=w.Drawer;exports.DrawerLayers=w.DrawerLayers;exports.FloatingWindow=w.FloatingWindow;exports.PopupLayerPortal=w.PopupLayerPortal;exports.SwipeSafeZone=w.SwipeSafeZone;exports.useDrawerState=w.useDrawerState;exports.useFloatingState=R.useFloatingState;exports.DialogOverlay=x;
 //# sourceMappingURL=window.cjs.map

package/dist/window.js

@@ -1,4 +1,4 @@
-import { D as A, b as G, F as K, P as T, S as W, d as q } from "./FloatingWindow-Bw2djgpz.js";
+import { D as A, b as G, F as K, P as T, S as W, d as q } from "./FloatingWindow-CE-WzkNv.js";
 import { jsx as m } from "react/jsx-runtime";
 import * as c from "react";
 import { u as p } from "./useDocumentPointerEvents-DXxw3qWj.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",

package/src/dialog/index.ts

@@ -74,8 +74,10 @@ export { useDialogContainer } from "../modules/dialog/useDialogContainer.js";
 // Types
 export type {
   ModalProps,
+  ModalHandle,
   ModalHeader,
   DialogContainerProps,
+  DialogContainerHandle,
   DialogTransitionMode,
   AlertOptions,
   ConfirmOptions,

package/src/hooks/gesture/useSwipeInput.spec.ts

@@ -426,6 +426,75 @@ describe("useSwipeInput", () => {
     });
   });
 
+  describe("touch event cleanup on unmount", () => {
+    it("removes touchmove listener when unmounted during active touch", () => {
+      const containerRef = createRef();
+      const removeSpy = vi.spyOn(document, "removeEventListener");
+
+      const { unmount } = renderHook(() =>
+        useSwipeInput({ containerRef, axis: "horizontal" }),
+      );
+
+      // Simulate touchstart to add the touchmove listener
+      const touchStartEvent = new TouchEvent("touchstart", {
+        touches: [{ clientX: 100, clientY: 100, identifier: 1 } as Touch],
+        bubbles: true,
+        cancelable: true,
+      });
+      containerRef.current!.dispatchEvent(touchStartEvent);
+
+      // Unmount WITHOUT triggering touchend
+      unmount();
+
+      // Verify touchmove listener was removed during cleanup
+      const touchMoveRemoveCalls = removeSpy.mock.calls.filter(
+        (call) => call[0] === "touchmove",
+      );
+      expect(touchMoveRemoveCalls.length).toBeGreaterThanOrEqual(1);
+
+      removeSpy.mockRestore();
+    });
+
+    it("touch scroll should work after component unmount", () => {
+      const containerRef = createRef();
+
+      const { unmount } = renderHook(() =>
+        useSwipeInput({ containerRef, axis: "horizontal" }),
+      );
+
+      // Simulate touchstart
+      const touchStartEvent = new TouchEvent("touchstart", {
+        touches: [{ clientX: 100, clientY: 100, identifier: 1 } as Touch],
+        bubbles: true,
+        cancelable: true,
+      });
+      containerRef.current!.dispatchEvent(touchStartEvent);
+
+      // Unmount without touchend (simulates navigation during touch)
+      unmount();
+
+      // After unmount, touchmove should NOT be prevented
+      // Create a new touchmove event and verify it's not prevented
+      let wasDefaultPrevented = false;
+      const touchMoveEvent = new TouchEvent("touchmove", {
+        touches: [{ clientX: 150, clientY: 100, identifier: 1 } as Touch],
+        bubbles: true,
+        cancelable: true,
+      });
+
+      // Add a listener to check if default was prevented
+      const checkListener = (e: Event) => {
+        wasDefaultPrevented = e.defaultPrevented;
+      };
+      document.addEventListener("touchmove", checkListener);
+      document.dispatchEvent(touchMoveEvent);
+      document.removeEventListener("touchmove", checkListener);
+
+      // The touchmove should NOT be prevented after unmount
+      expect(wasDefaultPrevented).toBe(false);
+    });
+  });
+
   describe("wheel swipe (trackpad two-finger swipe)", () => {
     const createContainerRef = (): React.RefObject<HTMLDivElement> => {
       const element = document.createElement("div");

package/src/hooks/gesture/useSwipeInput.ts

@@ -139,6 +139,8 @@ export function useSwipeInput(options: UseSwipeInputOptions): UseSwipeInputResul
       container.removeEventListener("touchstart", handleTouchStart);
       document.removeEventListener("touchend", handleTouchEnd);
       document.removeEventListener("touchcancel", handleTouchEnd);
+      // Must also remove disableTouchMove in case unmount happens during active touch
+      document.removeEventListener("touchmove", disableTouchMove);
     };
   }, [containerRef, enabled]);
 

package/src/modules/dialog/DialogContainer.tsx

@@ -2,7 +2,7 @@
  * @file Base dialog container component using native <dialog> element
  */
 import * as React from "react";
-import type { DialogContainerProps } from "./types.js";
+import type { DialogContainerProps, DialogContainerHandle } from "./types.js";
 import { useDialogContainer } from "./useDialogContainer.js";
 import { SwipeDialogContainer } from "./SwipeDialogContainer.js";
 import {
@@ -35,9 +35,12 @@ const contentStyle: React.CSSProperties = {
 
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
 
-type DialogContainerImplProps = DialogContainerProps;
+type DialogContainerImplProps = DialogContainerProps & {
+  ref?: React.Ref<DialogContainerHandle>;
+};
 
 const DialogContainerImpl: React.FC<DialogContainerImplProps> = ({
+  ref,
   visible,
   onClose,
   children,
@@ -62,6 +65,17 @@ const DialogContainerImpl: React.FC<DialogContainerImplProps> = ({
     preventBodyScroll,
   });
 
+  // For CSS mode, triggerClose just calls onClose immediately
+  // (CSS transitions handle the animation via visibility state)
+  const triggerClose = React.useCallback(async (): Promise<void> => {
+    onClose();
+  }, [onClose]);
+
+  // Expose triggerClose via ref for API consistency
+  React.useImperativeHandle(ref, () => ({
+    triggerClose,
+  }), [triggerClose]);
+
   const backdropStyle = React.useMemo((): string => {
     if (transitionMode === "none") {
       return `
@@ -171,18 +185,38 @@ const DialogContainerImpl: React.FC<DialogContainerImplProps> = ({
  *   <div>Swipe down to close</div>
  * </DialogContainer>
  * ```
+ *
+ * @example Using ref to trigger close animation
+ * ```tsx
+ * const dialogRef = useRef<DialogContainerHandle>(null);
+ *
+ * <DialogContainer
+ *   ref={dialogRef}
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   transitionMode="swipe"
+ * >
+ *   <button onClick={() => dialogRef.current?.triggerClose()}>
+ *     Close with animation
+ *   </button>
+ * </DialogContainer>
+ * ```
  */
-export const DialogContainer: React.FC<DialogContainerProps> = (props) => {
+type DialogContainerComponentProps = DialogContainerProps & {
+  ref?: React.Ref<DialogContainerHandle>;
+};
+
+export const DialogContainer: React.FC<DialogContainerComponentProps> = ({ ref, ...props }) => {
   if (!isBrowser) {
     return null;
   }
 
   // Use SwipeDialogContainer for swipe mode
   if (props.transitionMode === "swipe") {
-    return <SwipeDialogContainer {...props} />;
+    return <SwipeDialogContainer ref={ref} {...props} />;
   }
 
-  return <DialogContainerImpl {...props} />;
+  return <DialogContainerImpl ref={ref} {...props} />;
 };
 
 DialogContainer.displayName = "DialogContainer";

package/src/modules/dialog/Modal.tsx

@@ -2,7 +2,7 @@
  * @file Modal component - Centered modal dialog with optional chrome
  */
 import * as React from "react";
-import type { ModalProps } from "./types";
+import type { ModalProps, ModalHandle, DialogContainerHandle } from "./types";
 import { DialogContainer } from "./DialogContainer";
 import {
   FloatingPanelFrame,
@@ -59,7 +59,11 @@ const ModalContentWithChrome: React.FC<ModalContentProps> = ({
         >
           <FloatingPanelTitle>{header?.title}</FloatingPanelTitle>
           <React.Activity mode={shouldShowClose ? "visible" : "hidden"}>
-            <FloatingPanelCloseButton onClick={onClose} aria-label="Close modal" style={{ marginLeft: "auto" }} />
+            <FloatingPanelCloseButton
+              onClick={onClose}
+              aria-label="Close modal"
+              style={{ marginLeft: "auto" }}
+            />
           </React.Activity>
         </FloatingPanelHeader>
       </React.Activity>
@@ -79,6 +83,10 @@ const ModalContentRenderer: React.FC<ModalContentRendererProps> = ({ chrome, chi
   return <>{children}</>;
 };
 
+type ModalComponentProps = ModalProps & {
+  ref?: React.Ref<ModalHandle>;
+};
+
 /**
  * Modal component for displaying centered dialogs.
  * Uses native <dialog> element for proper accessibility and top-layer rendering.
@@ -98,8 +106,26 @@ const ModalContentRenderer: React.FC<ModalContentRendererProps> = ({ chrome, chi
  *   </form>
  * </Modal>
  * ```
+ *
+ * @example Using ref to trigger close animation
+ * ```tsx
+ * const modalRef = useRef<ModalHandle>(null);
+ *
+ * <Modal
+ *   ref={modalRef}
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   transitionMode="swipe"
+ *   header={{ title: "Settings" }}
+ * >
+ *   <button onClick={() => modalRef.current?.triggerClose()}>
+ *     Close with animation
+ *   </button>
+ * </Modal>
+ * ```
  */
-export const Modal: React.FC<ModalProps> = ({
+export const Modal: React.FC<ModalComponentProps> = ({
+  ref: externalRef,
   visible,
   onClose,
   children,
@@ -124,6 +150,21 @@ export const Modal: React.FC<ModalProps> = ({
   openDirection = "center",
   useViewTransition = false,
 }) => {
+  // Internal ref to DialogContainer for close button
+  const internalRef = React.useRef<DialogContainerHandle>(null);
+
+  // Merge refs - expose the same handle to external ref
+  React.useImperativeHandle(externalRef, () => ({
+    triggerClose: async () => {
+      await internalRef.current?.triggerClose();
+    },
+  }), []);
+
+  // Handler for close button that triggers animation
+  const handleCloseButtonClick = React.useCallback(() => {
+    // Use triggerClose to animate, which will call onClose when complete
+    internalRef.current?.triggerClose();
+  }, []);
   const computedStyle = React.useMemo((): React.CSSProperties => {
     const style: React.CSSProperties = { ...modalContentStyle };
 
@@ -147,6 +188,7 @@ export const Modal: React.FC<ModalProps> = ({
 
   return (
     <DialogContainer
+      ref={internalRef}
       visible={visible}
       onClose={onClose}
       position="center"
@@ -169,7 +211,7 @@ export const Modal: React.FC<ModalProps> = ({
           chrome={chrome}
           header={header}
           dismissible={dismissible}
-          onClose={onClose}
+          onClose={handleCloseButtonClick}
           contentStyle={propContentStyle}
         >
           {children}

package/src/modules/dialog/SwipeDialogContainer.tsx

@@ -6,7 +6,7 @@
  * positioning and custom transform animations.
  */
 import * as React from "react";
-import type { DialogContainerProps } from "./types.js";
+import type { DialogContainerProps, DialogContainerHandle } from "./types.js";
 import { useDialogContainer } from "./useDialogContainer.js";
 import { useDialogSwipeInput } from "./useDialogSwipeInput.js";
 import { useDialogTransform } from "./useDialogTransform.js";
@@ -43,13 +43,18 @@ const backdropStyle: React.CSSProperties = {
   willChange: "opacity",
 };
 
+type SwipeDialogContainerProps = DialogContainerProps & {
+  ref?: React.Ref<DialogContainerHandle>;
+};
+
 /**
  * Swipeable dialog container with multi-phase animation.
  *
  * Uses native <dialog> for top layer positioning and custom JS animations
  * for swipe-to-dismiss functionality.
  */
-export const SwipeDialogContainer: React.FC<DialogContainerProps> = ({
+export const SwipeDialogContainer: React.FC<SwipeDialogContainerProps> = ({
+  ref,
   visible,
   onClose,
   children,
@@ -106,6 +111,11 @@ export const SwipeDialogContainer: React.FC<DialogContainerProps> = ({
     onCloseComplete: onClose,
   });
 
+  // Expose triggerClose via ref
+  React.useImperativeHandle(ref, () => ({
+    triggerClose,
+  }), [triggerClose]);
+
   // Handle backdrop click
   const handleBackdropClick = React.useCallback(() => {
     if (!dismissible) {

package/src/modules/dialog/types.ts

@@ -4,6 +4,15 @@
 import type * as React from "react";
 import type { Position } from "../../types";
 
+/**
+ * Handle exposed by DialogContainer via ref.
+ * Allows programmatic control of dialog animations.
+ */
+export type DialogContainerHandle = {
+  /** Trigger the close animation. Returns a promise that resolves when animation completes. */
+  triggerClose: () => Promise<void>;
+};
+
 /**
  * Transition mode for dialog animations
  * - "none": No animation
@@ -68,6 +77,11 @@ export type ModalHeader = {
   showCloseButton?: boolean;
 };
 
+/**
+ * Alias for DialogContainerHandle (used by Modal)
+ */
+export type ModalHandle = DialogContainerHandle;
+
 /**
  * Props for Modal component
  */

package/dist/useAnimationFrame-BZ6D2lMq.cjs

@@ -1,2 +0,0 @@
-"use strict";const V=require("react"),b=require("./useDocumentPointerEvents-DxDSOtip.cjs");function K(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const o=K(V),L={isDown:!1,start:null,current:null,pointerId:null,wasCanceled:!1},z=(t,e)=>({x:t,y:e,timestamp:performance.now()});function H(t){const{enabled:e,primaryOnly:r=!0}=t,[n,s]=o.useState(L),i=o.useCallback(()=>{s(L)},[]),u=b.useEffectEvent(d=>{if(!e||r&&!d.isPrimary||d.pointerType==="mouse"&&d.button!==0)return;const m=z(d.clientX,d.clientY);s({isDown:!0,start:m,current:m,pointerId:d.pointerId,wasCanceled:!1})}),l=b.useEffectEvent(d=>{if(n.pointerId!==d.pointerId)return;const m=z(d.clientX,d.clientY);s(E=>({...E,current:m}))}),a=b.useEffectEvent(()=>{s(L)}),h=b.useEffectEvent(()=>{s({...L,wasCanceled:!0})}),c=n.isDown?e:!1;return b.useDocumentPointerEvents(c,{onMove:l,onUp:a,onCancel:h}),o.useEffect(()=>{!e&&n.isDown&&i()},[e,n.isDown,i]),{state:n,onPointerDown:u,reset:i}}const Z=10,J=(t,e)=>{const r=Math.abs(t),n=Math.abs(e);return r===0&&n===0?null:r>n*1.5?"horizontal":n>r*1.5?"vertical":null};function Q(t){const{tracking:e,lockThreshold:r=Z}=t,[n,s]=o.useState(null),i=o.useCallback(()=>{s(null)},[]);return o.useEffect(()=>{if(!e.isDown){n!==null&&i();return}if(n!==null||!e.start||!e.current)return;const u=e.current.x-e.start.x,l=e.current.y-e.start.y;if(Math.max(Math.abs(u),Math.abs(l))<r)return;const h=J(u,l);h!==null&&s(h)},[e.isDown,e.start,e.current,n,r,i]),{lockedAxis:n,isLocked:n!==null,reset:i}}const W=(t,e,r)=>{const n=r-e;return n<=0?0:t/n},O=t=>t>0?1:t<0?-1:0,$=(...t)=>{const e={},r=[];for(const s of t)Object.assign(e,s.style),s.onPointerDown&&r.push(s.onPointerDown);return{onPointerDown:s=>{for(const i of r)i?.(s)},style:e}};function ee(t,e){return e?t.scrollWidth-t.clientWidth:t.scrollHeight-t.clientHeight}function te(t,e,r,n){let s=t;for(;s!==null&&s!==e;){const i=getComputedStyle(s),u=r==="x",l=u?i.overflowX:i.overflowY;if(l==="scroll"||l==="auto"){const h=ee(s,u);if(h>0){const c=u?s.scrollLeft:s.scrollTop;if(n===-1&&c>1||n===1&&c<h-1)return!0}}s=s.parentElement}return!1}const ne={phase:"idle",displacement:{x:0,y:0},velocity:{x:0,y:0}},G={distanceThreshold:100,velocityThreshold:.5,lockThreshold:10},B=20,R={phase:"idle",displacement:{x:0,y:0},velocity:{x:0,y:0},direction:0},re=150,N=(t,e,r,n,s)=>{const i=r==="horizontal"?t.x:t.y,u=r==="horizontal"?e.x:e.y,l=Math.abs(i),a=Math.abs(u);if(l>=n.distanceThreshold||a>=n.velocityThreshold){const c=O(i);s?.({phase:"ended",displacement:t,velocity:e,direction:c})}};function se(t){const{containerRef:e,axis:r,enabled:n=!0,thresholds:s,onSwipeEnd:i,enableWheel:u=!0,pointerStartFilter:l}=t,a={...G,...s},h=b.useEffectEvent(i),{state:c,onPointerDown:d}=H({enabled:n}),m=o.useCallback(f=>{if(n){if(l){const p=e.current;if(!p||!l(f,p))return}d(f)}},[n,l,e,d]),{lockedAxis:E,isLocked:D}=Q({tracking:c,lockThreshold:a.lockThreshold}),T=o.useRef(null),S=o.useRef(!1);o.useEffect(()=>{S.current=D?E===r:!1},[D,E,r]),o.useEffect(()=>{const f=e.current;if(!f||!n)return;const p=P=>{P.preventDefault()},v=P=>{S.current&&P.preventDefault(),document.addEventListener("touchmove",p,{passive:!1})},w=()=>{document.removeEventListener("touchmove",p)};return document.addEventListener("touchend",w),document.addEventListener("touchcancel",w),f.addEventListener("touchstart",v,{passive:!1}),()=>{f.removeEventListener("touchstart",v),document.removeEventListener("touchend",w),document.removeEventListener("touchcancel",w)}},[e,n]);const[x,k]=o.useState(R),g=o.useRef({x:0,y:0}),y=o.useRef(null),A=o.useRef(!1),C=o.useRef(null),_=o.useCallback(()=>{g.current={x:0,y:0},A.current=!1,C.current=null,k(R)},[]),Y=o.useCallback(()=>{const f={...g.current};N(f,{x:0,y:0},r,a,h),_()},[r,a,h,_]),M=b.useEffectEvent(f=>{if(!n||!u||c.isDown)return;const{deltaX:p,deltaY:v}=f;if(!A.current){const F=Math.abs(p),U=Math.abs(v);(F>=a.lockThreshold||U>=a.lockThreshold)&&(A.current=!0,C.current=F>U?"horizontal":"vertical")}if(A.current&&C.current!==r)return;g.current.x-=p,g.current.y-=v;const w=g.current,P=r==="horizontal"?w.x:w.y;k({phase:"swiping",displacement:{...w},velocity:{x:0,y:0},direction:O(P)}),y.current!==null&&clearTimeout(y.current),y.current=setTimeout(Y,re)});o.useEffect(()=>{const f=e.current;if(!f||!n||!u)return;const p=v=>{v.preventDefault(),M(v)};return f.addEventListener("wheel",p,{passive:!1}),()=>{f.removeEventListener("wheel",p),y.current!==null&&clearTimeout(y.current)}},[e,n,u,M]),o.useEffect(()=>()=>{y.current!==null&&clearTimeout(y.current)},[]);const I=o.useMemo(()=>{if(!c.isDown||!c.start||!c.current)return R;const f=c.current.x-c.start.x,p=c.current.y-c.start.y,v={x:f,y:p},w={x:W(f,c.start.timestamp,c.current.timestamp),y:W(p,c.start.timestamp,c.current.timestamp)};return!D||E!==r?{phase:"tracking",displacement:v,velocity:w,direction:0}:{phase:"swiping",displacement:v,velocity:w,direction:O(r==="horizontal"?f:p)}},[c.isDown,c.start,c.current,D,E,r]);o.useEffect(()=>{I.phase!=="idle"&&(T.current=I)},[I]),o.useEffect(()=>{if(c.isDown)return;const f=T.current;!f||f.phase!=="swiping"&&f.phase!=="tracking"||(T.current=null,!c.wasCanceled&&N(f.displacement,f.velocity,r,a,h))},[c.isDown,c.wasCanceled,r,a,h]);const j=I.phase!=="idle"?I:x,q=o.useMemo(()=>({onPointerDown:m,style:{touchAction:r==="horizontal"?"pan-y pinch-zoom":"pan-x pinch-zoom",userSelect:"none",WebkitUserSelect:"none"}}),[r,m]);return{state:j,containerProps:q}}const oe=t=>t==="left"||t==="right"?"horizontal":"vertical",ce=(t,e,r,n,s)=>{const i=r.getBoundingClientRect();switch(n){case"left":return t>=i.left&&t<=i.left+s;case"right":return t>=i.right-s&&t<=i.right;case"top":return e>=i.top&&e<=i.top+s;case"bottom":return e>=i.bottom-s&&e<=i.bottom}};function ie(t){const{containerRef:e,edge:r,edgeWidth:n=B,enabled:s=!0,thresholds:i,onSwipeEnd:u}=t,l={...G,...i},a=oe(r),[h,c]=o.useState(!1),d=o.useCallback((T,S)=>{const x=ce(T.clientX,T.clientY,S,r,n);return c(x),x},[r,n]),{state:m,containerProps:E}=se({containerRef:e,axis:a,enabled:s,thresholds:l,onSwipeEnd:u,enableWheel:!1,pointerStartFilter:d});return o.useEffect(()=>{m.phase==="idle"&&c(!1)},[m.phase]),{isEdgeGesture:h,state:h?m:R,containerProps:E}}const ue=(t,e,r)=>{const n=e.getBoundingClientRect();return t>=n.left&&t<=n.left+r};function le(t){const{containerRef:e,active:r,preventEdgeBack:n=!0,preventOverscroll:s=!0,edgeWidth:i=B}=t,u=o.useRef(null),l=o.useCallback(()=>{if(!s)return;const c=document.documentElement;u.current===null&&(u.current=c.style.overscrollBehavior),c.style.overscrollBehavior="none"},[s]);o.useEffect(()=>{r||!s||u.current!==null&&(document.documentElement.style.overscrollBehavior=u.current,u.current=null)},[r,s]),o.useEffect(()=>()=>{u.current!==null&&(document.documentElement.style.overscrollBehavior=u.current,u.current=null)},[]);const a=o.useCallback(c=>{if(!n)return;const d=e.current;d&&c.pointerType==="touch"&&ue(c.clientX,d,i)&&(l(),c.preventDefault())},[n,e,i,l]);return{containerProps:o.useMemo(()=>({onPointerDown:n?a:void 0,style:{overscrollBehavior:s?"contain":void 0,WebkitOverflowScrolling:"touch"}}),[s,n,a])}}const X={easeOutExpo:t=>t===1?1:1-Math.pow(2,-10*t)},ae=300;function fe(t){const{duration:e=ae,easing:r=X.easeOutExpo,onFrame:n,onComplete:s}=t,[i,u]=o.useState(!1),l=o.useRef(null),a=o.useRef(null),h=o.useRef(n),c=o.useRef(s);o.useEffect(()=>{h.current=n,c.current=s},[n,s]);const d=o.useCallback(()=>{l.current!==null&&(cancelAnimationFrame(l.current),l.current=null),a.current=null,u(!1)},[]),m=o.useCallback(()=>{d(),u(!0),a.current=null;const E=D=>{a.current===null&&(a.current=D);const T=D-a.current,S=Math.min(T/e,1),x=r(S),k=S>=1,g={progress:S,easedProgress:x,elapsed:T,isComplete:k};h.current?.(g),k?(l.current=null,a.current=null,u(!1),c.current?.()):l.current=requestAnimationFrame(E)};l.current=requestAnimationFrame(E)},[e,r,d]);return o.useEffect(()=>()=>{l.current!==null&&cancelAnimationFrame(l.current)},[]),{isAnimating:i,start:m,cancel:d}}function de(t,e,r){return t+(e-t)*r}exports.IDLE_CONTINUOUS_OPERATION_STATE=ne;exports.IDLE_SWIPE_INPUT_STATE=R;exports.easings=X;exports.interpolate=de;exports.isScrollableInDirection=te;exports.mergeGestureContainerProps=$;exports.useAnimationFrame=fe;exports.useEdgeSwipeInput=ie;exports.useNativeGestureGuard=le;exports.usePointerTracking=H;
-//# sourceMappingURL=useAnimationFrame-BZ6D2lMq.cjs.map