@lobehub/ui 5.25.0 → 5.27.0

package/es/Image/type.d.mts

@@ -1,27 +1,19 @@
-import { CSSProperties, ReactNode, Ref } from "react";
-import { ImageProps } from "antd";
-import { PreviewConfig } from "antd/es/image/index.js";
-import { GroupPreviewConfig } from "antd/es/image/PreviewGroup.js";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/Image/type.d.ts
-interface PreviewGroupPreviewOptions extends GroupPreviewConfig {
+interface ImagePreviewOptions {
+  maxScale?: number;
+  onOpenChange?: (open: boolean) => void;
+  src?: string;
   toolbarAddon?: ReactNode;
 }
-interface PreviewGroupProps {
-  children?: ReactNode;
-  enable?: boolean;
-  items?: string[];
-  preview?: boolean | PreviewGroupPreviewOptions;
-}
-interface ImagePreviewOptions extends PreviewConfig {
-  toolbarAddon?: ReactNode;
-}
-interface ImageProps$1 extends Omit<ImageProps, 'preview'> {
+type ImageProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {
   actions?: ReactNode;
   alwaysShowActions?: boolean;
   classNames?: {
     image?: string;
     wrapper?: string;
   };
+  height?: number | string;
   isLoading?: boolean;
   maxHeight?: number | string;
   maxWidth?: number | string;
@@ -35,9 +27,14 @@ interface ImageProps$1 extends Omit<ImageProps, 'preview'> {
     image?: CSSProperties;
     wrapper?: CSSProperties;
   };
-  toolbarAddon?: ReactNode;
   variant?: 'borderless' | 'filled' | 'outlined';
+  width?: number | string;
+};
+interface PreviewGroupProps {
+  children?: ReactNode;
+  enable?: boolean;
+  preview?: boolean | ImagePreviewOptions;
 }
 //#endregion
-export { ImagePreviewOptions, ImageProps$1 as ImageProps, PreviewGroupPreviewOptions, PreviewGroupProps };
+export { ImagePreviewOptions, ImageProps, PreviewGroupProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Image/viewer/GalleryNav.mjs

@@ -0,0 +1,44 @@
+"use client";
+import Center from "../../Flex/Center.mjs";
+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 { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/Image/viewer/GalleryNav.tsx
+const GalleryNav = memo(({ current, hasNext, hasPrev, next, prev, total }) => {
+	const { t } = useTranslation(image_default);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hasPrev && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavPrev),
+			icon: ChevronLeft,
+			size: "large",
+			title: t("image.prev"),
+			onClick: prev
+		}),
+		hasNext && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavNext),
+			icon: ChevronRight,
+			size: "large",
+			title: t("image.next"),
+			onClick: next
+		}),
+		/* @__PURE__ */ jsxs(Center, {
+			horizontal: true,
+			className: styles.viewerCounter,
+			children: [
+				current + 1,
+				" / ",
+				total
+			]
+		})
+	] });
+});
+GalleryNav.displayName = "GalleryNav";
+//#endregion
+export { GalleryNav as default };
+
+//# sourceMappingURL=GalleryNav.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryNav.mjs","names":["imageMessages"],"sources":["../../../src/Image/viewer/GalleryNav.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Center } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles } from '../style';\n\nexport interface GalleryNavProps {\n  current: number;\n  hasNext: boolean;\n  hasPrev: boolean;\n  next: () => void;\n  prev: () => void;\n  total: number;\n}\n\nconst GalleryNav = memo<GalleryNavProps>(({ current, hasNext, hasPrev, next, prev, total }) => {\n  const { t } = useTranslation(imageMessages);\n\n  return (\n    <>\n      {hasPrev && (\n        <ActionIcon\n          className={cx(styles.viewerNavButton, styles.viewerNavPrev)}\n          icon={ChevronLeft}\n          size={'large'}\n          title={t('image.prev')}\n          onClick={prev}\n        />\n      )}\n      {hasNext && (\n        <ActionIcon\n          className={cx(styles.viewerNavButton, styles.viewerNavNext)}\n          icon={ChevronRight}\n          size={'large'}\n          title={t('image.next')}\n          onClick={next}\n        />\n      )}\n      <Center horizontal className={styles.viewerCounter}>\n        {current + 1} / {total}\n      </Center>\n    </>\n  );\n});\n\nGalleryNav.displayName = 'GalleryNav';\n\nexport default GalleryNav;\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,aAAa,MAAuB,EAAE,SAAS,SAAS,SAAS,MAAM,MAAM,YAAY;CAC7F,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,OACE,qBAAA,YAAA,EAAA,UAAA;EACG,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEF,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEH,qBAAC,QAAD;GAAQ,YAAA;GAAW,WAAW,OAAO;GAArC,UAAA;IACG,UAAU;IAAE;IAAI;GACX;;CACR,EAAA,CAAA;AAEN,CAAC;AAED,WAAW,cAAc"}

