@kestack/web-platform 0.0.0-stage → 0.0.1

package/src/input/gesture/recognizers/swipe/use-swipe.ts

@@ -0,0 +1,224 @@
+import { type MotionValue, useMotionValue } from 'motion/react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { type Direction, Swipe as Rules } from '@kestack/use-gesture';
+import { type Pointers, useGesture } from '../../zones/index.ts';
+
+export type { Direction } from '@kestack/use-gesture';
+export type CommitRule = Rules.CommitRule;
+export type Edge = Rules.Edge;
+export type Fingers = Rules.Fingers;
+export type SwipeCancel = Rules.SwipeCancel;
+export type SwipeRelease = Rules.SwipeRelease;
+
+// The fingers still down, each with how far it moved from where it landed.
+const down = (pointers: Pointers) =>
+  [...pointers.values()]
+    .filter((pointer) => pointer.end === undefined)
+    .map((pointer) => ({ dx: pointer.dx.get(), dy: pointer.dy.get() }));
+
+export type SwipeOptions = {
+  /** Whether it takes the next Gesture: true by default. Read as its first finger lands. */
+  readonly enabled?: boolean;
+  readonly direction: Direction;
+  /** How many fingers: 1 by default. */
+  readonly fingers?: Fingers;
+  /**
+   * Where the first finger must land; anywhere in the zone by default. A touch
+   * that lands there is the Swipe's even over an element that scrolls, and it
+   * takes no touch that lands anywhere else.
+   */
+  readonly from?: Edge;
+  /** What it needs at release to Commit: `{ distance: 80, velocity: 500 }` by default. */
+  readonly commit?: CommitRule;
+  /** The touch's Direction is `direction`, with the right fingers: it is Tracking. */
+  readonly onStart?: () => void;
+  /** It met its CommitRule as its first finger lifted. */
+  readonly onCommit?: (release: SwipeRelease) => void;
+  /** It gave up; `release` is set when that was at a finger lifting. */
+  readonly onCancel?: (reason: SwipeCancel, release?: SwipeRelease) => void;
+};
+
+/**
+ * `possible` from the first finger landing where `from` asks until the
+ * touch's Direction is read, then `tracking` until it Commits or Cancels.
+ */
+export type SwipeState = 'idle' | 'possible' | 'tracking';
+
+export type Swipe = {
+  /** Px moved toward `direction`, never below 0. Reset as the next Gesture lands. */
+  readonly offset: MotionValue<number>;
+  /** `offset` over the CommitRule's `distance`, unclamped; 0 without a `distance`. */
+  readonly progress: MotionValue<number>;
+  /** Px/s toward `direction`, falling to 0 while the fingers rest. */
+  readonly velocity: MotionValue<number>;
+  /** Whether letting go now would Commit. */
+  readonly willCommit: MotionValue<boolean>;
+  readonly state: SwipeState;
+};
+
+type Run = {
+  phase: 'possible' | 'tracking' | 'done';
+  // Whether the touch's Direction is the Swipe's own.
+  locked: boolean;
+  pointers: Pointers;
+  readonly velocity: ReturnType<typeof Rules.createVelocity>;
+  readonly unsubscribes: Array<() => void>;
+  timer?: ReturnType<typeof setInterval>;
+};
+
+// How often velocity is re-read while the fingers rest.
+const TICK = 16;
+
+const useLatest = <T>(value: T) => {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+};
+
+/**
+ * The Swipe Recognizer: fingers moving one way. It wants its own Direction,
+ * or, with `from`, captures touches landing at that edge. It locks once the
+ * touch's Direction is read, follows the fingers while Tracking, and
+ * decides at the first finger lifting, so a two-finger Swipe is judged as
+ * its fingers leave.
+ */
+export function useSwipe(options: SwipeOptions): Swipe {
+  const latest = useLatest(options);
+  const offset = useMotionValue(0);
+  const progress = useMotionValue(0);
+  const velocity = useMotionValue(0);
+  const willCommit = useMotionValue(false);
+  const [state, setState] = useState<SwipeState>('idle');
+  const run = useRef<Run | undefined>(undefined);
+
+  const rule = () => latest.current.commit ?? Rules.DEFAULT_COMMIT;
+
+  const stop = (current: Run) => {
+    current.phase = 'done';
+    clearInterval(current.timer);
+    velocity.set(0);
+    willCommit.set(false);
+    setState('idle');
+  };
+
+  const cancel = (current: Run, reason: SwipeCancel, at?: SwipeRelease) => {
+    stop(current);
+    latest.current.onCancel?.(reason, at);
+  };
+
+  // Velocity and what it means for a Commit, re-read on every move and tick.
+  const measure = (current: Run) => {
+    const speed = current.velocity.at(performance.now(), offset.get());
+    velocity.set(speed);
+    willCommit.set(Rules.commits(rule(), offset.get(), speed));
+  };
+
+  const step = (current: Run) => {
+    const { direction, fingers = 1 } = latest.current;
+    const live = down(current.pointers);
+    const move = Rules.movement(live);
+    if (current.phase === 'possible') {
+      if (!current.locked) return;
+      if (!Rules.fingersMatch(fingers, live.length)) {
+        return cancel(current, 'fingers');
+      }
+      current.phase = 'tracking';
+      current.timer = setInterval(() => measure(current), TICK);
+      setState('tracking');
+      latest.current.onStart?.();
+    }
+    if (current.phase !== 'tracking') return;
+    const value = Math.max(0, Rules.along(direction, move));
+    const { distance } = rule();
+    offset.set(value);
+    progress.set(distance === undefined ? 0 : value / distance);
+    current.velocity.add(performance.now(), value);
+    measure(current);
+  };
+
+  const end = (current: Run) => {
+    for (const unsubscribe of current.unsubscribes) unsubscribe();
+    clearInterval(current.timer);
+    if (run.current === current) run.current = undefined;
+  };
+
+  useEffect(() => () => run.current && end(run.current), []);
+
+  useGesture({
+    enabled: options.enabled !== false,
+    directions: options.from === undefined ? [options.direction] : [],
+    // A Swipe from an edge owns touches that start there, over any scroller.
+    captures: (point) => {
+      const { from } = latest.current;
+      const viewport = { width: innerWidth, height: innerHeight };
+      return from !== undefined && Rules.startsFrom(from, point, viewport);
+    },
+    onStart: (pointers) => {
+      const [first] = pointers.values();
+      const viewport = { width: innerWidth, height: innerHeight };
+      if (
+        first === undefined ||
+        !Rules.startsFrom(latest.current.from, first.start, viewport)
+      ) {
+        return;
+      }
+      offset.set(0);
+      progress.set(0);
+      run.current = {
+        phase: 'possible',
+        locked: false,
+        pointers,
+        velocity: Rules.createVelocity(),
+        unsubscribes: [],
+      };
+      setState('possible');
+    },
+    onDirection: (way) => {
+      const current = run.current;
+      if (current === undefined || current.phase !== 'possible') return;
+      if (way !== latest.current.direction) {
+        return cancel(current, 'direction');
+      }
+      current.locked = true;
+      step(current);
+    },
+    onPointer: (pointer, pointers) => {
+      const current = run.current;
+      if (current === undefined || current.phase === 'done') return;
+      if (pointer.end === undefined) {
+        // Followed once: a Gesture's first finger lands here too.
+        current.pointers = pointers;
+        current.unsubscribes.push(
+          pointer.dx.on('change', () => step(current)),
+          pointer.dy.on('change', () => step(current)),
+        );
+        if (current.phase === 'tracking') cancel(current, 'fingers');
+        return;
+      }
+      if (current.phase !== 'tracking') {
+        current.pointers = pointers;
+        return;
+      }
+      measure(current);
+      const at = Rules.release(offset.get(), velocity.get());
+      if (willCommit.get()) {
+        stop(current);
+        latest.current.onCommit?.(at);
+      } else {
+        cancel(current, 'short', at);
+      }
+    },
+    onEnd: (_pointers, { interrupted }) => {
+      const current = run.current;
+      if (current === undefined) return;
+      if (current.phase !== 'done') {
+        cancel(current, interrupted ? 'interrupted' : 'short');
+      }
+      end(current);
+    },
+  });
+
+  return { offset, progress, velocity, willCommit, state };
+}

