@jinmi/ui 0.0.0-stage → 6.0.2

package/es/Image/viewer/useGalleryNav.mjs

@@ -0,0 +1,90 @@
+import { isTypingTarget } from "./useViewerGestures.mjs";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/Image/viewer/useGalleryNav.ts
+const readNatural = (element) => {
+	if (element.naturalWidth > 0 && element.naturalHeight > 0) return {
+		height: element.naturalHeight,
+		width: element.naturalWidth
+	};
+	const rect = element.getBoundingClientRect();
+	return {
+		height: Math.max(rect.height, 1),
+		width: Math.max(rect.width, 1)
+	};
+};
+const useGalleryNav = ({ cancelPendingClose, currentIndex, entries, flipX, flipY, getInitialScale, resetCloseTracking, rotate, scale, setCurrentIndex, setNatural, setSource, switchTo, syncZoomNatural, x, y }) => {
+	const indexRef = useRef(currentIndex);
+	indexRef.current = currentIndex;
+	const switchingRef = useRef(false);
+	const switchToRef = useRef(switchTo);
+	switchToRef.current = switchTo;
+	const cancelPendingCloseRef = useRef(cancelPendingClose);
+	cancelPendingCloseRef.current = cancelPendingClose;
+	const resetCloseTrackingRef = useRef(resetCloseTracking);
+	resetCloseTrackingRef.current = resetCloseTracking;
+	const goTo = useCallback((nextIndex) => {
+		if (switchingRef.current) return;
+		if (nextIndex < 0 || nextIndex >= entries.length || nextIndex === indexRef.current) return;
+		switchingRef.current = true;
+		cancelPendingCloseRef.current();
+		resetCloseTrackingRef.current();
+		switchToRef.current(() => {
+			const nextEntry = entries[nextIndex];
+			setCurrentIndex(nextIndex);
+			setSource(nextEntry.src);
+			rotate.jump(0);
+			flipX.jump(false);
+			flipY.jump(false);
+			const nextNatural = readNatural(nextEntry.element);
+			setNatural(nextNatural);
+			syncZoomNatural(nextNatural);
+			scale.jump(getInitialScale());
+			x.jump(0);
+			y.jump(0);
+			switchingRef.current = false;
+		}, nextIndex > indexRef.current ? 1 : -1);
+	}, [
+		entries,
+		flipX,
+		flipY,
+		getInitialScale,
+		rotate,
+		scale,
+		setCurrentIndex,
+		setNatural,
+		setSource,
+		syncZoomNatural,
+		x,
+		y
+	]);
+	const prev = useCallback(() => goTo(indexRef.current - 1), [goTo]);
+	const next = useCallback(() => goTo(indexRef.current + 1), [goTo]);
+	const isGallery = entries.length > 1;
+	useEffect(() => {
+		if (!isGallery) return;
+		const listener = (event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey || event.defaultPrevented) return;
+			if (isTypingTarget(event.target)) return;
+			if (event.key === "ArrowLeft") prev();
+			else if (event.key === "ArrowRight") next();
+			else return;
+			event.preventDefault();
+		};
+		document.addEventListener("keydown", listener);
+		return () => document.removeEventListener("keydown", listener);
+	}, [
+		isGallery,
+		next,
+		prev
+	]);
+	return {
+		hasNext: currentIndex < entries.length - 1,
+		hasPrev: currentIndex > 0,
+		next,
+		prev
+	};
+};
+//#endregion
+export { readNatural, useGalleryNav };
+
+//# sourceMappingURL=useGalleryNav.mjs.map

