@leavepulse/ui 0.93.2 → 0.94.0

package/src/components/LpAppShell.vue

@@ -58,6 +58,7 @@ import { easingToken, durationToken, prefersReducedMotion } from "../composables
 import { useLabels } from "../composables/useLpConfig"
 import { useResizeObserver } from "../composables/useResizeObserver"
 import { useScrollMemory } from "../composables/scrollMemory"
+import { useScrollStrip } from "../composables/useScrollStrip"
 import { isHTMLElement, nodeWindow, useView, viewWindow } from "../composables/useView"
 import AppShellContextNav from "./AppShellContextNav.vue"
 import {
@@ -87,6 +88,11 @@ export type { SidebarItem, SidebarSection } from "./sidebar"
 /* Past this much scrolled the way back up is worth a button. */
 const BACK_TO_TOP_AFTER_PX = 600
 
+// The header actions scroll sideways on a narrow bar; a mouse reaches the ones
+// past the edge with the wheel or a drag, and the clipped edge fades.
+const headerActions = ref<{ $el: HTMLElement } | null>(null)
+const actionStrip = useScrollStrip(() => headerActions.value?.$el)
+
 const props = withDefaults(
   defineProps<{
     /** Flat items, or sections for grouped nav. Forwarded to LpSidebar. */
@@ -753,10 +759,13 @@ const backToTopClass = computed(() =>
              actions now cap at two thirds of the bar and scroll within it, so
              the title keeps a third and every button stays reachable. -->
         <LpShift
+          ref="headerActions"
           axis="width"
           anchor="end"
           presence
-          class="ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
+          class="lp-strip-fade ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
+          :data-lp-more-start="actionStrip.overflowing.value && !actionStrip.atStart.value ? '' : undefined"
+          :data-lp-more-end="actionStrip.overflowing.value && !actionStrip.atEnd.value ? '' : undefined"
         >
           <slot name="header-actions" />
         </LpShift>

package/src/components/LpChart.vue

@@ -24,6 +24,7 @@ import { useLabels } from "../composables/useLpConfig"
 import { easeTravel } from "../composables/easing"
 import { usePrefersReducedMotion } from "../composables/useReducedMotion"
 import { startPointerDrag } from "../composables/pointerDrag"
+import { MOUSE_SLOP } from "../composables/gesture"
 import { nodeWindow } from "../composables/useView"
 import { usePillTransition } from "../composables/usePillTransition"
 import { useReveal } from "../composables/useReveal"
@@ -976,7 +977,6 @@ const crosshair = computed(() => (active.value >= 0 ? active.value : peerSlot.va
 watch(active, (slot) => publish(slot >= 0 ? (labels.value[slot] ?? null) : null))
 
 /* Past this many px a press on the plot is a selection, not a click. */
-const SELECT_SLOP = 4
 let swallowClick = false
 const selection = ref<{ from: number; to: number } | null>(null)
 
@@ -988,7 +988,7 @@ const onPointerDown = (e: PointerEvent) => {
   startPointerDrag(e, {
     move(ev) {
       const x = offset(ev)
-      if (Math.abs(x - pressedAt) > SELECT_SLOP) selection.value = { from: pressedAt, to: x }
+      if (Math.abs(x - pressedAt) > MOUSE_SLOP) selection.value = { from: pressedAt, to: x }
     },
     end(completed) {
       const picked = selection.value

package/src/components/LpDrawer.vue

@@ -20,7 +20,8 @@ export type DrawerLabels = {
  * primitive — same base as the rest of the kit, so accessibility and the token
  * theming carry over). Over the old reka-Dialog version this adds drag-to-
  * dismiss with inertia, snap points, a draggable handle and an optional
- * scale-background effect. Slot/prop surface stays backwards compatible: `side`
+ * scale-background effect. Side drawers swipe on the kit's gesture engine
+ * instead (see the edge pull below); vaul drags sheets. Slot/prop surface stays backwards compatible: `side`
  * still works (mapped onto `direction`), plus `size`/`width`/title/footer.
  *
  * scale-background note: the effect scales the page behind the drawer, so the
@@ -50,6 +51,8 @@ import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { anyModalOpen, useModalLayer } from "./modalDepth"
 import { startPointerDrag } from "../composables/pointerDrag"
+import { createDragSession, rubberBand, shouldDismiss, TOUCH_SLOP, type DragSession } from "../composables/gesture"
+import { createGesture, type GestureEnd, type GestureState } from "../composables/useGesture"
 import { isElement, nodeWindow, useOutsideGuard, usePortalTarget, useView, viewDocument, viewWindow } from "../composables/useView"
 
 type Direction = "top" | "bottom" | "left" | "right"
@@ -104,7 +107,11 @@ const props = withDefaults(
      * does), so a wide touch screen with the rail visible doesn't pull it too.
      */
     edgeBreakpoint?: "sm" | "md" | "lg" | "xl"
-    /** Distance (px) from the edge within which a touch can start a pull. */
+    /**
+     * Distance (px) from the edge within which a touch can start a pull. Wide
+     * enough to start a thumb's width in, clear of the system's back gesture
+     * along the very edge.
+     */
     edgeSize?: number
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
     edgeOpenThreshold?: number
@@ -155,7 +162,7 @@ const props = withDefaults(
     size: "sm",
     dismissible: true,
     noDragControls: true,
-    edgeSize: 44,
+    edgeSize: 72,
     edgeOpenThreshold: 0.3,
     minSize: "22rem",
     maxSize: "96vw",
@@ -345,22 +352,29 @@ const vNoDragControls = {
   updated: tagNoDrag,
 }
 
-// ── Edge-drag-to-open (Discord-style) ──────────────────────────────────────
-// vaul only drags an *already-open* drawer, so the pull-from-edge gesture is
-// ours. It is detected on the document rather than on an overlay strip: a strip
-// covering the screen edge swallowed every tap there, and the app burger lives
-// exactly in that corner. A touch near the edge is only a candidate; it becomes
-// a pull once the finger travels inward past EDGE_SLOP and mostly sideways, so a
-// tap still reaches the control under it and a vertical scroll stays a scroll.
-// While pulling, a preview of the real panel content follows the finger; on
-// release we open if the pull passed the threshold or was a quick flick, then
-// hand off to the real drawer without a second slide.
-const EDGE_SLOP = 10
-const FLICK_SPEED = 0.45
+// ── Side drawers: pulled open from the edge, swiped shut ───────────────────
+// One gesture model for both ways, on the kit's drag session (gesture.ts): a
+// press becomes a pull once it travels past the slop and mostly sideways, a
+// vertical start is a scroll and is let go, the panel's edge follows the
+// finger 1:1, and a release completes when it is past `edgeOpenThreshold` /
+// `closeThreshold` of the panel or was a flick (shouldDismiss), otherwise it
+// springs back. A cancelled touch (the system took it) never completes.
+//
+// Opening is watched on the document with touch events rather than on an
+// overlay strip: a strip over the screen edge swallowed every tap there, and
+// only a non-passive touchmove can stop the page scrolling mid-gesture. The
+// zone reaches `edgeSize` in from the edge, so a pull can start a thumb's
+// width in, clear of the system's own back gesture at the very edge. While
+// pulling, a preview of the real panel content follows the finger, then hands
+// off to the real drawer without a second slide.
+//
+// Closing is useGesture on the panel and the scrim (touch and pen; a mouse
+// closes with the scrim, Escape or the button). vaul's own drag is off for
+// side drawers, so there is one behaviour, not two.
 const BREAKPOINT_PX = { sm: 640, md: 768, lg: 1024, xl: 1280 } as const
 // Controls whose own drag must win over the pull, plus explicit opt-outs.
 const EDGE_IGNORE =
-  "input, textarea, select, [contenteditable=''], [contenteditable='true'], [data-vaul-no-drag], [data-lp-no-edge-pull]"
+  "input, textarea, select, [contenteditable=''], [contenteditable='true'], div[data-vaul-no-drag], [data-lp-no-edge-pull]"
 
 // 0 (closed) … 1 (fully pulled in). Drives the preview transform + scrim.
 const peek = ref(0)
@@ -377,7 +391,10 @@ const skipOpenSlide = ref(false)
 watch(
   () => props.open,
   (open) => {
-    if (open) return
+    if (open) {
+      shut.value = 0
+      return
+    }
     skipOpenSlide.value = false
     // Closing mid-resize removes the grip, which takes its capture events along.
     endResize?.()
@@ -403,22 +420,22 @@ function edgeEnabled(): boolean {
   return bp === null || edgeWindow().innerWidth < bp
 }
 
-let track: { id: number; x: number; y: number; t: number; lastX: number; lastT: number; speed: number } | null = null
+let track: { id: number; session: DragSession } | null = null
 const owner = Symbol("edge-pull")
 
 // A horizontally scrollable ancestor that can still move the way the finger
-// pulls (a carousel, a wide table) keeps the gesture: the pull only claims
-// what nothing under the finger wants.
-function scrollsWithPull(target: EventTarget | null): boolean {
+// goes (a carousel, a wide table) keeps the gesture: the pull only claims
+// what nothing under the finger wants. `towardOpen` is the opening direction.
+function scrollsWithPull(target: EventTarget | null, towardOpen: boolean): boolean {
   let el = isElement(target) ? target : null
-  const pullsRight = dir.value === "left"
+  const right = (dir.value === "left") === towardOpen
   const body = el?.ownerDocument.body
   while (el && el !== body) {
     if (el.closest(EDGE_IGNORE) === el) return true
     if (el.scrollWidth > el.clientWidth) {
       const overflow = nodeWindow(el).getComputedStyle(el).overflowX
       if (overflow === "auto" || overflow === "scroll") {
-        if (pullsRight ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true
+        if (right ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true
       }
     }
     el = el.parentElement
@@ -426,31 +443,32 @@ function scrollsWithPull(target: EventTarget | null): boolean {
   return false
 }
 
+/** Px from the drawer's edge of the screen, inward. */
 function inward(x: number): number {
   return dir.value === "right" ? edgeWindow().innerWidth - x : x
 }
+/** A movement or velocity along x, positive toward opening. */
+const opening = (x: number) => (dir.value === "right" ? -x : x)
 
 function onTouchStart(e: TouchEvent) {
   if (track) dropTrack()
   if (e.touches.length !== 1 || !edgeEnabled() || anyModalOpen() || edgeOwner.value) return
-  const t = e.touches[0]
-  if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target)) return
-  track = { id: t.identifier, x: t.clientX, y: t.clientY, t: e.timeStamp, lastX: t.clientX, lastT: e.timeStamp, speed: 0 }
+  const t = e.touches[0]!
+  if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target, true)) return
+  track = { id: t.identifier, session: createDragSession({ x: t.clientX, y: t.clientY }, e.timeStamp, { slop: TOUCH_SLOP, axis: "x" }) }
 }
 
 function onTouchMove(e: TouchEvent) {
   if (!track) return
   const t = Array.from(e.changedTouches).find((x) => x.identifier === track!.id)
   if (!t) return
-  const sign = dir.value === "right" ? -1 : 1
-  const dx = (t.clientX - track.x) * sign
-  const dy = t.clientY - track.y
-  if (!peeking.value) {
-    if (Math.abs(dy) > EDGE_SLOP && Math.abs(dy) > Math.abs(dx)) {
-      track = null
-      return
-    }
-    if (dx < EDGE_SLOP || Math.abs(dx) < Math.abs(dy)) return
+  const frame = track.session.move({ x: t.clientX, y: t.clientY }, e.timeStamp)
+  if (frame.phase === "rejected" || (frame.first && opening(frame.movement.x) <= 0)) {
+    dropTrack()
+    return
+  }
+  if (frame.phase !== "drag") return
+  if (frame.first) {
     if (edgeOwner.value && edgeOwner.value !== owner) {
       track = null
       return
@@ -459,10 +477,6 @@ function onTouchMove(e: TouchEvent) {
     peeking.value = true
   }
   if (e.cancelable) e.preventDefault()
-  const dt = e.timeStamp - track.lastT
-  if (dt > 0) track.speed = (((t.clientX - track.lastX) * sign) / dt) * 0.6 + track.speed * 0.4
-  track.lastX = t.clientX
-  track.lastT = e.timeStamp
   peek.value = clamp(inward(t.clientX) / panelPx(), 0, 1)
 }
 
@@ -480,12 +494,15 @@ function cancelPull() {
   peek.value = 0
 }
 
-function settle() {
-  const flick = track !== null && track.speed > FLICK_SPEED && peek.value > 0.05
+function settle(e: TouchEvent) {
+  const t = track && Array.from(e.changedTouches).find((x) => x.identifier === track!.id)
+  const end = track && t ? track.session.end({ x: t.clientX, y: t.clientY }, e.timeStamp) : null
   dropTrack()
   if (!peeking.value) return
   peeking.value = false
-  if (peek.value >= props.edgeOpenThreshold || flick) {
+  const size = panelPx()
+  const opens = !!end && shouldDismiss({ offset: peek.value * size, velocity: opening(end.velocity.x), size, ratio: props.edgeOpenThreshold })
+  if (opens) {
     peek.value = 1
     handingOff.value = true
     skipOpenSlide.value = true
@@ -505,6 +522,52 @@ function settle() {
   }
 }
 
+// How far the open panel has been swiped toward closing, in px (negative is a
+// pull the other way, which only gives a little). Drives the panel and scrim.
+const shut = ref(0)
+const shutting = ref(false)
+const closeSwipe = {
+  pointerTypes: ["touch", "pen"] as const,
+  axis: "x" as const,
+  ignore: EDGE_IGNORE,
+  enabled: () => !!props.open && isHorizontal.value && props.dismissible && !guarded.value && !handingOff.value,
+  onPress: (e: PointerEvent) => !scrollsWithPull(e.target, false),
+  onDragStart: () => (shutting.value = true),
+  onDrag: ({ movement }: GestureState) => {
+    const toward = -opening(movement.x)
+    shut.value = toward >= 0 ? toward : rubberBand(toward, panelPx(), 0.2)
+  },
+  onDragEnd: ({ velocity, cancelled }: GestureEnd) => {
+    shutting.value = false
+    const size = panelPx()
+    if (!cancelled && shouldDismiss({ offset: shut.value, velocity: -opening(velocity.x), size, ratio: props.closeThreshold ?? 0.25 })) {
+      emit("update:open", false)
+      return
+    }
+    shut.value = 0
+  },
+}
+// Bound as attributes: they fall through to the panel and scrim elements,
+// which reka renders through a presence wrapper with no element of its own.
+const panelSwipe = createGesture(closeSwipe)
+const scrimSwipe = createGesture(closeSwipe)
+onBeforeUnmount(() => {
+  panelSwipe.dispose()
+  scrimSwipe.dispose()
+})
+
+// The panel and scrim during a swipe: the panel's edge stays under the finger
+// and the scrim lightens with it. On release vaul's own transition springs it
+// back, and its close keyframes run from wherever the finger left it.
+const shutStyle = computed(() => {
+  if (!shut.value && !shutting.value) return undefined
+  const px = dir.value === "right" ? shut.value : -shut.value
+  return { transform: `translate3d(${px}px, 0, 0)`, transition: shutting.value ? "none" : undefined }
+})
+const scrimStyle = computed(() => {
+  if (!shut.value && !shutting.value) return undefined
+  return { opacity: clamp(1 - shut.value / Math.max(1, panelPx()), 0, 1), transition: shutting.value ? "none" : "opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1)" }
+})
 const timers: number[] = []
 onBeforeUnmount(() => {
   for (const id of timers) window.clearTimeout(id)
@@ -513,7 +576,7 @@ onBeforeUnmount(() => {
 
 function onTouchEnd(e: TouchEvent) {
   if (track && !Array.from(e.changedTouches).some((x) => x.identifier === track!.id)) return
-  settle()
+  settle(e)
 }
 
 if (typeof document !== "undefined") {
@@ -522,16 +585,18 @@ if (typeof document !== "undefined") {
     (on, _, onCleanup) => {
       if (!on) return
       const doc = viewDocument(view.value)
-      const passive = { passive: true }
+      // Capture phase, so a control that stops its own touches still lets the
+      // pull see where the finger went.
+      const passive = { passive: true, capture: true }
       doc.addEventListener("touchstart", onTouchStart, passive)
-      doc.addEventListener("touchmove", onTouchMove, { passive: false })
+      doc.addEventListener("touchmove", onTouchMove, { passive: false, capture: true })
       doc.addEventListener("touchend", onTouchEnd, passive)
       doc.addEventListener("touchcancel", cancelPull, passive)
       onCleanup(() => {
-        doc.removeEventListener("touchstart", onTouchStart)
-        doc.removeEventListener("touchmove", onTouchMove)
-        doc.removeEventListener("touchend", onTouchEnd)
-        doc.removeEventListener("touchcancel", cancelPull)
+        doc.removeEventListener("touchstart", onTouchStart, true)
+        doc.removeEventListener("touchmove", onTouchMove, true)
+        doc.removeEventListener("touchend", onTouchEnd, true)
+        doc.removeEventListener("touchcancel", cancelPull, true)
         cancelPull()
       })
     },
@@ -592,25 +657,26 @@ const guardOutside = useOutsideGuard()
     :direction="dir"
     :dismissible="dismissible && !guarded"
     :snap-points="snapPoints"
-    :handle-only="handleOnly"
+    :handle-only="handleOnly || isHorizontal"
     :should-scale-background="scaleBackground"
     :close-threshold="closeThreshold"
     @update:open="(v: boolean) => emit('update:open', v)"
   >
     <DrawerPortal :to="portalTo">
       <DrawerOverlay
-        :style="{ zIndex: layer.scrim }"
+        v-bind="scrimSwipe.handlers"
+        :style="[{ zIndex: layer.scrim }, scrimStyle]"
         @click="guarded && requestClose()"
-        class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        class="lp-scrim fixed inset-0 z-(--z-overlay) touch-none data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
         :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested, 'lp-scrim--covered': layer.covered }"
       />
       <DrawerContent
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         ref="contentRef"
-        v-bind="description ? {} : { 'aria-describedby': undefined }"
+        v-bind="{ ...(description ? {} : { 'aria-describedby': undefined }), ...panelSwipe.handlers }"
         :class="contentClass"
-        :style="[sizeStyle, { zIndex: layer.panel }]"
+        :style="[sizeStyle, { zIndex: layer.panel }, shutStyle]"
         :data-vaul-animate="handingOff || skipOpenSlide ? 'false' : undefined"
         @keydown.escape="guardEscape"
       >
@@ -676,6 +742,7 @@ const guardOutside = useOutsideGuard()
         <div
           v-no-drag-controls="noDragControls"
           class="flex min-h-0 min-w-0 flex-1 flex-col [-webkit-user-select:text]! [user-select:text]!"
+          :class="isHorizontal ? '[&_[data-reka-scroll-area-viewport]]:touch-pan-y' : undefined"
           :data-vaul-no-drag="noDragContent ? '' : undefined"
         >
           <!-- min-w-0 on the body + scroll content so a wide child (e.g. a log

package/src/components/LpLightbox.vue

@@ -26,6 +26,8 @@ import {
 import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { useZoomPan } from "../composables/useZoomPan"
+import LpScrollStrip from "./LpScrollStrip.vue"
+import { createDragSession, slopFor, type DragSession } from "../composables/gesture"
 import { clickLink } from "./exportData"
 import { fileNameOf, isVideoItem, type LightboxItem } from "./lightbox"
 import LpCopyButton from "./LpCopyButton.vue"
@@ -177,7 +179,7 @@ const loading = ref(false)
 const failed = ref(false)
 const viewport = ref<HTMLElement | null>(null)
 const stageImage = ref<HTMLImageElement | null>(null)
-const stripEl = ref<HTMLElement | null>(null)
+const stripEl = ref<InstanceType<typeof LpScrollStrip> | null>(null)
 
 watch(viewport, (el) => zoom.setViewport(el))
 
@@ -277,8 +279,8 @@ function imageSettled(event: Event, ok: boolean) {
 }
 
 function scrollThumbIntoView() {
-  const el = stripEl.value?.querySelector<HTMLElement>(`[data-index="${current.value}"]`)
-  el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
+  const el = stripEl.value?.scroller?.querySelector<HTMLElement>(`[data-index="${current.value}"]`)
+  stripEl.value?.reveal(el, { block: "center" })
 }
 
 function close() {
@@ -363,45 +365,54 @@ function rotate() {
 
 // Swipe to page through, but only while the image is at fit scale — once zoomed
 // a horizontal drag is a pan, and stealing it would make the image unreachable.
-let swipeStart: { x: number; y: number } | null = null
+// The kit's drag session decides what a swipe is (far enough, or a flick, and
+// mostly sideways), as for every other swipe in the kit.
+let swipe: DragSession | null = null
 // Fingers on the stage. A second one makes the gesture a pinch, and a pinch
 // whose fingers part sideways is not a swipe: it zoomed and then paged away
 // from what it zoomed into.
 const fingers = new Set<number>()
 
+function startSwipe(e: PointerEvent) {
+  swipe = createDragSession({ x: e.clientX, y: e.clientY }, e.timeStamp, { slop: slopFor(e.pointerType), axis: "x" })
+}
+
 function onPointerDown(e: PointerEvent) {
   fingers.add(e.pointerId)
   if (fingers.size > 1) {
-    swipeStart = null
+    swipe = null
     if (!isVideo.value) zoom.onPointerDown(e)
     return
   }
   if (isVideo.value) {
     // A drag on the player's bar is a seek or a volume change, never a page.
-    swipeStart = (e.target as Element).closest?.("[data-lp-player-controls]") ? null : { x: e.clientX, y: e.clientY }
+    if ((e.target as Element).closest?.("[data-lp-player-controls]")) swipe = null
+    else startSwipe(e)
     return
   }
   zoom.onPointerDown(e)
-  swipeStart = zoom.zoomed.value ? null : { x: e.clientX, y: e.clientY }
+  if (zoom.zoomed.value) swipe = null
+  else startSwipe(e)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isVideo.value) zoom.onPointerMove(e)
+  if (swipe?.move({ x: e.clientX, y: e.clientY }, e.timeStamp).phase === "rejected") swipe = null
 }
 
 function onPointerCancel(e: PointerEvent) {
   fingers.delete(e.pointerId)
-  swipeStart = null
+  swipe = null
   if (!isVideo.value) zoom.onPointerUp(e)
 }
 
 function onPointerUp(e: PointerEvent) {
   fingers.delete(e.pointerId)
   if (!isVideo.value) zoom.onPointerUp(e)
-  if (!swipeStart) return
-  const dx = e.clientX - swipeStart.x
-  const dy = e.clientY - swipeStart.y
-  swipeStart = null
-  // Mostly-horizontal and past a threshold, so a sloppy tap doesn't page.
-  if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) {
-    go(current.value + (dx < 0 ? 1 : -1))
-  }
+  const ended = swipe?.end({ x: e.clientX, y: e.clientY }, e.timeStamp, { axis: "x" })
+  swipe = null
+  if (ended?.swipe === "left") go(current.value + 1)
+  else if (ended?.swipe === "right") go(current.value - 1)
 }
 
 function onDoubleClick(e: MouseEvent) {
@@ -620,7 +631,7 @@ const guardOutside = useOutsideGuard()
           :class="isPanning ? 'cursor-grabbing' : isZoomed ? 'cursor-grab' : ''"
           @wheel="onStageWheel"
           @pointerdown="onPointerDown"
-          @pointermove="zoom.onPointerMove"
+          @pointermove="onPointerMove"
           @pointerup="onPointerUp"
           @pointercancel="onPointerCancel"
           @dblclick="onDoubleClick"
@@ -722,11 +733,12 @@ const guardOutside = useOutsideGuard()
             </div>
           </slot>
 
-          <div
+          <LpScrollStrip
             v-if="showStrip && total > 1"
             ref="stripEl"
-            class="lp-scrollbar-none flex justify-start gap-2 overflow-x-auto sm:justify-center"
+            :buttons="false"
           >
+            <div class="mx-auto flex w-max gap-2 p-1">
             <button
               v-for="(entry, i) in items"
               :key="entry.src + i"
@@ -754,7 +766,8 @@ const guardOutside = useOutsideGuard()
                 draggable="false"
               />
             </button>
-          </div>
+            </div>
+          </LpScrollStrip>
         </div>
       </DialogContent>
     </DialogPortal>

package/src/components/LpMapPicker.vue

@@ -22,7 +22,9 @@ export default { inheritAttrs: false }
  */
 import { clamp } from "../composables/clamp"
 import { computed, onBeforeUnmount, ref, watch } from "vue"
-import { prefersReducedMotion } from "../composables/easing"
+import { createDragSession, slopFor, type DragSession } from "../composables/gesture"
+import { glide, type Glide } from "../composables/useGesture"
+import { nodeWindow } from "../composables/realm"
 import { type LatLon, OSM_TILES, type TileSource, project, tileUrl, unproject } from "./address"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
@@ -306,88 +308,44 @@ function toLatLon(at: { x: number; y: number }): LatLon {
 }
 
 const panning = ref(false)
-// A drag is a pan, not a pick — track whether the pointer actually travelled so
-// releasing after a drag doesn't also drop the pin.
-let moved = false
-let last = { x: 0, y: 0 }
-// Pointer velocity in px/ms, smoothed so one jittery frame at the end of a
-// flick doesn't decide where the map coasts to.
-let velocity = { x: 0, y: 0 }
-let lastMove = 0
-let glideFrame: number | undefined
+// A drag is a pan, not a pick: a press that never leaves the slop drops the
+// pin on release, one that does pans. The kit's drag session makes that call
+// and measures the speed at release, and glide coasts on from it.
+let session: DragSession | null = null
+let coast: Glide | null = null
 
 function stopGlide() {
-  if (glideFrame !== undefined) cancelAnimationFrame(glideFrame)
-  glideFrame = undefined
-  velocity = { x: 0, y: 0 }
+  coast?.stop()
+  coast = null
 }
 
 function onPointerDown(e: PointerEvent) {
   if (props.disabled || e.button !== 0 || zooming.value) return
   stopGlide()
   panning.value = true
-  moved = false
-  last = { x: e.clientX, y: e.clientY }
-  lastMove = performance.now()
+  session = createDragSession({ x: e.clientX, y: e.clientY }, e.timeStamp, { slop: slopFor(e.pointerType) })
   ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
 }
 
 function onPointerMove(e: PointerEvent) {
-  if (!panning.value) return
-  const dx = e.clientX - last.x
-  const dy = e.clientY - last.y
-  if (Math.abs(dx) > 2 || Math.abs(dy) > 2) moved = true
-
-  const now = performance.now()
-  const dt = now - lastMove
-  if (dt > 0) {
-    velocity = {
-      x: velocity.x * 0.7 + (dx / dt) * 0.3,
-      y: velocity.y * 0.7 + (dy / dt) * 0.3,
-    }
-  }
-  lastMove = now
-  last = { x: e.clientX, y: e.clientY }
-  panBy(-dx, -dy)
+  if (!panning.value || !session) return
+  const frame = session.move({ x: e.clientX, y: e.clientY }, e.timeStamp)
+  if (frame.phase !== "drag") return
+  panBy(-(frame.first ? frame.movement.x : frame.delta.x), -(frame.first ? frame.movement.y : frame.delta.y))
 }
 
 function onPointerUp(e: PointerEvent) {
-  if (!panning.value) return
+  if (!panning.value || !session) return
   panning.value = false
   ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
-  if (!moved && !props.disabled) {
-    emit("update:modelValue", toLatLon(viewportPoint(e)))
-    return
-  }
-  // Nothing to coast from if the pointer was resting when it lifted.
-  if (performance.now() - lastMove > 90) velocity = { x: 0, y: 0 }
-  glide()
-}
-
-/*
- * Momentum: keep panning after release and bleed the speed off exponentially,
- * so letting go of a flick drifts to a stop instead of stopping dead. Time-based
- * rather than per-frame, which keeps the feel identical at 60 and 144 Hz.
- */
-function glide() {
-  if (prefersReducedMotion() || Math.hypot(velocity.x, velocity.y) < 0.05) {
-    velocity = { x: 0, y: 0 }
+  const end = session.end({ x: e.clientX, y: e.clientY }, e.timeStamp)
+  session = null
+  if (end.phase !== "drag") {
+    if (!props.disabled && e.type !== "pointercancel") emit("update:modelValue", toLatLon(viewportPoint(e)))
     return
   }
-  let previous = performance.now()
-  const step = (now: number) => {
-    const dt = Math.min(now - previous, 32)
-    previous = now
-    const friction = Math.exp(-dt / 240)
-    velocity = { x: velocity.x * friction, y: velocity.y * friction }
-    panBy(-velocity.x * dt, -velocity.y * dt)
-    if (Math.hypot(velocity.x, velocity.y) > 0.015) {
-      glideFrame = requestAnimationFrame(step)
-    } else {
-      stopGlide()
-    }
-  }
-  glideFrame = requestAnimationFrame(step)
+  if (e.type === "pointercancel") return
+  coast = glide(end.velocity, (dx, dy) => panBy(-dx, -dy), { win: nodeWindow(e.currentTarget as Node) })
 }
 
 function panBy(dx: number, dy: number) {