package/es/Image/viewer/ImageViewer.mjs

@@ -0,0 +1,275 @@
+"use client";
+import { MotionComponent } from "../../MotionProvider/index.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../../base-ui/zIndex/useLayerZIndex.mjs";
+import { styles } from "../style.mjs";
+import { ToastHost } from "../../base-ui/Toast/imperative.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, use, 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 motionComponent = use(MotionComponent);
+	const [animated] = useState(() => !!motionComponent && !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 fillViewport = Boolean(currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src);
+	const { canZoomIn, canZoomOut, dragBy, dragEnd, escIntent, flipHorizontal, flipVertical, flipX, flipY, handleDoubleClick, handleWheel, isClean, isZoomed, reset, resetCloseTracking, rotate, rotateLeft, rotateRight, rotation, scale, setNatural: syncZoomNatural, setViewport: syncZoomViewport, x, y, zoomIn, zoomOut } = useZoomPan({
+		fillViewport,
+		isClosing: isClosingIndirect,
+		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,
+		getViewportWidth,
+		onClosed: handleClosed,
+		source: openerEntry.element,
+		transform
+	});
+	isClosingIndirectRef.current = isClosing;
+	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,
+		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, {
+					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,
+						reset,
+						rotateLeft,
+						rotateRight,
+						rotation,
+						scale,
+						source,
+						toolbarAddon: currentEntry.options.toolbarAddon,
+						total: entries.length,
+						zoomIn,
+						zoomOut,
+						onClose: handleClose
+					})]
+				}),
+				/* @__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';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport { MotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const motionComponent = use(MotionComponent);\n  const [animated] = useState(() => !!motionComponent && !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    fillViewport,\n    isClosing: isClosingIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        <Dialog.Backdrop\n          className={styles.viewerBackdrop}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          className={styles.viewerPopup}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            className={styles.viewerImage}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            reset={reset}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\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';\n\nimport type { RefObject } from 'react';\n\nimport ImageViewer from './ImageViewer';\nimport { usePreviewSession } from './registry';\n\nexport interface PreviewOutletProps {\n  elementRef: RefObject<HTMLImageElement | null>;\n}\n\nconst PreviewOutlet = ({ elementRef }: PreviewOutletProps) => {\n  const session = usePreviewSession(elementRef);\n  if (!session) return null;\n  return (\n    <ImageViewer\n      entries={session.entries}\n      index={session.index}\n      key={session.token}\n      openerFocusElement={session.openerFocusElement}\n      token={session.token}\n    />\n  );\n};\n\nexport default PreviewOutlet;\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,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":";;;;;;;;;;;;;;;;;;AA6BA,MAAM,sBAAsB,QAAwB;CAClD,IAAI;EAEF,MAAM,QADW,IAAI,IAAI,GAAG,CAAC,CAAC,SACP,MAAM,YAAY;EACzC,OAAO,QAAQ,mBAAmB,MAAM,EAAE,IAAI;CAChD,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAM,4BAA4B,aAA6B;CAS7D,OAAO;EAPL,iBAAiB;EACjB,aAAa;EACb,cAAc;EACd,aAAa;EACb,cAAc;EACd,aAAa;CAEN,EAAE,UAAU,YAAY,MAAM,UAAU,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM;AACnF;AAEA,MAAM,iBAAiB,OAA4B,eAA+B;CAChF,MAAM,YAAY,aAAa,aAAyB,MAAM,GAAG,UAAU,QAAQ,GAAG,CAAC,KAAK,CAAC;CAC7F,MAAM,cAAc,kBACZ,KAAK,MAAO,MAAM,IAAI,IAAI,aAAc,GAAG,GACjD,CAAC,YAAY,KAAK,CACpB;CAEA,OAAO,qBAAqB,WAAW,WAAW;AACpD;AAqBA,MAAM,UAAU,MACb,EACC,WACA,YACA,SACA,gBACA,cACA,SACA,kBACA,OACA,YACA,aACA,UACA,OACA,QACA,cACA,QACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,CAAC,aAAa,kBAAkB,SAA6B,IAAI;CACvE,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAE5D,MAAM,aAAa,aAAa,SAAS,SAAS,QAAQ;CAC1D,MAAM,aAAa,cAAc,OAAO,UAAU;CAElD,MAAM,iBAAiB,YAAY,YAAY;EAC7C,mBAAmB,IAAI;EACvB,IAAI;GAEF,MAAM,OAAO,OAAM,MADI,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,EAAA,CACzB,KAAK;GACjC,MAAM,UAAU,IAAI,gBAAgB,IAAI;GACxC,IAAI,WAAW,mBAAmB,MAAM;GACxC,MAAM,MAAM,yBAAyB,KAAK,IAAI;GAC9C,IAAI,CAAC,SAAS,SAAS,GAAG,GACxB,WAAW,GAAG,SAAS,GAAG;QACrB,IAAI,SAAS,SAAS,UAAU,GACrC,WAAW,SAAS,QAAQ,gBAAgB,MAAM;GAEpD,MAAM,aAAa,SAAS,QAAQ;GACpC,IAAI,gBAAgB,OAAO;GAC3B,MAAM,QAAQ,EAAE,uBAAuB,CAAC;EAC1C,QAAQ;GACN,MAAM,MAAM,EAAE,sBAAsB,CAAC;EACvC,UAAU;GACR,mBAAmB,KAAK;EAC1B;CACF,GAAG,CAAC,QAAQ,CAAC,CAAC;CAEd,MAAM,aAAa,YAAY,YAAY;EACzC,eAAe,IAAI;EACnB,IAAI;GAEF,MAAM,OAAO,OAAM,MADI,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,EAAA,CACzB,KAAK;GACjC,MAAM,gBAAgB,MAAM,iBAAiB,IAAI;GACjD,MAAM,UAAU,UAAU,MAAM,CAAC,IAAI,cAAc,aAAa,CAAC,CAAC;GAClE,MAAM,QAAQ,EAAE,mBAAmB,CAAC;EACtC,QAAQ;GACN,MAAM,MAAM,EAAE,kBAAkB,CAAC;EACnC,UAAU;GACR,eAAe,KAAK;EACtB;CACF,GAAG,CAAC,QAAQ,CAAC,CAAC;CAEd,MAAM,YAAY,cACV;EACJ;GACE,MAAM;GACN,KAAK;GACL,OAAO,EAAE,sBAAsB;GAC/B,SAAS;EACX;EACA;GACE,MAAM;GACN,KAAK;GACL,OAAO,EAAE,oBAAoB;GAC7B,SAAS;EACX;EACA;GAAE,MAAM;GAAW,KAAK;GAAe,OAAO,EAAE,kBAAkB;GAAG,SAAS;EAAW;EACzF;GACE,MAAM;GACN,KAAK;GACL,OAAO,EAAE,mBAAmB;GAC5B,SAAS;EACX;EACA;GAAE,MAAM;GAAM,KAAK;GAAQ,OAAO,EAAE,YAAY;GAAG,SAAS;EAAW;CACzE,GACA;EAAC;EAAgB;EAAc;EAAY;EAAY;EAAa;CAAC,CACvE;CAEA,OACE,oBAAC,cAAD;EAAc,gBAAgB,eAAe,KAAA;EAC3C,UAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAS,KAAK;GACnC,UAAA,qBAACC,mBAAD;IAAS,YAAA;IAAW,OAAM;IAAS,WAAW,OAAO;IAAY,KAAK;IAAtE,UAAA;KACE,oBAAC,YAAD;MACE,UAAU,CAAC;MACX,MAAM;MACN,OAAO,EAAE,cAAc,IAAI;MAC3B,OAAO,EAAE,eAAe;MACxB,SAAS;KACV,CAAA;KACD,oBAAC,SAAD;MAAS,OAAO,EAAE,iBAAiB;MACjC,UAAA,qBAAC,QAAD;OACE,YAAA;OACA,WAAW,OAAO;OAClB,MAAK;OACL,UAAU;OACV,SAAS;OALX,UAAA,CAOG,YAAW,GACN;;KACD,CAAA;KACT,oBAAC,YAAD;MACE,UAAU,CAAC;MACX,MAAM;MACN,OAAO,EAAE,cAAc,IAAI;MAC3B,OAAO,EAAE,cAAc;MACvB,SAAS;KACV,CAAA;KACD,oBAAC,YAAD;MACE,MAAM;MACN,SAAS;MACT,OAAO,EAAE,cAAc,IAAI;MAC3B,OAAO,EAAE,gBAAgB;MACzB,SAAS;KACV,CAAA;KACD,oBAAC,cAAD;MACE,OAAO;MACP,WAAU;MACV,aAAa,EAAE,WAAW,eAAe,KAAA,EAAU;MACnD,eAAe,SAAS,mBAAmB,IAAI;MAE/C,UAAA,oBAAC,YAAD;OACE,MAAM;OACN,SAAS;OACT,OAAO,EAAE,cAAc,IAAI;OAC3B,OAAO,EAAE,YAAY;MACtB,CAAA;KACW,CAAA;KACb;IACM;;EACN,CAAA;CACO,CAAA;AAElB,CACF;AAEA,QAAQ,cAAc"}