admin-ui-starter-kit 0.1.3 → 0.4.2

package/dist/components/features/media-library/index.js

@@ -0,0 +1,1796 @@
+import { useStrings as e } from "../../../lib/strings.js";
+import { cn as t } from "../../../lib/utils.js";
+import { n } from "../../../_shared/heading-HeP06nXG.js";
+import { t as r } from "../../../_shared/badge-yGlx9trX.js";
+import { t as i } from "../../../_shared/button-SuocMQFT.js";
+import { i as a, r as o, t as s } from "../../../_shared/alert-k60OnTtb.js";
+import { t as c } from "../../../_shared/input-C7t-RHYq.js";
+import { H as l, b as u } from "../../../_shared/forms-CwJci54_.js";
+import { n as d } from "../../../_shared/form-field-B7taMVbC.js";
+import { n as f } from "../../../_shared/switch-BBP3u1z5.js";
+import { r as p } from "../../../_shared/overlays-CIeniDjj.js";
+import { createContext as m, useCallback as h, useContext as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { ArrowLeft as w, ArrowRight as T, Check as ee, File as E, Grid2X2 as D, ImageIcon as O, ImagePlus as k, Info as A, Layers3 as j, LayoutList as te, Lock as M, Play as ne, Plus as re, Search as N, Star as ie, Trash2 as ae, UploadCloud as P, Video as F, X as oe } from "lucide-react";
+import { createPortal as se } from "react-dom";
+//#region src/components/features/media-library/media-library.strings.ts
+var I = {
+	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",
+	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 L(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 ce = {
+	collection: void 0,
+	tags: [],
+	public: !0
+}, le = [], ue = {
+	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 de(e) {
+	return {
+		...ue,
+		...e ?? {}
+	};
+}
+function R(e) {
+	return !e || e <= 0 ? "" : e >= 1048576 ? `${(e / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(e / 1024))} KB`;
+}
+function z(e, t) {
+	let n = t.getWidth(e), r = t.getHeight(e);
+	return !n || !r ? "" : `${n} x ${r}`;
+}
+function B(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 fe(e) {
+	return e.type.startsWith("image/") ? "image" : e.type.startsWith("video/") ? "video" : "file";
+}
+function V(e) {
+	if (e.type.startsWith("image/") && !(typeof URL > "u" || typeof URL.createObjectURL != "function")) return URL.createObjectURL(e);
+}
+function H(e) {
+	!e || typeof URL > "u" || typeof URL.revokeObjectURL != "function" || URL.revokeObjectURL(e);
+}
+function U(e) {
+	return Array.isArray(e) ? {
+		items: e,
+		total: e.length
+	} : e;
+}
+function pe(e, t) {
+	return t && typeof e == "object" && e ? {
+		...e,
+		...t
+	} : e;
+}
+function me(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) : !0);
+}
+function he(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) => B(n, t) - B(e, t)), r;
+}
+function ge({ items: e = le, fetcher: t, accessors: n, selectionMode: r = "multiple", value: i, defaultValue: a = [], onValueChange: o, onItemUpdate: s, onItemDelete: c, onUpload: l, onError: u, initialTab: d = "library", defaultView: f = "grid", defaultQuery: p = "", defaultType: m = "all", defaultCollection: g = "all", defaultSort: x = "newest", defaultUploadOptions: S } = {}) {
+	let C = v(() => de(n), [n]), [w, T] = b(d), [ee, E] = b(f), [D, O] = b(p), [k, A] = b(m), [j, te] = b(g), [M, ne] = b(x), [re, N] = b(null), [ie, ae] = b(() => [...a]), [P, F] = b([]), [oe, se] = b(), [I, L] = b(!1), [ue, R] = b(null), [z, B] = b([]), [ge, W] = b(() => /* @__PURE__ */ new Set()), [_e, ve] = b({}), [G, K] = b([]), [q, ye] = b(!1), [be, xe] = b({
+		...ce,
+		...S,
+		tags: S?.tags ?? ce.tags
+	}), J = i !== void 0, Y = v(() => J ? [...i ?? []] : ie, [
+		ie,
+		J,
+		i
+	]), X = v(() => new Set(Y), [Y]), Z = y(/* @__PURE__ */ new Set());
+	_(() => {
+		if (!t) return;
+		let e = new AbortController();
+		return L(!0), R(null), t({
+			query: D,
+			type: k,
+			collection: j === "all" ? void 0 : j,
+			sort: M,
+			signal: e.signal
+		}).then((t) => {
+			if (e.signal.aborted) return;
+			let n = U(t);
+			F(n.items), se(n.total);
+		}).catch((t) => {
+			e.signal.aborted || (R(t), u?.(t));
+		}).finally(() => {
+			e.signal.aborted || L(!1);
+		}), () => e.abort();
+	}, [
+		j,
+		t,
+		u,
+		D,
+		M,
+		k
+	]), _(() => {
+		let e = Z.current;
+		return () => {
+			for (let t of e) H(t);
+			e.clear();
+		};
+	}, []);
+	let Se = v(() => t ? P : [...z, ...e], [
+		z,
+		P,
+		t,
+		e
+	]), Q = v(() => Se.filter((e) => !ge.has(C.getId(e))).map((e) => pe(e, _e[C.getId(e)])), [
+		C,
+		_e,
+		ge,
+		Se
+	]), Ce = v(() => {
+		let e = t ? Q : me(Q, C, D, k, j);
+		return t ? e : he(e, C, M);
+	}, [
+		C,
+		j,
+		t,
+		Q,
+		D,
+		M,
+		k
+	]), we = oe ?? Q.length, Te = Ce.length, Ee = v(() => Q.filter((e) => X.has(C.getId(e))), [
+		C,
+		Q,
+		X
+	]), De = !!D.trim() || k !== "all" || j !== "all", $ = h((e) => {
+		J || ae(e);
+		let t = new Set(e), n = Q.filter((e) => t.has(C.getId(e)));
+		o?.(e, n);
+	}, [
+		C,
+		J,
+		o,
+		Q
+	]), Oe = h((e) => {
+		let t = new Set(r === "single" ? [] : X);
+		X.has(e) && r !== "single" ? t.delete(e) : t.add(e), $(Array.from(t));
+	}, [
+		$,
+		X,
+		r
+	]), ke = h(() => $([]), [$]), Ae = h(() => {
+		O(""), A("all"), te("all");
+	}, []), je = h((e) => {
+		K((t) => [...t, ...e.map((e, t) => {
+			let n = V(e);
+			return n && Z.current.add(n), {
+				id: `staged-${Date.now()}-${t}`,
+				file: e,
+				name: e.name,
+				size: e.size,
+				type: fe(e),
+				src: n,
+				progress: 0,
+				status: "staged"
+			};
+		})]);
+	}, []), Me = h((e) => {
+		K((t) => {
+			let n = t.find((t) => t.id === e);
+			return n?.src && (H(n.src), Z.current.delete(n.src)), t.filter((t) => t.id !== e);
+		});
+	}, []), Ne = h(() => {
+		K((e) => {
+			for (let t of e) t.src && (H(t.src), Z.current.delete(t.src));
+			return [];
+		});
+	}, []), Pe = h((e) => {
+		xe((t) => ({
+			...t,
+			...e
+		}));
+	}, []), Fe = h((e, t) => {
+		K((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []);
+	return {
+		tab: w,
+		setTab: T,
+		view: ee,
+		setView: E,
+		query: D,
+		setQuery: O,
+		type: k,
+		setType: A,
+		collection: j,
+		setCollection: te,
+		sort: M,
+		setSort: ne,
+		detailId: re,
+		setDetailId: N,
+		items: Q,
+		visibleItems: Ce,
+		selectedIds: Y,
+		selectedItems: Ee,
+		selectedSet: X,
+		toggleSelection: Oe,
+		clearSelection: ke,
+		clearFilters: Ae,
+		loading: I,
+		error: ue,
+		hasFilters: De,
+		totalCount: we,
+		filteredCount: Te,
+		stagedFiles: G,
+		addFiles: je,
+		removeStagedFile: Me,
+		clearStagedFiles: Ne,
+		updateUploadOptions: Pe,
+		uploadOptions: be,
+		uploading: q,
+		startUpload: h(async () => {
+			if (q || G.length === 0) return;
+			ye(!0), K((e) => e.map((e) => ({
+				...e,
+				status: "uploading",
+				progress: 0
+			})));
+			let e = {
+				setProgress: (e, t) => {
+					Fe(e, { progress: Math.max(0, Math.min(100, t)) });
+				},
+				setFileStatus: (e, t, n) => Fe(e, {
+					status: t,
+					error: n
+				})
+			};
+			try {
+				let t = G.map((e) => e.file), n = await l?.(t, be, e);
+				if (K((e) => e.map((e) => ({
+					...e,
+					status: "done",
+					progress: 100
+				}))), n?.length) {
+					B((e) => [...n, ...e]);
+					let e = n.map((e) => C.getId(e));
+					$(r === "single" ? e.slice(0, 1) : Array.from(new Set([...e, ...Y])));
+				}
+				Ne(), T("library");
+			} catch (e) {
+				R(e), K((e) => e.map((e) => e.status === "uploading" ? {
+					...e,
+					status: "error",
+					error: "Upload failed"
+				} : e)), u?.(e);
+			} finally {
+				ye(!1);
+			}
+		}, [
+			C,
+			$,
+			Ne,
+			u,
+			l,
+			Y,
+			r,
+			Fe,
+			G,
+			be,
+			q
+		]),
+		updateItem: h((e, t) => {
+			let n = C.getId(e);
+			ve((e) => ({
+				...e,
+				[n]: {
+					...e[n],
+					...t
+				}
+			})), s?.(e, t);
+		}, [C, s]),
+		removeItem: h((e) => {
+			let t = C.getId(e);
+			W((e) => new Set(e).add(t)), X.has(t) && $(Y.filter((e) => e !== t)), c?.(e);
+		}, [
+			C,
+			$,
+			c,
+			Y,
+			X
+		]),
+		accessors: C
+	};
+}
+//#endregion
+//#region src/components/features/media-library/partials/media-library-partials.tsx
+function W(e, t) {
+	return S(e === "image" ? O : e === "video" ? F : E, { className: t ?? "size-4" });
+}
+function _e(e, t) {
+	return e === "image" ? t.typeImage : e === "video" ? t.typeVideo : t.typeFile;
+}
+function ve(e, t) {
+	return e ? L(t.usedIn, { count: e }) : t.notUsed;
+}
+function G({ children: e, tint: n, className: r }) {
+	return /* @__PURE__ */ S("div", {
+		className: t("media-library-preview relative overflow-hidden bg-muted", r),
+		style: n ? { background: n } : void 0,
+		children: e
+	});
+}
+function K({ src: e, alt: t, type: n, className: r, loading: i = "lazy" }) {
+	let [a, o] = b(!1);
+	return _(() => {
+		o(!1);
+	}, [e]), !e || a ? /* @__PURE__ */ S("div", {
+		className: "media-library-preview--fallback flex size-full items-center justify-center text-muted-foreground",
+		children: W(n, "size-6")
+	}) : /* @__PURE__ */ S("img", {
+		src: e,
+		alt: t,
+		loading: i,
+		className: r,
+		onError: () => o(!0)
+	});
+}
+function q({ icon: e, title: r, description: i, action: a, className: o }) {
+	return /* @__PURE__ */ C("div", {
+		className: t("media-library-empty-state--component flex min-h-64 flex-col items-center justify-center rounded-lg border border-dashed border-border bg-muted/20 px-6 py-10 text-center", o),
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "mb-3 inline-flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground",
+				children: e ?? /* @__PURE__ */ S(O, { className: "size-5" })
+			}),
+			/* @__PURE__ */ S(n, {
+				tag: "div",
+				weight: "semibold",
+				children: r
+			}),
+			!!i && /* @__PURE__ */ S(n, {
+				type: "secondary",
+				size: "xs",
+				className: "mt-1 max-w-sm",
+				children: i
+			}),
+			!!a && /* @__PURE__ */ S("div", {
+				className: "mt-4",
+				children: a
+			})
+		]
+	});
+}
+function ye({ query: e, type: n, typeFilters: r, collection: a, sort: o, view: s, collections: u = [], strings: d, onQueryChange: f, onTypeChange: p, onCollectionChange: m, onSortChange: h, onViewChange: g, onClearFilters: _, toolbarEnd: v }) {
+	let y = [
+		{
+			value: "all",
+			label: d.allTypes,
+			icon: null
+		},
+		{
+			value: "image",
+			label: d.images,
+			icon: O
+		},
+		{
+			value: "video",
+			label: d.videos,
+			icon: F
+		},
+		{
+			value: "file",
+			label: d.files,
+			icon: E
+		}
+	].filter((e) => (r ?? [
+		"all",
+		"image",
+		"video"
+	]).includes(e.value)), b = [{
+		value: "all",
+		label: d.allCollections
+	}, ...u.map((e) => ({
+		value: e.value,
+		label: String(e.label)
+	}))], x = [
+		{
+			value: "newest",
+			label: d.sortNewest
+		},
+		{
+			value: "name",
+			label: d.sortName
+		},
+		{
+			value: "size",
+			label: d.sortSize
+		},
+		{
+			value: "usage",
+			label: d.sortUsage
+		}
+	];
+	return /* @__PURE__ */ C("div", {
+		className: "media-library-toolbar--component flex flex-wrap items-center gap-2",
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "min-w-52 flex-1",
+				children: /* @__PURE__ */ S(c, {
+					value: e,
+					onChange: (e) => f(e.target.value),
+					placeholder: d.searchPlaceholder,
+					startIcon: N,
+					clearable: !0,
+					onClear: () => f(""),
+					strings: { clear: d.clearSearch },
+					className: "rounded-full bg-muted/20"
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "media-library-toolbar--type-toggle flex h-9 items-center rounded-md bg-muted p-0.5",
+				role: "tablist",
+				"aria-label": d.typeFilterLabel,
+				children: y.map((e) => {
+					let r = e.icon, a = n === e.value;
+					return /* @__PURE__ */ C(i, {
+						type: "button",
+						role: "tab",
+						"aria-selected": a,
+						variant: "secondary",
+						buttonStyle: "ghost",
+						className: t("h-8 rounded-sm px-3 text-xs shadow-none", a ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+						onClick: () => p(e.value),
+						children: [r && /* @__PURE__ */ S(r, { className: "size-3.5" }), e.label]
+					}, e.value);
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "min-w-40",
+				children: /* @__PURE__ */ S(l, {
+					value: a,
+					options: b,
+					onChange: (e) => m(e ?? "all"),
+					placeholder: d.collectionFilterLabel,
+					"aria-label": d.collectionFilterLabel,
+					className: "bg-background"
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "min-w-32",
+				children: /* @__PURE__ */ S(l, {
+					value: o,
+					options: x,
+					onChange: (e) => h(e ?? "newest"),
+					placeholder: d.sortLabel,
+					"aria-label": d.sortLabel,
+					className: "bg-background"
+				})
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "media-library-toolbar--view-toggle ml-auto flex h-9 items-center rounded-md bg-muted p-0.5",
+				children: [/* @__PURE__ */ S(i, {
+					type: "button",
+					variant: s === "grid" ? "dark" : "secondary",
+					buttonStyle: s === "grid" ? "solid" : "ghost",
+					size: "icon-xs",
+					className: t(s === "grid" && "bg-background text-foreground shadow-xs hover:bg-background"),
+					"aria-label": d.gridView,
+					onClick: () => g("grid"),
+					children: /* @__PURE__ */ S(D, { className: "size-3.5" })
+				}), /* @__PURE__ */ S(i, {
+					type: "button",
+					variant: s === "table" ? "dark" : "secondary",
+					buttonStyle: s === "table" ? "solid" : "ghost",
+					size: "icon-xs",
+					className: t(s === "table" && "bg-background text-foreground shadow-xs hover:bg-background"),
+					"aria-label": d.tableView,
+					onClick: () => g("table"),
+					children: /* @__PURE__ */ S(te, { className: "size-3.5" })
+				})]
+			}),
+			!!e && /* @__PURE__ */ S(i, {
+				type: "button",
+				variant: "secondary",
+				buttonStyle: "ghost",
+				onClick: _,
+				children: d.clearFilters
+			}),
+			v
+		]
+	});
+}
+function be({ item: e, selected: a = !1, density: o = "comfortable", showMeta: s = !0, accessors: c, strings: l, onToggle: u, onDetails: d, className: f }) {
+	let p = c.getType(e), m = c.getName(e), h = c.getSrc(e), g = c.getAlt(e) || m, _ = c.getSize(e), v = c.getUsageCount(e), y = c.getPublic(e) === !1, b = c.getDuration(e);
+	return /* @__PURE__ */ C("div", {
+		"data-selected": a || void 0,
+		"data-density": o,
+		className: t("media-library-card--component group/card overflow-hidden rounded-xl 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", a && "media-library-card--selected border-primary ring-1 ring-primary", f),
+		onClick: u,
+		children: [/* @__PURE__ */ C(G, {
+			tint: c.getTint(e),
+			className: t(o === "compact" ? "aspect-square" : "aspect-[4/3]"),
+			children: [
+				/* @__PURE__ */ S(K, {
+					src: h,
+					alt: g,
+					type: p,
+					className: "size-full object-cover"
+				}),
+				/* @__PURE__ */ S("span", {
+					className: t("media-library-card--check absolute left-2 top-2 inline-flex size-5 items-center justify-center rounded-md border border-border bg-background/95 text-transparent opacity-0 shadow-xs backdrop-blur transition-opacity group-hover/card:opacity-100 group-focus-visible/card:opacity-100", a && "bg-primary text-primary-foreground opacity-100"),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ S(ee, { className: "size-3" })
+				}),
+				!!d && /* @__PURE__ */ S(i, {
+					type: "button",
+					variant: "secondary",
+					buttonStyle: "solid",
+					size: "icon-xs",
+					className: "media-library-card--details absolute right-2 top-2 opacity-0 shadow-sm transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100",
+					"aria-label": L(l.cardDetails, { name: m }),
+					onClick: (e) => {
+						e.stopPropagation(), d();
+					},
+					children: /* @__PURE__ */ S(A, { className: "size-3.5" })
+				}),
+				p === "video" && !!b && /* @__PURE__ */ C(r, {
+					variant: "secondary",
+					className: "media-library-card--duration absolute bottom-2 left-2 bg-foreground text-background",
+					children: [/* @__PURE__ */ S(ne, { className: "size-3 fill-current" }), b]
+				}),
+				y && /* @__PURE__ */ S(r, {
+					variant: "secondary",
+					className: "media-library-card--private absolute bottom-2 right-2 bg-background/90",
+					children: /* @__PURE__ */ S(M, { className: "size-3" })
+				})
+			]
+		}), /* @__PURE__ */ C("div", {
+			className: "media-library-card--body grid gap-1 px-3 py-2.5",
+			children: [/* @__PURE__ */ S(n, {
+				tag: "div",
+				weight: "semibold",
+				size: "xs",
+				className: "truncate",
+				children: m
+			}), s && /* @__PURE__ */ C("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					className: "truncate",
+					children: R(_) || l.unknownSize
+				}), !!v && /* @__PURE__ */ C(n, {
+					tag: "span",
+					size: "xxs",
+					type: "secondary",
+					className: "ml-auto inline-flex items-center gap-1",
+					children: [/* @__PURE__ */ S(j, { className: "size-3" }), v]
+				})]
+			})]
+		})]
+	});
+}
+function xe({ items: e, selectedSet: a, accessors: o, strings: s, onToggle: c, onDetails: l }) {
+	return /* @__PURE__ */ C("div", {
+		className: "media-library-table--component min-w-[720px]",
+		children: [/* @__PURE__ */ C("div", {
+			className: "sticky top-0 z-10 grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-3 border-b border-border bg-background px-3 py-2",
+			children: [
+				/* @__PURE__ */ S("span", {}),
+				/* @__PURE__ */ S("span", {}),
+				/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					weight: "semibold",
+					children: s.table.name
+				}),
+				/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					weight: "semibold",
+					children: s.table.type
+				}),
+				/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					weight: "semibold",
+					children: s.table.size
+				}),
+				/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					weight: "semibold",
+					children: s.table.collection
+				}),
+				/* @__PURE__ */ S(n, {
+					size: "xxs",
+					type: "secondary",
+					weight: "semibold",
+					children: s.table.used
+				}),
+				/* @__PURE__ */ S("span", {})
+			]
+		}), e.map((e) => {
+			let u = o.getId(e), d = a.has(u), f = o.getType(e), p = o.getName(e), m = o.getSrc(e), h = o.getPublic(e) === !1;
+			return /* @__PURE__ */ C("div", {
+				"data-selected": d || void 0,
+				className: t("media-library-table--row grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-3 border-b border-border/60 px-3 py-2 last:border-b-0", "cursor-pointer rounded-lg transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", d && "bg-primary/10"),
+				onClick: () => c(u),
+				children: [
+					/* @__PURE__ */ S("span", {
+						className: t("inline-flex size-5 items-center justify-center rounded-md border border-border text-transparent", d && "border-primary bg-primary text-primary-foreground"),
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ S(ee, { className: "size-3" })
+					}),
+					/* @__PURE__ */ S(G, {
+						tint: o.getTint(e),
+						className: "size-9 rounded-md",
+						children: m ? /* @__PURE__ */ S("img", {
+							src: m,
+							alt: "",
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ S("div", {
+							className: "flex size-full items-center justify-center text-muted-foreground",
+							children: W(f, "size-4")
+						})
+					}),
+					/* @__PURE__ */ C(n, {
+						tag: "div",
+						weight: "semibold",
+						size: "xs",
+						className: "flex min-w-0 items-center gap-1 truncate",
+						children: [/* @__PURE__ */ S("span", {
+							className: "truncate",
+							children: p
+						}), h && /* @__PURE__ */ S(M, { className: "size-3 shrink-0 text-muted-foreground" })]
+					}),
+					/* @__PURE__ */ S(r, {
+						variant: "secondary",
+						children: _e(f, s)
+					}),
+					/* @__PURE__ */ S(n, {
+						size: "xs",
+						type: "secondary",
+						children: R(o.getSize(e)) || s.unknownSize
+					}),
+					/* @__PURE__ */ S(n, {
+						size: "xs",
+						type: "secondary",
+						className: "truncate",
+						children: o.getCollection(e) || "-"
+					}),
+					/* @__PURE__ */ S(n, {
+						size: "xs",
+						type: "secondary",
+						children: o.getUsageCount(e) ? o.getUsageCount(e) : "-"
+					}),
+					/* @__PURE__ */ S(i, {
+						type: "button",
+						variant: "secondary",
+						buttonStyle: "ghost",
+						size: "icon-xs",
+						"aria-label": L(s.cardDetails, { name: p }),
+						onClick: (e) => {
+							e.stopPropagation(), l(u);
+						},
+						children: /* @__PURE__ */ S(A, { className: "size-3.5" })
+					})
+				]
+			}, u);
+		})]
+	});
+}
+function J({ item: e, collections: t = [], accessors: a, strings: o, onClose: s, onUpdate: u, onRemove: p, renderDetail: m }) {
+	if (!e) return null;
+	let h = a.getName(e), g = a.getType(e), _ = a.getSrc(e), v = a.getCollection(e) ?? t[0]?.value ?? "", y = a.getTags(e), b = a.getPublic(e) ?? !0, T = m?.(e, {
+		accessors: a,
+		update: u,
+		remove: p,
+		close: s
+	});
+	return T ? /* @__PURE__ */ S(x, { children: T }) : /* @__PURE__ */ C("aside", {
+		className: "media-library-detail-panel--component flex min-h-0 w-full flex-col border-l border-border bg-background lg:w-72",
+		children: [/* @__PURE__ */ C("div", {
+			className: "media-library-detail-panel--header flex items-center gap-2 border-b border-border px-3 py-2.5",
+			children: [/* @__PURE__ */ S(i, {
+				type: "button",
+				variant: "secondary",
+				buttonStyle: "ghost",
+				size: "icon-xs",
+				"aria-label": o.detail.close,
+				onClick: s,
+				children: /* @__PURE__ */ S(w, { className: "size-3.5" })
+			}), /* @__PURE__ */ S(n, {
+				weight: "semibold",
+				children: o.detail.title
+			})]
+		}), /* @__PURE__ */ C("div", {
+			className: "media-library-detail-panel--body grid min-h-0 gap-4 overflow-y-auto p-4",
+			children: [
+				/* @__PURE__ */ C(G, {
+					tint: a.getTint(e),
+					className: "aspect-[4/3] rounded-lg border border-border",
+					children: [/* @__PURE__ */ S(K, {
+						src: _,
+						alt: a.getAlt(e) || h,
+						type: g,
+						className: "size-full object-cover"
+					}), g === "video" && !!a.getDuration(e) && /* @__PURE__ */ C(r, {
+						className: "absolute bottom-2 right-2 bg-foreground text-background",
+						children: [/* @__PURE__ */ S(ne, { className: "size-3 fill-current" }), a.getDuration(e)]
+					})]
+				}),
+				/* @__PURE__ */ S(n, {
+					tag: "div",
+					weight: "semibold",
+					className: "break-words",
+					children: h
+				}),
+				/* @__PURE__ */ S("dl", {
+					className: "media-library-detail-panel--facts grid gap-2",
+					children: [
+						[o.detail.type, _e(g, o)],
+						[o.detail.size, R(a.getSize(e)) || o.unknownSize],
+						[o.detail.dimensions, z(e, a) || "-"],
+						[o.detail.uploaded, String(a.getUploadedAt(e) ?? "-")],
+						[o.detail.usedIn, ve(a.getUsageCount(e), o)]
+					].map(([e, t]) => /* @__PURE__ */ C("div", {
+						className: "flex justify-between gap-4",
+						children: [/* @__PURE__ */ S("dt", { children: /* @__PURE__ */ S(n, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							children: e
+						}) }), /* @__PURE__ */ S("dd", {
+							className: "m-0 text-right",
+							children: /* @__PURE__ */ S(n, {
+								tag: "span",
+								size: "xs",
+								weight: "medium",
+								children: t
+							})
+						})]
+					}, e))
+				}),
+				/* @__PURE__ */ S(d, {
+					label: o.detail.altText,
+					children: /* @__PURE__ */ S(c, {
+						value: a.getAlt(e) ?? "",
+						placeholder: o.detail.altPlaceholder,
+						onChange: (e) => u({ alt: e.target.value })
+					})
+				}),
+				/* @__PURE__ */ S(d, {
+					label: o.detail.collection,
+					children: /* @__PURE__ */ S(l, {
+						value: v,
+						options: t.map((e) => ({
+							value: e.value,
+							label: String(e.label)
+						})),
+						"aria-label": o.detail.collection,
+						onChange: (e) => u({ collection: e })
+					})
+				}),
+				/* @__PURE__ */ S(d, {
+					label: o.detail.tags,
+					children: /* @__PURE__ */ S(c, {
+						value: y.join(", "),
+						placeholder: o.detail.tagsPlaceholder,
+						onChange: (e) => u({ tags: e.target.value.split(",").map((e) => e.trim()).filter(Boolean) })
+					})
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "media-library-detail-panel--public flex items-center justify-between gap-4 rounded-lg border border-border bg-muted/20 p-3",
+					children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(n, {
+						weight: "semibold",
+						size: "xs",
+						children: o.detail.public
+					}), /* @__PURE__ */ S(n, {
+						size: "xxs",
+						type: "secondary",
+						children: b ? o.detail.publicHint : o.detail.privateHint
+					})] }), /* @__PURE__ */ S(f, {
+						checked: b,
+						onCheckedChange: (e) => u({ public: e })
+					})]
+				}),
+				/* @__PURE__ */ C("div", {
+					className: "media-library-detail-panel--actions flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ C(i, {
+						type: "button",
+						variant: "secondary",
+						buttonStyle: "outline",
+						children: [/* @__PURE__ */ S(P, { className: "size-3.5" }), o.detail.replace]
+					}), /* @__PURE__ */ C(i, {
+						type: "button",
+						variant: "error",
+						buttonStyle: "ghost",
+						onClick: p,
+						children: [/* @__PURE__ */ S(ae, { className: "size-3.5" }), o.detail.delete]
+					})]
+				})
+			]
+		})]
+	});
+}
+function Y({ stagedFiles: e, uploadOptions: t, collections: a = [], uploading: o = !1, strings: s, onFiles: p, onRemoveFile: m, onOptionsChange: h, empty: g }) {
+	return /* @__PURE__ */ C("div", {
+		className: "media-library-upload-panel--component grid gap-4 p-4",
+		children: [
+			/* @__PURE__ */ S(u, {
+				onDrop: p,
+				accept: "image/*,video/*",
+				multiple: !0,
+				size: "base",
+				strings: {
+					instruction: s.upload.dropTitle,
+					helper: s.upload.dropHint,
+					dragOver: s.upload.dragOver
+				}
+			}),
+			e.length > 0 ? /* @__PURE__ */ S("div", {
+				className: "media-library-upload-panel--staged grid gap-2",
+				children: e.map((e) => /* @__PURE__ */ C("div", {
+					className: "media-library-upload-panel--staged-file flex items-center gap-3 rounded-lg border border-border bg-card p-2",
+					children: [
+						/* @__PURE__ */ S(G, {
+							className: "size-10 rounded-md",
+							children: e.src ? /* @__PURE__ */ S("img", {
+								src: e.src,
+								alt: e.name,
+								className: "size-full object-cover"
+							}) : /* @__PURE__ */ S("div", {
+								className: "flex size-full items-center justify-center text-muted-foreground",
+								children: W(e.type, "size-4")
+							})
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "flex items-baseline gap-3",
+									children: [/* @__PURE__ */ S(n, {
+										weight: "semibold",
+										size: "xs",
+										className: "truncate",
+										children: e.name
+									}), /* @__PURE__ */ S(n, {
+										size: "xxs",
+										type: "secondary",
+										className: "ml-auto shrink-0",
+										children: R(e.size)
+									})]
+								}),
+								(e.status === "uploading" || e.status === "done") && /* @__PURE__ */ S("div", {
+									className: "mt-2 h-1 overflow-hidden rounded-full bg-muted",
+									children: /* @__PURE__ */ S("div", {
+										className: "h-full rounded-full bg-primary transition-[width]",
+										style: { width: `${e.progress}%` }
+									})
+								}),
+								e.status === "error" && /* @__PURE__ */ S(n, {
+									size: "xxs",
+									type: "error",
+									children: e.error
+								})
+							]
+						}),
+						e.status === "done" ? /* @__PURE__ */ S(r, {
+							variant: "success",
+							children: s.upload.done
+						}) : e.status === "uploading" ? /* @__PURE__ */ C(n, {
+							size: "xxs",
+							type: "secondary",
+							className: "tabular-nums",
+							children: [Math.round(e.progress), "%"]
+						}) : /* @__PURE__ */ S(i, {
+							type: "button",
+							variant: "secondary",
+							buttonStyle: "ghost",
+							size: "icon-xs",
+							disabled: o,
+							"aria-label": L(s.upload.removeFile, { name: e.name }),
+							onClick: () => m(e.id),
+							children: /* @__PURE__ */ S(oe, { className: "size-3.5" })
+						})
+					]
+				}, e.id))
+			}) : g,
+			/* @__PURE__ */ C("div", {
+				className: "media-library-upload-panel--options grid gap-3 rounded-lg border border-border bg-muted/20 p-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]",
+				children: [
+					/* @__PURE__ */ S(d, {
+						label: s.upload.collection,
+						children: /* @__PURE__ */ S(l, {
+							value: t.collection ?? a[0]?.value,
+							options: a.map((e) => ({
+								value: e.value,
+								label: String(e.label)
+							})),
+							"aria-label": s.upload.collection,
+							onChange: (e) => h({ collection: e })
+						})
+					}),
+					/* @__PURE__ */ S(d, {
+						label: s.upload.tags,
+						children: /* @__PURE__ */ S(c, {
+							value: t.tags.join(", "),
+							placeholder: s.upload.tagsPlaceholder,
+							onChange: (e) => h({ tags: e.target.value.split(",").map((e) => e.trim()).filter(Boolean) })
+						})
+					}),
+					/* @__PURE__ */ C("div", {
+						className: "flex items-center justify-between gap-4 md:self-end",
+						children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(n, {
+							weight: "semibold",
+							size: "xs",
+							children: s.upload.public
+						}), /* @__PURE__ */ S(n, {
+							size: "xxs",
+							type: "secondary",
+							children: s.upload.publicHint
+						})] }), /* @__PURE__ */ S(f, {
+							checked: t.public,
+							onCheckedChange: (e) => h({ public: e })
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+function X({ tab: e, selectedIds: r, selectionMode: a, stagedFiles: o, strings: s, onClearSelection: c, className: l }) {
+	let u = r.length, d = o.reduce((e, t) => e + t.size, 0), f = o.length, p = t("media-library-footer-summary--component flex min-w-0 items-center gap-3", l);
+	return e === "upload" ? /* @__PURE__ */ S("div", {
+		className: p,
+		"aria-live": "polite",
+		children: /* @__PURE__ */ S(n, {
+			size: "xs",
+			type: "secondary",
+			className: "truncate",
+			children: f === 0 ? s.footer.noFiles : L(s.footer.stagedSummary, {
+				count: f,
+				size: R(d)
+			})
+		})
+	}) : /* @__PURE__ */ S("div", {
+		className: p,
+		"aria-live": "polite",
+		children: u > 0 ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(n, {
+			weight: "semibold",
+			size: "xs",
+			className: "whitespace-nowrap",
+			children: L(s.footer.selectedCount, { count: u })
+		}), /* @__PURE__ */ S(i, {
+			type: "button",
+			variant: "secondary",
+			buttonStyle: "ghost",
+			size: "xs",
+			onClick: c,
+			children: s.footer.clear
+		})] }) : /* @__PURE__ */ S(n, {
+			size: "xs",
+			type: "secondary",
+			className: "truncate",
+			children: a === "single" ? s.footer.pickOne : s.footer.pickMany
+		})
+	});
+}
+function Z({ tab: e, selectedItems: n, selectedIds: r, stagedFiles: a, uploading: o = !1, strings: s, confirmLabel: c, cancelLabel: l, onCancel: u, onConfirm: d, onUpload: f, onCancelUpload: p, className: m }) {
+	let h = r.length, g = a.length;
+	return e === "upload" ? /* @__PURE__ */ C("div", {
+		className: t("media-library-footer-actions--component flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", m),
+		children: [/* @__PURE__ */ S(i, {
+			type: "button",
+			variant: "secondary",
+			buttonStyle: "ghost",
+			disabled: o,
+			onClick: p,
+			children: l ?? s.footer.cancel
+		}), /* @__PURE__ */ S(i, {
+			type: "button",
+			disabled: g === 0 || o,
+			onClick: f,
+			loading: o,
+			loadingLabels: { loading: s.footer.uploading },
+			children: g <= 1 ? s.footer.upload : L(s.footer.uploadMany, { count: g })
+		})]
+	}) : /* @__PURE__ */ C("div", {
+		className: t("media-library-footer-actions--component flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", m),
+		children: [/* @__PURE__ */ S(i, {
+			type: "button",
+			variant: "secondary",
+			buttonStyle: "ghost",
+			onClick: u,
+			children: l ?? s.footer.cancel
+		}), /* @__PURE__ */ S(i, {
+			type: "button",
+			disabled: h === 0,
+			onClick: d,
+			children: c ?? (h === 0 ? s.footer.confirmEmpty : n.length === 1 ? s.footer.confirmOne : L(s.footer.confirmMany, { count: h }))
+		})]
+	});
+}
+function Se({ 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__ */ C("footer", {
+		className: t("media-library-footer--component flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", h === "section" && "border-t border-border bg-background px-4 py-3", g),
+		children: [/* @__PURE__ */ S(X, {
+			tab: e,
+			selectedIds: r,
+			selectionMode: i,
+			stagedFiles: a,
+			strings: s,
+			onClearSelection: f
+		}), /* @__PURE__ */ S(Z, {
+			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 Q = m(null);
+function Ce(e, t, n) {
+	return v(() => {
+		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 we({ title: r, description: c, confirmLabel: l, cancelLabel: u, selectionMode: d = "multiple", density: f = "comfortable", showMeta: p = !0, allowUpload: m = !0, typeFilters: h, confirmOnSelect: _ = !1, onConfirm: v, onCancel: y, onClose: b, strings: x, slots: w, heightClassName: T, className: ee, items: E, fetcher: D, accessors: k, collections: A, value: j, defaultValue: te, onValueChange: M, onItemUpdate: ne, onItemDelete: re, onUpload: N, onError: ie, initialTab: ae, defaultView: F, defaultQuery: oe, defaultType: ce, defaultCollection: le, defaultSort: ue, defaultUploadOptions: de, ...R }) {
+	let z = e(I, x), B = ge({
+		items: E,
+		fetcher: D,
+		accessors: k,
+		collections: A,
+		selectionMode: d,
+		value: j,
+		defaultValue: te,
+		onValueChange: M,
+		onItemUpdate: ne,
+		onItemDelete: re,
+		onUpload: N,
+		onError: ie,
+		initialTab: ae,
+		defaultView: F,
+		defaultQuery: oe,
+		defaultType: ce,
+		defaultCollection: le,
+		defaultSort: ue,
+		defaultUploadOptions: de
+	}), fe = Ce(A, B.items, B.accessors.getCollection), V = m ? B.tab : "library", H = B.detailId ? B.items.find((e) => B.accessors.getId(e) === B.detailId) ?? null : null, U = g(Q), pe = !w?.footer, me = U && pe ? /* @__PURE__ */ S(X, {
+		tab: V,
+		selectedIds: B.selectedIds,
+		selectionMode: d,
+		stagedFiles: B.stagedFiles,
+		strings: z,
+		onClearSelection: B.clearSelection,
+		className: "media-library-dialog--selection-summary shrink-0 justify-end"
+	}) : null, he = !!(r || c || w?.headerStart), W = !!(m || w?.headerEnd || me), _e = he || W, ve = () => {
+		v?.(B.selectedItems, B.selectedIds), b?.();
+	}, G = () => {
+		y?.(), b?.();
+	}, K = (e) => {
+		let t = B.accessors.getId(e);
+		B.toggleSelection(t), _ && (v?.([e], [t]), b?.());
+	}, we = B.filteredCount === B.totalCount ? L(z.countAll, { count: B.totalCount }) : L(z.countFiltered, {
+		count: B.filteredCount,
+		total: B.totalCount
+	}), Te = w?.footer ?? (U ? /* @__PURE__ */ S(Z, {
+		tab: V,
+		selectedItems: B.selectedItems,
+		selectedIds: B.selectedIds,
+		stagedFiles: B.stagedFiles,
+		uploading: B.uploading,
+		strings: z,
+		confirmLabel: l,
+		cancelLabel: u,
+		onCancel: G,
+		onConfirm: ve,
+		onUpload: B.startUpload,
+		onCancelUpload: () => {
+			B.clearStagedFiles(), B.setTab("library");
+		},
+		className: "ml-auto"
+	}) : /* @__PURE__ */ S(Se, {
+		tab: V,
+		selectedItems: B.selectedItems,
+		selectedIds: B.selectedIds,
+		selectionMode: d,
+		stagedFiles: B.stagedFiles,
+		uploading: B.uploading,
+		strings: z,
+		confirmLabel: l,
+		cancelLabel: u,
+		onCancel: G,
+		onConfirm: ve,
+		onClearSelection: B.clearSelection,
+		onUpload: B.startUpload,
+		onCancelUpload: () => {
+			B.clearStagedFiles(), B.setTab("library");
+		}
+	}));
+	return /* @__PURE__ */ C("section", {
+		className: t("media-library--component flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background", T ?? "h-[min(760px,calc(100vh-7rem))]", ee),
+		...R,
+		children: [
+			_e && /* @__PURE__ */ C("header", {
+				className: "media-library--header flex flex-col gap-3 border-b border-border px-4 py-3 lg:flex-row lg:items-center lg:justify-between",
+				children: [he && /* @__PURE__ */ C("div", {
+					className: "flex min-w-0 items-start gap-3",
+					children: [w?.headerStart, (r || c) && /* @__PURE__ */ C("div", {
+						className: "min-w-0",
+						children: [!!r && /* @__PURE__ */ S(n, {
+							tag: "div",
+							weight: "semibold",
+							children: r
+						}), !!c && /* @__PURE__ */ S(n, {
+							size: "xs",
+							type: "secondary",
+							className: "mt-0.5",
+							children: c
+						})]
+					})]
+				}), W && /* @__PURE__ */ C("div", {
+					className: t("flex min-w-0 flex-wrap items-center gap-2", me ? "flex-1 justify-between" : "lg:justify-end"),
+					children: [/* @__PURE__ */ C("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-2",
+						children: [m && /* @__PURE__ */ C("div", {
+							className: "media-library--tabs flex items-center rounded-md bg-muted p-0.5",
+							role: "tablist",
+							children: [/* @__PURE__ */ C(i, {
+								type: "button",
+								role: "tab",
+								"aria-selected": V === "library",
+								variant: "secondary",
+								buttonStyle: "ghost",
+								className: t("h-8 rounded-sm px-3 shadow-none", V === "library" ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+								onClick: () => B.setTab("library"),
+								children: [/* @__PURE__ */ S(O, { className: "size-3.5" }), z.tabs.library]
+							}), /* @__PURE__ */ C(i, {
+								type: "button",
+								role: "tab",
+								"aria-selected": V === "upload",
+								variant: "secondary",
+								buttonStyle: "ghost",
+								className: t("h-8 rounded-sm px-3 shadow-none", V === "upload" ? "bg-background text-foreground shadow-xs hover:bg-background" : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+								onClick: () => B.setTab("upload"),
+								children: [
+									/* @__PURE__ */ S(P, { className: "size-3.5" }),
+									z.tabs.upload,
+									B.stagedFiles.length > 0 && /* @__PURE__ */ S("span", {
+										className: "rounded-full bg-background/20 px-1.5 text-xxs tabular-nums",
+										children: B.stagedFiles.length
+									})
+								]
+							})]
+						}), w?.headerEnd]
+					}), me]
+				})]
+			}),
+			/* @__PURE__ */ C("div", {
+				className: "media-library--body flex min-h-0 flex-1",
+				children: [V === "upload" ? /* @__PURE__ */ S("div", {
+					className: "min-w-0 flex-1 overflow-y-auto",
+					children: /* @__PURE__ */ S(Y, {
+						stagedFiles: B.stagedFiles,
+						uploadOptions: B.uploadOptions,
+						collections: fe,
+						uploading: B.uploading,
+						strings: z,
+						onFiles: B.addFiles,
+						onRemoveFile: B.removeStagedFile,
+						onOptionsChange: B.updateUploadOptions,
+						empty: w?.uploadEmpty
+					})
+				}) : /* @__PURE__ */ C("div", {
+					className: t("media-library--library min-w-0 flex-1 flex-col", H ? "hidden lg:flex" : "flex"),
+					children: [/* @__PURE__ */ C("div", {
+						className: "media-library--toolbar border-b border-border/70 px-4 py-3",
+						children: [/* @__PURE__ */ S(ye, {
+							query: B.query,
+							type: B.type,
+							typeFilters: h,
+							collection: B.collection,
+							sort: B.sort,
+							view: B.view,
+							collections: fe,
+							strings: z,
+							onQueryChange: B.setQuery,
+							onTypeChange: B.setType,
+							onCollectionChange: B.setCollection,
+							onSortChange: B.setSort,
+							onViewChange: B.setView,
+							onClearFilters: B.clearFilters,
+							toolbarEnd: w?.toolbarEnd
+						}), /* @__PURE__ */ S(n, {
+							size: "xs",
+							type: "secondary",
+							className: "mt-2",
+							"aria-live": "polite",
+							children: we
+						})]
+					}), /* @__PURE__ */ S("div", {
+						className: "media-library--results min-h-0 flex-1 overflow-y-auto p-4",
+						children: B.loading ? w?.loading ?? /* @__PURE__ */ S("div", {
+							className: "flex min-h-64 items-center justify-center",
+							children: /* @__PURE__ */ S(n, {
+								type: "secondary",
+								children: z.loading
+							})
+						}) : B.error ? w?.error ?? /* @__PURE__ */ C(s, {
+							variant: "destructive",
+							children: [/* @__PURE__ */ S(a, { children: z.errorTitle }), /* @__PURE__ */ S(o, { children: z.errorDescription })]
+						}) : B.visibleItems.length === 0 ? w?.empty ?? /* @__PURE__ */ S(q, {
+							title: B.hasFilters ? z.emptyFilteredTitle : z.emptyLibraryTitle,
+							description: B.hasFilters ? z.emptyFilteredDescription : z.emptyLibraryDescription,
+							action: B.hasFilters ? /* @__PURE__ */ S(i, {
+								type: "button",
+								variant: "secondary",
+								buttonStyle: "outline",
+								onClick: B.clearFilters,
+								children: z.clearFilters
+							}) : m ? /* @__PURE__ */ C(i, {
+								type: "button",
+								onClick: () => B.setTab("upload"),
+								children: [/* @__PURE__ */ S(P, { className: "size-3.5" }), z.uploadMedia]
+							}) : void 0
+						}) : B.view === "table" ? /* @__PURE__ */ S("div", {
+							className: "overflow-x-auto",
+							children: /* @__PURE__ */ S(xe, {
+								items: B.visibleItems,
+								selectedSet: B.selectedSet,
+								selectionMode: d,
+								accessors: B.accessors,
+								strings: z,
+								onToggle: (e) => {
+									let t = B.items.find((t) => B.accessors.getId(t) === e);
+									t && K(t);
+								},
+								onDetails: B.setDetailId
+							})
+						}) : /* @__PURE__ */ S("div", {
+							className: t("media-library--grid grid gap-3", f === "compact" ? "grid-cols-[repeat(auto-fill,minmax(136px,1fr))]" : "grid-cols-[repeat(auto-fill,minmax(168px,1fr))]"),
+							children: B.visibleItems.map((e) => {
+								let t = B.accessors.getId(e), n = {
+									id: t,
+									selected: B.selectedSet.has(t),
+									selectionMode: d,
+									accessors: B.accessors,
+									toggle: () => K(e),
+									openDetails: () => B.setDetailId(t)
+								}, r = w?.renderItem?.(e, n);
+								return r ? /* @__PURE__ */ S("div", { children: r }, t) : /* @__PURE__ */ S(be, {
+									item: e,
+									selected: n.selected,
+									density: f,
+									showMeta: p,
+									selectionMode: d,
+									accessors: B.accessors,
+									strings: z,
+									onToggle: n.toggle,
+									onDetails: n.openDetails
+								}, t);
+							})
+						})
+					})]
+				}), V === "library" && /* @__PURE__ */ S(J, {
+					item: H,
+					collections: fe,
+					accessors: B.accessors,
+					strings: z,
+					onClose: () => B.setDetailId(null),
+					onUpdate: (e) => H && B.updateItem(H, e),
+					onRemove: () => {
+						H && (B.removeItem(H), B.setDetailId(null));
+					},
+					renderDetail: w?.renderDetail
+				})]
+			}),
+			U ? U.element ? se(Te, U.element) : null : Te
+		]
+	});
+}
+function Te({ open: n, onOpenChange: r, trigger: i, dialogTitle: a, dialogDescription: o, onClose: s, className: c, dialogClassName: l, contentClassName: u, closeOnEscape: d = !0, closeOnBackdropClick: f = !0, ...m }) {
+	let h = e(I, m.strings), [g, _] = b(!1), [v, y] = b(null), x = n !== void 0, C = x ? n : g, w = (e) => {
+		x || _(e), r?.(e);
+	}, T = () => {
+		w(!1), s?.();
+	};
+	return /* @__PURE__ */ S(Q.Provider, {
+		value: { element: v },
+		children: /* @__PURE__ */ S(p, {
+			open: C,
+			onOpenChange: w,
+			onClose: s,
+			trigger: i,
+			title: a ?? h.title,
+			description: o ?? h.description,
+			size: "full",
+			showCancel: !1,
+			showConfirm: !1,
+			footer: /* @__PURE__ */ S("div", {
+				ref: y,
+				className: "media-library-dialog--footer"
+			}),
+			className: t("media-library-dialog--component max-h-[calc(100vh-2rem)] max-w-[min(1060px,calc(100vw-2rem))]", l),
+			contentClassName: t("media-library-dialog--body flex min-h-0 flex-col overflow-hidden p-0", u),
+			closeOnBackdropClick: f,
+			closeOnEscape: d,
+			children: /* @__PURE__ */ S(we, {
+				...m,
+				onClose: T,
+				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 Ee(e, t, n) {
+	let r = e.slice(), [i] = r.splice(t, 1);
+	return i === void 0 || r.splice(n, 0, i), r;
+}
+function De({ items: a, accessors: o, title: s, description: c, primaryId: l, onPrimaryChange: u, onRemove: d, onReorder: f, onAdd: p, maxItems: m, layout: h = "field", density: g = "comfortable", readOnly: _ = !1, empty: v, action: y, renderItem: b, strings: x, className: ee, ...D }) {
+	let O = e(I, x), A = de(o), j = a.length, te = l ?? (j > 0 ? A.getId(a[0]) : void 0), N = !_ && !!p && (m === void 0 || j < m), P = N && (h === "field" || j > 0) ? /* @__PURE__ */ S(i, {
+		type: "button",
+		variant: "secondary",
+		buttonStyle: "outline",
+		icon: re,
+		onClick: p,
+		children: O.gallery.add
+	}) : m !== void 0 && j >= m ? /* @__PURE__ */ S(r, {
+		variant: "secondary",
+		children: O.gallery.maxReached
+	}) : null, F = (e, t) => {
+		if (t < 0 || t >= j || e === t) return;
+		let n = Ee(a, e, t);
+		f?.(n.map((e) => A.getId(e)), n);
+	}, se = !!(s || c || y || P), ce = j === 0 && h !== "field", le = () => !N || h !== "field" ? null : /* @__PURE__ */ C(i, {
+		type: "button",
+		variant: "secondary",
+		buttonStyle: "ghost",
+		className: t("media-resource-gallery--add-tile h-auto min-h-24 w-full flex-col rounded-lg border border-dashed border-border bg-background text-muted-foreground shadow-none", "aspect-square hover:border-primary/50 hover:bg-primary/5 hover:text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"),
+		"aria-label": O.gallery.addTile,
+		onClick: p,
+		children: [/* @__PURE__ */ S(re, { className: "size-4" }), /* @__PURE__ */ S("span", {
+			className: "sr-only",
+			children: O.gallery.addTile
+		})]
+	});
+	return /* @__PURE__ */ C("section", {
+		className: t("media-resource-gallery--component rounded-lg border border-border bg-card shadow-xs", ee),
+		"data-layout": h,
+		"data-density": g,
+		...D,
+		children: [se && /* @__PURE__ */ C("header", {
+			className: "media-resource-gallery--header flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-start sm:justify-between",
+			children: [/* @__PURE__ */ C("div", {
+				className: "min-w-0",
+				children: [!!s && /* @__PURE__ */ S(n, {
+					tag: "div",
+					weight: "semibold",
+					children: s
+				}), !!c && /* @__PURE__ */ S(n, {
+					size: "xs",
+					type: "secondary",
+					className: "mt-0.5",
+					children: c
+				})]
+			}), /* @__PURE__ */ S("div", {
+				className: "media-resource-gallery--actions flex flex-wrap items-center gap-2",
+				children: y ?? P
+			})]
+		}), ce ? /* @__PURE__ */ S("div", {
+			className: "media-resource-gallery--empty p-4 pt-0",
+			children: v ?? /* @__PURE__ */ S(q, {
+				title: O.gallery.emptyTitle,
+				description: O.gallery.emptyDescription,
+				action: N ? /* @__PURE__ */ S(i, {
+					type: "button",
+					icon: k,
+					onClick: p,
+					children: O.gallery.add
+				}) : void 0
+			})
+		}) : /* @__PURE__ */ C("div", {
+			className: t("media-resource-gallery--items p-4", se && "pt-0", h === "list" ? "grid gap-2" : h === "field" ? "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-3 sm:grid-cols-[repeat(auto-fill,minmax(108px,1fr))]" : g === "compact" ? "grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-3" : "grid grid-cols-[repeat(auto-fill,minmax(164px,1fr))] gap-3"),
+			children: [a.map((e, a) => {
+				let o = A.getId(e), s = A.getName(e), c = A.getType(e), l = A.getSrc(e), f = A.getAlt(e) || s, p = o === te, m = A.getPublic(e) === !1, g = A.getDuration(e), v = a > 0, y = a < j - 1, x = b?.(e, {
+					id: o,
+					index: a,
+					total: j,
+					primary: p,
+					accessors: A,
+					canMovePrevious: v,
+					canMoveNext: y,
+					setPrimary: () => u?.(o, e),
+					remove: () => d?.(o, e),
+					movePrevious: () => F(a, a - 1),
+					moveNext: () => F(a, a + 1)
+				});
+				return x ? /* @__PURE__ */ S("div", { children: x }, o) : h === "field" ? /* @__PURE__ */ C("div", {
+					className: t("media-resource-gallery--item group/gallery relative aspect-square overflow-hidden rounded-lg border border-border bg-background shadow-xs", "transition-colors hover:border-primary/40 focus-within:border-primary/50", p && "col-span-2 row-span-2 min-h-52"),
+					"data-primary": p || void 0,
+					children: [
+						l ? /* @__PURE__ */ S("img", {
+							src: l,
+							alt: f,
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ S("div", {
+							className: "flex size-full items-center justify-center bg-muted text-muted-foreground",
+							children: /* @__PURE__ */ S(E, { className: p ? "size-7" : "size-5" })
+						}),
+						p && /* @__PURE__ */ S(r, {
+							variant: "secondary",
+							className: "absolute left-2 top-2 bg-background/90 shadow-xs",
+							children: O.gallery.cover
+						}),
+						c === "video" && !!g && /* @__PURE__ */ C(r, {
+							variant: "secondary",
+							className: "absolute bottom-2 left-2 bg-foreground text-background",
+							children: [/* @__PURE__ */ S(ne, { className: "size-3 fill-current" }), g]
+						}),
+						m && /* @__PURE__ */ S("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__ */ S(M, { className: "size-3" })
+						}),
+						!_ && /* @__PURE__ */ S(i, {
+							type: "button",
+							variant: "secondary",
+							buttonStyle: "solid",
+							size: "icon-xs",
+							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": O.gallery.remove,
+							onClick: () => d?.(o, e),
+							children: /* @__PURE__ */ S(oe, { className: "size-3.5" })
+						})
+					]
+				}, o) : h === "list" ? /* @__PURE__ */ C("div", {
+					className: "media-resource-gallery--item flex min-w-0 items-center gap-3 rounded-lg border border-border bg-background p-2",
+					"data-primary": p || void 0,
+					children: [
+						/* @__PURE__ */ S("div", {
+							className: "relative size-12 shrink-0 overflow-hidden rounded-md bg-muted",
+							children: l ? /* @__PURE__ */ S("img", {
+								src: l,
+								alt: f,
+								loading: "lazy",
+								className: "size-full object-cover"
+							}) : /* @__PURE__ */ S("div", {
+								className: "flex size-full items-center justify-center text-muted-foreground",
+								children: /* @__PURE__ */ S(E, { className: "size-4" })
+							})
+						}),
+						/* @__PURE__ */ C("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ C("div", {
+								className: "flex min-w-0 items-center gap-2",
+								children: [/* @__PURE__ */ S(n, {
+									tag: "div",
+									weight: "semibold",
+									size: "xs",
+									className: "truncate",
+									children: s
+								}), p && /* @__PURE__ */ S(r, {
+									variant: "info",
+									children: O.gallery.primary
+								})]
+							}), /* @__PURE__ */ C(n, {
+								size: "xxs",
+								type: "secondary",
+								children: [
+									L(O.gallery.itemPosition, {
+										index: a + 1,
+										total: j
+									}),
+									" · ",
+									R(A.getSize(e)) || O.unknownSize
+								]
+							})]
+						}),
+						!_ && /* @__PURE__ */ C("div", {
+							className: "flex shrink-0 items-center gap-1",
+							children: [
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: p,
+									"aria-label": O.gallery.setPrimary,
+									onClick: () => u?.(o, e),
+									children: /* @__PURE__ */ S(ie, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: !v,
+									"aria-label": O.gallery.movePrevious,
+									onClick: () => F(a, a - 1),
+									children: /* @__PURE__ */ S(w, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: !y,
+									"aria-label": O.gallery.moveNext,
+									onClick: () => F(a, a + 1),
+									children: /* @__PURE__ */ S(T, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "error",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									"aria-label": O.gallery.remove,
+									onClick: () => d?.(o, e),
+									children: /* @__PURE__ */ S(ae, { className: "size-3.5" })
+								})
+							]
+						})
+					]
+				}, o) : /* @__PURE__ */ C("div", {
+					className: "media-resource-gallery--item group/gallery overflow-hidden rounded-lg border border-border bg-background shadow-xs transition-colors hover:border-primary/40",
+					"data-primary": p || void 0,
+					children: [/* @__PURE__ */ C("div", {
+						className: "relative aspect-[4/3] bg-muted",
+						children: [l ? /* @__PURE__ */ S("img", {
+							src: l,
+							alt: f,
+							loading: "lazy",
+							className: "size-full object-cover"
+						}) : /* @__PURE__ */ S("div", {
+							className: "flex size-full items-center justify-center text-muted-foreground",
+							children: /* @__PURE__ */ S(E, { className: "size-6" })
+						}), /* @__PURE__ */ C("div", {
+							className: "absolute left-2 top-2 flex flex-wrap gap-1",
+							children: [p && /* @__PURE__ */ S(r, {
+								variant: "info",
+								children: O.gallery.primary
+							}), /* @__PURE__ */ S(r, {
+								variant: "secondary",
+								children: L(O.gallery.itemPosition, {
+									index: a + 1,
+									total: j
+								})
+							})]
+						})]
+					}), /* @__PURE__ */ C("div", {
+						className: "media-resource-gallery--item-body grid gap-2 p-3",
+						children: [/* @__PURE__ */ C("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ S(n, {
+								tag: "div",
+								weight: "semibold",
+								size: "xs",
+								className: "truncate",
+								children: s
+							}), /* @__PURE__ */ S(n, {
+								size: "xxs",
+								type: "secondary",
+								children: R(A.getSize(e)) || O.unknownSize
+							})]
+						}), !_ && /* @__PURE__ */ C("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: p,
+									"aria-label": O.gallery.setPrimary,
+									onClick: () => u?.(o, e),
+									children: /* @__PURE__ */ S(ie, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: !v,
+									"aria-label": O.gallery.movePrevious,
+									onClick: () => F(a, a - 1),
+									children: /* @__PURE__ */ S(w, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "secondary",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									disabled: !y,
+									"aria-label": O.gallery.moveNext,
+									onClick: () => F(a, a + 1),
+									children: /* @__PURE__ */ S(T, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ S(i, {
+									type: "button",
+									variant: "error",
+									buttonStyle: "ghost",
+									size: "icon-xs",
+									className: "ml-auto",
+									"aria-label": O.gallery.remove,
+									onClick: () => d?.(o, e),
+									children: /* @__PURE__ */ S(ae, { className: "size-3.5" })
+								})
+							]
+						})]
+					})]
+				}, o);
+			}), le()]
+		})]
+	});
+}
+//#endregion
+export { we as MediaLibrary, be as MediaLibraryCard, J as MediaLibraryDetailPanel, Te as MediaLibraryDialog, q as MediaLibraryEmptyState, Se as MediaLibraryFooter, xe as MediaLibraryTable, ye as MediaLibraryToolbar, Y as MediaLibraryUploadPanel, De as MediaResourceGallery, I as defaultMediaLibraryStrings, R as formatMediaLibrarySize, L as formatMediaLibraryString, z as getMediaLibraryDimensions, de as resolveMediaLibraryAccessors, ge as useMediaLibrary };
+
+//# sourceMappingURL=index.js.map