@leavepulse/ui 0.15.4 → 0.15.5

package/src/components/LpLightbox.vue

@@ -0,0 +1,421 @@
+<script setup lang="ts">
+/*
+ * Full-screen image viewer — the Discord-style lightbox: click a thumbnail, the
+ * image fills the screen, arrows step through the set, the wheel zooms toward
+ * the cursor, dragging pans, and the backdrop or Esc closes it.
+ *
+ * Built on reka's Dialog so focus trapping, Esc and scroll locking come from the
+ * same primitive the rest of the kit's overlays use. The zoom/pan maths lives in
+ * useZoomPan — this component is the shell: chrome, keyboard map, filmstrip and
+ * the swipe-to-navigate gesture.
+ *
+ * Controlled via v-model:open and v-model:index, so the caller owns which image
+ * is showing and can drive it from a grid, a route or a keyboard shortcut.
+ */
+import {
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+} from "reka-ui"
+import { computed, nextTick, ref, watch } from "vue"
+import { useZoomPan } from "../composables/useZoomPan"
+import { fileNameOf, type LightboxItem } from "./lightbox"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    /** Images to page through. */
+    items: LightboxItem[]
+    /** Index of the visible image (v-model:index). */
+    index?: number
+    /** Thumbnail strip along the bottom. Defaults on when there's more than one. */
+    filmstrip?: boolean
+    /** Show the rotate control. */
+    rotatable?: boolean
+    /** Show the download control. */
+    downloadable?: boolean
+    /** Show "copy image" — needs a same-origin or CORS-readable source. */
+    copyable?: boolean
+    /** Wrap from the last image back to the first. */
+    loop?: boolean
+    /** Largest zoom level. */
+    maxZoom?: number
+  }>(),
+  {
+    open: false,
+    index: 0,
+    rotatable: true,
+    downloadable: true,
+    copyable: false,
+    loop: true,
+    maxZoom: 8,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+  (e: "update:index", value: number): void
+  /** The visible image changed (after clamping/looping). */
+  (e: "change", index: number, item: LightboxItem): void
+  (e: "download", item: LightboxItem): void
+  /** Copy finished — `false` when the browser refused (tainted/cross-origin). */
+  (e: "copy", item: LightboxItem, ok: boolean): void
+}>()
+
+defineSlots<{
+  /** Replace the caption block under the image. */
+  caption(props: { item: LightboxItem; index: number; total: number }): unknown
+  /** Extra controls in the toolbar, before the close button. */
+  actions(props: { item: LightboxItem; index: number }): unknown
+}>()
+
+const zoom = useZoomPan({ max: props.maxZoom })
+
+// `zoom` is a plain object, so its refs don't unwrap in the template — surface
+// the two the chrome reads as computeds rather than writing `.value` in markup.
+const scale = computed(() => zoom.scale.value)
+const isZoomed = computed(() => zoom.zoomed.value)
+const isPanning = computed(() => zoom.panning.value)
+
+const current = computed(() => Math.min(Math.max(props.index, 0), Math.max(props.items.length - 1, 0)))
+const item = computed<LightboxItem | undefined>(() => props.items[current.value])
+const total = computed(() => props.items.length)
+const showStrip = computed(() => props.filmstrip ?? total.value > 1)
+
+const rotation = ref(0)
+const loading = ref(false)
+const failed = ref(false)
+const viewport = ref<HTMLElement | null>(null)
+const stripEl = ref<HTMLElement | null>(null)
+
+watch(viewport, (el) => zoom.setViewport(el))
+
+function go(next: number) {
+  if (!total.value) return
+  const wrapped = props.loop
+    ? (next + total.value) % total.value
+    : Math.min(Math.max(next, 0), total.value - 1)
+  if (wrapped === current.value) return
+  emit("update:index", wrapped)
+  emit("change", wrapped, props.items[wrapped])
+}
+
+const canPrev = computed(() => total.value > 1 && (props.loop || current.value > 0))
+const canNext = computed(() => total.value > 1 && (props.loop || current.value < total.value - 1))
+
+// Reset the view whenever the image changes — carrying a 4x zoom onto the next
+// picture means landing on a random crop of it.
+watch(
+  () => [current.value, props.open] as const,
+  () => {
+    zoom.reset()
+    rotation.value = 0
+    failed.value = false
+    loading.value = true
+    if (props.open) nextTick(scrollThumbIntoView)
+  },
+)
+
+function scrollThumbIntoView() {
+  const el = stripEl.value?.querySelector<HTMLElement>(`[data-index="${current.value}"]`)
+  el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
+}
+
+function close() {
+  emit("update:open", false)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  switch (e.key) {
+    case "ArrowRight":
+      e.preventDefault()
+      go(current.value + 1)
+      break
+    case "ArrowLeft":
+      e.preventDefault()
+      go(current.value - 1)
+      break
+    case "Home":
+      e.preventDefault()
+      go(0)
+      break
+    case "End":
+      e.preventDefault()
+      go(total.value - 1)
+      break
+    case "+":
+    case "=":
+      e.preventDefault()
+      zoom.zoomBy(1.3)
+      break
+    case "-":
+      e.preventDefault()
+      zoom.zoomBy(1 / 1.3)
+      break
+    case "0":
+      e.preventDefault()
+      zoom.reset()
+      break
+    case "r":
+      if (props.rotatable) {
+        e.preventDefault()
+        rotate()
+      }
+      break
+  }
+}
+
+function rotate() {
+  rotation.value = (rotation.value + 90) % 360
+  zoom.reset()
+}
+
+// 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
+
+function onPointerDown(e: PointerEvent) {
+  zoom.onPointerDown(e)
+  swipeStart = zoom.zoomed.value ? null : { x: e.clientX, y: e.clientY }
+}
+
+function onPointerUp(e: PointerEvent) {
+  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))
+  }
+}
+
+function onDoubleClick(e: MouseEvent) {
+  zoom.toggleZoom({ x: e.clientX, y: e.clientY })
+}
+
+/** Backdrop click closes; a click that ends a pan or lands on the image doesn't. */
+function onViewportClick(e: MouseEvent) {
+  if (zoom.zoomed.value) return
+  if ((e.target as HTMLElement).closest("[data-lightbox-image]")) return
+  close()
+}
+
+async function download() {
+  const target = item.value
+  if (!target) return
+  emit("download", target)
+  const a = document.createElement("a")
+  a.href = target.src
+  a.download = fileNameOf(target)
+  // Cross-origin sources ignore `download` and just navigate, so open those in
+  // a new tab instead of replacing the app.
+  a.rel = "noopener"
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+async function copy() {
+  const target = item.value
+  if (!target) return
+  try {
+    const response = await fetch(target.src)
+    const blob = await response.blob()
+    // Clipboard only takes PNG; re-encode anything else through a canvas.
+    const png =
+      blob.type === "image/png" ? blob : await reencodeToPng(await createImageBitmap(blob))
+    await navigator.clipboard.write([new ClipboardItem({ "image/png": png })])
+    emit("copy", target, true)
+  } catch {
+    emit("copy", target, false)
+  }
+}
+
+async function reencodeToPng(bitmap: ImageBitmap): Promise<Blob> {
+  const canvas = document.createElement("canvas")
+  canvas.width = bitmap.width
+  canvas.height = bitmap.height
+  canvas.getContext("2d")?.drawImage(bitmap, 0, 0)
+  return new Promise((resolve, reject) =>
+    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("encode failed"))), "image/png"),
+  )
+}
+
+const imageStyle = computed(() => ({
+  ...zoom.style.value,
+  rotate: `${rotation.value}deg`,
+}))
+
+const BTN =
+  "flex size-9 items-center justify-center rounded-control text-white/80 outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/15 hover:text-white focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+const ARROW =
+  "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0"
+</script>
+
+<template>
+  <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 z-(--z-overlay) bg-black/85 backdrop-blur-sm data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+      />
+      <DialogContent
+        class="fixed inset-0 z-(--z-modal) flex flex-col outline-none data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        @keydown="onKeydown"
+      >
+        <!-- reka wants both for a labelled dialog; the caption is the title. -->
+        <DialogTitle class="sr-only">{{ item?.title ?? "Image viewer" }}</DialogTitle>
+        <DialogDescription class="sr-only">
+          {{ item?.description ?? `Image ${current + 1} of ${total}` }}
+        </DialogDescription>
+
+        <!-- Toolbar -->
+        <div class="flex shrink-0 items-center gap-1 p-3 text-sm text-white/70">
+          <span v-if="total > 1" class="px-2 tabular-nums">{{ current + 1 }} / {{ total }}</span>
+          <span v-if="isZoomed" class="px-2 tabular-nums">
+            {{ Math.round(scale * 100) }}%
+          </span>
+
+          <div class="ml-auto flex items-center gap-1">
+            <slot name="actions" :item="item!" :index="current" />
+
+            <button :class="BTN" type="button" title="Zoom out (−)" @click="zoom.zoomBy(1 / 1.3)">
+              <LpIcon name="lucide:zoom-out" :size="18" />
+            </button>
+            <button :class="BTN" type="button" title="Zoom in (+)" @click="zoom.zoomBy(1.3)">
+              <LpIcon name="lucide:zoom-in" :size="18" />
+            </button>
+            <button
+              v-if="rotatable"
+              :class="BTN"
+              type="button"
+              title="Rotate (R)"
+              @click="rotate"
+            >
+              <LpIcon name="lucide:rotate-cw" :size="18" />
+            </button>
+            <button v-if="copyable" :class="BTN" type="button" title="Copy image" @click="copy">
+              <LpIcon name="lucide:copy" :size="18" />
+            </button>
+            <button
+              v-if="downloadable"
+              :class="BTN"
+              type="button"
+              title="Download"
+              @click="download"
+            >
+              <LpIcon name="lucide:download" :size="18" />
+            </button>
+            <button :class="BTN" type="button" title="Close (Esc)" @click="close">
+              <LpIcon name="lucide:x" :size="20" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Stage -->
+        <div
+          ref="viewport"
+          class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"
+          :class="isPanning ? 'cursor-grabbing' : isZoomed ? 'cursor-grab' : ''"
+          @wheel="zoom.onWheel"
+          @pointerdown="onPointerDown"
+          @pointermove="zoom.onPointerMove"
+          @pointerup="onPointerUp"
+          @pointercancel="zoom.onPointerUp"
+          @dblclick="onDoubleClick"
+          @click="onViewportClick"
+        >
+          <button
+            :class="[ARROW, 'left-4']"
+            type="button"
+            :disabled="!canPrev"
+            aria-label="Previous image"
+            @click.stop="go(current - 1)"
+          >
+            <LpIcon name="lucide:chevron-left" :size="24" />
+          </button>
+
+          <div
+            v-if="failed"
+            class="flex flex-col items-center gap-3 text-white/60"
+          >
+            <LpIcon name="lucide:image-off" :size="40" />
+            <p class="text-sm">This image couldn't be loaded.</p>
+          </div>
+          <img
+            v-else-if="item"
+            :key="item.src"
+            data-lightbox-image
+            :src="item.src"
+            :alt="item.title ?? ''"
+            class="max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+            :style="imageStyle"
+            draggable="false"
+            @load="loading = false"
+            @error="((failed = true), (loading = false))"
+          />
+
+          <LpIcon
+            v-if="loading && !failed"
+            name="lucide:loader-circle"
+            :size="28"
+            class="absolute animate-spin text-white/50"
+          />
+
+          <button
+            :class="[ARROW, 'right-4']"
+            type="button"
+            :disabled="!canNext"
+            aria-label="Next image"
+            @click.stop="go(current + 1)"
+          >
+            <LpIcon name="lucide:chevron-right" :size="24" />
+          </button>
+        </div>
+
+        <!-- Caption + filmstrip -->
+        <div class="shrink-0 p-3 pt-2">
+          <slot name="caption" :item="item!" :index="current" :total="total">
+            <div v-if="item?.title || item?.description" class="mb-2 text-center">
+              <p v-if="item.title" class="truncate text-sm font-medium text-white">
+                {{ item.title }}
+              </p>
+              <p v-if="item.description" class="truncate text-xs text-white/55">
+                {{ item.description }}
+              </p>
+            </div>
+          </slot>
+
+          <div
+            v-if="showStrip && total > 1"
+            ref="stripEl"
+            class="lp-scrollbar-none flex justify-start gap-2 overflow-x-auto sm:justify-center"
+          >
+            <button
+              v-for="(entry, i) in items"
+              :key="entry.src + i"
+              :data-index="i"
+              type="button"
+              class="size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow] duration-[var(--duration-fast)] focus-visible:ring-ring"
+              :class="i === current ? 'opacity-100 ring-brand' : 'opacity-45 ring-transparent hover:opacity-80'"
+              :aria-label="entry.title ?? `Image ${i + 1}`"
+              @click="go(i)"
+            >
+              <img
+                :src="entry.thumb ?? entry.src"
+                :alt="entry.title ?? ''"
+                class="size-full object-cover"
+                draggable="false"
+              />
+            </button>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/src/components/LpModal.vue

