themelia-react-ui 2.0.4 → 2.0.5

package/dist/features/media-library.js

@@ -1,29 +1,29 @@
 "use client";
-import { s as e, v as t } from "../ui-provider-CQCuCBcy.js";
+import { S as e, d as t } from "../ui-provider-C-74NVLc.js";
 import { useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-CF3c95Io.js";
-import { n as i } from "../buttons-BbfzgczK.js";
-import { c as a, o } from "../typography-CSyJrh28.js";
+import { t as r } from "../utils-B6kKb8jB.js";
+import { n as i } from "../buttons-BedGfygC.js";
+import { c as a, o } from "../typography-BQnine1k.js";
 import { t as s } from "../focus-recipes-B653VaLq.js";
-import { r as c, t as l } from "../structure-C0V0_Fyf.js";
-import { i as u } from "../smart-card-CqkzQsK-.js";
-import { n as d, t as f } from "../feedback-DZNL5Lg1.js";
-import { t as p } from "../progress-BvF2oCdV.js";
+import { r as c, t as l } from "../structure-DuxKl954.js";
+import { i as u } from "../smart-card-CW0hjetE.js";
+import { n as d, t as f } from "../feedback-Dm4izqFn.js";
+import { t as p } from "../progress-BJhQP9WX.js";
 import { n as m, t as h } from "../composition.recipes-COdiFhxB.js";
-import { r as g } from "../overlays-BlKynmde.js";
+import { r as g } from "../overlays-BSgCtM2v.js";
 import { t as _ } from "../interaction-recipes-XR9ZpVYL.js";
-import { a as v, i as y, t as b } from "../primitives-Du64iDbb.js";
-import { n as x, t as S } from "../number-E_OiIfJz.js";
-import { t as C } from "../badge-DErMA7ul.js";
-import { t as ee } from "../batch-action-bar-CdfIkCsV.js";
-import { t as w } from "../input-Cdw4k0fb.js";
-import { t as T } from "../form-field-CsgRmdit.js";
-import { c as E, l as D } from "../choice-inputs-JLtij2y4.js";
-import { r as O, t as k } from "../control-group-recipes-DBXmfh2E.js";
+import { a as v, i as y, t as b } from "../primitives-ByWgGUgt.js";
+import { n as x, t as S } from "../number-CRU3kGuk.js";
+import { t as C } from "../badge-xIiV_E7f.js";
+import { t as ee } from "../batch-action-bar-Cb8cuvyy.js";
+import { t as w } from "../input-CvyDQlY7.js";
+import { t as T } from "../form-field-BriWAXyg.js";
+import { c as E, l as D } from "../choice-inputs-zUgBZfE4.js";
+import { r as O, t as k } from "../control-group-recipes-fMuFo0H7.js";
 import { t as te } from "../upload.recipes-BbxTqrCT.js";
-import { t as ne } from "../metadata-list-qVV7AVxa.js";
-import { a as A } from "../upload-queue-DhQJiSRc.js";
-import { s as re } from "../data-display-D4oujtx0.js";
+import { t as ne } from "../metadata-list-C3MkU-Om.js";
+import { a as A } from "../upload-queue-qUXn1ykN.js";
+import { s as re } from "../data-display-BdgCAw8T.js";
 import { createContext as j, useCallback as M, useContext as ie, useEffect as ae, useMemo as N, useRef as oe, useState as P } from "react";
 import { Fragment as se, jsx as F, jsxs as I } from "react/jsx-runtime";
 import { ArrowLeft as L, ArrowRight as ce, Check as R, File as z, Grid2X2 as B, ImageIcon as le, ImagePlus as ue, Info as de, Layers3 as fe, LayoutList as pe, Lock as me, Play as he, Plus as ge, Search as _e, Star as ve, Trash2 as ye, UploadCloud as be, Video as xe, X as Se } from "lucide-react";
@@ -54,7 +54,7 @@ var Ce = {
 	sortUsage: "Most used",
 	gridView: "Grid view",
 	tableView: "Table view",
-	countAll: "{count} items",
+	countAll: "{count} {count, plural, one {item} other {items}}",
 	countFiltered: "{count} of {total} items",
 	countSearch: "{count} of {total} items for \"{query}\"",
 	activeSearchLabel: "Search",
@@ -67,7 +67,8 @@ var Ce = {
 	uploadMedia: "Upload media",
 	loading: "Loading media...",
 	errorTitle: "Media could not load",
-	errorDescription: "Try again or adjust your filters.",
+	errorDescription: "Check your connection, then try again.",
+	retry: "Try again",
 	cardDetails: "Details for {name}",
 	selectMode: "Select",
 	selectItem: "Select {name}",
@@ -257,7 +258,7 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 		me,
 		q,
 		i
-	]), Y = N(() => new Set(J), [J]), He = oe(/* @__PURE__ */ new Set()), X = oe(null), Z = oe(/* @__PURE__ */ new Map());
+	]), Y = N(() => new Set(J), [J]), He = oe(/* @__PURE__ */ new Set()), X = oe(null), Ue = oe(/* @__PURE__ */ new Map()), [We, Ge] = P(0), Ke = M(() => Ge((e) => e + 1), []);
 	ae(() => {
 		if (!t) return;
 		let e = new AbortController();
@@ -278,6 +279,7 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 		}), () => e.abort();
 	}, [
 		B,
+		We,
 		t,
 		u,
 		L,
@@ -291,60 +293,60 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 			e.clear();
 		};
 	}, []);
