@leavepulse/ui 0.93.3 → 0.94.0

package/src/components/LpRangeCalendar.vue

@@ -24,6 +24,7 @@ export type RangeChange = { via: "pick" | "drag" | "keyboard" }
  * "keyboard"), so a popover around the calendar can stay open while the user
  * fine-tunes instead of closing on the first nudge.
  */
+import { HOLD_TO_DRAG_MS, TOUCH_SLOP } from "../composables/gesture"
 import { type DateValue, getLocalTimeZone, today } from "@internationalized/date"
 import {
   type DateRange as RekaRange,
@@ -119,12 +120,10 @@ const root = ref<HTMLElement | null>(null)
  * Press-and-drag, the way a phone selects text. A press on either end of the
  * range drags that end; a press anywhere else starts a new range that follows
  * the pointer. A mouse or pen drags at once. A finger has to hold still for
- * HOLD_MS first, so an ordinary swipe still scrolls the page; after that the
+ * HOLD_TO_DRAG_MS first, so an ordinary swipe still scrolls the page; after that the
  * page stops scrolling and the finger selects. A press that never moves stays
  * an ordinary click for reka.
  */
-const HOLD_MS = 320
-const SLOP_PX = 8
 
 /** The day the range pivots around while the pointer moves. */
 let anchor: string | null = null
@@ -183,14 +182,14 @@ function onPointerDown(e: PointerEvent) {
     dragging.value = true
     draft.value = toReka({ start: day, end: day })
     navigator.vibrate?.(8)
-  }, HOLD_MS)
+  }, HOLD_TO_DRAG_MS)
 }
 
 function onPointerMove(e: PointerEvent) {
   if (anchor === null || e.pointerId !== pointerId) return
   if (!armed) {
     // Moved before the hold landed: that is a scroll, not a selection.
-    if (Math.hypot(e.clientX - startX, e.clientY - startY) > SLOP_PX) reset()
+    if (Math.hypot(e.clientX - startX, e.clientY - startY) > TOUCH_SLOP) reset()
     return
   }
   const day = cellAt(e.clientX, e.clientY)?.dataset.value

package/src/components/LpScrollStrip.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/*
+ * A row that scrolls sideways and can be reached with any input: tabs, chips,
+ * branch pills, a filmstrip. The scrollbar is hidden, so useScrollStrip gives
+ * the mouse its way in (the wheel and drag-to-scroll), the edges with items
+ * beyond them fade, and on a device with a fine pointer a hover shows a
+ * previous and a next button on whichever side still has something to show.
+ * Touch keeps its native scrolling and any scroll snap the row sets.
+ *
+ * The default slot is the row's content; `contentClass` styles the scrolling
+ * row itself (gap, padding, snap), the class on the component its frame. The
+ * buttons are a pointer's shortcut and stay out of the tab order: the
+ * keyboard reaches the items, and the focused one is scrolled into view.
+ * Class and style go on the frame; any other attribute (an aria-label, a
+ * role, listeners) lands on the row, which is the element the items sit in.
+ */
+import { computed, ref, useAttrs } from "vue"
+import { useMediaQuery } from "../composables/useMediaQuery"
+import { useScrollStrip } from "../composables/useScrollStrip"
+import LpIcon from "./LpIcon.vue"
+
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const rowAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const props = withDefaults(
+  defineProps<{
+    /** Classes for the scrolling row (layout, gap, padding, snap). */
+    contentClass?: unknown
+    /** Fade the edges that have items beyond them. */
+    fade?: boolean
+    /** Previous/next buttons: `auto` shows them on hover where the pointer is fine (a mouse), true on any device, false never. */
+    buttons?: boolean | "auto"
+    /** Map a vertical wheel to sideways scrolling while the row can move. */
+    wheel?: boolean
+    /** Drag to scroll with a mouse or pen. */
+    drag?: boolean
+    /** The row element's tag. */
+    as?: string
+    /** Size to the content up to the parent's width (inline-flex), rather than fill the line. */
+    inline?: boolean
+  }>(),
+  { fade: true, buttons: "auto", wheel: true, drag: true, as: "div", inline: false },
+)
+
+const scroller = ref<HTMLElement | null>(null)
+const strip = useScrollStrip(scroller, { wheel: () => props.wheel, drag: () => props.drag })
+const fine = useMediaQuery("(hover: hover) and (pointer: fine)")
+const withButtons = computed(() => props.buttons === true || (props.buttons === "auto" && fine.value))
+
+defineExpose({ scroller, page: strip.page, scrollBy: strip.scrollBy, reveal: strip.reveal, measure: strip.measure, overflowing: strip.overflowing, atStart: strip.atStart, atEnd: strip.atEnd })
+
+const BUTTON =
+  "absolute top-1/2 z-10 grid size-7 -translate-y-1/2 place-items-center rounded-full border border-line bg-surface-raised text-muted shadow-sm outline-none transition-[opacity,color] duration-(--duration-fast) ease-(--ease-emphasized) hover:text-ink motion-reduce:transition-none"
+</script>
+
+<template>
+  <div class="group/strip relative min-w-0" :class="[inline ? 'inline-flex max-w-full' : 'flex', attrs.class]" :style="attrs.style as never" data-lp-strip>
+    <component
+      :is="as"
+      v-bind="rowAttrs"
+      ref="scroller"
+      class="lp-scrollbar-none flex min-w-0 flex-1 overflow-x-auto"
+      :class="[contentClass, fade ? 'lp-strip-fade' : '', strip.dragging.value ? 'cursor-grabbing select-none' : '']"
+      :data-lp-more-start="strip.overflowing.value && !strip.atStart.value ? '' : undefined"
+      :data-lp-more-end="strip.overflowing.value && !strip.atEnd.value ? '' : undefined"
+      data-lp-strip-row
+    >
+      <slot />
+    </component>
+    <template v-if="withButtons">
+      <button
+        v-for="side in ([-1, 1] as const)"
+        :key="side"
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        :class="[
+          BUTTON,
+          side < 0 ? 'left-0.5' : 'right-0.5',
+          strip.overflowing.value && !(side < 0 ? strip.atStart.value : strip.atEnd.value)
+            ? (buttons === true ? 'opacity-100' : 'opacity-0 group-hover/strip:opacity-100')
+            : 'pointer-events-none opacity-0',
+        ]"
+        :data-lp-strip-button="side < 0 ? 'prev' : 'next'"
+        @pointerdown.prevent
+        @click="strip.page(side)"
+      >
+        <LpIcon :name="side < 0 ? 'lucide:chevron-left' : 'lucide:chevron-right'" :size="16" />
+      </button>
+    </template>
+  </div>
+</template>

