@questpie/admin 3.2.4 → 3.2.6

package/dist/client/components/media/media-picker-dialog.mjs

@@ -7,7 +7,6 @@ import { useCollectionList } from "../../hooks/use-collection.mjs";
 import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
 import { AssetPreview } from "../primitives/asset-preview.mjs";
 import { MediaGrid } from "./media-grid.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -64,494 +63,195 @@ const MIME_TYPE_FILTERS = [
 		mimePattern: "application/pdf"
 	}
 ];
-function MediaPickerDialog(t0) {
-	const $ = c(112);
-	const { open, onOpenChange, mode: t1, accept, onSelect, maxItems, collection } = t0;
-	const mode = t1 === void 0 ? "single" : t1;
+function MediaPickerDialog({ open, onOpenChange, mode = "single", accept, onSelect, maxItems, collection }) {
 	const { t } = useTranslation();
 	const { collection: resolvedCollection, collections: availableUploadCollections } = useUploadCollection(collection);
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ new Set();
-		$[0] = t2;
-	} else t2 = $[0];
-	const [selectedIds, setSelectedIds] = React.useState(t2);
+	const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
 	const [searchQuery, setSearchQuery] = React.useState("");
 	const [mimeFilter, setMimeFilter] = React.useState("all");
 	const [previewAssetId, setPreviewAssetId] = React.useState(null);
-	let t3;
-	bb0: {
-		let andConditions;
-		if ($[1] !== accept || $[2] !== mimeFilter) {
-			andConditions = [];
-			let t4$2;
-			if ($[4] !== mimeFilter) {
-				t4$2 = MIME_TYPE_FILTERS.find((f) => f.value === mimeFilter);
-				$[4] = mimeFilter;
-				$[5] = t4$2;
-			} else t4$2 = $[5];
-			const selectedFilter = t4$2;
-			if (selectedFilter?.mimePattern) {
-				let t5$1;
-				if ($[6] !== selectedFilter.mimePattern) {
-					t5$1 = { mimeType: { startsWith: selectedFilter.mimePattern } };
-					$[6] = selectedFilter.mimePattern;
-					$[7] = t5$1;
-				} else t5$1 = $[7];
-				andConditions.push(t5$1);
-			}
-			if (accept && accept.length > 0) {
-				let t5$1;
-				if ($[8] !== accept) {
-					t5$1 = accept.map(_temp);
-					$[8] = accept;
-					$[9] = t5$1;
-				} else t5$1 = $[9];
-				const acceptPatterns = t5$1;
-				if (acceptPatterns.length === 1) andConditions.push(acceptPatterns[0]);
-				else {
-					let t6$1;
-					if ($[10] !== acceptPatterns) {
-						t6$1 = { OR: acceptPatterns };
-						$[10] = acceptPatterns;
-						$[11] = t6$1;
-					} else t6$1 = $[11];
-					andConditions.push(t6$1);
-				}
-			}
-			$[1] = accept;
-			$[2] = mimeFilter;
-			$[3] = andConditions;
-		} else andConditions = $[3];
-		if (andConditions.length === 0) {
-			t3 = void 0;
-			break bb0;
+	const where = React.useMemo(() => {
+		const andConditions = [];
+		const selectedFilter = MIME_TYPE_FILTERS.find((f) => f.value === mimeFilter);
+		if (selectedFilter?.mimePattern) andConditions.push({ mimeType: { startsWith: selectedFilter.mimePattern } });
+		if (accept && accept.length > 0) {
+			const acceptPatterns = accept.map((pattern) => {
+				if (pattern.startsWith(".")) return { filename: { endsWith: pattern } };
+				if (pattern.endsWith("/*")) return { mimeType: { startsWith: pattern.slice(0, -1) } };
+				return { mimeType: pattern };
+			});
+			if (acceptPatterns.length === 1) andConditions.push(acceptPatterns[0]);
+			else andConditions.push({ OR: acceptPatterns });
 		}
-		if (andConditions.length === 1) {
-			t3 = andConditions[0];
-			break bb0;
+		if (andConditions.length === 0) return void 0;
+		if (andConditions.length === 1) return andConditions[0];
+		return { AND: andConditions };
+	}, [mimeFilter, accept]);
+	const trimmedSearch = searchQuery.trim();
+	const { data, isLoading } = useCollectionList(resolvedCollection || "", {
+		where,
+		search: trimmedSearch || void 0,
+		limit: 50,
+		orderBy: { createdAt: "desc" }
+	}, { enabled: open && !!resolvedCollection });
+	const assets = React.useMemo(() => data?.docs || [], [data?.docs]);
+	const previewAsset = React.useMemo(() => {
+		if (!open || assets.length === 0) return null;
+		return assets.find((asset) => asset.id === previewAssetId) ?? assets[0];
+	}, [
+		assets,
+		open,
+		previewAssetId
+	]);
+	const selectedMimeFilterLabel = React.useMemo(() => {
+		return t((MIME_TYPE_FILTERS.find((filter) => filter.value === mimeFilter) ?? MIME_TYPE_FILTERS[0]).labelKey);
+	}, [mimeFilter, t]);
+	const resetPickerState = React.useCallback(() => {
+		setSelectedIds(/* @__PURE__ */ new Set());
+		setSearchQuery("");
+		setMimeFilter("all");
+		setPreviewAssetId(null);
+	}, []);
+	const handleOpenChange = React.useCallback((nextOpen) => {
+		if (!nextOpen) resetPickerState();
+		onOpenChange(nextOpen);
+	}, [onOpenChange, resetPickerState]);
+	const handleSelectionChange = (ids) => {
+		if (mode === "multiple" && maxItems && ids.size > maxItems) {
+			toast.warning(t("error.maxItemsAllowed", { max: maxItems }));
+			return;
 		}
-		let t4$1;
-		if ($[12] !== andConditions) {
-			t4$1 = { AND: andConditions };
-			$[12] = andConditions;
-			$[13] = t4$1;
-		} else t4$1 = $[13];
-		t3 = t4$1;
-	}
-	const where = t3;
-	let t4;
-	if ($[14] !== searchQuery) {
-		t4 = searchQuery.trim();
-		$[14] = searchQuery;
-		$[15] = t4;
-	} else t4 = $[15];
-	const t5 = t4 || void 0;
-	let t6;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = { createdAt: "desc" };
-		$[16] = t6;
-	} else t6 = $[16];
-	let t7;
-	if ($[17] !== t5 || $[18] !== where) {
-		t7 = {
-			where,
-			search: t5,
-			limit: 50,
-			orderBy: t6
-		};
-		$[17] = t5;
-		$[18] = where;
-		$[19] = t7;
-	} else t7 = $[19];
-	const t8 = open && !!resolvedCollection;
-	let t9;
-	if ($[20] !== t8) {
-		t9 = { enabled: t8 };
-		$[20] = t8;
-		$[21] = t9;
-	} else t9 = $[21];
-	const { data, isLoading } = useCollectionList(resolvedCollection || "", t7, t9);
-	data?.docs;
-	let t10;
-	if ($[22] !== data?.docs) {
-		t10 = data?.docs || [];
-		$[22] = data?.docs;
-		$[23] = t10;
-	} else t10 = $[23];
-	const assets = t10;
-	let t11;
-	bb1: {
-		if (!open || assets.length === 0) {
-			t11 = null;
-			break bb1;
+		setSelectedIds(ids);
+	};
+	const handleSelect = () => {
+		if (!resolvedCollection) {
+			toast.error(availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Specify the collection for MediaPickerDialog.` : "No upload collection is configured for media library.");
+			return;
 		}
-		let t12$1;
-		if ($[24] !== assets || $[25] !== previewAssetId) {
-			t12$1 = assets.find((asset) => asset.id === previewAssetId) ?? assets[0];
-			$[24] = assets;
-			$[25] = previewAssetId;
-			$[26] = t12$1;
-		} else t12$1 = $[26];
-		t11 = t12$1;
-	}
-	const previewAsset = t11;
-	let t12;
-	if ($[27] !== mimeFilter || $[28] !== t) {
-		t12 = t((MIME_TYPE_FILTERS.find((filter) => filter.value === mimeFilter) ?? MIME_TYPE_FILTERS[0]).labelKey);
-		$[27] = mimeFilter;
-		$[28] = t;
-		$[29] = t12;
-	} else t12 = $[29];
-	const selectedMimeFilterLabel = t12;
-	let t13;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = () => {
-			setSelectedIds(/* @__PURE__ */ new Set());
-			setSearchQuery("");
-			setMimeFilter("all");
-			setPreviewAssetId(null);
-		};
-		$[30] = t13;
-	} else t13 = $[30];
-	const resetPickerState = t13;
-	let t14;
-	if ($[31] !== onOpenChange) {
-		t14 = (nextOpen) => {
-			if (!nextOpen) resetPickerState();
-			onOpenChange(nextOpen);
-		};
-		$[31] = onOpenChange;
-		$[32] = t14;
-	} else t14 = $[32];
-	const handleOpenChange = t14;
-	let t15;
-	if ($[33] !== maxItems || $[34] !== mode || $[35] !== t) {
-		t15 = (ids) => {
-			if (mode === "multiple" && maxItems && ids.size > maxItems) {
-				toast.warning(t("error.maxItemsAllowed", { max: maxItems }));
-				return;
-			}
-			setSelectedIds(ids);
-		};
-		$[33] = maxItems;
-		$[34] = mode;
-		$[35] = t;
-		$[36] = t15;
-	} else t15 = $[36];
-	const handleSelectionChange = t15;
-	let t16;
-	if ($[37] !== assets || $[38] !== availableUploadCollections || $[39] !== handleOpenChange || $[40] !== mode || $[41] !== onSelect || $[42] !== resolvedCollection || $[43] !== selectedIds || $[44] !== t) {
-		t16 = () => {
-			if (!resolvedCollection) {
-				toast.error(availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Specify the collection for MediaPickerDialog.` : "No upload collection is configured for media library.");
-				return;
-			}
-			if (selectedIds.size === 0) {
-				toast.error(t("error.selectAtLeastOne"));
-				return;
-			}
-			if (mode === "single") {
-				const [id] = Array.from(selectedIds);
-				onSelect(id, assets.find((candidate) => candidate.id === id));
-			} else onSelect(Array.from(selectedIds), assets.filter((asset_1) => selectedIds.has(asset_1.id)));
-			handleOpenChange(false);
-		};
-		$[37] = assets;
-		$[38] = availableUploadCollections;
-		$[39] = handleOpenChange;
-		$[40] = mode;
-		$[41] = onSelect;
-		$[42] = resolvedCollection;
-		$[43] = selectedIds;
-		$[44] = t;
-		$[45] = t16;
-	} else t16 = $[45];
-	const handleSelect = t16;
-	let t17;
-	if ($[46] !== handleOpenChange) {
-		t17 = () => {
-			handleOpenChange(false);
-		};
-		$[46] = handleOpenChange;
-		$[47] = t17;
-	} else t17 = $[47];
-	const handleCancel = t17;
-	let t18;
-	if ($[48] !== t) {
-		t18 = t("media.browseLibrary");
-		$[48] = t;
-		$[49] = t18;
-	} else t18 = $[49];
-	let t19;
-	if ($[50] !== t18) {
-		t19 = /* @__PURE__ */ jsx(SheetTitle, { children: t18 });
-		$[50] = t18;
-		$[51] = t19;
-	} else t19 = $[51];
-	const t20 = mode === "single" ? "Select an asset from your library" : `Select up to ${maxItems || "multiple"} assets`;
-	let t21;
-	if ($[52] !== t20) {
-		t21 = /* @__PURE__ */ jsx(SheetDescription, { children: t20 });
-		$[52] = t20;
-		$[53] = t21;
-	} else t21 = $[53];
-	let t22;
-	if ($[54] !== t19 || $[55] !== t21) {
-		t22 = /* @__PURE__ */ jsxs(SheetHeader, {
-			className: "px-6 pt-6",
-			children: [t19, t21]
-		});
-		$[54] = t19;
-		$[55] = t21;
-		$[56] = t22;
-	} else t22 = $[56];
-	let t23;
-	if ($[57] !== availableUploadCollections || $[58] !== resolvedCollection) {
-		t23 = !resolvedCollection && /* @__PURE__ */ jsx("div", {
-			className: "border-warning/40 bg-warning/5 text-warning border p-3 text-sm",
-			children: availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Pass the collection prop to choose one.` : "No upload collection is configured for media library."
-		});
-		$[57] = availableUploadCollections;
-		$[58] = resolvedCollection;
-		$[59] = t23;
-	} else t23 = $[59];
-	let t24;
-	if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
-		t24 = /* @__PURE__ */ jsx(Icon, {
-			icon: "ph:magnifying-glass-bold",
-			className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
-		});
-		$[60] = t24;
-	} else t24 = $[60];
-	let t25;
-	if ($[61] !== t) {
-		t25 = t("media.searchPlaceholder");
-		$[61] = t;
-		$[62] = t25;
-	} else t25 = $[62];
-	let t26;
-	if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
-		t26 = (e) => setSearchQuery(e.target.value);
-		$[63] = t26;
-	} else t26 = $[63];
-	let t27;
-	if ($[64] !== searchQuery || $[65] !== t25) {
-		t27 = /* @__PURE__ */ jsxs("div", {
-			className: "relative flex-1",
-			children: [t24, /* @__PURE__ */ jsx(Input, {
-				type: "text",
-				placeholder: t25,
-				value: searchQuery,
-				onChange: t26,
-				className: "pl-9"
-			})]
-		});
-		$[64] = searchQuery;
-		$[65] = t25;
-		$[66] = t27;
-	} else t27 = $[66];
-	let t28;
-	if ($[67] !== accept || $[68] !== mimeFilter || $[69] !== selectedMimeFilterLabel || $[70] !== t) {
-		t28 = !accept && /* @__PURE__ */ jsxs(Select, {
-			value: mimeFilter,
-			onValueChange: (value) => setMimeFilter(value || "all"),
-			children: [/* @__PURE__ */ jsx(SelectTrigger, {
-				className: "w-full sm:w-[180px]",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						icon: "ph:funnel-simple-bold",
-						className: "size-4"
-					}), /* @__PURE__ */ jsx(SelectValue, { children: selectedMimeFilterLabel })]
-				})
-			}), /* @__PURE__ */ jsx(SelectContent, { children: MIME_TYPE_FILTERS.map((filter_0) => /* @__PURE__ */ jsx(SelectItem, {
-				value: filter_0.value,
-				children: t(filter_0.labelKey)
-			}, filter_0.value)) })]
-		});
-		$[67] = accept;
-		$[68] = mimeFilter;
-		$[69] = selectedMimeFilterLabel;
-		$[70] = t;
-		$[71] = t28;
-	} else t28 = $[71];
-	let t29;
-	if ($[72] !== t27 || $[73] !== t28) {
-		t29 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3 border-b pb-4 sm:flex-row",
-			children: [t27, t28]
-		});
-		$[72] = t27;
-		$[73] = t28;
-		$[74] = t29;
-	} else t29 = $[74];
-	let t30;
-	if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
-		t30 = (asset_2) => setPreviewAssetId(asset_2.id);
-		$[75] = t30;
-	} else t30 = $[75];
-	let t31;
-	if ($[76] !== assets || $[77] !== handleSelectionChange || $[78] !== isLoading || $[79] !== mode || $[80] !== selectedIds) {
-		t31 = /* @__PURE__ */ jsx("div", {
-			className: "flex-1 overflow-y-auto pr-1",
-			children: /* @__PURE__ */ jsx(MediaGrid, {
-				assets,
-				selectedIds,
-				onSelectionChange: handleSelectionChange,
-				selectionMode: mode,
-				loading: isLoading,
-				columns: 5,
-				className: "gap-2",
-				onAssetClick: t30
-			})
-		});
-		$[76] = assets;
-		$[77] = handleSelectionChange;
-		$[78] = isLoading;
-		$[79] = mode;
-		$[80] = selectedIds;
-		$[81] = t31;
-	} else t31 = $[81];
-	let t32;
-	if ($[82] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground font-chrome chrome-meta text-xs font-medium",
-			children: "Preview"
-		});
-		$[82] = t32;
-	} else t32 = $[82];
-	let t33;
-	if ($[83] !== previewAsset) {
-		t33 = /* @__PURE__ */ jsxs("div", {
-			className: "border-border hidden w-80 shrink-0 flex-col gap-3 border-l pl-4 lg:flex xl:w-96",
-			children: [t32, previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
-				asset: previewAsset,
-				variant: "card"
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex min-h-24 items-center justify-center p-4 text-sm",
-				children: "Select an asset to preview"
-			})]
-		});
-		$[83] = previewAsset;
-		$[84] = t33;
-	} else t33 = $[84];
-	let t34;
-	if ($[85] !== t31 || $[86] !== t33) {
-		t34 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 gap-4 overflow-hidden",
-			children: [t31, t33]
-		});
-		$[85] = t31;
-		$[86] = t33;
-		$[87] = t34;
-	} else t34 = $[87];
-	let t35;
-	if ($[88] !== previewAsset) {
-		t35 = /* @__PURE__ */ jsx("div", {
-			className: "border-t pt-4 lg:hidden",
-			children: previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
-				asset: previewAsset,
-				variant: "compact"
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex min-h-16 items-center justify-center p-2 text-sm",
-				children: "Select an asset to preview"
-			})
-		});
-		$[88] = previewAsset;
-		$[89] = t35;
-	} else t35 = $[89];
-	let t36;
-	if ($[90] !== t23 || $[91] !== t29 || $[92] !== t34 || $[93] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 flex-col gap-4 overflow-hidden px-6 pb-6",
-			children: [
-				t23,
-				t29,
-				t34,
-				t35
-			]
-		});
-		$[90] = t23;
-		$[91] = t29;
-		$[92] = t34;
-		$[93] = t35;
-		$[94] = t36;
-	} else t36 = $[94];
-	let t37;
-	if ($[95] !== handleCancel) {
-		t37 = /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			onClick: handleCancel,
-			children: "Cancel"
-		});
-		$[95] = handleCancel;
-		$[96] = t37;
-	} else t37 = $[96];
-	const t38 = selectedIds.size === 0 || isLoading;
-	const t39 = selectedIds.size > 0 && `(${selectedIds.size})`;
-	let t40;
-	if ($[97] !== handleSelect || $[98] !== t38 || $[99] !== t39) {
-		t40 = /* @__PURE__ */ jsxs(Button, {
-			className: "tabular-nums",
-			onClick: handleSelect,
-			disabled: t38,
-			children: ["Select ", t39]
-		});
-		$[97] = handleSelect;
-		$[98] = t38;
-		$[99] = t39;
-		$[100] = t40;
-	} else t40 = $[100];
-	let t41;
-	if ($[101] !== t37 || $[102] !== t40) {
-		t41 = /* @__PURE__ */ jsx(SheetFooter, {
-			className: "border-t px-6 py-4",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex w-full justify-end gap-2",
-				children: [t37, t40]
-			})
-		});
-		$[101] = t37;
-		$[102] = t40;
-		$[103] = t41;
-	} else t41 = $[103];
-	let t42;
-	if ($[104] !== t22 || $[105] !== t36 || $[106] !== t41) {
-		t42 = /* @__PURE__ */ jsxs(SheetContent, {
+		if (selectedIds.size === 0) {
+			toast.error(t("error.selectAtLeastOne"));
+			return;
+		}
+		if (mode === "single") {
+			const [id] = Array.from(selectedIds);
+			onSelect(id, assets.find((candidate) => candidate.id === id));
+		} else onSelect(Array.from(selectedIds), assets.filter((asset) => selectedIds.has(asset.id)));
+		handleOpenChange(false);
+	};
+	const handleCancel = () => {
+		handleOpenChange(false);
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: false,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
 			side: "right",
 			showOverlay: false,
 			className: "qa-media-picker w-full p-0 data-[side=right]:sm:max-w-6xl",
 			children: [
-				t22,
-				t36,
-				t41
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "px-6 pt-6",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: t("media.browseLibrary") }), /* @__PURE__ */ jsx(SheetDescription, { children: mode === "single" ? "Select an asset from your library" : `Select up to ${maxItems || "multiple"} assets` })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-4 overflow-hidden px-6 pb-6",
+					children: [
+						!resolvedCollection && /* @__PURE__ */ jsx("div", {
+							className: "border-warning/40 bg-warning/5 text-warning border p-3 text-sm",
+							children: availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Pass the collection prop to choose one.` : "No upload collection is configured for media library."
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-3 border-b pb-4 sm:flex-row",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "relative flex-1",
+								children: [/* @__PURE__ */ jsx(Icon, {
+									icon: "ph:magnifying-glass-bold",
+									className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
+								}), /* @__PURE__ */ jsx(Input, {
+									type: "text",
+									placeholder: t("media.searchPlaceholder"),
+									value: searchQuery,
+									onChange: (e) => setSearchQuery(e.target.value),
+									className: "pl-9"
+								})]
+							}), !accept && /* @__PURE__ */ jsxs(Select, {
+								value: mimeFilter,
+								onValueChange: (value) => setMimeFilter(value || "all"),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "w-full sm:w-[180px]",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(Icon, {
+											icon: "ph:funnel-simple-bold",
+											className: "size-4"
+										}), /* @__PURE__ */ jsx(SelectValue, { children: selectedMimeFilterLabel })]
+									})
+								}), /* @__PURE__ */ jsx(SelectContent, { children: MIME_TYPE_FILTERS.map((filter) => /* @__PURE__ */ jsx(SelectItem, {
+									value: filter.value,
+									children: t(filter.labelKey)
+								}, filter.value)) })]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 gap-4 overflow-hidden",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex-1 overflow-y-auto pr-1",
+								children: /* @__PURE__ */ jsx(MediaGrid, {
+									assets,
+									selectedIds,
+									onSelectionChange: handleSelectionChange,
+									selectionMode: mode,
+									loading: isLoading,
+									columns: 5,
+									className: "gap-2",
+									onAssetClick: (asset) => setPreviewAssetId(asset.id)
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "border-border hidden w-80 shrink-0 flex-col gap-3 border-l pl-4 lg:flex xl:w-96",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground font-chrome chrome-meta text-xs font-medium",
+									children: "Preview"
+								}), previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+									asset: previewAsset,
+									variant: "card"
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground flex min-h-24 items-center justify-center p-4 text-sm",
+									children: "Select an asset to preview"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "border-t pt-4 lg:hidden",
+							children: previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+								asset: previewAsset,
+								variant: "compact"
+							}) : /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground flex min-h-16 items-center justify-center p-2 text-sm",
+								children: "Select an asset to preview"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(SheetFooter, {
+					className: "border-t px-6 py-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full justify-end gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: handleCancel,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsxs(Button, {
+							className: "tabular-nums",
+							onClick: handleSelect,
+							disabled: selectedIds.size === 0 || isLoading,
+							children: ["Select ", selectedIds.size > 0 && `(${selectedIds.size})`]
+						})]
+					})
+				})
 			]
-		});
-		$[104] = t22;
-		$[105] = t36;
-		$[106] = t41;
-		$[107] = t42;
-	} else t42 = $[107];
-	let t43;
-	if ($[108] !== handleOpenChange || $[109] !== open || $[110] !== t42) {
-		t43 = /* @__PURE__ */ jsx(Sheet, {
-			open,
-			onOpenChange: handleOpenChange,
-			modal: false,
-			children: t42
-		});
-		$[108] = handleOpenChange;
-		$[109] = open;
-		$[110] = t42;
-		$[111] = t43;
-	} else t43 = $[111];
-	return t43;
-}
-function _temp(pattern) {
-	if (pattern.startsWith(".")) return { filename: { endsWith: pattern } };
-	if (pattern.endsWith("/*")) return { mimeType: { startsWith: pattern.slice(0, -1) } };
-	return { mimeType: pattern };
+		})
+	});
 }
 
 //#endregion