@lobehub/ui 5.25.0 → 5.26.0

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":"AAiCA,MAAa,6BAA6B;AAC1C,MAAa,yBAAyB;AAEtC,MAAa,qBAAqB,aAC7B,UAAU,MAAO,OAAO;AAE7B,MAAM,iBAAiB,SAAe,WACpC,WAAW,MAAM,WAAW,MAAM;CAAE,QAAQ,QAAQ;CAAO,OAAO,QAAQ;AAAO,IAAI;AAEvF,MAAa,cACX,SACA,UACA,QACA,eAAe,UACN;CACT,MAAM,YAAY,cAAc,SAAS,MAAM;CAC/C,MAAM,iBAAiB,KAAK,IAAI,SAAS,QAAQ,IAAqB,CAAC;CACvE,MAAM,kBAAkB,KAAK,IAAI,SAAS,SAAS,IAAqB,CAAC;CAIzE,MAAM,eAAe,KAAK,IACxB,iBAAiB,UAAU,OAC3B,kBAAkB,UAAU,QAC5B,GAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAC5B;CACA,MAAM,QAAQ,UAAU,QAAQ;CAChC,MAAM,SAAS,UAAU,SAAS;CAElC,OAAO;EACL;EACA;EACA,IAAI,SAAS,QAAQ,SAAS;EAC9B,IAAI,SAAS,SAAS,UAAU;CAClC;AACF;AAQA,MAAa,iBAAiB,KAAW,WAA2B;CAClE,IAAI,WAAW,MAAM,WAAW,KAAK,OAAO;CAE5C,MAAM,UAAU,IAAI,IAAI,IAAI,QAAQ;CACpC,MAAM,UAAU,IAAI,IAAI,IAAI,SAAS;CAErC,OAAO;EACL,QAAQ,IAAI;EACZ,OAAO,IAAI;EACX,GAAG,UAAU,IAAI,SAAS;EAC1B,GAAG,UAAU,IAAI,QAAQ;CAC3B;AACF;AAEA,MAAa,gBACX,SACA,aACA,QACA,YACmB;CACnB,MAAM,UAAU,QAAQ,IAAI,QAAQ,QAAQ;CAC5C,MAAM,UAAU,QAAQ,IAAI,QAAQ,SAAS;CAC7C,MAAM,QAAQ,cAAc,QAAQ;CAEpC,OAAO;EACL,OAAO;EACP,GAAG,OAAO,IAAI,UAAU,SAAS,OAAO,IAAI,UAAU,QAAQ;EAC9D,GAAG,OAAO,IAAI,UAAU,SAAS,OAAO,IAAI,UAAU,QAAQ;CAChE;AACF;AAEA,MAAa,aACX,OACA,SACA,aACqC;CACrC,MAAM,UAAU,QAAQ,IAAI,QAAQ,QAAQ;CAC5C,MAAM,UAAU,QAAQ,IAAI,QAAQ,SAAS;CAC7C,MAAM,cAAc,QAAQ,QAAQ,MAAM;CAC1C,MAAM,eAAe,QAAQ,SAAS,MAAM;CAE5C,MAAM,QAAQ,QAAgB,YAAoB,iBAAqC;EAErF,IADiB,aAAa,gBACd,GAAG,OAAO;GAAE,KAAK;GAAG,KAAK;EAAE;EAC3C,OAAO;GAAE,KAAK,aAAa,IAAI;GAAQ,KAAK,eAAe,SAAS,aAAa;EAAE;CACrF;CAEA,OAAO;EACL,GAAG,KAAK,SAAS,aAAa,SAAS,KAAK;EAC5C,GAAG,KAAK,SAAS,cAAc,SAAS,MAAM;CAChD;AACF;AAEA,MAAa,YAAY,OAAuB,SAAe,aAA0B;CACvF,MAAM,SAAS,UAAU,OAAO,SAAS,QAAQ;CACjD,OAAO;EACL,GAAG,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,OAAO,EAAE,GAAG,GAAG,OAAO,EAAE,GAAG;EACzD,GAAG,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,OAAO,EAAE,GAAG,GAAG,OAAO,EAAE,GAAG;CAC3D;AACF;AAEA,MAAa,cACX,OACA,KACA,KACA,SAAiB,+BACN;CACX,IAAI,QAAQ,KAAK,OAAO,OAAO,MAAM,SAAS;CAC9C,IAAI,QAAQ,KAAK,OAAO,OAAO,QAAQ,OAAO;CAC9C,OAAO;AACT;AAEA,MAAa,cAAc,OAAe,WAAA,MACxC,KAAK,IAAI,KAAK,IAAI,OAAA,CAAgB,GAAG,QAAQ;AAE/C,MAAa,mBAAmB,WAC9B,KAAK,IAAI,CAAC,SAAS,sBAAsB;AAE3C,MAAa,gBAAgB,SAAe,SAAe,WACzD,cAAc,SAAS,MAAM,CAAC,CAAC,QAAQ,QAAQ;AAEjD,MAAa,qBACX,cACA,SACA,SACA,WACW;CACX,IAAI,eAAe,GAAG,OAAA;CACtB,OAAO,KAAK,IAAI,GAAG,aAAa,SAAS,SAAS,MAAM,CAAC;AAC3D"}

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"}

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