@jinmi/ui 0.0.0-stage → 6.0.2

package/es/Image/viewer/ImageViewer.mjs

@@ -0,0 +1,283 @@
+"use client";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../../base-ui/zIndex/useLayerZIndex.mjs";
+import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
+import { styles } from "../style.mjs";
+import { computeFit, unrotatedRect } from "./geometry.mjs";
+import { beginClosePreview, endClosePreview } from "./registry.mjs";
+import { useFinalFocus } from "./useFinalFocus.mjs";
+import { useFlipTransition } from "./useFlipTransition.mjs";
+import { useViewerGestures } from "./useViewerGestures.mjs";
+import { readNatural, useGalleryNav } from "./useGalleryNav.mjs";
+import { useRefitTransition } from "./useRefitTransition.mjs";
+import { useZoomPan } from "./useZoomPan.mjs";
+import ViewerChrome from "./ViewerChrome.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs } from "react-merge-refs";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/Image/viewer/ImageViewer.tsx
+const readViewport = () => ({
+	height: window.innerHeight,
+	width: window.innerWidth
+});
+const prefersReducedMotion = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+const ImageViewer = memo(({ entries, index, openerFocusElement, token }) => {
+	const openerEntry = entries[index];
+	const appElement = useAppElement();
+	const [animated] = useState(() => !prefersReducedMotion());
+	const { ref: layerRef, zIndex } = useLayerZIndex("modal");
+	const [currentIndex, setCurrentIndex] = useState(index);
+	const currentEntry = entries[currentIndex];
+	const currentEntryRef = useRef(currentEntry);
+	currentEntryRef.current = currentEntry;
+	const [source, setSource] = useState(openerEntry.src);
+	const [natural, setNatural] = useState(() => readNatural(openerEntry.element));
+	const [viewport, setViewport] = useState(readViewport);
+	const closeRef = useRef(null);
+	const requestClose = useCallback(() => closeRef.current?.(), []);
+	const isClosingIndirectRef = useRef(() => false);
+	const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);
+	const isTransitioningIndirectRef = useRef(() => true);
+	const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);
+	const fillViewport = Boolean(currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src);
+	const { canZoomIn, canZoomOut, dragBy, dragEnd, escIntent, flipHorizontal, flipVertical, flipX, flipY, getInitialScale, handleDoubleClick, handleWheel, isClean, isZoomed, reset, resetCloseTracking, rotate, rotateLeft, rotateRight, rotation, scale, setNatural: syncZoomNatural, setViewport: syncZoomViewport, toggleActualSize, x, y, zoomIn, zoomOut } = useZoomPan({
+		autoZoomThreshold: currentEntry.options.autoZoomThreshold,
+		defaultZoom: currentEntry.options.defaultZoom,
+		fillViewport,
+		isClosing: isClosingIndirect,
+		isTransitioning: isTransitioningIndirect,
+		maxScale: currentEntry.options.maxScale,
+		natural,
+		onCloseRequest: requestClose,
+		viewport
+	});
+	const fitRect = useMemo(() => computeFit(natural, viewport, rotation, fillViewport), [
+		natural,
+		viewport,
+		rotation,
+		fillViewport
+	]);
+	const fitRectRef = useRef(fitRect);
+	fitRectRef.current = fitRect;
+	const getFitRect = useCallback(() => fitRectRef.current, []);
+	const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);
+	const viewportRef = useRef(viewport);
+	viewportRef.current = viewport;
+	const getViewportWidth = useCallback(() => viewportRef.current.width, []);
+	const getCloseSource = useCallback(() => currentEntryRef.current.element, []);
+	const transform = useMemo(() => ({
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	}), [
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const handleClosed = useCallback(() => endClosePreview(token), [token]);
+	const { backdropRef, chromeRef, close, imageRef: flipImageRef, isClosing, isTransitioning, switchTo } = useFlipTransition({
+		animated,
+		getCloseSource,
+		getFitRect,
+		getInitialScale,
+		getViewportWidth,
+		onClosed: handleClosed,
+		source: openerEntry.element,
+		transform
+	});
+	isClosingIndirectRef.current = isClosing;
+	isTransitioningIndirectRef.current = isTransitioning;
+	useRefitTransition({
+		animated,
+		fillViewport,
+		isTransitioning,
+		natural,
+		rotation,
+		scale,
+		viewport,
+		x,
+		y
+	});
+	const finalFocus = useFinalFocus(openerFocusElement);
+	const isCleanRef = useRef(isClean);
+	isCleanRef.current = isClean;
+	const handleClose = useCallback(() => {
+		beginClosePreview(token);
+		close({ fade: !isCleanRef.current });
+	}, [close, token]);
+	closeRef.current = handleClose;
+	const handleDialogOpenChange = useCallback((open, eventDetails) => {
+		if (open) return;
+		if (isClosing()) return;
+		if (eventDetails.reason === "escape-key" && escIntent() === "reset") {
+			eventDetails.cancel();
+			reset();
+			return;
+		}
+		handleClose();
+	}, [
+		escIntent,
+		handleClose,
+		isClosing,
+		reset
+	]);
+	const gestures = useViewerGestures({
+		dragBy,
+		dragEnd,
+		handleDoubleClick,
+		handleWheel,
+		isClean,
+		isZoomed,
+		onClose: handleClose,
+		reset,
+		zoomIn,
+		zoomOut
+	});
+	const { hasNext, hasPrev, next, prev } = useGalleryNav({
+		cancelPendingClose: gestures.cancelPendingClose,
+		currentIndex,
+		entries,
+		flipX,
+		flipY,
+		getInitialScale,
+		resetCloseTracking,
+		rotate,
+		scale,
+		setCurrentIndex,
+		setNatural,
+		setSource,
+		switchTo,
+		syncZoomNatural,
+		x,
+		y
+	});
+	const popupNodeRef = useRef(null);
+	const popupRef = useMergeRefs([
+		layerRef,
+		gestures.popupRef,
+		popupNodeRef
+	]);
+	const imageRef = useMergeRefs([flipImageRef, gestures.imageRef]);
+	const handleLoad = useCallback((event) => {
+		const loaded = event.currentTarget;
+		if (!loaded.naturalWidth || !loaded.naturalHeight) return;
+		const next = {
+			height: loaded.naturalHeight,
+			width: loaded.naturalWidth
+		};
+		setNatural((prev) => prev.width === next.width && prev.height === next.height ? prev : next);
+		syncZoomNatural(next);
+	}, [syncZoomNatural]);
+	useEffect(() => {
+		const handleResize = () => {
+			const next = readViewport();
+			setViewport(next);
+			syncZoomViewport(next);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [syncZoomViewport]);
+	useEffect(() => {
+		const { previewSrc, src } = currentEntry;
+		if (!previewSrc || previewSrc === src) return;
+		let cancelled = false;
+		const loader = new window.Image();
+		const handleLoaded = () => {
+			if (!cancelled) setSource(previewSrc);
+		};
+		loader.addEventListener("load", handleLoaded);
+		loader.src = previewSrc;
+		return () => {
+			cancelled = true;
+			loader.removeEventListener("load", handleLoaded);
+		};
+	}, [currentEntry]);
+	useEffect(() => () => {
+		if (!openerEntry.element.isConnected) endClosePreview(token);
+	}, [openerEntry, token]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		modal: true,
+		open: true,
+		onOpenChange: handleDialogOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container: appElement ?? void 0,
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					forceRender: true,
+					className: styles.viewerBackdrop,
+					ref: backdropRef,
+					style: zIndex === void 0 ? void 0 : { zIndex },
+					onClick: gestures.onSurfaceClick
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Popup, {
+					"aria-label": currentEntry.element.alt || void 0,
+					className: styles.viewerPopup,
+					finalFocus,
+					initialFocus: popupNodeRef,
+					ref: popupRef,
+					style: zIndex === void 0 ? void 0 : { zIndex: zIndex + 1 },
+					tabIndex: -1,
+					onClick: gestures.onSurfaceClick,
+					onPointerCancel: gestures.onPointerFinish,
+					onPointerDown: gestures.onPointerDown,
+					onPointerMove: gestures.onPointerMove,
+					onPointerUp: gestures.onPointerFinish,
+					children: [/* @__PURE__ */ jsx("img", {
+						alt: currentEntry.element.alt,
+						className: styles.viewerImage,
+						ref: imageRef,
+						src: source,
+						style: {
+							cursor: gestures.cursor,
+							height: imageRect.height,
+							left: imageRect.x,
+							top: imageRect.y,
+							width: imageRect.width
+						},
+						onClick: gestures.onImageClick,
+						onDoubleClick: gestures.onImageDoubleClick,
+						onLoad: handleLoad
+					}), /* @__PURE__ */ jsx(ViewerChrome, {
+						canZoomIn,
+						canZoomOut,
+						chromeRef,
+						current: currentIndex,
+						fitRect,
+						flipHorizontal,
+						flipVertical,
+						hasNext,
+						hasPrev,
+						natural,
+						next,
+						prev,
+						rotateLeft,
+						rotateRight,
+						rotation,
+						scale,
+						source,
+						toggleActualSize,
+						toolbarAddon: currentEntry.options.toolbarAddon,
+						total: entries.length,
+						zoomIn,
+						zoomOut,
+						onClose: handleClose,
+						onDownload: currentEntry.options.onDownload
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToastHost, { root: appElement ?? void 0 })
+			]
+		})
+	});
+});
+ImageViewer.displayName = "ImageViewer";
+//#endregion
+export { ImageViewer as default };
+
+//# sourceMappingURL=ImageViewer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\r\nimport {\r\n  memo,\r\n  type SyntheticEvent,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport { useMergeRefs } from 'react-merge-refs';\r\n\r\nimport { ToastHost } from '@/base-ui/Toast';\r\nimport { useLayerZIndex } from '@/base-ui/zIndex';\r\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\r\n\r\nimport { styles } from '../style';\r\nimport { computeFit, type Size, unrotatedRect } from './geometry';\r\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\r\nimport { useFinalFocus } from './useFinalFocus';\r\nimport { useFlipTransition } from './useFlipTransition';\r\nimport { readNatural, useGalleryNav } from './useGalleryNav';\r\nimport { useRefitTransition } from './useRefitTransition';\r\nimport { useViewerGestures } from './useViewerGestures';\r\nimport { useZoomPan } from './useZoomPan';\r\nimport ViewerChrome from './ViewerChrome';\r\n\r\nexport interface ImageViewerProps {\r\n  entries: PreviewEntry[];\r\n  index: number;\r\n  openerFocusElement: HTMLElement | null;\r\n  token: number;\r\n}\r\n\r\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\r\n\r\nconst prefersReducedMotion = () =>\r\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\r\n\r\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\r\n  const openerEntry = entries[index];\r\n  const appElement = useAppElement();\r\n  const [animated] = useState(() => !prefersReducedMotion());\r\n\r\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\r\n\r\n  const [currentIndex, setCurrentIndex] = useState(index);\r\n  const currentEntry = entries[currentIndex];\r\n  const currentEntryRef = useRef(currentEntry);\r\n  currentEntryRef.current = currentEntry;\r\n\r\n  const [source, setSource] = useState(openerEntry.src);\r\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\r\n  const [viewport, setViewport] = useState<Size>(readViewport);\r\n\r\n  const closeRef = useRef<(() => void) | null>(null);\r\n  const requestClose = useCallback(() => closeRef.current?.(), []);\r\n\r\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\r\n  // but that state only exists once useFlipTransition (below) has run — and it\r\n  // needs useZoomPan's own transform values first. Break the cycle with a\r\n  // stable indirection: the ref is repointed at the real isClosing once it's\r\n  // available, written directly during render like the other *Ref fields here.\r\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\r\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\r\n\r\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\r\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\r\n\r\n  const fillViewport = Boolean(\r\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\r\n  );\r\n\r\n  const {\r\n    canZoomIn,\r\n    canZoomOut,\r\n    dragBy,\r\n    dragEnd,\r\n    escIntent,\r\n    flipHorizontal,\r\n    flipVertical,\r\n    flipX,\r\n    flipY,\r\n    getInitialScale,\r\n    handleDoubleClick,\r\n    handleWheel,\r\n    isClean,\r\n    isZoomed,\r\n    reset,\r\n    resetCloseTracking,\r\n    rotate,\r\n    rotateLeft,\r\n    rotateRight,\r\n    rotation,\r\n    scale,\r\n    setNatural: syncZoomNatural,\r\n    setViewport: syncZoomViewport,\r\n    toggleActualSize,\r\n    x,\r\n    y,\r\n    zoomIn,\r\n    zoomOut,\r\n  } = useZoomPan({\r\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\r\n    defaultZoom: currentEntry.options.defaultZoom,\r\n    fillViewport,\r\n    isClosing: isClosingIndirect,\r\n    isTransitioning: isTransitioningIndirect,\r\n    maxScale: currentEntry.options.maxScale,\r\n    natural,\r\n    onCloseRequest: requestClose,\r\n    viewport,\r\n  });\r\n\r\n  const fitRect = useMemo(\r\n    () => computeFit(natural, viewport, rotation, fillViewport),\r\n    [natural, viewport, rotation, fillViewport],\r\n  );\r\n  const fitRectRef = useRef(fitRect);\r\n  fitRectRef.current = fitRect;\r\n  const getFitRect = useCallback(() => fitRectRef.current, []);\r\n\r\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\r\n\r\n  const viewportRef = useRef(viewport);\r\n  viewportRef.current = viewport;\r\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\r\n\r\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\r\n\r\n  const transform = useMemo(\r\n    () => ({ flipX, flipY, rotate, scale, x, y }),\r\n    [flipX, flipY, rotate, scale, x, y],\r\n  );\r\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\r\n\r\n  const {\r\n    backdropRef,\r\n    chromeRef,\r\n    close,\r\n    imageRef: flipImageRef,\r\n    isClosing,\r\n    isTransitioning,\r\n    switchTo,\r\n  } = useFlipTransition({\r\n    animated,\r\n    getCloseSource,\r\n    getFitRect,\r\n    getInitialScale,\r\n    getViewportWidth,\r\n    onClosed: handleClosed,\r\n    source: openerEntry.element,\r\n    transform,\r\n  });\r\n  isClosingIndirectRef.current = isClosing;\r\n  isTransitioningIndirectRef.current = isTransitioning;\r\n\r\n  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  });\r\n  const finalFocus = useFinalFocus(openerFocusElement);\r\n\r\n  const isCleanRef = useRef(isClean);\r\n  isCleanRef.current = isClean;\r\n\r\n  const handleClose = useCallback(() => {\r\n    beginClosePreview(token);\r\n    close({ fade: !isCleanRef.current });\r\n  }, [close, token]);\r\n  closeRef.current = handleClose;\r\n\r\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\r\n    (open, eventDetails) => {\r\n      if (open) return;\r\n      // Base UI fires this on every Esc regardless of whether we're already\r\n      // mid-close (our Dialog.Root's open prop never actually flips to\r\n      // false), so without this guard a second Esc during the close window\r\n      // reads escIntent() off the close spring's mid-flight scale, decides\r\n      // 'reset', and cancels the close animation out from under itself.\r\n      if (isClosing()) return;\r\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\r\n        eventDetails.cancel();\r\n        reset();\r\n        return;\r\n      }\r\n      handleClose();\r\n    },\r\n    [escIntent, handleClose, isClosing, reset],\r\n  );\r\n\r\n  const gestures = useViewerGestures({\r\n    dragBy,\r\n    dragEnd,\r\n    handleDoubleClick,\r\n    handleWheel,\r\n    isClean,\r\n    isZoomed,\r\n    onClose: handleClose,\r\n    reset,\r\n    zoomIn,\r\n    zoomOut,\r\n  });\r\n\r\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\r\n    cancelPendingClose: gestures.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  });\r\n\r\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\r\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\r\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\r\n\r\n  const handleLoad = useCallback(\r\n    (event: SyntheticEvent<HTMLImageElement>) => {\r\n      const loaded = event.currentTarget;\r\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\r\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\r\n      setNatural((prev) =>\r\n        prev.width === next.width && prev.height === next.height ? prev : next,\r\n      );\r\n      syncZoomNatural(next);\r\n    },\r\n    [syncZoomNatural],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const handleResize = () => {\r\n      const next = readViewport();\r\n      setViewport(next);\r\n      syncZoomViewport(next);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, [syncZoomViewport]);\r\n\r\n  useEffect(() => {\r\n    const { previewSrc, src } = currentEntry;\r\n    if (!previewSrc || previewSrc === src) return;\r\n    let cancelled = false;\r\n    const loader = new window.Image();\r\n    const handleLoaded = () => {\r\n      if (!cancelled) setSource(previewSrc);\r\n    };\r\n    loader.addEventListener('load', handleLoaded);\r\n    loader.src = previewSrc;\r\n    return () => {\r\n      cancelled = true;\r\n      loader.removeEventListener('load', handleLoaded);\r\n    };\r\n  }, [currentEntry]);\r\n\r\n  useEffect(\r\n    () => () => {\r\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\r\n      if (thumbnailWasRemoved) endClosePreview(token);\r\n    },\r\n    [openerEntry, token],\r\n  );\r\n\r\n  return (\r\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\r\n      <Dialog.Portal container={appElement ?? undefined}>\r\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\r\n            not an overlay on the surface it opened from — it replaces the screen — so it\r\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\r\n            page straight through the letterbox around the image. */}\r\n        <Dialog.Backdrop\r\n          forceRender\r\n          className={styles.viewerBackdrop}\r\n          ref={backdropRef}\r\n          style={zIndex === undefined ? undefined : { zIndex }}\r\n          onClick={gestures.onSurfaceClick}\r\n        />\r\n        <Dialog.Popup\r\n          aria-label={currentEntry.element.alt || undefined}\r\n          className={styles.viewerPopup}\r\n          finalFocus={finalFocus}\r\n          // Focus the popup itself instead of Base UI's default (the first\r\n          // tabbable — the close button): a focus-visible close button pins\r\n          // the idle auto-hide open forever and pops its tooltip on open.\r\n          initialFocus={popupNodeRef}\r\n          ref={popupRef}\r\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\r\n          tabIndex={-1}\r\n          onClick={gestures.onSurfaceClick}\r\n          onPointerCancel={gestures.onPointerFinish}\r\n          onPointerDown={gestures.onPointerDown}\r\n          onPointerMove={gestures.onPointerMove}\r\n          onPointerUp={gestures.onPointerFinish}\r\n        >\r\n          <img\r\n            alt={currentEntry.element.alt}\r\n            className={styles.viewerImage}\r\n            ref={imageRef}\r\n            src={source}\r\n            style={{\r\n              cursor: gestures.cursor,\r\n              height: imageRect.height,\r\n              left: imageRect.x,\r\n              top: imageRect.y,\r\n              width: imageRect.width,\r\n            }}\r\n            onClick={gestures.onImageClick}\r\n            onDoubleClick={gestures.onImageDoubleClick}\r\n            onLoad={handleLoad}\r\n          />\r\n          <ViewerChrome\r\n            canZoomIn={canZoomIn}\r\n            canZoomOut={canZoomOut}\r\n            chromeRef={chromeRef}\r\n            current={currentIndex}\r\n            fitRect={fitRect}\r\n            flipHorizontal={flipHorizontal}\r\n            flipVertical={flipVertical}\r\n            hasNext={hasNext}\r\n            hasPrev={hasPrev}\r\n            natural={natural}\r\n            next={next}\r\n            prev={prev}\r\n            rotateLeft={rotateLeft}\r\n            rotateRight={rotateRight}\r\n            rotation={rotation}\r\n            scale={scale}\r\n            source={source}\r\n            toggleActualSize={toggleActualSize}\r\n            toolbarAddon={currentEntry.options.toolbarAddon}\r\n            total={entries.length}\r\n            zoomIn={zoomIn}\r\n            zoomOut={zoomOut}\r\n            onClose={handleClose}\r\n            onDownload={currentEntry.options.onDownload}\r\n          />\r\n        </Dialog.Popup>\r\n        <ToastHost root={appElement ?? undefined} />\r\n      </Dialog.Portal>\r\n    </Dialog.Root>\r\n  );\r\n});\r\n\r\nImageViewer.displayName = 'ImageViewer';\r\n\r\nexport default ImageViewer;\r\n"],"mappings":"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"}

package/es/Image/viewer/PreviewOutlet.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { usePreviewSession } from "./registry.mjs";
+import ImageViewer from "./ImageViewer.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/viewer/PreviewOutlet.tsx
+const PreviewOutlet = ({ elementRef }) => {
+	const session = usePreviewSession(elementRef);
+	if (!session) return null;
+	return /* @__PURE__ */ jsx(ImageViewer, {
+		entries: session.entries,
+		index: session.index,
+		openerFocusElement: session.openerFocusElement,
+		token: session.token
+	}, session.token);
+};
+//#endregion
+export { PreviewOutlet as default };
+
+//# sourceMappingURL=PreviewOutlet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewOutlet.mjs","names":[],"sources":["../../../src/Image/viewer/PreviewOutlet.tsx"],"sourcesContent":["'use client';\r\n\r\nimport type { RefObject } from 'react';\r\n\r\nimport ImageViewer from './ImageViewer';\r\nimport { usePreviewSession } from './registry';\r\n\r\nexport interface PreviewOutletProps {\r\n  elementRef: RefObject<HTMLImageElement | null>;\r\n}\r\n\r\nconst PreviewOutlet = ({ elementRef }: PreviewOutletProps) => {\r\n  const session = usePreviewSession(elementRef);\r\n  if (!session) return null;\r\n  return (\r\n    <ImageViewer\r\n      entries={session.entries}\r\n      index={session.index}\r\n      key={session.token}\r\n      openerFocusElement={session.openerFocusElement}\r\n      token={session.token}\r\n    />\r\n  );\r\n};\r\n\r\nexport default PreviewOutlet;\r\n"],"mappings":";;;;;AAWA,MAAM,iBAAiB,EAAE,iBAAqC;CAC5D,MAAM,UAAU,kBAAkB,UAAU;CAC5C,IAAI,CAAC,SAAS,OAAO;CACrB,OACE,oBAAC,aAAD;EACE,SAAS,QAAQ;EACjB,OAAO,QAAQ;EAEf,oBAAoB,QAAQ;EAC5B,OAAO,QAAQ;CAChB,GAHM,QAAQ,KAGd;AAEL"}

package/es/Image/viewer/Toolbar.mjs

@@ -0,0 +1,200 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Center from "../../Flex/Center.mjs";
+import TooltipGroup from "../../base-ui/Tooltip/TooltipGroup.mjs";
+import DropdownMenu from "../../base-ui/DropdownMenu/DropdownMenu.mjs";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { downloadBlob } from "../../utils/downloadBlob.mjs";
+import { toast } from "../../base-ui/Toast/imperative.mjs";
+import { styles } from "../style.mjs";
+import { naturalScale } from "./geometry.mjs";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { getClipboardBlob } from "../../utils/blobToPng.mjs";
+import ActualSizeIcon from "./ActualSizeIcon.mjs";
+import { memo, useCallback, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Copy, Download, Ellipsis, FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
+//#region src/Image/viewer/Toolbar.tsx
+const getFileNameFromUrl = (url) => {
+	try {
+		const match = new URL(url).pathname.match(/\/([^/]+)$/);
+		return match ? decodeURIComponent(match[1]) : "image";
+	} catch {
+		return "image";
+	}
+};
+const getExtensionFromMimeType = (mimeType) => {
+	return {
+		"image/svg+xml": "svg",
+		"image/png": "png",
+		"image/jpeg": "jpg",
+		"image/jpg": "jpg",
+		"image/webp": "webp",
+		"image/gif": "gif"
+	}[mimeType?.toLowerCase()] || mimeType?.split("/")[1]?.split("+")[0] || "png";
+};
+const usePercentage = (scale, matchScale) => {
+	const subscribe = useCallback((onChange) => scale.on("change", onChange), [scale]);
+	const getSnapshot = useCallback(() => Math.round(scale.get() / matchScale * 100), [matchScale, scale]);
+	return useSyncExternalStore(subscribe, getSnapshot);
+};
+const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVertical, natural, onDownload, onMoreOpenChange, rotateLeft, rotateRight, rotation, scale, source, toggleActualSize, toolbarAddon, zoomIn, zoomOut }) => {
+	const { t } = useTranslation(image_default);
+	const [containerEl, setContainerEl] = useState(null);
+	const [copyLoading, setCopyLoading] = useState(false);
+	const [downloadLoading, setDownloadLoading] = useState(false);
+	const matchScale = naturalScale(natural, fitRect, rotation);
+	const percentage = usePercentage(scale, matchScale);
+	const canToggleActualSize = Math.abs(matchScale - 1) > .01;
+	const showFitAffordance = canToggleActualSize && percentage === 100;
+	const defaultDownload = useCallback(async (src) => {
+		try {
+			const blob = await (await fetch(src, { mode: "cors" })).blob();
+			const blobUrl = URL.createObjectURL(blob);
+			let fileName = getFileNameFromUrl(src);
+			const ext = getExtensionFromMimeType(blob.type);
+			if (!fileName.includes(".")) fileName = `${fileName}.${ext}`;
+			else if (fileName.endsWith(".svg+xml")) fileName = fileName.replace(/\.svg\+xml$/i, ".svg");
+			await downloadBlob(blobUrl, fileName);
+			URL.revokeObjectURL(blobUrl);
+			toast.success(t("image.downloadSuccess"));
+		} catch {
+			window.open(src, "_blank", "noopener,noreferrer");
+		}
+	}, [t]);
+	const handleDownload = useCallback(async () => {
+		setDownloadLoading(true);
+		try {
+			await (onDownload ?? defaultDownload)(source);
+		} catch {
+			toast.error(t("image.downloadFailed"));
+		} finally {
+			setDownloadLoading(false);
+		}
+	}, [
+		defaultDownload,
+		onDownload,
+		source,
+		t
+	]);
+	const handleCopy = useCallback(async () => {
+		setCopyLoading(true);
+		try {
+			const blob = await (await fetch(source, { mode: "cors" })).blob();
+			const clipboardBlob = await getClipboardBlob(blob);
+			await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
+			toast.success(t("image.copySuccess"));
+		} catch {
+			toast.error(t("image.copyFailed"));
+		} finally {
+			setCopyLoading(false);
+		}
+	}, [source, t]);
+	const moreItems = useMemo(() => [
+		{
+			icon: FlipHorizontal,
+			key: "flip-horizontal",
+			label: t("image.flipHorizontal"),
+			onClick: flipHorizontal
+		},
+		{
+			icon: FlipVertical,
+			key: "flip-vertical",
+			label: t("image.flipVertical"),
+			onClick: flipVertical
+		},
+		{
+			icon: RotateCcw,
+			key: "rotate-left",
+			label: t("image.rotateLeft"),
+			onClick: rotateLeft
+		},
+		{
+			icon: RotateCw,
+			key: "rotate-right",
+			label: t("image.rotateRight"),
+			onClick: rotateRight
+		},
+		{
+			icon: Copy,
+			key: "copy",
+			label: t("image.copy"),
+			onClick: handleCopy
+		}
+	], [
+		flipHorizontal,
+		flipVertical,
+		handleCopy,
+		rotateLeft,
+		rotateRight,
+		t
+	]);
+	return /* @__PURE__ */ jsx(TooltipGroup, {
+		popupContainer: containerEl ?? void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.toolbar,
+			ref: setContainerEl,
+			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: styles.toolbarRow,
+				gap: 8,
+				children: [
+					/* @__PURE__ */ jsx(ActionIcon, {
+						disabled: !canZoomOut,
+						icon: ZoomOut,
+						style: { borderRadius: 999 },
+						title: t("image.zoomOut"),
+						onClick: zoomOut
+					}),
+					/* @__PURE__ */ jsxs(Center, {
+						horizontal: true,
+						className: styles.toolbarPercentage,
+						children: [percentage, "%"]
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						disabled: !canZoomIn,
+						icon: ZoomIn,
+						style: { borderRadius: 999 },
+						title: t("image.zoomIn"),
+						onClick: zoomIn
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						"data-actual-size": showFitAffordance ? "fit" : "actual",
+						disabled: !canToggleActualSize,
+						icon: ActualSizeIcon,
+						style: { borderRadius: 999 },
+						title: showFitAffordance ? t("image.fitToScreen") : t("image.actualSize"),
+						onClick: toggleActualSize
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						icon: Download,
+						loading: downloadLoading,
+						style: { borderRadius: 999 },
+						title: t("image.download"),
+						onClick: handleDownload
+					}),
+					/* @__PURE__ */ jsx(DropdownMenu, {
+						items: moreItems,
+						placement: "top",
+						portalProps: { container: containerEl ?? void 0 },
+						onOpenChange: (open) => onMoreOpenChange?.(open),
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							icon: Ellipsis,
+							loading: copyLoading,
+							style: { borderRadius: 999 },
+							title: t("image.more")
+						})
+					}),
+					toolbarAddon
+				]
+			})
+		})
+	});
+});
+Toolbar.displayName = "Toolbar";
+//#endregion
+export { Toolbar as default };
+
+//# sourceMappingURL=Toolbar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","names":["imageMessages","Flexbox"],"sources":["../../../src/Image/viewer/Toolbar.tsx"],"sourcesContent":["'use client';\r\n\r\nimport {\r\n  Copy,\r\n  Download,\r\n  Ellipsis,\r\n  FlipHorizontal,\r\n  FlipVertical,\r\n  RotateCcw,\r\n  RotateCw,\r\n  ZoomIn,\r\n  ZoomOut,\r\n} from 'lucide-react';\r\nimport type { MotionValue } from 'motion/react';\r\nimport { memo, type ReactNode, useCallback, useMemo, useState, useSyncExternalStore } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport DropdownMenu, { type DropdownItem } from '@/base-ui/DropdownMenu';\r\nimport { toast } from '@/base-ui/Toast';\r\nimport { Center, Flexbox } from '@/Flex';\r\nimport imageMessages from '@/i18n/resources/en/image';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\nimport { TooltipGroup } from '@/Tooltip';\r\nimport { getClipboardBlob } from '@/utils/blobToPng';\r\nimport { downloadBlob } from '@/utils/downloadBlob';\r\n\r\nimport { styles } from '../style';\r\nimport ActualSizeIcon from './ActualSizeIcon';\r\nimport { naturalScale, type Rect, type Rotation, type Size } from './geometry';\r\n\r\nconst getFileNameFromUrl = (url: string): string => {\r\n  try {\r\n    const pathname = new URL(url).pathname;\r\n    const match = pathname.match(/\\/([^/]+)$/);\r\n    return match ? decodeURIComponent(match[1]) : 'image';\r\n  } catch {\r\n    return 'image';\r\n  }\r\n};\r\n\r\nconst getExtensionFromMimeType = (mimeType: string): string => {\r\n  const map: Record<string, string> = {\r\n    'image/svg+xml': 'svg',\r\n    'image/png': 'png',\r\n    'image/jpeg': 'jpg',\r\n    'image/jpg': 'jpg',\r\n    'image/webp': 'webp',\r\n    'image/gif': 'gif',\r\n  };\r\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\r\n};\r\n\r\nconst usePercentage = (scale: MotionValue<number>, matchScale: number): number => {\r\n  const subscribe = useCallback((onChange: () => void) => scale.on('change', onChange), [scale]);\r\n  const getSnapshot = useCallback(\r\n    () => Math.round((scale.get() / matchScale) * 100),\r\n    [matchScale, scale],\r\n  );\r\n\r\n  return useSyncExternalStore(subscribe, getSnapshot);\r\n};\r\n\r\nexport interface ToolbarProps {\r\n  canZoomIn: boolean;\r\n  canZoomOut: boolean;\r\n  fitRect: Rect;\r\n  flipHorizontal: () => void;\r\n  flipVertical: () => void;\r\n  natural: Size;\r\n  onDownload?: (source: string) => void | Promise<void>;\r\n  onMoreOpenChange?: (open: boolean) => void;\r\n  rotateLeft: () => void;\r\n  rotateRight: () => void;\r\n  rotation: Rotation;\r\n  scale: MotionValue<number>;\r\n  source: string;\r\n  toggleActualSize: () => void;\r\n  toolbarAddon?: ReactNode;\r\n  zoomIn: () => void;\r\n  zoomOut: () => void;\r\n}\r\n\r\nconst Toolbar = memo<ToolbarProps>(\r\n  ({\r\n    canZoomIn,\r\n    canZoomOut,\r\n    fitRect,\r\n    flipHorizontal,\r\n    flipVertical,\r\n    natural,\r\n    onDownload,\r\n    onMoreOpenChange,\r\n    rotateLeft,\r\n    rotateRight,\r\n    rotation,\r\n    scale,\r\n    source,\r\n    toggleActualSize,\r\n    toolbarAddon,\r\n    zoomIn,\r\n    zoomOut,\r\n  }) => {\r\n    const { t } = useTranslation(imageMessages);\r\n    const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\r\n    const [copyLoading, setCopyLoading] = useState(false);\r\n    const [downloadLoading, setDownloadLoading] = useState(false);\r\n\r\n    const matchScale = naturalScale(natural, fitRect, rotation);\r\n    const percentage = usePercentage(scale, matchScale);\r\n    // An image small enough that computeFit never scaled it down is already at\r\n    // 100% when fitted, so the two states the toggle switches between are the\r\n    // same state and the control has nothing to do.\r\n    const canToggleActualSize = Math.abs(matchScale - 1) > 0.01;\r\n    // The control reads as \"go to actual size\" by default, and only flips to\r\n    // the fit affordance when it can actually take you back — an image that\r\n    // fits at 100% is at both states at once and would otherwise offer to\r\n    // \"fit to screen\" while already fitted.\r\n    const showFitAffordance = canToggleActualSize && percentage === 100;\r\n\r\n    const defaultDownload = useCallback(\r\n      async (src: string) => {\r\n        try {\r\n          const response = await fetch(src, { mode: 'cors' });\r\n          const blob = await response.blob();\r\n          const blobUrl = URL.createObjectURL(blob);\r\n          let fileName = getFileNameFromUrl(src);\r\n          const ext = getExtensionFromMimeType(blob.type);\r\n          if (!fileName.includes('.')) {\r\n            fileName = `${fileName}.${ext}`;\r\n          } else if (fileName.endsWith('.svg+xml')) {\r\n            fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\r\n          }\r\n          await downloadBlob(blobUrl, fileName);\r\n          URL.revokeObjectURL(blobUrl);\r\n          toast.success(t('image.downloadSuccess'));\r\n        } catch {\r\n          // A cross-origin source without CORS headers (e.g. a presigned URL reached\r\n          // through a redirect, which sends `Origin: null`) can never be read as a\r\n          // blob; opening it lets the browser handle the save instead of failing.\r\n          window.open(src, '_blank', 'noopener,noreferrer');\r\n        }\r\n      },\r\n      [t],\r\n    );\r\n\r\n    const handleDownload = useCallback(async () => {\r\n      setDownloadLoading(true);\r\n      try {\r\n        await (onDownload ?? defaultDownload)(source);\r\n      } catch {\r\n        toast.error(t('image.downloadFailed'));\r\n      } finally {\r\n        setDownloadLoading(false);\r\n      }\r\n    }, [defaultDownload, onDownload, source, t]);\r\n\r\n    const handleCopy = useCallback(async () => {\r\n      setCopyLoading(true);\r\n      try {\r\n        const response = await fetch(source, { mode: 'cors' });\r\n        const blob = await response.blob();\r\n        const clipboardBlob = await getClipboardBlob(blob);\r\n        await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\r\n        toast.success(t('image.copySuccess'));\r\n      } catch {\r\n        toast.error(t('image.copyFailed'));\r\n      } finally {\r\n        setCopyLoading(false);\r\n      }\r\n    }, [source, t]);\r\n\r\n    const moreItems = useMemo<DropdownItem[]>(\r\n      () => [\r\n        {\r\n          icon: FlipHorizontal,\r\n          key: 'flip-horizontal',\r\n          label: t('image.flipHorizontal'),\r\n          onClick: flipHorizontal,\r\n        },\r\n        {\r\n          icon: FlipVertical,\r\n          key: 'flip-vertical',\r\n          label: t('image.flipVertical'),\r\n          onClick: flipVertical,\r\n        },\r\n        { icon: RotateCcw, key: 'rotate-left', label: t('image.rotateLeft'), onClick: rotateLeft },\r\n        {\r\n          icon: RotateCw,\r\n          key: 'rotate-right',\r\n          label: t('image.rotateRight'),\r\n          onClick: rotateRight,\r\n        },\r\n        { icon: Copy, key: 'copy', label: t('image.copy'), onClick: handleCopy },\r\n      ],\r\n      [flipHorizontal, flipVertical, handleCopy, rotateLeft, rotateRight, t],\r\n    );\r\n\r\n    return (\r\n      <TooltipGroup popupContainer={containerEl ?? undefined}>\r\n        <div className={styles.toolbar} ref={setContainerEl}>\r\n          <Flexbox horizontal align=\"center\" className={styles.toolbarRow} gap={8}>\r\n            <ActionIcon\r\n              disabled={!canZoomOut}\r\n              icon={ZoomOut}\r\n              style={{ borderRadius: 999 }}\r\n              title={t('image.zoomOut')}\r\n              onClick={zoomOut}\r\n            />\r\n            <Center horizontal className={styles.toolbarPercentage}>\r\n              {percentage}%\r\n            </Center>\r\n            <ActionIcon\r\n              disabled={!canZoomIn}\r\n              icon={ZoomIn}\r\n              style={{ borderRadius: 999 }}\r\n              title={t('image.zoomIn')}\r\n              onClick={zoomIn}\r\n            />\r\n            <ActionIcon\r\n              data-actual-size={showFitAffordance ? 'fit' : 'actual'}\r\n              disabled={!canToggleActualSize}\r\n              icon={ActualSizeIcon}\r\n              style={{ borderRadius: 999 }}\r\n              title={showFitAffordance ? t('image.fitToScreen') : t('image.actualSize')}\r\n              onClick={toggleActualSize}\r\n            />\r\n            <ActionIcon\r\n              icon={Download}\r\n              loading={downloadLoading}\r\n              style={{ borderRadius: 999 }}\r\n              title={t('image.download')}\r\n              onClick={handleDownload}\r\n            />\r\n            <DropdownMenu\r\n              items={moreItems}\r\n              placement=\"top\"\r\n              portalProps={{ container: containerEl ?? undefined }}\r\n              onOpenChange={(open) => onMoreOpenChange?.(open)}\r\n            >\r\n              <ActionIcon\r\n                icon={Ellipsis}\r\n                loading={copyLoading}\r\n                style={{ borderRadius: 999 }}\r\n                title={t('image.more')}\r\n              />\r\n            </DropdownMenu>\r\n            {toolbarAddon}\r\n          </Flexbox>\r\n        </div>\r\n      </TooltipGroup>\r\n    );\r\n  },\r\n);\r\n\r\nToolbar.displayName = 'Toolbar';\r\n\r\nexport default Toolbar;\r\n"],"mappings":"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"}