package/es/Image/viewer/useGalleryNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGalleryNav.mjs","names":[],"sources":["../../../src/Image/viewer/useGalleryNav.ts"],"sourcesContent":["import type { MotionValue } from 'motion/react';\r\nimport { useCallback, useEffect, useRef } from 'react';\r\n\r\nimport type { Size } from './geometry';\r\nimport type { PreviewEntry } from './registry';\r\nimport { isTypingTarget } from './useViewerGestures';\r\n\r\nexport const readNatural = (element: HTMLImageElement): Size => {\r\n  if (element.naturalWidth > 0 && element.naturalHeight > 0)\r\n    return { height: element.naturalHeight, width: element.naturalWidth };\r\n  const rect = element.getBoundingClientRect();\r\n  return { height: Math.max(rect.height, 1), width: Math.max(rect.width, 1) };\r\n};\r\n\r\nexport interface UseGalleryNavOptions {\r\n  cancelPendingClose: () => void;\r\n  currentIndex: number;\r\n  entries: PreviewEntry[];\r\n  flipX: MotionValue<boolean>;\r\n  flipY: MotionValue<boolean>;\r\n  getInitialScale: () => number;\r\n  resetCloseTracking: () => void;\r\n  rotate: MotionValue<number>;\r\n  scale: MotionValue<number>;\r\n  setCurrentIndex: (index: number) => void;\r\n  setNatural: (natural: Size) => void;\r\n  setSource: (src: string) => void;\r\n  switchTo: (apply: () => void, direction?: 1 | -1) => void;\r\n  syncZoomNatural: (natural: Size) => void;\r\n  x: MotionValue<number>;\r\n  y: MotionValue<number>;\r\n}\r\n\r\nexport interface UseGalleryNavResult {\r\n  hasNext: boolean;\r\n  hasPrev: boolean;\r\n  next: () => void;\r\n  prev: () => void;\r\n}\r\n\r\nexport const useGalleryNav = ({\r\n  cancelPendingClose,\r\n  currentIndex,\r\n  entries,\r\n  flipX,\r\n  flipY,\r\n  getInitialScale,\r\n  resetCloseTracking,\r\n  rotate,\r\n  scale,\r\n  setCurrentIndex,\r\n  setNatural,\r\n  setSource,\r\n  switchTo,\r\n  syncZoomNatural,\r\n  x,\r\n  y,\r\n}: UseGalleryNavOptions): UseGalleryNavResult => {\r\n  const indexRef = useRef(currentIndex);\r\n  indexRef.current = currentIndex;\r\n\r\n  const switchingRef = useRef(false);\r\n\r\n  const switchToRef = useRef(switchTo);\r\n  switchToRef.current = switchTo;\r\n\r\n  const cancelPendingCloseRef = useRef(cancelPendingClose);\r\n  cancelPendingCloseRef.current = cancelPendingClose;\r\n\r\n  const resetCloseTrackingRef = useRef(resetCloseTracking);\r\n  resetCloseTrackingRef.current = resetCloseTracking;\r\n\r\n  const goTo = useCallback(\r\n    (nextIndex: number) => {\r\n      if (switchingRef.current) return;\r\n      if (nextIndex < 0 || nextIndex >= entries.length || nextIndex === indexRef.current) return;\r\n      switchingRef.current = true;\r\n      // A switch changes the displayed image out from under any pending\r\n      // click-to-close or wheel-close accumulation armed for the old image,\r\n      // so both must clear at this single choke point every switch goes through.\r\n      cancelPendingCloseRef.current();\r\n      resetCloseTrackingRef.current();\r\n      switchToRef.current(\r\n        () => {\r\n          const nextEntry = entries[nextIndex];\r\n          setCurrentIndex(nextIndex);\r\n          setSource(nextEntry.src);\r\n          // Orientation first: syncZoomNatural derives the incoming image's\r\n          // resting scale from the fit rect, which is rotation-dependent.\r\n          rotate.jump(0);\r\n          flipX.jump(false);\r\n          flipY.jump(false);\r\n          const nextNatural = readNatural(nextEntry.element);\r\n          setNatural(nextNatural);\r\n          syncZoomNatural(nextNatural);\r\n          // .jump(), not .set(): a surviving spring from the outgoing image (a\r\n          // dragEnd clamp-back, a wheel snap-back, or reset()) targets the OLD\r\n          // image's bounds and would otherwise silently overwrite this reset on\r\n          // its next tick, since motion's set() never stops an active animation.\r\n          scale.jump(getInitialScale());\r\n          x.jump(0);\r\n          y.jump(0);\r\n          switchingRef.current = false;\r\n        },\r\n        nextIndex > indexRef.current ? 1 : -1,\r\n      );\r\n    },\r\n    [\r\n      entries,\r\n      flipX,\r\n      flipY,\r\n      getInitialScale,\r\n      rotate,\r\n      scale,\r\n      setCurrentIndex,\r\n      setNatural,\r\n      setSource,\r\n      syncZoomNatural,\r\n      x,\r\n      y,\r\n    ],\r\n  );\r\n\r\n  const prev = useCallback(() => goTo(indexRef.current - 1), [goTo]);\r\n  const next = useCallback(() => goTo(indexRef.current + 1), [goTo]);\r\n\r\n  const isGallery = entries.length > 1;\r\n\r\n  useEffect(() => {\r\n    if (!isGallery) return;\r\n    const listener = (event: KeyboardEvent) => {\r\n      if (event.altKey || event.ctrlKey || event.metaKey || event.defaultPrevented) return;\r\n      if (isTypingTarget(event.target)) return;\r\n      if (event.key === 'ArrowLeft') prev();\r\n      else if (event.key === 'ArrowRight') next();\r\n      else return;\r\n      event.preventDefault();\r\n    };\r\n    document.addEventListener('keydown', listener);\r\n    return () => document.removeEventListener('keydown', listener);\r\n  }, [isGallery, next, prev]);\r\n\r\n  return {\r\n    hasNext: currentIndex < entries.length - 1,\r\n    hasPrev: currentIndex > 0,\r\n    next,\r\n    prev,\r\n  };\r\n};\r\n"],"mappings":";;;AAOA,MAAa,eAAe,YAAoC;CAC9D,IAAI,QAAQ,eAAe,KAAK,QAAQ,gBAAgB,GACtD,OAAO;EAAE,QAAQ,QAAQ;EAAe,OAAO,QAAQ;CAAa;CACtE,MAAM,OAAO,QAAQ,sBAAsB;CAC3C,OAAO;EAAE,QAAQ,KAAK,IAAI,KAAK,QAAQ,CAAC;EAAG,OAAO,KAAK,IAAI,KAAK,OAAO,CAAC;CAAE;AAC5E;AA4BA,MAAa,iBAAiB,EAC5B,oBACA,cACA,SACA,OACA,OACA,iBACA,oBACA,QACA,OACA,iBACA,YACA,WACA,UACA,iBACA,GACA,QAC+C;CAC/C,MAAM,WAAW,OAAO,YAAY;CACpC,SAAS,UAAU;CAEnB,MAAM,eAAe,OAAO,KAAK;CAEjC,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,MAAM,wBAAwB,OAAO,kBAAkB;CACvD,sBAAsB,UAAU;CAEhC,MAAM,wBAAwB,OAAO,kBAAkB;CACvD,sBAAsB,UAAU;CAEhC,MAAM,OAAO,aACV,cAAsB;EACrB,IAAI,aAAa,SAAS;EAC1B,IAAI,YAAY,KAAK,aAAa,QAAQ,UAAU,cAAc,SAAS,SAAS;EACpF,aAAa,UAAU;EAIvB,sBAAsB,QAAQ;EAC9B,sBAAsB,QAAQ;EAC9B,YAAY,cACJ;GACJ,MAAM,YAAY,QAAQ;GAC1B,gBAAgB,SAAS;GACzB,UAAU,UAAU,GAAG;GAGvB,OAAO,KAAK,CAAC;GACb,MAAM,KAAK,KAAK;GAChB,MAAM,KAAK,KAAK;GAChB,MAAM,cAAc,YAAY,UAAU,OAAO;GACjD,WAAW,WAAW;GACtB,gBAAgB,WAAW;GAK3B,MAAM,KAAK,gBAAgB,CAAC;GAC5B,EAAE,KAAK,CAAC;GACR,EAAE,KAAK,CAAC;GACR,aAAa,UAAU;EACzB,GACA,YAAY,SAAS,UAAU,IAAI,EACrC;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,OAAO,kBAAkB,KAAK,SAAS,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;CACjE,MAAM,OAAO,kBAAkB,KAAK,SAAS,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;CAEjE,MAAM,YAAY,QAAQ,SAAS;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAChB,MAAM,YAAY,UAAyB;GACzC,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,WAAW,MAAM,kBAAkB;GAC9E,IAAI,eAAe,MAAM,MAAM,GAAG;GAClC,IAAI,MAAM,QAAQ,aAAa,KAAK;QAC/B,IAAI,MAAM,QAAQ,cAAc,KAAK;QACrC;GACL,MAAM,eAAe;EACvB;EACA,SAAS,iBAAiB,WAAW,QAAQ;EAC7C,aAAa,SAAS,oBAAoB,WAAW,QAAQ;CAC/D,GAAG;EAAC;EAAW;EAAM;CAAI,CAAC;CAE1B,OAAO;EACL,SAAS,eAAe,QAAQ,SAAS;EACzC,SAAS,eAAe;EACxB;EACA;CACF;AACF"}

package/es/Image/viewer/useRefitTransition.mjs

@@ -0,0 +1,47 @@
+import { computeFit } from "./geometry.mjs";
+import { OPEN_SPRING } from "./useFlipTransition.mjs";
+import { useLayoutEffect, useRef } from "react";
+import { animate } from "motion/react";
+//#region src/Image/viewer/useRefitTransition.ts
+const useRefitTransition = ({ animated, fillViewport, isTransitioning, natural, rotation, scale, viewport, x, y }) => {
+	const naturalRef = useRef(natural);
+	useLayoutEffect(() => {
+		const previousNatural = naturalRef.current;
+		naturalRef.current = natural;
+		if (previousNatural.width === natural.width && previousNatural.height === natural.height) return;
+		if (!animated) return;
+		if (isTransitioning()) return;
+		const previousFit = computeFit(previousNatural, viewport, rotation, fillViewport);
+		const nextFit = computeFit(natural, viewport, rotation, fillViewport);
+		if (previousFit.width === nextFit.width && previousFit.height === nextFit.height && previousFit.x === nextFit.x && previousFit.y === nextFit.y) return;
+		const ratio = nextFit.width > 0 ? previousFit.width / nextFit.width : 1;
+		if (!Number.isFinite(ratio) || ratio <= 0) return;
+		const previousCenterX = previousFit.x + previousFit.width / 2;
+		const previousCenterY = previousFit.y + previousFit.height / 2;
+		const nextCenterX = nextFit.x + nextFit.width / 2;
+		const nextCenterY = nextFit.y + nextFit.height / 2;
+		const targetScale = scale.get();
+		const targetX = x.get();
+		const targetY = y.get();
+		scale.set(targetScale * ratio);
+		x.set(targetX + (previousCenterX - nextCenterX));
+		y.set(targetY + (previousCenterY - nextCenterY));
+		animate(scale, targetScale, OPEN_SPRING);
+		animate(x, targetX, OPEN_SPRING);
+		animate(y, targetY, OPEN_SPRING);
+	}, [
+		animated,
+		fillViewport,
+		isTransitioning,
+		natural,
+		rotation,
+		scale,
+		viewport,
+		x,
+		y
+	]);
+};
+//#endregion
+export { useRefitTransition };
+
+//# sourceMappingURL=useRefitTransition.mjs.map

package/es/Image/viewer/useRefitTransition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefitTransition.mjs","names":[],"sources":["../../../src/Image/viewer/useRefitTransition.ts"],"sourcesContent":["import type { MotionValue } from 'motion/react';\r\nimport { animate } from 'motion/react';\r\nimport { useLayoutEffect, useRef } from 'react';\r\n\r\nimport { computeFit, type Rotation, type Size } from './geometry';\r\nimport { OPEN_SPRING } from './useFlipTransition';\r\n\r\nexport interface UseRefitTransitionOptions {\r\n  animated: boolean;\r\n  fillViewport?: boolean;\r\n  isTransitioning: () => boolean;\r\n  natural: Size;\r\n  rotation: Rotation;\r\n  scale: MotionValue<number>;\r\n  viewport: Size;\r\n  x: MotionValue<number>;\r\n  y: MotionValue<number>;\r\n}\r\n\r\nexport const useRefitTransition = ({\r\n  animated,\r\n  fillViewport,\r\n  isTransitioning,\r\n  natural,\r\n  rotation,\r\n  scale,\r\n  viewport,\r\n  x,\r\n  y,\r\n}: UseRefitTransitionOptions): void => {\r\n  const naturalRef = useRef(natural);\r\n\r\n  useLayoutEffect(() => {\r\n    const previousNatural = naturalRef.current;\r\n    naturalRef.current = natural;\r\n    if (previousNatural.width === natural.width && previousNatural.height === natural.height)\r\n      return;\r\n    if (!animated) return;\r\n    // A FLIP open/close spring or a gallery switch is already animating these\r\n    // same scale/x/y values. Calling animate() on them here would silently\r\n    // cancel that in-flight animation (motion's animate() stops the prior one\r\n    // without firing its onComplete), which can park the viewer mid-transform\r\n    // on open or, worse, permanently wedge an invisible dialog open on close.\r\n    // Skip outright: the open spring always targets identity relative to the\r\n    // *current* fit rect, so it self-corrects once it settles; a switch resets\r\n    // the transform itself, and instant re-fit is correct there.\r\n    if (isTransitioning()) return;\r\n\r\n    const previousFit = computeFit(previousNatural, viewport, rotation, fillViewport);\r\n    const nextFit = computeFit(natural, viewport, rotation, fillViewport);\r\n    if (\r\n      previousFit.width === nextFit.width &&\r\n      previousFit.height === nextFit.height &&\r\n      previousFit.x === nextFit.x &&\r\n      previousFit.y === nextFit.y\r\n    )\r\n      return;\r\n\r\n    const ratio = nextFit.width > 0 ? previousFit.width / nextFit.width : 1;\r\n    if (!Number.isFinite(ratio) || ratio <= 0) return;\r\n\r\n    const previousCenterX = previousFit.x + previousFit.width / 2;\r\n    const previousCenterY = previousFit.y + previousFit.height / 2;\r\n    const nextCenterX = nextFit.x + nextFit.width / 2;\r\n    const nextCenterY = nextFit.y + nextFit.height / 2;\r\n\r\n    const targetScale = scale.get();\r\n    const targetX = x.get();\r\n    const targetY = y.get();\r\n\r\n    scale.set(targetScale * ratio);\r\n    x.set(targetX + (previousCenterX - nextCenterX));\r\n    y.set(targetY + (previousCenterY - nextCenterY));\r\n\r\n    animate(scale, targetScale, OPEN_SPRING);\r\n    animate(x, targetX, OPEN_SPRING);\r\n    animate(y, targetY, OPEN_SPRING);\r\n  }, [animated, fillViewport, isTransitioning, natural, rotation, scale, viewport, x, y]);\r\n};\r\n"],"mappings":";;;;;AAmBA,MAAa,sBAAsB,EACjC,UACA,cACA,iBACA,SACA,UACA,OACA,UACA,GACA,QACqC;CACrC,MAAM,aAAa,OAAO,OAAO;CAEjC,sBAAsB;EACpB,MAAM,kBAAkB,WAAW;EACnC,WAAW,UAAU;EACrB,IAAI,gBAAgB,UAAU,QAAQ,SAAS,gBAAgB,WAAW,QAAQ,QAChF;EACF,IAAI,CAAC,UAAU;EASf,IAAI,gBAAgB,GAAG;EAEvB,MAAM,cAAc,WAAW,iBAAiB,UAAU,UAAU,YAAY;EAChF,MAAM,UAAU,WAAW,SAAS,UAAU,UAAU,YAAY;EACpE,IACE,YAAY,UAAU,QAAQ,SAC9B,YAAY,WAAW,QAAQ,UAC/B,YAAY,MAAM,QAAQ,KAC1B,YAAY,MAAM,QAAQ,GAE1B;EAEF,MAAM,QAAQ,QAAQ,QAAQ,IAAI,YAAY,QAAQ,QAAQ,QAAQ;EACtE,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,SAAS,GAAG;EAE3C,MAAM,kBAAkB,YAAY,IAAI,YAAY,QAAQ;EAC5D,MAAM,kBAAkB,YAAY,IAAI,YAAY,SAAS;EAC7D,MAAM,cAAc,QAAQ,IAAI,QAAQ,QAAQ;EAChD,MAAM,cAAc,QAAQ,IAAI,QAAQ,SAAS;EAEjD,MAAM,cAAc,MAAM,IAAI;EAC9B,MAAM,UAAU,EAAE,IAAI;EACtB,MAAM,UAAU,EAAE,IAAI;EAEtB,MAAM,IAAI,cAAc,KAAK;EAC7B,EAAE,IAAI,WAAW,kBAAkB,YAAY;EAC/C,EAAE,IAAI,WAAW,kBAAkB,YAAY;EAE/C,QAAQ,OAAO,aAAa,WAAW;EACvC,QAAQ,GAAG,SAAS,WAAW;EAC/B,QAAQ,GAAG,SAAS,WAAW;CACjC,GAAG;EAAC;EAAU;EAAc;EAAiB;EAAS;EAAU;EAAO;EAAU;EAAG;CAAC,CAAC;AACxF"}

package/es/Image/viewer/useViewerGestures.mjs

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/Image/viewer/useViewerGestures.ts
+const DRAG_THRESHOLD = 4;
+const DOUBLE_CLICK_WINDOW = 250;
+const capturePointer = (node, pointerId) => {
+	if (typeof node.setPointerCapture === "function") node.setPointerCapture(pointerId);
+};
+const isTypingTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || [
+	"INPUT",
+	"SELECT",
+	"TEXTAREA"
+].includes(target.tagName));
+const useViewerGestures = ({ dragBy, dragEnd, handleDoubleClick, handleWheel, isClean, isZoomed, onClose, reset, zoomIn, zoomOut }) => {
+	const [popup, setPopup] = useState(null);
+	const [panning, setPanning] = useState(false);
+	const imageNodeRef = useRef(null);
+	const dragRef = useRef(null);
+	const movedRef = useRef(false);
+	const pendingCloseRef = useRef(null);
+	const isCleanRef = useRef(isClean);
+	isCleanRef.current = isClean;
+	const cancelPendingClose = useCallback(() => {
+		if (pendingCloseRef.current === null) return;
+		clearTimeout(pendingCloseRef.current);
+		pendingCloseRef.current = null;
+	}, []);
+	useEffect(() => cancelPendingClose, [cancelPendingClose]);
+	const imageRef = useCallback((node) => {
+		imageNodeRef.current = node;
+	}, []);
+	useEffect(() => {
+		if (!popup) return;
+		const listener = (event) => handleWheel(event);
+		popup.addEventListener("wheel", listener, { passive: false });
+		return () => popup.removeEventListener("wheel", listener);
+	}, [handleWheel, popup]);
+	useEffect(() => {
+		const listener = (event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey || event.defaultPrevented) return;
+			if (isTypingTarget(event.target)) return;
+			switch (event.key) {
+				case "+":
+				case "=":
+					zoomIn();
+					break;
+				case "-":
+					zoomOut();
+					break;
+				case "0":
+					reset();
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		};
+		document.addEventListener("keydown", listener);
+		return () => document.removeEventListener("keydown", listener);
+	}, [
+		reset,
+		zoomIn,
+		zoomOut
+	]);
+	const onPointerDown = useCallback((event) => {
+		if (dragRef.current?.panning) return;
+		if (event.button !== 0) return;
+		cancelPendingClose();
+		const start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const panEligible = isZoomed && event.target === imageNodeRef.current;
+		movedRef.current = false;
+		dragRef.current = {
+			id: event.pointerId,
+			last: start,
+			panning: panEligible,
+			start
+		};
+		if (!panEligible) return;
+		capturePointer(event.target, event.pointerId);
+		setPanning(true);
+	}, [cancelPendingClose, isZoomed]);
+	const onPointerMove = useCallback((event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.id !== event.pointerId) return;
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (Math.hypot(point.x - drag.start.x, point.y - drag.start.y) > DRAG_THRESHOLD) movedRef.current = true;
+		if (drag.panning) dragBy({
+			x: point.x - drag.last.x,
+			y: point.y - drag.last.y
+		});
+		drag.last = point;
+	}, [dragBy]);
+	const onPointerFinish = useCallback((event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.id !== event.pointerId) return;
+		dragRef.current = null;
+		if (!drag.panning) return;
+		setPanning(false);
+		dragEnd();
+	}, [dragEnd]);
+	const onSurfaceClick = useCallback(() => {
+		if (movedRef.current) return;
+		cancelPendingClose();
+		onClose();
+	}, [cancelPendingClose, onClose]);
+	const onImageClick = useCallback((event) => {
+		event.stopPropagation();
+		cancelPendingClose();
+		if (movedRef.current || !isCleanRef.current) return;
+		pendingCloseRef.current = setTimeout(() => {
+			pendingCloseRef.current = null;
+			if (!isCleanRef.current) return;
+			onClose();
+		}, DOUBLE_CLICK_WINDOW);
+	}, [cancelPendingClose, onClose]);
+	const onImageDoubleClick = useCallback((event) => {
+		event.stopPropagation();
+		cancelPendingClose();
+		handleDoubleClick({
+			x: event.clientX,
+			y: event.clientY
+		});
+	}, [cancelPendingClose, handleDoubleClick]);
+	return {
+		cancelPendingClose,
+		cursor: isZoomed ? panning ? "grabbing" : "grab" : "zoom-out",
+		imageRef,
+		onImageClick,
+		onImageDoubleClick,
+		onPointerDown,
+		onPointerFinish,
+		onPointerMove,
+		onSurfaceClick,
+		popupRef: setPopup
+	};
+};
+//#endregion
+export { isTypingTarget, useViewerGestures };
+
+//# sourceMappingURL=useViewerGestures.mjs.map

package/es/Image/viewer/useViewerGestures.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewerGestures.mjs","names":[],"sources":["../../../src/Image/viewer/useViewerGestures.ts"],"sourcesContent":["import type { MouseEvent, PointerEvent } from 'react';\r\nimport { useCallback, useEffect, useRef, useState } from 'react';\r\n\r\nimport type { Point } from './geometry';\r\nimport type { WheelLikeEvent } from './useZoomPan';\r\n\r\nconst DRAG_THRESHOLD = 4;\r\nconst DOUBLE_CLICK_WINDOW = 250;\r\n\r\nexport type ViewerCursor = 'grab' | 'grabbing' | 'zoom-out';\r\n\r\nexport interface UseViewerGesturesOptions {\r\n  dragBy: (delta: Point) => void;\r\n  dragEnd: () => void;\r\n  handleDoubleClick: (point: Point) => void;\r\n  handleWheel: (event: WheelLikeEvent) => void;\r\n  isClean: boolean;\r\n  isZoomed: boolean;\r\n  onClose: () => void;\r\n  reset: () => void;\r\n  zoomIn: () => void;\r\n  zoomOut: () => void;\r\n}\r\n\r\nexport interface UseViewerGesturesResult {\r\n  cancelPendingClose: () => void;\r\n  cursor: ViewerCursor;\r\n  imageRef: (node: HTMLImageElement | null) => void;\r\n  onImageClick: (event: MouseEvent<HTMLElement>) => void;\r\n  onImageDoubleClick: (event: MouseEvent<HTMLElement>) => void;\r\n  onPointerDown: (event: PointerEvent<HTMLElement>) => void;\r\n  onPointerFinish: (event: PointerEvent<HTMLElement>) => void;\r\n  onPointerMove: (event: PointerEvent<HTMLElement>) => void;\r\n  onSurfaceClick: () => void;\r\n  popupRef: (node: HTMLElement | null) => void;\r\n}\r\n\r\ninterface DragState {\r\n  id: number;\r\n  last: Point;\r\n  panning: boolean;\r\n  start: Point;\r\n}\r\n\r\nconst capturePointer = (node: Element, pointerId: number) => {\r\n  if (typeof node.setPointerCapture === 'function') node.setPointerCapture(pointerId);\r\n};\r\n\r\nexport const isTypingTarget = (target: EventTarget | null) =>\r\n  target instanceof HTMLElement &&\r\n  (target.isContentEditable || ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName));\r\n\r\nexport const useViewerGestures = ({\r\n  dragBy,\r\n  dragEnd,\r\n  handleDoubleClick,\r\n  handleWheel,\r\n  isClean,\r\n  isZoomed,\r\n  onClose,\r\n  reset,\r\n  zoomIn,\r\n  zoomOut,\r\n}: UseViewerGesturesOptions): UseViewerGesturesResult => {\r\n  const [popup, setPopup] = useState<HTMLElement | null>(null);\r\n  const [panning, setPanning] = useState(false);\r\n\r\n  const imageNodeRef = useRef<HTMLImageElement | null>(null);\r\n  const dragRef = useRef<DragState | null>(null);\r\n  const movedRef = useRef(false);\r\n  const pendingCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  const isCleanRef = useRef(isClean);\r\n  isCleanRef.current = isClean;\r\n\r\n  const cancelPendingClose = useCallback(() => {\r\n    if (pendingCloseRef.current === null) return;\r\n    clearTimeout(pendingCloseRef.current);\r\n    pendingCloseRef.current = null;\r\n  }, []);\r\n\r\n  useEffect(() => cancelPendingClose, [cancelPendingClose]);\r\n\r\n  const imageRef = useCallback((node: HTMLImageElement | null) => {\r\n    imageNodeRef.current = node;\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (!popup) return;\r\n    const listener = (event: globalThis.WheelEvent) => handleWheel(event);\r\n    popup.addEventListener('wheel', listener, { passive: false });\r\n    return () => popup.removeEventListener('wheel', listener);\r\n  }, [handleWheel, popup]);\r\n\r\n  useEffect(() => {\r\n    const listener = (event: KeyboardEvent) => {\r\n      if (event.altKey || event.ctrlKey || event.metaKey || event.defaultPrevented) return;\r\n      if (isTypingTarget(event.target)) return;\r\n      switch (event.key) {\r\n        case '+':\r\n        case '=': {\r\n          zoomIn();\r\n          break;\r\n        }\r\n        case '-': {\r\n          zoomOut();\r\n          break;\r\n        }\r\n        case '0': {\r\n          reset();\r\n          break;\r\n        }\r\n        default: {\r\n          return;\r\n        }\r\n      }\r\n      event.preventDefault();\r\n    };\r\n    document.addEventListener('keydown', listener);\r\n    return () => document.removeEventListener('keydown', listener);\r\n  }, [reset, zoomIn, zoomOut]);\r\n\r\n  const onPointerDown = useCallback(\r\n    (event: PointerEvent<HTMLElement>) => {\r\n      if (dragRef.current?.panning) return;\r\n      if (event.button !== 0) return;\r\n      cancelPendingClose();\r\n      const start = { x: event.clientX, y: event.clientY };\r\n      const panEligible = isZoomed && event.target === imageNodeRef.current;\r\n      movedRef.current = false;\r\n      dragRef.current = { id: event.pointerId, last: start, panning: panEligible, start };\r\n      if (!panEligible) return;\r\n      capturePointer(event.target as Element, event.pointerId);\r\n      setPanning(true);\r\n    },\r\n    [cancelPendingClose, isZoomed],\r\n  );\r\n\r\n  const onPointerMove = useCallback(\r\n    (event: PointerEvent<HTMLElement>) => {\r\n      const drag = dragRef.current;\r\n      if (!drag || drag.id !== event.pointerId) return;\r\n      const point = { x: event.clientX, y: event.clientY };\r\n      if (Math.hypot(point.x - drag.start.x, point.y - drag.start.y) > DRAG_THRESHOLD) {\r\n        movedRef.current = true;\r\n      }\r\n      if (drag.panning) dragBy({ x: point.x - drag.last.x, y: point.y - drag.last.y });\r\n      drag.last = point;\r\n    },\r\n    [dragBy],\r\n  );\r\n\r\n  const onPointerFinish = useCallback(\r\n    (event: PointerEvent<HTMLElement>) => {\r\n      const drag = dragRef.current;\r\n      if (!drag || drag.id !== event.pointerId) return;\r\n      dragRef.current = null;\r\n      if (!drag.panning) return;\r\n      setPanning(false);\r\n      dragEnd();\r\n    },\r\n    [dragEnd],\r\n  );\r\n\r\n  const onSurfaceClick = useCallback(() => {\r\n    if (movedRef.current) return;\r\n    cancelPendingClose();\r\n    onClose();\r\n  }, [cancelPendingClose, onClose]);\r\n\r\n  const onImageClick = useCallback(\r\n    (event: MouseEvent<HTMLElement>) => {\r\n      event.stopPropagation();\r\n      cancelPendingClose();\r\n      // Gated on cleanliness rather than zoom: an image that *opened* zoomed\r\n      // (defaultZoom actual/auto) has been touched by nobody, so a plain click\r\n      // should still dismiss it, exactly as Esc does.\r\n      if (movedRef.current || !isCleanRef.current) return;\r\n      pendingCloseRef.current = setTimeout(() => {\r\n        pendingCloseRef.current = null;\r\n        if (!isCleanRef.current) return;\r\n        onClose();\r\n      }, DOUBLE_CLICK_WINDOW);\r\n    },\r\n    [cancelPendingClose, onClose],\r\n  );\r\n\r\n  const onImageDoubleClick = useCallback(\r\n    (event: MouseEvent<HTMLElement>) => {\r\n      event.stopPropagation();\r\n      cancelPendingClose();\r\n      handleDoubleClick({ x: event.clientX, y: event.clientY });\r\n    },\r\n    [cancelPendingClose, handleDoubleClick],\r\n  );\r\n\r\n  return {\r\n    cancelPendingClose,\r\n    cursor: isZoomed ? (panning ? 'grabbing' : 'grab') : 'zoom-out',\r\n    imageRef,\r\n    onImageClick,\r\n    onImageDoubleClick,\r\n    onPointerDown,\r\n    onPointerFinish,\r\n    onPointerMove,\r\n    onSurfaceClick,\r\n    popupRef: setPopup,\r\n  };\r\n};\r\n"],"mappings":"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"}