@cherrystudio/file-preview 0.0.0-stage → 0.1.0

package/dist/ImageFilePreview-BO8rLRZv.js

@@ -0,0 +1,2171 @@
+import { r as readPreviewDocument, t as PreviewError } from "./source-Rx3etU3y.js";
+import { A as dispatchDiscreteCustomEvent, B as createSlot, C as createPopperScope, E as DismissableLayer, F as cn, I as LoaderCircle, M as composeEventHandlers, N as EmptyState, O as useCallbackRef, R as createLucideIcon, S as Root2$1, T as useLayoutEffect2, V as useComposedRefs, _ as Presence, b as Arrow, c as FilePreviewToolbar, g as useControllableState, h as usePortalContainer, i as FilePreviewLayout, j as createContextScope, k as Primitive, o as usePreviewHost, r as FilePreviewToolbarButton, t as useTranslation, v as Portal$1, w as useId$1, x as Content, y as Anchor, z as cva } from "./useTranslation-DMhY277o.js";
+import { n as ZoomIn, t as ZoomOut } from "./zoom-out-DLOQGt1e.js";
+import { i as useFocusGuards, n as hideOthers, r as FocusScope, t as ReactRemoveScroll } from "./Combination-BLg27FvF.js";
+import { t as imageFilePreviewPlugin } from "./imageFilePreviewPlugin-CxIUlEmg.js";
+import { t as FilePreviewTooLarge } from "./FilePreviewTooLarge-DkHa6toZ.js";
+import * as React$1 from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FlipHorizontal = createLucideIcon("flip-horizontal", [
+	["path", {
+		d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3",
+		key: "1i73f7"
+	}],
+	["path", {
+		d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3",
+		key: "saxlbk"
+	}],
+	["path", {
+		d: "M12 20v2",
+		key: "1lh1kg"
+	}],
+	["path", {
+		d: "M12 14v2",
+		key: "8jcxud"
+	}],
+	["path", {
+		d: "M12 8v2",
+		key: "1woqiv"
+	}],
+	["path", {
+		d: "M12 2v2",
+		key: "tus03m"
+	}]
+]);
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var FlipVertical = createLucideIcon("flip-vertical", [
+	["path", {
+		d: "M21 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3",
+		key: "14bfxa"
+	}],
+	["path", {
+		d: "M21 16v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3",
+		key: "14rx03"
+	}],
+	["path", {
+		d: "M4 12H2",
+		key: "rhcxmi"
+	}],
+	["path", {
+		d: "M10 12H8",
+		key: "s88cx1"
+	}],
+	["path", {
+		d: "M16 12h-2",
+		key: "10asgb"
+	}],
+	["path", {
+		d: "M22 12h-2",
+		key: "14jgyd"
+	}]
+]);
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var ImageOff = createLucideIcon("image-off", [
+	["line", {
+		x1: "2",
+		x2: "22",
+		y1: "2",
+		y2: "22",
+		key: "a6p6uj"
+	}],
+	["path", {
+		d: "M10.41 10.41a2 2 0 1 1-2.83-2.83",
+		key: "1bzlo9"
+	}],
+	["line", {
+		x1: "13.5",
+		x2: "6",
+		y1: "13.5",
+		y2: "21",
+		key: "1q0aeu"
+	}],
+	["line", {
+		x1: "18",
+		x2: "21",
+		y1: "12",
+		y2: "15",
+		key: "5mozeu"
+	}],
+	["path", {
+		d: "M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59",
+		key: "mmje98"
+	}],
+	["path", {
+		d: "M21 15V5a2 2 0 0 0-2-2H9",
+		key: "43el77"
+	}]
+]);
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var RefreshCcw = createLucideIcon("refresh-ccw", [
+	["path", {
+		d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+		key: "14sxne"
+	}],
+	["path", {
+		d: "M3 3v5h5",
+		key: "1xhq8a"
+	}],
+	["path", {
+		d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16",
+		key: "1hlbsb"
+	}],
+	["path", {
+		d: "M16 16h5v5",
+		key: "ccwih5"
+	}]
+]);
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var RotateCcwSquare = createLucideIcon("rotate-ccw-square", [
+	["path", {
+		d: "M20 9V7a2 2 0 0 0-2-2h-6",
+		key: "19z8uc"
+	}],
+	["path", {
+		d: "m15 2-3 3 3 3",
+		key: "177bxs"
+	}],
+	["path", {
+		d: "M20 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2",
+		key: "d36hnl"
+	}]
+]);
+/**
+* @license lucide-react v0.545.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var RotateCwSquare = createLucideIcon("rotate-cw-square", [
+	["path", {
+		d: "M12 5H6a2 2 0 0 0-2 2v3",
+		key: "l96uqu"
+	}],
+	["path", {
+		d: "m9 8 3-3-3-3",
+		key: "1gzgc3"
+	}],
+	["path", {
+		d: "M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2",
+		key: "1w2k5h"
+	}]
+]);
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-collection@1.1.12_@types+react-dom@19.2.3_@types+react@19.2.7__@types+r_112705cebe8c9609e851d37f1704b3cb/node_modules/@radix-ui/react-collection/dist/index.mjs
+function createCollection(name) {
+	const PROVIDER_NAME = name + "CollectionProvider";
+	const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+	const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
+		collectionRef: { current: null },
+		itemMap: /* @__PURE__ */ new Map()
+	});
+	const CollectionProvider = (props) => {
+		const { scope, children } = props;
+		const ref = React$1.useRef(null);
+		const itemMap = React$1.useRef(/* @__PURE__ */ new Map()).current;
+		return /* @__PURE__ */ jsx(CollectionProviderImpl, {
+			scope,
+			itemMap,
+			collectionRef: ref,
+			children
+		});
+	};
+	CollectionProvider.displayName = PROVIDER_NAME;
+	const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+	const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
+	const CollectionSlot = React$1.forwardRef((props, forwardedRef) => {
+		const { scope, children } = props;
+		const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+		const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
+		return /* @__PURE__ */ jsx(CollectionSlotImpl, {
+			ref: composedRefs,
+			children
+		});
+	});
+	CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+	const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+	const ITEM_DATA_ATTR = "data-radix-collection-item";
+	const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
+	const CollectionItemSlot = React$1.forwardRef((props, forwardedRef) => {
+		const { scope, children, ...itemData } = props;
+		const ref = React$1.useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, ref);
+		const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+		React$1.useEffect(() => {
+			context.itemMap.set(ref, {
+				ref,
+				...itemData
+			});
+			return () => void context.itemMap.delete(ref);
+		});
+		return /* @__PURE__ */ jsx(CollectionItemSlotImpl, {
+			[ITEM_DATA_ATTR]: "",
+			ref: composedRefs,
+			children
+		});
+	});
+	CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+	function useCollection(scope) {
+		const context = useCollectionContext(name + "CollectionConsumer", scope);
+		return React$1.useCallback(() => {
+			const collectionNode = context.collectionRef.current;
+			if (!collectionNode) return [];
+			const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+			return Array.from(context.itemMap.values()).sort((a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current));
+		}, [context.collectionRef, context.itemMap]);
+	}
+	return [
+		{
+			Provider: CollectionProvider,
+			Slot: CollectionSlot,
+			ItemSlot: CollectionItemSlot
+		},
+		useCollection,
+		createCollectionScope
+	];
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-direction@1.1.2_@types+react@19.2.7_react@19.2.3/node_modules/@radix-ui/react-direction/dist/index.mjs
+var DirectionContext = React$1.createContext(void 0);
+function useDirection(localDir) {
+	const globalDir = React$1.useContext(DirectionContext);
+	return localDir || globalDir || "ltr";
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-use-is-hydrated@0.1.1_@types+react@19.2.7_react@19.2.3/node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
+var _isHydrated = false;
+function useIsHydrated() {
+	const [isHydrated, setIsHydrated] = React$1.useState(_isHydrated);
+	React$1.useEffect(() => {
+		if (!_isHydrated) {
+			_isHydrated = true;
+			setIsHydrated(true);
+		}
+	}, []);
+	return isHydrated;
+}
+var useReactSyncExternalStore = React$1[" useSyncExternalStore ".trim().toString()];
+function subscribe() {
+	return () => {};
+}
+function useIsHydratedModern() {
+	return useReactSyncExternalStore(subscribe, () => true, () => false);
+}
+var useIsHydrated2 = typeof useReactSyncExternalStore === "function" ? useIsHydratedModern : useIsHydrated;
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-roving-focus@1.1.15_@types+react-dom@19.2.3_@types+react@19.2.7__@types_a3e7181ca1ddf9f417a9ee1ec3a8ec52/node_modules/@radix-ui/react-roving-focus/dist/index.mjs
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS = {
+	bubbles: false,
+	cancelable: true
+};
+var GROUP_NAME$2 = "RovingFocusGroup";
+var [Collection$1, useCollection$1, createCollectionScope$1] = createCollection(GROUP_NAME$2);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(GROUP_NAME$2, [createCollectionScope$1]);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME$2);
+var RovingFocusGroup = React$1.forwardRef((props, forwardedRef) => {
+	return /* @__PURE__ */ jsx(Collection$1.Provider, {
+		scope: props.__scopeRovingFocusGroup,
+		children: /* @__PURE__ */ jsx(Collection$1.Slot, {
+			scope: props.__scopeRovingFocusGroup,
+			children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, {
+				...props,
+				ref: forwardedRef
+			})
+		})
+	});
+});
+RovingFocusGroup.displayName = GROUP_NAME$2;
+var RovingFocusGroupImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, preventScrollOnEntryFocus = false, ...groupProps } = props;
+	const ref = React$1.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	const direction = useDirection(dir);
+	const [currentTabStopId, setCurrentTabStopId] = useControllableState({
+		prop: currentTabStopIdProp,
+		defaultProp: defaultCurrentTabStopId ?? null,
+		onChange: onCurrentTabStopIdChange,
+		caller: GROUP_NAME$2
+	});
+	const [isTabbingBackOut, setIsTabbingBackOut] = React$1.useState(false);
+	const handleEntryFocus = useCallbackRef(onEntryFocus);
+	const getItems = useCollection$1(__scopeRovingFocusGroup);
+	const isClickFocusRef = React$1.useRef(false);
+	const [focusableItemsCount, setFocusableItemsCount] = React$1.useState(0);
+	React$1.useEffect(() => {
+		const node = ref.current;
+		if (node) {
+			node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+			return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+		}
+	}, [handleEntryFocus]);
+	return /* @__PURE__ */ jsx(RovingFocusProvider, {
+		scope: __scopeRovingFocusGroup,
+		orientation,
+		dir: direction,
+		loop,
+		currentTabStopId,
+		onItemFocus: React$1.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
+		onItemShiftTab: React$1.useCallback(() => setIsTabbingBackOut(true), []),
+		onFocusableItemAdd: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
+		onFocusableItemRemove: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
+		children: /* @__PURE__ */ jsx(Primitive.div, {
+			tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+			"data-orientation": orientation,
+			...groupProps,
+			ref: composedRefs,
+			style: {
+				outline: "none",
+				...props.style
+			},
+			onMouseDown: composeEventHandlers(props.onMouseDown, () => {
+				isClickFocusRef.current = true;
+			}),
+			onFocus: composeEventHandlers(props.onFocus, (event) => {
+				const isKeyboardFocus = !isClickFocusRef.current;
+				if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+					const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+					event.currentTarget.dispatchEvent(entryFocusEvent);
+					if (!entryFocusEvent.defaultPrevented) {
+						const items = getItems().filter((item) => item.focusable);
+						focusFirst$1([
+							items.find((item) => item.active),
+							items.find((item) => item.id === currentTabStopId),
+							...items
+						].filter(Boolean).map((item) => item.ref.current), preventScrollOnEntryFocus);
+					}
+				}
+				isClickFocusRef.current = false;
+			}),
+			onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
+		})
+	});
+});
+var ITEM_NAME$2 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, children, ...itemProps } = props;
+	const autoId = useId$1();
+	const id = tabStopId || autoId;
+	const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
+	const isCurrentTabStop = context.currentTabStopId === id;
+	const getItems = useCollection$1(__scopeRovingFocusGroup);
+	const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
+	const isHydrated = useIsHydrated2();
+	useLayoutEffect2(() => {
+		if (!isHydrated || !focusable) return;
+		onFocusableItemAdd();
+		return () => onFocusableItemRemove();
+	}, [
+		isHydrated,
+		focusable,
+		onFocusableItemAdd,
+		onFocusableItemRemove
+	]);
+	React$1.useEffect(() => {
+		if (isHydrated || !focusable) return;
+		onFocusableItemAdd();
+		return () => onFocusableItemRemove();
+	}, [
+		isHydrated,
+		focusable,
+		onFocusableItemAdd,
+		onFocusableItemRemove
+	]);
+	return /* @__PURE__ */ jsx(Collection$1.ItemSlot, {
+		scope: __scopeRovingFocusGroup,
+		id,
+		focusable,
+		active,
+		children: /* @__PURE__ */ jsx(Primitive.span, {
+			tabIndex: isCurrentTabStop ? 0 : -1,
+			"data-orientation": context.orientation,
+			...itemProps,
+			ref: forwardedRef,
+			onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
+				if (!focusable) event.preventDefault();
+				else context.onItemFocus(id);
+			}),
+			onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
+			onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+				if (event.key === "Tab" && event.shiftKey) {
+					context.onItemShiftTab();
+					return;
+				}
+				if (event.target !== event.currentTarget) return;
+				const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+				if (focusIntent !== void 0) {
+					if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+					event.preventDefault();
+					let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
+					if (focusIntent === "last") candidateNodes.reverse();
+					else if (focusIntent === "prev" || focusIntent === "next") {
+						if (focusIntent === "prev") candidateNodes.reverse();
+						const currentIndex = candidateNodes.indexOf(event.currentTarget);
+						candidateNodes = context.loop ? wrapArray$1(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+					}
+					setTimeout(() => focusFirst$1(candidateNodes));
+				}
+			}),
+			children: typeof children === "function" ? children({
+				isCurrentTabStop,
+				hasTabStop: currentTabStopId != null
+			}) : children
+		})
+	});
+});
+RovingFocusGroupItem.displayName = ITEM_NAME$2;
+var MAP_KEY_TO_FOCUS_INTENT = {
+	ArrowLeft: "prev",
+	ArrowUp: "prev",
+	ArrowRight: "next",
+	ArrowDown: "next",
+	PageUp: "first",
+	Home: "first",
+	PageDown: "last",
+	End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+	if (dir !== "rtl") return key;
+	return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+	const key = getDirectionAwareKey(event.key, dir);
+	if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+	if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+	return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst$1(candidates, preventScroll = false) {
+	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	for (const candidate of candidates) {
+		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+		candidate.focus({ preventScroll });
+		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+	}
+}
+function wrapArray$1(array, startIndex) {
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+var Root = RovingFocusGroup;
+var Item = RovingFocusGroupItem;
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-menu@2.1.20_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@1_810a3a7c2c9e98b2fe6701e5c5df7684/node_modules/@radix-ui/react-menu/dist/index.mjs
+var SELECTION_KEYS = ["Enter", " "];
+var FIRST_KEYS = [
+	"ArrowDown",
+	"PageUp",
+	"Home"
+];
+var LAST_KEYS = [
+	"ArrowUp",
+	"PageDown",
+	"End"
+];
+var FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+var SUB_OPEN_KEYS = {
+	ltr: [...SELECTION_KEYS, "ArrowRight"],
+	rtl: [...SELECTION_KEYS, "ArrowLeft"]
+};
+var SUB_CLOSE_KEYS = {
+	ltr: ["ArrowLeft"],
+	rtl: ["ArrowRight"]
+};
+var MENU_NAME = "Menu";
+var [Collection, useCollection, createCollectionScope] = createCollection(MENU_NAME);
+var [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [
+	createCollectionScope,
+	createPopperScope,
+	createRovingFocusGroupScope
+]);
+var usePopperScope = createPopperScope();
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [MenuProvider, useMenuContext] = createMenuContext(MENU_NAME);
+var [MenuRootProvider, useMenuRootContext] = createMenuContext(MENU_NAME);
+var Menu = (props) => {
+	const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;
+	const popperScope = usePopperScope(__scopeMenu);
+	const [content, setContent] = React$1.useState(null);
+	const isUsingKeyboardRef = React$1.useRef(false);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	const direction = useDirection(dir);
+	React$1.useEffect(() => {
+		const handleKeyDown = () => {
+			isUsingKeyboardRef.current = true;
+			document.addEventListener("pointerdown", handlePointer, {
+				capture: true,
+				once: true
+			});
+			document.addEventListener("pointermove", handlePointer, {
+				capture: true,
+				once: true
+			});
+		};
+		const handlePointer = () => isUsingKeyboardRef.current = false;
+		document.addEventListener("keydown", handleKeyDown, { capture: true });
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, { capture: true });
+			document.removeEventListener("pointerdown", handlePointer, { capture: true });
+			document.removeEventListener("pointermove", handlePointer, { capture: true });
+		};
+	}, []);
+	React$1.useEffect(() => {
+		if (!open) return;
+		const handleBlur = () => handleOpenChange(false);
+		window.addEventListener("blur", handleBlur);
+		return () => window.removeEventListener("blur", handleBlur);
+	}, [open, handleOpenChange]);
+	return /* @__PURE__ */ jsx(Root2$1, {
+		...popperScope,
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			scope: __scopeMenu,
+			open,
+			onOpenChange: handleOpenChange,
+			content,
+			onContentChange: setContent,
+			children: /* @__PURE__ */ jsx(MenuRootProvider, {
+				scope: __scopeMenu,
+				onClose: React$1.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+				isUsingKeyboardRef,
+				dir: direction,
+				modal,
+				children
+			})
+		})
+	});
+};
+Menu.displayName = MENU_NAME;
+var ANCHOR_NAME = "MenuAnchor";
+var MenuAnchor = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, ...anchorProps } = props;
+	const popperScope = usePopperScope(__scopeMenu);
+	return /* @__PURE__ */ jsx(Anchor, {
+		...popperScope,
+		...anchorProps,
+		ref: forwardedRef
+	});
+});
+MenuAnchor.displayName = ANCHOR_NAME;
+var PORTAL_NAME$1 = "MenuPortal";
+var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME$1, { forceMount: void 0 });
+var MenuPortal = (props) => {
+	const { __scopeMenu, forceMount, children, container } = props;
+	const context = useMenuContext(PORTAL_NAME$1, __scopeMenu);
+	return /* @__PURE__ */ jsx(PortalProvider, {
+		scope: __scopeMenu,
+		forceMount,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Portal$1, {
+				asChild: true,
+				container,
+				children
+			})
+		})
+	});
+};
+MenuPortal.displayName = PORTAL_NAME$1;
+var CONTENT_NAME$1 = "MenuContent";
+var [MenuContentProvider, useMenuContentContext] = createMenuContext(CONTENT_NAME$1);
+var MenuContent = React$1.forwardRef((props, forwardedRef) => {
+	const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
+	const { forceMount = portalContext.forceMount, ...contentProps } = props;
+	const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeMenu,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope: props.__scopeMenu,
+				children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, {
+					...contentProps,
+					ref: forwardedRef
+				}) : /* @__PURE__ */ jsx(MenuRootContentNonModal, {
+					...contentProps,
+					ref: forwardedRef
+				})
+			})
+		})
+	});
+});
+var MenuRootContentModal = React$1.forwardRef((props, forwardedRef) => {
+	const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+	const ref = React$1.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	React$1.useEffect(() => {
+		const content = ref.current;
+		if (content) return hideOthers(content);
+	}, []);
+	return /* @__PURE__ */ jsx(MenuContentImpl, {
+		...props,
+		ref: composedRefs,
+		trapFocus: context.open,
+		disableOutsidePointerEvents: context.open,
+		disableOutsideScroll: true,
+		onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkForDefaultPrevented: false }),
+		onDismiss: () => context.onOpenChange(false)
+	});
+});
+var MenuRootContentNonModal = React$1.forwardRef((props, forwardedRef) => {
+	const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+	return /* @__PURE__ */ jsx(MenuContentImpl, {
+		...props,
+		ref: forwardedRef,
+		trapFocus: false,
+		disableOutsidePointerEvents: false,
+		disableOutsideScroll: false,
+		onDismiss: () => context.onOpenChange(false)
+	});
+});
+var Slot = createSlot("MenuContent.ScrollLock");
+var MenuContentImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, loop = false, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, disableOutsideScroll, ...contentProps } = props;
+	const context = useMenuContext(CONTENT_NAME$1, __scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME$1, __scopeMenu);
+	const popperScope = usePopperScope(__scopeMenu);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+	const getItems = useCollection(__scopeMenu);
+	const [currentItemId, setCurrentItemId] = React$1.useState(null);
+	const contentRef = React$1.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
+	const timerRef = React$1.useRef(0);
+	const searchRef = React$1.useRef("");
+	const pointerGraceTimerRef = React$1.useRef(0);
+	const pointerGraceIntentRef = React$1.useRef(null);
+	const pointerDirRef = React$1.useRef("right");
+	const lastPointerXRef = React$1.useRef(0);
+	const ScrollLockWrapper = disableOutsideScroll ? ReactRemoveScroll : React$1.Fragment;
+	const scrollLockWrapperProps = disableOutsideScroll ? {
+		as: Slot,
+		allowPinchZoom: true
+	} : void 0;
+	const handleTypeaheadSearch = (key) => {
+		const search = searchRef.current + key;
+		const items = getItems().filter((item) => !item.disabled);
+		const currentItem = document.activeElement;
+		const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+		const nextMatch = getNextMatch(items.map((item) => item.textValue), search, currentMatch);
+		const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+		(function updateSearch(value) {
+			searchRef.current = value;
+			window.clearTimeout(timerRef.current);
+			if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
+		})(search);
+		if (newItem) setTimeout(() => newItem.focus());
+	};
+	React$1.useEffect(() => {
+		return () => window.clearTimeout(timerRef.current);
+	}, []);
+	useFocusGuards();
+	const isPointerMovingToSubmenu = React$1.useCallback((event) => {
+		return pointerDirRef.current === pointerGraceIntentRef.current?.side && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+	}, []);
+	return /* @__PURE__ */ jsx(MenuContentProvider, {
+		scope: __scopeMenu,
+		searchRef,
+		onItemEnter: React$1.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) event.preventDefault();
+		}, [isPointerMovingToSubmenu]),
+		onItemLeave: React$1.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) return;
+			contentRef.current?.focus();
+			setCurrentItemId(null);
+		}, [isPointerMovingToSubmenu]),
+		onTriggerLeave: React$1.useCallback((event) => {
+			if (isPointerMovingToSubmenu(event)) event.preventDefault();
+		}, [isPointerMovingToSubmenu]),
+		pointerGraceTimerRef,
+		onPointerGraceIntentChange: React$1.useCallback((intent) => {
+			pointerGraceIntentRef.current = intent;
+		}, []),
+		children: /* @__PURE__ */ jsx(ScrollLockWrapper, {
+			...scrollLockWrapperProps,
+			children: /* @__PURE__ */ jsx(FocusScope, {
+				asChild: true,
+				trapped: trapFocus,
+				onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
+					event.preventDefault();
+					contentRef.current?.focus({ preventScroll: true });
+				}),
+				onUnmountAutoFocus: onCloseAutoFocus,
+				children: /* @__PURE__ */ jsx(DismissableLayer, {
+					asChild: true,
+					disableOutsidePointerEvents,
+					onEscapeKeyDown,
+					onPointerDownOutside,
+					onFocusOutside,
+					onInteractOutside,
+					onDismiss,
+					children: /* @__PURE__ */ jsx(Root, {
+						asChild: true,
+						...rovingFocusGroupScope,
+						dir: rootContext.dir,
+						orientation: "vertical",
+						loop,
+						currentTabStopId: currentItemId,
+						onCurrentTabStopIdChange: setCurrentItemId,
+						onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
+							if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+						}),
+						preventScrollOnEntryFocus: true,
+						children: /* @__PURE__ */ jsx(Content, {
+							role: "menu",
+							"aria-orientation": "vertical",
+							"data-state": getOpenState(context.open),
+							"data-radix-menu-content": "",
+							dir: rootContext.dir,
+							...popperScope,
+							...contentProps,
+							ref: composedRefs,
+							style: {
+								outline: "none",
+								...contentProps.style
+							},
+							onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
+								const isKeyDownInside = event.target.closest("[data-radix-menu-content]") === event.currentTarget;
+								const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+								const isCharacterKey = event.key.length === 1;
+								if (isKeyDownInside) {
+									if (event.key === "Tab") event.preventDefault();
+									if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+								}
+								const content = contentRef.current;
+								if (event.target !== content) return;
+								if (!FIRST_LAST_KEYS.includes(event.key)) return;
+								event.preventDefault();
+								const candidateNodes = getItems().filter((item) => !item.disabled).map((item) => item.ref.current);
+								if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+								focusFirst(candidateNodes);
+							}),
+							onBlur: composeEventHandlers(props.onBlur, (event) => {
+								if (!event.currentTarget.contains(event.target)) {
+									window.clearTimeout(timerRef.current);
+									searchRef.current = "";
+								}
+							}),
+							onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+								const target = event.target;
+								const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+								if (event.currentTarget.contains(target) && pointerXHasChanged) {
+									const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+									pointerDirRef.current = newDir;
+									lastPointerXRef.current = event.clientX;
+								}
+							}))
+						})
+					})
+				})
+			})
+		})
+	});
+});
+MenuContent.displayName = CONTENT_NAME$1;
+var GROUP_NAME$1 = "MenuGroup";
+var MenuGroup = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, ...groupProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		role: "group",
+		...groupProps,
+		ref: forwardedRef
+	});
+});
+MenuGroup.displayName = GROUP_NAME$1;
+var LABEL_NAME$1 = "MenuLabel";
+var MenuLabel = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, ...labelProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		...labelProps,
+		ref: forwardedRef
+	});
+});
+MenuLabel.displayName = LABEL_NAME$1;
+var ITEM_NAME$1 = "MenuItem";
+var ITEM_SELECT = "menu.itemSelect";
+var MenuItem = React$1.forwardRef((props, forwardedRef) => {
+	const { disabled = false, onSelect, ...itemProps } = props;
+	const ref = React$1.useRef(null);
+	const rootContext = useMenuRootContext(ITEM_NAME$1, props.__scopeMenu);
+	const contentContext = useMenuContentContext(ITEM_NAME$1, props.__scopeMenu);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	const isPointerDownRef = React$1.useRef(false);
+	const handleSelect = () => {
+		const menuItem = ref.current;
+		if (!disabled && menuItem) {
+			const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+				bubbles: true,
+				cancelable: true
+			});
+			menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+			dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
+			if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
+			else rootContext.onClose();
+		}
+	};
+	return /* @__PURE__ */ jsx(MenuItemImpl, {
+		...itemProps,
+		ref: composedRefs,
+		disabled,
+		onClick: composeEventHandlers(props.onClick, handleSelect),
+		onPointerDown: (event) => {
+			props.onPointerDown?.(event);
+			isPointerDownRef.current = true;
+		},
+		onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+			if (!isPointerDownRef.current) event.currentTarget?.click();
+		}),
+		onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+			if (disabled || event.target !== event.currentTarget) return;
+			if (contentContext.searchRef.current !== "" && event.key === " ") return;
+			if (SELECTION_KEYS.includes(event.key)) {
+				event.currentTarget.click();
+				event.preventDefault();
+			}
+		})
+	});
+});
+MenuItem.displayName = ITEM_NAME$1;
+var MenuItemImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;
+	const contentContext = useMenuContentContext(ITEM_NAME$1, __scopeMenu);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);
+	const ref = React$1.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	const [isFocused, setIsFocused] = React$1.useState(false);
+	const [textContent, setTextContent] = React$1.useState("");
+	React$1.useEffect(() => {
+		const menuItem = ref.current;
+		if (menuItem) setTextContent((menuItem.textContent ?? "").trim());
+	}, [itemProps.children]);
+	return /* @__PURE__ */ jsx(Collection.ItemSlot, {
+		scope: __scopeMenu,
+		disabled,
+		textValue: textValue ?? textContent,
+		children: /* @__PURE__ */ jsx(Item, {
+			asChild: true,
+			...rovingFocusGroupScope,
+			focusable: !disabled,
+			children: /* @__PURE__ */ jsx(Primitive.div, {
+				role: "menuitem",
+				"data-highlighted": isFocused ? "" : void 0,
+				"aria-disabled": disabled || void 0,
+				"data-disabled": disabled ? "" : void 0,
+				...itemProps,
+				ref: composedRefs,
+				onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+					if (disabled) contentContext.onItemLeave(event);
+					else {
+						contentContext.onItemEnter(event);
+						if (!event.defaultPrevented) event.currentTarget.focus({ preventScroll: true });
+					}
+				})),
+				onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse((event) => contentContext.onItemLeave(event))),
+				onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+				onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
+			})
+		})
+	});
+});
+var CHECKBOX_ITEM_NAME$1 = "MenuCheckboxItem";
+var MenuCheckboxItem = React$1.forwardRef((props, forwardedRef) => {
+	const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
+	return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+		scope: props.__scopeMenu,
+		checked,
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			role: "menuitemcheckbox",
+			"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+			...checkboxItemProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(checked),
+			onSelect: composeEventHandlers(checkboxItemProps.onSelect, () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked), { checkForDefaultPrevented: false })
+		})
+	});
+});
+MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME$1;
+var RADIO_GROUP_NAME$1 = "MenuRadioGroup";
+var [RadioGroupProvider, useRadioGroupContext] = createMenuContext(RADIO_GROUP_NAME$1, {
+	value: void 0,
+	onValueChange: () => {}
+});
+var MenuRadioGroup = React$1.forwardRef((props, forwardedRef) => {
+	const { value, onValueChange, ...groupProps } = props;
+	const handleValueChange = useCallbackRef(onValueChange);
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		scope: props.__scopeMenu,
+		value,
+		onValueChange: handleValueChange,
+		children: /* @__PURE__ */ jsx(MenuGroup, {
+			...groupProps,
+			ref: forwardedRef
+		})
+	});
+});
+MenuRadioGroup.displayName = RADIO_GROUP_NAME$1;
+var RADIO_ITEM_NAME$1 = "MenuRadioItem";
+var MenuRadioItem = React$1.forwardRef((props, forwardedRef) => {
+	const { value, ...radioItemProps } = props;
+	const context = useRadioGroupContext(RADIO_ITEM_NAME$1, props.__scopeMenu);
+	const checked = value === context.value;
+	return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+		scope: props.__scopeMenu,
+		checked,
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			role: "menuitemradio",
+			"aria-checked": checked,
+			...radioItemProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(checked),
+			onSelect: composeEventHandlers(radioItemProps.onSelect, () => context.onValueChange?.(value), { checkForDefaultPrevented: false })
+		})
+	});
+});
+MenuRadioItem.displayName = RADIO_ITEM_NAME$1;
+var ITEM_INDICATOR_NAME = "MenuItemIndicator";
+var [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext(ITEM_INDICATOR_NAME, { checked: false });
+var MenuItemIndicator = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
+	const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
+		children: /* @__PURE__ */ jsx(Primitive.span, {
+			...itemIndicatorProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(indicatorContext.checked)
+		})
+	});
+});
+MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+var SEPARATOR_NAME$1 = "MenuSeparator";
+var MenuSeparator = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, ...separatorProps } = props;
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		...separatorProps,
+		ref: forwardedRef
+	});
+});
+MenuSeparator.displayName = SEPARATOR_NAME$1;
+var ARROW_NAME$1 = "MenuArrow";
+var MenuArrow = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeMenu, ...arrowProps } = props;
+	const popperScope = usePopperScope(__scopeMenu);
+	return /* @__PURE__ */ jsx(Arrow, {
+		...popperScope,
+		...arrowProps,
+		ref: forwardedRef
+	});
+});
+MenuArrow.displayName = ARROW_NAME$1;
+var SUB_NAME$1 = "MenuSub";
+var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME$1);
+var MenuSub = (props) => {
+	const { __scopeMenu, children, open = false, onOpenChange } = props;
+	const parentMenuContext = useMenuContext(SUB_NAME$1, __scopeMenu);
+	const popperScope = usePopperScope(__scopeMenu);
+	const [trigger, setTrigger] = React$1.useState(null);
+	const [content, setContent] = React$1.useState(null);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	React$1.useEffect(() => {
+		if (parentMenuContext.open === false) handleOpenChange(false);
+		return () => handleOpenChange(false);
+	}, [parentMenuContext.open, handleOpenChange]);
+	return /* @__PURE__ */ jsx(Root2$1, {
+		...popperScope,
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			scope: __scopeMenu,
+			open,
+			onOpenChange: handleOpenChange,
+			content,
+			onContentChange: setContent,
+			children: /* @__PURE__ */ jsx(MenuSubProvider, {
+				scope: __scopeMenu,
+				contentId: useId$1(),
+				triggerId: useId$1(),
+				trigger,
+				onTriggerChange: setTrigger,
+				children
+			})
+		})
+	});
+};
+MenuSub.displayName = SUB_NAME$1;
+var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
+var MenuSubTrigger = React$1.forwardRef((props, forwardedRef) => {
+	const context = useMenuContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+	const rootContext = useMenuRootContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+	const subContext = useMenuSubContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+	const contentContext = useMenuContentContext(SUB_TRIGGER_NAME$1, props.__scopeMenu);
+	const openTimerRef = React$1.useRef(null);
+	const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+	const scope = { __scopeMenu: props.__scopeMenu };
+	const clearOpenTimer = React$1.useCallback(() => {
+		if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+		openTimerRef.current = null;
+	}, []);
+	React$1.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+	React$1.useEffect(() => {
+		const pointerGraceTimer = pointerGraceTimerRef.current;
+		return () => {
+			window.clearTimeout(pointerGraceTimer);
+			onPointerGraceIntentChange(null);
+		};
+	}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+	const composedRefs = useComposedRefs(forwardedRef, subContext.onTriggerChange);
+	return /* @__PURE__ */ jsx(MenuAnchor, {
+		asChild: true,
+		...scope,
+		children: /* @__PURE__ */ jsx(MenuItemImpl, {
+			id: subContext.triggerId,
+			"aria-haspopup": "menu",
+			"aria-expanded": context.open,
+			"aria-controls": context.open ? subContext.contentId : void 0,
+			"data-state": getOpenState(context.open),
+			...props,
+			ref: composedRefs,
+			onClick: (event) => {
+				props.onClick?.(event);
+				if (props.disabled || event.defaultPrevented) return;
+				event.currentTarget.focus();
+				if (!context.open) context.onOpenChange(true);
+			},
+			onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+				contentContext.onItemEnter(event);
+				if (event.defaultPrevented) return;
+				if (!props.disabled && !context.open && !openTimerRef.current) {
+					contentContext.onPointerGraceIntentChange(null);
+					openTimerRef.current = window.setTimeout(() => {
+						context.onOpenChange(true);
+						clearOpenTimer();
+					}, 100);
+				}
+			})),
+			onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse((event) => {
+				clearOpenTimer();
+				const contentRect = context.content?.getBoundingClientRect();
+				if (contentRect) {
+					const side = context.content?.dataset.side;
+					const rightSide = side === "right";
+					const bleed = rightSide ? -5 : 5;
+					const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+					const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+					contentContext.onPointerGraceIntentChange({
+						area: [
+							{
+								x: event.clientX + bleed,
+								y: event.clientY
+							},
+							{
+								x: contentNearEdge,
+								y: contentRect.top
+							},
+							{
+								x: contentFarEdge,
+								y: contentRect.top
+							},
+							{
+								x: contentFarEdge,
+								y: contentRect.bottom
+							},
+							{
+								x: contentNearEdge,
+								y: contentRect.bottom
+							}
+						],
+						side
+					});
+					window.clearTimeout(pointerGraceTimerRef.current);
+					pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
+				} else {
+					contentContext.onTriggerLeave(event);
+					if (event.defaultPrevented) return;
+					contentContext.onPointerGraceIntentChange(null);
+				}
+			})),
+			onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+				if (props.disabled || event.target !== event.currentTarget) return;
+				if (contentContext.searchRef.current !== "" && event.key === " ") return;
+				if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
+					context.onOpenChange(true);
+					context.content?.focus();
+					event.preventDefault();
+				}
+			})
+		})
+	});
+});
+MenuSubTrigger.displayName = SUB_TRIGGER_NAME$1;
+var SUB_CONTENT_NAME$1 = "MenuSubContent";
+var MenuSubContent = React$1.forwardRef((props, forwardedRef) => {
+	const portalContext = usePortalContext(CONTENT_NAME$1, props.__scopeMenu);
+	const { forceMount = portalContext.forceMount, align = "start", ...subContentProps } = props;
+	const context = useMenuContext(CONTENT_NAME$1, props.__scopeMenu);
+	const rootContext = useMenuRootContext(CONTENT_NAME$1, props.__scopeMenu);
+	const subContext = useMenuSubContext(SUB_CONTENT_NAME$1, props.__scopeMenu);
+	const ref = React$1.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, ref);
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeMenu,
+		children: /* @__PURE__ */ jsx(Presence, {
+			present: forceMount || context.open,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope: props.__scopeMenu,
+				children: /* @__PURE__ */ jsx(MenuContentImpl, {
+					id: subContext.contentId,
+					"aria-labelledby": subContext.triggerId,
+					...subContentProps,
+					ref: composedRefs,
+					align,
+					side: rootContext.dir === "rtl" ? "left" : "right",
+					disableOutsidePointerEvents: false,
+					disableOutsideScroll: false,
+					trapFocus: false,
+					onOpenAutoFocus: (event) => {
+						if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();
+						event.preventDefault();
+					},
+					onCloseAutoFocus: (event) => event.preventDefault(),
+					onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
+						if (event.target !== subContext.trigger) context.onOpenChange(false);
+					}),
+					onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
+						rootContext.onClose();
+						event.preventDefault();
+					}),
+					onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+						const isKeyDownInside = event.currentTarget.contains(event.target);
+						const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
+						if (isKeyDownInside && isCloseKey) {
+							context.onOpenChange(false);
+							subContext.trigger?.focus();
+							event.preventDefault();
+						}
+					})
+				})
+			})
+		})
+	});
+});
+MenuSubContent.displayName = SUB_CONTENT_NAME$1;
+function getOpenState(open) {
+	return open ? "open" : "closed";
+}
+function isIndeterminate(checked) {
+	return checked === "indeterminate";
+}
+function getCheckedState(checked) {
+	return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function focusFirst(candidates) {
+	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	for (const candidate of candidates) {
+		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+		candidate.focus();
+		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+	}
+}
+function wrapArray(array, startIndex) {
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getNextMatch(values, search, currentMatch) {
+	const normalizedSearch = search.length > 1 && Array.from(search).every((char) => char === search[0]) ? search[0] : search;
+	const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+	let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+	if (normalizedSearch.length === 1) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+	const nextMatch = wrappedValues.find((value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+	return nextMatch !== currentMatch ? nextMatch : void 0;
+}
+function isPointInPolygon(point, polygon) {
+	const { x, y } = point;
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const ii = polygon[i];
+		const jj = polygon[j];
+		const xi = ii.x;
+		const yi = ii.y;
+		const xj = jj.x;
+		const yj = jj.y;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+	}
+	return inside;
+}
+function isPointerInGraceArea(event, area) {
+	if (!area) return false;
+	return isPointInPolygon({
+		x: event.clientX,
+		y: event.clientY
+	}, area);
+}
+function whenMouse(handler) {
+	return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
+}
+var Root3 = Menu;
+var Anchor2 = MenuAnchor;
+var Portal = MenuPortal;
+var Content2$1 = MenuContent;
+var Group = MenuGroup;
+var Label = MenuLabel;
+var Item2$1 = MenuItem;
+var CheckboxItem = MenuCheckboxItem;
+var RadioGroup = MenuRadioGroup;
+var RadioItem = MenuRadioItem;
+var ItemIndicator = MenuItemIndicator;
+var Separator = MenuSeparator;
+var Arrow2 = MenuArrow;
+var Sub = MenuSub;
+var SubTrigger = MenuSubTrigger;
+var SubContent = MenuSubContent;
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-context-menu@2.3.3_@types+react-dom@19.2.3_@types+react@19.2.7__@types+_a190ddd7d7713593b8ead5b8958933b1/node_modules/@radix-ui/react-context-menu/dist/index.mjs
+var CONTEXT_MENU_NAME = "ContextMenu";
+var [createContextMenuContext, createContextMenuScope] = createContextScope(CONTEXT_MENU_NAME, [createMenuScope]);
+var useMenuScope = createMenuScope();
+var [ContextMenuProvider, useContextMenuContext] = createContextMenuContext(CONTEXT_MENU_NAME);
+var ContextMenu$1 = (props) => {
+	const { __scopeContextMenu, children, onOpenChange, open: openProp, dir, modal = true } = props;
+	const hasInteractedRef = React$1.useRef(false);
+	{
+		const hasWarnedRef = React$1.useRef(false);
+		React$1.useEffect(() => {
+			if (openProp === true && !hasInteractedRef.current && !hasWarnedRef.current) {
+				hasWarnedRef.current = true;
+				console.warn("ContextMenu: The `open` prop has been set to `true` before the user has interacted with the trigger, so its position is indeterminate. This is likely unintended and will result in the menu being anchored to the top-left corner of the viewport.");
+			}
+		}, [openProp]);
+	}
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: false,
+		onChange: onOpenChange,
+		caller: CONTEXT_MENU_NAME
+	});
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(ContextMenuProvider, {
+		scope: __scopeContextMenu,
+		open,
+		onOpenChange: setOpen,
+		modal,
+		hasInteractedRef,
+		children: /* @__PURE__ */ jsx(Root3, {
+			...menuScope,
+			dir,
+			open,
+			onOpenChange: setOpen,
+			modal,
+			children
+		})
+	});
+};
+ContextMenu$1.displayName = CONTEXT_MENU_NAME;
+var TRIGGER_NAME = "ContextMenuTrigger";
+var ContextMenuTrigger$1 = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, disabled = false, ...triggerProps } = props;
+	const context = useContextMenuContext(TRIGGER_NAME, __scopeContextMenu);
+	const menuScope = useMenuScope(__scopeContextMenu);
+	const [point, setPoint] = React$1.useState({
+		x: 0,
+		y: 0
+	});
+	const virtualRef = React$1.useMemo(() => ({ current: { getBoundingClientRect: () => DOMRect.fromRect({
+		width: 0,
+		height: 0,
+		...point
+	}) } }), [point]);
+	const longPressTimerRef = React$1.useRef(0);
+	const clearLongPress = React$1.useCallback(() => window.clearTimeout(longPressTimerRef.current), []);
+	const handleOpen = (event) => {
+		context.hasInteractedRef.current = true;
+		setPoint({
+			x: event.clientX,
+			y: event.clientY
+		});
+		context.onOpenChange(true);
+	};
+	React$1.useEffect(() => clearLongPress, [clearLongPress]);
+	React$1.useEffect(() => void (disabled && clearLongPress()), [disabled, clearLongPress]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Anchor2, {
+		...menuScope,
+		virtualRef
+	}), /* @__PURE__ */ jsx(Primitive.span, {
+		"data-state": context.open ? "open" : "closed",
+		"data-disabled": disabled ? "" : void 0,
+		...triggerProps,
+		ref: forwardedRef,
+		style: {
+			WebkitTouchCallout: "none",
+			...props.style
+		},
+		onContextMenu: disabled ? props.onContextMenu : composeEventHandlers(props.onContextMenu, (event) => {
+			clearLongPress();
+			handleOpen(event);
+			event.preventDefault();
+		}),
+		onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, whenTouchOrPen((event) => {
+			clearLongPress();
+			if (context.open) context.onOpenChange(false);
+			longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700);
+		})),
+		onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, whenTouchOrPen(clearLongPress)),
+		onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, whenTouchOrPen(clearLongPress)),
+		onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, whenTouchOrPen(clearLongPress))
+	})] });
+});
+ContextMenuTrigger$1.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "ContextMenuPortal";
+var ContextMenuPortal = (props) => {
+	const { __scopeContextMenu, ...portalProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Portal, {
+		...menuScope,
+		...portalProps
+	});
+};
+ContextMenuPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "ContextMenuContent";
+var ContextMenuContent$1 = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...contentProps } = props;
+	const context = useContextMenuContext(CONTENT_NAME, __scopeContextMenu);
+	const menuScope = useMenuScope(__scopeContextMenu);
+	const hasInteractedOutsideRef = React$1.useRef(false);
+	return /* @__PURE__ */ jsx(Content2$1, {
+		...menuScope,
+		...contentProps,
+		ref: forwardedRef,
+		side: "right",
+		sideOffset: 2,
+		align: "start",
+		onCloseAutoFocus: (event) => {
+			props.onCloseAutoFocus?.(event);
+			if (!event.defaultPrevented && hasInteractedOutsideRef.current) event.preventDefault();
+			hasInteractedOutsideRef.current = false;
+		},
+		onInteractOutside: (event) => {
+			props.onInteractOutside?.(event);
+			if (!event.defaultPrevented && !context.modal) hasInteractedOutsideRef.current = true;
+		},
+		style: {
+			...props.style,
+			"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+			"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
+			"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
+			"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
+			"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
+		}
+	});
+});
+ContextMenuContent$1.displayName = CONTENT_NAME;
+var GROUP_NAME = "ContextMenuGroup";
+var ContextMenuGroup = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...groupProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Group, {
+		...menuScope,
+		...groupProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuGroup.displayName = GROUP_NAME;
+var LABEL_NAME = "ContextMenuLabel";
+var ContextMenuLabel = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...labelProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Label, {
+		...menuScope,
+		...labelProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuLabel.displayName = LABEL_NAME;
+var ITEM_NAME = "ContextMenuItem";
+var ContextMenuItem$1 = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...itemProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Item2$1, {
+		...menuScope,
+		...itemProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuItem$1.displayName = ITEM_NAME;
+var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
+var ContextMenuCheckboxItem = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...checkboxItemProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(CheckboxItem, {
+		...menuScope,
+		...checkboxItemProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
+var ContextMenuRadioGroup = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...radioGroupProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		...menuScope,
+		...radioGroupProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+var RADIO_ITEM_NAME = "ContextMenuRadioItem";
+var ContextMenuRadioItem = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...radioItemProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(RadioItem, {
+		...menuScope,
+		...radioItemProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuRadioItem.displayName = RADIO_ITEM_NAME;
+var INDICATOR_NAME = "ContextMenuItemIndicator";
+var ContextMenuItemIndicator = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...itemIndicatorProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(ItemIndicator, {
+		...menuScope,
+		...itemIndicatorProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuItemIndicator.displayName = INDICATOR_NAME;
+var SEPARATOR_NAME = "ContextMenuSeparator";
+var ContextMenuSeparator = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...separatorProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Separator, {
+		...menuScope,
+		...separatorProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuSeparator.displayName = SEPARATOR_NAME;
+var ARROW_NAME = "ContextMenuArrow";
+var ContextMenuArrow = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...arrowProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(Arrow2, {
+		...menuScope,
+		...arrowProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuArrow.displayName = ARROW_NAME;
+var SUB_NAME = "ContextMenuSub";
+var ContextMenuSub = (props) => {
+	const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen ?? false,
+		onChange: onOpenChange,
+		caller: SUB_NAME
+	});
+	return /* @__PURE__ */ jsx(Sub, {
+		...menuScope,
+		open,
+		onOpenChange: setOpen,
+		children
+	});
+};
+ContextMenuSub.displayName = SUB_NAME;
+var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
+var ContextMenuSubTrigger = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...triggerItemProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(SubTrigger, {
+		...menuScope,
+		...triggerItemProps,
+		ref: forwardedRef
+	});
+});
+ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+var SUB_CONTENT_NAME = "ContextMenuSubContent";
+var ContextMenuSubContent = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeContextMenu, ...subContentProps } = props;
+	const menuScope = useMenuScope(__scopeContextMenu);
+	return /* @__PURE__ */ jsx(SubContent, {
+		...menuScope,
+		...subContentProps,
+		ref: forwardedRef,
+		style: {
+			...props.style,
+			"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
+			"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
+			"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
+			"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
+			"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
+		}
+	});
+});
+ContextMenuSubContent.displayName = SUB_CONTENT_NAME;
+function whenTouchOrPen(handler) {
+	return (event) => event.pointerType !== "mouse" ? handler(event) : void 0;
+}
+var Root2 = ContextMenu$1;
+var Trigger = ContextMenuTrigger$1;
+var Portal2 = ContextMenuPortal;
+var Content2 = ContextMenuContent$1;
+var Item2 = ContextMenuItem$1;
+//#endregion
+//#region ../ui/src/components/primitives/context-menu.tsx
+var menuContentStyles = cn("z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md [-webkit-app-region:no-drag]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95");
+cn("z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg [-webkit-app-region:no-drag]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95");
+var menuItemVariants = cva(cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none", "focus:bg-accent focus:text-accent-foreground", "data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&_svg:not([class*='text-'])]:text-muted-foreground"), {
+	variants: {
+		variant: {
+			default: "",
+			destructive: "text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20 data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive!"
+		},
+		inset: {
+			true: "pl-8",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		inset: false
+	}
+});
+var ContextMenuOpeningPointerUpGuardContext = React$1.createContext(null);
+function ContextMenu({ onOpenChange, ...props }) {
+	const shouldStopOpeningPointerUpRef = React$1.useRef(false);
+	const clearOpeningPointerUpListenerRef = React$1.useRef(null);
+	const clearOpeningPointerUpTimerRef = React$1.useRef(null);
+	const clearOpeningPointerUp = React$1.useCallback(() => {
+		shouldStopOpeningPointerUpRef.current = false;
+		clearOpeningPointerUpListenerRef.current?.();
+		clearOpeningPointerUpListenerRef.current = null;
+		if (clearOpeningPointerUpTimerRef.current !== null) {
+			window.clearTimeout(clearOpeningPointerUpTimerRef.current);
+			clearOpeningPointerUpTimerRef.current = null;
+		}
+	}, []);
+	const pointerUpGuard = React$1.useMemo(() => ({
+		consumeOpeningPointerUp: () => {
+			const shouldStop = shouldStopOpeningPointerUpRef.current;
+			clearOpeningPointerUp();
+			return shouldStop;
+		},
+		markOpeningPointerUp: () => {
+			shouldStopOpeningPointerUpRef.current = true;
+			clearOpeningPointerUpListenerRef.current?.();
+			const handleOpeningPointerUp = () => clearOpeningPointerUp();
+			window.addEventListener("pointerup", handleOpeningPointerUp, { once: true });
+			clearOpeningPointerUpListenerRef.current = () => {
+				window.removeEventListener("pointerup", handleOpeningPointerUp);
+			};
+			if (clearOpeningPointerUpTimerRef.current !== null) window.clearTimeout(clearOpeningPointerUpTimerRef.current);
+			clearOpeningPointerUpTimerRef.current = window.setTimeout(clearOpeningPointerUp, 1e3);
+		}
+	}), [clearOpeningPointerUp]);
+	const handleOpenChange = React$1.useCallback((open) => {
+		if (!open) clearOpeningPointerUp();
+		onOpenChange?.(open);
+	}, [clearOpeningPointerUp, onOpenChange]);
+	React$1.useEffect(() => clearOpeningPointerUp, [clearOpeningPointerUp]);
+	return /* @__PURE__ */ jsx(ContextMenuOpeningPointerUpGuardContext, {
+		value: pointerUpGuard,
+		children: /* @__PURE__ */ jsx(Root2, {
+			"data-slot": "context-menu",
+			onOpenChange: handleOpenChange,
+			...props
+		})
+	});
+}
+function ContextMenuTrigger({ onContextMenu, disabled, ...props }) {
+	const pointerUpGuard = React$1.use(ContextMenuOpeningPointerUpGuardContext);
+	return /* @__PURE__ */ jsx(Trigger, {
+		"data-slot": "context-menu-trigger",
+		disabled,
+		onContextMenu: (event) => {
+			if (!disabled) pointerUpGuard?.markOpeningPointerUp();
+			onContextMenu?.(event);
+		},
+		...props
+	});
+}
+function stopOpeningPointerUp(event, pointerUpGuard) {
+	const isOpeningPointerUp = pointerUpGuard?.consumeOpeningPointerUp() ?? false;
+	if (event.button !== 2 && !isOpeningPointerUp) return;
+	event.preventDefault();
+	event.stopPropagation();
+}
+function ContextMenuContent({ className, onPointerUpCapture, portalContainer, ...props }) {
+	const pointerUpGuard = React$1.use(ContextMenuOpeningPointerUpGuardContext);
+	const defaultPortalContainer = usePortalContainer();
+	return /* @__PURE__ */ jsx(Portal2, {
+		container: portalContainer ?? defaultPortalContainer ?? void 0,
+		children: /* @__PURE__ */ jsx(Content2, {
+			"data-slot": "context-menu-content",
+			className: cn(menuContentStyles, "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+			onPointerUpCapture: (event) => {
+				onPointerUpCapture?.(event);
+				stopOpeningPointerUp(event, pointerUpGuard);
+			},
+			...props
+		})
+	});
+}
+function ContextMenuItem({ className, inset, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Item2, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn(menuItemVariants({
+			variant,
+			inset
+		}), className),
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/composites/image-preview/image-preview-context-menu.tsx
+function ImagePreviewContextMenu({ actions = [], children, context, item, onActionError }) {
+	if (actions.length === 0) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(ContextMenu, { children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsx(ContextMenuContent, { children: actions.map((action) => /* @__PURE__ */ jsxs(ContextMenuItem, {
+		disabled: action.disabled,
+		onSelect: (event) => {
+			event.preventDefault();
+			Promise.resolve().then(() => action.onSelect(item, context)).catch((error) => onActionError?.(error, action, item));
+		},
+		children: [action.icon, action.label]
+	}, action.id)) })] });
+}
+//#endregion
+//#region ../ui/src/components/composites/image-preview/image-preview-image.tsx
+function ImagePreviewImage({ className, fitScale = 1, item, style, transform, ...props }) {
+	const transformValue = [
+		`translate3d(${transform.offsetX}px, ${transform.offsetY}px, 0)`,
+		`rotate(${transform.rotation}deg)`,
+		`scale(${fitScale * transform.zoom})`,
+		`scaleX(${transform.flipX ? -1 : 1})`,
+		`scaleY(${transform.flipY ? -1 : 1})`
+	].join(" ");
+	return /* @__PURE__ */ jsx("img", {
+		alt: item.alt ?? item.title ?? "",
+		className: cn("block max-h-full max-w-full object-contain select-none", className),
+		draggable: false,
+		src: item.src,
+		style: {
+			...style,
+			transform: transformValue,
+			transformOrigin: "center",
+			willChange: "transform"
+		},
+		...props
+	});
+}
+//#endregion
+//#region ../ui/src/components/composites/image-preview/image-preview-viewport.tsx
+var EMPTY_SIZE = {
+	height: 0,
+	width: 0
+};
+var clamp$1 = (value, min, max) => Math.min(max, Math.max(min, value));
+var getItemKey = (item) => `${item.id}\0${item.src}`;
+var touchSpan = (points) => {
+	const [first, second] = [...points.values()];
+	return {
+		span: Math.hypot(first.x - second.x, first.y - second.y),
+		midX: (first.x + second.x) / 2,
+		midY: (first.y + second.y) / 2
+	};
+};
+var getGeometry = (imageSize, viewportSize, transform) => {
+	if (imageSize.width <= 0 || imageSize.height <= 0 || viewportSize.width <= 0 || viewportSize.height <= 0) return {
+		fitScale: 1,
+		maxOffsetX: 0,
+		maxOffsetY: 0
+	};
+	const swapsDimensions = transform.rotation % 180 !== 0;
+	const rotatedWidth = swapsDimensions ? imageSize.height : imageSize.width;
+	const rotatedHeight = swapsDimensions ? imageSize.width : imageSize.height;
+	const fitScale = Math.min(1, viewportSize.width / rotatedWidth, viewportSize.height / rotatedHeight);
+	const renderedWidth = rotatedWidth * fitScale * transform.zoom;
+	const renderedHeight = rotatedHeight * fitScale * transform.zoom;
+	return {
+		fitScale,
+		maxOffsetX: Math.max(0, (renderedWidth - viewportSize.width) / 2),
+		maxOffsetY: Math.max(0, (renderedHeight - viewportSize.height) / 2)
+	};
+};
+var clampOffsets = (transform, imageSize, viewportSize) => {
+	const { maxOffsetX, maxOffsetY } = getGeometry(imageSize, viewportSize, transform);
+	return {
+		offsetX: clamp$1(transform.offsetX, -maxOffsetX, maxOffsetX),
+		offsetY: clamp$1(transform.offsetY, -maxOffsetY, maxOffsetY)
+	};
+};
+function ImagePreviewViewport({ actionContext, actions = [], className, imageClassName, item, onActionError, onBackdropClick, onError, onLoad, transformControls, ...props }) {
+	const viewportRef = React$1.useRef(null);
+	const dragRef = React$1.useRef(null);
+	const touchPointsRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const pinchRef = React$1.useRef(null);
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const [viewportSize, setViewportSize] = React$1.useState(EMPTY_SIZE);
+	const [loadedImage, setLoadedImage] = React$1.useState(null);
+	const itemKey = getItemKey(item);
+	const imageSize = loadedImage?.itemKey === itemKey ? loadedImage.size : EMPTY_SIZE;
+	const { transform, update } = transformControls;
+	const geometry = getGeometry(imageSize, viewportSize, transform);
+	const canPan = geometry.maxOffsetX > 0 || geometry.maxOffsetY > 0;
+	const isGeometryReady = imageSize.width > 0 && imageSize.height > 0 && viewportSize.width > 0 && viewportSize.height > 0;
+	React$1.useLayoutEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		const updateSize = () => {
+			const rect = viewport.getBoundingClientRect();
+			setViewportSize((current) => current.width === rect.width && current.height === rect.height ? current : {
+				width: rect.width,
+				height: rect.height
+			});
+		};
+		updateSize();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateSize);
+		observer.observe(viewport);
+		return () => observer.disconnect();
+	}, []);
+	React$1.useLayoutEffect(() => {
+		const offsets = clampOffsets(transform, imageSize, viewportSize);
+		update(offsets);
+	}, [
+		imageSize,
+		transform,
+		update,
+		viewportSize
+	]);
+	const zoomAt = React$1.useCallback((nextZoom, clientX, clientY) => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		const rect = viewport.getBoundingClientRect();
+		const anchorX = clientX - rect.left - rect.width / 2;
+		const anchorY = clientY - rect.top - rect.height / 2;
+		update((current) => {
+			const zoom = clamp$1(nextZoom, transformControls.minZoom, transformControls.maxZoom);
+			const ratio = zoom / current.zoom;
+			const next = {
+				...current,
+				offsetX: anchorX - (anchorX - current.offsetX) * ratio,
+				offsetY: anchorY - (anchorY - current.offsetY) * ratio,
+				zoom
+			};
+			return {
+				...next,
+				...clampOffsets(next, imageSize, viewportSize)
+			};
+		});
+	}, [
+		imageSize,
+		transformControls.maxZoom,
+		transformControls.minZoom,
+		update,
+		viewportSize
+	]);
+	const handleWheel = React$1.useCallback((event) => {
+		event.preventDefault();
+		const nextZoom = transform.zoom * Math.exp(-event.deltaY * .002);
+		zoomAt(nextZoom, event.clientX, event.clientY);
+	}, [transform.zoom, zoomAt]);
+	const handleTouchPointerDown = React$1.useCallback((event) => {
+		if (event.pointerType !== "touch") return;
+		touchPointsRef.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		if (touchPointsRef.current.size !== 2) return;
+		dragRef.current = null;
+		setIsDragging(false);
+		pinchRef.current = {
+			span: touchSpan(touchPointsRef.current).span,
+			zoom: transform.zoom
+		};
+	}, [transform.zoom]);
+	const handleTouchPointerMove = React$1.useCallback((event) => {
+		if (!touchPointsRef.current.has(event.pointerId)) return;
+		touchPointsRef.current.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		const pinch = pinchRef.current;
+		if (!pinch || touchPointsRef.current.size !== 2) return;
+		const { span, midX, midY } = touchSpan(touchPointsRef.current);
+		if (pinch.span > 0) zoomAt(pinch.zoom * span / pinch.span, midX, midY);
+	}, [zoomAt]);
+	const handleTouchPointerEnd = React$1.useCallback((event) => {
+		touchPointsRef.current.delete(event.pointerId);
+		if (touchPointsRef.current.size < 2) pinchRef.current = null;
+	}, []);
+	const handlePointerDown = React$1.useCallback((event) => {
+		event.stopPropagation();
+		if (event.button !== 0 || !canPan || pinchRef.current) return;
+		dragRef.current = {
+			offsetX: transform.offsetX,
+			offsetY: transform.offsetY,
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY
+		};
+		event.currentTarget.setPointerCapture(event.pointerId);
+		setIsDragging(true);
+		event.preventDefault();
+	}, [
+		canPan,
+		transform.offsetX,
+		transform.offsetY
+	]);
+	const handlePointerMove = React$1.useCallback((event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId) return;
+		const next = {
+			...transform,
+			offsetX: drag.offsetX + event.clientX - drag.startX,
+			offsetY: drag.offsetY + event.clientY - drag.startY
+		};
+		update(clampOffsets(next, imageSize, viewportSize));
+	}, [
+		imageSize,
+		transform,
+		update,
+		viewportSize
+	]);
+	const stopDragging = React$1.useCallback((event) => {
+		const drag = dragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		dragRef.current = null;
+		setIsDragging(false);
+	}, []);
+	const image = /* @__PURE__ */ jsx(ImagePreviewImage, {
+		className: cn("max-h-none max-w-none shrink-0", canPan && (isDragging ? "cursor-grabbing transition-none" : "cursor-grab"), imageClassName),
+		fitScale: geometry.fitScale,
+		item,
+		onClick: (event) => event.stopPropagation(),
+		onDoubleClick: (event) => {
+			event.stopPropagation();
+			zoomAt(transform.zoom > transformControls.minZoom ? transformControls.minZoom : 2, event.clientX, event.clientY);
+		},
+		onError,
+		onLoad: (event) => {
+			setLoadedImage({
+				itemKey,
+				size: {
+					height: event.currentTarget.naturalHeight,
+					width: event.currentTarget.naturalWidth
+				}
+			});
+			onLoad?.(event);
+		},
+		onPointerCancel: stopDragging,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: stopDragging,
+		style: {
+			...imageSize.width > 0 ? {
+				height: imageSize.height,
+				width: imageSize.width
+			} : {},
+			visibility: isGeometryReady ? "visible" : "hidden"
+		},
+		transform
+	}, itemKey);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: viewportRef,
+		className: cn("relative flex h-full w-full touch-none items-center justify-center overflow-hidden", className),
+		"data-testid": "image-preview-viewport",
+		onClick: (event) => {
+			if (event.target === event.currentTarget) onBackdropClick?.();
+		},
+		onPointerCancelCapture: handleTouchPointerEnd,
+		onPointerDownCapture: handleTouchPointerDown,
+		onPointerMoveCapture: handleTouchPointerMove,
+		onPointerUpCapture: handleTouchPointerEnd,
+		onWheel: handleWheel,
+		children: actionContext && actions.length > 0 ? /* @__PURE__ */ jsx(ImagePreviewContextMenu, {
+			actions,
+			context: actionContext,
+			item,
+			onActionError,
+			children: image
+		}) : image
+	});
+}
+//#endregion
+//#region ../ui/src/components/composites/image-preview/use-image-preview-transform.ts
+var DEFAULT_TRANSFORM = {
+	flipX: false,
+	flipY: false,
+	offsetX: 0,
+	offsetY: 0,
+	rotation: 0,
+	zoom: 1
+};
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var normalizeRotate = (value) => (value % 360 + 360) % 360;
+var toFiniteNumber = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+var normalizeTransform = (transform, minZoom, maxZoom) => ({
+	flipX: transform?.flipX ?? DEFAULT_TRANSFORM.flipX,
+	flipY: transform?.flipY ?? DEFAULT_TRANSFORM.flipY,
+	offsetX: toFiniteNumber(transform?.offsetX, DEFAULT_TRANSFORM.offsetX),
+	offsetY: toFiniteNumber(transform?.offsetY, DEFAULT_TRANSFORM.offsetY),
+	rotation: normalizeRotate(toFiniteNumber(transform?.rotation, DEFAULT_TRANSFORM.rotation)),
+	zoom: clamp(toFiniteNumber(transform?.zoom, DEFAULT_TRANSFORM.zoom), minZoom, maxZoom)
+});
+var transformsEqual = (left, right) => left.flipX === right.flipX && left.flipY === right.flipY && left.offsetX === right.offsetX && left.offsetY === right.offsetY && left.rotation === right.rotation && left.zoom === right.zoom;
+function useImagePreviewTransform({ initialTransform, maxZoom = 5, minZoom = 1, zoomStep = .25 } = {}) {
+	if (minZoom > maxZoom) throw new Error("useImagePreviewTransform requires minZoom <= maxZoom");
+	if (zoomStep <= 0 || !Number.isFinite(zoomStep)) throw new Error("useImagePreviewTransform requires zoomStep > 0");
+	const initialValue = React$1.useMemo(() => normalizeTransform(initialTransform, minZoom, maxZoom), [
+		initialTransform,
+		maxZoom,
+		minZoom
+	]);
+	const [transform, setTransform] = React$1.useState(initialValue);
+	const update = React$1.useCallback((nextUpdate) => {
+		setTransform((current) => {
+			const patch = typeof nextUpdate === "function" ? nextUpdate(current) : nextUpdate;
+			const next = normalizeTransform({
+				...current,
+				...patch
+			}, minZoom, maxZoom);
+			return transformsEqual(current, next) ? current : next;
+		});
+	}, [maxZoom, minZoom]);
+	const reset = React$1.useCallback(() => {
+		setTransform(initialValue);
+	}, [initialValue]);
+	const zoomIn = React$1.useCallback(() => {
+		update((current) => ({ zoom: current.zoom + zoomStep }));
+	}, [update, zoomStep]);
+	const zoomOut = React$1.useCallback(() => {
+		update((current) => ({ zoom: current.zoom - zoomStep }));
+	}, [update, zoomStep]);
+	const rotateLeft = React$1.useCallback(() => {
+		update((current) => ({
+			offsetX: 0,
+			offsetY: 0,
+			rotation: current.rotation - 90
+		}));
+	}, [update]);
+	const rotateRight = React$1.useCallback(() => {
+		update((current) => ({
+			offsetX: 0,
+			offsetY: 0,
+			rotation: current.rotation + 90
+		}));
+	}, [update]);
+	const flipHorizontal = React$1.useCallback(() => {
+		update((current) => ({
+			flipX: !current.flipX,
+			rotation: -current.rotation
+		}));
+	}, [update]);
+	const flipVertical = React$1.useCallback(() => {
+		update((current) => ({
+			flipY: !current.flipY,
+			rotation: -current.rotation
+		}));
+	}, [update]);
+	return {
+		canZoomIn: transform.zoom < maxZoom,
+		canZoomOut: transform.zoom > minZoom,
+		flipHorizontal,
+		flipVertical,
+		maxZoom,
+		minZoom,
+		reset,
+		rotateLeft,
+		rotateRight,
+		transform,
+		update,
+		zoomIn,
+		zoomOut
+	};
+}
+//#endregion
+//#region src/plugins/image/ImageFilePreviewToolbar.tsx
+function ImageFilePreviewToolbar({ disabled, transformControls }) {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(FilePreviewToolbar, {
+		"aria-label": t("preview.label"),
+		children: [
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.zoom_out"),
+				disabled: disabled || !transformControls.canZoomOut,
+				onClick: transformControls.zoomOut,
+				children: /* @__PURE__ */ jsx(ZoomOut, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.zoom_in"),
+				disabled: disabled || !transformControls.canZoomIn,
+				onClick: transformControls.zoomIn,
+				children: /* @__PURE__ */ jsx(ZoomIn, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.rotate_left"),
+				disabled,
+				onClick: transformControls.rotateLeft,
+				children: /* @__PURE__ */ jsx(RotateCcwSquare, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.rotate_right"),
+				disabled,
+				onClick: transformControls.rotateRight,
+				children: /* @__PURE__ */ jsx(RotateCwSquare, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.flip_horizontal"),
+				disabled,
+				onClick: transformControls.flipHorizontal,
+				pressed: transformControls.transform.flipX,
+				children: /* @__PURE__ */ jsx(FlipHorizontal, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.flip_vertical"),
+				disabled,
+				onClick: transformControls.flipVertical,
+				pressed: transformControls.transform.flipY,
+				children: /* @__PURE__ */ jsx(FlipVertical, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(FilePreviewToolbarButton, {
+				label: t("preview.reset"),
+				disabled,
+				onClick: transformControls.reset,
+				children: /* @__PURE__ */ jsx(RefreshCcw, { "aria-hidden": true })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/plugins/image/ImageFilePreview.tsx
+var IMAGE_PREVIEW_MAX_SIZE_BYTES = 67108864;
+var IMAGE_MEDIA_TYPE_BY_EXTENSION = {
+	svg: "image/svg+xml",
+	jpg: "image/jpeg",
+	ico: "image/x-icon"
+};
+function ImageFilePreview({ sourceId, fileName, document, mediaType }) {
+	const { t } = useTranslation();
+	const { failDocument } = usePreviewHost();
+	const [url, setUrl] = useState(null);
+	const objectUrlRef = useRef(null);
+	const [status, setStatus] = useState("loading");
+	const transformControls = useImagePreviewTransform();
+	const releaseImageUrl = useCallback(() => {
+		if (objectUrlRef.current) URL.revokeObjectURL(objectUrlRef.current);
+		objectUrlRef.current = null;
+	}, []);
+	const item = useMemo(() => ({
+		id: `${sourceId}:${document.revision}`,
+		src: url ?? "",
+		alt: fileName,
+		title: fileName
+	}), [
+		fileName,
+		sourceId,
+		document.revision,
+		url
+	]);
+	useEffect(() => {
+		const controller = new AbortController();
+		setStatus("loading");
+		setUrl(null);
+		readPreviewDocument(document, IMAGE_PREVIEW_MAX_SIZE_BYTES, controller.signal).then((bytes) => {
+			if (controller.signal.aborted) return;
+			const extension = fileName.split(".").at(-1)?.toLowerCase();
+			const normalizedMediaType = mediaType?.split(";", 1)[0].trim().toLowerCase();
+			const mime = normalizedMediaType && imageFilePreviewPlugin.mediaTypes.includes(normalizedMediaType) ? normalizedMediaType : IMAGE_MEDIA_TYPE_BY_EXTENSION[extension ?? ""] ?? `image/${extension}`;
+			objectUrlRef.current = URL.createObjectURL(new Blob([bytes], { type: mime }));
+			setUrl(objectUrlRef.current);
+		}).catch((error) => {
+			if (controller.signal.aborted) return;
+			failDocument?.(error);
+			setStatus(error instanceof PreviewError && error.code === "too_large" ? "too_large" : "error");
+		});
+		return () => {
+			controller.abort();
+			releaseImageUrl();
+		};
+	}, [
+		document,
+		fileName,
+		mediaType,
+		failDocument,
+		releaseImageUrl
+	]);
+	if (status === "too_large") return /* @__PURE__ */ jsx(FilePreviewLayout.Frame, { children: /* @__PURE__ */ jsx(FilePreviewLayout.Content, { children: /* @__PURE__ */ jsx(FilePreviewTooLarge, {
+		sizeBytes: document.size,
+		limitBytes: IMAGE_PREVIEW_MAX_SIZE_BYTES
+	}) }) });
+	if (status === "error") return /* @__PURE__ */ jsx(FilePreviewLayout.Frame, { children: /* @__PURE__ */ jsx(FilePreviewLayout.Content, { children: /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		className: "h-full",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: ImageOff,
+			title: t("file_preview.load_error.title"),
+			description: t("file_preview.load_error.description"),
+			className: "h-full"
+		})
+	}) }) });
+	return /* @__PURE__ */ jsxs(FilePreviewLayout.Frame, { children: [/* @__PURE__ */ jsx(ImageFilePreviewToolbar, {
+		disabled: status !== "ready",
+		transformControls
+	}), /* @__PURE__ */ jsx(FilePreviewLayout.Content, { children: /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-full min-h-full min-w-full items-center justify-center p-4",
+		children: [status === "loading" && /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "absolute inset-0 flex items-center justify-center gap-2 text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(LoaderCircle, {
+				className: "size-4 animate-spin",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", { children: t("file_preview.loading") })]
+		}), url ? /* @__PURE__ */ jsx(ImagePreviewViewport, {
+			className: "h-full min-h-full w-full",
+			imageClassName: status === "loading" ? "opacity-0" : void 0,
+			item,
+			transformControls,
+			onLoad: () => setStatus("ready"),
+			onError: () => {
+				const error = /* @__PURE__ */ new Error(`Failed to load image preview: ${sourceId}`);
+				failDocument?.(error);
+				releaseImageUrl();
+				setUrl(null);
+				setStatus("error");
+			}
+		}) : null]
+	}) })] });
+}
+//#endregion
+export { ImageFilePreview as default };