@@ -78,10 +78,15 @@ const bodyPad = computed(() =>
            the difference, and while the open animation was still running that
            read as a stutter. Anchoring the wrapper instead means the panel only
            grows downward and the animation has nothing to fight.
-           `pointer-events-none` lets clicks through to the overlay behind it. -->
-      <div class="fixed inset-0 z-(--z-modal) flex items-center justify-center p-4 pointer-events-none">
+           `pointer-events-none` lets clicks through to the overlay behind it.
+
+           The panel keeps its OWN max-height rather than inheriting one from
+           this wrapper: `max-h-full` on a centred flex child resolves against a
+           box it is free to overflow, so a tall body stopped handing its
+           overflow to the scroll area below and simply ran off-screen. -->
+      <div class="fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none">
       <DialogContent
-        class="pointer-events-auto flex max-h-full flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
+        class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
         :class="widthClass"
         :style="width ? { width } : undefined"
       >

package/src/components/lightbox.ts

@@ -0,0 +1,32 @@
+/*
+ * Shared lightbox types. Its own module so LpLightbox and anything building a
+ * gallery around it can import the item shape without a component cycle.
+ */
+
+export interface LightboxItem {
+  /** Full-size source. */
+  src: string
+  /** Smaller source for the filmstrip; falls back to `src`. */
+  thumb?: string
+  /** Caption under the image, and the img alt text. */
+  title?: string
+  /** Secondary line under the title (size, date, resolution…). */
+  description?: string
+  /** Filename used when downloading; derived from `src` when absent. */
+  filename?: string
+}
+
+/** Last path segment of a URL, or a fallback — used to name a download. */
+export function fileNameOf(item: LightboxItem, fallback = "image"): string {
+  if (item.filename) return item.filename
+  try {
+    // Works for blob:/data: too — those just have no useful tail, hence the
+    // fallback below.
+    const path = new URL(item.src, "http://x").pathname
+    const tail = decodeURIComponent(path.split("/").pop() ?? "")
+    if (tail) return tail
+  } catch {
+    // Not a parseable URL; fall through.
+  }
+  return fallback
+}

package/src/composables/useZoomPan.ts

@@ -0,0 +1,211 @@
+import { computed, ref, type ComputedRef, type CSSProperties, type Ref } from "vue"
+
+/*
+ * useZoomPan — zoom + pan for a single element inside a viewport, the way an
+ * image viewer behaves: the wheel zooms toward the pointer (so the pixel under
+ * the cursor stays put), dragging pans, and a two-finger pinch does both at
+ * once. Pans are clamped so the content can't be flung off into empty space.
+ *
+ * Split out of LpLightbox because none of this is lightbox-specific — a map, a
+ * diagram or a zoomable preview needs exactly the same maths.
+ *
+ * Bind `style` to the moving element, the handlers to the viewport, and call
+ * `reset()` whenever the content changes.
+ */
+export interface UseZoomPanOptions {
+  /** Smallest allowed scale. Default 1 (fit — never shrink past the viewport). */
+  min?: number
+  /** Largest allowed scale. Default 8. */
+  max?: number
+  /** Multiplier per wheel notch. Default 1.15. */
+  step?: number
+  /** Scale that a double-click/tap toggles to, from `min`. Default 2. */
+  zoomedScale?: number
+}
+
+export interface UseZoomPan {
+  scale: Ref<number>
+  /** True once zoomed past the minimum — the point at which panning matters. */
+  zoomed: ComputedRef<boolean>
+  /** True while a drag is in flight, so the caller can swap the cursor. */
+  panning: Ref<boolean>
+  style: ComputedRef<CSSProperties>
+  onWheel: (e: WheelEvent) => void
+  onPointerDown: (e: PointerEvent) => void
+  onPointerMove: (e: PointerEvent) => void
+  onPointerUp: (e: PointerEvent) => void
+  /** Zoom about the viewport centre (buttons, keyboard). */
+  zoomBy: (factor: number) => void
+  /** Toggle between fit and `zoomedScale`, optionally about a point. */
+  toggleZoom: (origin?: { x: number; y: number }) => void
+  reset: () => void
+  /** Call with the viewport element so pointer coords can be made relative. */
+  setViewport: (el: HTMLElement | null) => void
+}
+
+export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
+  const min = options.min ?? 1
+  const max = options.max ?? 8
+  const step = options.step ?? 1.15
+  const zoomedScale = options.zoomedScale ?? 2
+
+  const scale = ref(min)
+  const x = ref(0)
+  const y = ref(0)
+  const panning = ref(false)
+
+  let viewport: HTMLElement | null = null
+  // Active pointers, so a second finger can be detected for pinch.
+  const pointers = new Map<number, { x: number; y: number }>()
+  let start = { x: 0, y: 0, panX: 0, panY: 0 }
+  let pinchStartDistance = 0
+  let pinchStartScale = 1
+
+  const zoomed = computed(() => scale.value > min + 0.001)
+
+  function setViewport(el: HTMLElement | null) {
+    viewport = el
+  }
+
+  function clamp(value: number, lo: number, hi: number) {
+    return Math.min(hi, Math.max(lo, value))
+  }
+
+  /**
+   * Keep the content overlapping the viewport. The translate is applied before
+   * the scale, so the slack on each axis is half of what the growth adds — at
+   * fit scale there's none, which pins the image centred.
+   */
+  function clampPan() {
+    if (!viewport) return
+    const rect = viewport.getBoundingClientRect()
+    const slackX = (rect.width * (scale.value - 1)) / 2 / scale.value
+    const slackY = (rect.height * (scale.value - 1)) / 2 / scale.value
+    x.value = clamp(x.value, -slackX, slackX)
+    y.value = clamp(y.value, -slackY, slackY)
+  }
+
+  /** Zoom to `next`, holding the viewport-relative point `px,py` in place. */
+  function zoomAbout(next: number, px: number, py: number) {
+    const clamped = clamp(next, min, max)
+    if (clamped === scale.value) return
+    // Where the cursor sits in content space before the change; solving for the
+    // same content point after gives the translate that keeps it under the
+    // cursor rather than drifting toward the centre.
+    const contentX = px / scale.value - x.value
+    const contentY = py / scale.value - y.value
+    scale.value = clamped
+    x.value = px / clamped - contentX
+    y.value = py / clamped - contentY
+    clampPan()
+  }
+
+  /** Pointer position relative to the viewport centre. */
+  function relative(e: { clientX: number; clientY: number }) {
+    if (!viewport) return { x: 0, y: 0 }
+    const rect = viewport.getBoundingClientRect()
+    return {
+      x: e.clientX - rect.left - rect.width / 2,
+      y: e.clientY - rect.top - rect.height / 2,
+    }
+  }
+
+  function onWheel(e: WheelEvent) {
+    e.preventDefault()
+    const point = relative(e)
+    zoomAbout(scale.value * (e.deltaY < 0 ? step : 1 / step), point.x, point.y)
+  }
+
+  function distance(a: { x: number; y: number }, b: { x: number; y: number }) {
+    return Math.hypot(a.x - b.x, a.y - b.y)
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+
+    if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()]
+      pinchStartDistance = distance(a, b)
+      pinchStartScale = scale.value
+      panning.value = false
+      return
+    }
+    if (pointers.size > 2) return
+
+    // Pan only when there's somewhere to pan to; at fit scale a drag is left
+    // free for the caller (LpLightbox uses it to swipe between images).
+    if (!zoomed.value) return
+    panning.value = true
+    start = { x: e.clientX, y: e.clientY, panX: x.value, panY: y.value }
+    ;(e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId)
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!pointers.has(e.pointerId)) return
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
+
+    if (pointers.size === 2 && pinchStartDistance > 0) {
+      const [a, b] = [...pointers.values()]
+      const mid = { clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 }
+      const point = relative(mid)
+      zoomAbout(pinchStartScale * (distance(a, b) / pinchStartDistance), point.x, point.y)
+      return
+    }
+
+    if (!panning.value) return
+    // Divide by scale: the translate is in content space, which the transform
+    // then magnifies — without this the image races ahead of the cursor.
+    x.value = start.panX + (e.clientX - start.x) / scale.value
+    y.value = start.panY + (e.clientY - start.y) / scale.value
+    clampPan()
+  }
+
+  function onPointerUp(e: PointerEvent) {
+    pointers.delete(e.pointerId)
+    if (pointers.size < 2) pinchStartDistance = 0
+    if (pointers.size === 0) panning.value = false
+  }
+
+  function zoomBy(factor: number) {
+    zoomAbout(scale.value * factor, 0, 0)
+  }
+
+  function toggleZoom(origin?: { x: number; y: number }) {
+    if (zoomed.value) {
+      reset()
+      return
+    }
+    const point = origin ? relative({ clientX: origin.x, clientY: origin.y }) : { x: 0, y: 0 }
+    zoomAbout(zoomedScale, point.x, point.y)
+  }
+
+  function reset() {
+    scale.value = min
+    x.value = 0
+    y.value = 0
+    panning.value = false
+    pointers.clear()
+    pinchStartDistance = 0
+  }
+
+  const style = computed<CSSProperties>(() => ({
+    transform: `scale(${scale.value}) translate(${x.value}px, ${y.value}px)`,
+    // Settle smoothly on discrete zooms, but follow a drag or pinch exactly.
+    transition: panning.value || pinchStartDistance > 0 ? "none" : undefined,
+  }))
+
+  return {
+    scale,
+    zoomed,
+    panning,
+    style,
+    onWheel,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    zoomBy,
+    toggleZoom,
+    reset,
+    setViewport,
+  }
+}