@msobiecki/react-marauders-path 1.23.0 → 1.24.1

package/README.md

@@ -2,7 +2,7 @@
 
 [![License](https://img.shields.io/badge/license-%20%20GNU%20GPLv3%20-green.svg)](https://github.com/msobiecki/react-marauders-path/blob/master/LICENSE)
 
-A lightweight, type-safe React library for handling keyboard, wheel, swipe, and drag events. Perfect for games, interactive applications, and input-driven interfaces.
+A lightweight, type-safe React library for handling keyboard, wheel, swipe, drag, and pinch events. Perfect for games, interactive applications, and input-driven interfaces.
 
 ![react-marauders-path](./docs/images/logotype.png)
 
@@ -12,6 +12,7 @@ A lightweight, type-safe React library for handling keyboard, wheel, swipe, and
 - 🎡 **Wheel Event Handling** - Track wheel, delta values with optional `requestAnimationFrame` batching for smoother updates
 - 🖐️ **Swipe Gesture Handling** - Detect directional swipes with configurable distance and velocity with pointer type filtering
 - 🖱️ **Drag Event Handling** - Track movement, delta values, duration, start/end positions with pointer type filtering and optional `requestAnimationFrame` batching for smoother updates
+- 🤏 **Pinch Gesture Handling** - Track two-finger distance, delta, and scale with pointer type filtering and optional `requestAnimationFrame` batching for smoother updates
 
 ## Installation
 
@@ -122,11 +123,25 @@ function MyComponent() {
 }
 ```
 
+### Pinch Event Hook
+
+```typescript
+import { usePinch } from '@msobiecki/react-marauders-path';
+
+function MyComponent() {
+  usePinch((event, data) => {
+    console.log(`Pinch scale: ${data.scale}, delta: ${data.delta}`);
+  });
+
+  return <div>Pinch to zoom</div>;
+}
+```
+
 ## API
 
 ### `useKey(keyEvent, callback, options?)`
 
-Main hook for keyboard event handling.
+Hook for keyboard event handling with support for single keys, combinations, and sequences.
 
 **Parameters:**
 
@@ -256,6 +271,40 @@ interface DragData {
 }
 ```
 
+### `usePinch(callback, options?)`
+
+Hook for handling two-pointer pinch gestures with distance and scale tracking.
+
+**Parameters:**
+
+- `callback: (event: PointerEvent, data: PinchData) => void | boolean` - Called when pinch event occurs
+- `options?: UsePinchOptions` - Optional configuration
+
+**Options:**
+
+```typescript
+interface UsePinchOptions {
+  eventPointerTypes?: Array<"touch" | "mouse" | "pen">; // Default: ["touch"]
+  eventCapture?: boolean; // Default: false
+  eventOnce?: boolean; // Default: false
+  eventStopImmediatePropagation?: boolean; // Default: false
+  threshold?: number; // Default: 0 (px) - Minimum pinch distance change
+  container?: RefObject<HTMLElement>; // Default: window
+  raf?: boolean; // Default: false - Use requestAnimationFrame for batching
+}
+```
+
+**Pinch Data:**
+
+```typescript
+interface PinchData {
+  distance: number; // Current distance between active pointers
+  delta: number; // Distance change since previous pinch update
+  totalDelta: number; // Distance change since pinch start
+  scale: number; // Current scale ratio (distance / startDistance)
+}
+```
+
 ## Advanced Examples
 
 ### Using Options for Event Type and Propagation Control
@@ -370,7 +419,6 @@ npm run lint
 - 🚧 **`useTap`** – single tap / click
 - 🚧 **`useDoubleTap`** – quick double tap
 - 🚧 **`usePress`** – press and hold (longPress)
-- 🚧 **`usePinch`** – two-finger pinch / zoom
 
 ### Pointer / Mouse Hooks (Unified)
 

package/dist/index.es.d.ts

@@ -0,0 +1,276 @@
+import { RefObject } from 'react';
+
+export declare interface CombinationActiveKey {
+    pressedAt: number;
+    releasedAt?: number;
+}
+
+export declare interface CombinationState {
+    activeKeys: Map<Key, CombinationActiveKey>;
+}
+
+export declare interface DragData {
+    deltaX: number;
+    deltaY: number;
+    movementX: number;
+    movementY: number;
+    duration: number;
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+}
+
+export declare type DragEventPointerType = (typeof DragEventPointerTypes)[keyof typeof DragEventPointerTypes];
+
+export declare const DragEventPointerTypes: {
+    readonly Touch: "touch";
+    readonly Mouse: "mouse";
+    readonly Pen: "pen";
+};
+
+export declare interface DragOptions {
+    eventPointerTypes: DragEventPointerType[];
+    eventCapture: boolean;
+    eventOnce: boolean;
+    eventStopImmediatePropagation: boolean;
+    threshold: number;
+    container: {
+        current: HTMLElement | null;
+    };
+    raf: boolean;
+}
+
+export declare interface DragState {
+    startX: number;
+    startY: number;
+    lastX: number;
+    lastY: number;
+    startTime: number;
+    active: boolean;
+}
+
+export declare type Key = string;
+
+export declare type KeyChord = (Key | Key[])[];
+
+export declare type KeyEvent = Key | Key[];
+
+export declare type KeyEventType = (typeof KeyEventTypes)[keyof typeof KeyEventTypes];
+
+export declare const KeyEventTypes: {
+    readonly KeyUp: "keyup";
+    readonly KeyDown: "keydown";
+};
+
+export declare interface KeyOptions {
+    eventType: KeyEventType;
+    eventRepeat: boolean;
+    eventCapture: boolean;
+    eventOnce: boolean;
+    eventStopImmediatePropagation: boolean;
+    sequenceThreshold: number;
+    combinationThreshold: number;
+    container: RefObject<HTMLElement | null>;
+}
+
+export declare interface PinchData {
+    distance: number;
+    delta: number;
+    totalDelta: number;
+    scale: number;
+}
+
+export declare type PinchEventPointerType = (typeof PinchEventPointerTypes)[keyof typeof PinchEventPointerTypes];
+
+export declare const PinchEventPointerTypes: {
+    readonly Touch: "touch";
+    readonly Mouse: "mouse";
+    readonly Pen: "pen";
+};
+
+export declare interface PinchOptions {
+    eventPointerTypes: PinchEventPointerType[];
+    eventCapture: boolean;
+    eventOnce: boolean;
+    eventStopImmediatePropagation: boolean;
+    threshold: number;
+    container: {
+        current: HTMLElement | null;
+    };
+    raf: boolean;
+}
+
+export declare interface PinchState {
+    pointers: Map<number, PointerEvent>;
+    startDistance: number;
+    lastDistance: number;
+    active: boolean;
+}
+
+export declare interface SequenceState {
+    key: Key;
+    chord: KeyChord;
+    index: number;
+    sequenceTimeout: ReturnType<typeof setTimeout> | null;
+}
+
+export declare interface SwipeData {
+    deltaX: number;
+    deltaY: number;
+    velocity: number;
+    duration: number;
+}
+
+export declare type SwipeDirection = (typeof SwipeDirections)[keyof typeof SwipeDirections];
+
+export declare const SwipeDirections: {
+    readonly Left: "left";
+    readonly Right: "right";
+    readonly Up: "up";
+    readonly Down: "down";
+    readonly Horizontal: "horizontal";
+    readonly Vertical: "vertical";
+    readonly Both: "both";
+};
+
+export declare type SwipeEventPointerType = (typeof SwipeEventPointerTypes)[keyof typeof SwipeEventPointerTypes];
+
+export declare const SwipeEventPointerTypes: {
+    readonly Touch: "touch";
+    readonly Mouse: "mouse";
+    readonly Pen: "pen";
+};
+
+export declare interface SwipeOptions {
+    eventPointerTypes: SwipeEventPointerType[];
+    eventCapture: boolean;
+    eventOnce: boolean;
+    eventStopImmediatePropagation: boolean;
+    threshold: number;
+    velocity: number;
+    container: {
+        current: HTMLElement | null;
+    };
+}
+
+export declare interface SwipeState {
+    startX: number;
+    startY: number;
+    startTime: number;
+    active: boolean;
+}
+
+export declare const useDrag: (dragCallback: UseDragCallback, options?: UseDragOptions) => void;
+
+export declare type UseDragCallback = ((event: PointerEvent, data: DragData) => boolean) | ((event: PointerEvent, data: DragData) => void);
+
+export declare type UseDragOptions = Partial<DragOptions>;
+
+/**
+ * React hook for handling keyboard events with support for key sequences and combinations.
+ *
+ * Enables listening for single key presses, key combinations, and sequential key presses.
+ * Supports customizable options like event type, repeat handling, and one-time listeners.
+ *
+ * @template T - The callback function type
+ * @param {UseKeySchema} key - Single key, combination, sequence, or array of patterns to listen for
+ * @param {UseKeyCallback} keyCallback - Callback function invoked when key pattern matches
+ * @param {UseKeyOptions} [options] - Configuration options for the hook
+ * @param {KeyEventType} [options.eventType=KeyEventTypes.KeyUp] - Type of keyboard event ('keydown' or 'keyup')
+ * @param {boolean} [options.eventRepeat=false] - Allow repeated key presses to trigger callback
+ * @param {boolean} [options.eventCapture=false] - Use event capture phase instead of bubbling
+ * @param {boolean} [options.eventOnce=false] - Trigger callback only once
+ * @param {boolean} [options.eventStopImmediatePropagation=false] - Stop immediate propagation
+ * @param {number} [options.sequenceThreshold=1000] - Timeout in ms between sequence keys
+ * @param {number} [options.combinationThreshold=200] - Timeout in ms between combination keys
+ * @param {RefObject<HTMLElement>} [options.container] - DOM element to attach listener to (default: window)
+ *
+ * @example
+ * // Single key schema
+ * useKey('a', (event, key) => console.log(`Pressed ${key}`));
+ *
+ * @example
+ * // Multiple patterns of single key schema
+ * useKey(['a', 'b', 'c'], (event, key) => console.log(`Pressed ${key}`));
+ *
+ * @example
+ * // Combination key schema
+ * useKey('a+b', (event, key) => {
+ *   console.log(`Pressed ${key}`);
+ * });
+ *
+ * @example
+ * // Multiple patterns of combination key schema
+ * useKey(['a+b', 'c+d'], (event, key) => {
+ *   console.log(`Pressed ${key}`);
+ * });
+ *
+ * @example
+ * // Sequential key schema
+ * useKey('ArrowUp ArrowUp ArrowDown ArrowDown', (event, key) => {
+ *   console.log(`Pressed ${key}`);
+ * });
+ *
+ * @example
+ * // Multiple patterns of sequential key schema
+ * useKey(['ArrowUp ArrowUp ArrowDown ArrowDown', 'ArrowLeft ArrowRight'], (event, key) => {
+ *   console.log(`Pressed ${key}`);
+ * });
+ *
+ * @example
+ * // Using options to listen for a key on keydown event and stop propagation
+ * useKey('Any', handleSubmit, {
+ *   eventType: KeyEventTypes.KeyDown,
+ *   eventStopImmediatePropagation: true,
+ *   container: inputRef
+ * });
+ *
+ */
+export declare const useKey: (key: UseKeySchema, keyCallback: UseKeyCallback, options?: UseKeyOptions) => void;
+
+export declare type UseKeyCallback = ((event: KeyboardEvent, key: Key, ...properties: unknown[]) => boolean) | ((event: KeyboardEvent, key: Key, ...properties: unknown[]) => void);
+
+export declare type UseKeyOptions = Partial<KeyOptions>;
+
+export declare type UseKeySchema = KeyEvent;
+
+export declare const usePinch: (pinchCallback: UsePinchCallback, options?: UsePinchOptions) => void;
+
+export declare type UsePinchCallback = ((event: PointerEvent, data: PinchData) => boolean) | ((event: PointerEvent, data: PinchData) => void);
+
+export declare type UsePinchOptions = Partial<PinchOptions>;
+
+export declare const useSwipe: (swipe: UseSwipeSchema, swipeCallback: UseSwipeCallback, options?: UseSwipeOptions) => void;
+
+export declare type UseSwipeCallback = ((event: PointerEvent, direction: SwipeDirection, data: SwipeData, ...properties: unknown[]) => boolean) | ((event: PointerEvent, direction: SwipeDirection, data: SwipeData, ...properties: unknown[]) => void);
+
+export declare type UseSwipeOptions = Partial<SwipeOptions>;
+
+export declare type UseSwipeSchema = SwipeDirection | SwipeDirection[];
+
+export declare const useWheel: (wheelCallback: UseWheelCallback, options?: UseWheelOptions) => void;
+
+export declare type UseWheelCallback = ((event: WheelEvent, delta: WheelData, ...properties: unknown[]) => void) | ((event: WheelEvent, delta: WheelData, ...properties: unknown[]) => boolean);
+
+export declare type UseWheelOptions = Partial<WheelOptions>;
+
+export declare interface WheelData {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+    deltaMode: number;
+}
+
+export declare interface WheelOptions {
+    eventPassive: boolean;
+    eventCapture: boolean;
+    eventOnce: boolean;
+    eventStopImmediatePropagation: boolean;
+    container: {
+        current: HTMLElement | null;
+    };
+    raf: boolean;
+}
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,761 @@
+import { useRef as E, useCallback as u, useEffect as x } from "react";
+const k = (n, s, c, r) => {
+  r.stopImmediate && n.stopImmediatePropagation(), c(n, s) && n.preventDefault(), r.once && r.onOnce?.();
+}, Z = {
+  eventPointerTypes: ["touch", "mouse", "pen"],
+  eventCapture: !1,
+  eventOnce: !1,
+  eventStopImmediatePropagation: !1,
+  threshold: 0,
+  container: { current: null },
+  raf: !1
+}, ie = (n, s = {}) => {
+  const {
+    eventPointerTypes: c,
+    eventCapture: r,
+    eventOnce: a,
+    eventStopImmediatePropagation: p,
+    threshold: f,
+    container: R,
+    raf: O
+  } = { ...Z, ...s }, T = E(null), m = E(null), y = E(null), h = E(null), A = E(null), d = E({
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    lastY: 0,
+    startTime: 0,
+    active: !1
+  }), S = u(() => {
+    m.current?.abort();
+  }, []), L = u(() => {
+    y.current = null;
+    const e = h.current, t = A.current;
+    !e || !t || (k(t, e, n, {
+      stopImmediate: p,
+      once: a,
+      onOnce: () => {
+        S();
+      }
+    }), h.current = null, A.current = null);
+  }, [n, p, a, S]), g = u(
+    (e) => {
+      e.isPrimary && c.includes(e.pointerType) && (d.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        startTime: Date.now(),
+        active: !0
+      });
+    },
+    [c]
+  ), Y = u(
+    (e) => {
+      const t = d.current;
+      if (!t.active || !e.isPrimary || !c.includes(e.pointerType))
+        return;
+      const D = e.clientX - t.startX, P = e.clientY - t.startY, v = e.clientX - t.lastX, M = e.clientY - t.lastY;
+      if (Math.hypot(D, P) < f) return;
+      const i = Date.now() - t.startTime, l = {
+        deltaX: D,
+        deltaY: P,
+        movementX: v,
+        movementY: M,
+        duration: i,
+        startX: t.startX,
+        startY: t.startY,
+        endX: e.clientX,
+        endY: e.clientY
+      };
+      if (t.lastX = e.clientX, t.lastY = e.clientY, !O) {
+        k(e, l, n, {
+          stopImmediate: p,
+          once: a,
+          onOnce: () => {
+            S();
+          }
+        });
+        return;
+      }
+      h.current = l, A.current = e, y.current === null && (y.current = requestAnimationFrame(L));
+    },
+    [
+      c,
+      f,
+      O,
+      n,
+      p,
+      a,
+      S,
+      L
+    ]
+  ), X = u(
+    (e) => {
+      e.isPrimary && c.includes(e.pointerType) && (d.current.active = !1);
+    },
+    [c]
+  ), K = u(() => {
+    d.current.active = !1;
+  }, []);
+  x(() => {
+    T.current = R?.current ?? globalThis, m.current = new AbortController();
+    const e = (v) => g(v), t = (v) => Y(v), D = (v) => X(v), P = () => K();
+    return T.current.addEventListener(
+      "pointerdown",
+      e,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), T.current.addEventListener(
+      "pointermove",
+      t,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), T.current.addEventListener("pointerup", D, {
+      capture: r,
+      signal: m.current.signal
+    }), T.current.addEventListener(
+      "pointercancel",
+      P,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), () => {
+      m.current?.abort(), d.current.active = !1, y.current !== null && cancelAnimationFrame(y.current);
+    };
+  }, [
+    R,
+    r,
+    g,
+    Y,
+    X,
+    K
+  ]);
+}, ue = {
+  Touch: "touch",
+  Mouse: "mouse",
+  Pen: "pen"
+}, F = {
+  KeyUp: "keyup",
+  KeyDown: "keydown"
+}, U = {
+  ENTER: "Enter",
+  ESC: "Escape",
+  ESCAPE: "Escape",
+  SPACE: "Space",
+  TAB: "Tab",
+  SHIFT: "Shift",
+  CONTROL: "Control",
+  CTRL: "Control",
+  ALT: "Alt",
+  META: "Meta",
+  ARROWUP: "ArrowUp",
+  ARROWDOWN: "ArrowDown",
+  ARROWLEFT: "ArrowLeft",
+  ARROWRIGHT: "ArrowRight",
+  BACKSPACE: "Backspace",
+  DELETE: "Delete",
+  DEL: "Delete",
+  INSERT: "Insert",
+  HOME: "Home",
+  END: "End",
+  PAGEUP: "PageUp",
+  PAGEDOWN: "PageDown",
+  CONTEXTMENU: "ContextMenu",
+  CAPSLOCK: "CapsLock",
+  NUMLOCK: "NumLock",
+  SCROLLLOCK: "ScrollLock",
+  ANY: "Any"
+  // Special key to match any key in sequences
+}, _ = (n) => {
+  if (!n)
+    return n;
+  const s = n.trim(), c = s.toUpperCase();
+  return c in U ? U[c] : s.length === 1 ? s.toLowerCase() : s[0].toUpperCase() + s.slice(1).toLowerCase();
+}, J = (n) => n.split(" ").filter(Boolean).map(
+  (s) => s.split("+").map((c) => _(c)).join("+")
+).join(" "), Q = (n) => (Array.isArray(n) ? n : [n]).map((c) => {
+  const r = J(c), p = r.split(" ").filter((f) => f.length > 0).map(
+    (f) => f.includes("+") ? f.split("+") : f
+  );
+  return {
+    key: r,
+    chord: p,
+    index: 0,
+    sequenceTimeout: null
+  };
+}), ee = (n, s) => {
+  const c = { ...n, index: 0, sequenceTimeout: null };
+  return n.sequenceTimeout && clearTimeout(n.sequenceTimeout), s.map(
+    (r) => r === n ? c : r
+  );
+}, B = (n, s, c, r) => {
+  const a = {
+    ...n,
+    index: n.index + 1,
+    sequenceTimeout: n.sequenceTimeout
+  };
+  c && (a.sequenceTimeout && clearTimeout(a.sequenceTimeout), a.sequenceTimeout = setTimeout(
+    () => r(a),
+    c
+  ));
+  const p = s.map(
+    (f) => f === n ? a : f
+  );
+  return [a, p];
+}, q = (n, s, c, r) => {
+  r.stopImmediate && n.stopImmediatePropagation(), c(n, s) && n.preventDefault(), r.once && r.onOnce?.();
+}, te = (n, s) => !(!s.repeat && n.repeat), $ = {
+  eventType: F.KeyUp,
+  eventRepeat: !1,
+  eventCapture: !1,
+  eventOnce: !1,
+  eventStopImmediatePropagation: !1,
+  sequenceThreshold: 1e3,
+  combinationThreshold: 200,
+  container: { current: null }
+}, le = (n, s, c = $) => {
+  const {
+    eventType: r,
+    eventRepeat: a,
+    eventCapture: p,
+    eventOnce: f,
+    eventStopImmediatePropagation: R,
+    sequenceThreshold: O,
+    combinationThreshold: T,
+    container: m
+  } = { ...$, ...c }, y = E(null), h = E(null), A = E({
+    activeKeys: /* @__PURE__ */ new Map()
+  }), d = E([]), S = u(() => {
+    h.current && h.current.abort();
+  }, []), L = u(() => {
+    A.current.activeKeys.clear();
+  }, []), g = u((o) => {
+    d.current = ee(
+      o,
+      d.current
+    );
+  }, []), Y = u(
+    (o) => te(o, {
+      repeat: a
+    }),
+    [a]
+  ), X = u((o) => {
+    const i = o.key === " " ? U.SPACE : o.key;
+    A.current.activeKeys.set(i, {
+      pressedAt: Date.now()
+    });
+  }, []), K = u((o) => {
+    const i = o.key === " " ? U.SPACE : o.key, l = A.current.activeKeys.get(i);
+    l && (l.releasedAt = Date.now());
+  }, []), e = u(() => {
+    const o = Date.now(), i = A.current;
+    [...i.activeKeys.entries()].forEach(([l, w]) => {
+      r === F.KeyDown ? w.releasedAt && i.activeKeys.delete(l) : w.releasedAt && o - w.releasedAt > T && i.activeKeys.delete(l);
+    });
+  }, [r, T]), t = u(
+    (o, i) => {
+      if (r === F.KeyDown)
+        return i.size === o.length && o.every((l) => l === U.ANY ? i.size > 0 : i.has(l));
+      if (r === F.KeyUp) {
+        const l = o.map((C) => {
+          if (C === U.ANY) {
+            const H = [...i.entries()].at(-1);
+            return H ? H[1] : void 0;
+          }
+          return i.get(C);
+        });
+        if (l.some((C) => !C?.releasedAt))
+          return !1;
+        const w = l.map((C) => C?.pressedAt).filter((C) => C !== void 0), I = l.map((C) => C?.releasedAt).filter((C) => C !== void 0), N = Math.min(...I), W = Math.max(...I);
+        return !(Math.max(...w) > N || W - N > T);
+      }
+      return !1;
+    },
+    [r, T]
+  ), D = u(
+    (o, i) => {
+      const l = i.chord[0];
+      if (Array.isArray(l)) {
+        const { activeKeys: I } = A.current;
+        if (!t(l, I))
+          return;
+        q(o, i.key, s, {
+          stopImmediate: R,
+          once: f,
+          onOnce: () => {
+            S();
+          }
+        });
+        return;
+      }
+      const w = o.key === " " ? U.SPACE : o.key;
+      l !== U.ANY && l !== w || q(o, i.key, s, {
+        stopImmediate: R,
+        once: f,
+        onOnce: () => {
+          S();
+        }
+      });
+    },
+    [
+      R,
+      f,
+      s,
+      t,
+      S
+    ]
+  ), P = u(
+    (o, i) => {
+      const l = i.chord[i.index];
+      if (Array.isArray(l)) {
+        const { activeKeys: W } = A.current;
+        if (!t(l, W))
+          return;
+        const [z, C] = B(
+          i,
+          d.current,
+          O,
+          g
+        );
+        d.current = C, z.index === z.chord.length && (q(o, z.key, s, {
+          stopImmediate: R,
+          once: f,
+          onOnce: () => {
+            S();
+          }
+        }), g(z));
+        return;
+      }
+      const w = o.key === " " ? U.SPACE : o.key;
+      if (l !== U.ANY && l !== w) {
+        g(i);
+        return;
+      }
+      const [I, N] = B(
+        i,
+        d.current,
+        O,
+        g
+      );
+      d.current = N, I.index === I.chord.length && (q(o, I.key, s, {
+        stopImmediate: R,
+        once: f,
+        onOnce: () => {
+          S();
+        }
+      }), g(I));
+    },
+    [
+      f,
+      R,
+      O,
+      s,
+      g,
+      t,
+      S
+    ]
+  ), v = u(
+    (o) => {
+      d.current.forEach((i) => {
+        i.chord.length === 1 ? D(o, i) : P(o, i);
+      });
+    },
+    [D, P]
+  ), M = u(
+    (o) => {
+      Y(o) && (e(), v(o));
+    },
+    [Y, e, v]
+  );
+  x(() => {
+    d.current = Q(n);
+  }, [n]), x(() => {
+    y.current = m?.current ?? globalThis, h.current = new AbortController();
+    const o = (w) => X(w);
+    y.current.addEventListener("keydown", o, {
+      capture: p,
+      signal: h.current.signal
+    });
+    const i = (w) => K(w);
+    y.current.addEventListener("keyup", i, {
+      capture: p,
+      signal: h.current.signal
+    });
+    const l = (w) => M(w);
+    return y.current.addEventListener(r, l, {
+      capture: p,
+      signal: h.current.signal
+    }), () => {
+      h.current?.abort(), L(), d.current.forEach((w) => g(w));
+    };
+  }, [
+    r,
+    p,
+    m,
+    X,
+    K,
+    M,
+    L,
+    g
+  ]);
+}, G = (n, s, c, r) => {
+  r.stopImmediate && n.stopImmediatePropagation(), c(n, s) && n.preventDefault(), r.once && r.onOnce?.();
+}, ne = {
+  eventPointerTypes: ["touch"],
+  eventCapture: !1,
+  eventOnce: !1,
+  eventStopImmediatePropagation: !1,
+  threshold: 0,
+  container: { current: null },
+  raf: !1
+}, de = (n, s = {}) => {
+  const {
+    eventPointerTypes: c,
+    eventCapture: r,
+    eventOnce: a,
+    eventStopImmediatePropagation: p,
+    threshold: f,
+    container: R,
+    raf: O
+  } = { ...ne, ...s }, T = E(null), m = E(null), y = E(null), h = E(null), A = E(null), d = E({
+    pointers: /* @__PURE__ */ new Map(),
+    startDistance: 0,
+    lastDistance: 0,
+    active: !1
+  }), S = u(() => {
+    m.current?.abort();
+  }, []), L = u(() => {
+    y.current = null;
+    const e = h.current, t = A.current;
+    !e || !t || (G(t, e, n, {
+      stopImmediate: p,
+      once: a,
+      onOnce: () => S()
+    }), h.current = null, A.current = null);
+  }, [
+    n,
+    p,
+    a,
+    S
+  ]), g = u(
+    (e) => {
+      if (!c.includes(e.pointerType))
+        return;
+      const t = d.current;
+      if (t.pointers.set(e.pointerId, e), t.pointers.size === 2) {
+        const [D, P] = [...t.pointers.values()], v = P.clientX - D.clientX, M = P.clientY - D.clientY, o = Math.hypot(v, M);
+        t.startDistance = o, t.lastDistance = o, t.active = !0;
+      }
+    },
+    [c]
+  ), Y = u(
+    (e) => {
+      const t = d.current;
+      if (!t.active || !t.pointers.has(e.pointerId) || (t.pointers.set(e.pointerId, e), t.pointers.size < 2)) return;
+      const [D, P] = [...t.pointers.values()], v = P.clientX - D.clientX, M = P.clientY - D.clientY, o = Math.hypot(v, M), i = o - t.lastDistance, l = o - t.startDistance;
+      if (Math.abs(l) < f) return;
+      const w = o / t.startDistance, I = {
+        distance: o,
+        delta: i,
+        totalDelta: l,
+        scale: w
+      };
+      if (t.lastDistance = o, !O) {
+        G(e, I, n, {
+          stopImmediate: p,
+          once: a,
+          onOnce: () => S()
+        });
+        return;
+      }
+      h.current = I, A.current = e, y.current === null && (y.current = requestAnimationFrame(L));
+    },
+    [
+      f,
+      O,
+      n,
+      p,
+      a,
+      S,
+      L
+    ]
+  ), X = u((e) => {
+    const t = d.current;
+    t.pointers.delete(e.pointerId), t.pointers.size < 2 && (t.active = !1, t.startDistance = 0, t.lastDistance = 0);
+  }, []), K = u((e) => {
+    const t = d.current;
+    t.pointers.delete(e.pointerId), t.active = !1;
+  }, []);
+  x(() => {
+    T.current = R?.current ?? globalThis, m.current = new AbortController();
+    const e = (v) => g(v), t = (v) => Y(v), D = (v) => X(v), P = (v) => K(v);
+    return T.current.addEventListener(
+      "pointerdown",
+      e,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), T.current.addEventListener(
+      "pointermove",
+      t,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), T.current.addEventListener("pointerup", D, {
+      capture: r,
+      signal: m.current.signal
+    }), T.current.addEventListener(
+      "pointercancel",
+      P,
+      {
+        capture: r,
+        signal: m.current.signal
+      }
+    ), () => {
+      m.current?.abort(), d.current.active = !1, d.current.pointers.clear(), y.current !== null && cancelAnimationFrame(y.current);
+    };
+  }, [
+    R,
+    r,
+    g,
+    Y,
+    X,
+    K
+  ]);
+}, pe = {
+  Touch: "touch",
+  Mouse: "mouse",
+  Pen: "pen"
+}, b = {
+  Left: "left",
+  Right: "right",
+  Up: "up",
+  Down: "down",
+  Horizontal: "horizontal",
+  Vertical: "vertical",
+  Both: "both"
+}, fe = {
+  Touch: "touch",
+  Mouse: "mouse",
+  Pen: "pen"
+}, re = (n) => Array.isArray(n) ? n : [n], oe = (n, s, c, r, a) => {
+  a.stopImmediate && n.stopImmediatePropagation(), r(n, s, c) && n.preventDefault(), a.once && a.onOnce?.();
+}, se = {
+  eventPointerTypes: ["touch", "mouse", "pen"],
+  eventCapture: !1,
+  eventOnce: !1,
+  eventStopImmediatePropagation: !1,
+  threshold: 50,
+  velocity: 0.3,
+  container: { current: null }
+}, me = (n, s, c = {}) => {
+  const {
+    eventPointerTypes: r,
+    eventCapture: a,
+    eventOnce: p,
+    eventStopImmediatePropagation: f,
+    threshold: R,
+    velocity: O,
+    container: T
+  } = { ...se, ...c }, m = E([]), y = E(null), h = E(null), A = E({
+    startX: 0,
+    startY: 0,
+    startTime: 0,
+    active: !1
+  }), d = u(() => {
+    h.current?.abort();
+  }, []), S = u(
+    (e, t) => {
+      const D = Math.abs(e), P = Math.abs(t);
+      return D > P ? e > 0 ? b.Right : b.Left : t > 0 ? b.Down : b.Up;
+    },
+    []
+  ), L = u((e) => {
+    const t = m.current;
+    return t.includes(b.Both) || t.includes(b.Horizontal) && (e === b.Left || e === b.Right) || t.includes(b.Vertical) && (e === b.Up || e === b.Down) ? !0 : t.includes(e);
+  }, []), g = u(
+    (e) => {
+      e.isPrimary && r.includes(e.pointerType) && (A.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startTime: Date.now(),
+        active: !0
+      });
+    },
+    [r]
+  ), Y = u(
+    (e) => {
+      const t = A.current;
+      if (!t.active)
+        return;
+      t.active = !1;
+      const D = Date.now() - t.startTime;
+      if (D === 0)
+        return;
+      const P = e.clientX - t.startX, v = e.clientY - t.startY, M = Math.hypot(P, v), o = M / D;
+      if (M < R || o < O)
+        return;
+      const i = S(P, v);
+      if (!L(i))
+        return;
+      oe(e, i, {
+        deltaX: P,
+        deltaY: v,
+        velocity: o,
+        duration: D
+      }, s, {
+        stopImmediate: f,
+        once: p,
+        onOnce: () => {
+          d();
+        }
+      });
+    },
+    [
+      R,
+      O,
+      S,
+      L,
+      s,
+      p,
+      f,
+      d
+    ]
+  ), X = u(
+    (e) => {
+      e.isPrimary && r.includes(e.pointerType) && Y(e);
+    },
+    [Y, r]
+  ), K = u(() => {
+    A.current.active = !1;
+  }, []);
+  x(() => {
+    m.current = re(n);
+  }, [n]), x(() => {
+    y.current = T?.current ?? globalThis, h.current = new AbortController();
+    const e = (P) => g(P);
+    y.current.addEventListener(
+      "pointerdown",
+      e,
+      {
+        capture: a,
+        signal: h.current.signal
+      }
+    );
+    const t = (P) => X(P);
+    y.current.addEventListener("pointerup", t, {
+      capture: a,
+      signal: h.current.signal
+    });
+    const D = () => K();
+    return y.current.addEventListener(
+      "pointercancel",
+      D,
+      {
+        capture: a,
+        signal: h.current.signal
+      }
+    ), () => {
+      h.current?.abort(), A.current.active = !1;
+    };
+  }, [
+    T,
+    a,
+    g,
+    X,
+    K
+  ]);
+}, V = (n, s, c, r) => {
+  r.stopImmediate && n.stopImmediatePropagation(), c(n, s) && n.preventDefault(), r.once && r.onOnce?.();
+}, j = {
+  eventPassive: !0,
+  eventCapture: !1,
+  eventOnce: !1,
+  eventStopImmediatePropagation: !1,
+  container: { current: null },
+  raf: !1
+}, he = (n, s = j) => {
+  const {
+    eventPassive: c,
+    eventCapture: r,
+    eventOnce: a,
+    eventStopImmediatePropagation: p,
+    container: f,
+    raf: R
+  } = { ...j, ...s }, O = E(null), T = E(null), m = E(null), y = E(null), h = E(null), A = u(() => {
+    T.current?.abort();
+  }, []), d = u(() => {
+    m.current = null;
+    const L = y.current, g = h.current;
+    !L || !g || (V(g, L, n, {
+      stopImmediate: p,
+      once: a,
+      onOnce: () => {
+        A();
+      }
+    }), y.current = null, h.current = null);
+  }, [
+    n,
+    p,
+    a,
+    A
+  ]), S = u(
+    (L) => {
+      const g = {
+        deltaX: L.deltaX,
+        deltaY: L.deltaY,
+        deltaZ: L.deltaZ,
+        deltaMode: L.deltaMode
+      };
+      if (!R) {
+        V(L, g, n, {
+          stopImmediate: p,
+          once: a,
+          onOnce: () => {
+            A();
+          }
+        });
+        return;
+      }
+      y.current = g, h.current = L, m.current === null && (m.current = requestAnimationFrame(d));
+    },
+    [
+      R,
+      n,
+      p,
+      a,
+      A,
+      d
+    ]
+  );
+  x(() => {
+    O.current = f?.current ?? globalThis, T.current = new AbortController();
+    const L = (g) => S(g);
+    return O.current.addEventListener("wheel", L, {
+      passive: c,
+      capture: r,
+      signal: T.current.signal
+    }), () => {
+      T.current?.abort(), m.current !== null && cancelAnimationFrame(m.current);
+    };
+  }, [f, c, r, S]);
+};
+export {
+  ue as DragEventPointerTypes,
+  F as KeyEventTypes,
+  pe as PinchEventPointerTypes,
+  b as SwipeDirections,
+  fe as SwipeEventPointerTypes,
+  ie as useDrag,
+  le as useKey,
+  de as usePinch,
+  me as useSwipe,
+  he as useWheel
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@msobiecki/react-marauders-path",
-  "version": "1.23.0",
+  "version": "1.24.1",
   "type": "module",
   "engines": {
     "node": ">=22.17.1"