use-zoom-pinch 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 nemezzizz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# useZoomPinch
+
+Lightweight React hook for **pan**, **pinch-to-zoom**, and **scroll zoom** with trackpad and touch support. Zero dependencies beyond React.
+
+[**Live Demo**](https://nemezzizz.github.io/use-zoom-pinch/)
+
+## Features
+
+- **Scroll to pan** — mouse wheel and trackpad two-finger scroll
+- **Pinch to zoom** — trackpad pinch (via `ctrlKey` + wheel) and multi-touch pinch on mobile
+- **Pointer drag** — mouse drag and single-touch drag for panning
+- **Controlled & uncontrolled** modes
+- **Stable listeners** — config changes don't re-register event listeners
+- **TypeScript-first** with full type exports
+- **Tree-shakeable** ESM + CJS dual build
+- **~2 KB** minified + gzipped
+
+## Installation
+
+```bash
+npm install use-zoom-pinch
+```
+
+## Quick Start
+
+```tsx
+import { useRef } from "react"
+import { useZoomPinch } from "use-zoom-pinch"
+
+function Canvas() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { view } = useZoomPinch({ containerRef })
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ width: "100%", height: "100vh", overflow: "hidden", touchAction: "none" }}
+    >
+      <div
+        style={{
+          transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`,
+          transformOrigin: "0 0",
+        }}
+      >
+        {/* Your zoomable content here */}
+      </div>
+    </div>
+  )
+}
+```
+
+## Controlled Mode
+
+```tsx
+import { useRef, useState } from "react"
+import { useZoomPinch, type ViewState } from "use-zoom-pinch"
+
+function ControlledCanvas() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [viewState, setViewState] = useState<ViewState>({ x: 0, y: 0, zoom: 1 })
+
+  const { view, centerZoom, resetView } = useZoomPinch({
+    containerRef,
+    viewState,
+    onViewStateChange: setViewState,
+  })
+
+  return (
+    <div>
+      <button onClick={() => centerZoom(view.zoom * 1.5)}>Zoom In</button>
+      <button onClick={() => centerZoom(view.zoom / 1.5)}>Zoom Out</button>
+      <button onClick={resetView}>Reset</button>
+
+      <div
+        ref={containerRef}
+        style={{ width: "100%", height: "100vh", overflow: "hidden", touchAction: "none" }}
+      >
+        <div
+          style={{
+            transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`,
+            transformOrigin: "0 0",
+          }}
+        >
+          {/* Your content */}
+        </div>
+      </div>
+    </div>
+  )
+}
+```
+
+## API
+
+### `useZoomPinch(options)`
+
+#### Options
+
+| Option              | Type                             | Default                   | Description                         |
+| ------------------- | -------------------------------- | ------------------------- | ----------------------------------- |
+| `containerRef`      | `RefObject<HTMLElement \| null>` | _required_                | Ref to the container element        |
+| `minScale`          | `number`                         | `0.1`                     | Minimum zoom level                  |
+| `maxScale`          | `number`                         | `50`                      | Maximum zoom level                  |
+| `panSpeed`          | `number`                         | `1`                       | Pan speed multiplier (mouse wheel)  |
+| `zoomSpeed`         | `number`                         | `1`                       | Zoom speed multiplier (mouse wheel) |
+| `initialViewState`  | `ViewState`                      | `{ x: 0, y: 0, zoom: 1 }` | Initial view for uncontrolled mode  |
+| `viewState`         | `ViewState`                      | —                         | Controlled view state               |
+| `onViewStateChange` | `(view: ViewState) => void`      | —                         | Callback on view change             |
+| `enabled`           | `boolean`                        | `true`                    | Enable/disable gesture handling     |
+
+#### Returns
+
+| Property     | Type                        | Description                          |
+| ------------ | --------------------------- | ------------------------------------ |
+| `view`       | `ViewState`                 | Current view state                   |
+| `setView`    | `(view: ViewState) => void` | Imperatively set the view            |
+| `centerZoom` | `(zoom: number) => void`    | Zoom to level, centered in container |
+| `resetView`  | `() => void`                | Reset to `{ x: 0, y: 0, zoom: 1 }`   |
+
+### `ViewState`
+
+```ts
+interface ViewState {
+  x: number // horizontal offset in pixels
+  y: number // vertical offset in pixels
+  zoom: number // scale factor (1 = 100%)
+}
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,189 @@
+'use strict';
+
+var react = require('react');
+
+// src/useZoomPinch.ts
+var DEFAULT_VIEW = { x: 0, y: 0, zoom: 1 };
+function useZoomPinch({
+  containerRef,
+  minScale = 0.1,
+  maxScale = 50,
+  panSpeed = 1,
+  zoomSpeed = 1,
+  initialViewState = DEFAULT_VIEW,
+  viewState,
+  onViewStateChange,
+  enabled = true
+}) {
+  const [internalView, setInternalView] = react.useState(initialViewState);
+  const view = viewState ?? internalView;
+  const viewRef = react.useRef(view);
+  viewRef.current = view;
+  const enabledRef = react.useRef(enabled);
+  enabledRef.current = enabled;
+  const onViewStateChangeRef = react.useRef(onViewStateChange);
+  onViewStateChangeRef.current = onViewStateChange;
+  const configRef = react.useRef({ minScale, maxScale, panSpeed, zoomSpeed });
+  configRef.current = { minScale, maxScale, panSpeed, zoomSpeed };
+  const updateView = react.useCallback((updater) => {
+    const prev = viewRef.current;
+    const next = updater(prev);
+    if (next.x === prev.x && next.y === prev.y && next.zoom === prev.zoom) {
+      return;
+    }
+    if (onViewStateChangeRef.current) {
+      onViewStateChangeRef.current(next);
+    } else {
+      setInternalView(next);
+    }
+  }, []);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const getRelCoords = (clientX, clientY) => {
+      const rect = el.getBoundingClientRect();
+      return { px: clientX - rect.left, py: clientY - rect.top };
+    };
+    const onWheel = (e) => {
+      if (!enabledRef.current) return;
+      e.preventDefault();
+      let deltaX = e.deltaX;
+      let deltaY = e.deltaY;
+      const { ctrlKey, clientX, clientY } = e;
+      const isTrackpad = e.deltaMode === 0 && (Math.abs(deltaY) < 100 || !Number.isInteger(deltaY));
+      if (!isTrackpad) {
+        const LINE_STEP = 120;
+        if (Math.abs(deltaY) >= 100) deltaY = Math.sign(deltaY) * (Math.abs(deltaY) / LINE_STEP);
+        if (Math.abs(deltaX) >= 100) deltaX = Math.sign(deltaX) * (Math.abs(deltaX) / LINE_STEP);
+      }
+      const { minScale: minScale2, maxScale: maxScale2, panSpeed: panSpeed2, zoomSpeed: zoomSpeed2 } = configRef.current;
+      updateView((prev) => {
+        if (ctrlKey) {
+          const speed = isTrackpad ? 0.01 : 0.1 * zoomSpeed2;
+          const factor = 1 - deltaY * speed;
+          const newZoom = clamp(prev.zoom * factor, minScale2, maxScale2);
+          if (newZoom === prev.zoom) return prev;
+          const { px, py } = getRelCoords(clientX, clientY);
+          const s = newZoom / prev.zoom;
+          return { zoom: newZoom, x: px - (px - prev.x) * s, y: py - (py - prev.y) * s };
+        }
+        const multiplier = isTrackpad ? 1 : 25 * panSpeed2;
+        return { ...prev, x: prev.x - deltaX * multiplier, y: prev.y - deltaY * multiplier };
+      });
+    };
+    let isDragging = false;
+    let lastPointer = { x: 0, y: 0 };
+    const activePointers = /* @__PURE__ */ new Set();
+    const onPointerDown = (e) => {
+      if (!enabledRef.current) return;
+      activePointers.add(e.pointerId);
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      if (activePointers.size >= 2) {
+        isDragging = false;
+        return;
+      }
+      isDragging = true;
+      lastPointer = { x: e.clientX, y: e.clientY };
+    };
+    const onPointerMove = (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const dx = e.clientX - lastPointer.x;
+      const dy = e.clientY - lastPointer.y;
+      lastPointer = { x: e.clientX, y: e.clientY };
+      updateView((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }));
+    };
+    const onPointerUp = (e) => {
+      activePointers.delete(e.pointerId);
+      if (activePointers.size === 0) isDragging = false;
+    };
+    let pinchState = { zoom: 1, x: 0, y: 0 };
+    let initialDist = 0;
+    let initialCenter = { x: 0, y: 0 };
+    let isPinching = false;
+    const onTouchStart = (e) => {
+      if (!enabledRef.current || e.touches.length < 2) return;
+      isDragging = false;
+      isPinching = true;
+      const t1 = e.touches[0];
+      const t2 = e.touches[1];
+      initialDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
+      initialCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 };
+      pinchState = { ...viewRef.current };
+    };
+    const onTouchMove = (e) => {
+      if (e.touches.length < 2 || !isPinching) return;
+      e.preventDefault();
+      const t1 = e.touches[0];
+      const t2 = e.touches[1];
+      const { minScale: minScale2, maxScale: maxScale2 } = configRef.current;
+      const currentDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
+      const currentCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 };
+      const newZoom = clamp(pinchState.zoom * (currentDist / initialDist), minScale2, maxScale2);
+      const s = newZoom / pinchState.zoom;
+      const { px, py } = getRelCoords(initialCenter.x, initialCenter.y);
+      updateView(() => ({
+        zoom: newZoom,
+        x: px - (px - pinchState.x) * s + (currentCenter.x - initialCenter.x),
+        y: py - (py - pinchState.y) * s + (currentCenter.y - initialCenter.y)
+      }));
+    };
+    const onTouchEnd = (e) => {
+      if (e.touches.length < 2) isPinching = false;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointermove", onPointerMove, { passive: false });
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerUp);
+    el.addEventListener("touchstart", onTouchStart, { passive: false });
+    el.addEventListener("touchmove", onTouchMove, { passive: false });
+    el.addEventListener("touchend", onTouchEnd);
+    el.addEventListener("touchcancel", onTouchEnd);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", onTouchEnd);
+      el.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, [containerRef, updateView]);
+  const setView = react.useCallback((v) => {
+    if (onViewStateChangeRef.current) {
+      onViewStateChangeRef.current(v);
+    } else {
+      setInternalView(v);
+    }
+  }, []);
+  const centerZoom = react.useCallback(
+    (targetZoom) => {
+      updateView((prev) => {
+        const { minScale: minScale2, maxScale: maxScale2 } = configRef.current;
+        const newZoom = clamp(targetZoom, minScale2, maxScale2);
+        const cx = (containerRef.current?.offsetWidth ?? 0) / 2;
+        const cy = (containerRef.current?.offsetHeight ?? 0) / 2;
+        const s = newZoom / prev.zoom;
+        return { zoom: newZoom, x: cx - (cx - prev.x) * s, y: cy - (cy - prev.y) * s };
+      });
+    },
+    [containerRef, updateView]
+  );
+  const resetView = react.useCallback(() => setView(DEFAULT_VIEW), [setView]);
+  return { view, setView, centerZoom, resetView };
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+function distance(x1, y1, x2, y2) {
+  const dx = x1 - x2;
+  const dy = y1 - y2;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+exports.useZoomPinch = useZoomPinch;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useZoomPinch.ts"],"names":["useState","useRef","useCallback","useEffect","minScale","maxScale","panSpeed","zoomSpeed"],"mappings":"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","file":"index.cjs","sourcesContent":["import { type RefObject, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport interface ViewState {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface UseZoomPinchOptions {\n  /** Ref to the container element that receives gesture events. */\n  containerRef: RefObject<HTMLElement | null>\n  /** Minimum allowed zoom level. @default 0.1 */\n  minScale?: number\n  /** Maximum allowed zoom level. @default 50 */\n  maxScale?: number\n  /** Multiplier for pan speed (mouse wheel only). @default 1 */\n  panSpeed?: number\n  /** Multiplier for zoom speed (mouse wheel only). @default 1 */\n  zoomSpeed?: number\n  /** Initial view state used when uncontrolled. @default \\{ x: 0, y: 0, zoom: 1 \\} */\n  initialViewState?: ViewState\n  /** Controlled view state. When provided, the hook becomes controlled. */\n  viewState?: ViewState\n  /** Callback fired on every view change. Required for controlled mode. */\n  onViewStateChange?: (view: ViewState) => void\n  /** Enable or disable all gesture handling. @default true */\n  enabled?: boolean\n}\n\nexport interface UseZoomPinchReturn {\n  /** Current view state (position + zoom). */\n  view: ViewState\n  /** Imperatively set the view state. */\n  setView: (view: ViewState) => void\n  /** Zoom to a target level, keeping the container center as anchor. */\n  centerZoom: (targetZoom: number) => void\n  /** Reset view to \\{ x: 0, y: 0, zoom: 1 \\}. */\n  resetView: () => void\n}\n\nconst DEFAULT_VIEW: ViewState = { x: 0, y: 0, zoom: 1 }\n\n/**\n * React hook for pan, pinch-to-zoom, and scroll-zoom gestures.\n *\n * Supports mouse wheel (discrete + trackpad), pointer drag, and multi-touch pinch.\n * Works in both controlled (`viewState` + `onViewStateChange`) and uncontrolled modes.\n */\nexport function useZoomPinch({\n  containerRef,\n  minScale = 0.1,\n  maxScale = 50,\n  panSpeed = 1,\n  zoomSpeed = 1,\n  initialViewState = DEFAULT_VIEW,\n  viewState,\n  onViewStateChange,\n  enabled = true,\n}: UseZoomPinchOptions): UseZoomPinchReturn {\n  const [internalView, setInternalView] = useState<ViewState>(initialViewState)\n\n  const view = viewState ?? internalView\n\n  // All mutable values accessed from listeners live in refs\n  // so the useEffect never re-runs on prop changes.\n  const viewRef = useRef(view)\n  viewRef.current = view\n\n  const enabledRef = useRef(enabled)\n  enabledRef.current = enabled\n\n  const onViewStateChangeRef = useRef(onViewStateChange)\n  onViewStateChangeRef.current = onViewStateChange\n\n  const configRef = useRef({ minScale, maxScale, panSpeed, zoomSpeed })\n  configRef.current = { minScale, maxScale, panSpeed, zoomSpeed }\n\n  const updateView = useCallback((updater: (prev: ViewState) => ViewState) => {\n    const prev = viewRef.current\n    const next = updater(prev)\n    if (next.x === prev.x && next.y === prev.y && next.zoom === prev.zoom) {\n      return\n    }\n    if (onViewStateChangeRef.current) {\n      onViewStateChangeRef.current(next)\n    } else {\n      setInternalView(next)\n    }\n  }, [])\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n\n    const getRelCoords = (clientX: number, clientY: number) => {\n      const rect = el.getBoundingClientRect()\n      return { px: clientX - rect.left, py: clientY - rect.top }\n    }\n\n    // ── Wheel (scroll-to-pan / pinch-to-zoom on trackpad) ──────────\n\n    const onWheel = (e: WheelEvent) => {\n      if (!enabledRef.current) return\n      e.preventDefault()\n\n      let deltaX = e.deltaX\n      let deltaY = e.deltaY\n      const { ctrlKey, clientX, clientY } = e\n\n      // Trackpad heuristic: pixel-mode deltas (deltaMode === 0) with\n      // non-line-step values strongly suggest a trackpad.\n      const isTrackpad = e.deltaMode === 0 && (Math.abs(deltaY) < 100 || !Number.isInteger(deltaY))\n\n      if (!isTrackpad) {\n        const LINE_STEP = 120\n        if (Math.abs(deltaY) >= 100) deltaY = Math.sign(deltaY) * (Math.abs(deltaY) / LINE_STEP)\n        if (Math.abs(deltaX) >= 100) deltaX = Math.sign(deltaX) * (Math.abs(deltaX) / LINE_STEP)\n      }\n\n      const { minScale, maxScale, panSpeed, zoomSpeed } = configRef.current\n\n      updateView((prev) => {\n        if (ctrlKey) {\n          const speed = isTrackpad ? 0.01 : 0.1 * zoomSpeed\n          const factor = 1 - deltaY * speed\n          const newZoom = clamp(prev.zoom * factor, minScale, maxScale)\n          if (newZoom === prev.zoom) return prev\n\n          const { px, py } = getRelCoords(clientX, clientY)\n          const s = newZoom / prev.zoom\n          return { zoom: newZoom, x: px - (px - prev.x) * s, y: py - (py - prev.y) * s }\n        }\n\n        const multiplier = isTrackpad ? 1 : 25 * panSpeed\n        return { ...prev, x: prev.x - deltaX * multiplier, y: prev.y - deltaY * multiplier }\n      })\n    }\n\n    // ── Pointer drag (mouse + single-touch panning) ────────────────\n\n    let isDragging = false\n    let lastPointer = { x: 0, y: 0 }\n    const activePointers = new Set<number>()\n\n    const onPointerDown = (e: PointerEvent) => {\n      if (!enabledRef.current) return\n      activePointers.add(e.pointerId)\n      if (e.pointerType === \"mouse\" && e.button !== 0) return\n\n      if (activePointers.size >= 2) {\n        isDragging = false\n        return\n      }\n\n      isDragging = true\n      lastPointer = { x: e.clientX, y: e.clientY }\n    }\n\n    const onPointerMove = (e: PointerEvent) => {\n      if (!isDragging) return\n      e.preventDefault()\n\n      const dx = e.clientX - lastPointer.x\n      const dy = e.clientY - lastPointer.y\n      lastPointer = { x: e.clientX, y: e.clientY }\n\n      updateView((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }))\n    }\n\n    const onPointerUp = (e: PointerEvent) => {\n      activePointers.delete(e.pointerId)\n      if (activePointers.size === 0) isDragging = false\n    }\n\n    // ── Multi-touch pinch (mobile) ─────────────────────────────────\n\n    let pinchState = { zoom: 1, x: 0, y: 0 }\n    let initialDist = 0\n    let initialCenter = { x: 0, y: 0 }\n    let isPinching = false\n\n    const onTouchStart = (e: TouchEvent) => {\n      if (!enabledRef.current || e.touches.length < 2) return\n\n      isDragging = false\n      isPinching = true\n\n      const t1 = e.touches[0]!\n      const t2 = e.touches[1]!\n\n      initialDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY)\n      initialCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 }\n      pinchState = { ...viewRef.current }\n    }\n\n    const onTouchMove = (e: TouchEvent) => {\n      if (e.touches.length < 2 || !isPinching) return\n      e.preventDefault()\n\n      const t1 = e.touches[0]!\n      const t2 = e.touches[1]!\n\n      const { minScale, maxScale } = configRef.current\n      const currentDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY)\n      const currentCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 }\n\n      const newZoom = clamp(pinchState.zoom * (currentDist / initialDist), minScale, maxScale)\n      const s = newZoom / pinchState.zoom\n      const { px, py } = getRelCoords(initialCenter.x, initialCenter.y)\n\n      updateView(() => ({\n        zoom: newZoom,\n        x: px - (px - pinchState.x) * s + (currentCenter.x - initialCenter.x),\n        y: py - (py - pinchState.y) * s + (currentCenter.y - initialCenter.y),\n      }))\n    }\n\n    const onTouchEnd = (e: TouchEvent) => {\n      if (e.touches.length < 2) isPinching = false\n    }\n\n    // ── Register listeners ─────────────────────────────────────────\n\n    el.addEventListener(\"wheel\", onWheel, { passive: false })\n    el.addEventListener(\"pointerdown\", onPointerDown)\n    window.addEventListener(\"pointermove\", onPointerMove, { passive: false })\n    window.addEventListener(\"pointerup\", onPointerUp)\n    window.addEventListener(\"pointercancel\", onPointerUp)\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: false })\n    el.addEventListener(\"touchmove\", onTouchMove, { passive: false })\n    el.addEventListener(\"touchend\", onTouchEnd)\n    el.addEventListener(\"touchcancel\", onTouchEnd)\n\n    return () => {\n      el.removeEventListener(\"wheel\", onWheel)\n      el.removeEventListener(\"pointerdown\", onPointerDown)\n      window.removeEventListener(\"pointermove\", onPointerMove)\n      window.removeEventListener(\"pointerup\", onPointerUp)\n      window.removeEventListener(\"pointercancel\", onPointerUp)\n      el.removeEventListener(\"touchstart\", onTouchStart)\n      el.removeEventListener(\"touchmove\", onTouchMove)\n      el.removeEventListener(\"touchend\", onTouchEnd)\n      el.removeEventListener(\"touchcancel\", onTouchEnd)\n    }\n  }, [containerRef, updateView])\n\n  const setView = useCallback((v: ViewState) => {\n    if (onViewStateChangeRef.current) {\n      onViewStateChangeRef.current(v)\n    } else {\n      setInternalView(v)\n    }\n  }, [])\n\n  const centerZoom = useCallback(\n    (targetZoom: number) => {\n      updateView((prev) => {\n        const { minScale, maxScale } = configRef.current\n        const newZoom = clamp(targetZoom, minScale, maxScale)\n        const cx = (containerRef.current?.offsetWidth ?? 0) / 2\n        const cy = (containerRef.current?.offsetHeight ?? 0) / 2\n        const s = newZoom / prev.zoom\n        return { zoom: newZoom, x: cx - (cx - prev.x) * s, y: cy - (cy - prev.y) * s }\n      })\n    },\n    [containerRef, updateView],\n  )\n\n  const resetView = useCallback(() => setView(DEFAULT_VIEW), [setView])\n\n  return { view, setView, centerZoom, resetView }\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(value, max))\n}\n\nfunction distance(x1: number, y1: number, x2: number, y2: number): number {\n  const dx = x1 - x2\n  const dy = y1 - y2\n  return Math.sqrt(dx * dx + dy * dy)\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+
+interface ViewState {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface UseZoomPinchOptions {
+    /** Ref to the container element that receives gesture events. */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Minimum allowed zoom level. @default 0.1 */
+    minScale?: number;
+    /** Maximum allowed zoom level. @default 50 */
+    maxScale?: number;
+    /** Multiplier for pan speed (mouse wheel only). @default 1 */
+    panSpeed?: number;
+    /** Multiplier for zoom speed (mouse wheel only). @default 1 */
+    zoomSpeed?: number;
+    /** Initial view state used when uncontrolled. @default \{ x: 0, y: 0, zoom: 1 \} */
+    initialViewState?: ViewState;
+    /** Controlled view state. When provided, the hook becomes controlled. */
+    viewState?: ViewState;
+    /** Callback fired on every view change. Required for controlled mode. */
+    onViewStateChange?: (view: ViewState) => void;
+    /** Enable or disable all gesture handling. @default true */
+    enabled?: boolean;
+}
+interface UseZoomPinchReturn {
+    /** Current view state (position + zoom). */
+    view: ViewState;
+    /** Imperatively set the view state. */
+    setView: (view: ViewState) => void;
+    /** Zoom to a target level, keeping the container center as anchor. */
+    centerZoom: (targetZoom: number) => void;
+    /** Reset view to \{ x: 0, y: 0, zoom: 1 \}. */
+    resetView: () => void;
+}
+/**
+ * React hook for pan, pinch-to-zoom, and scroll-zoom gestures.
+ *
+ * Supports mouse wheel (discrete + trackpad), pointer drag, and multi-touch pinch.
+ * Works in both controlled (`viewState` + `onViewStateChange`) and uncontrolled modes.
+ */
+declare function useZoomPinch({ containerRef, minScale, maxScale, panSpeed, zoomSpeed, initialViewState, viewState, onViewStateChange, enabled, }: UseZoomPinchOptions): UseZoomPinchReturn;
+
+export { type UseZoomPinchOptions, type UseZoomPinchReturn, type ViewState, useZoomPinch };

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+
+interface ViewState {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface UseZoomPinchOptions {
+    /** Ref to the container element that receives gesture events. */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Minimum allowed zoom level. @default 0.1 */
+    minScale?: number;
+    /** Maximum allowed zoom level. @default 50 */
+    maxScale?: number;
+    /** Multiplier for pan speed (mouse wheel only). @default 1 */
+    panSpeed?: number;
+    /** Multiplier for zoom speed (mouse wheel only). @default 1 */
+    zoomSpeed?: number;
+    /** Initial view state used when uncontrolled. @default \{ x: 0, y: 0, zoom: 1 \} */
+    initialViewState?: ViewState;
+    /** Controlled view state. When provided, the hook becomes controlled. */
+    viewState?: ViewState;
+    /** Callback fired on every view change. Required for controlled mode. */
+    onViewStateChange?: (view: ViewState) => void;
+    /** Enable or disable all gesture handling. @default true */
+    enabled?: boolean;
+}
+interface UseZoomPinchReturn {
+    /** Current view state (position + zoom). */
+    view: ViewState;
+    /** Imperatively set the view state. */
+    setView: (view: ViewState) => void;
+    /** Zoom to a target level, keeping the container center as anchor. */
+    centerZoom: (targetZoom: number) => void;
+    /** Reset view to \{ x: 0, y: 0, zoom: 1 \}. */
+    resetView: () => void;
+}
+/**
+ * React hook for pan, pinch-to-zoom, and scroll-zoom gestures.
+ *
+ * Supports mouse wheel (discrete + trackpad), pointer drag, and multi-touch pinch.
+ * Works in both controlled (`viewState` + `onViewStateChange`) and uncontrolled modes.
+ */
+declare function useZoomPinch({ containerRef, minScale, maxScale, panSpeed, zoomSpeed, initialViewState, viewState, onViewStateChange, enabled, }: UseZoomPinchOptions): UseZoomPinchReturn;
+
+export { type UseZoomPinchOptions, type UseZoomPinchReturn, type ViewState, useZoomPinch };

package/dist/index.js

@@ -0,0 +1,187 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+// src/useZoomPinch.ts
+var DEFAULT_VIEW = { x: 0, y: 0, zoom: 1 };
+function useZoomPinch({
+  containerRef,
+  minScale = 0.1,
+  maxScale = 50,
+  panSpeed = 1,
+  zoomSpeed = 1,
+  initialViewState = DEFAULT_VIEW,
+  viewState,
+  onViewStateChange,
+  enabled = true
+}) {
+  const [internalView, setInternalView] = useState(initialViewState);
+  const view = viewState ?? internalView;
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const onViewStateChangeRef = useRef(onViewStateChange);
+  onViewStateChangeRef.current = onViewStateChange;
+  const configRef = useRef({ minScale, maxScale, panSpeed, zoomSpeed });
+  configRef.current = { minScale, maxScale, panSpeed, zoomSpeed };
+  const updateView = useCallback((updater) => {
+    const prev = viewRef.current;
+    const next = updater(prev);
+    if (next.x === prev.x && next.y === prev.y && next.zoom === prev.zoom) {
+      return;
+    }
+    if (onViewStateChangeRef.current) {
+      onViewStateChangeRef.current(next);
+    } else {
+      setInternalView(next);
+    }
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const getRelCoords = (clientX, clientY) => {
+      const rect = el.getBoundingClientRect();
+      return { px: clientX - rect.left, py: clientY - rect.top };
+    };
+    const onWheel = (e) => {
+      if (!enabledRef.current) return;
+      e.preventDefault();
+      let deltaX = e.deltaX;
+      let deltaY = e.deltaY;
+      const { ctrlKey, clientX, clientY } = e;
+      const isTrackpad = e.deltaMode === 0 && (Math.abs(deltaY) < 100 || !Number.isInteger(deltaY));
+      if (!isTrackpad) {
+        const LINE_STEP = 120;
+        if (Math.abs(deltaY) >= 100) deltaY = Math.sign(deltaY) * (Math.abs(deltaY) / LINE_STEP);
+        if (Math.abs(deltaX) >= 100) deltaX = Math.sign(deltaX) * (Math.abs(deltaX) / LINE_STEP);
+      }
+      const { minScale: minScale2, maxScale: maxScale2, panSpeed: panSpeed2, zoomSpeed: zoomSpeed2 } = configRef.current;
+      updateView((prev) => {
+        if (ctrlKey) {
+          const speed = isTrackpad ? 0.01 : 0.1 * zoomSpeed2;
+          const factor = 1 - deltaY * speed;
+          const newZoom = clamp(prev.zoom * factor, minScale2, maxScale2);
+          if (newZoom === prev.zoom) return prev;
+          const { px, py } = getRelCoords(clientX, clientY);
+          const s = newZoom / prev.zoom;
+          return { zoom: newZoom, x: px - (px - prev.x) * s, y: py - (py - prev.y) * s };
+        }
+        const multiplier = isTrackpad ? 1 : 25 * panSpeed2;
+        return { ...prev, x: prev.x - deltaX * multiplier, y: prev.y - deltaY * multiplier };
+      });
+    };
+    let isDragging = false;
+    let lastPointer = { x: 0, y: 0 };
+    const activePointers = /* @__PURE__ */ new Set();
+    const onPointerDown = (e) => {
+      if (!enabledRef.current) return;
+      activePointers.add(e.pointerId);
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      if (activePointers.size >= 2) {
+        isDragging = false;
+        return;
+      }
+      isDragging = true;
+      lastPointer = { x: e.clientX, y: e.clientY };
+    };
+    const onPointerMove = (e) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const dx = e.clientX - lastPointer.x;
+      const dy = e.clientY - lastPointer.y;
+      lastPointer = { x: e.clientX, y: e.clientY };
+      updateView((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }));
+    };
+    const onPointerUp = (e) => {
+      activePointers.delete(e.pointerId);
+      if (activePointers.size === 0) isDragging = false;
+    };
+    let pinchState = { zoom: 1, x: 0, y: 0 };
+    let initialDist = 0;
+    let initialCenter = { x: 0, y: 0 };
+    let isPinching = false;
+    const onTouchStart = (e) => {
+      if (!enabledRef.current || e.touches.length < 2) return;
+      isDragging = false;
+      isPinching = true;
+      const t1 = e.touches[0];
+      const t2 = e.touches[1];
+      initialDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
+      initialCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 };
+      pinchState = { ...viewRef.current };
+    };
+    const onTouchMove = (e) => {
+      if (e.touches.length < 2 || !isPinching) return;
+      e.preventDefault();
+      const t1 = e.touches[0];
+      const t2 = e.touches[1];
+      const { minScale: minScale2, maxScale: maxScale2 } = configRef.current;
+      const currentDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY);
+      const currentCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 };
+      const newZoom = clamp(pinchState.zoom * (currentDist / initialDist), minScale2, maxScale2);
+      const s = newZoom / pinchState.zoom;
+      const { px, py } = getRelCoords(initialCenter.x, initialCenter.y);
+      updateView(() => ({
+        zoom: newZoom,
+        x: px - (px - pinchState.x) * s + (currentCenter.x - initialCenter.x),
+        y: py - (py - pinchState.y) * s + (currentCenter.y - initialCenter.y)
+      }));
+    };
+    const onTouchEnd = (e) => {
+      if (e.touches.length < 2) isPinching = false;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointermove", onPointerMove, { passive: false });
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerUp);
+    el.addEventListener("touchstart", onTouchStart, { passive: false });
+    el.addEventListener("touchmove", onTouchMove, { passive: false });
+    el.addEventListener("touchend", onTouchEnd);
+    el.addEventListener("touchcancel", onTouchEnd);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", onTouchEnd);
+      el.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, [containerRef, updateView]);
+  const setView = useCallback((v) => {
+    if (onViewStateChangeRef.current) {
+      onViewStateChangeRef.current(v);
+    } else {
+      setInternalView(v);
+    }
+  }, []);
+  const centerZoom = useCallback(
+    (targetZoom) => {
+      updateView((prev) => {
+        const { minScale: minScale2, maxScale: maxScale2 } = configRef.current;
+        const newZoom = clamp(targetZoom, minScale2, maxScale2);
+        const cx = (containerRef.current?.offsetWidth ?? 0) / 2;
+        const cy = (containerRef.current?.offsetHeight ?? 0) / 2;
+        const s = newZoom / prev.zoom;
+        return { zoom: newZoom, x: cx - (cx - prev.x) * s, y: cy - (cy - prev.y) * s };
+      });
+    },
+    [containerRef, updateView]
+  );
+  const resetView = useCallback(() => setView(DEFAULT_VIEW), [setView]);
+  return { view, setView, centerZoom, resetView };
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+function distance(x1, y1, x2, y2) {
+  const dx = x1 - x2;
+  const dy = y1 - y2;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export { useZoomPinch };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useZoomPinch.ts"],"names":["minScale","maxScale","panSpeed","zoomSpeed"],"mappings":"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","file":"index.js","sourcesContent":["import { type RefObject, useCallback, useEffect, useRef, useState } from \"react\"\n\nexport interface ViewState {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface UseZoomPinchOptions {\n  /** Ref to the container element that receives gesture events. */\n  containerRef: RefObject<HTMLElement | null>\n  /** Minimum allowed zoom level. @default 0.1 */\n  minScale?: number\n  /** Maximum allowed zoom level. @default 50 */\n  maxScale?: number\n  /** Multiplier for pan speed (mouse wheel only). @default 1 */\n  panSpeed?: number\n  /** Multiplier for zoom speed (mouse wheel only). @default 1 */\n  zoomSpeed?: number\n  /** Initial view state used when uncontrolled. @default \\{ x: 0, y: 0, zoom: 1 \\} */\n  initialViewState?: ViewState\n  /** Controlled view state. When provided, the hook becomes controlled. */\n  viewState?: ViewState\n  /** Callback fired on every view change. Required for controlled mode. */\n  onViewStateChange?: (view: ViewState) => void\n  /** Enable or disable all gesture handling. @default true */\n  enabled?: boolean\n}\n\nexport interface UseZoomPinchReturn {\n  /** Current view state (position + zoom). */\n  view: ViewState\n  /** Imperatively set the view state. */\n  setView: (view: ViewState) => void\n  /** Zoom to a target level, keeping the container center as anchor. */\n  centerZoom: (targetZoom: number) => void\n  /** Reset view to \\{ x: 0, y: 0, zoom: 1 \\}. */\n  resetView: () => void\n}\n\nconst DEFAULT_VIEW: ViewState = { x: 0, y: 0, zoom: 1 }\n\n/**\n * React hook for pan, pinch-to-zoom, and scroll-zoom gestures.\n *\n * Supports mouse wheel (discrete + trackpad), pointer drag, and multi-touch pinch.\n * Works in both controlled (`viewState` + `onViewStateChange`) and uncontrolled modes.\n */\nexport function useZoomPinch({\n  containerRef,\n  minScale = 0.1,\n  maxScale = 50,\n  panSpeed = 1,\n  zoomSpeed = 1,\n  initialViewState = DEFAULT_VIEW,\n  viewState,\n  onViewStateChange,\n  enabled = true,\n}: UseZoomPinchOptions): UseZoomPinchReturn {\n  const [internalView, setInternalView] = useState<ViewState>(initialViewState)\n\n  const view = viewState ?? internalView\n\n  // All mutable values accessed from listeners live in refs\n  // so the useEffect never re-runs on prop changes.\n  const viewRef = useRef(view)\n  viewRef.current = view\n\n  const enabledRef = useRef(enabled)\n  enabledRef.current = enabled\n\n  const onViewStateChangeRef = useRef(onViewStateChange)\n  onViewStateChangeRef.current = onViewStateChange\n\n  const configRef = useRef({ minScale, maxScale, panSpeed, zoomSpeed })\n  configRef.current = { minScale, maxScale, panSpeed, zoomSpeed }\n\n  const updateView = useCallback((updater: (prev: ViewState) => ViewState) => {\n    const prev = viewRef.current\n    const next = updater(prev)\n    if (next.x === prev.x && next.y === prev.y && next.zoom === prev.zoom) {\n      return\n    }\n    if (onViewStateChangeRef.current) {\n      onViewStateChangeRef.current(next)\n    } else {\n      setInternalView(next)\n    }\n  }, [])\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n\n    const getRelCoords = (clientX: number, clientY: number) => {\n      const rect = el.getBoundingClientRect()\n      return { px: clientX - rect.left, py: clientY - rect.top }\n    }\n\n    // ── Wheel (scroll-to-pan / pinch-to-zoom on trackpad) ──────────\n\n    const onWheel = (e: WheelEvent) => {\n      if (!enabledRef.current) return\n      e.preventDefault()\n\n      let deltaX = e.deltaX\n      let deltaY = e.deltaY\n      const { ctrlKey, clientX, clientY } = e\n\n      // Trackpad heuristic: pixel-mode deltas (deltaMode === 0) with\n      // non-line-step values strongly suggest a trackpad.\n      const isTrackpad = e.deltaMode === 0 && (Math.abs(deltaY) < 100 || !Number.isInteger(deltaY))\n\n      if (!isTrackpad) {\n        const LINE_STEP = 120\n        if (Math.abs(deltaY) >= 100) deltaY = Math.sign(deltaY) * (Math.abs(deltaY) / LINE_STEP)\n        if (Math.abs(deltaX) >= 100) deltaX = Math.sign(deltaX) * (Math.abs(deltaX) / LINE_STEP)\n      }\n\n      const { minScale, maxScale, panSpeed, zoomSpeed } = configRef.current\n\n      updateView((prev) => {\n        if (ctrlKey) {\n          const speed = isTrackpad ? 0.01 : 0.1 * zoomSpeed\n          const factor = 1 - deltaY * speed\n          const newZoom = clamp(prev.zoom * factor, minScale, maxScale)\n          if (newZoom === prev.zoom) return prev\n\n          const { px, py } = getRelCoords(clientX, clientY)\n          const s = newZoom / prev.zoom\n          return { zoom: newZoom, x: px - (px - prev.x) * s, y: py - (py - prev.y) * s }\n        }\n\n        const multiplier = isTrackpad ? 1 : 25 * panSpeed\n        return { ...prev, x: prev.x - deltaX * multiplier, y: prev.y - deltaY * multiplier }\n      })\n    }\n\n    // ── Pointer drag (mouse + single-touch panning) ────────────────\n\n    let isDragging = false\n    let lastPointer = { x: 0, y: 0 }\n    const activePointers = new Set<number>()\n\n    const onPointerDown = (e: PointerEvent) => {\n      if (!enabledRef.current) return\n      activePointers.add(e.pointerId)\n      if (e.pointerType === \"mouse\" && e.button !== 0) return\n\n      if (activePointers.size >= 2) {\n        isDragging = false\n        return\n      }\n\n      isDragging = true\n      lastPointer = { x: e.clientX, y: e.clientY }\n    }\n\n    const onPointerMove = (e: PointerEvent) => {\n      if (!isDragging) return\n      e.preventDefault()\n\n      const dx = e.clientX - lastPointer.x\n      const dy = e.clientY - lastPointer.y\n      lastPointer = { x: e.clientX, y: e.clientY }\n\n      updateView((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy }))\n    }\n\n    const onPointerUp = (e: PointerEvent) => {\n      activePointers.delete(e.pointerId)\n      if (activePointers.size === 0) isDragging = false\n    }\n\n    // ── Multi-touch pinch (mobile) ─────────────────────────────────\n\n    let pinchState = { zoom: 1, x: 0, y: 0 }\n    let initialDist = 0\n    let initialCenter = { x: 0, y: 0 }\n    let isPinching = false\n\n    const onTouchStart = (e: TouchEvent) => {\n      if (!enabledRef.current || e.touches.length < 2) return\n\n      isDragging = false\n      isPinching = true\n\n      const t1 = e.touches[0]!\n      const t2 = e.touches[1]!\n\n      initialDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY)\n      initialCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 }\n      pinchState = { ...viewRef.current }\n    }\n\n    const onTouchMove = (e: TouchEvent) => {\n      if (e.touches.length < 2 || !isPinching) return\n      e.preventDefault()\n\n      const t1 = e.touches[0]!\n      const t2 = e.touches[1]!\n\n      const { minScale, maxScale } = configRef.current\n      const currentDist = distance(t1.clientX, t1.clientY, t2.clientX, t2.clientY)\n      const currentCenter = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 }\n\n      const newZoom = clamp(pinchState.zoom * (currentDist / initialDist), minScale, maxScale)\n      const s = newZoom / pinchState.zoom\n      const { px, py } = getRelCoords(initialCenter.x, initialCenter.y)\n\n      updateView(() => ({\n        zoom: newZoom,\n        x: px - (px - pinchState.x) * s + (currentCenter.x - initialCenter.x),\n        y: py - (py - pinchState.y) * s + (currentCenter.y - initialCenter.y),\n      }))\n    }\n\n    const onTouchEnd = (e: TouchEvent) => {\n      if (e.touches.length < 2) isPinching = false\n    }\n\n    // ── Register listeners ─────────────────────────────────────────\n\n    el.addEventListener(\"wheel\", onWheel, { passive: false })\n    el.addEventListener(\"pointerdown\", onPointerDown)\n    window.addEventListener(\"pointermove\", onPointerMove, { passive: false })\n    window.addEventListener(\"pointerup\", onPointerUp)\n    window.addEventListener(\"pointercancel\", onPointerUp)\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: false })\n    el.addEventListener(\"touchmove\", onTouchMove, { passive: false })\n    el.addEventListener(\"touchend\", onTouchEnd)\n    el.addEventListener(\"touchcancel\", onTouchEnd)\n\n    return () => {\n      el.removeEventListener(\"wheel\", onWheel)\n      el.removeEventListener(\"pointerdown\", onPointerDown)\n      window.removeEventListener(\"pointermove\", onPointerMove)\n      window.removeEventListener(\"pointerup\", onPointerUp)\n      window.removeEventListener(\"pointercancel\", onPointerUp)\n      el.removeEventListener(\"touchstart\", onTouchStart)\n      el.removeEventListener(\"touchmove\", onTouchMove)\n      el.removeEventListener(\"touchend\", onTouchEnd)\n      el.removeEventListener(\"touchcancel\", onTouchEnd)\n    }\n  }, [containerRef, updateView])\n\n  const setView = useCallback((v: ViewState) => {\n    if (onViewStateChangeRef.current) {\n      onViewStateChangeRef.current(v)\n    } else {\n      setInternalView(v)\n    }\n  }, [])\n\n  const centerZoom = useCallback(\n    (targetZoom: number) => {\n      updateView((prev) => {\n        const { minScale, maxScale } = configRef.current\n        const newZoom = clamp(targetZoom, minScale, maxScale)\n        const cx = (containerRef.current?.offsetWidth ?? 0) / 2\n        const cy = (containerRef.current?.offsetHeight ?? 0) / 2\n        const s = newZoom / prev.zoom\n        return { zoom: newZoom, x: cx - (cx - prev.x) * s, y: cy - (cy - prev.y) * s }\n      })\n    },\n    [containerRef, updateView],\n  )\n\n  const resetView = useCallback(() => setView(DEFAULT_VIEW), [setView])\n\n  return { view, setView, centerZoom, resetView }\n}\n\n// ── Helpers ──────────────────────────────────────────────────────────\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(value, max))\n}\n\nfunction distance(x1: number, y1: number, x2: number, y2: number): number {\n  const dx = x1 - x2\n  const dy = y1 - y2\n  return Math.sqrt(dx * dx + dy * dy)\n}\n"]}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "use-zoom-pinch",
+  "version": "0.1.0",
+  "description": "Lightweight React hook for pan, pinch-to-zoom, and scroll zoom with trackpad and touch support",
+  "keywords": [
+    "react",
+    "hook",
+    "zoom",
+    "pinch",
+    "pan",
+    "gesture",
+    "trackpad",
+    "touch",
+    "canvas",
+    "infinite-canvas"
+  ],
+  "license": "MIT",
+  "author": "nemezzizz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NemeZZiZZ/use-zoom-pinch.git"
+  },
+  "homepage": "https://github.com/NemeZZiZZ/use-zoom-pinch#readme",
+  "bugs": {
+    "url": "https://github.com/NemeZZiZZ/use-zoom-pinch/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "typescript-eslint": "^8.0.0",
+    "prettier": "^3.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "react": "^19.0.0"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  }
+}