@lobehub/ui 5.24.0 → 5.26.0

package/es/Image/viewer/Toolbar.mjs

@@ -0,0 +1,184 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Center from "../../Flex/Center.mjs";
+import { Tooltip } from "../../base-ui/Tooltip/Tooltip.mjs";
+import TooltipGroup from "../../base-ui/Tooltip/TooltipGroup.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import DropdownMenu from "../../base-ui/DropdownMenu/DropdownMenu.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { downloadBlob } from "../../utils/downloadBlob.mjs";
+import { styles } from "../style.mjs";
+import { toast } from "../../base-ui/Toast/imperative.mjs";
+import { naturalScale } from "./geometry.mjs";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { getClipboardBlob } from "../../utils/blobToPng.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, onMoreOpenChange, reset, rotateLeft, rotateRight, rotation, scale, source, 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 handleDownload = useCallback(async () => {
+		setDownloadLoading(true);
+		try {
+			const blob = await (await fetch(source, { mode: "cors" })).blob();
+			const blobUrl = URL.createObjectURL(blob);
+			let fileName = getFileNameFromUrl(source);
+			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 {
+			toast.error(t("image.downloadFailed"));
+		} finally {
+			setDownloadLoading(false);
+		}
+	}, [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__ */ jsx(Tooltip, {
+						title: t("image.zoomReset"),
+						children: /* @__PURE__ */ jsxs(Center, {
+							horizontal: true,
+							className: styles.toolbarPercentage,
+							role: "button",
+							tabIndex: 0,
+							onClick: reset,
+							children: [percentage, "%"]
+						})
+					}),
+					/* @__PURE__ */ jsx(ActionIcon, {
+						disabled: !canZoomIn,
+						icon: ZoomIn,
+						style: { borderRadius: 999 },
+						title: t("image.zoomIn"),
+						onClick: zoomIn
+					}),
+					/* @__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';\n\nimport {\n  Copy,\n  Download,\n  Ellipsis,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type ReactNode, useCallback, useMemo, useState, useSyncExternalStore } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport DropdownMenu, { type DropdownItem } from '@/base-ui/DropdownMenu';\nimport { toast } from '@/base-ui/Toast';\nimport { Center, Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Tooltip, { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { styles } from '../style';\nimport { naturalScale, type Rect, type Rotation, type Size } from './geometry';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nconst usePercentage = (scale: MotionValue<number>, matchScale: number): number => {\n  const subscribe = useCallback((onChange: () => void) => scale.on('change', onChange), [scale]);\n  const getSnapshot = useCallback(\n    () => Math.round((scale.get() / matchScale) * 100),\n    [matchScale, scale],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n};\n\nexport interface ToolbarProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  natural: Size;\n  onMoreOpenChange?: (open: boolean) => void;\n  reset: () => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toolbarAddon?: ReactNode;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst Toolbar = memo<ToolbarProps>(\n  ({\n    canZoomIn,\n    canZoomOut,\n    fitRect,\n    flipHorizontal,\n    flipVertical,\n    natural,\n    onMoreOpenChange,\n    reset,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    source,\n    toolbarAddon,\n    zoomIn,\n    zoomOut,\n  }) => {\n    const { t } = useTranslation(imageMessages);\n    const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n    const [copyLoading, setCopyLoading] = useState(false);\n    const [downloadLoading, setDownloadLoading] = useState(false);\n\n    const matchScale = naturalScale(natural, fitRect, rotation);\n    const percentage = usePercentage(scale, matchScale);\n\n    const handleDownload = useCallback(async () => {\n      setDownloadLoading(true);\n      try {\n        const response = await fetch(source, { mode: 'cors' });\n        const blob = await response.blob();\n        const blobUrl = URL.createObjectURL(blob);\n        let fileName = getFileNameFromUrl(source);\n        const ext = getExtensionFromMimeType(blob.type);\n        if (!fileName.includes('.')) {\n          fileName = `${fileName}.${ext}`;\n        } else if (fileName.endsWith('.svg+xml')) {\n          fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n        }\n        await downloadBlob(blobUrl, fileName);\n        URL.revokeObjectURL(blobUrl);\n        toast.success(t('image.downloadSuccess'));\n      } catch {\n        toast.error(t('image.downloadFailed'));\n      } finally {\n        setDownloadLoading(false);\n      }\n    }, [source, t]);\n\n    const handleCopy = useCallback(async () => {\n      setCopyLoading(true);\n      try {\n        const response = await fetch(source, { mode: 'cors' });\n        const blob = await response.blob();\n        const clipboardBlob = await getClipboardBlob(blob);\n        await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n        toast.success(t('image.copySuccess'));\n      } catch {\n        toast.error(t('image.copyFailed'));\n      } finally {\n        setCopyLoading(false);\n      }\n    }, [source, t]);\n\n    const moreItems = useMemo<DropdownItem[]>(\n      () => [\n        {\n          icon: FlipHorizontal,\n          key: 'flip-horizontal',\n          label: t('image.flipHorizontal'),\n          onClick: flipHorizontal,\n        },\n        {\n          icon: FlipVertical,\n          key: 'flip-vertical',\n          label: t('image.flipVertical'),\n          onClick: flipVertical,\n        },\n        { icon: RotateCcw, key: 'rotate-left', label: t('image.rotateLeft'), onClick: rotateLeft },\n        {\n          icon: RotateCw,\n          key: 'rotate-right',\n          label: t('image.rotateRight'),\n          onClick: rotateRight,\n        },\n        { icon: Copy, key: 'copy', label: t('image.copy'), onClick: handleCopy },\n      ],\n      [flipHorizontal, flipVertical, handleCopy, rotateLeft, rotateRight, t],\n    );\n\n    return (\n      <TooltipGroup popupContainer={containerEl ?? undefined}>\n        <div className={styles.toolbar} ref={setContainerEl}>\n          <Flexbox horizontal align=\"center\" className={styles.toolbarRow} gap={8}>\n            <ActionIcon\n              disabled={!canZoomOut}\n              icon={ZoomOut}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomOut')}\n              onClick={zoomOut}\n            />\n            <Tooltip title={t('image.zoomReset')}>\n              <Center\n                horizontal\n                className={styles.toolbarPercentage}\n                role=\"button\"\n                tabIndex={0}\n                onClick={reset}\n              >\n                {percentage}%\n              </Center>\n            </Tooltip>\n            <ActionIcon\n              disabled={!canZoomIn}\n              icon={ZoomIn}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomIn')}\n              onClick={zoomIn}\n            />\n            <ActionIcon\n              icon={Download}\n              loading={downloadLoading}\n              style={{ borderRadius: 999 }}\n              title={t('image.download')}\n              onClick={handleDownload}\n            />\n            <DropdownMenu\n              items={moreItems}\n              placement=\"top\"\n              portalProps={{ container: containerEl ?? undefined }}\n              onOpenChange={(open) => onMoreOpenChange?.(open)}\n            >\n              <ActionIcon\n                icon={Ellipsis}\n                loading={copyLoading}\n                style={{ borderRadius: 999 }}\n                title={t('image.more')}\n              />\n            </DropdownMenu>\n            {toolbarAddon}\n          </Flexbox>\n        </div>\n      </TooltipGroup>\n    );\n  },\n);\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"mappings":"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"}

package/es/Image/viewer/ViewerChrome.mjs

@@ -0,0 +1,54 @@
+"use client";
+import ActionIcon from "../../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';\n\nimport { X } from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type MouseEvent, type ReactNode, useCallback } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles } from '../style';\nimport GalleryNav from './GalleryNav';\nimport type { Rect, Rotation, Size } from './geometry';\nimport Toolbar from './Toolbar';\nimport { useChromeIdle } from './useChromeIdle';\n\nexport interface ViewerChromeProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  chromeRef: (node: HTMLElement | null) => void;\n  current: number;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  hasNext: boolean;\n  hasPrev: boolean;\n  natural: Size;\n  next: () => void;\n  onClose: () => void;\n  prev: () => void;\n  reset: () => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toolbarAddon?: ReactNode;\n  total: number;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst ViewerChrome = memo<ViewerChromeProps>(\n  ({ chromeRef, current, hasNext, hasPrev, next, onClose, prev, total, ...toolbarProps }) => {\n    const { t } = useTranslation(imageMessages);\n    const idle = useChromeIdle();\n\n    const handleChromeClick = useCallback((event: MouseEvent<HTMLDivElement>) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <div className={styles.viewerChrome} ref={chromeRef} onClick={handleChromeClick}>\n        <div\n          className={styles.viewerChromeIdle}\n          data-idle-hidden={idle.hidden ? '' : undefined}\n          ref={idle.ref}\n        >\n          <ActionIcon\n            className={styles.viewerClose}\n            icon={X}\n            title={t('image.close')}\n            onClick={onClose}\n          />\n          {total > 1 && (\n            <GalleryNav\n              current={current}\n              hasNext={hasNext}\n              hasPrev={hasPrev}\n              next={next}\n              prev={prev}\n              total={total}\n            />\n          )}\n          <Toolbar {...toolbarProps} onMoreOpenChange={idle.setHeld} />\n        </div>\n      </div>\n    );\n  },\n);\n\nViewerChrome.displayName = 'ViewerChrome';\n\nexport default ViewerChrome;\n"],"mappings":";;;;;;;;;;;;AA0CA,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.mjs

@@ -0,0 +1,85 @@
+const DEFAULT_RUBBER_BAND_FACTOR = .15;
+const WHEEL_ZOOM_SENSITIVITY = .002;
+const normalizeRotation = (degrees) => (degrees % 360 + 360) % 360;
+const effectiveSize = (natural, rotate) => rotate === 90 || rotate === 270 ? {
+	height: natural.width,
+	width: natural.height
+} : natural;
+const computeFit = (natural, viewport, rotate, fillViewport = false) => {
+	const effective = effectiveSize(natural, rotate);
+	const availableWidth = Math.max(viewport.width - 48, 0);
+	const availableHeight = Math.max(viewport.height - 48, 0);
+	const containScale = Math.min(availableWidth / effective.width, availableHeight / effective.height, ...fillViewport ? [] : [1]);
+	const width = effective.width * containScale;
+	const height = effective.height * containScale;
+	return {
+		height,
+		width,
+		x: (viewport.width - width) / 2,
+		y: (viewport.height - height) / 2
+	};
+};
+const unrotatedRect = (fit, rotate) => {
+	if (rotate !== 90 && rotate !== 270) return fit;
+	const centerX = fit.x + fit.width / 2;
+	const centerY = fit.y + fit.height / 2;
+	return {
+		height: fit.width,
+		width: fit.height,
+		x: centerX - fit.height / 2,
+		y: centerY - fit.width / 2
+	};
+};
+const anchoredZoom = (current, targetScale, anchor, fitRect) => {
+	const centerX = fitRect.x + fitRect.width / 2;
+	const centerY = fitRect.y + fitRect.height / 2;
+	const ratio = targetScale / current.scale;
+	return {
+		scale: targetScale,
+		x: anchor.x - centerX - ratio * (anchor.x - centerX - current.x),
+		y: anchor.y - centerY - ratio * (anchor.y - centerY - current.y)
+	};
+};
+const panBounds = (state, fitRect, viewport) => {
+	const centerX = fitRect.x + fitRect.width / 2;
+	const centerY = fitRect.y + fitRect.height / 2;
+	const scaledWidth = fitRect.width * state.scale;
+	const scaledHeight = fitRect.height * state.scale;
+	const axis = (center, scaledSize, viewportSize) => {
+		if (scaledSize - viewportSize <= 0) return {
+			max: 0,
+			min: 0
+		};
+		return {
+			max: scaledSize / 2 - center,
+			min: viewportSize - center - scaledSize / 2
+		};
+	};
+	return {
+		x: axis(centerX, scaledWidth, viewport.width),
+		y: axis(centerY, scaledHeight, viewport.height)
+	};
+};
+const clampPan = (state, fitRect, viewport) => {
+	const bounds = panBounds(state, fitRect, viewport);
+	return {
+		x: Math.min(Math.max(state.x, bounds.x.min), bounds.x.max),
+		y: Math.min(Math.max(state.y, bounds.y.min), bounds.y.max)
+	};
+};
+const rubberBand = (value, min, max, factor = DEFAULT_RUBBER_BAND_FACTOR) => {
+	if (value < min) return min - (min - value) * factor;
+	if (value > max) return max + (value - max) * factor;
+	return value;
+};
+const clampScale = (scale, maxScale = 8) => Math.min(Math.max(scale, 1), maxScale);
+const wheelZoomFactor = (deltaY) => Math.exp(-deltaY * WHEEL_ZOOM_SENSITIVITY);
+const naturalScale = (natural, fitRect, rotate) => effectiveSize(natural, rotate).width / fitRect.width;
+const doubleClickTarget = (currentScale, natural, fitRect, rotate) => {
+	if (currentScale > 1) return 1;
+	return Math.max(2, naturalScale(natural, fitRect, rotate));
+};
+//#endregion
+export { DEFAULT_RUBBER_BAND_FACTOR, WHEEL_ZOOM_SENSITIVITY, anchoredZoom, clampPan, clampScale, computeFit, doubleClickTarget, naturalScale, normalizeRotation, panBounds, rubberBand, unrotatedRect, wheelZoomFactor };
+
+//# sourceMappingURL=geometry.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.mjs","names":[],"sources":["../../../src/Image/viewer/geometry.ts"],"sourcesContent":["export interface Size {\n  height: number;\n  width: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface Rect {\n  height: number;\n  width: number;\n  x: number;\n  y: number;\n}\n\nexport type Rotation = 0 | 90 | 180 | 270;\n\nexport interface TransformState {\n  scale: number;\n  x: number;\n  y: number;\n}\n\nexport interface AxisBounds {\n  max: number;\n  min: number;\n}\n\nexport const VIEWPORT_MARGIN = 24;\nexport const MIN_SCALE = 1;\nexport const DEFAULT_MAX_SCALE = 8;\nexport const DEFAULT_RUBBER_BAND_FACTOR = 0.15;\nexport const WHEEL_ZOOM_SENSITIVITY = 0.002;\n\nexport const normalizeRotation = (degrees: number): Rotation =>\n  (((degrees % 360) + 360) % 360) as Rotation;\n\nconst effectiveSize = (natural: Size, rotate: Rotation): Size =>\n  rotate === 90 || rotate === 270 ? { height: natural.width, width: natural.height } : natural;\n\nexport const computeFit = (\n  natural: Size,\n  viewport: Size,\n  rotate: Rotation,\n  fillViewport = false,\n): Rect => {\n  const effective = effectiveSize(natural, rotate);\n  const availableWidth = Math.max(viewport.width - VIEWPORT_MARGIN * 2, 0);\n  const availableHeight = Math.max(viewport.height - VIEWPORT_MARGIN * 2, 0);\n  // fillViewport drops the no-upscale cap: a dual-source thumbnail is a\n  // stand-in for the hi-res image, so it must open at the viewport fit the\n  // hi-res will land in — otherwise the swap re-fits mid-open.\n  const containScale = Math.min(\n    availableWidth / effective.width,\n    availableHeight / effective.height,\n    ...(fillViewport ? [] : [1]),\n  );\n  const width = effective.width * containScale;\n  const height = effective.height * containScale;\n\n  return {\n    height,\n    width,\n    x: (viewport.width - width) / 2,\n    y: (viewport.height - height) / 2,\n  };\n};\n\n// computeFit returns the box the image occupies *after* the CSS rotation, but\n// the element it is applied to is sized before that rotation runs. For quarter\n// turns the two disagree, so the element box has to be the transpose about the\n// same center — otherwise `object-fit: contain` letterboxes the image down to\n// the short side and everything downstream (pan bounds, natural scale) is\n// measuring a box the viewer never actually paints.\nexport const unrotatedRect = (fit: Rect, rotate: Rotation): Rect => {\n  if (rotate !== 90 && rotate !== 270) return fit;\n\n  const centerX = fit.x + fit.width / 2;\n  const centerY = fit.y + fit.height / 2;\n\n  return {\n    height: fit.width,\n    width: fit.height,\n    x: centerX - fit.height / 2,\n    y: centerY - fit.width / 2,\n  };\n};\n\nexport const anchoredZoom = (\n  current: TransformState,\n  targetScale: number,\n  anchor: Point,\n  fitRect: Rect,\n): TransformState => {\n  const centerX = fitRect.x + fitRect.width / 2;\n  const centerY = fitRect.y + fitRect.height / 2;\n  const ratio = targetScale / current.scale;\n\n  return {\n    scale: targetScale,\n    x: anchor.x - centerX - ratio * (anchor.x - centerX - current.x),\n    y: anchor.y - centerY - ratio * (anchor.y - centerY - current.y),\n  };\n};\n\nexport const panBounds = (\n  state: TransformState,\n  fitRect: Rect,\n  viewport: Size,\n): { x: AxisBounds; y: AxisBounds } => {\n  const centerX = fitRect.x + fitRect.width / 2;\n  const centerY = fitRect.y + fitRect.height / 2;\n  const scaledWidth = fitRect.width * state.scale;\n  const scaledHeight = fitRect.height * state.scale;\n\n  const axis = (center: number, scaledSize: number, viewportSize: number): AxisBounds => {\n    const overflow = scaledSize - viewportSize;\n    if (overflow <= 0) return { max: 0, min: 0 };\n    return { max: scaledSize / 2 - center, min: viewportSize - center - scaledSize / 2 };\n  };\n\n  return {\n    x: axis(centerX, scaledWidth, viewport.width),\n    y: axis(centerY, scaledHeight, viewport.height),\n  };\n};\n\nexport const clampPan = (state: TransformState, fitRect: Rect, viewport: Size): Point => {\n  const bounds = panBounds(state, fitRect, viewport);\n  return {\n    x: Math.min(Math.max(state.x, bounds.x.min), bounds.x.max),\n    y: Math.min(Math.max(state.y, bounds.y.min), bounds.y.max),\n  };\n};\n\nexport const rubberBand = (\n  value: number,\n  min: number,\n  max: number,\n  factor: number = DEFAULT_RUBBER_BAND_FACTOR,\n): number => {\n  if (value < min) return min - (min - value) * factor;\n  if (value > max) return max + (value - max) * factor;\n  return value;\n};\n\nexport const clampScale = (scale: number, maxScale: number = DEFAULT_MAX_SCALE): number =>\n  Math.min(Math.max(scale, MIN_SCALE), maxScale);\n\nexport const wheelZoomFactor = (deltaY: number): number =>\n  Math.exp(-deltaY * WHEEL_ZOOM_SENSITIVITY);\n\nexport const naturalScale = (natural: Size, fitRect: Rect, rotate: Rotation): number =>\n  effectiveSize(natural, rotate).width / fitRect.width;\n\nexport const doubleClickTarget = (\n  currentScale: number,\n  natural: Size,\n  fitRect: Rect,\n  rotate: Rotation,\n): number => {\n  if (currentScale > 1) return MIN_SCALE;\n  return Math.max(2, naturalScale(natural, fitRect, rotate));\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import "../type.mjs";
+import "react";

package/es/Image/viewer/registry.mjs

@@ -0,0 +1,52 @@
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/Image/viewer/registry.ts
+let state = null;
+let nextToken = 0;
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	for (const listener of listeners) listener();
+};
+const flushClosed = () => {
+	if (!state || state.closing) return;
+	state.closing = true;
+	state.onOpenChange?.(false);
+};
+const openPreview = (entry, entries, index = 0, openerFocusElement = null) => {
+	flushClosed();
+	nextToken += 1;
+	state = {
+		closing: false,
+		entries: entries && entries.length > 0 ? entries : [entry],
+		index: entries && entries.length > 0 ? Math.min(Math.max(index, 0), entries.length - 1) : 0,
+		onOpenChange: entry.options.onOpenChange,
+		openerFocusElement,
+		token: nextToken
+	};
+	emit();
+	entry.options.onOpenChange?.(true);
+};
+const beginClosePreview = (token) => {
+	if (state?.token !== token) return;
+	flushClosed();
+};
+const endClosePreview = (token) => {
+	if (state?.token !== token) return;
+	flushClosed();
+	state = null;
+	emit();
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const getServerSnapshot = () => null;
+const usePreviewSession = (elementRef) => {
+	const getSnapshot = useCallback(() => state && state.entries[state.index]?.element === elementRef.current ? state : null, [elementRef]);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};
+//#endregion
+export { beginClosePreview, endClosePreview, openPreview, usePreviewSession };
+
+//# sourceMappingURL=registry.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registry.mjs","names":[],"sources":["../../../src/Image/viewer/registry.ts"],"sourcesContent":["import { type RefObject, useCallback, useSyncExternalStore } from 'react';\n\nimport type { ImagePreviewOptions } from '../type';\n\nexport interface ResolvedPreviewOptions extends Omit<ImagePreviewOptions, 'maxScale'> {\n  maxScale: number;\n}\n\nexport interface PreviewEntry {\n  element: HTMLImageElement;\n  options: ResolvedPreviewOptions;\n  previewSrc?: string;\n  src: string;\n}\n\nexport interface PreviewSession {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\ninterface HostState extends PreviewSession {\n  closing: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nlet state: HostState | null = null;\nlet nextToken = 0;\n\nconst listeners = new Set<() => void>();\n\nconst emit = () => {\n  for (const listener of listeners) listener();\n};\n\nconst flushClosed = () => {\n  if (!state || state.closing) return;\n  state.closing = true;\n  state.onOpenChange?.(false);\n};\n\n// openerFocusElement must be captured by the caller at pointerdown, not read here:\n// clicking a non-focusable thumbnail already blurs to document.body before its\n// click handler (and therefore this call) runs.\nexport const openPreview = (\n  entry: PreviewEntry,\n  entries?: PreviewEntry[],\n  index = 0,\n  openerFocusElement: HTMLElement | null = null,\n): void => {\n  flushClosed();\n  nextToken += 1;\n  const resolvedEntries = entries && entries.length > 0 ? entries : [entry];\n  const resolvedIndex =\n    entries && entries.length > 0 ? Math.min(Math.max(index, 0), entries.length - 1) : 0;\n  state = {\n    closing: false,\n    entries: resolvedEntries,\n    index: resolvedIndex,\n    onOpenChange: entry.options.onOpenChange,\n    openerFocusElement,\n    token: nextToken,\n  };\n  emit();\n  entry.options.onOpenChange?.(true);\n};\n\nexport const beginClosePreview = (token: number): void => {\n  if (state?.token !== token) return;\n  flushClosed();\n};\n\nexport const endClosePreview = (token: number): void => {\n  if (state?.token !== token) return;\n  flushClosed();\n  state = null;\n  emit();\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nconst getServerSnapshot = (): PreviewSession | null => null;\n\nexport const usePreviewSession = (\n  elementRef: RefObject<HTMLImageElement | null>,\n): PreviewSession | null => {\n  const getSnapshot = useCallback(\n    () => (state && state.entries[state.index]?.element === elementRef.current ? state : null),\n    [elementRef],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":";;AA2BA,IAAI,QAA0B;AAC9B,IAAI,YAAY;AAEhB,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAa;CACjB,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAM,oBAAoB;CACxB,IAAI,CAAC,SAAS,MAAM,SAAS;CAC7B,MAAM,UAAU;CAChB,MAAM,eAAe,KAAK;AAC5B;AAKA,MAAa,eACX,OACA,SACA,QAAQ,GACR,qBAAyC,SAChC;CACT,YAAY;CACZ,aAAa;CAIb,QAAQ;EACN,SAAS;EACT,SALsB,WAAW,QAAQ,SAAS,IAAI,UAAU,CAAC,KAAK;EAMtE,OAJA,WAAW,QAAQ,SAAS,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ,SAAS,CAAC,IAAI;EAKnF,cAAc,MAAM,QAAQ;EAC5B;EACA,OAAO;CACT;CACA,KAAK;CACL,MAAM,QAAQ,eAAe,IAAI;AACnC;AAEA,MAAa,qBAAqB,UAAwB;CACxD,IAAI,OAAO,UAAU,OAAO;CAC5B,YAAY;AACd;AAEA,MAAa,mBAAmB,UAAwB;CACtD,IAAI,OAAO,UAAU,OAAO;CAC5B,YAAY;CACZ,QAAQ;CACR,KAAK;AACP;AAEA,MAAM,aAAa,aAAyB;CAC1C,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AAEA,MAAM,0BAAiD;AAEvD,MAAa,qBACX,eAC0B;CAC1B,MAAM,cAAc,kBACX,SAAS,MAAM,QAAQ,MAAM,MAAM,EAAE,YAAY,WAAW,UAAU,QAAQ,MACrF,CAAC,UAAU,CACb;CAEA,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE"}

package/es/Image/viewer/useChromeIdle.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/Image/viewer/useChromeIdle.ts
+const IDLE_HIDE_MS = 2e3;
+const useChromeIdle = () => {
+	const [hidden, setHidden] = useState(false);
+	const nodeRef = useRef(null);
+	const overChromeRef = useRef(false);
+	const heldRef = useRef(false);
+	const timerRef = useRef(null);
+	const clearTimer = useCallback(() => {
+		if (timerRef.current === null) return;
+		window.clearTimeout(timerRef.current);
+		timerRef.current = null;
+	}, []);
+	const arm = useCallback(() => {
+		clearTimer();
+		timerRef.current = window.setTimeout(function fire() {
+			timerRef.current = null;
+			const node = nodeRef.current;
+			const active = document.activeElement;
+			const focusWithin = Boolean(node && active && node.contains(active));
+			if (overChromeRef.current || heldRef.current || focusWithin) {
+				timerRef.current = window.setTimeout(fire, IDLE_HIDE_MS);
+				return;
+			}
+			setHidden(true);
+		}, IDLE_HIDE_MS);
+	}, [clearTimer]);
+	const wake = useCallback(() => {
+		setHidden(false);
+		arm();
+	}, [arm]);
+	useEffect(() => {
+		const handlePointerMove = (event) => {
+			overChromeRef.current = Boolean(event.target instanceof Node && nodeRef.current?.contains(event.target));
+			wake();
+		};
+		const handleActivity = () => wake();
+		document.addEventListener("pointermove", handlePointerMove);
+		document.addEventListener("pointerdown", handleActivity);
+		document.addEventListener("wheel", handleActivity, { passive: true });
+		document.addEventListener("keydown", handleActivity);
+		arm();
+		return () => {
+			document.removeEventListener("pointermove", handlePointerMove);
+			document.removeEventListener("pointerdown", handleActivity);
+			document.removeEventListener("wheel", handleActivity);
+			document.removeEventListener("keydown", handleActivity);
+			clearTimer();
+		};
+	}, [
+		arm,
+		clearTimer,
+		wake
+	]);
+	const setHeld = useCallback((held) => {
+		heldRef.current = held;
+		if (held) wake();
+	}, [wake]);
+	return {
+		hidden,
+		ref: useCallback((node) => {
+			nodeRef.current = node;
+		}, []),
+		setHeld
+	};
+};
+//#endregion
+export { useChromeIdle };
+
+//# sourceMappingURL=useChromeIdle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChromeIdle.mjs","names":[],"sources":["../../../src/Image/viewer/useChromeIdle.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nconst IDLE_HIDE_MS = 2000;\n\nexport interface UseChromeIdleResult {\n  hidden: boolean;\n  ref: (node: HTMLDivElement | null) => void;\n  setHeld: (held: boolean) => void;\n}\n\nexport const useChromeIdle = (): UseChromeIdleResult => {\n  const [hidden, setHidden] = useState(false);\n  const nodeRef = useRef<HTMLDivElement | null>(null);\n  const overChromeRef = useRef(false);\n  const heldRef = useRef(false);\n  const timerRef = useRef<number | null>(null);\n\n  const clearTimer = useCallback(() => {\n    if (timerRef.current === null) return;\n    window.clearTimeout(timerRef.current);\n    timerRef.current = null;\n  }, []);\n\n  const arm = useCallback(() => {\n    clearTimer();\n    timerRef.current = window.setTimeout(function fire() {\n      timerRef.current = null;\n      const node = nodeRef.current;\n      const active = document.activeElement;\n      const focusWithin = Boolean(node && active && node.contains(active));\n      if (overChromeRef.current || heldRef.current || focusWithin) {\n        timerRef.current = window.setTimeout(fire, IDLE_HIDE_MS);\n        return;\n      }\n      setHidden(true);\n    }, IDLE_HIDE_MS);\n  }, [clearTimer]);\n\n  const wake = useCallback(() => {\n    setHidden(false);\n    arm();\n  }, [arm]);\n\n  useEffect(() => {\n    const handlePointerMove = (event: PointerEvent) => {\n      overChromeRef.current = Boolean(\n        event.target instanceof Node && nodeRef.current?.contains(event.target),\n      );\n      wake();\n    };\n    const handleActivity = () => wake();\n\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerdown', handleActivity);\n    document.addEventListener('wheel', handleActivity, { passive: true });\n    document.addEventListener('keydown', handleActivity);\n    arm();\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerdown', handleActivity);\n      document.removeEventListener('wheel', handleActivity);\n      document.removeEventListener('keydown', handleActivity);\n      clearTimer();\n    };\n  }, [arm, clearTimer, wake]);\n\n  const setHeld = useCallback(\n    (held: boolean) => {\n      heldRef.current = held;\n      if (held) wake();\n    },\n    [wake],\n  );\n\n  const ref = useCallback((node: HTMLDivElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  return { hidden, ref, setHeld };\n};\n"],"mappings":";;;AAIA,MAAM,eAAe;AAQrB,MAAa,sBAA2C;CACtD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,WAAW,OAAsB,IAAI;CAE3C,MAAM,aAAa,kBAAkB;EACnC,IAAI,SAAS,YAAY,MAAM;EAC/B,OAAO,aAAa,SAAS,OAAO;EACpC,SAAS,UAAU;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,MAAM,kBAAkB;EAC5B,WAAW;EACX,SAAS,UAAU,OAAO,WAAW,SAAS,OAAO;GACnD,SAAS,UAAU;GACnB,MAAM,OAAO,QAAQ;GACrB,MAAM,SAAS,SAAS;GACxB,MAAM,cAAc,QAAQ,QAAQ,UAAU,KAAK,SAAS,MAAM,CAAC;GACnE,IAAI,cAAc,WAAW,QAAQ,WAAW,aAAa;IAC3D,SAAS,UAAU,OAAO,WAAW,MAAM,YAAY;IACvD;GACF;GACA,UAAU,IAAI;EAChB,GAAG,YAAY;CACjB,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,OAAO,kBAAkB;EAC7B,UAAU,KAAK;EACf,IAAI;CACN,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,MAAM,qBAAqB,UAAwB;GACjD,cAAc,UAAU,QACtB,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,SAAS,MAAM,MAAM,CACxE;GACA,KAAK;EACP;EACA,MAAM,uBAAuB,KAAK;EAElC,SAAS,iBAAiB,eAAe,iBAAiB;EAC1D,SAAS,iBAAiB,eAAe,cAAc;EACvD,SAAS,iBAAiB,SAAS,gBAAgB,EAAE,SAAS,KAAK,CAAC;EACpE,SAAS,iBAAiB,WAAW,cAAc;EACnD,IAAI;EAEJ,aAAa;GACX,SAAS,oBAAoB,eAAe,iBAAiB;GAC7D,SAAS,oBAAoB,eAAe,cAAc;GAC1D,SAAS,oBAAoB,SAAS,cAAc;GACpD,SAAS,oBAAoB,WAAW,cAAc;GACtD,WAAW;EACb;CACF,GAAG;EAAC;EAAK;EAAY;CAAI,CAAC;CAE1B,MAAM,UAAU,aACb,SAAkB;EACjB,QAAQ,UAAU;EAClB,IAAI,MAAM,KAAK;CACjB,GACA,CAAC,IAAI,CACP;CAMA,OAAO;EAAE;EAAQ,KAJL,aAAa,SAAgC;GACvD,QAAQ,UAAU;EACpB,GAAG,CAAC,CAEe;EAAG;CAAQ;AAChC"}

package/es/Image/viewer/useFinalFocus.mjs

@@ -0,0 +1,10 @@
+import { useCallback } from "react";
+//#region src/Image/viewer/useFinalFocus.ts
+const useFinalFocus = (openerFocusElement) => useCallback(() => {
+	if (openerFocusElement?.isConnected) return openerFocusElement;
+	return false;
+}, [openerFocusElement]);
+//#endregion
+export { useFinalFocus };
+
+//# sourceMappingURL=useFinalFocus.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFinalFocus.mjs","names":[],"sources":["../../../src/Image/viewer/useFinalFocus.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport const useFinalFocus = (openerFocusElement: HTMLElement | null) =>\n  useCallback((): HTMLElement | false => {\n    if (openerFocusElement?.isConnected) return openerFocusElement;\n    return false;\n  }, [openerFocusElement]);\n"],"mappings":";;AAEA,MAAa,iBAAiB,uBAC5B,kBAAuC;CACrC,IAAI,oBAAoB,aAAa,OAAO;CAC5C,OAAO;AACT,GAAG,CAAC,kBAAkB,CAAC"}