package/src/input/gesture/zones/index.ts

@@ -0,0 +1,11 @@
+export { GestureProvider, GestureZone, useGesture } from './zone/index.ts';
+export type {
+  Direction,
+  Directions,
+  GestureEnd,
+  GestureOptions,
+  GestureState,
+  GestureZoneProps,
+  Pointer,
+  Pointers,
+} from './zone/index.ts';

package/src/input/gesture/zones/touch-input/index.ts

@@ -0,0 +1,10 @@
+export { ZONE_GESTURE_ATTRIBUTE } from './native-scroll.ts';
+export type { ZoneGesture } from './native-scroll.ts';
+export {
+  createTouchInput,
+  DOM_ZONES,
+  TRAPPED_ATTRIBUTE,
+  ZONE_SELECTOR,
+  zoneOf,
+} from './touch-input.ts';
+export type { Target, TouchInput } from './touch-input.ts';

package/src/input/gesture/zones/touch-input/native-scroll.ts

@@ -0,0 +1,74 @@
+/**
+ * The attribute any element in the zone decides the zone's hold on touch
+ * with, for itself and what it holds; the nearest one decides. `enabled`:
+ * the zone captures every touch there, even over something that scrolls.
+ * `disabled`: the zone never takes a touch there. Without one, the zone
+ * captures a touch only when a listener takes it.
+ */
+export const ZONE_GESTURE_ATTRIBUTE = 'data-zone-gesture';
+
+/** How the zone treats a touch that lands on an element. */
+export type ZoneGesture = 'enabled' | 'disabled' | 'auto';
+
+const TEXT_ENTRY = 'input, textarea, select, [contenteditable="true"]';
+
+/**
+ * Whether `target` is in text being edited, which keeps its own touch
+ * handling: selecting and caret dragging. A field that isn't focused is
+ * like any other element: a swipe over it is a Gesture, and a tap still
+ * reaches it, to focus it.
+ */
+export const isTextEntry = (target: EventTarget | null) => {
+  if (!(target instanceof Element)) return false;
+  const entry = target.closest(TEXT_ENTRY);
+  return entry !== null && entry.contains(entry.ownerDocument.activeElement);
+};
+
+/** How the zone treats a touch landing on `target`. */
+export const zoneGestureOf = (target: EventTarget | null): ZoneGesture => {
+  if (!(target instanceof Element) || isTextEntry(target)) return 'disabled';
+  const value = target
+    .closest(`[${ZONE_GESTURE_ATTRIBUTE}]`)
+    ?.getAttribute(ZONE_GESTURE_ATTRIBUTE);
+  return value === 'enabled' || value === 'disabled' ? value : 'auto';
+};
+
+const SCROLLS = new Set(['auto', 'scroll', 'overlay']);
+
+// Whether `element` can still scroll to follow a finger moving by dx, dy
+// along its main direction. A finger moving up scrolls the content down.
+const followsFinger = (element: Element, dx: number, dy: number) => {
+  const style = getComputedStyle(element);
+  if (Math.abs(dy) >= Math.abs(dx)) {
+    if (!SCROLLS.has(style.overflowY)) return false;
+    const end = element.scrollHeight - element.clientHeight;
+    return dy < 0 ? element.scrollTop < end - 1 : element.scrollTop > 0;
+  }
+  if (!SCROLLS.has(style.overflowX)) return false;
+  const end = element.scrollWidth - element.clientWidth;
+  const left = Math.abs(element.scrollLeft);
+  return dx < 0 ? left < end - 1 : left > 0;
+};
+
+/**
+ * Whether a Native Scroll keeps a finger that landed on `target` and first
+ * moved by dx, dy: some element from it up to `zone` can still scroll that
+ * way.
+ */
+export const nativeScrollKeeps = (
+  target: EventTarget | null,
+  zone: Element,
+  dx: number,
+  dy: number,
+) => {
+  if (dx === 0 && dy === 0) return false;
+  for (
+    let element = target instanceof Element ? target : null;
+    element !== null;
+    element = element.parentElement
+  ) {
+    if (followsFinger(element, dx, dy)) return true;
+    if (element === zone) return false;
+  }
+  return false;
+};