-	let Ue = N(() => t ? ge : [...Ce, ...e], [
+	let qe = N(() => t ? ge : [...Ce, ...e], [
 		Ce,
 		ge,
 		t,
 		e
-	]), Q = N(() => Ue.filter((e) => !Ee.has(j.getId(e))).map((e) => Fe(e, ke[j.getId(e)])), [
+	]), Z = N(() => qe.filter((e) => !Ee.has(j.getId(e))).map((e) => Fe(e, ke[j.getId(e)])), [
 		j,
 		ke,
 		Ee,
-		Ue
-	]), We = N(() => {
-		let e = t ? Q : Ie(Q, j, L, R, B);
+		qe
+	]), Je = N(() => {
+		let e = t ? Z : Ie(Z, j, L, R, B);
 		return t ? e : Le(e, j, ue);
 	}, [
 		j,
 		B,
 		t,
-		Q,
+		Z,
 		L,
 		ue,
 		R
-	]), Ge = ve ?? Q.length, Ke = We.length, qe = N(() => Q.filter((e) => Y.has(j.getId(e))), [
+	]), Ye = ve ?? Z.length, Q = Je.length, Xe = N(() => Z.filter((e) => Y.has(j.getId(e))), [
 		j,
-		Q,
+		Z,
 		Y
-	]), Je = !!L.trim() || R !== "all" || B !== "all", $ = M((e) => {
+	]), Ze = !!L.trim() || R !== "all" || B !== "all", $ = M((e) => {
 		q || he(e);
-		let t = new Set(e), n = Q.filter((e) => t.has(j.getId(e)));
+		let t = new Set(e), n = Z.filter((e) => t.has(j.getId(e)));
 		o?.(e, n);
 	}, [
 		j,
 		q,
 		o,
-		Q
-	]), Ye = M((e) => {
+		Z
+	]), Qe = M((e) => {
 		let t = new Set(r === "single" ? [] : Y);
 		Y.has(e) && r !== "single" ? t.delete(e) : t.add(e), $(Array.from(t));
 	}, [
 		$,
 		Y,
 		r
-	]), Xe = M(() => $([]), [$]), [Ze, Qe] = U(ne, A, re), $e = Ze || J.length > 0, et = M((e) => {
-		Qe(e), !e && J.length > 0 && $([]);
+	]), $e = M(() => $([]), [$]), [et, tt] = U(ne, A, re), nt = et || J.length > 0, rt = M((e) => {
+		tt(e), !e && J.length > 0 && $([]);
 	}, [
 		$,
 		J.length,
-		Qe
-	]), tt = M(() => {
+		tt
+	]), it = M(() => {
 		ce(""), z("all"), le("all");
 	}, [
 		le,
 		ce,
 		z
-	]), nt = M((e) => {
+	]), at = M((e) => {
 		W((t) => [...t, ...e.map((e, t) => {
 			let n = Me(e);
 			return n && He.current.add(n), {
@@ -358,22 +360,22 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 				status: "staged"
 			};
 		})]);
-	}, []), rt = M((e) => {
+	}, []), ot = M((e) => {
 		W((t) => {
 			let n = t.find((t) => t.id === e);
 			return n?.src && (Ne(n.src), He.current.delete(n.src)), t.filter((t) => t.id !== e);
 		});
-	}, []), it = M(() => {
+	}, []), st = M(() => {
 		W((e) => {
 			for (let t of e) t.src && (Ne(t.src), He.current.delete(t.src));
 			return [];
 		});
-	}, []), at = M((e) => {
+	}, []), ct = M((e) => {
 		K((t) => ({
 			...t,
 			...e
 		}));
-	}, [K]), ot = M((e, t) => {
+	}, [K]), lt = M((e, t) => {
 		W((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
@@ -394,26 +396,27 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 		setSort: de,
 		detailId: fe,
 		setDetailId: pe,
-		items: Q,
-		visibleItems: We,
+		items: Z,
+		visibleItems: Je,
 		selectedIds: J,
-		selectedItems: qe,
+		selectedItems: Xe,
 		selectedSet: Y,
-		toggleSelection: Ye,
-		clearSelection: Xe,
-		selecting: $e,
-		setSelecting: et,
-		clearFilters: tt,
+		toggleSelection: Qe,
+		clearSelection: $e,
+		selecting: nt,
+		setSelecting: rt,
+		clearFilters: it,
 		loading: be,
 		error: Se,
-		hasFilters: Je,
-		totalCount: Ge,
-		filteredCount: Ke,
+		retry: Ke,
+		hasFilters: Ze,
+		totalCount: Ye,
+		filteredCount: Q,
 		stagedFiles: Re,
-		addFiles: nt,
-		removeStagedFile: rt,
-		clearStagedFiles: it,
-		updateUploadOptions: at,
+		addFiles: at,
+		removeStagedFile: ot,
+		clearStagedFiles: st,
+		updateUploadOptions: ct,
 		uploadOptions: G,
 		uploading: ze,
 		startUpload: M(async () => {
@@ -427,10 +430,10 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 			let t = {
 				signal: e.signal,
 				setProgress: (t, n) => {
-					e.signal.aborted || ot(t, { progress: Math.max(0, Math.min(100, n)) });
+					e.signal.aborted || lt(t, { progress: Math.max(0, Math.min(100, n)) });
 				},
 				setFileStatus: (t, n, r) => {
-					e.signal.aborted || ot(t, {
+					e.signal.aborted || lt(t, {
 						status: n,
 						error: r
 					});
@@ -448,7 +451,7 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 					let e = i.map((e) => j.getId(e));
 					$(r === "single" ? e.slice(0, 1) : Array.from(/* @__PURE__ */ new Set([...e, ...J])));
 				}
-				it(), se("library");
+				st(), se("library");
 			} catch (t) {
 				if (e.signal.aborted) return;
 				V(t), W((e) => e.map((e) => e.status === "uploading" ? {
@@ -462,13 +465,13 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 		}, [
 			j,
 			$,
-			it,
+			st,
 			u,
 			l,
 			J,
 			r,
 			se,
-			ot,
+			lt,
 			Re,
 			G,
 			ze
@@ -482,8 +485,8 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 			} : e));
 		}, []),
 		updateItem: M(async (e, t) => {
-			let n = j.getId(e), r = `update:${n}`, i = (Z.current.get(r) ?? 0) + 1;
-			Z.current.set(r, i);
+			let n = j.getId(e), r = `update:${n}`, i = (Ue.current.get(r) ?? 0) + 1;
+			Ue.current.set(r, i);
 			let a = ke[n];
 			V(null), Ae((e) => ({
 				...e,
@@ -495,7 +498,7 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 			try {
 				return await s?.(e, t), !0;
 			} catch (e) {
-				return Z.current.get(r) === i && Ae((e) => {
+				return Ue.current.get(r) === i && Ae((e) => {
 					let t = { ...e };
 					return a ? t[n] = a : delete t[n], t;
 				}), V(e), u?.(e), !1;
@@ -507,14 +510,14 @@ function Re({ items: e = Te, fetcher: t, accessors: n, selectionMode: r = "multi
 			s
 		]),
 		removeItem: M(async (e) => {
-			let t = j.getId(e), n = `delete:${t}`, r = (Z.current.get(n) ?? 0) + 1;
-			Z.current.set(n, r);
+			let t = j.getId(e), n = `delete:${t}`, r = (Ue.current.get(n) ?? 0) + 1;
+			Ue.current.set(n, r);
 			let i = Ee.has(t);
 			V(null), Oe((e) => new Set(e).add(t));
 			try {
 				return await c?.(e), Y.has(t) && $(J.filter((e) => e !== t)), !0;
 			} catch (e) {
-				return !i && Z.current.get(n) === r && Oe((e) => {
+				return !i && Ue.current.get(n) === r && Oe((e) => {
 					let n = new Set(e);
 					return n.delete(t), n;
 				}), V(e), u?.(e), !1;
@@ -580,8 +583,8 @@ function Y({ icon: e, title: t, description: n, action: i, className: a }) {
 		className: r("media-library-empty-state--component min-h-64 bg-muted/30", a)
 	});
 }
-function He({ query: n, type: o, typeFilters: s, collection: c, sort: u, view: d, collections: f = [], strings: p, onQueryChange: m, onTypeChange: h, onCollectionChange: g, onSortChange: v, onViewChange: y, onClearFilters: b, toolbarEnd: x, selecting: S = !1, onSelectingChange: ee }) {
-	let { defaultScale: T } = e(), E = t(void 0, T), te = [
+function He({ query: n, type: o, typeFilters: s, collection: c, sort: u, view: d, collections: f = [], strings: p, onQueryChange: m, onTypeChange: h, onCollectionChange: g, onSortChange: v, onViewChange: y, onClearFilters: b, toolbarEnd: x, selecting: S = !1, onSelectingChange: ee, summary: T, disabled: E = !1 }) {
+	let { defaultScale: te } = t(), ne = e(void 0, te), A = [
 		{
 			value: "all",
 			label: p.allTypes,
@@ -606,13 +609,13 @@ function He({ query: n, type: o, typeFilters: s, collection: c, sort: u, view: d
 		"all",
 		"image",
 		"video"
-	]).includes(e.value)), ne = [{
+	]).includes(e.value)), re = [{
 		value: "all",
 		label: p.allCollections
 	}, ...f.map((e) => ({
 		value: e.value,
 		label: String(e.label)
-	}))], A = [
+	}))], j = [
 		{
 			value: "newest",
 			label: p.sortNewest
@@ -629,138 +632,167 @@ function He({ query: n, type: o, typeFilters: s, collection: c, sort: u, view: d
 			value: "usage",
 			label: p.sortUsage
 		}
-	], re = n.trim(), j = re.length > 0, M = j || o !== "all" || c !== "all";
+	], M = n.trim(), ie = M.length > 0, ae = ie || o !== "all" || c !== "all";
 	return /* @__PURE__ */ I(l, {
 		direction: "horizontal",
 		wrap: !0,
 		align: "start",
 		gap: "md",
 		className: "media-library-toolbar--component",
-		children: [
-			/* @__PURE__ */ I(l, {
-				gap: "xs",
-				className: "media-library-toolbar--search min-w-52 flex-1",
-				children: [/* @__PURE__ */ F(w, {
-					value: n,
-					onChange: (e) => m(e.target.value),
-					placeholder: p.searchPlaceholder,
-					startIcon: _e,
-					clearable: !0,
-					onClear: () => m(""),
-					strings: { clear: p.clearSearch },
-					className: "bg-background"
-				}), !!j && /* @__PURE__ */ F(l, {
-					direction: "horizontal",
+		children: [/* @__PURE__ */ I(l, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "start",
+			gap: "md",
+			className: "media-library-toolbar--filters min-w-0 grow basis-80",
+			children: [
+				/* @__PURE__ */ I(l, {
 					gap: "xs",
-					wrap: !1,
-					className: "media-library-toolbar--search-value px-space-xs",
-					children: /* @__PURE__ */ I(C, {
-						tone: "secondary",
-						className: "max-w-full",
-						children: [/* @__PURE__ */ F(a, {
-							tag: "span",
-							size: "inherit",
-							className: "text-current",
-							children: p.activeSearchLabel
-						}), /* @__PURE__ */ F(a, {
-							tag: "span",
-							size: "inherit",
-							weight: "normal",
-							className: "min-w-0 truncate text-current",
-							children: re
-						})]
+					className: "media-library-toolbar--search min-w-52 flex-1",
+					children: [/* @__PURE__ */ F(w, {
+						value: n,
+						onChange: (e) => m(e.target.value),
+						placeholder: p.searchPlaceholder,
+						startIcon: _e,
+						clearable: !0,
+						onClear: () => m(""),
+						strings: { clear: p.clearSearch },
+						disabled: E,
+						className: "bg-background"
+					}), !!ie && /* @__PURE__ */ F(l, {
+						direction: "horizontal",
+						gap: "xs",
+						wrap: !1,
+						className: "media-library-toolbar--search-value px-space-xs",
+						children: /* @__PURE__ */ I(C, {
+							tone: "secondary",
+							className: "max-w-full",
+							children: [/* @__PURE__ */ F(a, {
+								tag: "span",
+								size: "inherit",
+								className: "text-current",
+								children: p.activeSearchLabel
+							}), /* @__PURE__ */ F(a, {
+								tag: "span",
+								size: "inherit",
+								weight: "normal",
+								className: "min-w-0 truncate text-current",
+								children: M
+							})]
+						})
+					})]
+				}),
+				/* @__PURE__ */ F("div", {
+					className: r("media-library-toolbar--type-toggle shrink-0", O.frame, k[ne]),
+					role: "tablist",
+					"aria-label": p.typeFilterLabel,
+					children: A.map((e) => {
+						let t = e.icon, n = o === e.value;
+						return /* @__PURE__ */ I(i, {
+							type: "button",
+							role: "tab",
+							"aria-selected": n,
+							tone: "secondary",
+							buttonStyle: "ghost",
+							size: "sm",
+							disabled: E,
+							className: r(O.item, "shadow-none", n ? `${_.segmentActive} hover:bg-card` : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
+							onClick: () => h(e.value),
+							children: [t && /* @__PURE__ */ F(t, { className: "size-icon-md" }), /* @__PURE__ */ F(a, {
+								tag: "span",
+								size: "xs",
+								weight: "medium",
+								className: "text-inherit",
+								children: e.label
+							})]
+						}, e.value);
 					})
-				})]
-			}),
-			/* @__PURE__ */ F("div", {
-				className: r("media-library-toolbar--type-toggle", O.frame, k[E]),
-				role: "tablist",
-				"aria-label": p.typeFilterLabel,
-				children: te.map((e) => {
-					let t = e.icon, n = o === e.value;
-					return /* @__PURE__ */ I(i, {
+				}),
+				/* @__PURE__ */ I(l, {
+					direction: "horizontal",
+					gap: "md",
+					wrap: !0,
+					className: "media-library-toolbar--selects min-w-0",
+					children: [/* @__PURE__ */ F("div", {
+						className: "min-w-40 grow",
+						children: /* @__PURE__ */ F(D, {
+							value: c,
+							options: re,
+							onValueChange: (e) => g(e ?? "all"),
+							placeholder: p.collectionFilterLabel,
+							"aria-label": p.collectionFilterLabel,
+							disabled: E,
+							className: "bg-background"
+						})
+					}), /* @__PURE__ */ F("div", {
+						className: "min-w-32 grow",
+						children: /* @__PURE__ */ F(D, {
+							value: u,
+							options: j,
+							onValueChange: (e) => v(e ?? "newest"),
+							placeholder: p.sortLabel,
+							"aria-label": p.sortLabel,
+							disabled: E,
+							className: "bg-background"
+						})
+					})]
+				}),
+				!!ae && /* @__PURE__ */ F(i, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					disabled: E,
+					onClick: b,
+					children: p.clearFilters
+				})
+			]
+		}), /* @__PURE__ */ I(l, {
+			direction: "horizontal",
+			align: "center",
+			gap: "md",
+			wrap: !1,
+			className: "media-library-toolbar--view ms-auto min-w-0 max-w-full",
+			children: [
+				T,
+				/* @__PURE__ */ I("div", {
+					className: r("media-library-toolbar--view-toggle shrink-0", O.frame, k[ne]),
+					children: [/* @__PURE__ */ F(i, {
 						type: "button",
-						role: "tab",
-						"aria-selected": n,
-						tone: "secondary",
-						buttonStyle: "ghost",
+						tone: d === "grid" ? "neutral" : "secondary",
+						buttonStyle: d === "grid" ? "solid" : "ghost",
 						size: "sm",
-						className: r(O.item, "shadow-none", n ? `${_.segmentActive} hover:bg-card` : "text-muted-foreground hover:bg-transparent hover:text-foreground"),
-						onClick: () => h(e.value),
-						children: [t && /* @__PURE__ */ F(t, { className: "size-icon-md" }), /* @__PURE__ */ F(a, {
-							tag: "span",
-							size: "xs",
-							weight: "medium",
-							className: "text-inherit",
-							children: e.label
-						})]
-					}, e.value);
-				})
-			}),
-			/* @__PURE__ */ F("div", {
-				className: "min-w-40",
-				children: /* @__PURE__ */ F(D, {
-					value: c,
-					options: ne,
-					onValueChange: (e) => g(e ?? "all"),
-					placeholder: p.collectionFilterLabel,
-					"aria-label": p.collectionFilterLabel,
-					className: "bg-background"
-				})
-			}),
-			/* @__PURE__ */ F("div", {
-				className: "min-w-32",
-				children: /* @__PURE__ */ F(D, {
-					value: u,
-					options: A,
-					onValueChange: (e) => v(e ?? "newest"),
-					placeholder: p.sortLabel,
-					"aria-label": p.sortLabel,
-					className: "bg-background"
-				})
-			}),
-			/* @__PURE__ */ I("div", {
-				className: r("media-library-toolbar--view-toggle ml-auto", O.frame, k[E]),
-				children: [/* @__PURE__ */ F(i, {
-					type: "button",
-					tone: d === "grid" ? "neutral" : "secondary",
-					buttonStyle: d === "grid" ? "solid" : "ghost",
-					size: "sm",
-					iconOnly: !0,
-					className: r(O.item, d === "grid" && `${_.segmentActive} hover:bg-card`),
-					"aria-label": p.gridView,
-					onClick: () => y("grid"),
-					children: /* @__PURE__ */ F(B, { className: "size-icon-md" })
-				}), /* @__PURE__ */ F(i, {
+						iconOnly: !0,
+						disabled: E,
+						className: r(O.item, d === "grid" && `${_.segmentActive} hover:bg-card`),
+						"aria-label": p.gridView,
+						onClick: () => y("grid"),
+						children: /* @__PURE__ */ F(B, { className: "size-icon-md" })
+					}), /* @__PURE__ */ F(i, {
+						type: "button",
+						tone: d === "table" ? "neutral" : "secondary",
+						buttonStyle: d === "table" ? "solid" : "ghost",
+						size: "sm",
+						iconOnly: !0,
+						disabled: E,
+						className: r(O.item, d === "table" && `${_.segmentActive} hover:bg-card`),
+						"aria-label": p.tableView,
+						onClick: () => y("table"),
+						children: /* @__PURE__ */ F(pe, { className: "size-icon-md" })
+					})]
+				}),
+				!!ee && /* @__PURE__ */ F(i, {
 					type: "button",
-					tone: d === "table" ? "neutral" : "secondary",
-					buttonStyle: d === "table" ? "solid" : "ghost",
-					size: "sm",
-					iconOnly: !0,
-					className: r(O.item, d === "table" && `${_.segmentActive} hover:bg-card`),
-					"aria-label": p.tableView,
-					onClick: () => y("table"),
-					children: /* @__PURE__ */ F(pe, { className: "size-icon-md" })
-				})]
-			}),
-			!!M && /* @__PURE__ */ F(i, {
-				type: "button",
-				tone: "secondary",
-				buttonStyle: "ghost",
-				onClick: b,
-				children: p.clearFilters
-			}),
-			!!ee && /* @__PURE__ */ F(i, {
-				type: "button",
-				"aria-pressed": S,
-				tone: "secondary",
-				buttonStyle: "outline",
-				className: r("media-library-toolbar--select", S && _.togglePressed),
-				onClick: () => ee(!S),
-				children: p.selectMode
-			}),
-			x
-		]
+					"aria-pressed": S,
+					tone: "secondary",
+					buttonStyle: "outline",
+					disabled: E,
+					className: r("media-library-toolbar--select shrink-0", S && _.togglePressed),
+					onClick: () => ee(!S),
+					children: p.selectMode
+				}),
+				x
+			]
+		})]
 	});
 }
 function X({ item: e, selected: t = !1, density: n = "comfortable", showMeta: o = !0, accessors: u, strings: d, onToggle: f, onDetails: p, onOpen: m, selecting: h = !1, className: g }) {
@@ -865,7 +897,7 @@ function X({ item: e, selected: t = !1, density: n = "comfortable", showMeta: o
 		]
 	});
 }
-function Z({ items: e, selectedSet: t, accessors: n, strings: c, onToggle: l, onDetails: u, onOpen: d, selecting: f = !1 }) {
+function Ue({ items: e, selectedSet: t, accessors: n, strings: c, onToggle: l, onDetails: u, onOpen: d, selecting: f = !1 }) {
 	let p = !!d && !f;
 	return /* @__PURE__ */ I("div", {
 		className: "media-library-list--component min-w-180",
@@ -885,14 +917,14 @@ function Z({ items: e, selectedSet: t, accessors: n, strings: c, onToggle: l, on
 			let o = n.getId(e), f = t.has(o), m = n.getType(e), h = n.getName(e), g = n.getSrc(e), v = n.getPublic(e) === !1;
 			return /* @__PURE__ */ I("div", {
 				"data-selected": f || void 0,
-				className: r("media-library-list--row relative grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-space-lg border-b border-border/60 px-row-x py-row-y last:border-b-0", `cursor-pointer rounded-inner transition-colors ${_.rowHover}`, f && _.rowSelected),
+				className: r("media-library-list--row relative grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-space-lg border-b border-border/60 px-row-x py-row-y last:border-b-0", `cursor-pointer rounded-radius transition-colors ${_.rowHover}`, f && _.rowSelected),
 				onClick: () => p && d ? d(o) : l(o),
 				children: [
 					/* @__PURE__ */ F("button", {
 						type: "button",
 						"aria-label": h,
 						"aria-pressed": p ? void 0 : f,
-						className: r("media-library-list--select rounded-inner", W),
+						className: r("media-library-list--select rounded-radius", W),
 						onClick: (e) => {
 							e.stopPropagation(), p && d ? d(o) : l(o);
 						}
@@ -913,7 +945,7 @@ function Z({ items: e, selectedSet: t, accessors: n, strings: c, onToggle: l, on
 					}),
 					/* @__PURE__ */ F(q, {
 						tint: n.getTint(e),
-						className: "size-9 rounded-inner",
+						className: "size-9 rounded-radius",
 						children: g ? /* @__PURE__ */ F("img", {
 							src: g,
 							alt: "",
@@ -969,7 +1001,7 @@ function Z({ items: e, selectedSet: t, accessors: n, strings: c, onToggle: l, on
 		})]
 	});
 }
-function Ue({ item: e, collections: t = [], accessors: n, strings: o, onClose: s, onUpdate: c, onRemove: u, onReplace: d, renderDetail: f }) {
+function We({ item: e, collections: t = [], accessors: n, strings: o, onClose: s, onUpdate: c, onRemove: u, onReplace: d, renderDetail: f }) {
 	if (!e) return null;
 	let p = n.getName(e), m = n.getType(e), g = n.getSrc(e), _ = n.getCollection(e) ?? t[0]?.value ?? "", v = n.getTags(e), x = n.getPublic(e) ?? !0, S = f?.(e, {
 		accessors: n,
@@ -1132,7 +1164,7 @@ function Ue({ item: e, collections: t = [], accessors: n, strings: o, onClose: s
 		})]
 	});
 }
-function Q({ stagedFiles: e, uploadOptions: t, collections: n = [], uploading: r = !1, strings: o, onFiles: s, onRemoveFile: c, onOptionsChange: u, empty: d }) {
+function Ge({ stagedFiles: e, uploadOptions: t, collections: n = [], uploading: r = !1, strings: o, onFiles: s, onRemoveFile: c, onOptionsChange: u, empty: d }) {
 	return /* @__PURE__ */ F("div", {
 		className: "media-library-upload-panel--component p-surface",
 		children: /* @__PURE__ */ I(l, {
@@ -1156,7 +1188,7 @@ function Q({ stagedFiles: e, uploadOptions: t, collections: n = [], uploading: r
 						className: "media-library-upload-panel--staged-file flex items-center gap-space-lg rounded-radius border border-border bg-card text-card-foreground px-row-x py-row-y",
 						children: [
 							/* @__PURE__ */ F(q, {
-								className: "size-10 rounded-inner",
+								className: "size-10 rounded-radius",
 								children: e.src ? /* @__PURE__ */ F("img", {
 									src: e.src,
 									alt: e.name,
@@ -1264,7 +1296,7 @@ function Q({ stagedFiles: e, uploadOptions: t, collections: n = [], uploading: r
 		})
 	});
 }
-function We({ tab: e, selectedIds: t, selectionMode: n, stagedFiles: o, strings: s, onClearSelection: c, className: l }) {
+function Ke({ tab: e, selectedIds: t, selectionMode: n, stagedFiles: o, strings: s, onClearSelection: c, className: l }) {
 	let u = t.length, d = o.reduce((e, t) => e + t.size, 0), f = o.length, p = r("media-library-footer-summary--component flex min-w-0 items-center gap-space-lg", l);
 	return e === "upload" ? /* @__PURE__ */ F("div", {
 		className: p,
@@ -1300,7 +1332,7 @@ function We({ tab: e, selectedIds: t, selectionMode: n, stagedFiles: o, strings:
 		})
 	});
 }
-function Ge({ tab: e, selectedItems: t, selectedIds: n, stagedFiles: a, uploading: o = !1, strings: s, confirmLabel: c, cancelLabel: l, onCancel: u, onConfirm: d, onUpload: f, onCancelUpload: p, className: m }) {
+function qe({ tab: e, selectedItems: t, selectedIds: n, stagedFiles: a, uploading: o = !1, strings: s, confirmLabel: c, cancelLabel: l, onCancel: u, onConfirm: d, onUpload: f, onCancelUpload: p, className: m }) {
 	let h = n.length, g = a.length;
 	return e === "upload" ? /* @__PURE__ */ I("div", {
 		className: r("media-library-footer-actions--component flex min-w-0 flex-col-reverse gap-space-md @md/media-library:flex-row @md/media-library:justify-end", m),
@@ -1337,19 +1369,19 @@ function Ge({ tab: e, selectedItems: t, selectedIds: n, stagedFiles: a, uploadin
 		})]
 	});
 }
-function Ke({ tab: e, selectedItems: t, selectedIds: n, 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 }) {
+function Z({ tab: e, selectedItems: t, selectedIds: n, 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__ */ F("footer", {
 		className: r("media-library-footer--component", h === "section" && "border-t border-border bg-background text-foreground p-surface", g),
 		children: /* @__PURE__ */ I("div", {
 			className: "flex min-w-0 flex-col gap-space-lg @md/media-library:flex-row @md/media-library:justify-between",
-			children: [/* @__PURE__ */ F(We, {
+			children: [/* @__PURE__ */ F(Ke, {
 				tab: e,
 				selectedIds: n,
 				selectionMode: i,
 				stagedFiles: a,
 				strings: s,
 				onClearSelection: f
-			}), /* @__PURE__ */ F(Ge, {
+			}), /* @__PURE__ */ F(qe, {
 				tab: e,
 				selectedItems: t,
 				selectedIds: n,
@@ -1368,8 +1400,8 @@ function Ke({ tab: e, selectedItems: t, selectedIds: n, selectionMode: i, staged
 }
 //#endregion
 //#region src/components/features/media-library/media-library.tsx
-var qe = j(null);
-function Je(e, t, n) {
+var Je = j(null);
+function Ye(e, t, n) {
 	return N(() => {
 		if (e) return e;
 		let r = /* @__PURE__ */ new Set();
@@ -1387,8 +1419,8 @@ function Je(e, t, n) {
 		t
 	]);
 }
-function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLabel: h, selectionMode: g = "multiple", density: v = "comfortable", showMeta: y = !0, allowUpload: b = !0, typeFilters: x, confirmOnSelect: w = !1, onConfirm: T, onCancel: E, onClose: D, bulkActions: te, strings: ne, slots: A, heightClassName: re, className: j, items: M, fetcher: N, accessors: P, collections: se, value: L, defaultValue: ce, onValueChange: R, onItemUpdate: z, onItemDelete: B, onItemReplace: ue, onItemOpen: de, onUpload: fe, onError: pe, selecting: me, defaultSelecting: he, onSelectingChange: ge, tab: _e, defaultTab: ve, onTabChange: ye, view: xe, defaultView: Se, onViewChange: we, query: Te, defaultQuery: U, onQueryChange: Ee, type: De, defaultType: Oe, onTypeChange: ke, collection: Ae, defaultCollection: je, onCollectionChange: Me, sort: Ne, defaultSort: Pe, onSortChange: Fe, uploadOptions: Ie, defaultUploadOptions: Le, onUploadOptionsChange: W, ...ze }) {
-	let { defaultScale: Be } = e(), Ve = t(void 0, Be), G = n(Ce, ne), K = Re({
+function Q({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLabel: h, selectionMode: g = "multiple", density: v = "comfortable", showMeta: y = !0, allowUpload: b = !0, typeFilters: x, confirmOnSelect: w = !1, onConfirm: T, onCancel: E, onClose: D, bulkActions: te, strings: ne, slots: A, heightClassName: re, className: j, items: M, fetcher: N, accessors: P, collections: se, value: L, defaultValue: ce, onValueChange: R, onItemUpdate: z, onItemDelete: B, onItemReplace: ue, onItemOpen: de, onUpload: fe, onError: pe, selecting: me, defaultSelecting: he, onSelectingChange: ge, tab: _e, defaultTab: ve, onTabChange: ye, view: xe, defaultView: Se, onViewChange: we, query: Te, defaultQuery: U, onQueryChange: Ee, type: De, defaultType: Oe, onTypeChange: ke, collection: Ae, defaultCollection: je, onCollectionChange: Me, sort: Ne, defaultSort: Pe, onSortChange: Fe, uploadOptions: Ie, defaultUploadOptions: Le, onUploadOptionsChange: W, ...ze }) {
+	let { defaultScale: Be } = t(), Ve = e(void 0, Be), G = n(Ce, ne), K = Re({
 		items: M,
 		fetcher: N,
 		accessors: P,
@@ -1425,7 +1457,7 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 		selecting: me,
 		defaultSelecting: he ?? w,
 		onSelectingChange: ge
-	}), q = Je(se, K.items, K.accessors.getCollection), J = b ? K.tab : "library", $ = K.detailId ? K.items.find((e) => K.accessors.getId(e) === K.detailId) ?? null : null, Ye = ie(qe), Xe = !A?.footer, Ze = Ye && Xe ? /* @__PURE__ */ F(We, {
+	}), q = Ye(se, K.items, K.accessors.getCollection), J = b ? K.tab : "library", Q = K.detailId ? K.items.find((e) => K.accessors.getId(e) === K.detailId) ?? null : null, Xe = ie(Je), Ze = !A?.footer, $ = Xe && Ze ? /* @__PURE__ */ F(Ke, {
 		tab: J,
 		selectedIds: K.selectedIds,
 		selectionMode: g,
@@ -1433,7 +1465,7 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 		strings: G,
 		onClearSelection: K.clearSelection,
 		className: "media-library-dialog--selection-summary shrink-0 justify-end"
-	}) : null, Qe = !!(o || c || p || A?.headerStart), $e = !!(b || A?.headerEnd || Ze), et = Qe || $e, tt = () => {
+	}) : null, Qe = !!(o || c || p || A?.headerStart), $e = !!(b || A?.headerEnd || $), et = Qe || $e, tt = () => {
 		T?.(K.selectedItems, K.selectedIds), D?.();
 	}, nt = () => {
 		E?.(), D?.();
@@ -1453,14 +1485,14 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 		let e = at.current;
 		at.current = null, e?.isConnected && e.focus();
 	}, [K.detailId]);
-	let ct = K.query.trim(), lt = ct.length > 0 ? H(G.countSearch, {
+	let ct = !K.loading && !!K.error, lt = K.query.trim(), ut = lt.length > 0 ? H(G.countSearch, {
 		count: K.filteredCount,
 		total: K.totalCount,
-		query: ct
+		query: lt
 	}) : K.filteredCount === K.totalCount ? H(G.countAll, { count: K.totalCount }) : H(G.countFiltered, {
 		count: K.filteredCount,
 		total: K.totalCount
-	}), ut = !!te && !(Ye || T && !w), dt = oe(null), ft = J === "library" ? K.selectedIds.length : 0, pt = A?.footer ?? (ut && J === "library" ? null : Ye ? /* @__PURE__ */ F(Ge, {
+	}), dt = !!te && !(Xe || T && !w), ft = oe(null), pt = J === "library" ? K.selectedIds.length : 0, mt = A?.footer ?? (dt && J === "library" ? null : Xe ? /* @__PURE__ */ F(qe, {
 		tab: J,
 		selectedItems: K.selectedItems,
 		selectedIds: K.selectedIds,
@@ -1476,7 +1508,7 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 			K.cancelUpload(), K.clearStagedFiles(), K.setTab("library");
 		},
 		className: "ml-auto"
-	}) : /* @__PURE__ */ F(Ke, {
+	}) : /* @__PURE__ */ F(Z, {
 		tab: J,
 		selectedItems: K.selectedItems,
 		selectedIds: K.selectedIds,
@@ -1496,7 +1528,7 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 	}));
 	return /* @__PURE__ */ I("section", {
 		ref: it,
-		className: r("media-library--component @container/media-library box-border flex min-h-0 flex-col overflow-hidden rounded-radius border border-border bg-background text-foreground", re ?? "h-190 max-h-[calc(100vh-7rem)]", j),
+		className: r("media-library--component @container/media-library box-border flex min-h-0 flex-col overflow-hidden rounded-surface border border-border bg-background text-foreground", re ?? "h-190 max-h-[calc(100vh-7rem)]", j),
 		...ze,
 		children: [
 			et && /* @__PURE__ */ I("header", {
@@ -1519,7 +1551,7 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 						})]
 					})]
 				}), $e && /* @__PURE__ */ I("div", {
-					className: r("media-library--header-controls flex min-w-0 flex-wrap items-center gap-space-md", Ze ? "flex-1 justify-between" : "@2xl/media-library:justify-end"),
+					className: r("media-library--header-controls flex min-w-0 flex-wrap items-center gap-space-md", $ ? "flex-1 justify-between" : "@2xl/media-library:justify-end"),
 					children: [/* @__PURE__ */ I(l, {
 						direction: "horizontal",
 						wrap: !0,
@@ -1566,14 +1598,14 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 								]
 							})]
 						}), A?.headerEnd]
-					}), Ze]
+					}), $]
 				})]
 			}),
 			/* @__PURE__ */ I("div", {
 				className: "media-library--body flex min-h-0 flex-1",
 				children: [J === "upload" ? /* @__PURE__ */ F("div", {
 					className: "min-w-0 flex-1 overflow-y-auto",
-					children: /* @__PURE__ */ F(Q, {
+					children: /* @__PURE__ */ F(Ge, {
 						stagedFiles: K.stagedFiles,
 						uploadOptions: K.uploadOptions,
 						collections: q,
@@ -1585,11 +1617,11 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 						empty: A?.uploadEmpty
 					})
 				}) : /* @__PURE__ */ I("div", {
-					className: r("media-library--library min-w-0 flex-1 flex-col", $ ? "hidden @2xl/media-library:flex" : "flex"),
-					children: [/* @__PURE__ */ I(l, {
+					className: r("media-library--library min-w-0 flex-1 flex-col", Q ? "hidden @2xl/media-library:flex" : "flex"),
+					children: [/* @__PURE__ */ F(l, {
 						gap: "md",
 						className: "media-library--toolbar border-b border-border/60 p-surface",
-						children: [/* @__PURE__ */ F(He, {
+						children: /* @__PURE__ */ F(He, {
 							query: K.query,
 							type: K.type,
 							typeFilters: x,
@@ -1606,43 +1638,60 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 							onClearFilters: K.clearFilters,
 							toolbarEnd: A?.toolbarEnd,
 							selecting: K.selecting,
-							onSelectingChange: K.setSelecting
-						}), /* @__PURE__ */ F(a, {
-							size: "xs",
-							type: "secondary",
-							"aria-live": "polite",
-							children: lt
-						})]
+							onSelectingChange: K.setSelecting,
+							disabled: ct,
+							summary: /* @__PURE__ */ F("span", {
+								"aria-live": "polite",
+								className: "media-library--count min-w-0 truncate",
+								children: ct || K.loading ? null : /* @__PURE__ */ F(a, {
+									tag: "span",
+									size: "xs",
+									type: "secondary",
+									children: ut
+								})
+							})
+						})
 					}), /* @__PURE__ */ F("div", {
-						ref: dt,
+						ref: ft,
 						role: "region",
 						"aria-label": G.resultsLabel,
 						tabIndex: 0,
-						className: `media-library--results min-h-0 flex-1 overflow-y-auto p-surface focus-visible:outline-none ${s.inset}`,
-						children: K.loading ? A?.loading ?? /* @__PURE__ */ F(d, {
-							className: "min-h-64",
-							label: G.loading
-						}) : K.error ? A?.error ?? /* @__PURE__ */ F(f, {
-							title: G.errorTitle,
-							description: G.errorDescription
-						}) : K.visibleItems.length === 0 ? A?.empty ?? /* @__PURE__ */ F(Y, {
-							title: K.hasFilters ? G.emptyFilteredTitle : G.emptyLibraryTitle,
-							description: K.hasFilters ? G.emptyFilteredDescription : G.emptyLibraryDescription,
-							action: K.hasFilters ? /* @__PURE__ */ F(i, {
-								type: "button",
-								tone: "secondary",
-								buttonStyle: "outline",
-								onClick: K.clearFilters,
-								children: G.clearFilters
-							}) : b ? /* @__PURE__ */ F(i, {
-								tone: "primary",
-								type: "button",
-								onClick: () => K.setTab("upload"),
-								children: G.uploadMedia
-							}) : void 0
+						className: `media-library--results flex min-h-0 flex-1 flex-col overflow-y-auto p-surface focus-visible:outline-none ${s.inset}`,
+						children: K.loading ? /* @__PURE__ */ F("div", {
+							className: "media-library--state my-auto",
+							children: A?.loading ?? /* @__PURE__ */ F(d, {
+								className: "min-h-64",
+								label: G.loading
+							})
+						}) : ct ? /* @__PURE__ */ F("div", {
+							className: "media-library--state my-auto",
+							children: A?.error ?? /* @__PURE__ */ F(f, {
+								title: G.errorTitle,
+								description: G.errorDescription,
+								onRetry: N ? K.retry : void 0,
+								retryLabel: G.retry ?? Ce.retry
+							})
+						}) : K.visibleItems.length === 0 ? /* @__PURE__ */ F("div", {
+							className: "media-library--state my-auto",
+							children: A?.empty ?? /* @__PURE__ */ F(Y, {
+								title: K.hasFilters ? G.emptyFilteredTitle : G.emptyLibraryTitle,
+								description: K.hasFilters ? G.emptyFilteredDescription : G.emptyLibraryDescription,
+								action: K.hasFilters ? /* @__PURE__ */ F(i, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "outline",
+									onClick: K.clearFilters,
+									children: G.clearFilters
+								}) : b ? /* @__PURE__ */ F(i, {
+									tone: "primary",
+									type: "button",
+									onClick: () => K.setTab("upload"),
+									children: G.uploadMedia
+								}) : void 0
+							})
 						}) : K.view === "table" ? /* @__PURE__ */ F("div", {
 							className: "overflow-x-auto",
-							children: /* @__PURE__ */ F(Z, {
+							children: /* @__PURE__ */ F(Ue, {
 								items: K.visibleItems,
 								selectedSet: K.selectedSet,
 								selectionMode: g,
@@ -1688,35 +1737,35 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 							})
 						})
 					})]
-				}), J === "library" && /* @__PURE__ */ F(Ue, {
-					item: $,
+				}), J === "library" && /* @__PURE__ */ F(We, {
+					item: Q,
 					collections: q,
 					accessors: K.accessors,
 					strings: G,
 					onClose: () => K.setDetailId(null),
-					onUpdate: (e) => $ ? K.updateItem($, e) : Promise.resolve(!1),
-					onReplace: ue && $ ? () => ue($) : void 0,
+					onUpdate: (e) => Q ? K.updateItem(Q, e) : Promise.resolve(!1),
+					onReplace: ue && Q ? () => ue(Q) : void 0,
 					onRemove: async () => {
-						if (!$) return !1;
-						let e = await K.removeItem($);
+						if (!Q) return !1;
+						let e = await K.removeItem(Q);
 						return e && K.setDetailId(null), e;
 					},
 					renderDetail: A?.renderDetail
 				})]
 			}),
-			Ye ? Ye.element ? V(pt, Ye.element) : null : pt,
-			ut && /* @__PURE__ */ F(ee, {
-				selectedCount: ft,
+			Xe ? Xe.element ? V(mt, Xe.element) : null : mt,
+			dt && /* @__PURE__ */ F(ee, {
+				selectedCount: pt,
 				totalCount: K.totalCount,
 				onClear: K.clearSelection,
-				returnFocusRef: dt,
+				returnFocusRef: ft,
 				className: "media-library--bulk-actions",
 				strings: {
 					label: G.batchActionsLabel,
 					summary: (e) => H(G.footer.selectedCount, { count: e }),
 					clear: G.footer.clear
 				},
-				children: ft > 0 && te?.({
+				children: pt > 0 && te?.({
 					selectedItems: K.selectedItems,
 					selectedIds: K.selectedIds,
 					selectedCount: K.selectedIds.length,
@@ -1728,13 +1777,13 @@ function $({ title: o, titleSuffix: c, description: p, confirmLabel: m, cancelLa
 		]
 	});
 }
-function Ye({ open: e, onOpenChange: t, trigger: i, dialogTitle: a, dialogDescription: o, onClose: s, className: c, dialogClassName: l, contentClassName: u, closeOnEscape: d = !0, closeOnBackdropClick: f = !0, ...p }) {
+function Xe({ open: e, onOpenChange: t, trigger: i, dialogTitle: a, dialogDescription: o, onClose: s, className: c, dialogClassName: l, contentClassName: u, closeOnEscape: d = !0, closeOnBackdropClick: f = !0, ...p }) {
 	let m = n(Ce, p.strings), [h, _] = P(!1), [v, y] = P(null), b = e !== void 0, x = b ? e : h, S = (e) => {
 		b || _(e), t?.(e);
 	}, C = () => {
 		S(!1), s?.();
 	};
-	return /* @__PURE__ */ F(qe.Provider, {
+	return /* @__PURE__ */ F(Je.Provider, {
 		value: { element: v },
 		children: /* @__PURE__ */ F(g, {
 			open: x,
@@ -1754,7 +1803,7 @@ function Ye({ open: e, onOpenChange: t, trigger: i, dialogTitle: a, dialogDescri
 			contentClassName: r("media-library-dialog--body flex min-h-0 flex-col overflow-hidden p-0", u),
 			closeOnBackdropClick: f,
 			closeOnEscape: d,
-			children: /* @__PURE__ */ F($, {
+			children: /* @__PURE__ */ F(Q, {
 				...p,
 				defaultSelecting: p.defaultSelecting ?? !0,
 				onClose: C,
@@ -1767,12 +1816,12 @@ function Ye({ open: e, onOpenChange: t, trigger: i, dialogTitle: a, dialogDescri
 }
 //#endregion
 //#region src/components/features/media-library/media-resource-gallery.tsx
-function Xe(e, t, n) {
+function Ze(e, t, n) {
 	let r = e.slice(), [i] = r.splice(t, 1);
 	return i === void 0 || r.splice(n, 0, i), r;
 }
-function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, onPrimaryChange: u, onRemove: d, onReorder: f, onAdd: p, maxItems: h, layout: g = "field", density: v = "comfortable", readOnly: b = !1, empty: x, action: S, renderItem: ee, strings: w, className: T, ...E }) {
-	let D = n(Ce, w), O = De(t), k = e.length, ne = c ?? (k > 0 ? O.getId(e[0]) : void 0), A = !b && !!p && (h === void 0 || k < h), re = A && (g === "field" || k > 0) ? /* @__PURE__ */ F(i, {
+function $({ items: e, accessors: t, title: o, description: s, primaryId: c, onPrimaryChange: u, onRemove: d, onReorder: f, onAdd: p, maxItems: h, layout: g = "field", density: v = "comfortable", readOnly: b = !1, empty: x, action: S, renderItem: ee, strings: w, className: T, ...E }) {
+	let D = n(Ce, w), O = De(t), k = e.length, ne = c ?? (k > 0 ? O.getId(e[0]) : void 0), A = !b && !!p && (h === void 0 || k < h), re = !b && !!u, j = !b && !!d, M = !b && !!f, ie = re || j || M, ae = A && (g === "field" || k > 0) ? /* @__PURE__ */ F(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
@@ -1782,11 +1831,11 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 	}) : h !== void 0 && k >= h ? /* @__PURE__ */ F(C, {
 		tone: "secondary",
 		children: D.gallery.maxReached
-	}) : null, j = (t, n) => {
-		if (n < 0 || n >= k || t === n) return;
-		let r = Xe(e, t, n);
+	}) : null, N = (t, n) => {
+		if (!M || n < 0 || n >= k || t === n) return;
+		let r = Ze(e, t, n);
 		f?.(r.map((e) => O.getId(e)), r);
-	}, M = !!(o || s || S || re), ie = k === 0 && g !== "field", ae = () => !A || g !== "field" ? null : /* @__PURE__ */ I("button", {
+	}, oe = !!(o || s || S || ae), P = k === 0 && g !== "field", R = () => !A || g !== "field" ? null : /* @__PURE__ */ I("button", {
 		type: "button",
 		className: r("media-resource-gallery--add-tile box-border m-0 inline-flex w-full cursor-pointer items-center justify-center p-space-md font-sans rounded-radius border border-dashed border-border bg-background text-muted-foreground shadow-none", `aspect-square ${te.hover}`),
 		"aria-label": D.gallery.addTile,
@@ -1799,11 +1848,11 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 		})]
 	});
 	return /* @__PURE__ */ I("section", {
-		className: r("media-resource-gallery--component @container/media-resource-gallery rounded-radius border border-border bg-card text-card-foreground shadow-xs", T),
+		className: r("media-resource-gallery--component @container/media-resource-gallery rounded-surface border border-border bg-card text-card-foreground shadow-xs", T),
 		"data-layout": g,
 		"data-gallery-density": v,
 		...E,
-		children: [M && /* @__PURE__ */ F("header", {
+		children: [oe && /* @__PURE__ */ F("header", {
 			className: "media-resource-gallery--header p-surface",
 			children: /* @__PURE__ */ I(l, {
 				direction: {
@@ -1831,10 +1880,10 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 					align: "center",
 					gap: m.commands,
 					className: "media-resource-gallery--actions",
-					children: S ?? re
+					children: S ?? ae
 				})]
 			})
-		}), ie ? /* @__PURE__ */ F("div", {
+		}), P ? /* @__PURE__ */ F("div", {
 			className: "media-resource-gallery--empty px-surface pb-surface",
 			children: x ?? /* @__PURE__ */ F(Y, {
 				title: D.gallery.emptyTitle,
@@ -1848,22 +1897,26 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 				}) : void 0
 			})
 		}) : /* @__PURE__ */ I("div", {
-			className: r("grid min-w-0 grid-cols-1", g === "list" ? "gap-space-md" : "gap-space-lg", "media-resource-gallery--items p-surface", M && "pt-0", g === "list" ? void 0 : g === "field" ? "grid-cols-[repeat(auto-fill,minmax(96px,1fr))] @md/media-resource-gallery:grid-cols-[repeat(auto-fill,minmax(108px,1fr))]" : v === "compact" ? "grid-cols-[repeat(auto-fill,minmax(132px,1fr))]" : "grid-cols-[repeat(auto-fill,minmax(164px,1fr))]"),
+			className: r("grid min-w-0 grid-cols-1", g === "list" ? "gap-space-md" : "gap-space-lg", "media-resource-gallery--items p-surface", oe && "pt-0", g === "list" ? void 0 : g === "field" ? "grid-cols-[repeat(auto-fill,minmax(96px,1fr))] @md/media-resource-gallery:grid-cols-[repeat(auto-fill,minmax(108px,1fr))]" : v === "compact" ? "grid-cols-[repeat(auto-fill,minmax(132px,1fr))]" : "grid-cols-[repeat(auto-fill,minmax(164px,1fr))]"),
 			children: [e.map((e, t) => {
-				let n = O.getId(e), o = O.getName(e), s = O.getType(e), c = O.getSrc(e), f = O.getAlt(e) || o, p = n === ne, m = O.getPublic(e) === !1, h = O.getDuration(e), x = t > 0, S = t < k - 1, w = ee?.(e, {
+				let n = O.getId(e), o = O.getName(e), s = O.getType(e), c = O.getSrc(e), f = O.getAlt(e) || o, p = n === ne, m = O.getPublic(e) === !1, h = O.getDuration(e), b = M && t > 0, x = M && t < k - 1, S = ee?.(e, {
 					id: n,
 					index: t,
 					total: k,
 					primary: p,
 					accessors: O,
-					canMovePrevious: x,
-					canMoveNext: S,
-					setPrimary: () => u?.(n, e),
-					remove: () => d?.(n, e),
-					movePrevious: () => j(t, t - 1),
-					moveNext: () => j(t, t + 1)
+					canMovePrevious: b,
+					canMoveNext: x,
+					setPrimary: () => {
+						re && u?.(n, e);
+					},
+					remove: () => {
+						j && d?.(n, e);
+					},
+					movePrevious: () => N(t, t - 1),
+					moveNext: () => N(t, t + 1)
 				});
-				return w ? /* @__PURE__ */ F("div", { children: w }, n) : g === "field" ? /* @__PURE__ */ I("div", {
+				return S ? /* @__PURE__ */ F("div", { children: S }, n) : g === "field" ? /* @__PURE__ */ I("div", {
 					className: r("media-resource-gallery--item group/gallery relative aspect-square overflow-hidden rounded-radius border border-border bg-background text-foreground shadow-xs", `transition-colors ${_.tileHover}`, p && "col-span-2 row-span-2 min-h-52"),
 					"data-primary": p || void 0,
 					children: [
@@ -1890,7 +1943,7 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 							className: "absolute bottom-2 right-2 inline-flex size-6 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-xs",
 							children: /* @__PURE__ */ F(me, { className: "size-icon-sm" })
 						}),
-						!b && /* @__PURE__ */ F(i, {
+						j && /* @__PURE__ */ F(i, {
 							type: "button",
 							tone: "secondary",
 							buttonStyle: "solid",
@@ -1911,7 +1964,7 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 					"data-primary": p || void 0,
 					children: [
 						/* @__PURE__ */ F("div", {
-							className: "relative size-12 shrink-0 overflow-hidden rounded-inner bg-muted",
+							className: "relative size-12 shrink-0 overflow-hidden rounded-radius bg-muted",
 							children: c ? /* @__PURE__ */ F("img", {
 								src: c,
 								alt: f,
@@ -1942,25 +1995,21 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 							}), /* @__PURE__ */ I(a, {
 								size: "xs",
 								type: "secondary",
-								children: [
-									H(D.gallery.itemPosition, {
-										index: t + 1,
-										total: k
-									}),
-									" · ",
-									/* @__PURE__ */ F(y, {
-										value: O.getSize(e),
-										size: "xs",
-										align: "left",
-										emptyLabel: D.unknownSize
-									})
-								]
+								children: [H(D.gallery.itemPosition, {
+									index: t + 1,
+									total: k
+								}), O.getSize(e) !== void 0 && /* @__PURE__ */ I(se, { children: [" · ", /* @__PURE__ */ F(y, {
+									value: O.getSize(e),
+									size: "xs",
+									align: "left",
+									emptyLabel: D.unknownSize
+								})] })]
 							})]
 						}),
-						!b && /* @__PURE__ */ I("div", {
+						ie && /* @__PURE__ */ I("div", {
 							className: "media-resource-gallery--item-actions flex basis-full flex-wrap items-center justify-end gap-space-xs @sm/media-resource-gallery:basis-auto",
 							children: [
-								/* @__PURE__ */ F(i, {
+								re && /* @__PURE__ */ F(i, {
 									type: "button",
 									tone: "secondary",
 									buttonStyle: "ghost",
@@ -1971,29 +2020,29 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 									onClick: () => u?.(n, e),
 									children: /* @__PURE__ */ F(ve, { className: "size-icon-md" })
 								}),
-								/* @__PURE__ */ F(i, {
+								M && /* @__PURE__ */ F(i, {
 									type: "button",
 									tone: "secondary",
 									buttonStyle: "ghost",
 									size: "sm",
 									iconOnly: !0,
-									disabled: !x,
+									disabled: !b,
 									"aria-label": D.gallery.movePrevious,
-									onClick: () => j(t, t - 1),
+									onClick: () => N(t, t - 1),
 									children: /* @__PURE__ */ F(L, { className: "size-icon-md" })
 								}),
-								/* @__PURE__ */ F(i, {
+								M && /* @__PURE__ */ F(i, {
 									type: "button",
 									tone: "secondary",
 									buttonStyle: "ghost",
 									size: "sm",
 									iconOnly: !0,
-									disabled: !S,
+									disabled: !x,
 									"aria-label": D.gallery.moveNext,
-									onClick: () => j(t, t + 1),
+									onClick: () => N(t, t + 1),
 									children: /* @__PURE__ */ F(ce, { className: "size-icon-md" })
 								}),
-								/* @__PURE__ */ F(i, {
+								j && /* @__PURE__ */ F(i, {
 									type: "button",
 									tone: "destructive",
 									buttonStyle: "ghost",
@@ -2015,7 +2064,7 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 							src: c,
 							alt: f,
 							loading: "lazy",
-							className: "size-full object-cover"
+							className: "size-full object-contain"
 						}) : /* @__PURE__ */ F("div", {
 							className: "flex size-full items-center justify-center text-muted-foreground",
 							children: /* @__PURE__ */ F(z, { className: "size-6" })
@@ -2045,16 +2094,16 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 									weight: "semibold",
 									className: "truncate",
 									children: o
-								}), /* @__PURE__ */ F(y, {
+								}), O.getSize(e) !== void 0 && /* @__PURE__ */ F(y, {
 									value: O.getSize(e),
 									size: "xs",
 									align: "left",
 									emptyLabel: D.unknownSize
 								})]
-							}), !b && /* @__PURE__ */ I("div", {
+							}), ie && /* @__PURE__ */ I("div", {
 								className: "flex items-center gap-space-xs",
 								children: [
-									/* @__PURE__ */ F(i, {
+									re && /* @__PURE__ */ F(i, {
 										type: "button",
 										tone: "secondary",
 										buttonStyle: "ghost",
@@ -2065,29 +2114,29 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 										onClick: () => u?.(n, e),
 										children: /* @__PURE__ */ F(ve, { className: "size-icon-md" })
 									}),
-									/* @__PURE__ */ F(i, {
+									M && /* @__PURE__ */ F(i, {
 										type: "button",
 										tone: "secondary",
 										buttonStyle: "ghost",
 										size: "sm",
 										iconOnly: !0,
-										disabled: !x,
+										disabled: !b,
 										"aria-label": D.gallery.movePrevious,
-										onClick: () => j(t, t - 1),
+										onClick: () => N(t, t - 1),
 										children: /* @__PURE__ */ F(L, { className: "size-icon-md" })
 									}),
-									/* @__PURE__ */ F(i, {
+									M && /* @__PURE__ */ F(i, {
 										type: "button",
 										tone: "secondary",
 										buttonStyle: "ghost",
 										size: "sm",
 										iconOnly: !0,
-										disabled: !S,
+										disabled: !x,
 										"aria-label": D.gallery.moveNext,
-										onClick: () => j(t, t + 1),
+										onClick: () => N(t, t + 1),
 										children: /* @__PURE__ */ F(ce, { className: "size-icon-md" })
 									}),
-									/* @__PURE__ */ F(i, {
+									j && /* @__PURE__ */ F(i, {
 										type: "button",
 										tone: "destructive",
 										buttonStyle: "ghost",
@@ -2103,11 +2152,11 @@ function Ze({ items: e, accessors: t, title: o, description: s, primaryId: c, on
 						})
 					})]
 				}, n);
-			}), ae()]
+			}), R()]
 		})]
 	});
 }
 //#endregion
-export { $ as MediaLibrary, X as MediaLibraryCard, Ue as MediaLibraryDetailPanel, Ye as MediaLibraryDialog, Y as MediaLibraryEmptyState, Ke as MediaLibraryFooter, Z as MediaLibraryList, He as MediaLibraryToolbar, Q as MediaLibraryUploadPanel, Ze as MediaResourceGallery, Ce as defaultMediaLibraryStrings, Oe as formatMediaLibrarySize, H as formatMediaLibraryString, ke as getMediaLibraryDimensions, De as resolveMediaLibraryAccessors, Re as useMediaLibrary };
+export { Q as MediaLibrary, X as MediaLibraryCard, We as MediaLibraryDetailPanel, Xe as MediaLibraryDialog, Y as MediaLibraryEmptyState, Z as MediaLibraryFooter, Ue as MediaLibraryList, He as MediaLibraryToolbar, Ge as MediaLibraryUploadPanel, $ as MediaResourceGallery, Ce as defaultMediaLibraryStrings, Oe as formatMediaLibrarySize, H as formatMediaLibraryString, ke as getMediaLibraryDimensions, De as resolveMediaLibraryAccessors, Re as useMediaLibrary };
 
 //# sourceMappingURL=media-library.js.map