package/es/Image/viewer/ViewerChrome.mjs

@@ -0,0 +1,54 @@
+"use client";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { styles } from "../style.mjs";
+import image_default from "../../i18n/resources/en/image.mjs";
+import GalleryNav from "./GalleryNav.mjs";
+import Toolbar from "./Toolbar.mjs";
+import { useChromeIdle } from "./useChromeIdle.mjs";
+import { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/Image/viewer/ViewerChrome.tsx
+const ViewerChrome = memo(({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {
+	const { t } = useTranslation(image_default);
+	const idle = useChromeIdle();
+	const handleChromeClick = useCallback((event) => {
+		event.stopPropagation();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.viewerChrome,
+		ref: chromeRef,
+		onClick: handleChromeClick,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.viewerChromeIdle,
+			"data-idle-hidden": idle.hidden ? "" : void 0,
+			ref: idle.ref,
+			children: [
+				/* @__PURE__ */ jsx(ActionIcon, {
+					className: styles.viewerClose,
+					icon: X,
+					title: t("image.close"),
+					onClick: onClose
+				}),
+				total > 1 && /* @__PURE__ */ jsx(GalleryNav, {
+					current,
+					hasNext,
+					hasPrev,
+					next,
+					prev,
+					total
+				}),
+				/* @__PURE__ */ jsx(Toolbar, {
+					...toolbarProps,
+					onMoreOpenChange: idle.setHeld
+				})
+			]
+		})
+	});
+});
+ViewerChrome.displayName = "ViewerChrome";
+//#endregion
+export { ViewerChrome as default };
+
+//# sourceMappingURL=ViewerChrome.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerChrome.mjs","names":["imageMessages"],"sources":["../../../src/Image/viewer/ViewerChrome.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { X } from 'lucide-react';\r\nimport type { MotionValue } from 'motion/react';\r\nimport { memo, type MouseEvent, type ReactNode, useCallback } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport imageMessages from '@/i18n/resources/en/image';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\n\r\nimport { styles } from '../style';\r\nimport GalleryNav from './GalleryNav';\r\nimport type { Rect, Rotation, Size } from './geometry';\r\nimport Toolbar from './Toolbar';\r\nimport { useChromeIdle } from './useChromeIdle';\r\n\r\nexport interface ViewerChromeProps {\r\n  canZoomIn: boolean;\r\n  canZoomOut: boolean;\r\n  chromeRef: (node: HTMLElement | null) => void;\r\n  current: number;\r\n  fitRect: Rect;\r\n  flipHorizontal: () => void;\r\n  flipVertical: () => void;\r\n  hasNext: boolean;\r\n  hasPrev: boolean;\r\n  natural: Size;\r\n  next: () => void;\r\n  onClose: () => void;\r\n  onDownload?: (source: string) => void | Promise<void>;\r\n  prev: () => void;\r\n  rotateLeft: () => void;\r\n  rotateRight: () => void;\r\n  rotation: Rotation;\r\n  scale: MotionValue<number>;\r\n  source: string;\r\n  toggleActualSize: () => void;\r\n  toolbarAddon?: ReactNode;\r\n  total: number;\r\n  zoomIn: () => void;\r\n  zoomOut: () => void;\r\n}\r\n\r\nconst ViewerChrome = memo<ViewerChromeProps>(\r\n  ({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {\r\n    const { t } = useTranslation(imageMessages);\r\n    const idle = useChromeIdle();\r\n\r\n    const handleChromeClick = useCallback((event: MouseEvent<HTMLDivElement>) => {\r\n      event.stopPropagation();\r\n    }, []);\r\n\r\n    return (\r\n      <div className={styles.viewerChrome} ref={chromeRef} onClick={handleChromeClick}>\r\n        <div\r\n          className={styles.viewerChromeIdle}\r\n          data-idle-hidden={idle.hidden ? '' : undefined}\r\n          ref={idle.ref}\r\n        >\r\n          <ActionIcon\r\n            className={styles.viewerClose}\r\n            icon={X}\r\n            title={t('image.close')}\r\n            onClick={onClose}\r\n          />\r\n          {total > 1 && (\r\n            <GalleryNav\r\n              current={current}\r\n              hasNext={hasNext}\r\n              hasPrev={hasPrev}\r\n              next={next}\r\n              prev={prev}\r\n              total={total}\r\n            />\r\n          )}\r\n          <Toolbar {...toolbarProps} onMoreOpenChange={idle.setHeld} />\r\n        </div>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nViewerChrome.displayName = 'ViewerChrome';\r\n\r\nexport default ViewerChrome;\r\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,MAClB,EAAE,WAAW,SAAS,SAAS,SAAS,MAAM,SAAS,MAAM,OAAO,GAAG,mBAAmB;CACzF,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,OAAO,cAAc;CAE3B,MAAM,oBAAoB,aAAa,UAAsC;EAC3E,MAAM,gBAAgB;CACxB,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAc,KAAK;EAAW,SAAS;EAC5D,UAAA,qBAAC,OAAD;GACE,WAAW,OAAO;GAClB,oBAAkB,KAAK,SAAS,KAAK,KAAA;GACrC,KAAK,KAAK;GAHZ,UAAA;IAKE,oBAAC,YAAD;KACE,WAAW,OAAO;KAClB,MAAM;KACN,OAAO,EAAE,aAAa;KACtB,SAAS;IACV,CAAA;IACA,QAAQ,KACP,oBAAC,YAAD;KACW;KACA;KACA;KACH;KACA;KACC;IACR,CAAA;IAEH,oBAAC,SAAD;KAAS,GAAI;KAAc,kBAAkB,KAAK;IAAU,CAAA;GACzD;;CACF,CAAA;AAET,CACF;AAEA,aAAa,cAAc"}

package/es/Image/viewer/geometry.d.mts

@@ -0,0 +1,5 @@
+//#region src/Image/viewer/geometry.d.ts
+type ZoomPolicy = 'auto' | 'actual' | 'fit';
+//#endregion
+export { ZoomPolicy };
+//# sourceMappingURL=geometry.d.mts.map