themelia-react-ui 0.0.0-stage → 1.0.0

package/dist/features/media-library.js

@@ -0,0 +1,2007 @@
+"use client";
+import { useStrings as e } from "../lib/strings.js";
+import { t } from "../utils-C2EKeIw3.js";
+import { n } from "../buttons-Co6GavvM.js";
+import { a as r, r as i } from "../typography-Cv8MT-82.js";
+import { r as a, t as o } from "../structure-BvW4vG4H.js";
+import { n as s, t as c } from "../feedback-a9j9J-9A.js";
+import { r as l } from "../overlays-DBqV0J_V.js";
+import { a as u, i as d, t as f } from "../primitives-DKPOGVpj.js";
+import { n as p, t as m } from "../number-BNT_BIzJ.js";
+import { t as h } from "../badge-BZXZT9wd.js";
+import { t as g } from "../input-DMorJiTI.js";
+import { t as _ } from "../form-field-C6W-y2hR.js";
+import { l as v, s as y } from "../choice-inputs-CavA-SGV.js";
+import { a as b } from "../upload-queue-xRJ3qDmd.js";
+import { l as x } from "../data-display-b3d1TfL4.js";
+import { createContext as S, useCallback as C, useContext as w, useEffect as T, useMemo as E, useRef as D, useState as O } from "react";
+import { Fragment as ee, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { ArrowLeft as te, ArrowRight as ne, Check as j, File as M, Grid2X2 as re, ImageIcon as N, ImagePlus as ie, Info as P, Layers3 as ae, LayoutList as oe, Lock as F, Play as se, Plus as I, Search as ce, Star as L, Trash2 as le, UploadCloud as R, Video as ue, X as de } from "lucide-react";
+import { createPortal as fe } from "react-dom";
+//#region src/components/features/media-library/media-library.strings.ts
+var pe = {
+	title: "Add media",
+	description: "Pick from the library, or upload new files.",
+	close: "Close media library",
+	tabs: {
+		library: "Library",
+		upload: "Upload"
+	},
+	searchPlaceholder: "Search by name or tag...",
+	clearSearch: "Clear search",
+	typeFilterLabel: "Type",
+	collectionFilterLabel: "Collection",
+	sortLabel: "Sort",
+	viewLabel: "View",
+	allTypes: "All",
+	images: "Images",
+	videos: "Videos",
+	files: "Files",
+	allCollections: "All collections",
+	sortNewest: "Newest",
+	sortName: "Name",
+	sortSize: "Size",
+	sortUsage: "Most used",
+	gridView: "Grid view",
+	tableView: "Table view",
+	countAll: "{count} items",
+	countFiltered: "{count} of {total} items",
+	countSearch: "{count} of {total} items for \"{query}\"",
+	activeSearchLabel: "Search",
+	resultsLabel: "Media results",
+	emptyLibraryTitle: "Library is empty",
+	emptyLibraryDescription: "Upload images or videos to start building the library.",
+	emptyFilteredTitle: "No media matches",
+	emptyFilteredDescription: "Try a different search term, or clear the filters.",
+	clearFilters: "Clear filters",
+	uploadMedia: "Upload media",
+	loading: "Loading media...",
+	errorTitle: "Media could not load",
+	errorDescription: "Try again or adjust your filters.",
+	cardDetails: "Details for {name}",
+	privateLabel: "Private",
+	publicLabel: "Public",
+	typeImage: "Image",
+	typeVideo: "Video",
+	typeFile: "File",
+	unknownSize: "Unknown",
+	notUsed: "Not used yet",
+	usedIn: "{count} {count, plural, one {place} other {places}}",
+	table: {
+		name: "Name",
+		type: "Type",
+		size: "Size",
+		collection: "Collection",
+		used: "Used"
+	},
+	detail: {
+		title: "Details",
+		altText: "Alt text",
+		altPlaceholder: "Describe this media for screen readers",
+		collection: "Collection",
+		tags: "Tags",
+		tagsPlaceholder: "Comma-separated",
+		public: "Public",
+		publicHint: "Served from the public CDN",
+		privateHint: "Only visible in the admin",
+		type: "Type",
+		size: "Size",
+		dimensions: "Dimensions",
+		uploaded: "Uploaded",
+		usedIn: "Used in",
+		replace: "Replace file",
+		delete: "Delete",
+		close: "Close details"
+	},
+	upload: {
+		dropTitle: "Drag files here or click to browse",
+		dropHint: "JPG, PNG, WebP, SVG and MP4 up to 50 MB per file",
+		dragOver: "Release to stage files",
+		collection: "Collection",
+		tags: "Tags",
+		tagsPlaceholder: "Comma-separated",
+		public: "Public",
+		publicHint: "Serve from the public CDN",
+		noFiles: "No files staged",
+		stagedCount: "{count} {count, plural, one {file} other {files}}",
+		removeFile: "Remove {name}",
+		uploading: "Uploading",
+		done: "Done"
+	},
+	footer: {
+		pickOne: "Pick one item",
+		pickMany: "Pick one or more items",
+		selectedCount: "{count} selected",
+		clear: "Clear",
+		cancel: "Cancel",
+		confirmEmpty: "Add to product",
+		confirmOne: "Add 1 item",
+		confirmMany: "Add {count} items",
+		noFiles: "No files staged",
+		stagedSummary: "{count} {count, plural, one {file} other {files}} · {size}",
+		upload: "Upload",
+		uploadMany: "Upload {count} files",
+		uploading: "Uploading..."
+	},
+	gallery: {
+		emptyTitle: "No media attached",
+		emptyDescription: "Add images, video, or files to this resource.",
+		add: "Add media",
+		addMore: "Add more",
+		addTile: "Add another media item",
+		cover: "Cover",
+		primary: "Primary",
+		setPrimary: "Set primary",
+		remove: "Remove",
+		movePrevious: "Move previous",
+		moveNext: "Move next",
+		itemPosition: "{index} of {total}",
+		maxReached: "Maximum reached"
+	}
+};
+function z(e, t) {
+	return e.replace(/\{(\w+), plural, one \{([^}]*)\} other \{([^}]*)\}\}/g, (e, n, r, i) => Number(t[n]) === 1 ? r : i).replace(/\{(\w+)\}/g, (e, n) => String(t[n] ?? ""));
+}
+//#endregion
+//#region src/components/features/media-library/hooks/use-media-library.ts
+var me = {
+	collection: void 0,
+	tags: [],
+	public: !0
+}, he = [];
+function B(e, t, n) {
+	let [r, i] = O(t), a = e ?? r;
+	return [a, C((t) => {
+		let r = typeof t == "function" ? t(a) : t;
+		e === void 0 && i(r), n?.(r);
+	}, [
+		e,
+		n,
+		a
+	])];
+}
+var ge = {
+	getId: (e) => e.id,
+	getName: (e) => e.name,
+	getType: (e) => e.type,
+	getSrc: (e) => e.src,
+	getAlt: (e) => e.alt,
+	getSize: (e) => e.size,
+	getWidth: (e) => e.width,
+	getHeight: (e) => e.height,
+	getDuration: (e) => e.duration,
+	getCollection: (e) => e.collection,
+	getTags: (e) => e.tags ?? [],
+	getPublic: (e) => e.public,
+	getUploadedAt: (e) => e.uploadedAt,
+	getUsageCount: (e) => e.usageCount,
+	getTint: (e) => e.tint,
+	getMimeType: (e) => e.mimeType
+};
+function _e(e) {
+	return {
+		...ge,
+		...e ?? {}
+	};
+}
+function ve(e) {
+	return u(e) ?? "";
+}
+function ye(e, t) {
+	let n = t.getWidth(e), r = t.getHeight(e);
+	return !n || !r ? "" : `${n} x ${r}`;
+}
+function be(e, t) {
+	let n = t.getUploadedAt(e);
+	if (!n) return 0;
+	let r = (n instanceof Date ? n : new Date(n)).getTime();
+	return Number.isFinite(r) ? r : 0;
+}
+function xe(e) {
+	return e.type.startsWith("image/") ? "image" : e.type.startsWith("video/") ? "video" : "file";
+}
+function Se(e) {
+	if (e.type.startsWith("image/") && typeof URL < "u" && typeof URL.createObjectURL == "function") return URL.createObjectURL(e);
+}
+function Ce(e) {
+	e && typeof URL < "u" && typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(e);
+}
+function we(e) {
+	return Array.isArray(e) ? {
+		items: e,
+		total: e.length
+	} : e;
+}
+function V(e, t) {
+	return t && typeof e == "object" && e ? {
+		...e,
+		...t
+	} : e;
+}
+function H(e, t, n, r, i) {
+	let a = n.trim().toLowerCase();
+	return e.filter((e) => r !== "all" && t.getType(e) !== r || i !== "all" && t.getCollection(e) !== i ? !1 : !a || [
+		t.getName(e),
+		t.getAlt(e),
+		t.getCollection(e),
+		...t.getTags(e)
+	].filter(Boolean).join(" ").toLowerCase().includes(a));
+}
+function Te(e, t, n) {
+	let r = e.slice();
+	return n === "name" ? r.sort((e, n) => t.getName(e).localeCompare(t.getName(n))) : n === "size" ? r.sort((e, n) => (t.getSize(n) ?? 0) - (t.getSize(e) ?? 0)) : n === "usage" ? r.sort((e, n) => (t.getUsageCount(n) ?? 0) - (t.getUsageCount(e) ?? 0)) : r.sort((e, n) => be(n, t) - be(e, t)), r;
+}
+function Ee({ items: e = he, fetcher: t, accessors: n, selectionMode: r = "multiple", value: i, defaultValue: a = [], onValueChange: o, onItemUpdate: s, onItemDelete: c, onUpload: l, onError: u, tab: d, defaultTab: f = "library", onTabChange: p, view: m, defaultView: h = "grid", onViewChange: g, query: _, defaultQuery: v = "", onQueryChange: y, type: b, defaultType: x = "all", onTypeChange: S, collection: w, defaultCollection: ee = "all", onCollectionChange: k, sort: A, defaultSort: te = "newest", onSortChange: ne, uploadOptions: j, defaultUploadOptions: M, onUploadOptionsChange: re } = {}) {
+	let N = E(() => _e(n), [n]), [ie, P] = B(d, f, p), [ae, oe] = B(m, h, g), [F, se] = B(_, v, y), [I, ce] = B(b, x, S), [L, le] = B(w, ee, k), [R, ue] = B(A, te, ne), [de, fe] = O(null), [pe, z] = O(() => [...a]), [ge, ve] = O([]), [ye, be] = O(), [Ee, U] = O(!1), [W, G] = O(null), [De, Oe] = O([]), [ke, Ae] = O(() => /* @__PURE__ */ new Set()), [je, Me] = O({}), [Ne, K] = O([]), [Pe, Fe] = O(!1), Ie = E(() => ({
+		...me,
+		...M,
+		tags: M?.tags ?? me.tags
+	}), [M]), [Le, Re] = B(E(() => j ? {
+		...me,
+		...j,
+		tags: j.tags ?? me.tags
+	} : void 0, [j]), Ie, re), q = i !== void 0, J = E(() => q ? [...i ?? []] : pe, [
+		pe,
+		q,
+		i
+	]), Y = E(() => new Set(J), [J]), ze = D(/* @__PURE__ */ new Set()), X = D(null), Z = D(/* @__PURE__ */ new Map());
+	T(() => {
+		if (!t) return;
+		let e = new AbortController();
+		return U(!0), G(null), t({
+			query: F,
+			type: I,
+			collection: L === "all" ? void 0 : L,
+			sort: R,
+			signal: e.signal
+		}).then((t) => {
+			if (e.signal.aborted) return;
+			let n = we(t);
+			ve(n.items), be(n.total);
+		}).catch((t) => {
+			e.signal.aborted || (G(t), u?.(t));
+		}).finally(() => {
+			e.signal.aborted || U(!1);
+		}), () => e.abort();
+	}, [
+		L,
+		t,
+		u,
+		F,
+		R,
+		I
+	]), T(() => {
+		let e = ze.current;
+		return () => {
+			X.current?.abort();
+			for (let t of e) Ce(t);
+			e.clear();
+		};
+	}, []);
+	let Be = E(() => t ? ge : [...De, ...e], [
+		De,
+		ge,
+		t,
+		e
+	]), Q = E(() => Be.filter((e) => !ke.has(N.getId(e))).map((e) => V(e, je[N.getId(e)])), [
+		N,
+		je,
+		ke,
+		Be
+	]), Ve = E(() => {
+		let e = t ? Q : H(Q, N, F, I, L);
+		return t ? e : Te(e, N, R);
+	}, [
+		N,
+		L,
+		t,
+		Q,
+		F,
+		R,
+		I
+	]), He = ye ?? Q.length, Ue = Ve.length, We = E(() => Q.filter((e) => Y.has(N.getId(e))), [
+		N,
+		Q,
+		Y
+	]), Ge = !!F.trim() || I !== "all" || L !== "all", $ = C((e) => {
+		q || z(e);
+		let t = new Set(e), n = Q.filter((e) => t.has(N.getId(e)));
+		o?.(e, n);
+	}, [
+		N,
+		q,
+		o,
+		Q
+	]), Ke = C((e) => {
+		let t = new Set(r === "single" ? [] : Y);
+		Y.has(e) && r !== "single" ? t.delete(e) : t.add(e), $(Array.from(t));
+	}, [
+		$,
+		Y,
+		r
+	]), qe = C(() => $([]), [$]), Je = C(() => {
+		se(""), ce("all"), le("all");
+	}, [
+		le,
+		se,
+		ce
+	]), Ye = C((e) => {
+		K((t) => [...t, ...e.map((e, t) => {
+			let n = Se(e);
+			return n && ze.current.add(n), {
+				id: `staged-${Date.now()}-${t}`,
+				file: e,
+				name: e.name,
+				size: e.size,
+				type: xe(e),
+				src: n,
+				progress: 0,
+				status: "staged"
+			};
+		})]);
+	}, []), Xe = C((e) => {
+		K((t) => {
+			let n = t.find((t) => t.id === e);
+			return n?.src && (Ce(n.src), ze.current.delete(n.src)), t.filter((t) => t.id !== e);
+		});
+	}, []), Ze = C(() => {
+		K((e) => {
+			for (let t of e) t.src && (Ce(t.src), ze.current.delete(t.src));
+			return [];
+		});
+	}, []), Qe = C((e) => {
+		Re((t) => ({
+			...t,
+			...e
+		}));
+	}, [Re]), $e = C((e, t) => {
+		K((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []);
+	return {
+		tab: ie,
+		setTab: P,
+		view: ae,
+		setView: oe,
+		query: F,
+		setQuery: se,
+		type: I,
+		setType: ce,
+		collection: L,
+		setCollection: le,
+		sort: R,
+		setSort: ue,
+		detailId: de,
+		setDetailId: fe,
+		items: Q,
+		visibleItems: Ve,
+		selectedIds: J,
+		selectedItems: We,
+		selectedSet: Y,
+		toggleSelection: Ke,
+		clearSelection: qe,
+		clearFilters: Je,
+		loading: Ee,
+		error: W,
+		hasFilters: Ge,
+		totalCount: He,
+		filteredCount: Ue,
+		stagedFiles: Ne,
+		addFiles: Ye,
+		removeStagedFile: Xe,
+		clearStagedFiles: Ze,
+		updateUploadOptions: Qe,
+		uploadOptions: Le,
+		uploading: Pe,
+		startUpload: C(async () => {
+			if (Pe || Ne.length === 0) return;
+			let e = new AbortController();
+			X.current?.abort(), X.current = e, G(null), Fe(!0), K((e) => e.map((e) => ({
+				...e,
+				status: "uploading",
+				progress: 0
+			})));
+			let t = {
+				signal: e.signal,
+				setProgress: (t, n) => {
+					e.signal.aborted || $e(t, { progress: Math.max(0, Math.min(100, n)) });
+				},
+				setFileStatus: (t, n, r) => {
+					e.signal.aborted || $e(t, {
+						status: n,
+						error: r
+					});
+				}
+			};
+			try {
+				let n = Ne.map((e) => e.file), i = await l?.(n, Le, t);
+				if (e.signal.aborted) return;
+				if (K((e) => e.map((e) => ({
+					...e,
+					status: "done",
+					progress: 100
+				}))), i?.length) {
+					Oe((e) => [...i, ...e]);
+					let e = i.map((e) => N.getId(e));
+					$(r === "single" ? e.slice(0, 1) : Array.from(/* @__PURE__ */ new Set([...e, ...J])));
+				}
+				Ze(), P("library");
+			} catch (t) {
+				if (e.signal.aborted) return;
+				G(t), K((e) => e.map((e) => e.status === "uploading" ? {
+					...e,
+					status: "error",
+					error: "Upload failed"
+				} : e)), u?.(t);
+			} finally {
+				X.current === e && (X.current = null, Fe(!1));
+			}
+		}, [
+			N,
+			$,
+			Ze,
+			u,
+			l,
+			J,
+			r,
+			P,
+			$e,
+			Ne,
+			Le,
+			Pe
+		]),
+		cancelUpload: C(() => {
+			X.current?.abort(), X.current = null, Fe(!1), K((e) => e.map((e) => e.status === "uploading" ? {
+				...e,
+				status: "staged",
+				progress: 0,
+				error: void 0
+			} : e));
+		}, []),
+		updateItem: C(async (e, t) => {
+			let n = N.getId(e), r = `update:${n}`, i = (Z.current.get(r) ?? 0) + 1;
+			Z.current.set(r, i);
+			let a = je[n];
+			G(null), Me((e) => ({
+				...e,
+				[n]: {
+					...e[n],
+					...t
+				}
+			}));
+			try {
+				return await s?.(e, t), !0;
+			} catch (e) {
+				return Z.current.get(r) === i && Me((e) => {
+					let t = { ...e };
+					return a ? t[n] = a : delete t[n], t;
+				}), G(e), u?.(e), !1;
+			}
+		}, [
+			N,
+			je,
+			u,
+			s
+		]),
+		removeItem: C(async (e) => {
+			let t = N.getId(e), n = `delete:${t}`, r = (Z.current.get(n) ?? 0) + 1;
+			Z.current.set(n, r);
+			let i = ke.has(t);
+			G(null), Ae((e) => new Set(e).add(t));
+			try {
+				return await c?.(e), Y.has(t) && $(J.filter((e) => e !== t)), !0;
+			} catch (e) {
+				return !i && Z.current.get(n) === r && Ae((e) => {
+					let n = new Set(e);
+					return n.delete(t), n;
+				}), G(e), u?.(e), !1;
+			}
+		}, [
+			N,
+			$,
+			u,
+			c,
+			ke,
+			J,
+			Y
+		]),
+		accessors: N
+	};
+}
+//#endregion
+//#region src/components/features/media-library/partials/media-library-partials.tsx
+function U(e, t) {
+	return k(e === "image" ? N : e === "video" ? ue : M, { className: t ?? "size-icon" });
+}
+function W(e, t) {
+	return e === "image" ? t.typeImage : e === "video" ? t.typeVideo : t.typeFile;
+}
+function G(e, t) {
+	return e ? z(t.usedIn, { count: e }) : t.notUsed;
+}
+function De({ children: e, tint: n, className: r }) {
+	return /* @__PURE__ */ k("div", {
+		className: t("media-library-preview relative overflow-hidden bg-muted", r),
+		style: n ? { background: n } : void 0,
+		children: e
+	});
+}
+function Oe({ src: e, alt: t, type: n, className: r, loading: i = "lazy" }) {
+	let [a, o] = O(!1);
+	return T(() => {
+		o(!1);
+	}, [e]), !e || a ? /* @__PURE__ */ k("div", {
+		className: "media-library-preview--fallback flex size-full items-center justify-center text-muted-foreground",
+		children: U(n, "size-6")
+	}) : /* @__PURE__ */ k("img", {
+		src: e,
+		alt: t,
+		loading: i,
+		className: r,
+		onError: () => o(!0)
+	});
+}
+function ke({ icon: e, title: n, description: r, action: i, className: a }) {
+	return /* @__PURE__ */ k(x, {
+		title: n,
+		description: r ?? !1,
+		actions: i,
+		media: e ?? /* @__PURE__ */ k(N, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		}),
+		mediaVariant: "icon-soft",
+		padding: "md",
+		border: !0,
+		className: t("media-library-empty-state--component min-h-64 bg-muted/20", a)
+	});
+}
+function Ae({ query: e, type: i, typeFilters: a, collection: s, sort: c, view: l, collections: u = [], strings: d, onQueryChange: f, onTypeChange: p, onCollectionChange: m, onSortChange: _, onViewChange: y, onClearFilters: b, toolbarEnd: x }) {
+	let S = [
+		{
+			value: "all",
+			label: d.allTypes,
+			icon: null
+		},
+		{
+			value: "image",
+			label: d.images,
+			icon: N
+		},
+		{
+			value: "video",
+			label: d.videos,
+			icon: ue
+		},
+		{
+			value: "file",
+			label: d.files,
+			icon: M
+		}
+	].filter((e) => (a ?? [
+		"all",
+		"image",
+		"video"
+	]).includes(e.value)), C = [{
+		value: "all",
+		label: d.allCollections
+	}, ...u.map((e) => ({
+		value: e.value,
+		label: String(e.label)
+	}))], w = [
+		{
+			value: "newest",
+			label: d.sortNewest
+		},
+		{
+			value: "name",
+			label: d.sortName
+		},
+		{
+			value: "size",
+			label: d.sortSize
+		},
+		{
+			value: "usage",
+			label: d.sortUsage
+		}
+	], T = e.trim(), E = T.length > 0, D = E || i !== "all" || s !== "all";
+	return /* @__PURE__ */ A(o, {
+		direction: "horizontal",
+		wrap: !0,
+		align: "center",
+		gap: "md",
+		className: "media-library-toolbar--component",
+		children: [
+			/* @__PURE__ */ A(o, {
+				gap: "xs",
+				className: "media-library-toolbar--search min-w-52 flex-1",
+				children: [/* @__PURE__ */ k(g, {
+					value: e,
+					onChange: (e) => f(e.target.value),
+					placeholder: d.searchPlaceholder,
+					startIcon: ce,
+					clearable: !0,
+					onClear: () => f(""),
+					strings: { clear: d.clearSearch },
+					className: t("rounded-radius bg-background", E && "border-info/60 bg-info/5 text-foreground shadow-xs ring-1 ring-info/15")
+				}), !!E && /* @__PURE__ */ k(o, {
+					direction: "horizontal",
+					gap: "xs",
+					wrap: !1,
+					className: "media-library-toolbar--search-value px-space-xs",
+					children: /* @__PURE__ */ A(h, {
+						tone: "info",
+						className: "max-w-full",
+						children: [
+							/* @__PURE__ */ k(ce, {
+								className: "size-icon-sm",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ k(r, {
+								tag: "span",
+								size: "inherit",
+								className: "text-current",
+								children: d.activeSearchLabel
+							}),
+							/* @__PURE__ */ k(r, {
+								tag: "span",
+								size: "inherit",
+								weight: "normal",
+								className: "min-w-0 truncate text-current",
+								children: T
+							})
+						]
+					})
+				})]
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "media-library-toolbar--type-toggle flex h-action items-center rounded-radius-md bg-muted p-space-2xs",
+				role: "tablist",
+				"aria-label": d.typeFilterLabel,
+				children: S.map((e) => {
+					let a = e.icon, o = i === e.value;
+					return /* @__PURE__ */ A(n, {
+						type: "button",
+						role: "tab",
+						"aria-selected": o,
+						tone: "secondary",
+						buttonStyle: "ghost",
+						size: "sm",
+						className: t("rounded-radius-sm shadow-none", o ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+						onClick: () => p(e.value),
+						children: [a && /* @__PURE__ */ k(a, { className: "size-icon-md" }), /* @__PURE__ */ k(r, {
+							tag: "span",
+							size: "xs",
+							weight: "medium",
+							className: "text-inherit",
+							children: e.label
+						})]
+					}, e.value);
+				})
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "min-w-40",
+				children: /* @__PURE__ */ k(v, {
+					value: s,
+					options: C,
+					onValueChange: (e) => m(e ?? "all"),
+					placeholder: d.collectionFilterLabel,
+					"aria-label": d.collectionFilterLabel,
+					className: "bg-background"
+				})
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "min-w-32",
+				children: /* @__PURE__ */ k(v, {
+					value: c,
+					options: w,
+					onValueChange: (e) => _(e ?? "newest"),
+					placeholder: d.sortLabel,
+					"aria-label": d.sortLabel,
+					className: "bg-background"
+				})
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "media-library-toolbar--view-toggle ml-auto flex h-action items-center rounded-radius-md bg-muted p-space-2xs",
+				children: [/* @__PURE__ */ k(n, {
+					type: "button",
+					tone: l === "grid" ? "neutral" : "secondary",
+					buttonStyle: l === "grid" ? "solid" : "ghost",
+					size: "sm",
+					iconOnly: !0,
+					className: t(l === "grid" && "bg-background text-foreground shadow-xs hover:bg-background"),
+					"aria-label": d.gridView,
+					onClick: () => y("grid"),
+					children: /* @__PURE__ */ k(re, { className: "size-icon-md" })
+				}), /* @__PURE__ */ k(n, {
+					type: "button",
+					tone: l === "table" ? "neutral" : "secondary",
+					buttonStyle: l === "table" ? "solid" : "ghost",
+					size: "sm",
+					iconOnly: !0,
+					className: t(l === "table" && "bg-background text-foreground shadow-xs hover:bg-background"),
+					"aria-label": d.tableView,
+					onClick: () => y("table"),
+					children: /* @__PURE__ */ k(oe, { className: "size-icon-md" })
+				})]
+			}),
+			!!D && /* @__PURE__ */ k(n, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "ghost",
+				size: "sm",
+				onClick: b,
+				children: d.clearFilters
+			}),
+			x
+		]
+	});
+}
+function je({ item: e, selected: i = !1, density: s = "comfortable", showMeta: c = !0, accessors: l, strings: u, onToggle: f, onDetails: p, className: m }) {
+	let g = l.getType(e), _ = l.getName(e), v = l.getSrc(e), y = l.getAlt(e) || _, b = l.getSize(e), x = l.getUsageCount(e), S = l.getPublic(e) === !1, C = l.getDuration(e);
+	return /* @__PURE__ */ A("div", {
+		"data-selected": i || void 0,
+		"data-density": s,
+		className: t("media-library-card--component relative group/card overflow-hidden rounded-radius-lg border border-border/70 bg-card text-left shadow-xs transition-all", "hover:border-primary/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", i && "media-library-card--selected border-primary ring-1 ring-primary", m),
+		onClick: f,
+		children: [
+			!!f && /* @__PURE__ */ k(n, {
+				type: "button",
+				tone: "secondary",
+				buttonStyle: "ghost",
+				"aria-label": _,
+				"aria-pressed": i,
+				className: "media-library-card--select absolute inset-0 z-10 h-full w-full rounded-radius-lg [&:not([aria-disabled=true]):not(:disabled)]:hover:bg-transparent focus-visible:ring-inset",
+				onClick: (e) => {
+					e.stopPropagation(), f();
+				}
+			}),
+			/* @__PURE__ */ A(De, {
+				tint: l.getTint(e),
+				className: t(s === "compact" ? "aspect-square" : "aspect-[4/3]"),
+				children: [
+					/* @__PURE__ */ k(Oe, {
+						src: v,
+						alt: y,
+						type: g,
+						className: "size-full object-cover"
+					}),
+					/* @__PURE__ */ k("span", {
+						className: t("media-library-card--check absolute left-2 top-2 inline-flex size-icon-lg items-center justify-center rounded-radius-md border border-border bg-background/95 text-transparent opacity-0 shadow-xs backdrop-blur transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100", i && "bg-primary text-primary-foreground opacity-100"),
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ k(j, { className: "size-icon-sm" })
+					}),
+					!!p && /* @__PURE__ */ k(n, {
+						type: "button",
+						tone: "secondary",
+						buttonStyle: "solid",
+						size: "sm",
+						iconOnly: !0,
+						className: "media-library-card--details absolute z-20 right-2 top-2 opacity-0 shadow-sm transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100",
+						"aria-label": z(u.cardDetails, { name: _ }),
+						onClick: (e) => {
+							e.stopPropagation(), p();
+						},
+						children: /* @__PURE__ */ k(P, { className: "size-icon-md" })
+					}),
+					g === "video" && !!C && /* @__PURE__ */ A(h, {
+						tone: "secondary",
+						className: "media-library-card--duration absolute bottom-2 left-2 bg-inverse-background text-inverse-foreground",
+						children: [/* @__PURE__ */ k(se, { className: "size-icon-sm fill-current" }), C]
+					}),
+					S && /* @__PURE__ */ k(h, {
+						tone: "secondary",
+						className: "media-library-card--private absolute bottom-2 right-2 bg-card text-card-foreground",
+						children: /* @__PURE__ */ k(F, { className: "size-icon-sm" })
+					})
+				]
+			}),
+			/* @__PURE__ */ k("div", {
+				className: t("media-library-card--body", s === "compact" ? "p-surface-xs" : "p-surface"),
+				children: /* @__PURE__ */ A(a, {
+					columns: 1,
+					gap: "xs",
+					children: [/* @__PURE__ */ k(r, {
+						tag: "div",
+						weight: "semibold",
+						className: "truncate",
+						children: _
+					}), c && /* @__PURE__ */ A(o, {
+						direction: "horizontal",
+						align: "center",
+						gap: "md",
+						className: "min-w-0",
+						children: [/* @__PURE__ */ k(d, {
+							value: b,
+							size: "xs",
+							className: "truncate",
+							emptyLabel: u.unknownSize
+						}), !!x && /* @__PURE__ */ A(r, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							className: "ml-auto inline-flex items-center gap-space-xs",
+							children: [/* @__PURE__ */ k(ae, { className: "size-icon-sm" }), x]
+						})]
+					})]
+				})
+			})
+		]
+	});
+}
+function Me({ items: e, selectedSet: a, accessors: o, strings: s, onToggle: c, onDetails: l }) {
+	return /* @__PURE__ */ A("div", {
+		className: "media-library-list--component min-w-180",
+		children: [/* @__PURE__ */ A("div", {
+			className: "sticky top-0 z-10 grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-space-lg border-b border-border bg-background px-row-x py-row-y",
+			children: [
+				/* @__PURE__ */ k("span", {}),
+				/* @__PURE__ */ k("span", {}),
+				/* @__PURE__ */ k(i, { children: s.table.name }),
+				/* @__PURE__ */ k(i, { children: s.table.type }),
+				/* @__PURE__ */ k(i, { children: s.table.size }),
+				/* @__PURE__ */ k(i, { children: s.table.collection }),
+				/* @__PURE__ */ k(i, { children: s.table.used }),
+				/* @__PURE__ */ k("span", {})
+			]
+		}), e.map((e) => {
+			let i = o.getId(e), u = a.has(i), f = o.getType(e), p = o.getName(e), m = o.getSrc(e), g = o.getPublic(e) === !1;
+			return /* @__PURE__ */ A("div", {
+				"data-selected": u || void 0,
+				className: t("media-library-list--row relative grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-space-lg border-b border-border/60 px-row-x py-row-y last:border-b-0", "cursor-pointer rounded-radius transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", u && "bg-primary/10"),
+				onClick: () => c(i),
+				children: [
+					/* @__PURE__ */ k(n, {
+						type: "button",
+						tone: "secondary",
+						buttonStyle: "ghost",
+						"aria-label": p,
+						"aria-pressed": u,
+						className: "media-library-list--select absolute inset-0 z-10 h-full w-full [&:not([aria-disabled=true]):not(:disabled)]:hover:bg-transparent focus-visible:ring-inset",
+						onClick: (e) => {
+							e.stopPropagation(), c(i);
+						}
+					}),
+					/* @__PURE__ */ k("span", {
+						className: t("inline-flex size-icon-lg items-center justify-center rounded-radius-md border border-border text-transparent", u && "border-primary bg-primary text-primary-foreground"),
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ k(j, { className: "size-icon-sm" })
+					}),
+					/* @__PURE__ */ k(De, {
+						tint: o.getTint(e),
+						className: "size-9 rounded-radius-md",
+						children: m ? /* @__PURE__ */ k("img", {
+							src: m,
+							alt: "",
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ k("div", {
+							className: "flex size-full items-center justify-center text-muted-foreground",
+							children: U(f, "size-icon")
+						})
+					}),
+					/* @__PURE__ */ A(r, {
+						tag: "div",
+						weight: "semibold",
+						className: "flex min-w-0 items-center gap-space-xs truncate",
+						children: [p, g && /* @__PURE__ */ k(F, { className: "size-icon-sm shrink-0 text-muted-foreground" })]
+					}),
+					/* @__PURE__ */ k(h, {
+						tone: "secondary",
+						children: W(f, s)
+					}),
+					/* @__PURE__ */ k(d, {
+						value: o.getSize(e),
+						size: "xs",
+						emptyLabel: s.unknownSize
+					}),
+					/* @__PURE__ */ k(r, {
+						size: "xs",
+						type: "secondary",
+						className: "truncate",
+						children: o.getCollection(e) || "-"
+					}),
+					/* @__PURE__ */ k(r, {
+						size: "xs",
+						type: "secondary",
+						children: o.getUsageCount(e) ? o.getUsageCount(e) : "-"
+					}),
+					/* @__PURE__ */ k(n, {
+						type: "button",
+						tone: "secondary",
+						buttonStyle: "ghost",
+						size: "sm",
+						iconOnly: !0,
+						className: "relative z-20",
+						"aria-label": z(s.cardDetails, { name: p }),
+						onClick: (e) => {
+							e.stopPropagation(), l(i);
+						},
+						children: /* @__PURE__ */ k(P, { className: "size-icon-md" })
+					})
+				]
+			}, i);
+		})]
+	});
+}
+function Ne({ item: e, collections: t = [], accessors: i, strings: s, onClose: c, onUpdate: l, onRemove: u, renderDetail: p }) {
+	if (!e) return null;
+	let m = i.getName(e), b = i.getType(e), x = i.getSrc(e), S = i.getCollection(e) ?? t[0]?.value ?? "", C = i.getTags(e), w = i.getPublic(e) ?? !0, T = p?.(e, {
+		accessors: i,
+		update: l,
+		remove: u,
+		close: c
+	});
+	return T ? /* @__PURE__ */ k(ee, { children: T }) : /* @__PURE__ */ A("aside", {
+		className: "media-library-detail-panel--component flex min-h-0 w-full flex-col border-l border-border bg-background @2xl/media-library:w-72",
+		children: [/* @__PURE__ */ k("div", {
+			className: "media-library-detail-panel--header border-b border-border p-surface",
+			children: /* @__PURE__ */ A(o, {
+				direction: "horizontal",
+				align: "center",
+				gap: "md",
+				children: [/* @__PURE__ */ k(n, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					"aria-label": s.detail.close,
+					onClick: c,
+					children: /* @__PURE__ */ k(te, { className: "size-icon-md" })
+				}), /* @__PURE__ */ k(r, {
+					weight: "semibold",
+					children: s.detail.title
+				})]
+			})
+		}), /* @__PURE__ */ A("div", {
+			className: "media-library-detail-panel--body grid min-h-0 gap-space-xl overflow-y-auto p-surface",
+			children: [
+				/* @__PURE__ */ A(De, {
+					tint: i.getTint(e),
+					className: "aspect-[4/3] rounded-radius border border-border",
+					children: [/* @__PURE__ */ k(Oe, {
+						src: x,
+						alt: i.getAlt(e) || m,
+						type: b,
+						className: "size-full object-cover"
+					}), b === "video" && !!i.getDuration(e) && /* @__PURE__ */ A(h, {
+						className: "absolute bottom-2 right-2 bg-inverse-background text-inverse-foreground",
+						children: [/* @__PURE__ */ k(se, { className: "size-icon-sm fill-current" }), i.getDuration(e)]
+					})]
+				}),
+				/* @__PURE__ */ k(r, {
+					tag: "div",
+					weight: "semibold",
+					className: "break-words",
+					children: m
+				}),
+				/* @__PURE__ */ k(a, {
+					render: /* @__PURE__ */ k("dl", {}),
+					columns: 1,
+					gap: "md",
+					className: "media-library-detail-panel--facts",
+					children: [
+						[s.detail.type, W(b, s)],
+						[s.detail.size, /* @__PURE__ */ k(d, {
+							value: i.getSize(e),
+							weight: "medium",
+							emptyLabel: s.unknownSize
+						})],
+						[s.detail.dimensions, /* @__PURE__ */ k(f, {
+							width: i.getWidth(e),
+							height: i.getHeight(e),
+							weight: "medium",
+							emptyLabel: s.unknownSize
+						})],
+						[s.detail.uploaded, String(i.getUploadedAt(e) ?? "-")],
+						[s.detail.usedIn, G(i.getUsageCount(e), s)]
+					].map(([e, t]) => /* @__PURE__ */ A(o, {
+						direction: "horizontal",
+						justify: "between",
+						gap: "xl",
+						children: [/* @__PURE__ */ k("dt", { children: /* @__PURE__ */ k(r, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							children: e
+						}) }), /* @__PURE__ */ k("dd", {
+							className: "m-0 text-right",
+							children: typeof t == "string" ? /* @__PURE__ */ k(r, {
+								tag: "span",
+								weight: "medium",
+								children: t
+							}) : t
+						})]
+					}, e))
+				}),
+				/* @__PURE__ */ k(_, {
+					label: s.detail.altText,
+					children: /* @__PURE__ */ k(g, {
+						value: i.getAlt(e) ?? "",
+						placeholder: s.detail.altPlaceholder,
+						onChange: (e) => l({ alt: e.target.value })
+					})
+				}),
+				/* @__PURE__ */ k(_, {
+					label: s.detail.collection,
+					children: /* @__PURE__ */ k(v, {
+						value: S,
+						options: t.map((e) => ({
+							value: e.value,
+							label: String(e.label)
+						})),
+						"aria-label": s.detail.collection,
+						onValueChange: (e) => l({ collection: e })
+					})
+				}),
+				/* @__PURE__ */ k(_, {
+					label: s.detail.tags,
+					children: /* @__PURE__ */ k(g, {
+						value: C.join(", "),
+						placeholder: s.detail.tagsPlaceholder,
+						onChange: (e) => l({ tags: e.target.value.split(",").map((e) => e.trim()).filter(Boolean) })
+					})
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "media-library-detail-panel--public rounded-radius border border-border bg-muted/20 p-surface",
+					children: /* @__PURE__ */ A(o, {
+						direction: "horizontal",
+						align: "center",
+						justify: "between",
+						gap: "xl",
+						children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(r, {
+							weight: "semibold",
+							children: s.detail.public
+						}), /* @__PURE__ */ k(r, {
+							size: "xs",
+							type: "secondary",
+							children: w ? s.detail.publicHint : s.detail.privateHint
+						})] }), /* @__PURE__ */ k(y, {
+							"aria-label": s.detail.public,
+							checked: w,
+							onValueChange: (e) => l({ public: e })
+						})]
+					})
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "media-library-detail-panel--actions flex flex-wrap gap-space-md",
+					children: [/* @__PURE__ */ A(n, {
+						type: "button",
+						tone: "secondary",
+						buttonStyle: "outline",
+						children: [/* @__PURE__ */ k(R, { className: "size-icon-md" }), s.detail.replace]
+					}), /* @__PURE__ */ A(n, {
+						type: "button",
+						tone: "destructive",
+						buttonStyle: "ghost",
+						onClick: u,
+						children: [/* @__PURE__ */ k(le, { className: "size-icon-md" }), s.detail.delete]
+					})]
+				})
+			]
+		})]
+	});
+}
+function K({ stagedFiles: e, uploadOptions: t, collections: i = [], uploading: a = !1, strings: s, onFiles: c, onRemoveFile: l, onOptionsChange: u, empty: f }) {
+	return /* @__PURE__ */ k("div", {
+		className: "media-library-upload-panel--component p-surface",
+		children: /* @__PURE__ */ A(o, {
+			gap: "xl",
+			children: [
+				/* @__PURE__ */ k(b, {
+					onDrop: c,
+					accept: "image/*,video/*",
+					multiple: !0,
+					size: "md",
+					strings: {
+						instruction: s.upload.dropTitle,
+						helper: s.upload.dropHint,
+						dragOver: s.upload.dragOver
+					}
+				}),
+				e.length > 0 ? /* @__PURE__ */ k(o, {
+					gap: "md",
+					className: "media-library-upload-panel--staged",
+					children: e.map((e) => /* @__PURE__ */ A("div", {
+						className: "media-library-upload-panel--staged-file flex items-center gap-space-lg rounded-radius border border-border bg-card px-row-x py-row-y",
+						children: [
+							/* @__PURE__ */ k(De, {
+								className: "size-10 rounded-radius-md",
+								children: e.src ? /* @__PURE__ */ k("img", {
+									src: e.src,
+									alt: e.name,
+									className: "size-full object-cover"
+								}) : /* @__PURE__ */ k("div", {
+									className: "flex size-full items-center justify-center text-muted-foreground",
+									children: U(e.type, "size-icon")
+								})
+							}),
+							/* @__PURE__ */ A("div", {
+								className: "min-w-0 flex-1",
+								children: [
+									/* @__PURE__ */ A("div", {
+										className: "flex items-baseline gap-space-lg",
+										children: [/* @__PURE__ */ k(r, {
+											weight: "semibold",
+											className: "truncate",
+											children: e.name
+										}), /* @__PURE__ */ k(d, {
+											value: e.size,
+											size: "xs",
+											className: "ml-auto shrink-0"
+										})]
+									}),
+									(e.status === "uploading" || e.status === "done") && /* @__PURE__ */ k("div", {
+										className: "mt-space-md h-1 overflow-hidden rounded-full bg-muted",
+										children: /* @__PURE__ */ k("div", {
+											className: "h-full rounded-full bg-primary transition-[width]",
+											style: { width: `${e.progress}%` }
+										})
+									}),
+									e.status === "error" && /* @__PURE__ */ k(r, {
+										type: "error",
+										children: e.error
+									})
+								]
+							}),
+							e.status === "done" ? /* @__PURE__ */ k(h, {
+								tone: "success",
+								children: s.upload.done
+							}) : e.status === "uploading" ? /* @__PURE__ */ k(p, {
+								value: Math.round(e.progress),
+								scaled: !0,
+								size: "xs",
+								type: "secondary"
+							}) : /* @__PURE__ */ k(n, {
+								type: "button",
+								tone: "secondary",
+								buttonStyle: "ghost",
+								size: "sm",
+								iconOnly: !0,
+								disabled: a,
+								"aria-label": z(s.upload.removeFile, { name: e.name }),
+								onClick: () => l(e.id),
+								children: /* @__PURE__ */ k(de, { className: "size-icon-md" })
+							})
+						]
+					}, e.id))
+				}) : f,
+				/* @__PURE__ */ A("div", {
+					className: "media-library-upload-panel--options grid gap-space-lg rounded-radius border border-border bg-muted/20 p-surface @2xl/media-library:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]",
+					children: [
+						/* @__PURE__ */ k(_, {
+							label: s.upload.collection,
+							children: /* @__PURE__ */ k(v, {
+								value: t.collection ?? i[0]?.value,
+								options: i.map((e) => ({
+									value: e.value,
+									label: String(e.label)
+								})),
+								"aria-label": s.upload.collection,
+								onValueChange: (e) => u({ collection: e })
+							})
+						}),
+						/* @__PURE__ */ k(_, {
+							label: s.upload.tags,
+							children: /* @__PURE__ */ k(g, {
+								value: t.tags.join(", "),
+								placeholder: s.upload.tagsPlaceholder,
+								onChange: (e) => u({ tags: e.target.value.split(",").map((e) => e.trim()).filter(Boolean) })
+							})
+						}),
+						/* @__PURE__ */ A(o, {
+							direction: "horizontal",
+							align: "center",
+							justify: "between",
+							gap: "xl",
+							className: "@2xl/media-library:self-end",
+							children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(r, {
+								weight: "semibold",
+								children: s.upload.public
+							}), /* @__PURE__ */ k(r, {
+								size: "xs",
+								type: "secondary",
+								children: s.upload.publicHint
+							})] }), /* @__PURE__ */ k(y, {
+								"aria-label": s.upload.public,
+								checked: t.public,
+								onValueChange: (e) => u({ public: e })
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function Pe({ tab: e, selectedIds: i, selectionMode: a, stagedFiles: o, strings: s, onClearSelection: c, className: l }) {
+	let d = i.length, f = o.reduce((e, t) => e + t.size, 0), p = o.length, m = t("media-library-footer-summary--component flex min-w-0 items-center gap-space-lg", l);
+	return e === "upload" ? /* @__PURE__ */ k("div", {
+		className: m,
+		"aria-live": "polite",
+		children: /* @__PURE__ */ k(r, {
+			size: "xs",
+			type: "secondary",
+			className: "truncate",
+			children: p === 0 ? s.footer.noFiles : z(s.footer.stagedSummary, {
+				count: p,
+				size: u(f) ?? s.unknownSize
+			})
+		})
+	}) : /* @__PURE__ */ k("div", {
+		className: m,
+		"aria-live": "polite",
+		children: d > 0 ? /* @__PURE__ */ A(ee, { children: [/* @__PURE__ */ k(r, {
+			weight: "semibold",
+			className: "whitespace-nowrap",
+			children: z(s.footer.selectedCount, { count: d })
+		}), /* @__PURE__ */ k(n, {
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "ghost",
+			size: "sm",
+			onClick: c,
+			children: s.footer.clear
+		})] }) : /* @__PURE__ */ k(r, {
+			size: "xs",
+			type: "secondary",
+			className: "truncate",
+			children: a === "single" ? s.footer.pickOne : s.footer.pickMany
+		})
+	});
+}
+function Fe({ tab: e, selectedItems: r, selectedIds: i, stagedFiles: a, uploading: o = !1, strings: s, confirmLabel: c, cancelLabel: l, onCancel: u, onConfirm: d, onUpload: f, onCancelUpload: p, className: m }) {
+	let h = i.length, g = a.length;
+	return e === "upload" ? /* @__PURE__ */ A("div", {
+		className: t("media-library-footer-actions--component flex min-w-0 flex-col-reverse gap-space-md @md/media-library:flex-row @md/media-library:justify-end", m),
+		children: [/* @__PURE__ */ k(n, {
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "ghost",
+			disabled: o,
+			onClick: p,
+			children: l ?? s.footer.cancel
+		}), /* @__PURE__ */ k(n, {
+			type: "button",
+			disabled: g === 0 || o,
+			onClick: f,
+			loading: o,
+			strings: { loading: s.footer.uploading },
+			children: g <= 1 ? s.footer.upload : z(s.footer.uploadMany, { count: g })
+		})]
+	}) : /* @__PURE__ */ A("div", {
+		className: t("media-library-footer-actions--component flex min-w-0 flex-col-reverse gap-space-md @md/media-library:flex-row @md/media-library:justify-end", m),
+		children: [/* @__PURE__ */ k(n, {
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "ghost",
+			onClick: u,
+			children: l ?? s.footer.cancel
+		}), /* @__PURE__ */ k(n, {
+			type: "button",
+			disabled: h === 0,
+			onClick: d,
+			children: c ?? (h === 0 ? s.footer.confirmEmpty : r.length === 1 ? s.footer.confirmOne : z(s.footer.confirmMany, { count: h }))
+		})]
+	});
+}
+function Ie({ tab: e, selectedItems: n, selectedIds: r, selectionMode: i, stagedFiles: a, uploading: o = !1, strings: s, confirmLabel: c, cancelLabel: l, onCancel: u, onConfirm: d, onClearSelection: f, onUpload: p, onCancelUpload: m, chrome: h = "section", className: g }) {
+	return /* @__PURE__ */ k("footer", {
+		className: t("media-library-footer--component", h === "section" && "border-t border-border bg-background p-surface", g),
+		children: /* @__PURE__ */ A("div", {
+			className: "flex min-w-0 flex-col gap-space-lg @md/media-library:flex-row @md/media-library:justify-between",
+			children: [/* @__PURE__ */ k(Pe, {
+				tab: e,
+				selectedIds: r,
+				selectionMode: i,
+				stagedFiles: a,
+				strings: s,
+				onClearSelection: f
+			}), /* @__PURE__ */ k(Fe, {
+				tab: e,
+				selectedItems: n,
+				selectedIds: r,
+				stagedFiles: a,
+				uploading: o,
+				strings: s,
+				confirmLabel: c,
+				cancelLabel: l,
+				onCancel: u,
+				onConfirm: d,
+				onUpload: p,
+				onCancelUpload: m
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/features/media-library/media-library.tsx
+var Le = S(null);
+function Re(e, t, n) {
+	return E(() => {
+		if (e) return e;
+		let r = /* @__PURE__ */ new Set();
+		for (let e of t) {
+			let t = n(e);
+			t && r.add(t);
+		}
+		return Array.from(r).map((e) => ({
+			value: e,
+			label: e
+		}));
+	}, [
+		e,
+		n,
+		t
+	]);
+}
+function q({ title: i, description: a, confirmLabel: l, cancelLabel: u, selectionMode: d = "multiple", density: f = "comfortable", showMeta: p = !0, allowUpload: h = !0, typeFilters: g, confirmOnSelect: _ = !1, onConfirm: v, onCancel: y, onClose: b, strings: x, slots: S, heightClassName: C, className: T, items: E, fetcher: D, accessors: O, collections: ee, value: te, defaultValue: ne, onValueChange: j, onItemUpdate: M, onItemDelete: re, onUpload: ie, onError: P, tab: ae, defaultTab: oe, onTabChange: F, view: se, defaultView: I, onViewChange: ce, query: L, defaultQuery: le, onQueryChange: ue, type: de, defaultType: me, onTypeChange: he, collection: B, defaultCollection: ge, onCollectionChange: _e, sort: ve, defaultSort: ye, onSortChange: be, uploadOptions: xe, defaultUploadOptions: Se, onUploadOptionsChange: Ce, ...we }) {
+	let V = e(pe, x), H = Ee({
+		items: E,
+		fetcher: D,
+		accessors: O,
+		collections: ee,
+		selectionMode: d,
+		value: te,
+		defaultValue: ne,
+		onValueChange: j,
+		onItemUpdate: M,
+		onItemDelete: re,
+		onUpload: ie,
+		onError: P,
+		tab: ae,
+		defaultTab: oe,
+		onTabChange: F,
+		view: se,
+		defaultView: I,
+		onViewChange: ce,
+		query: L,
+		defaultQuery: le,
+		onQueryChange: ue,
+		type: de,
+		defaultType: me,
+		onTypeChange: he,
+		collection: B,
+		defaultCollection: ge,
+		onCollectionChange: _e,
+		sort: ve,
+		defaultSort: ye,
+		onSortChange: be,
+		uploadOptions: xe,
+		defaultUploadOptions: Se,
+		onUploadOptionsChange: Ce
+	}), Te = Re(ee, H.items, H.accessors.getCollection), U = h ? H.tab : "library", W = H.detailId ? H.items.find((e) => H.accessors.getId(e) === H.detailId) ?? null : null, G = w(Le), De = !S?.footer, Oe = G && De ? /* @__PURE__ */ k(Pe, {
+		tab: U,
+		selectedIds: H.selectedIds,
+		selectionMode: d,
+		stagedFiles: H.stagedFiles,
+		strings: V,
+		onClearSelection: H.clearSelection,
+		className: "media-library-dialog--selection-summary shrink-0 justify-end"
+	}) : null, q = !!(i || a || S?.headerStart), J = !!(h || S?.headerEnd || Oe), Y = q || J, ze = () => {
+		v?.(H.selectedItems, H.selectedIds), b?.();
+	}, X = () => {
+		y?.(), b?.();
+	}, Z = (e) => {
+		let t = H.accessors.getId(e);
+		H.toggleSelection(t), _ && (v?.([e], [t]), b?.());
+	}, Be = H.query.trim(), Q = Be.length > 0 ? z(V.countSearch, {
+		count: H.filteredCount,
+		total: H.totalCount,
+		query: Be
+	}) : H.filteredCount === H.totalCount ? z(V.countAll, { count: H.totalCount }) : z(V.countFiltered, {
+		count: H.filteredCount,
+		total: H.totalCount
+	}), Ve = S?.footer ?? (G ? /* @__PURE__ */ k(Fe, {
+		tab: U,
+		selectedItems: H.selectedItems,
+		selectedIds: H.selectedIds,
+		stagedFiles: H.stagedFiles,
+		uploading: H.uploading,
+		strings: V,
+		confirmLabel: l,
+		cancelLabel: u,
+		onCancel: X,
+		onConfirm: ze,
+		onUpload: H.startUpload,
+		onCancelUpload: () => {
+			H.cancelUpload(), H.clearStagedFiles(), H.setTab("library");
+		},
+		className: "ml-auto"
+	}) : /* @__PURE__ */ k(Ie, {
+		tab: U,
+		selectedItems: H.selectedItems,
+		selectedIds: H.selectedIds,
+		selectionMode: d,
+		stagedFiles: H.stagedFiles,
+		uploading: H.uploading,
+		strings: V,
+		confirmLabel: l,
+		cancelLabel: u,
+		onCancel: X,
+		onConfirm: ze,
+		onClearSelection: H.clearSelection,
+		onUpload: H.startUpload,
+		onCancelUpload: () => {
+			H.cancelUpload(), H.clearStagedFiles(), H.setTab("library");
+		}
+	}));
+	return /* @__PURE__ */ A("section", {
+		className: t("media-library--component @container/media-library flex min-h-0 flex-col overflow-hidden rounded-radius border border-border bg-background", C ?? "h-190 max-h-[calc(100vh-7rem)]", T),
+		...we,
+		children: [
+			Y && /* @__PURE__ */ A("header", {
+				className: "media-library--header flex flex-col gap-space-lg border-b border-border p-surface @2xl/media-library:flex-row @2xl/media-library:items-center @2xl/media-library:justify-between",
+				children: [q && /* @__PURE__ */ A(o, {
+					direction: "horizontal",
+					align: "start",
+					gap: "lg",
+					className: "min-w-0",
+					children: [S?.headerStart, (i || a) && /* @__PURE__ */ A("div", {
+						className: "min-w-0",
+						children: [!!i && /* @__PURE__ */ k(r, {
+							tag: "div",
+							weight: "semibold",
+							children: i
+						}), !!a && /* @__PURE__ */ k(r, {
+							type: "secondary",
+							className: "mt-0.5",
+							children: a
+						})]
+					})]
+				}), J && /* @__PURE__ */ A("div", {
+					className: t("media-library--header-controls flex min-w-0 flex-wrap items-center gap-space-md", Oe ? "flex-1 justify-between" : "@2xl/media-library:justify-end"),
+					children: [/* @__PURE__ */ A(o, {
+						direction: "horizontal",
+						wrap: !0,
+						align: "center",
+						gap: "md",
+						className: "min-w-0",
+						children: [h && /* @__PURE__ */ A("div", {
+							className: "media-library--tabs flex items-center rounded-radius-md bg-muted p-space-2xs",
+							role: "tablist",
+							children: [/* @__PURE__ */ A(n, {
+								type: "button",
+								role: "tab",
+								"aria-selected": U === "library",
+								tone: "secondary",
+								buttonStyle: "ghost",
+								size: "sm",
+								className: t("rounded-radius-sm shadow-none", U === "library" ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+								onClick: () => H.setTab("library"),
+								children: [/* @__PURE__ */ k(N, { className: "size-icon-md" }), V.tabs.library]
+							}), /* @__PURE__ */ A(n, {
+								type: "button",
+								role: "tab",
+								"aria-selected": U === "upload",
+								tone: "secondary",
+								buttonStyle: "ghost",
+								size: "sm",
+								className: t("rounded-radius-sm shadow-none", U === "upload" ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+								onClick: () => H.setTab("upload"),
+								children: [
+									/* @__PURE__ */ k(R, { className: "size-icon-md" }),
+									V.tabs.upload,
+									H.stagedFiles.length > 0 && /* @__PURE__ */ k(m, {
+										value: H.stagedFiles.length,
+										size: "xs",
+										align: "center",
+										className: "rounded-full bg-background/20 px-1.5"
+									})
+								]
+							})]
+						}), S?.headerEnd]
+					}), Oe]
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "media-library--body flex min-h-0 flex-1",
+				children: [U === "upload" ? /* @__PURE__ */ k("div", {
+					className: "min-w-0 flex-1 overflow-y-auto",
+					children: /* @__PURE__ */ k(K, {
+						stagedFiles: H.stagedFiles,
+						uploadOptions: H.uploadOptions,
+						collections: Te,
+						uploading: H.uploading,
+						strings: V,
+						onFiles: H.addFiles,
+						onRemoveFile: H.removeStagedFile,
+						onOptionsChange: H.updateUploadOptions,
+						empty: S?.uploadEmpty
+					})
+				}) : /* @__PURE__ */ A("div", {
+					className: t("media-library--library min-w-0 flex-1 flex-col", W ? "hidden @2xl/media-library:flex" : "flex"),
+					children: [/* @__PURE__ */ A("div", {
+						className: "media-library--toolbar border-b border-border/70 p-surface",
+						children: [/* @__PURE__ */ k(Ae, {
+							query: H.query,
+							type: H.type,
+							typeFilters: g,
+							collection: H.collection,
+							sort: H.sort,
+							view: H.view,
+							collections: Te,
+							strings: V,
+							onQueryChange: H.setQuery,
+							onTypeChange: H.setType,
+							onCollectionChange: H.setCollection,
+							onSortChange: H.setSort,
+							onViewChange: H.setView,
+							onClearFilters: H.clearFilters,
+							toolbarEnd: S?.toolbarEnd
+						}), /* @__PURE__ */ k(r, {
+							size: "xs",
+							type: "secondary",
+							className: "mt-space-md",
+							"aria-live": "polite",
+							children: Q
+						})]
+					}), /* @__PURE__ */ k("div", {
+						role: "region",
+						"aria-label": V.resultsLabel,
+						tabIndex: 0,
+						className: "media-library--results min-h-0 flex-1 overflow-y-auto p-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+						children: H.loading ? S?.loading ?? /* @__PURE__ */ k(s, {
+							className: "min-h-64",
+							label: V.loading
+						}) : H.error ? S?.error ?? /* @__PURE__ */ k(c, {
+							title: V.errorTitle,
+							description: V.errorDescription
+						}) : H.visibleItems.length === 0 ? S?.empty ?? /* @__PURE__ */ k(ke, {
+							title: H.hasFilters ? V.emptyFilteredTitle : V.emptyLibraryTitle,
+							description: H.hasFilters ? V.emptyFilteredDescription : V.emptyLibraryDescription,
+							action: H.hasFilters ? /* @__PURE__ */ k(n, {
+								type: "button",
+								tone: "secondary",
+								buttonStyle: "outline",
+								onClick: H.clearFilters,
+								children: V.clearFilters
+							}) : h ? /* @__PURE__ */ A(n, {
+								type: "button",
+								onClick: () => H.setTab("upload"),
+								children: [/* @__PURE__ */ k(R, { className: "size-icon-md" }), V.uploadMedia]
+							}) : void 0
+						}) : H.view === "table" ? /* @__PURE__ */ k("div", {
+							className: "overflow-x-auto",
+							children: /* @__PURE__ */ k(Me, {
+								items: H.visibleItems,
+								selectedSet: H.selectedSet,
+								selectionMode: d,
+								accessors: H.accessors,
+								strings: V,
+								onToggle: (e) => {
+									let t = H.items.find((t) => H.accessors.getId(t) === e);
+									t && Z(t);
+								},
+								onDetails: H.setDetailId
+							})
+						}) : /* @__PURE__ */ k("div", {
+							className: t("media-library--grid grid min-w-0 gap-space-lg", f === "compact" ? "grid-cols-[repeat(auto-fill,minmax(136px,1fr))]" : "grid-cols-[repeat(auto-fill,minmax(168px,1fr))]"),
+							children: H.visibleItems.map((e) => {
+								let t = H.accessors.getId(e), n = {
+									id: t,
+									selected: H.selectedSet.has(t),
+									selectionMode: d,
+									accessors: H.accessors,
+									toggle: () => Z(e),
+									openDetails: () => H.setDetailId(t)
+								}, r = S?.renderItem?.(e, n);
+								return r ? /* @__PURE__ */ k("div", { children: r }, t) : /* @__PURE__ */ k(je, {
+									item: e,
+									selected: n.selected,
+									density: f,
+									showMeta: p,
+									selectionMode: d,
+									accessors: H.accessors,
+									strings: V,
+									onToggle: n.toggle,
+									onDetails: n.openDetails
+								}, t);
+							})
+						})
+					})]
+				}), U === "library" && /* @__PURE__ */ k(Ne, {
+					item: W,
+					collections: Te,
+					accessors: H.accessors,
+					strings: V,
+					onClose: () => H.setDetailId(null),
+					onUpdate: (e) => W ? H.updateItem(W, e) : Promise.resolve(!1),
+					onRemove: async () => {
+						if (!W) return !1;
+						let e = await H.removeItem(W);
+						return e && H.setDetailId(null), e;
+					},
+					renderDetail: S?.renderDetail
+				})]
+			}),
+			G ? G.element ? fe(Ve, G.element) : null : Ve
+		]
+	});
+}
+function J({ open: n, onOpenChange: r, trigger: i, dialogTitle: a, dialogDescription: o, onClose: s, className: c, dialogClassName: u, contentClassName: d, closeOnEscape: f = !0, closeOnBackdropClick: p = !0, ...m }) {
+	let h = e(pe, m.strings), [g, _] = O(!1), [v, y] = O(null), b = n !== void 0, x = b ? n : g, S = (e) => {
+		b || _(e), r?.(e);
+	}, C = () => {
+		S(!1), s?.();
+	};
+	return /* @__PURE__ */ k(Le.Provider, {
+		value: { element: v },
+		children: /* @__PURE__ */ k(l, {
+			open: x,
+			onOpenChange: S,
+			onClose: s,
+			trigger: i,
+			title: a ?? h.title,
+			description: o ?? h.description,
+			size: "full",
+			showCancel: !1,
+			showConfirm: !1,
+			footer: /* @__PURE__ */ k("div", {
+				ref: y,
+				className: "media-library-dialog--footer @container/media-library w-full"
+			}),
+			className: t("media-library-dialog--component max-h-[calc(100vh-2rem)] max-w-[min(1060px,calc(100vw-2rem))] sm:max-w-[min(1060px,calc(100vw-2rem))]", u),
+			contentClassName: t("media-library-dialog--body flex min-h-0 flex-col overflow-hidden p-0", d),
+			closeOnBackdropClick: p,
+			closeOnEscape: f,
+			children: /* @__PURE__ */ k(q, {
+				...m,
+				onClose: C,
+				className: t("media-library-dialog--library rounded-none border-0", c),
+				heightClassName: m.heightClassName ?? "min-h-0 flex-1",
+				strings: m.strings
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/media-library/media-resource-gallery.tsx
+function Y(e, t, n) {
+	let r = e.slice(), [i] = r.splice(t, 1);
+	return i === void 0 || r.splice(n, 0, i), r;
+}
+function ze({ items: i, accessors: a, title: s, description: c, primaryId: l, onPrimaryChange: u, onRemove: f, onReorder: p, onAdd: m, maxItems: g, layout: _ = "field", density: v = "comfortable", readOnly: y = !1, empty: b, action: x, renderItem: S, strings: C, className: w, ...T }) {
+	let E = e(pe, C), D = _e(a), O = i.length, ee = l ?? (O > 0 ? D.getId(i[0]) : void 0), j = !y && !!m && (g === void 0 || O < g), re = j && (_ === "field" || O > 0) ? /* @__PURE__ */ k(n, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "outline",
+		icon: I,
+		onClick: m,
+		children: E.gallery.add
+	}) : g !== void 0 && O >= g ? /* @__PURE__ */ k(h, {
+		tone: "secondary",
+		children: E.gallery.maxReached
+	}) : null, N = (e, t) => {
+		if (t < 0 || t >= O || e === t) return;
+		let n = Y(i, e, t);
+		p?.(n.map((e) => D.getId(e)), n);
+	}, P = !!(s || c || x || re), ae = O === 0 && _ !== "field", oe = () => !j || _ !== "field" ? null : /* @__PURE__ */ A(n, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		className: t("media-resource-gallery--add-tile h-auto min-h-24 w-full flex-col rounded-radius border border-dashed border-border bg-background text-muted-foreground shadow-none", "aspect-square hover:border-primary-accent/50 hover:bg-primary/5 hover:text-primary-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"),
+		"aria-label": E.gallery.addTile,
+		onClick: m,
+		children: [/* @__PURE__ */ k(I, { className: "size-icon" }), /* @__PURE__ */ k(r, {
+			tag: "span",
+			size: "inherit",
+			className: "sr-only",
+			children: E.gallery.addTile
+		})]
+	});
+	return /* @__PURE__ */ A("section", {
+		className: t("media-resource-gallery--component @container/media-resource-gallery rounded-radius border border-border bg-card shadow-xs", w),
+		"data-layout": _,
+		"data-density": v,
+		...T,
+		children: [P && /* @__PURE__ */ k("header", {
+			className: "media-resource-gallery--header p-surface",
+			children: /* @__PURE__ */ A(o, {
+				direction: {
+					base: "vertical",
+					md: "horizontal"
+				},
+				gap: "lg",
+				align: { md: "start" },
+				justify: { md: "between" },
+				children: [/* @__PURE__ */ A("div", {
+					className: "min-w-0",
+					children: [!!s && /* @__PURE__ */ k(r, {
+						tag: "div",
+						weight: "semibold",
+						children: s
+					}), !!c && /* @__PURE__ */ k(r, {
+						type: "secondary",
+						className: "mt-0.5",
+						children: c
+					})]
+				}), /* @__PURE__ */ k(o, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "md",
+					className: "media-resource-gallery--actions",
+					children: x ?? re
+				})]
+			})
+		}), ae ? /* @__PURE__ */ k("div", {
+			className: "media-resource-gallery--empty px-surface pb-surface",
+			children: b ?? /* @__PURE__ */ k(ke, {
+				title: E.gallery.emptyTitle,
+				description: E.gallery.emptyDescription,
+				action: j ? /* @__PURE__ */ k(n, {
+					type: "button",
+					icon: ie,
+					onClick: m,
+					children: E.gallery.add
+				}) : void 0
+			})
+		}) : /* @__PURE__ */ A("div", {
+			className: t("grid min-w-0 grid-cols-1", _ === "list" ? "gap-space-md" : "gap-space-lg", "media-resource-gallery--items p-surface", P && "pt-0", _ === "list" ? void 0 : _ === "field" ? "grid-cols-[repeat(auto-fill,minmax(96px,1fr))] @md/media-resource-gallery:grid-cols-[repeat(auto-fill,minmax(108px,1fr))]" : v === "compact" ? "grid-cols-[repeat(auto-fill,minmax(132px,1fr))]" : "grid-cols-[repeat(auto-fill,minmax(164px,1fr))]"),
+			children: [i.map((e, i) => {
+				let a = D.getId(e), s = D.getName(e), c = D.getType(e), l = D.getSrc(e), p = D.getAlt(e) || s, m = a === ee, g = D.getPublic(e) === !1, b = D.getDuration(e), x = i > 0, C = i < O - 1, w = S?.(e, {
+					id: a,
+					index: i,
+					total: O,
+					primary: m,
+					accessors: D,
+					canMovePrevious: x,
+					canMoveNext: C,
+					setPrimary: () => u?.(a, e),
+					remove: () => f?.(a, e),
+					movePrevious: () => N(i, i - 1),
+					moveNext: () => N(i, i + 1)
+				});
+				return w ? /* @__PURE__ */ k("div", { children: w }, a) : _ === "field" ? /* @__PURE__ */ A("div", {
+					className: t("media-resource-gallery--item group/gallery relative aspect-square overflow-hidden rounded-radius border border-border bg-background shadow-xs", "transition-colors hover:border-primary/40 focus-within:border-primary/50", m && "col-span-2 row-span-2 min-h-52"),
+					"data-primary": m || void 0,
+					children: [
+						l ? /* @__PURE__ */ k("img", {
+							src: l,
+							alt: p,
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ k("div", {
+							className: "flex size-full items-center justify-center bg-muted text-muted-foreground",
+							children: /* @__PURE__ */ k(M, { className: m ? "size-7" : "size-icon-lg" })
+						}),
+						m && /* @__PURE__ */ k(h, {
+							tone: "secondary",
+							className: "absolute left-2 top-2 bg-background/90 shadow-xs",
+							children: E.gallery.cover
+						}),
+						c === "video" && !!b && /* @__PURE__ */ A(h, {
+							tone: "secondary",
+							className: "absolute bottom-2 left-2 bg-foreground text-background",
+							children: [/* @__PURE__ */ k(se, { className: "size-icon-sm fill-current" }), b]
+						}),
+						g && /* @__PURE__ */ k("span", {
+							className: "absolute bottom-2 right-2 inline-flex size-6 items-center justify-center rounded-full border border-border bg-background/90 text-muted-foreground shadow-xs",
+							children: /* @__PURE__ */ k(F, { className: "size-icon-sm" })
+						}),
+						!y && /* @__PURE__ */ k(n, {
+							type: "button",
+							tone: "secondary",
+							buttonStyle: "solid",
+							size: "sm",
+							iconOnly: !0,
+							className: "absolute right-2 top-2 opacity-0 shadow-sm transition-opacity group-hover/gallery:opacity-100 group-focus-within/gallery:opacity-100",
+							"aria-label": E.gallery.remove,
+							onClick: () => f?.(a, e),
+							children: /* @__PURE__ */ k(de, { className: "size-icon-md" })
+						})
+					]
+				}, a) : _ === "list" ? /* @__PURE__ */ A(o, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "lg",
+					className: t("media-resource-gallery--item min-w-0 rounded-radius border border-border bg-background px-row-x", v === "compact" ? "py-row-y-sm" : "py-row-y"),
+					"data-primary": m || void 0,
+					children: [
+						/* @__PURE__ */ k("div", {
+							className: "relative size-12 shrink-0 overflow-hidden rounded-radius-md bg-muted",
+							children: l ? /* @__PURE__ */ k("img", {
+								src: l,
+								alt: p,
+								loading: "lazy",
+								className: "size-full object-cover"
+							}) : /* @__PURE__ */ k("div", {
+								className: "flex size-full items-center justify-center text-muted-foreground",
+								children: /* @__PURE__ */ k(M, { className: "size-icon" })
+							})
+						}),
+						/* @__PURE__ */ A("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ A(o, {
+								direction: "horizontal",
+								wrap: !0,
+								align: "center",
+								gap: "md",
+								className: "min-w-0",
+								children: [/* @__PURE__ */ k(r, {
+									tag: "div",
+									weight: "semibold",
+									className: "min-w-0 break-all",
+									children: s
+								}), m && /* @__PURE__ */ k(h, {
+									tone: "info",
+									children: E.gallery.primary
+								})]
+							}), /* @__PURE__ */ A(r, {
+								size: "xs",
+								type: "secondary",
+								children: [
+									z(E.gallery.itemPosition, {
+										index: i + 1,
+										total: O
+									}),
+									" · ",
+									/* @__PURE__ */ k(d, {
+										value: D.getSize(e),
+										size: "xs",
+										align: "left",
+										emptyLabel: E.unknownSize
+									})
+								]
+							})]
+						}),
+						!y && /* @__PURE__ */ A("div", {
+							className: "media-resource-gallery--item-actions flex basis-full flex-wrap items-center justify-end gap-space-xs @sm/media-resource-gallery:basis-auto",
+							children: [
+								/* @__PURE__ */ k(n, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "ghost",
+									size: "sm",
+									iconOnly: !0,
+									disabled: m,
+									"aria-label": E.gallery.setPrimary,
+									onClick: () => u?.(a, e),
+									children: /* @__PURE__ */ k(L, { className: "size-icon-md" })
+								}),
+								/* @__PURE__ */ k(n, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "ghost",
+									size: "sm",
+									iconOnly: !0,
+									disabled: !x,
+									"aria-label": E.gallery.movePrevious,
+									onClick: () => N(i, i - 1),
+									children: /* @__PURE__ */ k(te, { className: "size-icon-md" })
+								}),
+								/* @__PURE__ */ k(n, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "ghost",
+									size: "sm",
+									iconOnly: !0,
+									disabled: !C,
+									"aria-label": E.gallery.moveNext,
+									onClick: () => N(i, i + 1),
+									children: /* @__PURE__ */ k(ne, { className: "size-icon-md" })
+								}),
+								/* @__PURE__ */ k(n, {
+									type: "button",
+									tone: "destructive",
+									buttonStyle: "ghost",
+									size: "sm",
+									iconOnly: !0,
+									"aria-label": E.gallery.remove,
+									onClick: () => f?.(a, e),
+									children: /* @__PURE__ */ k(le, { className: "size-icon-md" })
+								})
+							]
+						})
+					]
+				}, a) : /* @__PURE__ */ A("div", {
+					className: "media-resource-gallery--item group/gallery overflow-hidden rounded-radius border border-border bg-background shadow-xs transition-colors hover:border-primary/40",
+					"data-primary": m || void 0,
+					children: [/* @__PURE__ */ A("div", {
+						className: "relative aspect-[4/3] bg-muted",
+						children: [l ? /* @__PURE__ */ k("img", {
+							src: l,
+							alt: p,
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ k("div", {
+							className: "flex size-full items-center justify-center text-muted-foreground",
+							children: /* @__PURE__ */ k(M, { className: "size-6" })
+						}), /* @__PURE__ */ A("div", {
+							className: "absolute left-2 top-2 flex flex-wrap gap-space-xs",
+							children: [m && /* @__PURE__ */ k(h, {
+								tone: "info",
+								className: "bg-card",
+								children: E.gallery.primary
+							}), /* @__PURE__ */ k(h, {
+								tone: "secondary",
+								className: "bg-card text-card-foreground",
+								children: z(E.gallery.itemPosition, {
+									index: i + 1,
+									total: O
+								})
+							})]
+						})]
+					}), /* @__PURE__ */ k("div", {
+						className: t("media-resource-gallery--item-body", v === "compact" ? "p-surface-xs" : "p-surface"),
+						children: /* @__PURE__ */ A(o, {
+							gap: "md",
+							children: [/* @__PURE__ */ A("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ k(r, {
+									tag: "div",
+									weight: "semibold",
+									className: "truncate",
+									children: s
+								}), /* @__PURE__ */ k(d, {
+									value: D.getSize(e),
+									size: "xs",
+									align: "left",
+									emptyLabel: E.unknownSize
+								})]
+							}), !y && /* @__PURE__ */ A("div", {
+								className: "flex items-center gap-space-xs",
+								children: [
+									/* @__PURE__ */ k(n, {
+										type: "button",
+										tone: "secondary",
+										buttonStyle: "ghost",
+										size: "sm",
+										iconOnly: !0,
+										disabled: m,
+										"aria-label": E.gallery.setPrimary,
+										onClick: () => u?.(a, e),
+										children: /* @__PURE__ */ k(L, { className: "size-icon-md" })
+									}),
+									/* @__PURE__ */ k(n, {
+										type: "button",
+										tone: "secondary",
+										buttonStyle: "ghost",
+										size: "sm",
+										iconOnly: !0,
+										disabled: !x,
+										"aria-label": E.gallery.movePrevious,
+										onClick: () => N(i, i - 1),
+										children: /* @__PURE__ */ k(te, { className: "size-icon-md" })
+									}),
+									/* @__PURE__ */ k(n, {
+										type: "button",
+										tone: "secondary",
+										buttonStyle: "ghost",
+										size: "sm",
+										iconOnly: !0,
+										disabled: !C,
+										"aria-label": E.gallery.moveNext,
+										onClick: () => N(i, i + 1),
+										children: /* @__PURE__ */ k(ne, { className: "size-icon-md" })
+									}),
+									/* @__PURE__ */ k(n, {
+										type: "button",
+										tone: "destructive",
+										buttonStyle: "ghost",
+										size: "sm",
+										iconOnly: !0,
+										className: "ml-auto",
+										"aria-label": E.gallery.remove,
+										onClick: () => f?.(a, e),
+										children: /* @__PURE__ */ k(le, { className: "size-icon-md" })
+									})
+								]
+							})]
+						})
+					})]
+				}, a);
+			}), oe()]
+		})]
+	});
+}
+//#endregion
+export { q as MediaLibrary, je as MediaLibraryCard, Ne as MediaLibraryDetailPanel, J as MediaLibraryDialog, ke as MediaLibraryEmptyState, Ie as MediaLibraryFooter, Me as MediaLibraryList, Ae as MediaLibraryToolbar, K as MediaLibraryUploadPanel, ze as MediaResourceGallery, pe as defaultMediaLibraryStrings, ve as formatMediaLibrarySize, z as formatMediaLibraryString, ye as getMediaLibraryDimensions, _e as resolveMediaLibraryAccessors, Ee as useMediaLibrary };
+
+//# sourceMappingURL=media-library.js.map