package/src/components/LpSidebar.vue

@@ -8,7 +8,7 @@
  * v-model. Each item can route via href (rendered as <a>) or just emit select.
  *
  * Phones: set `responsive` and the rail hides below the `mobileBreakpoint` and
- * is replaced by a swipeable LpDrawer (vaul-vue gives drag-to-close for free).
+ * is replaced by a swipeable LpDrawer (pulled in from the edge, swiped shut).
  * The host owns the burger button and binds v-model:open; selecting an item
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
@@ -659,7 +659,7 @@ const searchField = computed(() => ({
     </div>
   </nav>
 
-  <!-- Mobile: same nav inside a swipeable drawer (drag-to-close via vaul). -->
+  <!-- Mobile: same nav inside a swipeable drawer (LpDrawer's edge pull and swipe to close). -->
   <LpDrawer
     v-if="responsive"
     :open="open"

package/src/components/LpTabs.vue

@@ -3,13 +3,13 @@ import { isHTMLElement } from "../composables/useView"
 import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, nextTick, ref, useId, watch } from "vue"
+import { computed, nextTick, ref, useId, watch, type FunctionalComponent } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import { useStepHistory } from "../composables/useOverlayHistory"
-import { prefersReducedMotion } from "../composables/easing"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpTabFace from "./LpTabFace.vue"
+import LpScrollStrip from "./LpScrollStrip.vue"
 import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER, pickTab } from "./tabs"
 
 export interface TabItem {
@@ -104,22 +104,31 @@ watch(
 )
 
 // A row wider than its container scrolls sideways (a phone, a narrow card)
-// instead of wrapping each label onto two lines; the active tab is brought
-// into view whenever it changes, including from outside.
+// instead of wrapping each label onto two lines. LpScrollStrip lets a mouse
+// reach the tabs off to the side (wheel, drag, edge buttons), and the active
+// tab is brought into view whenever it changes, including from outside.
+const strip = ref<InstanceType<typeof LpScrollStrip> | null>(null)
+const Passthrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 const list = ref<{ $el: HTMLElement } | null>(null)
 watch(current, () => {
-  void nextTick(() => {
-    const row = list.value?.$el
-    const active = row?.querySelector<HTMLElement>('[data-state="active"]')
-    if (!row || !active || row.scrollWidth <= row.clientWidth) return
-    const start = active.offsetLeft - row.offsetLeft
-    const end = start + active.offsetWidth
-    if (start >= row.scrollLeft && end <= row.scrollLeft + row.clientWidth) return
-    const left = start < row.scrollLeft ? start : end - row.clientWidth
-    row.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" })
-  })
+  void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')))
 })
 
+/*
+ * reka selects a tab on mousedown, so a press meant to drag the row would
+ * pick whichever tab it started on. Mouse picks wait for the click instead,
+ * which a drag swallows; the keyboard still selects as focus moves.
+ */
+function holdMousePick(event: MouseEvent) {
+  if (event.button !== 0 || event.ctrlKey || bottom.value) return
+  if (!isHTMLElement(event.target) || !event.target.closest('[role="tab"]')) return
+  event.stopPropagation()
+  event.preventDefault()
+}
+function clickPick(item: TabItem) {
+  if (!item.disabled && !bottom.value) select(item.value)
+}
+
 function show(value: string) {
   if (props.modelValue === undefined) current.value = value
   emit("update:modelValue", value)
@@ -195,18 +204,26 @@ usePaletteCommands(() => props.items.map(item => ({
     :model-value="current"
     @update:model-value="(v) => select(v as string)"
   >
+    <component
+      :is="bottom ? Passthrough : LpScrollStrip"
+      ref="strip"
+      v-bind="bottom ? {} : {
+        inline: !block,
+        class: variant === 'contained' ? 'rounded-control border border-line bg-surface-soft' : undefined,
+        contentClass: variant === 'contained' ? 'p-1' : undefined,
+      }"
+    >
     <TabsList
       ref="list"
       :aria-label="label"
       :class="bottom
         ? BOTTOM_BAR
         : [
-            'max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            block ? 'flex w-full' : 'inline-flex',
-            variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
+            'flex w-max min-w-full gap-1',
             variant === 'underline' ? 'border-b border-line' : '',
           ]"
       @pointerleave="hovered = null"
+      @mousedown.capture="holdMousePick"
     >
       <!-- Passthrough when the tab has no menu, so it keeps the native one. -->
       <LpContextMenu
@@ -233,6 +250,7 @@ usePaletteCommands(() => props.items.map(item => ({
         ]"
         @pointerenter="hoverFollow && !item.disabled && (hovered = item.value)"
         @pointerup="releaseFocusAfterPointer"
+        @click="clickPick(item)"
       >
         <!-- Active marker: a bar under the tab in "underline", over it in
              "bottom", a filled pill otherwise. All slide between tabs via the
@@ -268,6 +286,7 @@ usePaletteCommands(() => props.items.map(item => ({
         </span>
       </template>
     </TabsList>
+    </component>
 
     <!-- Animated panels: only rendered if a per-item #panel slot is provided.
          The Motion wrapper layout-animates its height so switching to a taller

package/src/components/LpVideoTrim.vue

@@ -29,6 +29,7 @@ export default { inheritAttrs: false }
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
 import { startPointerDrag } from "../composables/pointerDrag"
+import { createGesture } from "../composables/useGesture"
 import { isHTMLElement, nodeWindow } from "../composables/realm"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -367,8 +368,6 @@ const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1)
 
 /* ---------- timeline pointers ---------- */
 
-const pointers = new Map<number, number>()
-let pinch: { distance: number; anchor: number } | null = null
 const pinching = ref(false)
 let edgeFrame = 0
 let lastX = 0
@@ -420,48 +419,41 @@ function edgeScroll() {
   })
 }
 
-function onTrackDown(event: PointerEvent) {
-  if (off.value || (event.pointerType === "mouse" && event.button !== 0)) return
-  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
-  pointers.set(event.pointerId, event.clientX)
-  if (pointers.size === 2) {
+/* The track on the kit's gesture engine: a press scrubs at once, a drag keeps scrubbing, two fingers zoom about where they started. */
+let pinchDistance = 0
+let pinchAnchor = 0
+const track = createGesture({
+  threshold: 0,
+  onPress(event) {
+    if (off.value || (event.pointerType === "mouse" && event.button !== 0)) return false
+    event.preventDefault()
+    trackEl.value?.querySelector<HTMLElement>("[data-lp-playhead]")?.focus({ preventScroll: true })
+    pause()
+    scrubbing.value = true
+    lastX = event.clientX
+    seek(timeAt(event.clientX))
+  },
+  onDrag({ point }) {
+    if (!scrubbing.value) return
+    lastX = point.x
+    seek(timeAt(point.x))
+    edgeScroll()
+  },
+  onDragEnd: () => (scrubbing.value = false),
+  onTap: () => (scrubbing.value = false),
+  onPinchStart(pinch) {
     scrubbing.value = false
-    const [a, b] = [...pointers.values()] as [number, number]
-    pinch = { distance: Math.max(8, Math.abs(a - b)), anchor: timeAt((a + b) / 2) }
     pinching.value = true
-    return
-  }
-  if (pointers.size > 2) return
-  event.preventDefault()
-  trackEl.value?.querySelector<HTMLElement>("[data-lp-playhead]")?.focus({ preventScroll: true })
-  pause()
-  scrubbing.value = true
-  lastX = event.clientX
-  seek(timeAt(event.clientX))
-}
-function onTrackMove(event: PointerEvent) {
-  if (!pointers.has(event.pointerId)) return
-  pointers.set(event.pointerId, event.clientX)
-  if (pinch && pointers.size === 2) {
-    const [a, b] = [...pointers.values()] as [number, number]
-    const distance = Math.max(8, Math.abs(a - b))
-    zoomBy(distance / pinch.distance, pinch.anchor)
-    pinch.distance = distance
-    return
-  }
-  if (!scrubbing.value) return
-  lastX = event.clientX
-  seek(timeAt(event.clientX))
-  edgeScroll()
-}
-function onTrackUp(event: PointerEvent) {
-  pointers.delete(event.pointerId)
-  if (pointers.size < 2) {
-    pinch = null
-    pinching.value = false
-  }
-  if (!pointers.size) scrubbing.value = false
-}
+    pinchDistance = pinch.distance
+    pinchAnchor = timeAt(pinch.origin.x)
+  },
+  onPinch(pinch) {
+    zoomBy(pinch.distance / Math.max(8, pinchDistance), pinchAnchor)
+    pinchDistance = pinch.distance
+  },
+  onPinchEnd: () => (pinching.value = false),
+})
+onBeforeUnmount(track.dispose)
 
 /* The overview: press or drag to centre the view there. */
 function onOverviewDown(event: PointerEvent) {
@@ -948,10 +940,7 @@ const widestLeft = computed(() => leftOf(widestClipTime(limits.value.maxClip), w
         :class="off ? 'opacity-60' : 'cursor-text'"
         :aria-label="text.timeline"
         role="group"
-        @pointerdown="onTrackDown"
-        @pointermove="onTrackMove"
-        @pointerup="onTrackUp"
-        @pointercancel="onTrackUp"
+        v-bind="track.handlers"
       >
         <div class="absolute inset-0 overflow-hidden rounded-control">
           <TransitionGroup v-bind="FADE">

package/src/composables/gesture.ts

@@ -0,0 +1,314 @@
+import { clamp } from "./clamp"
+import type { Direction } from "./spatialNav"
+
+/*
+ * The arithmetic behind every gesture in the kit, kept apart from the DOM so
+ * it can be tested and shared: how far a finger may drift before a press
+ * becomes a drag, how fast it was moving when it let go, which way a swipe
+ * went, how much an edge gives when it is pulled past, and where a flick
+ * comes to rest. useGesture feeds pointer events into these; a component that
+ * has to read touch events itself (a pull from the screen edge) uses them
+ * directly, so both decide the same way.
+ */
+
+export interface GesturePoint {
+  x: number
+  y: number
+}
+
+export type GestureAxis = "x" | "y"
+
+/** How far a touch may drift before a press stops being a tap or a hold. */
+export const TOUCH_SLOP = 8
+/** A mouse is steadier: a press that moves this far is a drag. */
+export const MOUSE_SLOP = 4
+/** Px/ms at release past which a short swipe still counts (a flick). */
+export const FLICK_VELOCITY = 0.45
+/** How long a finger holds still before it drags (selects, paints) rather than scrolls the page. */
+export const HOLD_TO_DRAG_MS = 320
+/** How long a press must stay for a long press, in ms. */
+export const LONG_PRESS_MS = 500
+/** Only movement this recent says how fast the pointer was going at release. */
+const VELOCITY_WINDOW_MS = 100
+/** A pointer that rested this long before letting go was not flung. */
+const REST_MS = 90
+
+/** The slop for a pointer type: a finger gets more room than a mouse. */
+export function slopFor(pointerType: string): number {
+  return pointerType === "mouse" ? MOUSE_SLOP : TOUCH_SLOP
+}
+
+export interface VelocityTracker {
+  /** Record where the pointer is at `time` (ms, an event's timeStamp). */
+  add: (point: GesturePoint, time: number) => void
+  /** Px/ms over the last moments, zero when the pointer rested before `now`. */
+  velocity: (now?: number) => GesturePoint
+  reset: () => void
+}
+
+/**
+ * Velocity from the samples in the last VELOCITY_WINDOW_MS rather than from
+ * the last two events: a jittery final frame (two events a millisecond apart)
+ * would otherwise decide how far a flick travels.
+ */
+export function createVelocityTracker(): VelocityTracker {
+  let samples: { x: number; y: number; t: number }[] = []
+  return {
+    add(point, time) {
+      samples.push({ x: point.x, y: point.y, t: time })
+      const cut = time - VELOCITY_WINDOW_MS
+      while (samples.length > 2 && samples[0]!.t < cut) samples.shift()
+    },
+    velocity(now) {
+      if (samples.length < 2) return { x: 0, y: 0 }
+      const last = samples[samples.length - 1]!
+      if (now !== undefined && now - last.t > REST_MS) return { x: 0, y: 0 }
+      const first = samples[0]!
+      const dt = last.t - first.t
+      if (dt <= 0) return { x: 0, y: 0 }
+      return { x: (last.x - first.x) / dt, y: (last.y - first.y) / dt }
+    },
+    reset() {
+      samples = []
+    },
+  }
+}
+
+/**
+ * Which axis a movement has committed to, or null while it is still inside
+ * the slop or too diagonal to call. `ratio` is how much the winning axis must
+ * lead by: 1 takes any lead, higher waits for a clearer one.
+ */
+export function lockAxis(movement: GesturePoint, slop: number, ratio = 1): GestureAxis | null {
+  const ax = Math.abs(movement.x)
+  const ay = Math.abs(movement.y)
+  if (Math.hypot(ax, ay) < slop) return null
+  if (ax > ay * ratio) return "x"
+  if (ay > ax * ratio) return "y"
+  return null
+}
+
+export interface SwipeOptions {
+  /** Distance in px that is a swipe at any speed. Default 60. */
+  distance?: number
+  /** Px/ms that turns a shorter move into a swipe. Default FLICK_VELOCITY. */
+  velocity?: number
+  /** A flick must still travel this far, so a twitch is not one. Default 16. */
+  minDistance?: number
+  /** Only these axes count. Default both. */
+  axis?: GestureAxis
+  /** How much the swipe's axis must lead the other. Default 1.5. */
+  ratio?: number
+}
+
+/** Which way a released movement swiped, or null when it was not a swipe. */
+export function swipeDirection(movement: GesturePoint, velocity: GesturePoint, options: SwipeOptions = {}): Direction | null {
+  const { distance = 60, velocity: flick = FLICK_VELOCITY, minDistance = 16, ratio = 1.5 } = options
+  const ax = Math.abs(movement.x)
+  const ay = Math.abs(movement.y)
+  const axis: GestureAxis | null = options.axis ?? (ax > ay * ratio ? "x" : ay > ax * ratio ? "y" : null)
+  if (!axis) return null
+  const along = axis === "x" ? movement.x : movement.y
+  const across = axis === "x" ? ay : ax
+  if (Math.abs(along) <= across * ratio) return null
+  const speed = axis === "x" ? velocity.x : velocity.y
+  const far = Math.abs(along) >= distance
+  const flung = Math.abs(along) >= minDistance && Math.abs(speed) >= flick && Math.sign(speed) === Math.sign(along)
+  if (!far && !flung) return null
+  if (axis === "x") return along < 0 ? "left" : "right"
+  return along < 0 ? "up" : "down"
+}
+
+/**
+ * How far an edge moves when pulled `overshoot` px past it: the further the
+ * pull, the less each pixel gives, approaching `size` and never passing it.
+ * The sign follows the overshoot. `c` is the stiffness, iOS uses 0.55.
+ */
+export function rubberBand(overshoot: number, size: number, c = 0.55): number {
+  if (!overshoot || size <= 0) return 0
+  const distance = Math.abs(overshoot)
+  return Math.sign(overshoot) * (1 - 1 / ((distance * c) / size + 1)) * size
+}
+
+/** Clamp `value` into [min, max], letting it stretch past either end by rubberBand. */
+export function rubberClamp(value: number, min: number, max: number, size: number, c?: number): number {
+  if (value < min) return min + rubberBand(value - min, size, c)
+  if (value > max) return max + rubberBand(value - max, size, c)
+  return value
+}
+
+export interface DismissOptions {
+  /** Offset toward the dismissing side, in px (positive is toward it). */
+  offset: number
+  /** Velocity toward the dismissing side, px/ms. */
+  velocity: number
+  /** The size of what is being swiped away along the swipe, in px. */
+  size: number
+  /** Fraction of `size` past which a slow release dismisses. Default 0.5. */
+  ratio?: number
+  /** Px/ms past which a release dismisses from any distance. Default FLICK_VELOCITY. */
+  flick?: number
+}
+
+/** Swipe to dismiss: whether a release should carry it away or let it spring back. */
+export function shouldDismiss({ offset, velocity, size, ratio = 0.5, flick = FLICK_VELOCITY }: DismissOptions): boolean {
+  if (offset <= 0) return false
+  if (velocity >= flick && offset > 4) return true
+  return offset >= size * ratio && velocity > -flick
+}
+
+export interface PageSwipeOptions {
+  index: number
+  count: number
+  /** Drag offset along the strip in px, positive toward the previous item. */
+  offset: number
+  /** Velocity in px/ms, same sign as `offset`. */
+  velocity: number
+  /** Width of one item in px. */
+  size: number
+  /** Fraction of `size` that pages at any speed. Default 0.25. */
+  ratio?: number
+  flick?: number
+  /** Wrap past the ends instead of stopping. */
+  loop?: boolean
+}
+
+/** Swipe between items: the index a release lands on, one step at most. */
+export function pageAfterSwipe({ index, count, offset, velocity, size, ratio = 0.25, flick = FLICK_VELOCITY, loop = false }: PageSwipeOptions): number {
+  if (count <= 0) return 0
+  const far = Math.abs(offset) >= size * ratio
+  const flung = Math.abs(velocity) >= flick && Math.sign(velocity) === Math.sign(offset) && Math.abs(offset) > 8
+  if (!far && !flung) return index
+  const next = index + (offset < 0 ? 1 : -1)
+  if (loop) return (next + count) % count
+  return clamp(next, 0, count - 1)
+}
+
+/** Where a fling at `velocity` px/ms comes to rest with exponential friction of time constant `tau` ms. */
+export function momentumDistance(velocity: number, tau = 240): number {
+  return velocity * tau
+}
+
+export interface PinchFrame {
+  /** Distance between the two pointers now, over the distance at the start. */
+  scale: number
+  /** Midpoint of the two pointers. */
+  origin: GesturePoint
+  distance: number
+}
+
+export function distance(a: GesturePoint, b: GesturePoint): number {
+  return Math.hypot(a.x - b.x, a.y - b.y)
+}
+
+export function midpoint(a: GesturePoint, b: GesturePoint): GesturePoint {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+}
+
+/** The pinch between two pointers, measured against the distance it started at. */
+export function pinchFrame(a: GesturePoint, b: GesturePoint, startDistance: number): PinchFrame {
+  const now = Math.max(1, distance(a, b))
+  return { scale: now / Math.max(1, startDistance), origin: midpoint(a, b), distance: now }
+}
+
+/** The wheel's delta in pixels, whatever unit the device reported it in. */
+export function wheelPixels(delta: number, mode: number, page: number): number {
+  if (mode === 1) return delta * 16
+  if (mode === 2) return delta * page
+  return delta
+}
+
+export interface DragSessionOptions {
+  /** Px of travel before a press becomes a drag. */
+  slop: number
+  /** Only a drag along this axis counts; one along the other is rejected. `lock` takes whichever comes first. */
+  axis?: GestureAxis | "lock"
+}
+
+export interface DragFrame {
+  /** `pending` inside the slop, `drag` once committed, `rejected` when it went the other way. */
+  phase: "pending" | "drag" | "rejected"
+  /** True on the frame the drag committed. */
+  first: boolean
+  start: GesturePoint
+  point: GesturePoint
+  movement: GesturePoint
+  delta: GesturePoint
+  velocity: GesturePoint
+  axis: GestureAxis | null
+  elapsed: number
+}
+
+export interface DragSession {
+  readonly phase: DragFrame["phase"]
+  /** Feed the pointer's position; returns where the gesture stands. */
+  move: (point: GesturePoint, time: number) => DragFrame
+  /** The final frame at release, with the swipe it made (if it was a drag). */
+  end: (point: GesturePoint, time: number, swipe?: SwipeOptions) => DragFrame & { swipe: Direction | null }
+}
+
+/**
+ * One press followed from down to up, whatever events carry it: useGesture
+ * feeds it pointer events, a pull from the screen edge feeds it touches. It
+ * decides when the press becomes a drag, along which axis, how fast it moves
+ * and whether the release was a swipe, so every gesture in the kit draws the
+ * line in the same place.
+ */
+export function createDragSession(start: GesturePoint, time: number, options: DragSessionOptions): DragSession {
+  const tracker = createVelocityTracker()
+  tracker.add(start, time)
+  let phase: DragFrame["phase"] = "pending"
+  let axis: GestureAxis | null = null
+  let last = start
+
+  function frame(point: GesturePoint, at: number, first: boolean): DragFrame {
+    const f: DragFrame = {
+      phase,
+      first,
+      start,
+      point,
+      movement: { x: point.x - start.x, y: point.y - start.y },
+      delta: { x: point.x - last.x, y: point.y - last.y },
+      velocity: tracker.velocity(at),
+      axis,
+      elapsed: at - time,
+    }
+    last = point
+    return f
+  }
+
+  return {
+    get phase() {
+      return phase
+    },
+    move(point, at) {
+      tracker.add(point, at)
+      let first = false
+      if (phase === "pending") {
+        const movement = { x: point.x - start.x, y: point.y - start.y }
+        if (Math.hypot(movement.x, movement.y) >= options.slop) {
+          if (!options.axis) {
+            phase = "drag"
+            first = true
+          } else {
+            const taken = lockAxis(movement, options.slop)
+            if (taken && options.axis !== "lock" && taken !== options.axis) phase = "rejected"
+            else if (taken) {
+              axis = taken
+              phase = "drag"
+              first = true
+            }
+          }
+        }
+      }
+      if (phase !== "drag") return frame(point, at, false)
+      return frame(point, at, first)
+    },
+    end(point, at, swipe) {
+      tracker.add(point, at)
+      const f = frame(point, at, false)
+      const direction = phase === "drag" ? swipeDirection(f.movement, f.velocity, { axis: axis ?? undefined, ...swipe }) : null
+      return { ...f, swipe: direction }
+    },
+  }
+}