@phtngyn/cms 0.2.0-beta.7 → 0.3.0

package/studio/chunks/MediaPage-D-jaWtdl.js

@@ -0,0 +1,923 @@
+import { bt as e, dt as t, ft as n, gt as r, m as i, pt as a, t as o } from "./Button-BT3ztSPx.js";
+import { st as s } from "./Search-BEgCe9Aj.js";
+import { a as c, d as l, k as u, n as d, r as f } from "./studioContext-I8HozGU1.js";
+import { _ as p, g as ee } from "./useApi-CUWMwLLw-B3Q3g2nf.js";
+import { $r as te, A as m, B as ne, Ci as h, Cr as g, E as _, K as v, M as y, N as b, Nn as re, Or as x, Pn as ie, R as ae, V as S, Yr as oe, fa as C, gn as w, hr as se, k as T, o as E, ra as D, ui as O, vi as k } from "./runtime-core.esm-bundler-DKFA9Rep.js";
+import { t as ce } from "./Select-B50WZMW-.js";
+import { n as le } from "./overlay-DnqFLZTc.js";
+import { t as ue } from "./DropdownMenu-CA9fB0uZ.js";
+import { t as de } from "./Pagination-D9BSo5H2.js";
+import { t as fe } from "./notifications-OKOLc40v.js";
+import { n as pe, t as me } from "./MediaUploadPanel-C7Kyg6aR.js";
+import { t as he } from "./Alert-D0D24z_a.js";
+import { n as ge, t as _e } from "./mediaRoute--8cY8rUe.js";
+import { c as ve, i as ye, n as be, o as xe, r as Se, s as Ce } from "./presentation-DF83w0hE.js";
+import { t as we } from "./Modal-D6hSvxHd.js";
+import { t as Te } from "./usePointerMotion-DwRcwBNQ.js";
+import { t as Ee } from "./MediaFolderDialog-DYu-eu-q.js";
+import { t as De } from "./Slideover-QMMHAAys.js";
+import { t as Oe } from "./StudioPage-ngEIDr5d.js";
+import { n as ke, r as Ae, t as je } from "./StudioPageToolbar-BwHnqyr6.js";
+import { t as Me } from "./Skeleton-COz8dcrw.js";
+//#region src/media/videoThumbnail.ts
+var A = "cms-video-thumbnails-v1", Ne = 96, j = 524288, M = Promise.resolve();
+async function Pe(e, t) {
+	let n = new URL(`/_cms/video-thumbnail/${e.id}`, location.origin);
+	n.searchParams.set("source", e.sha256);
+	let r = await globalThis.caches?.open(A).catch(() => void 0), i = await N(r, n.href);
+	if (t.throwIfAborted(), i) return i;
+	let a = M.then(async () => {
+		t.throwIfAborted();
+		let i = await N(r, n.href);
+		if (t.throwIfAborted(), i) return i;
+		let a = await F(e.url, t);
+		return t.throwIfAborted(), await P(r, n.href, a), a;
+	});
+	return M = a.then(() => void 0).catch(() => void 0), a;
+}
+async function N(e, t) {
+	try {
+		let n = await (await e?.match(t))?.blob();
+		return n?.type === "image/jpeg" && n.size > 0 && n.size <= j ? n : void 0;
+	} catch {
+		return;
+	}
+}
+async function P(e, t, n) {
+	if (e) try {
+		await e.put(t, new Response(n));
+		let r = await e.keys(), i = r.slice(0, Math.max(0, r.length - Ne));
+		for (let t of i) await e.delete(t);
+	} catch {}
+}
+function F(e, t) {
+	return new Promise((n, r) => {
+		let i = document.createElement("video");
+		i.preload = "auto", i.muted = !0, i.playsInline = !0, i.crossOrigin = "anonymous";
+		let a = 0, o = !1, s = !1, c = !1, l = (e) => {
+			c || (c = !0, clearTimeout(d), t.removeEventListener("abort", u), i.removeEventListener("loadedmetadata", f), i.removeEventListener("loadeddata", p), i.removeEventListener("seeked", p), i.removeEventListener("error", u), i.removeAttribute("src"), i.load(), e && e.size > 0 && e.size <= j ? n(e) : r(/* @__PURE__ */ Error("Video preview unavailable.")));
+		}, u = () => l(), d = setTimeout(u, 1e4);
+		function f() {
+			o = !0, a = +(i.duration > 1), i.currentTime = a, p();
+		}
+		function p() {
+			if (!o || s || i.seeking || i.readyState < 2 || i.currentTime !== a) return;
+			if (!i.videoWidth || !i.videoHeight) return l();
+			s = !0;
+			let e = document.createElement("canvas"), t = Math.min(1, 480 / Math.max(i.videoWidth, i.videoHeight));
+			e.width = Math.max(1, Math.round(i.videoWidth * t)), e.height = Math.max(1, Math.round(i.videoHeight * t));
+			try {
+				let t = e.getContext("2d");
+				if (!t) return l();
+				t.drawImage(i, 0, 0, e.width, e.height), e.toBlob((e) => l(e ?? void 0), "image/jpeg", .75);
+			} catch {
+				l();
+			}
+		}
+		if (t.addEventListener("abort", u, { once: !0 }), i.addEventListener("loadedmetadata", f), i.addEventListener("loadeddata", p), i.addEventListener("seeked", p), i.addEventListener("error", u), t.aborted) return l();
+		i.src = e, i.load();
+	});
+}
+//#endregion
+//#region src/media/useVideoThumbnail.ts
+function Fe(t, n) {
+	let r = O(), i = O(!1), a = e(r);
+	return g([
+		() => k(t).id,
+		() => k(t).sha256,
+		() => k(t).url,
+		() => k(n)
+	], async (e, a, o) => {
+		if (r.value = void 0, i.value = !1, !k(n)) return;
+		let s = new AbortController();
+		o(() => s.abort());
+		try {
+			let e = await Pe(k(t), s.signal);
+			s.signal.aborted || (r.value = e);
+		} catch {
+			s.signal.aborted || (i.value = !0);
+		}
+	}, { immediate: !0 }), {
+		url: a,
+		failed: i
+	};
+}
+//#endregion
+//#region src/media/MediaVideoThumbnail.vue?vue&type=script&setup=true&lang.ts
+var I = ["src", "alt"], L = {
+	key: 1,
+	class: "flex flex-col items-center justify-center gap-2 text-center"
+}, R = {
+	key: 0,
+	class: "block text-sm"
+}, Ie = /* @__PURE__ */ v({
+	__name: "MediaVideoThumbnail",
+	props: {
+		asset: {},
+		contain: {
+			type: Boolean,
+			default: !1
+		},
+		small: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let { t } = s(), n = e, a = O(), o = O(!1);
+		r(a, ([e]) => {
+			e?.isIntersecting && (o.value = !0);
+		});
+		let { url: c, failed: l } = Fe(() => n.asset, o);
+		return (n, r) => {
+			let o = i;
+			return w(), b("span", {
+				ref_key: "element",
+				ref: a,
+				class: "grid size-full place-items-center text-muted"
+			}, [h(c) && !h(l) ? (w(), b("img", {
+				key: 0,
+				src: h(c),
+				alt: e.contain ? e.asset.name : "",
+				class: D(["size-full", e.contain ? "object-contain" : "object-cover"]),
+				onError: r[0] ||= (e) => l.value = !0
+			}, null, 42, I)) : (w(), b("span", L, [S(o, {
+				name: "i-lucide-video",
+				class: D(e.small ? "size-5" : "size-8")
+			}, null, 8, ["class"]), e.contain && h(l) ? (w(), b("span", R, C(h(t)("media-asset-details.preview-unavailable")), 1)) : y("", !0)]))], 512);
+		};
+	}
+}), z = ["src", "alt"], Le = ["aria-label"], Re = ["src", "title"], B = {
+	key: 3,
+	class: "flex flex-col items-center justify-center gap-2 px-5 text-center text-sm text-muted"
+}, ze = { class: "mt-5 wrap-anywhere text-base font-semibold text-highlighted" }, Be = { class: "mt-1 text-xs text-muted" }, Ve = { class: "mt-6 grid grid-cols-2 gap-y-3 text-sm" }, V = { class: "text-muted" }, H = { class: "wrap-anywhere" }, He = { class: "text-muted" }, U = { class: "text-muted" }, Ue = /* @__PURE__ */ v({
+	__name: "MediaAssetDetails",
+	props: { asset: {} },
+	setup(e) {
+		let { t, date: n, number: r, locale: a } = s(), o = e, c = O(""), l = O(!1), u = navigator.pdfViewerEnabled !== !1, d = _(() => `${o.asset.url}?v=${encodeURIComponent(o.asset.updatedAt)}`);
+		g([() => o.asset.id, () => o.asset.updatedAt], () => {
+			c.value = "", l.value = !1;
+		});
+		function f(e) {
+			let t = e.target;
+			t instanceof HTMLImageElement && (c.value = `${r(t.naturalWidth, { useGrouping: !1 })} × ${r(t.naturalHeight, { useGrouping: !1 })}`);
+		}
+		return (r, o) => {
+			let s = i;
+			return w(), b("div", null, [
+				T("div", { class: D(["flex aspect-4/3 items-center justify-center overflow-hidden rounded-lg border border-default", e.asset.mimeType.startsWith("image/") && !l.value ? "bg-white" : "bg-muted/30"]) }, [e.asset.mimeType.startsWith("image/") && !l.value ? (w(), b("img", {
+					key: d.value,
+					src: d.value,
+					alt: e.asset.name,
+					class: "max-h-full max-w-full object-contain",
+					onLoad: f,
+					onError: o[0] ||= (e) => l.value = !0
+				}, null, 40, z)) : e.asset.mimeType.startsWith("video/") && !l.value ? (w(), m(Ie, {
+					key: 1,
+					asset: e.asset,
+					contain: ""
+				}, null, 8, ["asset"])) : e.asset.mimeType === "application/pdf" && u && !l.value ? (w(), b("div", {
+					key: 2,
+					class: "size-full bg-white",
+					role: "img",
+					"aria-label": h(t)("media.pdf-preview", { name: e.asset.name })
+				}, [(w(), b("iframe", {
+					key: d.value,
+					src: `${d.value}#page=1&view=Fit&toolbar=0&navpanes=0`,
+					title: h(t)("media.pdf-preview", { name: e.asset.name }),
+					class: "pointer-events-none size-full border-0",
+					tabindex: "-1",
+					"aria-hidden": "true",
+					inert: "",
+					onError: o[1] ||= (e) => l.value = !0
+				}, null, 40, Re))], 8, Le)) : (w(), b("div", B, [S(s, {
+					name: l.value ? "i-lucide-image-off" : "i-lucide-file-text",
+					class: "size-8 shrink-0"
+				}, null, 8, ["name"]), T("p", null, C(l.value ? h(t)("media-asset-details.preview-unavailable") : h(t)("media-asset-details.pdf-document")), 1)]))], 2),
+				T("h2", ze, C(e.asset.name), 1),
+				T("p", Be, C(e.asset.mimeType.startsWith("video/") ? h(t)("media-asset-details.video") : e.asset.mimeType === "application/pdf" ? h(t)("media-asset-details.pdf-document") : c.value || h(t)("media-asset-details.image")) + " · " + C(h(Se)(e.asset.byteSize, h(a), h(t))), 1),
+				ie(r.$slots, "default"),
+				T("dl", Ve, [
+					T("dt", V, C(h(t)("media-asset-details.folder")), 1),
+					T("dd", H, C(e.asset.folder || h(t)("media-asset-details.no-folder")), 1),
+					T("dt", He, C(h(t)("media-asset-details.format")), 1),
+					T("dd", null, C(e.asset.mimeType.split("/")[1]?.toUpperCase()), 1),
+					T("dt", U, C(h(t)("media-asset-details.uploaded")), 1),
+					T("dd", null, C(h(n)(e.asset.createdAt)), 1)
+				])
+			]);
+		};
+	}
+}), We = { class: "mt-5 flex flex-wrap gap-2" }, Ge = /* @__PURE__ */ v({
+	__name: "MediaAssetActions",
+	props: {
+		asset: {},
+		readonly: { type: Boolean }
+	},
+	emits: ["copy", "remove"],
+	setup(e, { emit: t }) {
+		let { t: n } = s(), r = t;
+		return (t, i) => {
+			let a = o, s = ue;
+			return w(), b("div", We, [
+				S(a, {
+					color: "neutral",
+					size: "sm",
+					label: h(n)("media-asset-actions.copy-link"),
+					onClick: i[0] ||= (e) => r("copy")
+				}, null, 8, ["label"]),
+				S(a, {
+					color: "neutral",
+					size: "sm",
+					variant: "outline",
+					label: h(n)("media-asset-actions.open"),
+					"trailing-icon": "i-lucide-arrow-up-right",
+					to: e.asset.url,
+					target: "_blank"
+				}, null, 8, ["label", "to"]),
+				e.readonly ? y("", !0) : (w(), m(s, {
+					key: 0,
+					items: [{
+						label: h(n)("media-asset-actions.delete-file"),
+						icon: "i-lucide-trash-2",
+						color: "error",
+						onSelect: () => r("remove")
+					}]
+				}, {
+					default: x(() => [S(a, {
+						color: "neutral",
+						size: "sm",
+						variant: "ghost",
+						icon: "i-lucide-ellipsis",
+						"aria-label": h(n)("media-asset-actions.more-media-actions")
+					}, null, 8, ["aria-label"])]),
+					_: 1
+				}, 8, ["items"]))
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/media/useMediaDropZone.ts
+function Ke(e, n) {
+	a(e, [
+		"dragenter",
+		"dragover",
+		"dragleave",
+		"drop"
+	], (e) => {
+		Array.from(e.dataTransfer?.types ?? []).includes("Files") || e.stopImmediatePropagation();
+	});
+	let { isOverDropZone: r } = t(e, { onDrop(e) {
+		!k(n.disabled) && e?.length && n.onDrop(e);
+	} });
+	return a(e, [
+		"dragenter",
+		"dragover",
+		"dragleave",
+		"drop"
+	], (e) => {
+		k(n.disabled) && e.dataTransfer && (e.dataTransfer.dropEffect = "none");
+	}), _(() => !k(n.disabled) && r.value);
+}
+//#endregion
+//#region src/media/MediaView.vue?vue&type=script&setup=true&lang.ts
+var qe = ["aria-hidden"], Je = { class: "text-center" }, Ye = { class: "mt-3 font-medium" }, Xe = { class: "mt-2 text-sm text-muted" }, Ze = ["aria-label"], Qe = ["aria-label"], $e = ["aria-busy"], et = { class: "min-w-0 truncate text-sm text-muted" }, tt = { class: "ml-auto flex flex-wrap items-center gap-1" }, nt = ["aria-label"], rt = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], it = { class: "flex size-12 shrink-0 items-center justify-center overflow-hidden rounded bg-muted/50" }, at = ["src", "onError"], ot = { class: "min-w-0 space-y-1" }, st = { class: "block line-clamp-2 [overflow-wrap:anywhere] font-medium text-highlighted" }, ct = { class: "block text-xs text-muted" }, lt = { class: "text-sm text-muted [overflow-wrap:anywhere]" }, ut = { class: "text-sm whitespace-nowrap tabular-nums text-muted" }, dt = { class: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6" }, ft = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], pt = ["src", "onError"], mt = {
+	key: 2,
+	class: "grid size-full place-items-center text-muted"
+}, ht = {
+	key: 3,
+	class: "absolute right-2 top-2 grid size-6 place-items-center rounded-full bg-inverted text-inverted"
+}, gt = {
+	key: 4,
+	class: "absolute bottom-2 left-2 rounded bg-default/90 px-2 py-1 text-xs text-highlighted"
+}, _t = { class: "mt-3 block min-w-0" }, vt = ["title"], yt = { class: "mt-1 block truncate text-xs text-muted" }, bt = {
+	key: 2,
+	class: "mt-6 flex flex-wrap items-center justify-between gap-3"
+}, xt = { class: "text-xs tabular-nums text-muted" }, St = ["aria-label"], Ct = { class: "sticky top-5" }, wt = {
+	key: 1,
+	class: "grid min-h-64 place-items-center text-center text-sm text-muted"
+}, Tt = { class: "space-y-4" }, Et = {
+	key: 1,
+	class: "flex min-w-0 items-center gap-3 rounded-md border border-default p-3"
+}, Dt = ["src"], Ot = {
+	key: 1,
+	class: "grid size-12 shrink-0 place-items-center rounded bg-muted"
+}, kt = { class: "truncate text-sm font-medium" }, At = { class: "text-sm text-muted" }, jt = { class: "flex w-full justify-end gap-2" }, W = 48, Mt = /* @__PURE__ */ v({
+	__name: "MediaView",
+	setup(e) {
+		let { t, locale: r } = s(), a = c(), v = f(), ie = l(), k = d(), { pointer: A } = Te(), Ne = _(() => k.user.role === "viewer"), j = O(1), { assets: M, folders: Pe, selected: N, search: P, folder: F, kind: Fe, total: I, sort: L, loading: R, error: z, load: Le, settled: Re, selectAsset: B } = pe({
+			selectFirst: !1,
+			limit: W,
+			page: j
+		}), ze = ee(), Be = p(), Ve = O(!1), V = fe(), H = O(/* @__PURE__ */ new Set());
+		function He(e) {
+			H.value = /* @__PURE__ */ new Set([...H.value, e]);
+		}
+		let U = _(() => ge(ze.query)), We = _(() => U.value.folder === void 0 ? ye(t).find((e) => e.value === U.value.kind)?.label ?? v.navigation.media : U.value.folder || t("media-asset-details.no-folder"));
+		function Mt() {
+			F.value = U.value.folder, Fe.value = U.value.kind ?? "", P.value = U.value.search, B(null);
+		}
+		g(() => ze.fullPath, Mt, { immediate: !0 }), g([
+			I,
+			R,
+			z
+		], ([e, t, n]) => {
+			!t && !n && (j.value = Math.min(j.value, Math.max(1, Math.ceil(e / W))));
+		});
+		let Nt = !0;
+		te(() => {
+			Nt = !1;
+		}), g([
+			P,
+			F,
+			Fe,
+			L
+		], () => {
+			j.value = 1, Z.value = !1;
+		}, { flush: "sync" }), g(j, () => {
+			B(null), Z.value = !1;
+		});
+		function Pt(e) {
+			j.value = Math.max(1, Math.min(e, Math.ceil(I.value / W)));
+		}
+		function Ft(e) {
+			Be.push(_e(e));
+		}
+		function It() {
+			P.value = "", F.value = U.value.folder;
+		}
+		let G = _(() => !!P.value || F.value !== U.value.folder), Lt = _({
+			get: () => F.value === void 0 ? be : F.value || "/__unfiled__",
+			set: (e) => {
+				F.value = e === "/__all__" ? void 0 : e === "/__unfiled__" ? "" : e;
+			}
+		}), Rt = se("searchField");
+		function zt() {
+			P.value = "", Rt.value?.inputRef?.focus();
+		}
+		let Bt = se("assetInventory"), { width: Vt } = n(Bt), Ht = _(() => [
+			{
+				accessorKey: "name",
+				header: t("media.file")
+			},
+			{
+				accessorKey: "folder",
+				header: t("media-asset-details.folder")
+			},
+			{
+				accessorKey: "byteSize",
+				header: t("media-view.size")
+			}
+		]), Ut = _(() => N.value ? { [N.value.id]: !0 } : {}), K = O(!1), q = O(!1), J = O(""), Y = O("grid"), Wt = O(), { width: Gt } = n(Wt), X = _(() => Gt.value >= 960), Z = O(!1), Kt = null, qt = O(null), Jt = O(null), Q = _(() => !Ne.value), Yt = Ke(Jt, {
+			disabled: () => !Q.value,
+			onDrop: (e) => $(e)
+		}), Xt = _(() => [
+			{
+				label: t("media-view.all-media"),
+				value: be
+			},
+			{
+				label: t("media-asset-details.no-folder"),
+				value: ve
+			},
+			...Pe.value.map((e) => ({
+				label: e,
+				value: e
+			}))
+		]), Zt = _(() => [
+			{
+				label: t("media-view.newest"),
+				value: "newest"
+			},
+			{
+				label: t("media-view.name"),
+				value: "name"
+			},
+			{
+				label: t("media-view.file-size"),
+				value: "size"
+			}
+		]), Qt = _(() => [...M.value]), $t = _(() => !!P.value || F.value !== void 0 || !!Fe.value || R.value || M.value.length > 0);
+		async function en() {
+			j.value = 1;
+			try {
+				await Le();
+			} catch {}
+		}
+		g(N, () => {
+			N.value || (Z.value = !1);
+		});
+		function $(e) {
+			Q.value && qt.value?.open({
+				files: e,
+				folder: F.value
+			});
+		}
+		async function tn(e) {
+			P.value = "", L.value = "newest", j.value = 1;
+			let n = e.at(-1);
+			await Be.push({
+				name: "media",
+				query: n ? { folder: n.folder } : {}
+			}), Mt(), await Re();
+			let r = M.value.find((e) => e.id === n?.id) ?? n;
+			r && B(r), V.add({ title: t("media.uploaded", { count: e.length }) });
+		}
+		g(X, () => {
+			Z.value = !1;
+		});
+		function nn(e, t) {
+			Kt = t?.currentTarget instanceof HTMLElement ? t.currentTarget : null, B(e), X.value || (Z.value = !0);
+		}
+		function rn(e) {
+			Kt?.isConnected && (e.preventDefault(), Kt.focus());
+		}
+		async function an() {
+			if (!N.value) return;
+			let e = N.value;
+			try {
+				if (await navigator.clipboard.writeText(new URL(e.url, location.origin).href), !Nt || N.value?.id !== e.id) return;
+				V.add({ title: t("media-view.link-copied") });
+			} catch {
+				if (!Nt || N.value?.id !== e.id) return;
+				V.add({
+					title: t("media-view.could-not-copy-the-link"),
+					status: "error",
+					description: t("media-view.open-the-original-file-to-copy-its")
+				});
+			}
+		}
+		function on() {
+			J.value = "", q.value = !0;
+		}
+		async function sn() {
+			if (N.value && !K.value) {
+				K.value = !0, J.value = "";
+				try {
+					await ie.requests.media.remove({ params: { id: N.value.id } }), B(null), await Re(), q.value = !1, V.add({ title: t("media-view.file-deleted") });
+				} catch (e) {
+					J.value = a(e, t("media-view.could-not-delete-the-file"));
+				} finally {
+					K.value = !1;
+				}
+			}
+		}
+		return (e, n) => {
+			let a = i, s = o, c = he, l = le, d = ce, f = Me, p = ue, ee = Ae, te = de, g = De, _ = we;
+			return w(), b("div", {
+				ref_key: "dropZone",
+				ref: Jt,
+				class: "relative flex min-h-0 min-w-0 flex-1"
+			}, [
+				T("div", {
+					"aria-hidden": !h(Yt),
+					class: D(["pointer-events-none absolute inset-3 z-30 grid place-items-center rounded-xl border-2 border-dashed border-default bg-default/95 transition-opacity duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:duration-100", h(Yt) ? "opacity-100" : "opacity-0"])
+				}, [T("div", Je, [
+					S(a, {
+						name: "i-lucide-upload",
+						class: "size-10 text-muted"
+					}),
+					T("p", Ye, C(h(t)("media-view.drop-files-to-add-them")), 1),
+					T("p", Xe, C(h(t)("media-view.review-your-media-before-uploading")), 1)
+				])], 10, qe),
+				S(Oe, {
+					title: We.value,
+					summary: h(R) ? h(t)("media-view.loading-media") : h(t)("media.count", { count: h(I) })
+				}, ae({
+					default: x(() => [h(z) ? (w(), m(c, {
+						key: 0,
+						role: "alert",
+						title: h(t)("media-picker.media-could-not-be-loaded"),
+						description: h(z),
+						color: "error",
+						variant: "subtle",
+						actions: [{
+							label: h(v).actions.retry,
+							color: "error",
+							variant: "soft",
+							onClick: en
+						}]
+					}, null, 8, [
+						"title",
+						"description",
+						"actions"
+					])) : $t.value ? (w(), b(E, { key: 1 }, [S(je, null, {
+						default: x(() => [
+							S(l, {
+								ref_key: "searchField",
+								ref: Rt,
+								modelValue: h(P),
+								"onUpdate:modelValue": n[2] ||= (e) => oe(P) ? P.value = e : null,
+								icon: "i-lucide-search",
+								placeholder: h(t)("media-view.search-media"),
+								"aria-label": h(t)("media-view.search-media-and-folders"),
+								class: "w-full @min-[40rem]:w-80",
+								ui: { trailing: "pe-1" }
+							}, ae({ _: 2 }, [h(P) ? {
+								name: "trailing",
+								fn: x(() => [S(s, {
+									color: "neutral",
+									variant: "ghost",
+									size: "xs",
+									icon: "i-lucide-x",
+									"aria-label": h(t)("media-view.clear-search"),
+									onClick: zt
+								}, null, 8, ["aria-label"])]),
+								key: "0"
+							} : void 0]), 1032, [
+								"modelValue",
+								"placeholder",
+								"aria-label"
+							]),
+							U.value.folder === void 0 ? (w(), m(d, {
+								key: 0,
+								modelValue: Lt.value,
+								"onUpdate:modelValue": n[3] ||= (e) => Lt.value = e,
+								items: Xt.value,
+								icon: "i-lucide-folder",
+								"aria-label": h(t)("media-picker.filter-by-folder"),
+								class: "min-w-0 flex-1 @min-[40rem]:flex-none @min-[40rem]:w-44"
+							}, null, 8, [
+								"modelValue",
+								"items",
+								"aria-label"
+							])) : y("", !0),
+							G.value ? (w(), m(s, {
+								key: 1,
+								color: "neutral",
+								variant: "link",
+								size: "sm",
+								label: h(t)("media-view.clear-filters"),
+								onClick: It
+							}, null, 8, ["label"])) : y("", !0)
+						]),
+						_: 1
+					}), T("div", {
+						ref_key: "libraryElement",
+						ref: Wt,
+						class: D(["grid min-w-0 gap-6", X.value ? "grid-cols-[minmax(0,1fr)_16.5rem]" : "grid-cols-1"])
+					}, [T("section", {
+						ref_key: "assetInventory",
+						ref: Bt,
+						class: "min-w-0",
+						"aria-label": h(v).navigation.media
+					}, [h(R) && !h(M).length ? (w(), b("div", {
+						key: 0,
+						class: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-4",
+						"aria-label": h(t)("media-view.loading-media-2")
+					}, [(w(), b(E, null, re(6, (e) => T("div", { key: e }, [S(f, { class: "aspect-4/3 rounded-lg" }), S(f, { class: "mt-3 h-4 w-3/4" })])), 64))], 8, Qe)) : (w(), b("div", {
+						key: 1,
+						"aria-busy": h(R),
+						class: D(Y.value === "list" ? "overflow-hidden rounded-lg border border-default" : "")
+					}, [T("div", { class: D(["flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 border-default px-5 py-2.5", Y.value === "list" ? "border-b" : "mb-4"]) }, [T("span", et, C(h(N) ? h(N).name : h(t)("media-view.select-media-to-see-details")), 1), T("div", tt, [S(p, { items: Zt.value.map((e) => ({
+						label: e.label,
+						icon: h(L) === e.value ? "i-lucide-check" : void 0,
+						onSelect: () => L.value = e.value
+					})) }, {
+						default: x(() => [S(s, {
+							color: "neutral",
+							variant: "ghost",
+							size: "sm",
+							icon: "i-lucide-arrow-down-wide-narrow",
+							label: Zt.value.find((e) => e.value === h(L))?.label,
+							"trailing-icon": "i-lucide-chevron-down",
+							"aria-label": h(t)("media-view.sort-media")
+						}, null, 8, ["label", "aria-label"])]),
+						_: 1
+					}, 8, ["items"]), T("div", {
+						class: "flex gap-1",
+						role: "group",
+						"aria-label": h(t)("media-view.library-view")
+					}, [(w(), b(E, null, re(["grid", "list"], (e) => S(s, {
+						key: e,
+						color: "neutral",
+						variant: Y.value === e ? "soft" : "ghost",
+						icon: e === "grid" ? "i-lucide-layout-grid" : "i-lucide-list",
+						"aria-label": h(t)(e === "grid" ? "media.grid-view" : "media.list-view"),
+						"aria-pressed": Y.value === e,
+						size: "sm",
+						onClick: (t) => Y.value = e
+					}, null, 8, [
+						"variant",
+						"icon",
+						"aria-label",
+						"aria-pressed",
+						"onClick"
+					])), 64))], 8, nt)])], 2), Y.value === "list" ? (w(), m(ke, {
+						key: 0,
+						data: Qt.value,
+						columns: Ht.value,
+						"get-row-id": (e) => e.id,
+						"row-selection": Ut.value,
+						ui: {
+							thead: h(Vt) < 720 ? "hidden" : "block",
+							tr: h(Vt) < 720 ? "grid grid-cols-1 data-[selected=true]:bg-muted/50" : "grid grid-cols-[minmax(0,3fr)_minmax(0,2fr)_7rem] data-[selected=true]:bg-muted/50",
+							td: "min-w-0 whitespace-normal align-top px-5 py-3"
+						}
+					}, {
+						"name-cell": x(({ row: e }) => [T("button", {
+							type: "button",
+							"aria-label": h(t)("media.file-name", {
+								name: e.original.name,
+								folder: e.original.folder || h(t)("media-asset-details.no-folder")
+							}),
+							"aria-pressed": h(N)?.id === e.original.id,
+							class: "flex w-full min-w-0 cursor-pointer items-center gap-3 text-left rounded focus-visible:outline-2 focus-visible:outline-highlighted",
+							onClick: (t) => nn(e.original, t)
+						}, [T("span", it, [e.original.mimeType.startsWith("image/") && !H.value.has(e.original.id) ? (w(), b("img", {
+							key: 0,
+							src: h(u)(e.original.id, {
+								width: 96,
+								height: 96,
+								fit: "cover",
+								format: "webp",
+								quality: 75
+							}),
+							alt: "",
+							loading: "lazy",
+							class: "size-full object-cover",
+							onError: (t) => He(e.original.id)
+						}, null, 40, at)) : (w(), m(a, {
+							key: 1,
+							name: e.original.mimeType.startsWith("video/") ? "i-lucide-video" : e.original.mimeType.startsWith("image/") ? "i-lucide-image-off" : "i-lucide-file-text",
+							class: "size-5 text-muted"
+						}, null, 8, ["name"]))]), T("span", ot, [T("span", st, C(e.original.name), 1), T("span", ct, C(e.original.mimeType.split("/")[1]?.toUpperCase()), 1)])], 8, rt)]),
+						"folder-cell": x(({ row: e }) => [T("p", lt, C(e.original.folder || h(t)("media-asset-details.no-folder")), 1)]),
+						"byteSize-cell": x(({ row: e }) => [T("p", ut, C(h(Se)(e.original.byteSize, h(r), h(t))), 1)]),
+						empty: x(() => [S(ee, {
+							title: G.value ? h(t)("media-view.no-matching-media") : h(t)("media-view.this-view-is-empty"),
+							description: G.value ? h(t)("media-view.try-another-search-or-clear-your-filters") : h(t)("media-view.upload-media-to-get-started"),
+							icon: "i-lucide-search",
+							variant: "naked",
+							class: "py-14",
+							actions: G.value ? [{
+								label: h(t)("media-view.clear-filters"),
+								color: "neutral",
+								variant: "outline",
+								onClick: It
+							}] : Q.value ? [{
+								label: h(t)("media-upload-panel.upload-media"),
+								color: "neutral",
+								onClick: () => $()
+							}] : []
+						}, null, 8, [
+							"title",
+							"description",
+							"actions"
+						])]),
+						_: 1
+					}, 8, [
+						"data",
+						"columns",
+						"get-row-id",
+						"row-selection",
+						"ui"
+					])) : (w(), b(E, { key: 1 }, [T("div", dt, [(w(!0), b(E, null, re(Qt.value, (e) => (w(), b("button", {
+						key: e.id,
+						type: "button",
+						class: "group min-w-0 cursor-pointer rounded-lg text-left focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-highlighted",
+						"aria-label": h(xe)(e),
+						"aria-pressed": h(N)?.id === e.id,
+						onClick: (t) => nn(e, t)
+					}, [T("span", { class: D(["relative block aspect-4/3 overflow-hidden rounded-lg ring-1 ring-inset", [
+						h(A) ? "transition-transform duration-100 ease-[cubic-bezier(0.23,1,0.32,1)] motion-safe:pointer-fine:group-active:scale-[0.98]" : "",
+						e.mimeType.startsWith("image/") && !H.value.has(e.id) ? "bg-white" : "bg-muted/30",
+						h(N)?.id === e.id ? "ring-2 ring-highlighted" : "ring-default group-hover:ring-accented"
+					]]) }, [
+						e.mimeType.startsWith("image/") && !H.value.has(e.id) ? (w(), b("img", {
+							key: 0,
+							src: h(u)(e.id, {
+								width: 480,
+								height: 360,
+								fit: "cover",
+								format: "webp",
+								quality: 75
+							}),
+							alt: "",
+							loading: "lazy",
+							onError: (t) => He(e.id),
+							class: "size-full object-cover"
+						}, null, 40, pt)) : e.mimeType.startsWith("video/") ? (w(), m(Ie, {
+							key: 1,
+							asset: e
+						}, null, 8, ["asset"])) : (w(), b("span", mt, [S(a, {
+							name: e.mimeType.startsWith("image/") ? "i-lucide-image-off" : h(Ce)(e.mimeType),
+							class: "size-8"
+						}, null, 8, ["name"])])),
+						h(N)?.id === e.id ? (w(), b("span", ht, [S(a, {
+							name: "i-lucide-check",
+							class: "size-4"
+						})])) : y("", !0),
+						e.mimeType.startsWith("video/") ? (w(), b("span", gt, C(h(t)("media-asset-details.video")), 1)) : y("", !0)
+					], 2), T("span", _t, [T("span", {
+						title: e.name,
+						class: "block truncate text-sm font-medium text-highlighted"
+					}, C(e.name), 9, vt), T("span", yt, C(e.folder || h(t)("media-asset-details.no-folder")), 1)])], 8, ft))), 128))]), Qt.value.length ? y("", !0) : (w(), m(ee, {
+						key: 0,
+						icon: "i-lucide-images",
+						title: G.value ? h(t)("media-view.no-matching-media") : h(t)("media-view.this-view-is-empty"),
+						description: G.value ? h(t)("media-view.try-another-search-or-clear-your-filters") : h(t)("media-view.upload-media-to-get-started"),
+						actions: G.value ? [{
+							label: h(t)("media-view.clear-filters"),
+							color: "neutral",
+							variant: "outline",
+							onClick: It
+						}] : Q.value ? [{
+							label: h(t)("media-upload-panel.upload-media"),
+							color: "neutral",
+							onClick: () => $()
+						}] : []
+					}, null, 8, [
+						"title",
+						"description",
+						"actions"
+					]))], 64))], 10, $e)), h(I) > W ? (w(), b("div", bt, [T("p", xt, C(h(t)("media.range", {
+						start: (j.value - 1) * W + 1,
+						end: Math.min(j.value * W, h(I)),
+						count: h(I)
+					})), 1), S(te, {
+						page: j.value,
+						total: h(I),
+						"items-per-page": W,
+						"sibling-count": 0,
+						"show-edges": !1,
+						disabled: h(R),
+						size: "sm",
+						"onUpdate:page": Pt
+					}, null, 8, [
+						"page",
+						"total",
+						"disabled"
+					])])) : y("", !0)], 8, Ze), X.value ? (w(), b("aside", {
+						key: 0,
+						class: "min-w-0 border-l border-default pl-6",
+						"aria-label": h(t)("media-view.media-details")
+					}, [T("div", Ct, [h(N) ? (w(), m(Ue, {
+						key: 0,
+						asset: h(N)
+					}, {
+						default: x(() => [S(Ge, {
+							asset: h(N),
+							readonly: Ne.value,
+							onCopy: an,
+							onRemove: on
+						}, null, 8, ["asset", "readonly"])]),
+						_: 1
+					}, 8, ["asset"])) : (w(), b("div", wt, C(h(t)("media-view.select-media-to-see-its-details")), 1))])], 8, St)) : y("", !0)], 2)], 64)) : (w(), m(ee, {
+						key: 2,
+						icon: "i-lucide-images",
+						title: h(t)("media-view.a-home-for-your-media"),
+						description: Q.value ? h(t)("media-view.add-images-videos-and-pdfs-here-then") : h(t)("media-view.media-uploaded-by-your-team-will-appear")
+					}, ae({ _: 2 }, [Q.value ? {
+						name: "actions",
+						fn: x(() => [S(s, {
+							color: "neutral",
+							label: h(t)("media-view.add-your-first-files"),
+							icon: "i-lucide-plus",
+							onClick: n[4] ||= (e) => $()
+						}, null, 8, ["label"])]),
+						key: "0"
+					} : void 0, Q.value ? {
+						name: "footer",
+						fn: x(() => [ne(C(h(t)("media-view.or-drop-files-anywhere-on-this-page")), 1)]),
+						key: "1"
+					} : void 0]), 1032, ["title", "description"]))]),
+					_: 2
+				}, [Q.value ? {
+					name: "actions",
+					fn: x(() => [S(s, {
+						color: "neutral",
+						variant: "outline",
+						icon: "i-lucide-folder-plus",
+						label: h(t)("media-folder-dialog.new-folder"),
+						onClick: n[0] ||= (e) => Ve.value = !0
+					}, null, 8, ["label"]), S(s, {
+						color: "neutral",
+						icon: "i-lucide-upload",
+						label: h(t)("media-upload-panel.upload-media"),
+						onClick: n[1] ||= (e) => $()
+					}, null, 8, ["label"])]),
+					key: "0"
+				} : void 0]), 1032, ["title", "summary"]),
+				X.value ? y("", !0) : (w(), m(g, {
+					key: 0,
+					open: Z.value,
+					"onUpdate:open": n[5] ||= (e) => Z.value = e,
+					transition: h(A),
+					title: h(t)("media-view.media-details"),
+					content: { onCloseAutoFocus: rn },
+					description: h(t)("media-view.preview-and-manage-this-media-asset"),
+					ui: { content: "max-w-sm" }
+				}, {
+					body: x(() => [h(z) ? (w(), m(c, {
+						key: 0,
+						role: "alert",
+						class: "mb-5",
+						description: h(z),
+						color: "error",
+						variant: "subtle"
+					}, null, 8, ["description"])) : y("", !0), h(N) ? (w(), m(Ue, {
+						key: 1,
+						asset: h(N)
+					}, {
+						default: x(() => [S(Ge, {
+							asset: h(N),
+							readonly: Ne.value,
+							onCopy: an,
+							onRemove: on
+						}, null, 8, ["asset", "readonly"])]),
+						_: 1
+					}, 8, ["asset"])) : y("", !0)]),
+					_: 1
+				}, 8, [
+					"open",
+					"transition",
+					"title",
+					"content",
+					"description"
+				])),
+				S(Ee, {
+					open: Ve.value,
+					"onUpdate:open": n[6] ||= (e) => Ve.value = e,
+					onCreated: Ft
+				}, null, 8, ["open"]),
+				S(me, {
+					ref_key: "uploadPanel",
+					ref: qt,
+					onUploaded: tn
+				}, null, 512),
+				S(_, {
+					open: q.value,
+					"onUpdate:open": n[8] ||= (e) => q.value = e,
+					transition: h(A),
+					title: h(t)("media-view.delete-file"),
+					description: h(t)("media-view.this-permanently-deletes-the-file-from-your"),
+					dismissible: !K.value,
+					close: !K.value,
+					ui: { content: "max-w-md" }
+				}, {
+					body: x(() => [T("div", Tt, [
+						J.value ? (w(), m(c, {
+							key: 0,
+							role: "alert",
+							description: J.value,
+							color: "error",
+							variant: "subtle"
+						}, null, 8, ["description"])) : y("", !0),
+						h(N) ? (w(), b("div", Et, [h(N).mimeType.startsWith("image/") ? (w(), b("img", {
+							key: 0,
+							src: h(u)(h(N).id, {
+								width: 96,
+								height: 96,
+								format: "webp",
+								quality: 75
+							}),
+							alt: "",
+							class: "size-12 shrink-0 rounded object-contain"
+						}, null, 8, Dt)) : (w(), b("span", Ot, [S(a, {
+							name: h(Ce)(h(N).mimeType),
+							class: "size-5 text-muted"
+						}, null, 8, ["name"])])), T("p", kt, C(h(xe)(h(N))), 1)])) : y("", !0),
+						T("p", At, C(h(t)("media-view.files-used-on-a-page-cant-be")), 1)
+					])]),
+					footer: x(() => [T("div", jt, [S(s, {
+						color: "neutral",
+						variant: "ghost",
+						label: h(v).actions.cancel,
+						disabled: K.value,
+						onClick: n[7] ||= (e) => q.value = !1
+					}, null, 8, ["label", "disabled"]), S(s, {
+						color: "error",
+						label: h(t)("media-asset-actions.delete-file"),
+						loading: K.value,
+						onClick: sn
+					}, null, 8, ["label", "loading"])])]),
+					_: 1
+				}, 8, [
+					"open",
+					"transition",
+					"title",
+					"description",
+					"dismissible",
+					"close"
+				])
+			], 512);
+		};
+	}
+}), Nt = /* @__PURE__ */ v({
+	__name: "MediaPage",
+	setup(e) {
+		return (e, t) => (w(), m(Mt));
+	}
+});
+//#endregion
+export { Nt as default };