@lobehub/ui 5.24.0 → 5.26.0

package/es/Image/viewer/useFlipTransition.mjs

@@ -0,0 +1,321 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { animate, motionValue } from "motion/react";
+//#region src/Image/viewer/useFlipTransition.ts
+const OPEN_SPRING = {
+	bounce: .15,
+	type: "spring",
+	visualDuration: .3
+};
+const PUSH_SPRING = {
+	bounce: 0,
+	type: "spring",
+	visualDuration: .3
+};
+const FADE = {
+	duration: .15,
+	ease: "easeOut"
+};
+const CHROME_FADE = {
+	delay: .15,
+	duration: .2,
+	ease: "easeOut"
+};
+const FADE_SCALE = .92;
+const SWITCH_FADE_SCALE = .96;
+const SETTLE_FALLBACK_MS = 1e3;
+const measureSource = (element) => {
+	if (!element.isConnected) return null;
+	const rect = element.getBoundingClientRect();
+	if (rect.width <= 0 || rect.height <= 0) return null;
+	if (rect.bottom <= 0 || rect.right <= 0) return null;
+	if (rect.top >= window.innerHeight || rect.left >= window.innerWidth) return null;
+	return rect;
+};
+const sourceTransform = (rect, fit) => ({
+	scale: fit.width > 0 && fit.height > 0 ? Math.max(rect.width / fit.width, rect.height / fit.height) : 1,
+	x: rect.left + rect.width / 2 - (fit.x + fit.width / 2),
+	y: rect.top + rect.height / 2 - (fit.y + fit.height / 2)
+});
+const readTransform = (transform) => [
+	`translate3d(${transform.x.get()}px, ${transform.y.get()}px, 0)`,
+	`scale(${transform.scale.get()})`,
+	`rotate(${transform.rotate.get()}deg)`,
+	`scaleX(${transform.flipX.get() ? -1 : 1})`,
+	`scaleY(${transform.flipY.get() ? -1 : 1})`
+].join(" ");
+const useBoundNode = (apply) => {
+	const nodeRef = useRef(null);
+	const applyRef = useRef(apply);
+	applyRef.current = apply;
+	const setNode = useCallback((node) => {
+		nodeRef.current = node;
+		if (node) applyRef.current(node);
+	}, []);
+	const refresh = useCallback(() => {
+		const node = nodeRef.current;
+		if (node) applyRef.current(node);
+	}, []);
+	const getNode = useCallback(() => nodeRef.current, []);
+	return useMemo(() => ({
+		getNode,
+		refresh,
+		setNode
+	}), [
+		getNode,
+		refresh,
+		setNode
+	]);
+};
+const useFlipTransition = ({ animated, getCloseSource, getFitRect, getViewportWidth, onClosed, source, transform }) => {
+	const [opacity] = useState(() => ({
+		backdrop: motionValue(0),
+		chrome: motionValue(0),
+		image: motionValue(animated ? 1 : 0)
+	}));
+	const image = useBoundNode(useCallback((node) => {
+		node.style.transform = readTransform(transform);
+		node.style.opacity = String(opacity.image.get());
+	}, [opacity, transform]));
+	const backdrop = useBoundNode(useCallback((node) => {
+		node.style.opacity = String(opacity.backdrop.get());
+	}, [opacity]));
+	const chrome = useBoundNode(useCallback((node) => {
+		node.style.opacity = String(opacity.chrome.get());
+	}, [opacity]));
+	const runningRef = useRef([]);
+	const closingRef = useRef(false);
+	const transitioningRef = useRef(true);
+	const onClosedRef = useRef(onClosed);
+	onClosedRef.current = onClosed;
+	const getFitRectRef = useRef(getFitRect);
+	getFitRectRef.current = getFitRect;
+	const getCloseSourceRef = useRef(getCloseSource);
+	getCloseSourceRef.current = getCloseSource;
+	const getViewportWidthRef = useRef(getViewportWidth);
+	getViewportWidthRef.current = getViewportWidth;
+	const ghostRef = useRef(null);
+	const removeGhost = useCallback(() => {
+		ghostRef.current?.remove();
+		ghostRef.current = null;
+	}, []);
+	const run = useCallback((animations) => {
+		runningRef.current = [...runningRef.current, ...animations];
+	}, []);
+	const stopAll = useCallback(() => {
+		for (const animation of runningRef.current) animation.stop();
+		runningRef.current = [];
+	}, []);
+	const isTransitioning = useCallback(() => transitioningRef.current, []);
+	const isClosing = useCallback(() => closingRef.current, []);
+	const trackTimeout = useCallback((callback, ms) => {
+		const id = window.setTimeout(callback, ms);
+		run([{ stop: () => window.clearTimeout(id) }]);
+	}, [run]);
+	const animateSettling = useCallback((axes, onSettled) => {
+		let pending = axes.length;
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			onSettled();
+		};
+		const onAxisComplete = () => {
+			pending -= 1;
+			if (pending === 0) finish();
+		};
+		run(axes.map(([value, target]) => animate(value, target, {
+			...OPEN_SPRING,
+			onComplete: onAxisComplete
+		})));
+		trackTimeout(finish, SETTLE_FALLBACK_MS);
+	}, [run, trackTimeout]);
+	useLayoutEffect(() => {
+		const unsubscribes = [
+			...[
+				transform.flipX,
+				transform.flipY,
+				transform.rotate,
+				transform.scale,
+				transform.x,
+				transform.y,
+				opacity.image
+			].map((value) => value.on("change", image.refresh)),
+			opacity.backdrop.on("change", backdrop.refresh),
+			opacity.chrome.on("change", chrome.refresh)
+		];
+		return () => {
+			for (const unsubscribe of unsubscribes) unsubscribe();
+		};
+	}, [
+		backdrop,
+		chrome,
+		image,
+		opacity,
+		transform
+	]);
+	useLayoutEffect(() => {
+		const rect = animated ? measureSource(source) : null;
+		transitioningRef.current = true;
+		const markSettled = () => {
+			transitioningRef.current = false;
+		};
+		if (rect) {
+			const start = sourceTransform(rect, getFitRectRef.current());
+			transform.scale.set(start.scale);
+			transform.x.set(start.x);
+			transform.y.set(start.y);
+			opacity.image.set(1);
+			animateSettling([
+				[transform.scale, 1],
+				[transform.x, 0],
+				[transform.y, 0]
+			], markSettled);
+		} else {
+			opacity.image.set(0);
+			if (animated) transform.scale.set(FADE_SCALE);
+			run([animate(opacity.image, 1, {
+				...FADE,
+				onComplete: markSettled
+			})]);
+			if (animated) run([animate(transform.scale, 1, FADE)]);
+			trackTimeout(markSettled, SETTLE_FALLBACK_MS);
+		}
+		run([animate(opacity.backdrop, 1, FADE), animate(opacity.chrome, 1, CHROME_FADE)]);
+		return () => {
+			stopAll();
+			removeGhost();
+		};
+	}, [
+		animateSettling,
+		animated,
+		opacity,
+		removeGhost,
+		run,
+		source,
+		stopAll,
+		trackTimeout,
+		transform
+	]);
+	const close = useCallback((options) => {
+		if (closingRef.current) return;
+		closingRef.current = true;
+		transitioningRef.current = true;
+		stopAll();
+		removeGhost();
+		let finished = false;
+		const finish = () => {
+			if (finished) return;
+			finished = true;
+			transitioningRef.current = false;
+			onClosedRef.current();
+		};
+		const rect = animated && !options?.fade ? measureSource(getCloseSourceRef.current()) : null;
+		run([animate(opacity.backdrop, 0, FADE), animate(opacity.chrome, 0, FADE)]);
+		if (rect) {
+			const target = sourceTransform(rect, getFitRectRef.current());
+			animateSettling([
+				[transform.x, target.x],
+				[transform.y, target.y],
+				[transform.scale, target.scale]
+			], finish);
+			return;
+		}
+		if (animated) run([animate(transform.scale, transform.scale.get() * FADE_SCALE, FADE)]);
+		run([animate(opacity.image, 0, {
+			...FADE,
+			onComplete: finish
+		})]);
+		trackTimeout(finish, SETTLE_FALLBACK_MS);
+	}, [
+		animateSettling,
+		animated,
+		opacity,
+		run,
+		stopAll,
+		trackTimeout,
+		transform
+	]);
+	const switchTo = useCallback((apply, direction) => {
+		if (closingRef.current) return;
+		stopAll();
+		removeGhost();
+		transitioningRef.current = true;
+		const markSettled = () => {
+			transitioningRef.current = false;
+		};
+		const node = image.getNode();
+		const width = getViewportWidthRef.current();
+		if (animated && direction && node && width > 0) {
+			const ghost = node.cloneNode();
+			ghost.dataset.ghost = "true";
+			ghost.setAttribute("aria-hidden", "true");
+			ghost.style.pointerEvents = "none";
+			const base = ghost.style.transform;
+			node.parentElement?.insertBefore(ghost, node);
+			ghostRef.current = ghost;
+			const progress = motionValue(0);
+			const unsubscribe = progress.on("change", (p) => {
+				ghost.style.transform = `translateX(${-direction * width * p}px) ${base}`;
+			});
+			const finishGhost = () => {
+				unsubscribe();
+				if (ghostRef.current === ghost) removeGhost();
+				else ghost.remove();
+			};
+			apply();
+			transform.x.jump(direction * width);
+			run([
+				animate(progress, 1, {
+					...PUSH_SPRING,
+					onComplete: finishGhost
+				}),
+				animate(transform.x, 0, {
+					...PUSH_SPRING,
+					onComplete: markSettled
+				}),
+				{ stop: finishGhost }
+			]);
+			trackTimeout(() => {
+				finishGhost();
+				markSettled();
+			}, SETTLE_FALLBACK_MS);
+			return;
+		}
+		const tasks = [];
+		if (animated) tasks.push(animate(transform.scale, SWITCH_FADE_SCALE, FADE));
+		tasks.push(animate(opacity.image, 0, {
+			...FADE,
+			onComplete: () => {
+				apply();
+				run([animate(opacity.image, 1, {
+					...FADE,
+					onComplete: markSettled
+				})]);
+			}
+		}));
+		run(tasks);
+		trackTimeout(markSettled, SETTLE_FALLBACK_MS);
+	}, [
+		animated,
+		image,
+		opacity,
+		removeGhost,
+		run,
+		stopAll,
+		trackTimeout,
+		transform
+	]);
+	return {
+		backdropRef: backdrop.setNode,
+		chromeRef: chrome.setNode,
+		close,
+		imageRef: image.setNode,
+		isClosing,
+		isTransitioning,
+		switchTo
+	};
+};
+//#endregion
+export { OPEN_SPRING, useFlipTransition };
+
+//# sourceMappingURL=useFlipTransition.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFlipTransition.mjs","names":[],"sources":["../../../src/Image/viewer/useFlipTransition.ts"],"sourcesContent":["import type { MotionValue } from 'motion/react';\nimport { animate, motionValue } from 'motion/react';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { Rect } from './geometry';\n\nexport const OPEN_SPRING = { bounce: 0.15, type: 'spring' as const, visualDuration: 0.3 };\n// bounce: 0 — a full-viewport push with overshoot would visibly slide past\n// the resting position and snap back.\nconst PUSH_SPRING = { bounce: 0, type: 'spring' as const, visualDuration: 0.3 };\nconst FADE = { duration: 0.15, ease: 'easeOut' as const };\nconst CHROME_FADE = { delay: 0.15, duration: 0.2, ease: 'easeOut' as const };\nconst FADE_SCALE = 0.92;\nconst SWITCH_FADE_SCALE = 0.96;\nconst SETTLE_FALLBACK_MS = 1000;\n\ninterface Animation {\n  stop: () => void;\n}\n\nexport interface FlipTransformValues {\n  flipX: MotionValue<boolean>;\n  flipY: MotionValue<boolean>;\n  rotate: MotionValue<number>;\n  scale: MotionValue<number>;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n}\n\nexport interface UseFlipTransitionOptions {\n  animated: boolean;\n  getCloseSource: () => HTMLImageElement;\n  getFitRect: () => Rect;\n  getViewportWidth: () => number;\n  onClosed: () => void;\n  source: HTMLImageElement;\n  transform: FlipTransformValues;\n}\n\nexport interface CloseTransitionOptions {\n  fade?: boolean;\n}\n\nexport interface UseFlipTransitionResult {\n  backdropRef: (node: HTMLElement | null) => void;\n  chromeRef: (node: HTMLElement | null) => void;\n  close: (options?: CloseTransitionOptions) => void;\n  imageRef: (node: HTMLImageElement | null) => void;\n  isClosing: () => boolean;\n  isTransitioning: () => boolean;\n  switchTo: (apply: () => void, direction?: 1 | -1) => void;\n}\n\nconst measureSource = (element: HTMLImageElement): DOMRect | null => {\n  if (!element.isConnected) return null;\n  const rect = element.getBoundingClientRect();\n  if (rect.width <= 0 || rect.height <= 0) return null;\n  if (rect.bottom <= 0 || rect.right <= 0) return null;\n  if (rect.top >= window.innerHeight || rect.left >= window.innerWidth) return null;\n  return rect;\n};\n\nconst sourceTransform = (rect: DOMRect, fit: Rect) => ({\n  scale:\n    fit.width > 0 && fit.height > 0\n      ? Math.max(rect.width / fit.width, rect.height / fit.height)\n      : 1,\n  x: rect.left + rect.width / 2 - (fit.x + fit.width / 2),\n  y: rect.top + rect.height / 2 - (fit.y + fit.height / 2),\n});\n\nconst readTransform = (transform: FlipTransformValues) =>\n  [\n    `translate3d(${transform.x.get()}px, ${transform.y.get()}px, 0)`,\n    `scale(${transform.scale.get()})`,\n    `rotate(${transform.rotate.get()}deg)`,\n    `scaleX(${transform.flipX.get() ? -1 : 1})`,\n    `scaleY(${transform.flipY.get() ? -1 : 1})`,\n  ].join(' ');\n\nconst useBoundNode = <T extends HTMLElement>(apply: (node: T) => void) => {\n  const nodeRef = useRef<T | null>(null);\n  const applyRef = useRef(apply);\n  applyRef.current = apply;\n\n  const setNode = useCallback((node: T | null) => {\n    nodeRef.current = node;\n    if (node) applyRef.current(node);\n  }, []);\n\n  const refresh = useCallback(() => {\n    const node = nodeRef.current;\n    if (node) applyRef.current(node);\n  }, []);\n\n  const getNode = useCallback(() => nodeRef.current, []);\n\n  return useMemo(() => ({ getNode, refresh, setNode }), [getNode, refresh, setNode]);\n};\n\nexport const useFlipTransition = ({\n  animated,\n  getCloseSource,\n  getFitRect,\n  getViewportWidth,\n  onClosed,\n  source,\n  transform,\n}: UseFlipTransitionOptions): UseFlipTransitionResult => {\n  const [opacity] = useState(() => ({\n    backdrop: motionValue(0),\n    chrome: motionValue(0),\n    image: motionValue(animated ? 1 : 0),\n  }));\n\n  const image = useBoundNode<HTMLImageElement>(\n    useCallback(\n      (node) => {\n        node.style.transform = readTransform(transform);\n        node.style.opacity = String(opacity.image.get());\n      },\n      [opacity, transform],\n    ),\n  );\n\n  const backdrop = useBoundNode<HTMLElement>(\n    useCallback(\n      (node) => {\n        node.style.opacity = String(opacity.backdrop.get());\n      },\n      [opacity],\n    ),\n  );\n\n  const chrome = useBoundNode<HTMLElement>(\n    useCallback(\n      (node) => {\n        node.style.opacity = String(opacity.chrome.get());\n      },\n      [opacity],\n    ),\n  );\n\n  const runningRef = useRef<Animation[]>([]);\n  const closingRef = useRef(false);\n  const transitioningRef = useRef(true);\n\n  const onClosedRef = useRef(onClosed);\n  onClosedRef.current = onClosed;\n\n  const getFitRectRef = useRef(getFitRect);\n  getFitRectRef.current = getFitRect;\n\n  const getCloseSourceRef = useRef(getCloseSource);\n  getCloseSourceRef.current = getCloseSource;\n\n  const getViewportWidthRef = useRef(getViewportWidth);\n  getViewportWidthRef.current = getViewportWidth;\n\n  const ghostRef = useRef<HTMLImageElement | null>(null);\n  const removeGhost = useCallback(() => {\n    ghostRef.current?.remove();\n    ghostRef.current = null;\n  }, []);\n\n  const run = useCallback((animations: Animation[]) => {\n    runningRef.current = [...runningRef.current, ...animations];\n  }, []);\n\n  const stopAll = useCallback(() => {\n    for (const animation of runningRef.current) animation.stop();\n    runningRef.current = [];\n  }, []);\n\n  const isTransitioning = useCallback(() => transitioningRef.current, []);\n  const isClosing = useCallback(() => closingRef.current, []);\n\n  // stopAll() only stops tracked Animation objects; a bare window.setTimeout\n  // has no way to be cancelled by it. Track a fallback timer the same way, so\n  // a later stopAll() (a new open/close/switch superseding an interrupted one)\n  // clears the old timer along with the animations it was backing — otherwise\n  // it can fire mid-way through the new phase and flip transitioningRef false\n  // while something else is legitimately still in flight.\n  const trackTimeout = useCallback(\n    (callback: () => void, ms: number) => {\n      const id = window.setTimeout(callback, ms);\n      run([{ stop: () => window.clearTimeout(id) }]);\n    },\n    [run],\n  );\n\n  // A future animate() call on one of these shared motion values (e.g. a refit\n  // triggered by a natural-size change) silently cancels whichever animation is\n  // already running on it — motion's animate() stops the prior one without ever\n  // firing its onComplete. Track completion by count for the common case, but\n  // always back it with a fallback timer so onSettled fires exactly once no\n  // matter what: a cancelled axis can never leave this permanently unfired.\n  const animateSettling = useCallback(\n    (axes: [MotionValue<number>, number][], onSettled: () => void) => {\n      let pending = axes.length;\n      let settled = false;\n      const finish = () => {\n        if (settled) return;\n        settled = true;\n        onSettled();\n      };\n      const onAxisComplete = () => {\n        pending -= 1;\n        if (pending === 0) finish();\n      };\n      run(\n        axes.map(([value, target]) =>\n          animate(value, target, { ...OPEN_SPRING, onComplete: onAxisComplete }),\n        ),\n      );\n      trackTimeout(finish, SETTLE_FALLBACK_MS);\n    },\n    [run, trackTimeout],\n  );\n\n  useLayoutEffect(() => {\n    const unsubscribes = [\n      ...[\n        transform.flipX,\n        transform.flipY,\n        transform.rotate,\n        transform.scale,\n        transform.x,\n        transform.y,\n        opacity.image,\n      ].map((value) => value.on('change', image.refresh)),\n      opacity.backdrop.on('change', backdrop.refresh),\n      opacity.chrome.on('change', chrome.refresh),\n    ];\n\n    return () => {\n      for (const unsubscribe of unsubscribes) unsubscribe();\n    };\n  }, [backdrop, chrome, image, opacity, transform]);\n\n  useLayoutEffect(() => {\n    const rect = animated ? measureSource(source) : null;\n    transitioningRef.current = true;\n    const markSettled = () => {\n      transitioningRef.current = false;\n    };\n\n    if (rect) {\n      const start = sourceTransform(rect, getFitRectRef.current());\n      transform.scale.set(start.scale);\n      transform.x.set(start.x);\n      transform.y.set(start.y);\n      opacity.image.set(1);\n      animateSettling(\n        [\n          [transform.scale, 1],\n          [transform.x, 0],\n          [transform.y, 0],\n        ],\n        markSettled,\n      );\n    } else {\n      opacity.image.set(0);\n      if (animated) transform.scale.set(FADE_SCALE);\n      run([animate(opacity.image, 1, { ...FADE, onComplete: markSettled })]);\n      if (animated) run([animate(transform.scale, 1, FADE)]);\n      trackTimeout(markSettled, SETTLE_FALLBACK_MS);\n    }\n\n    run([animate(opacity.backdrop, 1, FADE), animate(opacity.chrome, 1, CHROME_FADE)]);\n\n    return () => {\n      stopAll();\n      removeGhost();\n    };\n  }, [\n    animateSettling,\n    animated,\n    opacity,\n    removeGhost,\n    run,\n    source,\n    stopAll,\n    trackTimeout,\n    transform,\n  ]);\n\n  const close = useCallback(\n    (options?: CloseTransitionOptions) => {\n      if (closingRef.current) return;\n      closingRef.current = true;\n      transitioningRef.current = true;\n      stopAll();\n      removeGhost();\n\n      let finished = false;\n      const finish = () => {\n        if (finished) return;\n        finished = true;\n        transitioningRef.current = false;\n        onClosedRef.current();\n      };\n      const rect = animated && !options?.fade ? measureSource(getCloseSourceRef.current()) : null;\n\n      run([animate(opacity.backdrop, 0, FADE), animate(opacity.chrome, 0, FADE)]);\n\n      if (rect) {\n        const target = sourceTransform(rect, getFitRectRef.current());\n        animateSettling(\n          [\n            [transform.x, target.x],\n            [transform.y, target.y],\n            [transform.scale, target.scale],\n          ],\n          finish,\n        );\n        return;\n      }\n\n      if (animated) run([animate(transform.scale, transform.scale.get() * FADE_SCALE, FADE)]);\n      run([animate(opacity.image, 0, { ...FADE, onComplete: finish })]);\n      trackTimeout(finish, SETTLE_FALLBACK_MS);\n    },\n    [animateSettling, animated, opacity, run, stopAll, trackTimeout, transform],\n  );\n\n  const switchTo = useCallback(\n    (apply: () => void, direction?: 1 | -1) => {\n      if (closingRef.current) return;\n      stopAll();\n      removeGhost();\n      transitioningRef.current = true;\n\n      const markSettled = () => {\n        transitioningRef.current = false;\n      };\n\n      const node = image.getNode();\n      const width = getViewportWidthRef.current();\n\n      if (animated && direction && node && width > 0) {\n        // The clone snapshots the outgoing visual state wholesale — src,\n        // fitRect positioning and the current zoom/rotate/flip transform —\n        // so the live <img> stays the single element every other system\n        // (gestures, FLIP close, refit) keeps operating on.\n        const ghost = node.cloneNode() as HTMLImageElement;\n        ghost.dataset.ghost = 'true';\n        ghost.setAttribute('aria-hidden', 'true');\n        ghost.style.pointerEvents = 'none';\n        const base = ghost.style.transform;\n        node.parentElement?.insertBefore(ghost, node);\n        ghostRef.current = ghost;\n\n        const progress = motionValue(0);\n        const unsubscribe = progress.on('change', (p) => {\n          ghost.style.transform = `translateX(${-direction * width * p}px) ${base}`;\n        });\n        const finishGhost = () => {\n          unsubscribe();\n          if (ghostRef.current === ghost) removeGhost();\n          else ghost.remove();\n        };\n\n        apply();\n        transform.x.jump(direction * width);\n\n        run([\n          animate(progress, 1, { ...PUSH_SPRING, onComplete: finishGhost }),\n          animate(transform.x, 0, { ...PUSH_SPRING, onComplete: markSettled }),\n          { stop: finishGhost },\n        ]);\n        trackTimeout(() => {\n          finishGhost();\n          markSettled();\n        }, SETTLE_FALLBACK_MS);\n        return;\n      }\n\n      const tasks: Animation[] = [];\n      if (animated) tasks.push(animate(transform.scale, SWITCH_FADE_SCALE, FADE));\n      tasks.push(\n        animate(opacity.image, 0, {\n          ...FADE,\n          onComplete: () => {\n            apply();\n            run([animate(opacity.image, 1, { ...FADE, onComplete: markSettled })]);\n          },\n        }),\n      );\n      run(tasks);\n      trackTimeout(markSettled, SETTLE_FALLBACK_MS);\n    },\n    [animated, image, opacity, removeGhost, run, stopAll, trackTimeout, transform],\n  );\n\n  return {\n    backdropRef: backdrop.setNode,\n    chromeRef: chrome.setNode,\n    close,\n    imageRef: image.setNode,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  };\n};\n"],"mappings":"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"}

