@zoompinch/react 0.0.4

package/README.md

@@ -0,0 +1,578 @@
+# @zoompinch/react
+
+React bindings for [@zoompinch/core](https://github.com/ElyaConrad/zoompinch) - Apply a pinch-and-zoom experience that feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.
+
+**Play with the demo:** [https://zoompinch.pages.dev](https://zoompinch.pages.dev)
+
+![Mobile demo](https://zoompinch.pages.dev/zoompinch_demo.gif)
+
+### Mathematical correct pinch on touch
+
+Unlike other libraries, _Zoompinch_ does not just use the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes pinching on touch devices feel native-like.
+
+### Touch, Wheel, Mouse and Trackpad Gestures!
+
+Aside from touch, mouse and wheel events, **gesture events** (Safari Desktop) are supported as well! Try it out on the [demo](https://zoompinch.pages.dev)
+
+## Installation
+
+```bash
+npm install @zoompinch/react
+```
+
+## Complete Example
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { Zoompinch, ZoompinchRef } from '@zoompinch/react';
+
+function App() {
+  const zoompinchRef = useRef<ZoompinchRef>(null);
+  const [transform, setTransform] = useState({
+    translateX: 0,
+    translateY: 0,
+    scale: 1,
+    rotate: 0
+  });
+
+  function handleInit() {
+    // Center canvas on initialization
+    zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], 0);
+  }
+
+  function handleTransformChange(newTransform) {
+    console.log('Transform updated:', newTransform);
+    setTransform(newTransform);
+  }
+
+  function handleClick(event: React.MouseEvent) {
+    if (!zoompinchRef.current) return;
+    const [x, y] = zoompinchRef.current.normalizeClientCoords(event.clientX, event.clientY);
+    console.log('Clicked at canvas position:', x, y);
+  }
+
+  return (
+    <Zoompinch
+      ref={zoompinchRef}
+      style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}
+      transform={transform}
+      onTransformChange={handleTransformChange}
+      offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+      minScale={0.5}
+      maxScale={4}
+      clampBounds={false}
+      rotation={true}
+      mouse={true}
+      wheel={true}
+      touch={true}
+      gesture={true}
+      onInit={handleInit}
+      onClick={handleClick}
+    >
+      <img 
+        width="1536" 
+        height="2048" 
+        src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public"
+        draggable={false}
+        style={{ userSelect: 'none' }}
+      />
+    </Zoompinch>
+  );
+}
+
+export default App;
+```
+
+### With Matrix Overlay
+
+```tsx
+<Zoompinch
+  ref={zoompinchRef}
+  style={{ width: '800px', height: '600px' }}
+  onInit={handleInit}
+  matrix={({ composePoint, normalizeClientCoords, canvasWidth, canvasHeight }) => (
+    <svg width="100%" height="100%">
+      {/* Center marker */}
+      <circle 
+        cx={composePoint(canvasWidth / 2, canvasHeight / 2)[0]}
+        cy={composePoint(canvasWidth / 2, canvasHeight / 2)[1]}
+        r="8"
+        fill="red"
+      />
+    </svg>
+  )}
+>
+  <img width="1536" height="2048" src="image.jpg" />
+</Zoompinch>
+```
+
+---
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `transform` | `Transform` | `{ translateX: 0, translateY: 0, scale: 1, rotate: 0 }` | Current transform state |
+| `onTransformChange` | `(transform: Transform) => void` | - | Callback when transform changes |
+| `offset` | `Offset` | `{ top: 0, right: 0, bottom: 0, left: 0 }` | Inner padding/offset within container |
+| `minScale` | `number` | `0.5` | Minimum scale (user gestures only) |
+| `maxScale` | `number` | `10` | Maximum scale (user gestures only) |
+| `clampBounds` | `boolean` | `false` | Clamp panning within bounds (user gestures only) |
+| `rotation` | `boolean` | `true` | Enable rotation gestures |
+| `mouse` | `boolean` | `true` | Enable mouse drag |
+| `wheel` | `boolean` | `true` | Enable wheel/trackpad |
+| `touch` | `boolean` | `true` | Enable touch gestures |
+| `gesture` | `boolean` | `true` | Enable Safari gesture events |
+| `style` | `React.CSSProperties` | - | Inline styles for container |
+| `children` | `ReactNode` | - | Canvas content |
+| `matrix` | `ReactNode \| Function` | - | Overlay content (see Matrix Prop) |
+
+**Note:** `minScale`, `maxScale`, `rotation`, and `clampBounds` only apply during user interaction. Programmatic changes via ref methods are unrestricted.
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onInit` | `void` | Fired when canvas dimensions are available |
+| `onTransformChange` | `Transform` | Fired when transform changes |
+| `onClick` | `React.MouseEvent` | Standard click event |
+| `onMouseDown` | `React.MouseEvent` | Standard mousedown event |
+| `onTouchStart` | `React.TouchEvent` | Standard touchstart event |
+| `onMouseUp` | `React.MouseEvent` | Standard mouseup event |
+| `onTouchEnd` | `React.TouchEvent` | Standard touchend event |
+
+```tsx
+<Zoompinch
+  onInit={handleInit}
+  onTransformChange={handleTransformChange}
+  onClick={handleClick}
+>
+  {/* content */}
+</Zoompinch>
+```
+
+### Ref Methods
+
+Access methods via ref:
+
+```typescript
+import { ZoompinchRef } from '@zoompinch/react';
+
+const zoompinchRef = useRef<ZoompinchRef>(null);
+
+// Call methods
+zoompinchRef.current?.applyTransform(scale, wrapperCoords, canvasCoords, rotate?);
+zoompinchRef.current?.normalizeClientCoords(clientX, clientY);
+zoompinchRef.current?.composePoint(x, y);
+zoompinchRef.current?.rotateCanvas(x, y, radians);
+
+// Access properties
+zoompinchRef.current?.canvasWidth;
+zoompinchRef.current?.canvasHeight;
+zoompinchRef.current?.zoompinchEngine; // Access core engine directly
+```
+
+#### `applyTransform(scale, wrapperCoords, canvasCoords, rotate?)`
+
+Apply transform by anchoring a canvas point to a wrapper point.
+
+**Parameters:**
+- `scale: number` - Target scale
+- `wrapperCoords: [number, number]` - Wrapper position (0-1, 0.5 = center)
+- `canvasCoords: [number, number]` - Canvas position (0-1, 0.5 = center)
+- `rotate?: number` - Optional rotation in radians
+
+**Examples:**
+
+```typescript
+// Center canvas at scale 1
+zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5]);
+
+// Zoom to 2x, keep centered
+zoompinchRef.current?.applyTransform(2, [0.5, 0.5], [0.5, 0.5]);
+
+// Anchor canvas top-left to wrapper center
+zoompinchRef.current?.applyTransform(1.5, [0.5, 0.5], [0, 0]);
+
+// Set rotation
+zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], Math.PI / 4);
+```
+
+#### `normalizeClientCoords(clientX, clientY)`
+
+Convert global client coordinates to canvas coordinates.
+
+**Parameters:**
+- `clientX: number` - Global X from event
+- `clientY: number` - Global Y from event
+
+**Returns:** `[number, number]` - Canvas coordinates in pixels
+
+**Example:**
+
+```typescript
+function handleClick(event: React.MouseEvent) {
+  const [x, y] = zoompinchRef.current!.normalizeClientCoords(
+    event.clientX, 
+    event.clientY
+  );
+  console.log('Canvas position:', x, y);
+}
+```
+
+#### `composePoint(x, y)`
+
+Convert canvas coordinates to wrapper coordinates (accounts for transform).
+
+**Parameters:**
+- `x: number` - Canvas X in pixels
+- `y: number` - Canvas Y in pixels
+
+**Returns:** `[number, number]` - Wrapper coordinates in pixels
+
+**Example:**
+
+```typescript
+// Get wrapper position for canvas center
+const [wrapperX, wrapperY] = zoompinchRef.current!.composePoint(
+  zoompinchRef.current!.canvasWidth / 2,
+  zoompinchRef.current!.canvasHeight / 2
+);
+```
+
+#### `rotateCanvas(x, y, radians)`
+
+Rotate canvas around a specific canvas point.
+
+**Parameters:**
+- `x: number` - Canvas X (rotation center)
+- `y: number` - Canvas Y (rotation center)
+- `radians: number` - Rotation angle
+
+**Example:**
+
+```typescript
+// Rotate 90° around canvas center
+const centerX = zoompinchRef.current!.canvasWidth / 2;
+const centerY = zoompinchRef.current!.canvasHeight / 2;
+zoompinchRef.current?.rotateCanvas(centerX, centerY, Math.PI / 2);
+```
+
+### Ref Properties
+
+Access current canvas dimensions and engine:
+
+```typescript
+const width = zoompinchRef.current?.canvasWidth;   // number
+const height = zoompinchRef.current?.canvasHeight; // number
+const engine = zoompinchRef.current?.zoompinchEngine; // ZoompinchCore | null
+```
+
+### Matrix Prop
+
+Render overlay elements that follow the canvas transform.
+
+**Type:** `ReactNode | ((props: MatrixProps) => ReactNode)`
+
+**MatrixProps:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `composePoint` | `(x: number, y: number) => [number, number]` | Canvas → Wrapper coords |
+| `normalizeClientCoords` | `(clientX: number, clientY: number) => [number, number]` | Client → Canvas coords |
+| `canvasWidth` | `number` | Current canvas width |
+| `canvasHeight` | `number` | Current canvas height |
+
+**Note:** `applyTransform` and `rotateCanvas` are NOT available in the matrix function. Use component ref instead.
+
+**Example:**
+
+```tsx
+<Zoompinch
+  matrix={({ composePoint, normalizeClientCoords, canvasWidth, canvasHeight }) => (
+    <svg width="100%" height="100%">
+      <circle 
+        cx={composePoint(canvasWidth / 2, canvasHeight / 2)[0]}
+        cy={composePoint(canvasWidth / 2, canvasHeight / 2)[1]}
+        r="8"
+        fill="red"
+      />
+    </svg>
+  )}
+>
+  <img width="1920" height="1080" src="image.jpg" />
+</Zoompinch>
+```
+
+## Coordinate Systems
+
+### 1. Canvas Coordinates (Absolute)
+
+Absolute pixels within canvas content.
+- Origin: `(0, 0)` at top-left
+- Range: `0` to `canvasWidth`, `0` to `canvasHeight`
+
+```typescript
+const [canvasX, canvasY] = normalizeClientCoords(event.clientX, event.clientY);
+```
+
+### 2. Wrapper Coordinates (Absolute)
+
+Absolute pixels within viewport/wrapper.
+- Origin: `(0, 0)` at top-left (accounting for offset)
+- Range: `0` to `wrapperWidth`, `0` to `wrapperHeight`
+
+```typescript
+const [wrapperX, wrapperY] = composePoint(canvasX, canvasY);
+```
+
+### 3. Relative Coordinates (0-1)
+
+Normalized coordinates for `applyTransform`.
+- Range: `0.0` to `1.0`
+- `0.5` = center, `1.0` = bottom-right
+
+```typescript
+[0, 0]       // top-left
+[0.5, 0.5]   // center
+[1, 1]       // bottom-right
+```
+
+**Conversion Flow:**
+
+```
+Client Coords → normalizeClientCoords() → Canvas Coords → composePoint() → Wrapper Coords
+```
+
+## Complete Playground Example
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { Zoompinch, ZoompinchRef } from '@zoompinch/react';
+
+function App() {
+  const zoompinchRef = useRef<ZoompinchRef>(null);
+  const [transform, setTransform] = useState({
+    translateX: 0,
+    translateY: 0,
+    scale: 1,
+    rotate: 0
+  });
+  const [clickPoint, setClickPoint] = useState<[number, number] | null>(null);
+
+  function handleInit() {
+    // Center canvas on initialization
+    zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], 0);
+  }
+
+  function handleClick(event: React.MouseEvent) {
+    if (!zoompinchRef.current) return;
+    const [x, y] = zoompinchRef.current.normalizeClientCoords(
+      event.clientX, 
+      event.clientY
+    );
+    setClickPoint([x, y]);
+    console.log('Clicked at:', x, y);
+  }
+
+  function handleZoomIn() {
+    if (!zoompinchRef.current) return;
+    const newScale = Math.min(transform.scale * 1.5, 4);
+    zoompinchRef.current.applyTransform(newScale, [0.5, 0.5], [0.5, 0.5]);
+  }
+
+  function handleZoomOut() {
+    if (!zoompinchRef.current) return;
+    const newScale = Math.max(transform.scale / 1.5, 0.5);
+    zoompinchRef.current.applyTransform(newScale, [0.5, 0.5], [0.5, 0.5]);
+  }
+
+  function handleReset() {
+    zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], 0);
+  }
+
+  function handleRotate() {
+    if (!zoompinchRef.current) return;
+    const centerX = zoompinchRef.current.canvasWidth / 2;
+    const centerY = zoompinchRef.current.canvasHeight / 2;
+    zoompinchRef.current.rotateCanvas(centerX, centerY, Math.PI / 4);
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '10px' }}>
+        <button onClick={handleZoomIn}>Zoom In</button>
+        <button onClick={handleZoomOut}>Zoom Out</button>
+        <button onClick={handleReset}>Reset</button>
+        <button onClick={handleRotate}>Rotate 45°</button>
+      </div>
+
+      <div style={{ marginBottom: '10px' }}>
+        <strong>Transform:</strong> Scale: {transform.scale.toFixed(2)}, 
+        Rotate: {(transform.rotate * 180 / Math.PI).toFixed(0)}°
+      </div>
+
+      {clickPoint && (
+        <div style={{ marginBottom: '10px' }}>
+          <strong>Last click:</strong> ({clickPoint[0].toFixed(0)}, {clickPoint[1].toFixed(0)})
+        </div>
+      )}
+
+      <Zoompinch
+        ref={zoompinchRef}
+        style={{ 
+          width: '800px', 
+          height: '600px', 
+          border: '2px solid #333',
+          borderRadius: '8px'
+        }}
+        transform={transform}
+        onTransformChange={setTransform}
+        offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+        minScale={0.5}
+        maxScale={4}
+        clampBounds={false}
+        rotation={true}
+        mouse={true}
+        wheel={true}
+        touch={true}
+        gesture={true}
+        onInit={handleInit}
+        onClick={handleClick}
+        matrix={({ composePoint, canvasWidth, canvasHeight }) => (
+          <svg width="100%" height="100%">
+            {/* Center marker */}
+            <circle 
+              cx={composePoint(canvasWidth / 2, canvasHeight / 2)[0]}
+              cy={composePoint(canvasWidth / 2, canvasHeight / 2)[1]}
+              r="8"
+              fill="red"
+            />
+            
+            {/* Click point marker */}
+            {clickPoint && (
+              <circle 
+                cx={composePoint(clickPoint[0], clickPoint[1])[0]}
+                cy={composePoint(clickPoint[0], clickPoint[1])[1]}
+                r="5"
+                fill="blue"
+              />
+            )}
+          </svg>
+        )}
+      >
+        <img 
+          width="1536" 
+          height="2048" 
+          src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public"
+          draggable={false}
+          style={{ userSelect: 'none' }}
+        />
+      </Zoompinch>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Best Practices
+
+1. **Always specify image dimensions** to avoid layout shifts:
+   ```tsx
+   <img width="1920" height="1080" src="image.jpg" />
+   ```
+
+2. **Center content on init:**
+   ```typescript
+   function handleInit() {
+     zoompinchRef.current?.applyTransform(1, [0.5, 0.5], [0.5, 0.5]);
+   }
+   ```
+
+3. **Prevent image drag:**
+   ```tsx
+   <img 
+     src="image.jpg" 
+     draggable={false} 
+     style={{ userSelect: 'none' }}
+   />
+   ```
+
+4. **Use controlled transform state:**
+   ```tsx
+   const [transform, setTransform] = useState({ 
+     translateX: 0, translateY: 0, scale: 1, rotate: 0 
+   });
+   
+   <Zoompinch 
+     transform={transform} 
+     onTransformChange={setTransform}
+   />
+   ```
+
+5. **Enable clamp bounds for better UX:**
+   ```tsx
+   <Zoompinch clampBounds={true} minScale={0.5} maxScale={4} />
+   ```
+
+## Styling
+
+Minimal base styles are applied. Customize via style prop:
+
+```tsx
+<Zoompinch
+  style={{ 
+    width: '100%', 
+    height: '600px', 
+    border: '1px solid #ccc',
+    borderRadius: '8px'
+  }}
+>
+  {/* content */}
+</Zoompinch>
+```
+
+**Internal CSS classes:**
+
+```css
+.zoompinch          /* Container */
+.zoompinch > .canvas    /* Canvas wrapper */
+.zoompinch > .matrix    /* Matrix overlay */
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```typescript
+import { 
+  Zoompinch, 
+  ZoompinchRef, 
+  ZoompinchProps 
+} from '@zoompinch/react';
+
+import type { Transform } from '@zoompinch/core';
+```
+
+## Browser Support
+
+- ✅ Chrome/Edge (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest, including iOS)
+- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
+
+## License
+
+MIT
+
+
+## Related
+
+- [@zoompinch/core](https://www.npmjs.com/package/@zoompinch/core) - Core engine
+- [@zoompinch/vue](https://www.npmjs.com/package/@zoompinch/vue) - Vue 3
+- [@zoompinch/elements](https://www.npmjs.com/package/@zoompinch/elements) - Web Components
+
+Built with ❤️ by Elya Maurice Conrad

package/dist/react.css

@@ -0,0 +1 @@
+.zoompinch{touch-action:none;overflow:hidden;position:relative;border:2px solid #ccc}.zoompinch>.canvas{position:absolute}.zoompinch>.matrix{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}

package/dist/zoompinch-react.es.js

@@ -0,0 +1,408 @@
+import te, { forwardRef as ne, useRef as F, useState as ae, useImperativeHandle as oe, useEffect as E } from "react";
+import { Zoompinch as ue } from "@zoompinch/core";
+var I = { exports: {} }, M = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Q;
+function se() {
+  if (Q) return M;
+  Q = 1;
+  var a = Symbol.for("react.transitional.element"), m = Symbol.for("react.fragment");
+  function l(d, s, c) {
+    var i = null;
+    if (c !== void 0 && (i = "" + c), s.key !== void 0 && (i = "" + s.key), "key" in s) {
+      c = {};
+      for (var p in s)
+        p !== "key" && (c[p] = s[p]);
+    } else c = s;
+    return s = c.ref, {
+      $$typeof: a,
+      type: d,
+      key: i,
+      ref: s !== void 0 ? s : null,
+      props: c
+    };
+  }
+  return M.Fragment = m, M.jsx = l, M.jsxs = l, M;
+}
+var W = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var K;
+function ce() {
+  return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === X ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case H:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case t:
+          return "Suspense";
+        case f:
+          return "SuspenseList";
+        case x:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case G:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case _:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case v:
+            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
+          case A:
+            r = e._payload, e = e._init;
+            try {
+              return a(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function m(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        m(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), m(e);
+      }
+    }
+    function d(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var r = a(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = g.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function i(e) {
+      if (S.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, r) {
+      function n() {
+        j || (j = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function w() {
+      var e = a(this.type);
+      return L[e] || (L[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function T(e, r, n, o, R, V) {
+      var u = n.ref;
+      return e = {
+        $$typeof: y,
+        type: e,
+        key: r,
+        props: n,
+        _owner: o
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: w
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: V
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function $(e, r, n, o, R, V) {
+      var u = r.children;
+      if (u !== void 0)
+        if (o)
+          if (z(u)) {
+            for (o = 0; o < u.length; o++)
+              b(u[o]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else b(u);
+      if (S.call(r, "key")) {
+        u = a(e);
+        var k = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        o = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", Y[u + o] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          u,
+          k,
+          u
+        ), Y[u + o] = !0);
+      }
+      if (u = null, n !== void 0 && (l(n), u = "" + n), i(r) && (l(r.key), u = "" + r.key), "key" in r) {
+        n = {};
+        for (var Z in r)
+          Z !== "key" && (n[Z] = r[Z]);
+      } else n = r;
+      return u && p(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), T(
+        e,
+        u,
+        n,
+        s(),
+        R,
+        V
+      );
+    }
+    function b(e) {
+      D(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? D(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function D(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
+    }
+    var h = te, y = Symbol.for("react.transitional.element"), G = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), H = Symbol.for("react.profiler"), q = Symbol.for("react.consumer"), J = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), t = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), x = Symbol.for("react.activity"), X = Symbol.for("react.client.reference"), g = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, S = Object.prototype.hasOwnProperty, z = Array.isArray, P = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    h = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var j, L = {}, N = h.react_stack_bottom_frame.bind(
+      h,
+      c
+    )(), C = P(d(c)), Y = {};
+    W.Fragment = O, W.jsx = function(e, r, n) {
+      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return $(
+        e,
+        r,
+        n,
+        !1,
+        o ? Error("react-stack-top-frame") : N,
+        o ? P(d(e)) : C
+      );
+    }, W.jsxs = function(e, r, n) {
+      var o = 1e4 > g.recentlyCreatedOwnerStacks++;
+      return $(
+        e,
+        r,
+        n,
+        !0,
+        o ? Error("react-stack-top-frame") : N,
+        o ? P(d(e)) : C
+      );
+    };
+  })()), W;
+}
+var ee;
+function ie() {
+  return ee || (ee = 1, process.env.NODE_ENV === "production" ? I.exports = se() : I.exports = ce()), I.exports;
+}
+var B = ie();
+const le = ne(({
+  transform: a = { translateX: 0, translateY: 0, scale: 1, rotate: 0 },
+  offset: m = { left: 0, top: 0, right: 0, bottom: 0 },
+  minScale: l = 0.5,
+  maxScale: d = 10,
+  clampBounds: s = !1,
+  rotation: c = !0,
+  mouse: i = !0,
+  wheel: p = !0,
+  touch: w = !0,
+  gesture: T = !0,
+  children: $,
+  matrix: b,
+  style: D,
+  onTransformChange: h,
+  onInit: y,
+  onClick: G,
+  onMouseDown: O,
+  onTouchStart: U,
+  onMouseup: H,
+  onTouchend: q
+}, J) => {
+  const _ = F(null), t = F(null), f = F(!1), [v, A] = ae({
+    composePoint: (r, n) => [0, 0],
+    canvasWidth: 0,
+    canvasHeight: 0
+  }), x = F((r, n) => t.current ? t.current.normalizeClientCoords(r, n) : [0, 0]);
+  oe(J, () => ({
+    applyTransform: (r, n, o, R) => {
+      t.current && (R !== void 0 && (t.current.rotate = R), t.current.applyTransform(r, n, o));
+    },
+    composePoint: (r, n) => v.composePoint ? v.composePoint(r, n) : [0, 0],
+    normalizeClientCoords: (r, n) => x.current ? x.current(r, n) : [0, 0],
+    rotateCanvas: (r, n, o) => {
+      t.current && t.current.rotateCanvas(r, n, o);
+    },
+    zoompinchEngine: t.current,
+    canvasWidth: v.canvasWidth,
+    canvasHeight: v.canvasHeight
+  }));
+  function X() {
+    var r, n;
+    t.current && A({
+      composePoint: t.current.composePoint.bind(t.current),
+      canvasWidth: ((r = t.current.canvasBounds) == null ? void 0 : r.width) ?? 0,
+      canvasHeight: ((n = t.current.canvasBounds) == null ? void 0 : n.height) ?? 0
+    });
+  }
+  E(() => {
+    !_.current || t.current || (t.current = new ue(_.current, m, a.translateX, a.translateY, a.scale, a.rotate, l, d, s, c), console.log("Zoompinch initialisiert mit Props!"), t.current.addEventListener("update", () => {
+      if (!t.current) return;
+      const r = {
+        translateX: t.current.translateX,
+        translateY: t.current.translateY,
+        scale: t.current.scale,
+        rotate: t.current.rotate
+      };
+      h && (r.translateX !== a.translateX || r.translateY !== a.translateY || r.scale !== a.scale || r.rotate !== a.rotate) && h(r), X();
+    }), t.current.addEventListener("load", () => {
+      t.current && (f.current = !0, y && y(), X());
+    }));
+  }, []), E(() => {
+    !t.current || !f.current || (t.current.translateX !== a.translateX || t.current.translateY !== a.translateY || t.current.scale !== a.scale || t.current.rotate !== a.rotate) && (t.current.translateX = a.translateX, t.current.translateY = a.translateY, t.current.scale = a.scale, t.current.rotate = a.rotate, t.current.update());
+  }, [a]), E(() => {
+    !t.current || !f.current || (t.current.offset = m, t.current.update());
+  }, [m]), E(() => {
+    !t.current || !f.current || (t.current.minScale = l, t.current.update());
+  }, [l]), E(() => {
+    !t.current || !f.current || (t.current.maxScale = d, t.current.update());
+  }, [d]), E(() => {
+    !t.current || !f.current || (t.current.clampBounds = s, t.current.setTranslateFromUserGesture(t.current.translateX, t.current.translateY), t.current.update());
+  }, [s]), E(() => {
+    !t.current || !f.current || (t.current.rotation = c, t.current.update());
+  }, [c]);
+  const g = (r) => {
+    !t.current || !p || (r.preventDefault(), t.current.handleWheel(r));
+  }, S = (r) => {
+    !t.current || !T || t.current.handleGesturestart(r);
+  }, z = (r) => {
+    !t.current || !T || t.current.handleGesturechange(r);
+  }, P = (r) => {
+    !t.current || !T || t.current.handleGestureend(r);
+  }, j = (r) => {
+    !t.current || !i || t.current.handleMousedown(r);
+  }, L = (r) => {
+    !t.current || !i || t.current.handleMousemove(r);
+  }, N = (r) => {
+    !t.current || !i || t.current.handleMouseup(r);
+  }, C = (r) => {
+    !t.current || !w || t.current.handleTouchstart(r);
+  }, Y = (r) => {
+    !t.current || !w || t.current.handleTouchmove(r);
+  }, e = (r) => {
+    !t.current || !w || t.current.handleTouchend(r);
+  };
+  return E(() => {
+    if (!_.current) return;
+    const r = _.current;
+    return window.addEventListener("gesturechange", z), window.addEventListener("gestureend", P), window.addEventListener("mousemove", L), window.addEventListener("mouseup", N), window.addEventListener("touchmove", Y), window.addEventListener("touchend", e), r.addEventListener("wheel", g, { passive: !1 }), r.addEventListener("gesturestart", S, { passive: !1 }), r.addEventListener("mousedown", j, { passive: !1 }), r.addEventListener("touchstart", C, { passive: !1 }), () => {
+      window.removeEventListener("gesturechange", z), window.removeEventListener("gestureend", P), window.removeEventListener("mousemove", L), window.removeEventListener("mouseup", N), window.removeEventListener("touchmove", Y), window.removeEventListener("touchend", e), r.removeEventListener("wheel", g), r.removeEventListener("gesturestart", S), r.removeEventListener("mousedown", j), r.removeEventListener("touchstart", C);
+    };
+  }, [i, w, T, p]), /* @__PURE__ */ B.jsxs(
+    "div",
+    {
+      ref: _,
+      className: "zoompinch",
+      style: D,
+      onClick: G,
+      onMouseDown: O,
+      onTouchStart: U,
+      onMouseUp: H,
+      onTouchEnd: q,
+      children: [
+        /* @__PURE__ */ B.jsx("div", { className: "canvas", children: $ }),
+        /* @__PURE__ */ B.jsx("div", { className: "matrix", children: typeof b == "function" ? b({
+          composePoint: v.composePoint,
+          normalizeClientCoords: x.current,
+          canvasWidth: v.canvasWidth,
+          canvasHeight: v.canvasHeight
+        }) : b })
+      ]
+    }
+  );
+});
+le.displayName = "Zoompinch";
+export {
+  le as Zoompinch
+};

package/dist/zoompinch-react.umd.js

@@ -0,0 +1,22 @@
+(function(p,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","react","@zoompinch/core"],u):(p=typeof globalThis<"u"?globalThis:p||self,u(p.ZoompinchReact={},p.React,p.ZoompinchCore))})(this,(function(p,u,te){"use strict";var D={exports:{}},O={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var q;function ne(){if(q)return O;q=1;var a=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function f(d,c,i){var l=null;if(i!==void 0&&(l=""+i),c.key!==void 0&&(l=""+c.key),"key"in c){i={};for(var h in c)h!=="key"&&(i[h]=c[h])}else i=c;return c=i.ref,{$$typeof:a,type:d,key:l,ref:c!==void 0?c:null,props:i}}return O.Fragment=E,O.jsx=f,O.jsxs=f,O}var x={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var $;function ae(){return $||($=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===I?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case J:return"Profiler";case Z:return"StrictMode";case t:return"Suspense";case v:return"SuspenseList";case C:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case B:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case _:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case m:return r=e.displayName||null,r!==null?r:a(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return a(e(r))}catch{}}return null}function E(e){return""+e}function f(e){try{E(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),E(e)}}function d(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var r=a(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=P.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function l(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function h(e,r){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function w(){var e=a(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,r,n,o,T,Q){var s=n.ref;return e={$$typeof:A,type:e,key:r,props:n,_owner:o},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function X(e,r,n,o,T,Q){var s=r.children;if(s!==void 0)if(o)if(G(s)){for(o=0;o<s.length;o++)g(s[o]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(s);if(L.call(r,"key")){s=a(e);var k=Object.keys(r).filter(function(ue){return ue!=="key"});o=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",z[s+o]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,s,k,s),z[s+o]=!0)}if(s=null,n!==void 0&&(f(n),s=""+n),l(r)&&(f(r.key),s=""+r.key),"key"in r){n={};for(var K in r)K!=="key"&&(n[K]=r[K])}else n=r;return s&&h(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,s,n,c(),T,Q)}function g(e){F(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===j&&(e._payload.status==="fulfilled"?F(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function F(e){return typeof e=="object"&&e!==null&&e.$$typeof===A}var R=u,A=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),Z=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),B=Symbol.for("react.context"),_=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),m=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),I=Symbol.for("react.client.reference"),P=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,G=Array.isArray,y=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var N,Y={},M=R.react_stack_bottom_frame.bind(R,i)(),W=y(d(i)),z={};x.Fragment=S,x.jsx=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return X(e,r,n,!1,o?Error("react-stack-top-frame"):M,o?y(d(e)):W)},x.jsxs=function(e,r,n){var o=1e4>P.recentlyCreatedOwnerStacks++;return X(e,r,n,!0,o?Error("react-stack-top-frame"):M,o?y(d(e)):W)}})()),x}var ee;function oe(){return ee||(ee=1,process.env.NODE_ENV==="production"?D.exports=ne():D.exports=ae()),D.exports}var U=oe();const re=u.forwardRef(({transform:a={translateX:0,translateY:0,scale:1,rotate:0},offset:E={left:0,top:0,right:0,bottom:0},minScale:f=.5,maxScale:d=10,clampBounds:c=!1,rotation:i=!0,mouse:l=!0,wheel:h=!0,touch:w=!0,gesture:b=!0,children:X,matrix:g,style:F,onTransformChange:R,onInit:A,onClick:H,onMouseDown:S,onTouchStart:Z,onMouseup:J,onTouchend:V},B)=>{const _=u.useRef(null),t=u.useRef(null),v=u.useRef(!1),[m,j]=u.useState({composePoint:(r,n)=>[0,0],canvasWidth:0,canvasHeight:0}),C=u.useRef((r,n)=>t.current?t.current.normalizeClientCoords(r,n):[0,0]);u.useImperativeHandle(B,()=>({applyTransform:(r,n,o,T)=>{t.current&&(T!==void 0&&(t.current.rotate=T),t.current.applyTransform(r,n,o))},composePoint:(r,n)=>m.composePoint?m.composePoint(r,n):[0,0],normalizeClientCoords:(r,n)=>C.current?C.current(r,n):[0,0],rotateCanvas:(r,n,o)=>{t.current&&t.current.rotateCanvas(r,n,o)},zoompinchEngine:t.current,canvasWidth:m.canvasWidth,canvasHeight:m.canvasHeight}));function I(){var r,n;t.current&&j({composePoint:t.current.composePoint.bind(t.current),canvasWidth:((r=t.current.canvasBounds)==null?void 0:r.width)??0,canvasHeight:((n=t.current.canvasBounds)==null?void 0:n.height)??0})}u.useEffect(()=>{!_.current||t.current||(t.current=new te.Zoompinch(_.current,E,a.translateX,a.translateY,a.scale,a.rotate,f,d,c,i),console.log("Zoompinch initialisiert mit Props!"),t.current.addEventListener("update",()=>{if(!t.current)return;const r={translateX:t.current.translateX,translateY:t.current.translateY,scale:t.current.scale,rotate:t.current.rotate};R&&(r.translateX!==a.translateX||r.translateY!==a.translateY||r.scale!==a.scale||r.rotate!==a.rotate)&&R(r),I()}),t.current.addEventListener("load",()=>{t.current&&(v.current=!0,A&&A(),I())}))},[]),u.useEffect(()=>{!t.current||!v.current||(t.current.translateX!==a.translateX||t.current.translateY!==a.translateY||t.current.scale!==a.scale||t.current.rotate!==a.rotate)&&(t.current.translateX=a.translateX,t.current.translateY=a.translateY,t.current.scale=a.scale,t.current.rotate=a.rotate,t.current.update())},[a]),u.useEffect(()=>{!t.current||!v.current||(t.current.offset=E,t.current.update())},[E]),u.useEffect(()=>{!t.current||!v.current||(t.current.minScale=f,t.current.update())},[f]),u.useEffect(()=>{!t.current||!v.current||(t.current.maxScale=d,t.current.update())},[d]),u.useEffect(()=>{!t.current||!v.current||(t.current.clampBounds=c,t.current.setTranslateFromUserGesture(t.current.translateX,t.current.translateY),t.current.update())},[c]),u.useEffect(()=>{!t.current||!v.current||(t.current.rotation=i,t.current.update())},[i]);const P=r=>{!t.current||!h||(r.preventDefault(),t.current.handleWheel(r))},L=r=>{!t.current||!b||t.current.handleGesturestart(r)},G=r=>{!t.current||!b||t.current.handleGesturechange(r)},y=r=>{!t.current||!b||t.current.handleGestureend(r)},N=r=>{!t.current||!l||t.current.handleMousedown(r)},Y=r=>{!t.current||!l||t.current.handleMousemove(r)},M=r=>{!t.current||!l||t.current.handleMouseup(r)},W=r=>{!t.current||!w||t.current.handleTouchstart(r)},z=r=>{!t.current||!w||t.current.handleTouchmove(r)},e=r=>{!t.current||!w||t.current.handleTouchend(r)};return u.useEffect(()=>{if(!_.current)return;const r=_.current;return window.addEventListener("gesturechange",G),window.addEventListener("gestureend",y),window.addEventListener("mousemove",Y),window.addEventListener("mouseup",M),window.addEventListener("touchmove",z),window.addEventListener("touchend",e),r.addEventListener("wheel",P,{passive:!1}),r.addEventListener("gesturestart",L,{passive:!1}),r.addEventListener("mousedown",N,{passive:!1}),r.addEventListener("touchstart",W,{passive:!1}),()=>{window.removeEventListener("gesturechange",G),window.removeEventListener("gestureend",y),window.removeEventListener("mousemove",Y),window.removeEventListener("mouseup",M),window.removeEventListener("touchmove",z),window.removeEventListener("touchend",e),r.removeEventListener("wheel",P),r.removeEventListener("gesturestart",L),r.removeEventListener("mousedown",N),r.removeEventListener("touchstart",W)}},[l,w,b,h]),U.jsxs("div",{ref:_,className:"zoompinch",style:F,onClick:H,onMouseDown:S,onTouchStart:Z,onMouseUp:J,onTouchEnd:V,children:[U.jsx("div",{className:"canvas",children:X}),U.jsx("div",{className:"matrix",children:typeof g=="function"?g({composePoint:m.composePoint,normalizeClientCoords:C.current,canvasWidth:m.canvasWidth,canvasHeight:m.canvasHeight}):g})]})});re.displayName="Zoompinch",p.Zoompinch=re,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@zoompinch/react",
+  "version": "0.0.4",
+  "description": "React components for Zoompinch",
+  "main": "./dist/zoompinch-react.umd.js",
+  "module": "./dist/zoompinch-react.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/zoompinch-react.es.js",
+      "require": "./dist/zoompinch-react.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "zoompinch",
+    "zoom images",
+    "pinch to zoom",
+    "image zoom",
+    "pan gesture",
+    "pan and zoom",
+    "panzoom",
+    "gesture library",
+    "touch gestures"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://zoompinch.pages.dev/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ElyaConrad/zoompinch"
+  },
+  "author": "Elya Maurice Conrad",
+  "license": "ISC",
+  "type": "module",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "@zoompinch/core": "^0.0.27"
+  }
+}