themelia-ui 1.0.0

package/dist/features/media-library.js

@@ -0,0 +1,1583 @@
+"use client";
+import "../core.css";
+import "../css/media-library.css";
+import { t as e } from "../cx--CBrhWH0.js";
+import { o as t } from "../typography-vC_wwEBm.js";
+import { p as n, s as r } from "../feedback-DHdvxang.js";
+import { c as i } from "../buttons-CabBjPap.js";
+import { n as a } from "../display-DTWjv_bB.js";
+import { o } from "../structure-es_UqqmD.js";
+import { C as s, S as c, f as l } from "../primitives-D-cyAv5O.js";
+import { t as u } from "../badge-DwsR_WXN.js";
+import { t as d } from "../upload-4YDU7od8.js";
+import { u as f } from "../forms-BjJns3n7.js";
+import { t as p } from "../strings-Co9_qArR.js";
+import { c as m, l as h } from "../text-inputs-BMW3hP0R.js";
+import { f as g, h as _, m as v, p as y } from "../navigation-CRCc8lpn.js";
+import { s as b, t as x, x as S } from "../choice-inputs-B4fseaKf.js";
+import { s as C } from "../value-inputs-okQ1S7CX.js";
+import { t as ee } from "../batch-action-bar-B42CIB6A.js";
+import { t as w } from "../spinner-4Z1vjSiH.js";
+import { r as T } from "../overlays-BN7GOm51.js";
+import { t as E } from "../use-synced-state-DnZ4lW4g.js";
+import { ChevronLeftIcon as D, ChevronRightIcon as O, FileIcon as k, FilmIcon as A, ImageIcon as j, LayoutGridIcon as te, ListIcon as ne, PlusIcon as re, SearchIcon as ie, StarIcon as M, Trash2Icon as ae, XIcon as N } from "lucide-react";
+import { useCallback as P, useEffect as oe, useMemo as F, useRef as se, useState as I } from "react";
+import { Fragment as L, jsx as R, jsxs as z } from "react/jsx-runtime";
+//#region src/components/features/media-library/use-media-library.ts
+var B = {
+	collection: void 0,
+	tags: [],
+	public: !0
+}, ce = [];
+function V(e, t, n) {
+	let [r, i] = I(t), a = e ?? r;
+	return [a, P((t) => {
+		let r = typeof t == "function" ? t(a) : t;
+		e === void 0 && i(r), n?.(r);
+	}, [
+		e,
+		n,
+		a
+	])];
+}
+var H = {
+	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 le(e) {
+	return {
+		...H,
+		...e ?? {}
+	};
+}
+function ue(e) {
+	return e === void 0 ? "" : s(e);
+}
+function U(e, t) {
+	let n = t.getWidth(e), r = t.getHeight(e);
+	return !n || !r ? "" : `${n} × ${r}`;
+}
+function de(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 pe(e) {
+	if (e.type.startsWith("image/") && !(typeof URL > "u" || typeof URL.createObjectURL != "function")) return URL.createObjectURL(e);
+}
+function W(e) {
+	!e || typeof URL > "u" || typeof URL.revokeObjectURL != "function" || URL.revokeObjectURL(e);
+}
+function me(e) {
+	return Array.isArray(e) ? {
+		items: e,
+		total: e.length
+	} : e;
+}
+function he(e, t) {
+	return t && typeof e == "object" && e ? {
+		...e,
+		...t
+	} : e;
+}
+function G(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 ge(e, t, n) {
+	let r = [...e];
+	switch (n) {
+		case "name": return r.sort((e, n) => t.getName(e).localeCompare(t.getName(n)));
+		case "size": return r.sort((e, n) => (t.getSize(n) ?? 0) - (t.getSize(e) ?? 0));
+		case "usage": return r.sort((e, n) => (t.getUsageCount(n) ?? 0) - (t.getUsageCount(e) ?? 0));
+		default: return r.sort((e, n) => de(n, t) - de(e, t));
+	}
+}
+function _e({ items: e = ce, 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: C, defaultCollection: ee = "all", onCollectionChange: w, sort: T, defaultSort: E = "newest", onSortChange: D, uploadOptions: O, defaultUploadOptions: k, onUploadOptionsChange: A }) {
+	let j = F(() => le(n), [n]), [te, ne] = V(d, f, p), [re, ie] = V(m, h, g), [M, ae] = V(_, v, y), [N, L] = V(b, x, S), [R, z] = V(C, ee, w), [H, ue] = V(T, E, D), [U, de] = I(null), [_e, K] = I(() => [...a ?? []]), [q, J] = I([]), [Y, ve] = I(), [ye, be] = I(!1), [xe, X] = I(null), [Se, Ce] = I([]), [we, Te] = I(() => /* @__PURE__ */ new Set()), [Ee, De] = I({}), [Oe, Z] = I([]), [ke, Ae] = I(!1), je = F(() => ({
+		...B,
+		...k,
+		tags: k?.tags ?? B.tags
+	}), [k]), [Me, Ne] = V(F(() => O ? {
+		...B,
+		...O,
+		tags: O.tags ?? B.tags
+	} : void 0, [O]), je, A), Pe = i !== void 0, Fe = F(() => Pe ? [...i ?? []] : _e, [
+		_e,
+		Pe,
+		i
+	]), Ie = F(() => new Set(Fe), [Fe]), Le = se(/* @__PURE__ */ new Set()), Re = se(null), ze = se(/* @__PURE__ */ new Map());
+	oe(() => {
+		if (!t) return;
+		let e = new AbortController();
+		return be(!0), X(null), t({
+			query: M,
+			type: N,
+			collection: R === "all" ? void 0 : R,
+			sort: H,
+			signal: e.signal
+		}).then((t) => {
+			if (e.signal.aborted) return;
+			let n = me(t);
+			J(n.items), ve(n.total);
+		}).catch((t) => {
+			e.signal.aborted || (X(t), u?.(t));
+		}).finally(() => {
+			e.signal.aborted || be(!1);
+		}), () => e.abort();
+	}, [
+		R,
+		t,
+		u,
+		M,
+		H,
+		N
+	]), oe(() => {
+		let e = Le.current;
+		return () => {
+			Re.current?.abort();
+			for (let t of e) W(t);
+			e.clear();
+		};
+	}, []);
+	let Be = F(() => t ? q : [...Se, ...e], [
+		Se,
+		q,
+		t,
+		e
+	]), Q = F(() => Be.filter((e) => !we.has(j.getId(e))).map((e) => he(e, Ee[j.getId(e)])), [
+		j,
+		Ee,
+		we,
+		Be
+	]), Ve = F(() => t ? Q : ge(G(Q, j, M, N, R), j, H), [
+		j,
+		R,
+		t,
+		Q,
+		M,
+		H,
+		N
+	]), He = F(() => Q.filter((e) => Ie.has(j.getId(e))), [
+		j,
+		Q,
+		Ie
+	]), $ = P((e) => {
+		Pe || K(e);
+		let t = new Set(e);
+		o?.(e, Q.filter((e) => t.has(j.getId(e))));
+	}, [
+		j,
+		Pe,
+		Q,
+		o
+	]), Ue = P((e) => {
+		if (r === "single") {
+			$([e]);
+			return;
+		}
+		let t = new Set(Ie);
+		t.has(e) ? t.delete(e) : t.add(e), $([...t]);
+	}, [
+		$,
+		Ie,
+		r
+	]), We = P(() => $([]), [$]), Ge = P(() => {
+		ae(""), L("all"), z("all");
+	}, [
+		z,
+		ae,
+		L
+	]), Ke = P((e) => {
+		Z((t) => [...t, ...e.map((e, t) => {
+			let n = pe(e);
+			return n && Le.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"
+			};
+		})]);
+	}, []), qe = P((e) => {
+		Z((t) => {
+			let n = t.find((t) => t.id === e);
+			return n?.src && (W(n.src), Le.current.delete(n.src)), t.filter((t) => t.id !== e);
+		});
+	}, []), Je = P(() => {
+		Z((e) => {
+			for (let t of e) t.src && (W(t.src), Le.current.delete(t.src));
+			return [];
+		});
+	}, []), Ye = P((e) => {
+		Ne((t) => ({
+			...t,
+			...e
+		}));
+	}, [Ne]), Xe = P((e, t) => {
+		Z((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), Ze = P(async () => {
+		if (ke || Oe.length === 0) return;
+		let e = new AbortController();
+		Re.current?.abort(), Re.current = e, X(null), Ae(!0), Z((e) => e.map((e) => ({
+			...e,
+			status: "uploading",
+			progress: 0
+		})));
+		let t = {
+			signal: e.signal,
+			setProgress: (t, n) => {
+				e.signal.aborted || Xe(t, { progress: Math.max(0, Math.min(100, n)) });
+			},
+			setFileStatus: (t, n, r) => {
+				e.signal.aborted || Xe(t, {
+					status: n,
+					error: r
+				});
+			}
+		};
+		try {
+			let n = await l?.(Oe.map((e) => e.file), Me, t);
+			if (e.signal.aborted) return;
+			if (Z((e) => e.map((e) => ({
+				...e,
+				status: "done",
+				progress: 100
+			}))), n?.length) {
+				Ce((e) => [...n, ...e]);
+				let e = n.map((e) => j.getId(e));
+				$(r === "single" ? e.slice(0, 1) : [.../* @__PURE__ */ new Set([...e, ...Fe])]);
+			}
+			Je(), ne("library");
+		} catch (t) {
+			if (e.signal.aborted) return;
+			X(t), Z((e) => e.map((e) => e.status === "uploading" ? {
+				...e,
+				status: "error"
+			} : e)), u?.(t);
+		} finally {
+			Re.current === e && (Re.current = null, Ae(!1));
+		}
+	}, [
+		j,
+		$,
+		Je,
+		u,
+		l,
+		Xe,
+		Fe,
+		r,
+		ne,
+		Oe,
+		Me,
+		ke
+	]), Qe = P(() => {
+		Re.current?.abort(), Re.current = null, Ae(!1), Z((e) => e.map((e) => e.status === "uploading" ? {
+			...e,
+			status: "staged",
+			progress: 0,
+			error: void 0
+		} : e));
+	}, []), $e = P(async (e, t) => {
+		let n = j.getId(e), r = `update:${n}`, i = (ze.current.get(r) ?? 0) + 1;
+		ze.current.set(r, i);
+		let a = Ee[n];
+		X(null), De((e) => ({
+			...e,
+			[n]: {
+				...e[n],
+				...t
+			}
+		}));
+		try {
+			return await s?.(e, t), !0;
+		} catch (e) {
+			return ze.current.get(r) === i && De((e) => {
+				let t = { ...e };
+				return a ? t[n] = a : delete t[n], t;
+			}), X(e), u?.(e), !1;
+		}
+	}, [
+		j,
+		Ee,
+		u,
+		s
+	]), et = P(async (e) => {
+		let t = j.getId(e), n = `delete:${t}`, r = (ze.current.get(n) ?? 0) + 1;
+		ze.current.set(n, r);
+		let i = we.has(t);
+		X(null), Te((e) => new Set(e).add(t));
+		try {
+			return await c?.(e), Ie.has(t) && $(Fe.filter((e) => e !== t)), !0;
+		} catch (e) {
+			return !i && ze.current.get(n) === r && Te((e) => {
+				let n = new Set(e);
+				return n.delete(t), n;
+			}), X(e), u?.(e), !1;
+		}
+	}, [
+		j,
+		$,
+		u,
+		c,
+		we,
+		Fe,
+		Ie
+	]);
+	return {
+		tab: te,
+		setTab: ne,
+		view: re,
+		setView: ie,
+		query: M,
+		setQuery: ae,
+		type: N,
+		setType: L,
+		collection: R,
+		setCollection: z,
+		sort: H,
+		setSort: ue,
+		detailId: U,
+		setDetailId: de,
+		items: Q,
+		visibleItems: Ve,
+		selectedIds: Fe,
+		selectedItems: He,
+		selectedSet: Ie,
+		toggleSelection: Ue,
+		clearSelection: We,
+		clearFilters: Ge,
+		loading: ye,
+		error: xe,
+		hasFilters: !!M.trim() || N !== "all" || R !== "all",
+		totalCount: Y ?? Q.length,
+		filteredCount: Ve.length,
+		stagedFiles: Oe,
+		addFiles: Ke,
+		removeStagedFile: qe,
+		clearStagedFiles: Je,
+		uploadOptions: Me,
+		updateUploadOptions: Ye,
+		uploading: ke,
+		startUpload: Ze,
+		cancelUpload: Qe,
+		updateItem: $e,
+		removeItem: et,
+		accessors: j
+	};
+}
+var K = {
+	light: "media-library-module__light___1k5sk",
+	dark: "media-library-module__dark___vKbfb",
+	root: "media-library-module__root___sjsf-",
+	header: "media-library-module__header___t4NAN",
+	headerText: "media-library-module__headerText___CYVAo",
+	toolbar: "media-library-module__toolbar___7G9c3",
+	toolbarSearch: "media-library-module__toolbarSearch___4QrOx",
+	toolbarField: "media-library-module__toolbarField___mmRpG",
+	toolbarQuery: "media-library-module__toolbarQuery___9F2TZ",
+	queryTerm: "media-library-module__queryTerm___75-RH",
+	toolbarSelect: "media-library-module__toolbarSelect___FgcKt",
+	toolbarEnd: "media-library-module__toolbarEnd___BZbzf",
+	segmented: "media-library-module__segmented___x7tHR",
+	segment: "media-library-module__segment___eq11T",
+	browse: "media-library-module__browse___5XJJn",
+	workspace: "media-library-module__workspace___zABmI",
+	results: "media-library-module__results___QNwLd",
+	state: "media-library-module__state___nL-be",
+	grid: "media-library-module__grid___w-xfh",
+	card: "media-library-module__card___uW87f",
+	cardTile: "media-library-module__cardTile___adjQ-",
+	cardTileWrap: "media-library-module__cardTileWrap___08F-T",
+	cardCheck: "media-library-module__cardCheck___iaUsU",
+	cardBody: "media-library-module__cardBody___boYU5",
+	cardDetails: "media-library-module__cardDetails___QdGSq",
+	cardBadge: "media-library-module__cardBadge___o8QEV",
+	preview: "media-library-module__preview___RNCBz",
+	previewFallback: "media-library-module__previewFallback___jfzYS",
+	list: "media-library-module__list___8v-xA",
+	row: "media-library-module__row___FVxtf",
+	rowMain: "media-library-module__rowMain___QzWbA",
+	rowPreview: "media-library-module__rowPreview___YuuzF",
+	rowBody: "media-library-module__rowBody___4JCuS",
+	rowSize: "media-library-module__rowSize___0ZR2e",
+	detail: "media-library-module__detail___hNRtt",
+	detailHeader: "media-library-module__detailHeader___P2GwW",
+	detailBody: "media-library-module__detailBody___KLVfF",
+	detailPreview: "media-library-module__detailPreview___jBCfq",
+	detailFacts: "media-library-module__detailFacts___uEJMC",
+	detailFooter: "media-library-module__detailFooter___68DEX",
+	upload: "media-library-module__upload___iRNoq",
+	uploadOptions: "media-library-module__uploadOptions___tWsgk",
+	uploadOptionsGrid: "media-library-module__uploadOptionsGrid___ajBDu",
+	stagedList: "media-library-module__stagedList___xNnZ3",
+	staged: "media-library-module__staged___Pmwya",
+	stagedIcon: "media-library-module__stagedIcon___rN3-r",
+	stagedBody: "media-library-module__stagedBody___drl8n",
+	uploadActions: "media-library-module__uploadActions___-QfBQ",
+	footer: "media-library-module__footer___fdBEK",
+	footerSummary: "media-library-module__footerSummary___OYe3C",
+	footerActions: "media-library-module__footerActions___yOUMZ",
+	gallery: "media-library-module__gallery___WRPLN",
+	galleryHeader: "media-library-module__galleryHeader___04u-a",
+	galleryActions: "media-library-module__galleryActions___PF---",
+	galleryList: "media-library-module__galleryList___OIrln",
+	galleryItem: "media-library-module__galleryItem___6AD9R",
+	galleryPreview: "media-library-module__galleryPreview___hy9Sh",
+	galleryBadge: "media-library-module__galleryBadge___a6CYg",
+	galleryControls: "media-library-module__galleryControls___zPxiQ",
+	emptyState: "media-library-module__emptyState___lHHlS"
+}, q = {
+	image: /* @__PURE__ */ R(j, {}),
+	video: /* @__PURE__ */ R(A, {}),
+	file: /* @__PURE__ */ R(k, {})
+};
+function J(e, t) {
+	return t.types[e];
+}
+function Y({ item: t, accessors: n, className: r }) {
+	let i = n.getSrc(t), a = n.getType(t), o = n.getTint(t), [s, c] = I(!1), [l, u] = E(i);
+	return i !== l && (u(i), c(!1)), i && a === "image" && !s ? /* @__PURE__ */ R("img", {
+		src: i,
+		alt: n.getAlt(t) ?? "",
+		loading: "lazy",
+		className: e(K.preview, r),
+		onError: () => c(!0)
+	}) : /* @__PURE__ */ R("span", {
+		className: e("media-preview--component", K.preview, K.previewFallback, r),
+		style: o ? { backgroundColor: o } : void 0,
+		children: q[a]
+	});
+}
+function ve({ label: t, options: n, value: r, onValueChange: a, role: o = "group", className: s }) {
+	return /* @__PURE__ */ R("div", {
+		role: o,
+		"aria-label": t,
+		className: e(K.segmented, s),
+		children: n.map((e) => {
+			let t = e.value === r;
+			return /* @__PURE__ */ z(i, {
+				type: "button",
+				tone: "neutral",
+				buttonStyle: "ghost",
+				iconOnly: e.iconOnly,
+				role: o === "tablist" ? "tab" : void 0,
+				"aria-selected": o === "tablist" ? t : void 0,
+				"aria-pressed": o === "group" ? t : void 0,
+				"aria-label": e.iconOnly ? String(e.label) : void 0,
+				"data-active": t || void 0,
+				className: K.segment,
+				onClick: () => a(e.value),
+				children: [e.icon, !e.iconOnly && e.label]
+			}, e.value);
+		})
+	});
+}
+function ye({ title: t, description: r, icon: i, action: a, className: o }) {
+	return /* @__PURE__ */ R(n, {
+		title: t,
+		description: r ?? !1,
+		media: i ?? /* @__PURE__ */ R(j, {}),
+		mediaVariant: "icon-soft",
+		padding: "md",
+		border: !0,
+		action: a,
+		className: e("media-library-empty-state--component", K.emptyState, o)
+	});
+}
+function be({ query: t, onQueryChange: n, type: r, onTypeChange: a, typeFilters: o, collection: s, onCollectionChange: c, collections: l, sort: d, onSortChange: f, view: p, onViewChange: m, hasFilters: g, onClearFilters: _, strings: v, end: y, className: x }) {
+	let S = t.trim();
+	return /* @__PURE__ */ z("div", {
+		className: e("media-library-toolbar--component", K.toolbar, x),
+		children: [
+			/* @__PURE__ */ z("div", {
+				className: K.toolbarSearch,
+				children: [/* @__PURE__ */ R(h, {
+					value: t,
+					onChange: (e) => n(e.target.value),
+					placeholder: v.searchPlaceholder,
+					"aria-label": v.searchPlaceholder,
+					startIcon: ie,
+					clearable: !0,
+					onClear: () => n(""),
+					strings: { clear: v.clearSearch },
+					"data-active": S ? !0 : void 0,
+					className: K.toolbarField
+				}), !!S && /* @__PURE__ */ R("div", {
+					className: K.toolbarQuery,
+					children: /* @__PURE__ */ z(u, {
+						tone: "info",
+						children: [
+							/* @__PURE__ */ R(ie, { "aria-hidden": !0 }),
+							v.activeSearchLabel,
+							/* @__PURE__ */ R("span", {
+								className: K.queryTerm,
+								children: S
+							})
+						]
+					})
+				})]
+			}),
+			o.length > 1 && /* @__PURE__ */ R(ve, {
+				role: "tablist",
+				label: v.typeLabel,
+				value: r,
+				onValueChange: (e) => a(e),
+				options: o.map((e) => ({
+					value: e,
+					label: e === "all" ? v.types.all : J(e, v),
+					icon: e === "all" ? void 0 : q[e]
+				}))
+			}),
+			l.length > 0 && /* @__PURE__ */ R(b, {
+				"aria-label": v.collectionLabel,
+				value: s,
+				options: [{
+					value: "all",
+					label: v.collectionAll
+				}, ...l.map((e) => ({
+					value: e.value,
+					label: typeof e.label == "string" ? e.label : e.value
+				}))],
+				onValueChange: (e) => e && c(e),
+				className: K.toolbarSelect
+			}),
+			/* @__PURE__ */ R(b, {
+				"aria-label": v.sortLabel,
+				value: d,
+				options: [
+					{
+						value: "newest",
+						label: v.sorts.newest
+					},
+					{
+						value: "name",
+						label: v.sorts.name
+					},
+					{
+						value: "size",
+						label: v.sorts.size
+					},
+					{
+						value: "usage",
+						label: v.sorts.usage
+					}
+				],
+				onValueChange: (e) => e && f(e),
+				className: K.toolbarSelect
+			}),
+			g && /* @__PURE__ */ R(i, {
+				type: "button",
+				tone: "neutral",
+				buttonStyle: "ghost",
+				onClick: _,
+				children: v.clearFilters
+			}),
+			/* @__PURE__ */ z("div", {
+				className: K.toolbarEnd,
+				children: [y, /* @__PURE__ */ R(ve, {
+					label: v.viewLabel,
+					value: p,
+					onValueChange: (e) => m(e),
+					options: [{
+						value: "grid",
+						label: v.views.grid,
+						icon: /* @__PURE__ */ R(te, {}),
+						iconOnly: !0
+					}, {
+						value: "table",
+						label: v.views.table,
+						icon: /* @__PURE__ */ R(ne, {}),
+						iconOnly: !0
+					}]
+				})]
+			})
+		]
+	});
+}
+function xe({ item: n, selected: r = !1, density: a = "comfortable", showMeta: o = !0, selectionMode: s = "multiple", accessors: c, strings: l, onToggle: d, onDetails: f, className: p }) {
+	let m = c.getName(n), h = c.getSize(n), g = U(n, c);
+	return /* @__PURE__ */ z("div", {
+		"data-selected": r || void 0,
+		"data-density": a,
+		className: e("media-library-card--component", K.card, p),
+		children: [
+			/* @__PURE__ */ z("span", {
+				className: K.cardTileWrap,
+				children: [/* @__PURE__ */ R("button", {
+					type: "button",
+					className: K.cardTile,
+					"aria-pressed": r,
+					"aria-label": `${r ? l.deselect : l.select}: ${m}`,
+					onClick: d,
+					children: /* @__PURE__ */ R(Y, {
+						item: n,
+						accessors: c
+					})
+				}), /* @__PURE__ */ R("span", {
+					"aria-hidden": !0,
+					className: K.cardCheck,
+					children: /* @__PURE__ */ R(S, {
+						checked: r,
+						readOnly: !0,
+						tabIndex: -1,
+						"aria-hidden": !0
+					})
+				})]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: K.cardBody,
+				children: [/* @__PURE__ */ R(t, {
+					tag: "span",
+					size: "sm",
+					weight: "medium",
+					truncate: !0,
+					title: m,
+					children: m
+				}), o && /* @__PURE__ */ R(t, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					truncate: !0,
+					children: [g, h === void 0 ? "" : ue(h)].filter(Boolean).join(" · ")
+				})]
+			}),
+			!!f && /* @__PURE__ */ R(i, {
+				type: "button",
+				tone: "neutral",
+				buttonStyle: "ghost",
+				onClick: f,
+				className: K.cardDetails,
+				children: l.details
+			}),
+			s === "single" && r && /* @__PURE__ */ R(u, {
+				tone: "primary",
+				className: K.cardBadge,
+				children: l.select
+			})
+		]
+	});
+}
+function X({ items: n, selectedSet: r, accessors: a, strings: o, onToggle: s, onDetails: l }) {
+	return /* @__PURE__ */ R("ul", {
+		className: e("media-library-list--component", K.list),
+		children: n.map((e) => {
+			let n = a.getId(e), u = a.getName(e), d = r.has(n);
+			return /* @__PURE__ */ R("li", { children: /* @__PURE__ */ z("div", {
+				"data-selected": d || void 0,
+				className: K.row,
+				children: [
+					/* @__PURE__ */ z("button", {
+						type: "button",
+						className: K.rowMain,
+						"aria-pressed": d,
+						"aria-label": `${d ? o.deselect : o.select}: ${u}`,
+						onClick: () => s(n),
+						children: [/* @__PURE__ */ R(Y, {
+							item: e,
+							accessors: a,
+							className: K.rowPreview
+						}), /* @__PURE__ */ z("span", {
+							className: K.rowBody,
+							children: [/* @__PURE__ */ R(t, {
+								tag: "span",
+								size: "sm",
+								weight: "medium",
+								truncate: !0,
+								children: u
+							}), /* @__PURE__ */ R(t, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								children: [
+									J(a.getType(e), o),
+									U(e, a),
+									a.getCollection(e)
+								].filter(Boolean).join(" · ")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ R("span", {
+						className: K.rowSize,
+						children: /* @__PURE__ */ R(c, {
+							value: a.getSize(e),
+							size: "xs",
+							type: "secondary"
+						})
+					}),
+					/* @__PURE__ */ R(i, {
+						type: "button",
+						tone: "neutral",
+						buttonStyle: "ghost",
+						onClick: () => l(n),
+						children: o.details
+					})
+				]
+			}) }, n);
+		})
+	});
+}
+function Se({ item: n, collections: r = [], accessors: o, strings: s, onClose: u, onUpdate: d, onRemove: p, renderDetail: h }) {
+	let [g, _] = I(""), [v, y] = I(""), [S, ee] = I([]), [w, T] = I(!1), [E, D] = I(!1), [O, k] = I(!1), [A, j] = I(n);
+	if (n && n !== A && (j(n), _(o.getAlt(n) ?? ""), y(o.getCollection(n) ?? ""), ee(o.getTags(n)), T(o.getPublic(n) ?? !1)), !n) return null;
+	if (h) return /* @__PURE__ */ R("div", {
+		className: K.detail,
+		children: h(n, {
+			accessors: o,
+			update: d,
+			remove: p,
+			close: u
+		})
+	});
+	let te = o.getName(n);
+	return /* @__PURE__ */ z("aside", {
+		"aria-label": te,
+		className: e("media-library-detail--component", K.detail),
+		children: [
+			/* @__PURE__ */ z("div", {
+				className: K.detailHeader,
+				children: [/* @__PURE__ */ R(t, {
+					weight: "semibold",
+					truncate: !0,
+					children: te
+				}), /* @__PURE__ */ R(i, {
+					type: "button",
+					tone: "neutral",
+					buttonStyle: "ghost",
+					iconOnly: !0,
+					"aria-label": s.close,
+					onClick: u,
+					children: /* @__PURE__ */ R(N, {})
+				})]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: K.detailBody,
+				children: [
+					/* @__PURE__ */ R(Y, {
+						item: n,
+						accessors: o,
+						className: K.detailPreview
+					}),
+					/* @__PURE__ */ R(a, {
+						layout: "rows",
+						columns: 1,
+						density: "compact",
+						className: K.detailFacts,
+						items: [
+							{
+								id: "type",
+								label: s.detail.type,
+								value: J(o.getType(n), s)
+							},
+							{
+								id: "size",
+								label: s.detail.size,
+								render: () => /* @__PURE__ */ R(c, {
+									value: o.getSize(n),
+									size: "sm"
+								})
+							},
+							{
+								id: "dimensions",
+								label: s.detail.dimensions,
+								value: U(n, o) || void 0
+							},
+							{
+								id: "uploaded",
+								label: s.detail.uploaded,
+								render: () => /* @__PURE__ */ R(l, {
+									value: o.getUploadedAt(n),
+									size: "sm"
+								})
+							}
+						]
+					}),
+					/* @__PURE__ */ R(f, {
+						label: s.detail.altLabel,
+						children: /* @__PURE__ */ R(m, {
+							value: g,
+							rows: 2,
+							placeholder: s.detail.altPlaceholder,
+							onChange: (e) => _(e.target.value)
+						})
+					}),
+					r.length > 0 && /* @__PURE__ */ R(f, {
+						label: s.detail.collectionLabel,
+						children: /* @__PURE__ */ R(b, {
+							value: v,
+							options: r.map((e) => ({
+								value: e.value,
+								label: typeof e.label == "string" ? e.label : e.value
+							})),
+							onValueChange: (e) => y(e ?? "")
+						})
+					}),
+					/* @__PURE__ */ R(f, {
+						label: s.detail.tagsLabel,
+						children: /* @__PURE__ */ R(C, {
+							value: S,
+							onValueChange: ee,
+							placeholder: s.detail.tagsPlaceholder
+						})
+					}),
+					/* @__PURE__ */ R(x, {
+						label: s.detail.publicLabel,
+						description: s.detail.publicDescription,
+						value: w,
+						onValueChange: T
+					})
+				]
+			}),
+			/* @__PURE__ */ z("div", {
+				className: K.detailFooter,
+				children: [/* @__PURE__ */ z(i, {
+					type: "button",
+					tone: "destructive",
+					buttonStyle: "ghost",
+					loading: O,
+					disabled: E,
+					onClick: async () => {
+						k(!0);
+						let e = await p();
+						k(!1), e && u();
+					},
+					children: [/* @__PURE__ */ R(ae, {}), O ? s.detail.deleting : s.detail.delete]
+				}), /* @__PURE__ */ R(i, {
+					type: "button",
+					loading: E,
+					disabled: O,
+					onClick: async () => {
+						D(!0), await d({
+							alt: g,
+							collection: v || void 0,
+							tags: S,
+							public: w
+						}), D(!1);
+					},
+					children: E ? s.detail.saving : s.detail.save
+				})]
+			})
+		]
+	});
+}
+function Ce({ stagedFiles: a, uploading: s, uploadOptions: l, collections: u = [], strings: p, onAddFiles: m, onRemoveFile: h, onClear: g, onOptionsChange: _, onStart: v, onCancel: y, empty: S }) {
+	return /* @__PURE__ */ z("div", {
+		className: e("media-library-upload--component", K.upload),
+		children: [
+			/* @__PURE__ */ R(d, {
+				multiple: !0,
+				onDrop: m,
+				strings: {
+					instructionMultiple: p.upload.dropTitle,
+					helper: p.upload.dropDescription
+				}
+			}),
+			/* @__PURE__ */ z("section", {
+				className: K.uploadOptions,
+				children: [/* @__PURE__ */ R(t, {
+					size: "sm",
+					weight: "semibold",
+					children: p.upload.optionsTitle
+				}), /* @__PURE__ */ z("div", {
+					className: K.uploadOptionsGrid,
+					children: [
+						u.length > 0 && /* @__PURE__ */ R(f, {
+							label: p.detail.collectionLabel,
+							children: /* @__PURE__ */ R(b, {
+								value: l.collection ?? "",
+								options: u.map((e) => ({
+									value: e.value,
+									label: typeof e.label == "string" ? e.label : e.value
+								})),
+								onValueChange: (e) => _({ collection: e || void 0 })
+							})
+						}),
+						/* @__PURE__ */ R(f, {
+							label: p.detail.tagsLabel,
+							children: /* @__PURE__ */ R(C, {
+								value: l.tags,
+								onValueChange: (e) => _({ tags: e }),
+								placeholder: p.detail.tagsPlaceholder
+							})
+						}),
+						/* @__PURE__ */ R(x, {
+							label: p.detail.publicLabel,
+							description: p.detail.publicDescription,
+							value: l.public,
+							onValueChange: (e) => _({ public: e })
+						})
+					]
+				})]
+			}),
+			a.length === 0 ? S ?? /* @__PURE__ */ R(n, {
+				title: p.upload.emptyTitle,
+				description: p.upload.emptyDescription,
+				padding: "md"
+			}) : /* @__PURE__ */ z(L, { children: [/* @__PURE__ */ R("ul", {
+				className: K.stagedList,
+				children: a.map((e) => /* @__PURE__ */ z("li", {
+					className: K.staged,
+					children: [
+						/* @__PURE__ */ R("span", {
+							className: K.stagedIcon,
+							children: q[e.type]
+						}),
+						/* @__PURE__ */ z("span", {
+							className: K.stagedBody,
+							children: [/* @__PURE__ */ R(t, {
+								tag: "span",
+								size: "sm",
+								weight: "medium",
+								truncate: !0,
+								children: e.name
+							}), e.status === "error" ? /* @__PURE__ */ R(t, {
+								tag: "span",
+								size: "xs",
+								type: "error",
+								children: e.error ?? p.upload.failed
+							}) : e.status === "uploading" ? /* @__PURE__ */ R(r, { value: e.progress }) : /* @__PURE__ */ R(c, {
+								value: e.size,
+								size: "xs",
+								type: "secondary"
+							})]
+						}),
+						/* @__PURE__ */ R(i, {
+							type: "button",
+							tone: "neutral",
+							buttonStyle: "ghost",
+							iconOnly: !0,
+							"aria-label": `${p.upload.remove}: ${e.name}`,
+							disabled: s,
+							onClick: () => h(e.id),
+							children: /* @__PURE__ */ R(N, {})
+						})
+					]
+				}, e.id))
+			}), /* @__PURE__ */ z("div", {
+				className: K.uploadActions,
+				children: [/* @__PURE__ */ R(t, {
+					size: "sm",
+					type: "secondary",
+					children: p.upload.staged(a.length)
+				}), /* @__PURE__ */ z(o, {
+					direction: "horizontal",
+					gap: "md",
+					children: [s ? /* @__PURE__ */ R(i, {
+						type: "button",
+						tone: "neutral",
+						buttonStyle: "outline",
+						onClick: y,
+						children: p.upload.cancel
+					}) : /* @__PURE__ */ R(i, {
+						type: "button",
+						tone: "neutral",
+						buttonStyle: "ghost",
+						onClick: g,
+						children: p.upload.clear
+					}), /* @__PURE__ */ R(i, {
+						type: "button",
+						loading: s,
+						onClick: v,
+						children: s ? p.upload.uploading : p.upload.start
+					})]
+				})]
+			})] })
+		]
+	});
+}
+function we({ tab: n, selectedIds: r, selectionMode: a, stagedFiles: o, strings: s, visibleCount: c, totalCount: l, onClearSelection: u, className: d }) {
+	let f = n === "upload" ? /* @__PURE__ */ R(t, {
+		size: "xs",
+		type: "secondary",
+		children: o.length === 0 ? s.footer.noFiles : s.footer.stagedSummary(o.length, ue(o.reduce((e, t) => e + t.size, 0)))
+	}) : r.length > 0 ? /* @__PURE__ */ z(L, { children: [/* @__PURE__ */ R(t, {
+		weight: "semibold",
+		children: s.selectedCount(r.length)
+	}), !!u && /* @__PURE__ */ R(i, {
+		type: "button",
+		tone: "neutral",
+		buttonStyle: "ghost",
+		onClick: u,
+		children: s.clearSelection
+	})] }) : c !== void 0 && l !== void 0 && c !== l ? /* @__PURE__ */ R(t, {
+		size: "xs",
+		type: "secondary",
+		children: s.showingCount(c, l)
+	}) : /* @__PURE__ */ R(t, {
+		size: "xs",
+		type: "secondary",
+		children: a === "single" ? s.footer.pickOne : s.footer.pickMany
+	});
+	return /* @__PURE__ */ R("div", {
+		"aria-live": "polite",
+		className: e("media-library-footer-summary--component", K.footerSummary, d),
+		children: f
+	});
+}
+function Te({ tab: t, selectedIds: n, stagedFiles: r, uploading: a = !1, strings: o, confirmLabel: s, cancelLabel: c, onCancel: l, onConfirm: u, onUpload: d, onCancelUpload: f, className: p }) {
+	let m = e("media-library-footer-actions--component", K.footerActions, p);
+	return t === "upload" ? /* @__PURE__ */ z("div", {
+		className: m,
+		children: [/* @__PURE__ */ R(i, {
+			type: "button",
+			tone: "neutral",
+			buttonStyle: "ghost",
+			disabled: a,
+			onClick: f,
+			children: c ?? o.cancel
+		}), /* @__PURE__ */ R(i, {
+			type: "button",
+			disabled: r.length === 0 || a,
+			loading: a,
+			onClick: d,
+			children: o.footer.uploadStaged(r.length)
+		})]
+	}) : /* @__PURE__ */ z("div", {
+		className: m,
+		children: [/* @__PURE__ */ R(i, {
+			type: "button",
+			tone: "neutral",
+			buttonStyle: "outline",
+			onClick: l,
+			children: c ?? o.cancel
+		}), /* @__PURE__ */ R(i, {
+			type: "button",
+			disabled: n.length === 0,
+			onClick: u,
+			children: s ?? o.confirm
+		})]
+	});
+}
+function Ee({ tab: t, selectedItems: n, selectedIds: r, selectionMode: i, stagedFiles: a, uploading: o, strings: s, visibleCount: c, totalCount: l, confirmLabel: u, cancelLabel: d, onCancel: f, onConfirm: p, onClearSelection: m, onUpload: h, onCancelUpload: g, chrome: _ = "section", className: v }) {
+	return /* @__PURE__ */ z("footer", {
+		"data-chrome": _,
+		className: e("media-library-footer--component", K.footer, v),
+		children: [/* @__PURE__ */ R(we, {
+			tab: t,
+			selectedIds: r,
+			selectionMode: i,
+			stagedFiles: a,
+			strings: s,
+			visibleCount: c,
+			totalCount: l,
+			onClearSelection: m
+		}), /* @__PURE__ */ R(Te, {
+			tab: t,
+			selectedItems: n,
+			selectedIds: r,
+			stagedFiles: a,
+			uploading: o,
+			strings: s,
+			confirmLabel: u,
+			cancelLabel: d,
+			onCancel: f,
+			onConfirm: p,
+			onUpload: h,
+			onCancelUpload: g
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/media-library/media-library.strings.ts
+var De = {
+	title: "Media library",
+	description: "Browse, upload, and pick assets.",
+	tabs: {
+		library: "Library",
+		upload: "Upload"
+	},
+	views: {
+		grid: "Grid view",
+		table: "Table view"
+	},
+	searchPlaceholder: "Search assets…",
+	clearSearch: "Clear search",
+	clearFilters: "Clear filters",
+	types: {
+		all: "All types",
+		image: "Images",
+		video: "Video",
+		file: "Files"
+	},
+	sorts: {
+		newest: "Newest",
+		name: "Name",
+		size: "Size",
+		usage: "Most used"
+	},
+	collectionAll: "All collections",
+	collectionLabel: "Collection",
+	sortLabel: "Sort",
+	typeLabel: "Type",
+	viewLabel: "Layout",
+	activeSearchLabel: "Searching",
+	loading: "Loading assets…",
+	error: "Could not load assets.",
+	emptyTitle: "Nothing here yet",
+	emptyDescription: "Upload an asset to get started.",
+	emptyFilteredTitle: "No assets match",
+	emptyFilteredDescription: "Try a different search, type, or collection.",
+	selectedCount: (e) => `${e} selected`,
+	showingCount: (e, t) => `${e} of ${t}`,
+	select: "Select",
+	deselect: "Deselect",
+	details: "Details",
+	close: "Close",
+	confirm: "Use selected",
+	cancel: "Cancel",
+	clearSelection: "Clear selection",
+	footer: {
+		pickOne: "Choose one asset.",
+		pickMany: "Choose one or more assets.",
+		noFiles: "No files staged.",
+		stagedSummary: (e, t) => `${e} ${e === 1 ? "file" : "files"} staged · ${t}`,
+		uploadStaged: (e) => e <= 1 ? "Upload" : `Upload ${e} files`
+	},
+	detail: {
+		altLabel: "Alt text",
+		altPlaceholder: "Describe the image for screen readers",
+		collectionLabel: "Collection",
+		tagsLabel: "Tags",
+		tagsPlaceholder: "Add a tag and press Enter",
+		publicLabel: "Public",
+		publicDescription: "Anyone with the link can view this asset.",
+		save: "Save changes",
+		saving: "Saving…",
+		delete: "Delete",
+		deleting: "Deleting…",
+		dimensions: "Dimensions",
+		size: "Size",
+		uploaded: "Uploaded",
+		type: "Type"
+	},
+	upload: {
+		dropTitle: "Drop files here",
+		dropDescription: "or browse from your device",
+		browse: "Browse files",
+		staged: (e) => `${e} file${e === 1 ? "" : "s"} ready`,
+		start: "Upload",
+		uploading: "Uploading…",
+		cancel: "Cancel upload",
+		clear: "Clear",
+		remove: "Remove",
+		failed: "Upload failed",
+		emptyTitle: "No files chosen",
+		emptyDescription: "Drop files above, or browse from your device.",
+		optionsTitle: "Applied to every file"
+	},
+	gallery: {
+		title: "Media",
+		description: "Attached assets, in display order.",
+		add: "Add media",
+		remove: "Remove",
+		primary: "Cover",
+		makePrimary: "Make cover",
+		moveEarlier: "Move earlier",
+		moveLater: "Move later",
+		emptyTitle: "No media attached",
+		emptyDescription: "Add an asset to show it here.",
+		limitReached: (e) => `${e} is the maximum.`
+	}
+}, Oe = [
+	"all",
+	"image",
+	"video",
+	"file"
+];
+function Z({ title: r, description: a, confirmLabel: o, cancelLabel: s, density: c = "comfortable", showMeta: l = !0, allowUpload: u = !0, typeFilters: d = Oe, confirmOnSelect: f = !1, onConfirm: m, onCancel: h, onClose: b, bulkActions: x, strings: S, slots: C, className: T, collections: E = [], selectionMode: D = "multiple", ...O }) {
+	let k = F(() => p(De, S), [S]), A = _e({
+		...O,
+		collections: E,
+		selectionMode: D
+	}), { tab: j, setTab: te, view: ne, setView: re, query: ie, setQuery: M, type: ae, setType: N, collection: P, setCollection: oe, sort: se, setSort: I, detailId: L, setDetailId: B, visibleItems: ce, selectedIds: V, selectedItems: H, selectedSet: le, toggleSelection: ue, clearSelection: U, clearFilters: de, loading: fe, error: pe, hasFilters: W, totalCount: me, filteredCount: he, accessors: G } = A, ge = F(() => A.items.find((e) => G.getId(e) === L) ?? null, [
+		G,
+		L,
+		A.items
+	]), q = !f && !!m, J = (e) => {
+		if (ue(e), !f) return;
+		let t = A.items.find((t) => G.getId(t) === e);
+		t && m?.([t], [e]), b?.();
+	}, Y = fe ? C?.loading ?? /* @__PURE__ */ z("div", {
+		className: K.state,
+		children: [/* @__PURE__ */ R(w, {}), /* @__PURE__ */ R(t, {
+			type: "secondary",
+			children: k.loading
+		})]
+	}) : pe ? C?.error ?? /* @__PURE__ */ R(n, {
+		title: k.error,
+		description: !1,
+		padding: "md",
+		action: W ? /* @__PURE__ */ R(i, {
+			type: "button",
+			tone: "neutral",
+			buttonStyle: "outline",
+			onClick: de,
+			children: k.clearFilters
+		}) : void 0
+	}) : ce.length === 0 ? C?.empty ?? /* @__PURE__ */ R(ye, {
+		title: W ? k.emptyFilteredTitle : k.emptyTitle,
+		description: W ? k.emptyFilteredDescription : k.emptyDescription,
+		action: W ? /* @__PURE__ */ R(i, {
+			type: "button",
+			tone: "neutral",
+			buttonStyle: "outline",
+			onClick: de,
+			children: k.clearFilters
+		}) : void 0
+	}) : ne === "table" ? /* @__PURE__ */ R(X, {
+		items: ce,
+		selectedSet: le,
+		selectionMode: D,
+		accessors: G,
+		strings: k,
+		onToggle: J,
+		onDetails: B
+	}) : /* @__PURE__ */ R("div", {
+		"data-density": c,
+		className: K.grid,
+		children: ce.map((e) => {
+			let t = G.getId(e), n = le.has(t);
+			return C?.renderItem ? /* @__PURE__ */ R("div", { children: C.renderItem(e, {
+				id: t,
+				selected: n,
+				selectionMode: D,
+				accessors: G,
+				toggle: () => J(t),
+				openDetails: () => B(t)
+			}) }, t) : /* @__PURE__ */ R(xe, {
+				item: e,
+				selected: n,
+				density: c,
+				showMeta: l,
+				selectionMode: D,
+				accessors: G,
+				strings: k,
+				onToggle: () => J(t),
+				onDetails: () => B(t)
+			}, t);
+		})
+	}), ve = /* @__PURE__ */ z("div", {
+		className: K.browse,
+		children: [/* @__PURE__ */ R(be, {
+			query: ie,
+			onQueryChange: M,
+			type: ae,
+			onTypeChange: N,
+			typeFilters: d,
+			collection: P,
+			onCollectionChange: oe,
+			collections: E,
+			sort: se,
+			onSortChange: I,
+			view: ne,
+			onViewChange: re,
+			hasFilters: W,
+			onClearFilters: de,
+			strings: k,
+			end: C?.toolbarEnd
+		}), /* @__PURE__ */ z("div", {
+			className: K.workspace,
+			"data-detail": ge ? "" : void 0,
+			children: [/* @__PURE__ */ R("div", {
+				className: K.results,
+				children: Y
+			}), !!ge && /* @__PURE__ */ R(Se, {
+				item: ge,
+				collections: E,
+				accessors: G,
+				strings: k,
+				onClose: () => B(null),
+				onUpdate: (e) => A.updateItem(ge, e),
+				onRemove: () => A.removeItem(ge),
+				renderDetail: C?.renderDetail
+			})]
+		})]
+	});
+	return /* @__PURE__ */ z("section", {
+		"data-slot": "media-library",
+		className: e("media-library--component", K.root, T),
+		children: [
+			!!(r || a || C?.headerStart || C?.headerEnd) && /* @__PURE__ */ z("header", {
+				className: K.header,
+				children: [/* @__PURE__ */ z("div", {
+					className: K.headerText,
+					children: [
+						C?.headerStart,
+						!!r && /* @__PURE__ */ R(t, {
+							weight: "semibold",
+							children: r
+						}),
+						!!a && /* @__PURE__ */ R(t, {
+							size: "sm",
+							type: "secondary",
+							children: a
+						})
+					]
+				}), C?.headerEnd]
+			}),
+			u ? /* @__PURE__ */ z(_, {
+				value: j,
+				onValueChange: (e) => te(e),
+				children: [
+					/* @__PURE__ */ z(y, { children: [/* @__PURE__ */ R(g, {
+						value: "library",
+						children: k.tabs.library
+					}), /* @__PURE__ */ R(g, {
+						value: "upload",
+						children: k.tabs.upload
+					})] }),
+					/* @__PURE__ */ R(v, {
+						value: "library",
+						children: ve
+					}),
+					/* @__PURE__ */ R(v, {
+						value: "upload",
+						children: /* @__PURE__ */ R(Ce, {
+							stagedFiles: A.stagedFiles,
+							uploading: A.uploading,
+							uploadOptions: A.uploadOptions,
+							collections: E,
+							strings: k,
+							onAddFiles: A.addFiles,
+							onRemoveFile: A.removeStagedFile,
+							onClear: A.clearStagedFiles,
+							onOptionsChange: A.updateUploadOptions,
+							onStart: () => void A.startUpload(),
+							onCancel: A.cancelUpload,
+							empty: C?.uploadEmpty
+						})
+					})
+				]
+			}) : ve,
+			C?.footer,
+			!!x && !q && /* @__PURE__ */ R(ee, {
+				selectedCount: V.length,
+				totalCount: me,
+				onClear: U,
+				strings: {
+					summary: (e) => k.selectedCount(e),
+					clear: k.clearSelection
+				},
+				children: x({
+					selectedItems: H,
+					selectedIds: V,
+					selectedCount: V.length,
+					visibleCount: he,
+					totalCount: me,
+					clearSelection: U
+				})
+			}),
+			q && /* @__PURE__ */ R(Ee, {
+				tab: j,
+				selectedItems: H,
+				selectedIds: V,
+				selectionMode: D,
+				stagedFiles: A.stagedFiles,
+				uploading: A.uploading,
+				strings: k,
+				visibleCount: he,
+				totalCount: me,
+				confirmLabel: o,
+				cancelLabel: s,
+				onClearSelection: V.length > 0 ? U : void 0,
+				onCancel: () => {
+					h?.(), b?.();
+				},
+				onConfirm: () => {
+					m(H, V), b?.();
+				},
+				onUpload: () => void A.startUpload(),
+				onCancelUpload: A.cancelUpload
+			})
+		]
+	});
+}
+function ke({ open: t, onOpenChange: n, trigger: r, dialogTitle: i, dialogDescription: a, dialogClassName: o, contentClassName: s, closeOnEscape: c, closeOnBackdropClick: l, onClose: u, strings: d, ...f }) {
+	let m = p(De, d);
+	return /* @__PURE__ */ R(T, {
+		open: t,
+		onOpenChange: n,
+		trigger: r,
+		title: i ?? m.title,
+		description: a ?? m.description,
+		width: "xl",
+		closeOnEscape: c,
+		closeOnBackdropClick: l,
+		showCancel: !1,
+		showConfirm: !1,
+		className: e("media-library-dialog--component", o),
+		contentClassName: s,
+		children: /* @__PURE__ */ R(Z, {
+			...f,
+			strings: d,
+			onClose: () => {
+				u?.(), n?.(!1);
+			}
+		})
+	});
+}
+//#endregion
+//#region src/components/features/media-library/media-resource-gallery.tsx
+function Ae({ items: r, accessors: a, title: o, description: s, primaryId: c, onPrimaryChange: l, onRemove: d, onReorder: f, onAdd: m, maxItems: h, layout: g = "grid", density: _ = "comfortable", readOnly: v = !1, empty: y, action: b, renderItem: x, strings: S, className: C, ...ee }) {
+	let w = p(De, S), T = le(a), E = h !== void 0 && r.length >= h, k = !v && !!m && !E, A = (e, t) => {
+		if (t < 0 || t >= r.length) return;
+		let n = [...r], [i] = n.splice(e, 1);
+		i && (n.splice(t, 0, i), f?.(n.map((e) => T.getId(e)), n));
+	};
+	return /* @__PURE__ */ z("section", {
+		"data-slot": "media-resource-gallery",
+		className: e("media-resource-gallery--component", K.gallery, C),
+		...ee,
+		children: [!!(o || s || b || k) && /* @__PURE__ */ z("header", {
+			className: K.galleryHeader,
+			children: [/* @__PURE__ */ z("div", {
+				className: K.headerText,
+				children: [!!o && /* @__PURE__ */ R(t, {
+					weight: "semibold",
+					children: o
+				}), !!s && /* @__PURE__ */ R(t, {
+					size: "sm",
+					type: "secondary",
+					children: s
+				})]
+			}), /* @__PURE__ */ z("div", {
+				className: K.galleryActions,
+				children: [
+					b,
+					k && /* @__PURE__ */ z(i, {
+						type: "button",
+						tone: "neutral",
+						buttonStyle: "outline",
+						onClick: m,
+						children: [/* @__PURE__ */ R(re, {}), w.gallery.add]
+					}),
+					E && h !== void 0 && /* @__PURE__ */ R(t, {
+						size: "xs",
+						type: "secondary",
+						children: w.gallery.limitReached(h)
+					})
+				]
+			})]
+		}), r.length === 0 ? y ?? /* @__PURE__ */ R(n, {
+			title: w.gallery.emptyTitle,
+			description: w.gallery.emptyDescription,
+			padding: "md",
+			border: !0,
+			action: k ? /* @__PURE__ */ R(i, {
+				type: "button",
+				tone: "neutral",
+				buttonStyle: "outline",
+				onClick: m,
+				children: w.gallery.add
+			}) : void 0
+		}) : /* @__PURE__ */ R("ul", {
+			"data-layout": g,
+			"data-density": _,
+			className: K.galleryList,
+			children: r.map((e, t) => {
+				let n = T.getId(e), a = n === c, o = {
+					id: n,
+					index: t,
+					total: r.length,
+					primary: a,
+					accessors: T,
+					canMovePrevious: t > 0,
+					canMoveNext: t < r.length - 1,
+					setPrimary: () => l?.(n, e),
+					remove: () => d?.(n, e),
+					movePrevious: () => A(t, t - 1),
+					moveNext: () => A(t, t + 1)
+				};
+				return x ? /* @__PURE__ */ R("li", { children: x(e, o) }, n) : /* @__PURE__ */ z("li", {
+					"data-primary": a || void 0,
+					className: K.galleryItem,
+					children: [
+						/* @__PURE__ */ R(Y, {
+							item: e,
+							accessors: T,
+							className: K.galleryPreview
+						}),
+						a && /* @__PURE__ */ R(u, {
+							tone: "primary",
+							className: K.galleryBadge,
+							children: w.gallery.primary
+						}),
+						!v && /* @__PURE__ */ z("div", {
+							className: K.galleryControls,
+							children: [
+								!!f && /* @__PURE__ */ z(L, { children: [/* @__PURE__ */ R(i, {
+									type: "button",
+									tone: "neutral",
+									buttonStyle: "ghost",
+									iconOnly: !0,
+									"aria-label": w.gallery.moveEarlier,
+									disabled: !o.canMovePrevious,
+									onClick: o.movePrevious,
+									children: /* @__PURE__ */ R(D, {})
+								}), /* @__PURE__ */ R(i, {
+									type: "button",
+									tone: "neutral",
+									buttonStyle: "ghost",
+									iconOnly: !0,
+									"aria-label": w.gallery.moveLater,
+									disabled: !o.canMoveNext,
+									onClick: o.moveNext,
+									children: /* @__PURE__ */ R(O, {})
+								})] }),
+								!!l && !a && /* @__PURE__ */ R(i, {
+									type: "button",
+									tone: "neutral",
+									buttonStyle: "ghost",
+									iconOnly: !0,
+									"aria-label": w.gallery.makePrimary,
+									onClick: o.setPrimary,
+									children: /* @__PURE__ */ R(M, {})
+								}),
+								!!d && /* @__PURE__ */ R(i, {
+									type: "button",
+									tone: "neutral",
+									buttonStyle: "ghost",
+									iconOnly: !0,
+									"aria-label": `${w.gallery.remove}: ${T.getName(e)}`,
+									onClick: o.remove,
+									children: /* @__PURE__ */ R(N, {})
+								})
+							]
+						})
+					]
+				}, n);
+			})
+		})]
+	});
+}
+//#endregion
+export { Z as MediaLibrary, xe as MediaLibraryCard, Se as MediaLibraryDetailPanel, ke as MediaLibraryDialog, ye as MediaLibraryEmptyState, Ee as MediaLibraryFooter, Te as MediaLibraryFooterActions, we as MediaLibraryFooterSummary, X as MediaLibraryList, be as MediaLibraryToolbar, Ce as MediaLibraryUploadPanel, Y as MediaPreview, Ae as MediaResourceGallery, De as defaultMediaLibraryStrings, ue as formatMediaLibrarySize, U as getMediaLibraryDimensions, le as resolveMediaLibraryAccessors, _e as useMediaLibrary };