package/es/Image/viewer/useGalleryNav.mjs

@@ -0,0 +1,89 @@
+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, 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);
+			const nextNatural = readNatural(nextEntry.element);
+			setNatural(nextNatural);
+			syncZoomNatural(nextNatural);
+			scale.jump(1);
+			x.jump(0);
+			y.jump(0);
+			rotate.jump(0);
+			flipX.jump(false);
+			flipY.jump(false);
+			switchingRef.current = false;
+		}, nextIndex > indexRef.current ? 1 : -1);
+	}, [
+		entries,
+		flipX,
+		flipY,
+		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';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport type { Size } from './geometry';\nimport type { PreviewEntry } from './registry';\nimport { isTypingTarget } from './useViewerGestures';\n\nexport const readNatural = (element: HTMLImageElement): Size => {\n  if (element.naturalWidth > 0 && element.naturalHeight > 0)\n    return { height: element.naturalHeight, width: element.naturalWidth };\n  const rect = element.getBoundingClientRect();\n  return { height: Math.max(rect.height, 1), width: Math.max(rect.width, 1) };\n};\n\nexport interface UseGalleryNavOptions {\n  cancelPendingClose: () => void;\n  currentIndex: number;\n  entries: PreviewEntry[];\n  flipX: MotionValue<boolean>;\n  flipY: MotionValue<boolean>;\n  resetCloseTracking: () => void;\n  rotate: MotionValue<number>;\n  scale: MotionValue<number>;\n  setCurrentIndex: (index: number) => void;\n  setNatural: (natural: Size) => void;\n  setSource: (src: string) => void;\n  switchTo: (apply: () => void, direction?: 1 | -1) => void;\n  syncZoomNatural: (natural: Size) => void;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n}\n\nexport interface UseGalleryNavResult {\n  hasNext: boolean;\n  hasPrev: boolean;\n  next: () => void;\n  prev: () => void;\n}\n\nexport const useGalleryNav = ({\n  cancelPendingClose,\n  currentIndex,\n  entries,\n  flipX,\n  flipY,\n  resetCloseTracking,\n  rotate,\n  scale,\n  setCurrentIndex,\n  setNatural,\n  setSource,\n  switchTo,\n  syncZoomNatural,\n  x,\n  y,\n}: UseGalleryNavOptions): UseGalleryNavResult => {\n  const indexRef = useRef(currentIndex);\n  indexRef.current = currentIndex;\n\n  const switchingRef = useRef(false);\n\n  const switchToRef = useRef(switchTo);\n  switchToRef.current = switchTo;\n\n  const cancelPendingCloseRef = useRef(cancelPendingClose);\n  cancelPendingCloseRef.current = cancelPendingClose;\n\n  const resetCloseTrackingRef = useRef(resetCloseTracking);\n  resetCloseTrackingRef.current = resetCloseTracking;\n\n  const goTo = useCallback(\n    (nextIndex: number) => {\n      if (switchingRef.current) return;\n      if (nextIndex < 0 || nextIndex >= entries.length || nextIndex === indexRef.current) return;\n      switchingRef.current = true;\n      // A switch changes the displayed image out from under any pending\n      // click-to-close or wheel-close accumulation armed for the old image,\n      // so both must clear at this single choke point every switch goes through.\n      cancelPendingCloseRef.current();\n      resetCloseTrackingRef.current();\n      switchToRef.current(\n        () => {\n          const nextEntry = entries[nextIndex];\n          setCurrentIndex(nextIndex);\n          setSource(nextEntry.src);\n          const nextNatural = readNatural(nextEntry.element);\n          setNatural(nextNatural);\n          syncZoomNatural(nextNatural);\n          // .jump(), not .set(): a surviving spring from the outgoing image (a\n          // dragEnd clamp-back, a wheel snap-back, or reset()) targets the OLD\n          // image's bounds and would otherwise silently overwrite this reset on\n          // its next tick, since motion's set() never stops an active animation.\n          scale.jump(1);\n          x.jump(0);\n          y.jump(0);\n          rotate.jump(0);\n          flipX.jump(false);\n          flipY.jump(false);\n          switchingRef.current = false;\n        },\n        nextIndex > indexRef.current ? 1 : -1,\n      );\n    },\n    [\n      entries,\n      flipX,\n      flipY,\n      rotate,\n      scale,\n      setCurrentIndex,\n      setNatural,\n      setSource,\n      syncZoomNatural,\n      x,\n      y,\n    ],\n  );\n\n  const prev = useCallback(() => goTo(indexRef.current - 1), [goTo]);\n  const next = useCallback(() => goTo(indexRef.current + 1), [goTo]);\n\n  const isGallery = entries.length > 1;\n\n  useEffect(() => {\n    if (!isGallery) return;\n    const listener = (event: KeyboardEvent) => {\n      if (event.altKey || event.ctrlKey || event.metaKey || event.defaultPrevented) return;\n      if (isTypingTarget(event.target)) return;\n      if (event.key === 'ArrowLeft') prev();\n      else if (event.key === 'ArrowRight') next();\n      else return;\n      event.preventDefault();\n    };\n    document.addEventListener('keydown', listener);\n    return () => document.removeEventListener('keydown', listener);\n  }, [isGallery, next, prev]);\n\n  return {\n    hasNext: currentIndex < entries.length - 1,\n    hasPrev: currentIndex > 0,\n    next,\n    prev,\n  };\n};\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;AA2BA,MAAa,iBAAiB,EAC5B,oBACA,cACA,SACA,OACA,OACA,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;GACvB,MAAM,cAAc,YAAY,UAAU,OAAO;GACjD,WAAW,WAAW;GACtB,gBAAgB,WAAW;GAK3B,MAAM,KAAK,CAAC;GACZ,EAAE,KAAK,CAAC;GACR,EAAE,KAAK,CAAC;GACR,OAAO,KAAK,CAAC;GACb,MAAM,KAAK,KAAK;GAChB,MAAM,KAAK,KAAK;GAChB,aAAa,UAAU;EACzB,GACA,YAAY,SAAS,UAAU,IAAI,EACrC;CACF,GACA;EACE;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';\nimport { animate } from 'motion/react';\nimport { useLayoutEffect, useRef } from 'react';\n\nimport { computeFit, type Rotation, type Size } from './geometry';\nimport { OPEN_SPRING } from './useFlipTransition';\n\nexport interface UseRefitTransitionOptions {\n  animated: boolean;\n  fillViewport?: boolean;\n  isTransitioning: () => boolean;\n  natural: Size;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  viewport: Size;\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n}\n\nexport const useRefitTransition = ({\n  animated,\n  fillViewport,\n  isTransitioning,\n  natural,\n  rotation,\n  scale,\n  viewport,\n  x,\n  y,\n}: UseRefitTransitionOptions): void => {\n  const naturalRef = useRef(natural);\n\n  useLayoutEffect(() => {\n    const previousNatural = naturalRef.current;\n    naturalRef.current = natural;\n    if (previousNatural.width === natural.width && previousNatural.height === natural.height)\n      return;\n    if (!animated) return;\n    // A FLIP open/close spring or a gallery switch is already animating these\n    // same scale/x/y values. Calling animate() on them here would silently\n    // cancel that in-flight animation (motion's animate() stops the prior one\n    // without firing its onComplete), which can park the viewer mid-transform\n    // on open or, worse, permanently wedge an invisible dialog open on close.\n    // Skip outright: the open spring always targets identity relative to the\n    // *current* fit rect, so it self-corrects once it settles; a switch resets\n    // the transform itself, and instant re-fit is correct there.\n    if (isTransitioning()) return;\n\n    const previousFit = computeFit(previousNatural, viewport, rotation, fillViewport);\n    const nextFit = computeFit(natural, viewport, rotation, fillViewport);\n    if (\n      previousFit.width === nextFit.width &&\n      previousFit.height === nextFit.height &&\n      previousFit.x === nextFit.x &&\n      previousFit.y === nextFit.y\n    )\n      return;\n\n    const ratio = nextFit.width > 0 ? previousFit.width / nextFit.width : 1;\n    if (!Number.isFinite(ratio) || ratio <= 0) return;\n\n    const previousCenterX = previousFit.x + previousFit.width / 2;\n    const previousCenterY = previousFit.y + previousFit.height / 2;\n    const nextCenterX = nextFit.x + nextFit.width / 2;\n    const nextCenterY = nextFit.y + nextFit.height / 2;\n\n    const targetScale = scale.get();\n    const targetX = x.get();\n    const targetY = y.get();\n\n    scale.set(targetScale * ratio);\n    x.set(targetX + (previousCenterX - nextCenterX));\n    y.set(targetY + (previousCenterY - nextCenterY));\n\n    animate(scale, targetScale, OPEN_SPRING);\n    animate(x, targetX, OPEN_SPRING);\n    animate(y, targetY, OPEN_SPRING);\n  }, [animated, fillViewport, isTransitioning, natural, rotation, scale, viewport, x, y]);\n};\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,148 @@
+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 || isZoomed) return;
+		pendingCloseRef.current = setTimeout(() => {
+			pendingCloseRef.current = null;
+			if (!isCleanRef.current) return;
+			onClose();
+		}, DOUBLE_CLICK_WINDOW);
+	}, [
+		cancelPendingClose,
+		isZoomed,
+		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