package/src/input/gesture/zones/touch-input/touch-input.ts

@@ -0,0 +1,322 @@
+import {
+  directionOf,
+  type PointerSample,
+  type PointerSink,
+  type ZoneTree,
+} from '@kestack/use-gesture';
+import {
+  isTextEntry,
+  nativeScrollKeeps,
+  zoneGestureOf,
+} from './native-scroll.ts';
+
+/** How a Gesture Zone's element is marked. */
+export const ZONE_SELECTOR = '[data-slot="gesture-zone"]';
+
+/** Set on a trapped zone: Gestures that start in it go no further up. */
+export const TRAPPED_ATTRIBUTE = 'data-trapped';
+
+/** The innermost Gesture Zone around `target`, if any. */
+export const zoneOf = (target: EventTarget | null | undefined) =>
+  target instanceof Element ? target.closest(ZONE_SELECTOR) : null;
+
+/** A finger on the page: what it landed on is an element, if anything. */
+export type Target = Element | null;
+
+/**
+ * How Gesture Zones nest in the page: each is an element marked
+ * ZONE_SELECTOR, inside the zone around it, Trapped while it has
+ * TRAPPED_ATTRIBUTE.
+ */
+export const DOM_ZONES: ZoneTree<Element, Target> = {
+  zoneOf,
+  parentOf: (zone) => zoneOf(zone.parentElement),
+  trapped: (zone) => zone.hasAttribute(TRAPPED_ATTRIBUTE),
+};
+
+const STYLE_ID = 'kui-gesture-zone';
+
+/**
+ * How far from a side edge, in px, a touch in a zone is kept from the
+ * browser's own edge swipe: back and forward on iOS, in Safari and installed.
+ */
+export const EDGE_GUARD_PX = 24;
+
+// Taps on these must still click, so their touches are left to the browser.
+const INTERACTIVE =
+  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Whether a touch landing at `x` on `target` must be kept from the browser's
+ * edge swipe: it lands in a zone, within EDGE_GUARD_PX of a side edge, on
+ * nothing that is turned off for the zone or must still click.
+ */
+export const guardsEdge = (
+  target: EventTarget | null,
+  x: number,
+  width: number,
+) =>
+  (x <= EDGE_GUARD_PX || x >= width - EDGE_GUARD_PX) &&
+  zoneOf(target) !== null &&
+  zoneGestureOf(target) !== 'disabled' &&
+  !(target instanceof Element && target.closest(INTERACTIVE) !== null);
+
+// The browser decides what a touch may do as the finger lands. A zone lets
+// it pan, so the browser can scroll whatever the zone does not take at the
+// first movement. Nothing in a zone zooms the page.
+const RULES = `${ZONE_SELECTOR} { touch-action: pan-x pan-y; }`;
+
+const installStyle = (doc: Document) => {
+  if (doc.getElementById(STYLE_ID) !== null) return;
+  const style = doc.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = RULES;
+  doc.head.appendChild(style);
+};
+
+const sampleOf = (event: PointerEvent): PointerSample<Target> => ({
+  id: event.pointerId,
+  x: event.clientX,
+  y: event.clientY,
+  t: event.timeStamp,
+  target: event.target instanceof Element ? event.target : null,
+});
+
+// How long a swallowed release waits for its click. Mobile browsers send
+// it a moment after the finger lifts, sometimes after other tasks.
+const CLICK_WAIT_MS = 600;
+
+/**
+ * A release over a link or button that must not also click it. The click
+ * arrives later than the release, so it is swallowed until it comes, the
+ * next finger lands, or CLICK_WAIT_MS passes.
+ */
+const swallowNextClick = (win: Window) => {
+  const stop = () => {
+    win.removeEventListener('click', swallow, { capture: true });
+    win.removeEventListener('pointerdown', stop, { capture: true });
+    win.clearTimeout(timer);
+  };
+  const swallow = (event: Event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    stop();
+  };
+  win.addEventListener('click', swallow, { capture: true });
+  win.addEventListener('pointerdown', stop, { capture: true });
+  const timer = win.setTimeout(stop, CLICK_WAIT_MS);
+};
+
+/**
+ * Feeds every touch and pen pointer on the page to `sink`, for one Gesture
+ * Provider; the mouse is left to the browser. It listens on the window in
+ * the capture phase, so nothing inside a zone can hide a finger from it. Fingers where the zone is disabled, and in text
+ * entry, are left alone. Moves and releases of tracked pointers follow
+ * them anywhere. The browser taking a touch, such as for a Native Scroll or
+ * the system back gesture, or the page going away mid-touch, cancels every
+ * pointer.
+ *
+ * Holding the browser back has to happen on each zone's own element, since
+ * a blocking touch listener on the whole page would make every scroll wait:
+ * `bindZone` adds it. A touch's first movement reads its Direction and
+ * decides who owns it: the zone when a listener takes it, or when two
+ * fingers are down; otherwise the browser, which scrolls, while the Gesture
+ * is cancelled and nothing is tracked until every finger lifts.
+ */
+export const createTouchInput = (win: Window, sink: PointerSink<Target>) => {
+  const doc = win.document;
+  // Each tracked pointer, with whether it is a finger and how to stop
+  // listening on the element it landed on.
+  const tracked = new Map<number, { touch: boolean; unwatch: () => void }>();
+  const untrack = (id: number) => {
+    const pointer = tracked.get(id);
+    if (pointer === undefined) return false;
+    pointer.unwatch();
+    tracked.delete(id);
+    return true;
+  };
+  // Where each finger on the screen landed, until the touch is decided.
+  const landed = new Map<number, { x: number; y: number }>();
+  // Who the fingers on the screen belong to, decided at their first movement.
+  let owner: 'undecided' | 'zone' | 'browser' = 'undecided';
+  // A finger's release must not click: cancel the touch's end too, which
+  // stops the browser's click and mouse events for it altogether.
+  let swallowing = false;
+
+  const onDown = (event: PointerEvent) => {
+    // A Gesture is touch or pen: a mouse drag selects text and never
+    // scrolls, so the browser keeps it.
+    if (event.pointerType === 'mouse') return;
+    if (owner === 'browser' || zoneGestureOf(event.target) === 'disabled') {
+      return;
+    }
+    if (!sink.down(sampleOf(event))) return;
+    // iOS sends a finger's release to the element it landed on, even after
+    // that element has left the page, and from there it never reaches the
+    // window. Listening on the element itself still hears it.
+    const target = event.target;
+    target?.addEventListener('pointerup', onUp as EventListener);
+    target?.addEventListener('pointercancel', onCancel as EventListener);
+    tracked.set(event.pointerId, {
+      touch: event.pointerType === 'touch',
+      unwatch: () => {
+        target?.removeEventListener('pointerup', onUp as EventListener);
+        target?.removeEventListener('pointercancel', onCancel as EventListener);
+      },
+    });
+  };
+  const onMove = (event: PointerEvent) => {
+    if (!tracked.has(event.pointerId)) return;
+    // The browser sends a finger's pointermove before its touchmove: until
+    // that decides, the move only moves.
+    const undecided = owner === 'undecided' && landed.size > 0;
+    sink.move({ ...sampleOf(event), undecided });
+  };
+  const onUp = (event: PointerEvent) => {
+    if (!untrack(event.pointerId)) return;
+    if (!sink.up(sampleOf(event))) return;
+    swallowNextClick(win);
+    swallowing = true;
+  };
+  const onCancel = (event: PointerEvent) => {
+    if (tracked.has(event.pointerId)) onAway();
+  };
+  const onAway = () => {
+    // A copy of the ids, as `untrack` deletes from `tracked`.
+    for (const id of Array.from(tracked.keys())) untrack(id);
+    // Pointer events stamp their time on this clock.
+    sink.cancelAll(performance.now());
+  };
+  const onVisibility = () => {
+    if (doc.visibilityState === 'hidden') onAway();
+  };
+  // A long press opens the callout menu on touch; the app owns touch in a zone.
+  const onContextMenu = (event: Event) => {
+    const pointerType = (event as Partial<PointerEvent>).pointerType;
+    if (
+      pointerType !== 'mouse' &&
+      zoneOf(event.target) !== null &&
+      !isTextEntry(event.target)
+    ) {
+      event.preventDefault();
+    }
+  };
+
+  const onTouchStart = (event: TouchEvent) => {
+    // A swallow meant for a touch whose end came first must not reach this one.
+    swallowing = false;
+    // More fingers tracked than are on the screen: a release went unheard,
+    // so the Gesture under way is stale. End it rather than let the next
+    // touch join it.
+    const fingers = [...tracked.values()].filter((pointer) => pointer.touch);
+    if (event.touches.length < fingers.length) onAway();
+    for (const touch of event.changedTouches) {
+      landed.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
+      // iOS starts its back and forward swipe from here, before any touchmove
+      // the zone could hold back; only a touchstart kept from it stops that.
+      const { clientX: x, clientY: y } = touch;
+      if (
+        event.cancelable &&
+        guardsEdge(touch.target, x, win.innerWidth) &&
+        sink.claimsEdge({ x, y }, x <= EDGE_GUARD_PX ? 'right' : 'left')
+      ) {
+        event.preventDefault();
+      }
+    }
+  };
+  // Who owns a touch, from its first movement; first match wins.
+  const decide = (event: TouchEvent) => {
+    const touches = [...event.touches];
+    const [touch] = touches;
+    const start = touch && landed.get(touch.identifier);
+    const dx = touch && start ? touch.clientX - start.x : 0;
+    const dy = touch && start ? touch.clientY - start.y : 0;
+    const direction = sink.direction() ?? directionOf(dx, dy);
+    const how = sink.pick(direction);
+    const owner = ((): 'zone' | 'browser' => {
+      if (touches.length !== 1 || touch === undefined) return 'zone';
+      const zone = zoneOf(touch.target);
+      if (zone === null) return 'zone';
+      if (zoneGestureOf(touch.target) === 'enabled') return 'zone';
+      if (how === 'captures') return 'zone';
+      if (nativeScrollKeeps(touch.target, zone, dx, dy)) return 'browser';
+      return how === 'directions' ? 'zone' : 'browser';
+    })();
+    // Only a touch the zone keeps has a Direction for its listeners: one the
+    // browser scrolls must not start them moving before it cancels them.
+    if (owner === 'zone') sink.settle(direction);
+    return owner;
+  };
+  // From each zone's element: keeps a Gesture's touch from the browser.
+  const onTouchMove = (event: TouchEvent) => {
+    if (!sink.active()) return;
+    if (owner === 'undecided') {
+      owner = decide(event);
+      if (owner === 'browser') onAway();
+    }
+    if (owner === 'zone' && event.cancelable) event.preventDefault();
+  };
+  const onTouchEnd = (event: TouchEvent) => {
+    if (swallowing && event.type === 'touchend' && event.cancelable) {
+      event.preventDefault();
+    }
+    swallowing = false;
+    for (const touch of event.changedTouches) landed.delete(touch.identifier);
+    if (event.touches.length === 0) {
+      landed.clear();
+      owner = 'undecided';
+    }
+  };
+  // iOS Safari pinch-zooms the page from its own gesture events.
+  const onSafariGesture = (event: Event) => event.preventDefault();
+
+  return {
+    /** Starts listening to the page. */
+    start: () => {
+      installStyle(doc);
+      win.addEventListener('pointerdown', onDown, { capture: true });
+      win.addEventListener('pointermove', onMove, { capture: true });
+      win.addEventListener('pointerup', onUp, { capture: true });
+      win.addEventListener('pointercancel', onCancel, { capture: true });
+      win.addEventListener('contextmenu', onContextMenu, { capture: true });
+      win.addEventListener('touchstart', onTouchStart, {
+        capture: true,
+        passive: false,
+      });
+      win.addEventListener('touchend', onTouchEnd, {
+        capture: true,
+        passive: false,
+      });
+      win.addEventListener('touchcancel', onTouchEnd, { capture: true });
+      win.addEventListener('blur', onAway);
+      doc.addEventListener('visibilitychange', onVisibility);
+    },
+    /** Stops listening, cancelling any Gesture under way. */
+    stop: () => {
+      win.removeEventListener('pointerdown', onDown, { capture: true });
+      win.removeEventListener('pointermove', onMove, { capture: true });
+      win.removeEventListener('pointerup', onUp, { capture: true });
+      win.removeEventListener('pointercancel', onCancel, { capture: true });
+      win.removeEventListener('contextmenu', onContextMenu, { capture: true });
+      win.removeEventListener('touchstart', onTouchStart, { capture: true });
+      win.removeEventListener('touchend', onTouchEnd, { capture: true });
+      win.removeEventListener('touchcancel', onTouchEnd, { capture: true });
+      win.removeEventListener('blur', onAway);
+      doc.removeEventListener('visibilitychange', onVisibility);
+      onAway();
+    },
+    /** Holds the browser back from a zone's element; returns the unbind. */
+    bindZone: (element: Element) => {
+      element.addEventListener('touchmove', onTouchMove as EventListener, {
+        passive: false,
+      });
+      element.addEventListener('gesturestart', onSafariGesture);
+      return () => {
+        element.removeEventListener('touchmove', onTouchMove as EventListener);
+        element.removeEventListener('gesturestart', onSafariGesture);
+      };
+    },
+  };
+};
+
+export type TouchInput = ReturnType<typeof createTouchInput>;

package/src/input/gesture/zones/zone/index.ts

@@ -0,0 +1,11 @@
+export { GestureProvider, GestureZone, useGesture } from './zone.tsx';
+export type {
+  GestureEnd,
+  GestureOptions,
+  GestureState,
+  GestureZoneProps,
+  Pointer,
+  Pointers,
+  Direction,
+  Directions,
+} from './zone.tsx';