@shopify/klint 0.0.93 → 0.0.97

package/dist/elements/index.d.cts

@@ -352,6 +352,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
         horizontal: CanvasTextAlign;
         vertical: CanvasTextBaseline;
     };
+    createVector: (x: number, y: number) => Vector;
     [key: string]: any;
 }
 interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -375,6 +376,7 @@ interface KlintCanvasOptions {
     nocanvas?: string;
     fps?: number;
     unsafemode?: string;
+    dpr?: number | "default";
     origin?: "corner" | "center";
 }
 type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;

package/dist/elements/index.d.ts

@@ -352,6 +352,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
         horizontal: CanvasTextAlign;
         vertical: CanvasTextBaseline;
     };
+    createVector: (x: number, y: number) => Vector;
     [key: string]: any;
 }
 interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -375,6 +376,7 @@ interface KlintCanvasOptions {
     nocanvas?: string;
     fps?: number;
     unsafemode?: string;
+    dpr?: number | "default";
     origin?: "corner" | "center";
 }
 type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;

package/dist/index.cjs

@@ -55,6 +55,7 @@ var DEFAULT_OPTIONS = {
   unsafemode: "false",
   willreadfrequently: "false",
   fps: DEFAULT_FPS,
+  dpr: "default",
   origin: "corner"
 };
 var CONFIG_PROPS = [
@@ -165,7 +166,8 @@ function Klint({
     if (!canvasRef.current || !containerRef.current) return;
     const canvas = canvasRef.current;
     const container = containerRef.current;
-    const dpr = window.devicePixelRatio || 3;
+    const defaultDPR = window.devicePixelRatio || 3;
+    const dpr = __options.dpr ? __options.dpr === "default" ? defaultDPR : __options.dpr : defaultDPR;
     contextRef.current = initContext ? initContext(canvas, __options) : null;
     const context2 = contextRef.current;
     if (!context2) return;
@@ -1711,17 +1713,35 @@ var DEFAULT_SCROLL_STATE = {
   velocity: 0,
   lastTime: 0
 };
+var DEFAULT_GESTURE_STATE = {
+  active: false,
+  touches: null,
+  startTouches: null,
+  startDistance: 0,
+  currentDistance: 0,
+  scale: 1,
+  rotation: 0,
+  startTime: 0,
+  deltaX: 0,
+  deltaY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  lastTime: 0,
+  lastX: 0,
+  lastY: 0
+};
 function useKlint() {
   const contextRef = (0, import_react2.useRef)(null);
   const mouseRef = (0, import_react2.useRef)(null);
   const scrollRef = (0, import_react2.useRef)(null);
+  const gestureRef = (0, import_react2.useRef)(null);
   const useDev = () => {
     return;
   };
   const KlintImage = () => {
     const imagesRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
     const loadImage = (0, import_react2.useCallback)(
-      async (key, url) => {
+      async (key, url, options) => {
         return new Promise((resolve, reject) => {
           const img = new Image();
           img.onload = () => {
@@ -1731,15 +1751,16 @@ function useKlint() {
             resolve(img);
           };
           img.onerror = reject;
+          img.crossOrigin = options?.crossOrigin || "anonymous";
           img.src = url;
         });
       },
       []
     );
     const loadImages = (0, import_react2.useCallback)(
-      async (imageMap) => {
+      async (imageMap, options) => {
         const promises = Object.entries(imageMap).map(
-          ([key, url]) => loadImage(key, url).then(
+          ([key, url]) => loadImage(key, url, options).then(
             (img) => [key, img]
           )
         );
@@ -1880,6 +1901,169 @@ function useKlint() {
       onScroll: (callback) => scrollCallbackRef.current = callback
     };
   };
+  const KlintGesture = () => {
+    if (!gestureRef.current) {
+      gestureRef.current = { ...DEFAULT_GESTURE_STATE };
+    }
+    const tapCallbackRef = (0, import_react2.useRef)(null);
+    const swipeCallbackRef = (0, import_react2.useRef)(null);
+    const pinchCallbackRef = (0, import_react2.useRef)(null);
+    const rotateCallbackRef = (0, import_react2.useRef)(null);
+    const touchStartCallbackRef = (0, import_react2.useRef)(null);
+    const touchMoveCallbackRef = (0, import_react2.useRef)(null);
+    const touchEndCallbackRef = (0, import_react2.useRef)(null);
+    (0, import_react2.useEffect)(() => {
+      if (!contextRef.current?.canvas) return;
+      const canvas = contextRef.current.canvas;
+      const ctx = contextRef.current;
+      const getDistance = (t1, t2) => {
+        const dx = t1.clientX - t2.clientX;
+        const dy = t1.clientY - t2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+      const getAngle = (t1, t2) => {
+        return Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) * 180 / Math.PI;
+      };
+      const getTouchCenter = (touches) => {
+        if (touches.length === 1) {
+          return {
+            x: touches[0].clientX,
+            y: touches[0].clientY
+          };
+        }
+        let sumX = 0;
+        let sumY = 0;
+        for (let i = 0; i < touches.length; i++) {
+          sumX += touches[i].clientX;
+          sumY += touches[i].clientY;
+        }
+        return {
+          x: sumX / touches.length,
+          y: sumY / touches.length
+        };
+      };
+      const handleTouchStart = (e) => {
+        if (!gestureRef.current) return;
+        const now = performance.now();
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.active = true;
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.startTouches = e.touches;
+        gestureRef.current.startTime = now;
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        gestureRef.current.deltaX = 0;
+        gestureRef.current.deltaY = 0;
+        gestureRef.current.velocityX = 0;
+        gestureRef.current.velocityY = 0;
+        if (e.touches.length >= 2) {
+          gestureRef.current.startDistance = getDistance(
+            e.touches[0],
+            e.touches[1]
+          );
+          gestureRef.current.currentDistance = gestureRef.current.startDistance;
+          gestureRef.current.scale = 1;
+          gestureRef.current.rotation = getAngle(e.touches[0], e.touches[1]);
+        }
+        if (touchStartCallbackRef.current) {
+          touchStartCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchMove = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active) return;
+        const now = performance.now();
+        const deltaTime = now - gestureRef.current.lastTime;
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.deltaX = touchCenter.x - gestureRef.current.lastX;
+        gestureRef.current.deltaY = touchCenter.y - gestureRef.current.lastY;
+        if (deltaTime > 0) {
+          gestureRef.current.velocityX = gestureRef.current.deltaX / deltaTime;
+          gestureRef.current.velocityY = gestureRef.current.deltaY / deltaTime;
+        }
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        if (e.touches.length >= 2) {
+          const currentDistance = getDistance(e.touches[0], e.touches[1]);
+          gestureRef.current.currentDistance = currentDistance;
+          if (gestureRef.current.startDistance > 0) {
+            gestureRef.current.scale = currentDistance / gestureRef.current.startDistance;
+          }
+          const currentAngle = getAngle(e.touches[0], e.touches[1]);
+          const startAngle = gestureRef.current.rotation;
+          gestureRef.current.rotation = currentAngle - startAngle;
+          if (pinchCallbackRef.current) {
+            pinchCallbackRef.current(ctx, e, gestureRef.current);
+          }
+          if (rotateCallbackRef.current && Math.abs(gestureRef.current.rotation) > 5) {
+            rotateCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        if (touchMoveCallbackRef.current) {
+          touchMoveCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchEnd = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active || !gestureRef.current.startTouches)
+          return;
+        const now = performance.now();
+        const touchDuration = now - gestureRef.current.startTime;
+        if (touchDuration < 300 && Math.abs(gestureRef.current.deltaX) < 10 && Math.abs(gestureRef.current.deltaY) < 10) {
+          if (tapCallbackRef.current) {
+            tapCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        const swipeThreshold = 50;
+        const isHorizontalSwipe = Math.abs(gestureRef.current.deltaX) > Math.abs(gestureRef.current.deltaY);
+        if (swipeCallbackRef.current && touchDuration < 300) {
+          if (isHorizontalSwipe && Math.abs(gestureRef.current.deltaX) > swipeThreshold) {
+            const direction = gestureRef.current.deltaX > 0 ? "right" : "left";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          } else if (!isHorizontalSwipe && Math.abs(gestureRef.current.deltaY) > swipeThreshold) {
+            const direction = gestureRef.current.deltaY > 0 ? "down" : "up";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          }
+        }
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+        if (e.touches.length === 0) {
+          gestureRef.current.active = false;
+        }
+      };
+      const handleTouchCancel = (e) => {
+        if (!gestureRef.current) return;
+        gestureRef.current.active = false;
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      canvas.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+      canvas.addEventListener("touchend", handleTouchEnd);
+      canvas.addEventListener("touchcancel", handleTouchCancel);
+      return () => {
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+      };
+    }, []);
+    return {
+      gesture: gestureRef.current,
+      onTap: (callback) => tapCallbackRef.current = callback,
+      onSwipe: (callback) => swipeCallbackRef.current = callback,
+      onPinch: (callback) => pinchCallbackRef.current = callback,
+      onRotate: (callback) => rotateCallbackRef.current = callback,
+      onTouchStart: (callback) => touchStartCallbackRef.current = callback,
+      onTouchMove: (callback) => touchMoveCallbackRef.current = callback,
+      onTouchEnd: (callback) => touchEndCallbackRef.current = callback
+    };
+  };
   const KlintWindow = () => {
     const resizeCallbackRef = (0, import_react2.useRef)(
       null
@@ -1991,6 +2175,7 @@ function useKlint() {
     },
     KlintMouse,
     KlintScroll,
+    KlintGesture,
     KlintWindow,
     KlintImage,
     togglePlay,

package/dist/index.d.cts

@@ -628,6 +628,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
         horizontal: CanvasTextAlign;
         vertical: CanvasTextBaseline;
     };
+    createVector: (x: number, y: number) => Vector;
     [key: string]: any;
 }
 interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -651,6 +652,7 @@ interface KlintCanvasOptions {
     nocanvas?: string;
     fps?: number;
     unsafemode?: string;
+    dpr?: number | "default";
     origin?: "corner" | "center";
 }
 type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
@@ -686,6 +688,23 @@ interface KlintScroll {
     velocity: number;
     lastTime: number;
 }
+interface KlintGesture {
+    active: boolean;
+    touches: TouchList | null;
+    startTouches: TouchList | null;
+    startDistance: number;
+    currentDistance: number;
+    scale: number;
+    rotation: number;
+    startTime: number;
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    lastTime: number;
+    lastX: number;
+    lastY: number;
+}
 declare function useKlint(): {
     context: {
         context: KlintContext | null;
@@ -703,6 +722,16 @@ declare function useKlint(): {
         scroll: KlintScroll;
         onScroll: (callback: (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void) => (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void;
     };
+    KlintGesture: () => {
+        gesture: KlintGesture;
+        onTap: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onSwipe: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void;
+        onPinch: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onRotate: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchStart: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchMove: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchEnd: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+    };
     KlintWindow: () => {
         onResize: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
         onBlur: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
@@ -711,8 +740,12 @@ declare function useKlint(): {
     };
     KlintImage: () => {
         images: Record<string, HTMLImageElement>;
-        loadImage: (key: string, url: string) => Promise<HTMLImageElement>;
-        loadImages: (imageMap: Record<string, string>) => Promise<Map<string, HTMLImageElement>>;
+        loadImage: (key: string, url: string, options?: {
+            crossOrigin?: string;
+        }) => Promise<HTMLImageElement>;
+        loadImages: (imageMap: Record<string, string>, options?: {
+            crossOrigin?: string;
+        }) => Promise<Map<string, HTMLImageElement>>;
         getImage: (key: string) => HTMLImageElement | undefined;
         hasImage: (key: string) => boolean;
         clearImages: () => void;

package/dist/index.d.ts

@@ -628,6 +628,7 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
         horizontal: CanvasTextAlign;
         vertical: CanvasTextBaseline;
     };
+    createVector: (x: number, y: number) => Vector;
     [key: string]: any;
 }
 interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
@@ -651,6 +652,7 @@ interface KlintCanvasOptions {
     nocanvas?: string;
     fps?: number;
     unsafemode?: string;
+    dpr?: number | "default";
     origin?: "corner" | "center";
 }
 type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
@@ -686,6 +688,23 @@ interface KlintScroll {
     velocity: number;
     lastTime: number;
 }
+interface KlintGesture {
+    active: boolean;
+    touches: TouchList | null;
+    startTouches: TouchList | null;
+    startDistance: number;
+    currentDistance: number;
+    scale: number;
+    rotation: number;
+    startTime: number;
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    lastTime: number;
+    lastX: number;
+    lastY: number;
+}
 declare function useKlint(): {
     context: {
         context: KlintContext | null;
@@ -703,6 +722,16 @@ declare function useKlint(): {
         scroll: KlintScroll;
         onScroll: (callback: (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void) => (ctx: KlintContext, scroll: KlintScroll, e: WheelEvent) => void;
     };
+    KlintGesture: () => {
+        gesture: KlintGesture;
+        onTap: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onSwipe: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture, direction: "left" | "right" | "up" | "down") => void;
+        onPinch: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onRotate: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchStart: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchMove: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+        onTouchEnd: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
+    };
     KlintWindow: () => {
         onResize: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
         onBlur: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
@@ -711,8 +740,12 @@ declare function useKlint(): {
     };
     KlintImage: () => {
         images: Record<string, HTMLImageElement>;
-        loadImage: (key: string, url: string) => Promise<HTMLImageElement>;
-        loadImages: (imageMap: Record<string, string>) => Promise<Map<string, HTMLImageElement>>;
+        loadImage: (key: string, url: string, options?: {
+            crossOrigin?: string;
+        }) => Promise<HTMLImageElement>;
+        loadImages: (imageMap: Record<string, string>, options?: {
+            crossOrigin?: string;
+        }) => Promise<Map<string, HTMLImageElement>>;
         getImage: (key: string) => HTMLImageElement | undefined;
         hasImage: (key: string) => boolean;
         clearImages: () => void;

package/dist/index.js

@@ -12,6 +12,7 @@ var DEFAULT_OPTIONS = {
   unsafemode: "false",
   willreadfrequently: "false",
   fps: DEFAULT_FPS,
+  dpr: "default",
   origin: "corner"
 };
 var CONFIG_PROPS = [
@@ -122,7 +123,8 @@ function Klint({
     if (!canvasRef.current || !containerRef.current) return;
     const canvas = canvasRef.current;
     const container = containerRef.current;
-    const dpr = window.devicePixelRatio || 3;
+    const defaultDPR = window.devicePixelRatio || 3;
+    const dpr = __options.dpr ? __options.dpr === "default" ? defaultDPR : __options.dpr : defaultDPR;
     contextRef.current = initContext ? initContext(canvas, __options) : null;
     const context2 = contextRef.current;
     if (!context2) return;
@@ -1668,17 +1670,35 @@ var DEFAULT_SCROLL_STATE = {
   velocity: 0,
   lastTime: 0
 };
+var DEFAULT_GESTURE_STATE = {
+  active: false,
+  touches: null,
+  startTouches: null,
+  startDistance: 0,
+  currentDistance: 0,
+  scale: 1,
+  rotation: 0,
+  startTime: 0,
+  deltaX: 0,
+  deltaY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  lastTime: 0,
+  lastX: 0,
+  lastY: 0
+};
 function useKlint() {
   const contextRef = useRef2(null);
   const mouseRef = useRef2(null);
   const scrollRef = useRef2(null);
+  const gestureRef = useRef2(null);
   const useDev = () => {
     return;
   };
   const KlintImage = () => {
     const imagesRef = useRef2(/* @__PURE__ */ new Map());
     const loadImage = useCallback2(
-      async (key, url) => {
+      async (key, url, options) => {
         return new Promise((resolve, reject) => {
           const img = new Image();
           img.onload = () => {
@@ -1688,15 +1708,16 @@ function useKlint() {
             resolve(img);
           };
           img.onerror = reject;
+          img.crossOrigin = options?.crossOrigin || "anonymous";
           img.src = url;
         });
       },
       []
     );
     const loadImages = useCallback2(
-      async (imageMap) => {
+      async (imageMap, options) => {
         const promises = Object.entries(imageMap).map(
-          ([key, url]) => loadImage(key, url).then(
+          ([key, url]) => loadImage(key, url, options).then(
             (img) => [key, img]
           )
         );
@@ -1837,6 +1858,169 @@ function useKlint() {
       onScroll: (callback) => scrollCallbackRef.current = callback
     };
   };
+  const KlintGesture = () => {
+    if (!gestureRef.current) {
+      gestureRef.current = { ...DEFAULT_GESTURE_STATE };
+    }
+    const tapCallbackRef = useRef2(null);
+    const swipeCallbackRef = useRef2(null);
+    const pinchCallbackRef = useRef2(null);
+    const rotateCallbackRef = useRef2(null);
+    const touchStartCallbackRef = useRef2(null);
+    const touchMoveCallbackRef = useRef2(null);
+    const touchEndCallbackRef = useRef2(null);
+    useEffect2(() => {
+      if (!contextRef.current?.canvas) return;
+      const canvas = contextRef.current.canvas;
+      const ctx = contextRef.current;
+      const getDistance = (t1, t2) => {
+        const dx = t1.clientX - t2.clientX;
+        const dy = t1.clientY - t2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+      };
+      const getAngle = (t1, t2) => {
+        return Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) * 180 / Math.PI;
+      };
+      const getTouchCenter = (touches) => {
+        if (touches.length === 1) {
+          return {
+            x: touches[0].clientX,
+            y: touches[0].clientY
+          };
+        }
+        let sumX = 0;
+        let sumY = 0;
+        for (let i = 0; i < touches.length; i++) {
+          sumX += touches[i].clientX;
+          sumY += touches[i].clientY;
+        }
+        return {
+          x: sumX / touches.length,
+          y: sumY / touches.length
+        };
+      };
+      const handleTouchStart = (e) => {
+        if (!gestureRef.current) return;
+        const now = performance.now();
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.active = true;
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.startTouches = e.touches;
+        gestureRef.current.startTime = now;
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        gestureRef.current.deltaX = 0;
+        gestureRef.current.deltaY = 0;
+        gestureRef.current.velocityX = 0;
+        gestureRef.current.velocityY = 0;
+        if (e.touches.length >= 2) {
+          gestureRef.current.startDistance = getDistance(
+            e.touches[0],
+            e.touches[1]
+          );
+          gestureRef.current.currentDistance = gestureRef.current.startDistance;
+          gestureRef.current.scale = 1;
+          gestureRef.current.rotation = getAngle(e.touches[0], e.touches[1]);
+        }
+        if (touchStartCallbackRef.current) {
+          touchStartCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchMove = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active) return;
+        const now = performance.now();
+        const deltaTime = now - gestureRef.current.lastTime;
+        const touchCenter = getTouchCenter(e.touches);
+        gestureRef.current.touches = e.touches;
+        gestureRef.current.deltaX = touchCenter.x - gestureRef.current.lastX;
+        gestureRef.current.deltaY = touchCenter.y - gestureRef.current.lastY;
+        if (deltaTime > 0) {
+          gestureRef.current.velocityX = gestureRef.current.deltaX / deltaTime;
+          gestureRef.current.velocityY = gestureRef.current.deltaY / deltaTime;
+        }
+        gestureRef.current.lastTime = now;
+        gestureRef.current.lastX = touchCenter.x;
+        gestureRef.current.lastY = touchCenter.y;
+        if (e.touches.length >= 2) {
+          const currentDistance = getDistance(e.touches[0], e.touches[1]);
+          gestureRef.current.currentDistance = currentDistance;
+          if (gestureRef.current.startDistance > 0) {
+            gestureRef.current.scale = currentDistance / gestureRef.current.startDistance;
+          }
+          const currentAngle = getAngle(e.touches[0], e.touches[1]);
+          const startAngle = gestureRef.current.rotation;
+          gestureRef.current.rotation = currentAngle - startAngle;
+          if (pinchCallbackRef.current) {
+            pinchCallbackRef.current(ctx, e, gestureRef.current);
+          }
+          if (rotateCallbackRef.current && Math.abs(gestureRef.current.rotation) > 5) {
+            rotateCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        if (touchMoveCallbackRef.current) {
+          touchMoveCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      const handleTouchEnd = (e) => {
+        if (!gestureRef.current || !gestureRef.current.active || !gestureRef.current.startTouches)
+          return;
+        const now = performance.now();
+        const touchDuration = now - gestureRef.current.startTime;
+        if (touchDuration < 300 && Math.abs(gestureRef.current.deltaX) < 10 && Math.abs(gestureRef.current.deltaY) < 10) {
+          if (tapCallbackRef.current) {
+            tapCallbackRef.current(ctx, e, gestureRef.current);
+          }
+        }
+        const swipeThreshold = 50;
+        const isHorizontalSwipe = Math.abs(gestureRef.current.deltaX) > Math.abs(gestureRef.current.deltaY);
+        if (swipeCallbackRef.current && touchDuration < 300) {
+          if (isHorizontalSwipe && Math.abs(gestureRef.current.deltaX) > swipeThreshold) {
+            const direction = gestureRef.current.deltaX > 0 ? "right" : "left";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          } else if (!isHorizontalSwipe && Math.abs(gestureRef.current.deltaY) > swipeThreshold) {
+            const direction = gestureRef.current.deltaY > 0 ? "down" : "up";
+            swipeCallbackRef.current(ctx, e, gestureRef.current, direction);
+          }
+        }
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+        if (e.touches.length === 0) {
+          gestureRef.current.active = false;
+        }
+      };
+      const handleTouchCancel = (e) => {
+        if (!gestureRef.current) return;
+        gestureRef.current.active = false;
+        if (touchEndCallbackRef.current) {
+          touchEndCallbackRef.current(ctx, e, gestureRef.current);
+        }
+      };
+      canvas.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+      canvas.addEventListener("touchend", handleTouchEnd);
+      canvas.addEventListener("touchcancel", handleTouchCancel);
+      return () => {
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+      };
+    }, []);
+    return {
+      gesture: gestureRef.current,
+      onTap: (callback) => tapCallbackRef.current = callback,
+      onSwipe: (callback) => swipeCallbackRef.current = callback,
+      onPinch: (callback) => pinchCallbackRef.current = callback,
+      onRotate: (callback) => rotateCallbackRef.current = callback,
+      onTouchStart: (callback) => touchStartCallbackRef.current = callback,
+      onTouchMove: (callback) => touchMoveCallbackRef.current = callback,
+      onTouchEnd: (callback) => touchEndCallbackRef.current = callback
+    };
+  };
   const KlintWindow = () => {
     const resizeCallbackRef = useRef2(
       null
@@ -1948,6 +2132,7 @@ function useKlint() {
     },
     KlintMouse,
     KlintScroll,
+    KlintGesture,
     KlintWindow,
     KlintImage,
     togglePlay,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shopify/klint",
   "author": "arthurcloche",
   "license": "MIT",
-  "version": "0.0.93",
+  "version": "0.0.97",
   "description": "A modern creative coding library",
   "type": "module",
   "main": "dist/index.cjs",
@@ -66,12 +66,12 @@
     "version": "yarn version"
   },
   "peerDependencies": {
-    "react": "^19.1.0",
+    "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.1",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
     "concurrently": "^8.2.0",
     "jsdom": "^26.0.0",
     "rimraf": "^5.0.0",