@templatical/media-library 0.35.0 → 0.36.0

package/dist/templatical-media-library.js

@@ -1,267 +1,136 @@
-import { API_ROUTES as e, ApiClient as t, buildUrl as n, createSdkAuthManager as r } from "@templatical/core/cloud";
-import { Fragment as i, Teleport as a, Transition as o, computed as s, createApp as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, h as g, inject as _, isRef as v, normalizeClass as y, normalizeStyle as b, onMounted as x, openBlock as S, provide as C, ref as w, renderList as T, resolveComponent as E, toDisplayString as D, toRef as O, unref as k, vModelText as A, watch as j, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
-import { Check as I, ChevronRight as L, Copy as R, File as z, Folder as B, Grid2x2 as V, Link as H, List as U, LoaderCircle as W, PanelLeft as G, Pencil as K, Plus as q, RefreshCw as J, Search as Y, Star as ee, Trash2 as X, Upload as te, X as ne } from "@lucide/vue";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createApp as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, h as f, inject as p, isRef as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, provide as y, ref as b, renderList as x, resolveComponent as S, toDisplayString as C, toRef as w, toValue as T, unref as E, vModelText as D, watch as O, withCtx as k, withDirectives as A, withKeys as j, withModifiers as M } from "vue";
+import { Check as N, ChevronRight as P, Copy as F, File as I, Folder as L, Grid2x2 as R, Link as z, List as B, LoaderCircle as V, PanelLeft as H, Pencil as U, Plus as W, RefreshCw as G, Search as ee, Star as K, Trash2 as te, Upload as q, X as ne } from "@lucide/vue";
 import { Cropper as re } from "vue-advanced-cropper";
-import { onClickOutside as ie, useClipboard as ae, useDebounceFn as oe, useDropZone as se, useEventListener as ce, useFileDialog as le, useIntersectionObserver as ue } from "@vueuse/core";
+import { onClickOutside as J, useClipboard as Y, useDebounceFn as ie, useDropZone as ae, useEventListener as oe, useFileDialog as se, useIntersectionObserver as X } from "@vueuse/core";
 //#region \0rolldown/runtime.js
-var de = Object.defineProperty, fe = (e, t) => {
+var ce = Object.defineProperty, le = (e, t) => {
 	let n = {};
-	for (var r in e) de(n, r, {
+	for (var r in e) ce(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || de(n, Symbol.toStringTag, { value: "Module" }), n;
-}, pe = class {
-	authManager;
-	constructor(e) {
-		this.authManager = e;
-	}
-	get projectId() {
-		return this.authManager.projectId;
-	}
-	get tenantSlug() {
-		return this.authManager.tenantSlug;
-	}
-	get baseParams() {
-		return {
-			project: this.projectId,
-			tenant: this.tenantSlug
-		};
-	}
-	async request(e, t = {}) {
-		let n = await this.authManager.authenticatedFetch(e, {
-			...t,
-			headers: {
-				"Content-Type": "application/json",
-				Accept: "application/json",
-				...t.headers
-			}
-		});
-		if (!n.ok) {
-			let e = await n.json().catch(() => ({ message: `HTTP error ${n.status}` }));
-			throw Error(e.message, { cause: e });
-		}
-		if (n.status !== 204) return (await n.json()).data;
-	}
-	async browseMedia(t) {
-		let r = new URLSearchParams();
-		t.folder_id && r.set("folder_id", t.folder_id), t.search && r.set("search", t.search), t.category && r.set("category", t.category), t.sort && r.set("sort", t.sort), t.cursor && r.set("cursor", t.cursor);
-		let i = r.toString(), a = `${n(e["media.browse"], this.baseParams)}${i ? `?${i}` : ""}`, o = await this.authManager.authenticatedFetch(a, { headers: { Accept: "application/json" } });
-		if (!o.ok) {
-			let e = await o.json().catch(() => ({ message: `HTTP error ${o.status}` }));
-			throw Error(e.message, { cause: e });
-		}
-		return o.json();
-	}
-	async uploadMedia(t, r) {
-		let i = new FormData();
-		i.append("file", t), r && i.append("folder_id", r);
-		let a = n(e["media.upload"], this.baseParams), o = await this.authManager.authenticatedFetch(a, {
-			method: "POST",
-			headers: { Accept: "application/json" },
-			body: i
-		});
-		if (!o.ok) {
-			let e = await o.json().catch(() => ({ message: `HTTP error ${o.status}` }));
-			throw Error(e.message, { cause: e });
-		}
-		return (await o.json()).data;
-	}
-	async updateMedia(t, r, i) {
-		return this.request(n(e["media.update"], {
-			...this.baseParams,
-			media: t
-		}), {
-			method: "PUT",
-			body: JSON.stringify({
-				filename: r,
-				alt_text: i
-			})
-		});
-	}
-	async deleteMedia(t) {
-		return this.request(n(e["media.delete"], this.baseParams), {
-			method: "POST",
-			body: JSON.stringify({ ids: t })
-		});
-	}
-	async moveMedia(t, r) {
-		return this.request(n(e["media.move"], this.baseParams), {
-			method: "POST",
-			body: JSON.stringify({
-				ids: t,
-				folder_id: r
-			})
-		});
-	}
-	async getMediaFolders() {
-		return this.request(n(e["folders.index"], this.baseParams));
-	}
-	async createMediaFolder(t, r) {
-		return this.request(n(e["folders.store"], this.baseParams), {
-			method: "POST",
-			body: JSON.stringify({
-				name: t,
-				parent_id: r ?? null
-			})
-		});
+	return t || ce(n, Symbol.toStringTag, { value: "Module" }), n;
+};
+//#endregion
+//#region src/composable.ts
+function ue(e) {
+	let { provider: t } = e, n = b([]), r = b([]), i = b(null), a = b("files"), o = b(""), s = b(null), c = b("newest"), l = b(!1), u = b(!1), d = b(!1), f = b(null), p = b(null), m = b(/* @__PURE__ */ new Set()), h = b(null), g = b([]), _ = b({}), v = b(!1), y = b([]), x = b(!1), S = b(null), C = b(!1), w = b(null), E = b(!1), D = b(null), O = b(null), k = b(null), A = 0;
+	function j(t) {
+		try {
+			t();
+		} catch (t) {
+			e.onError?.(t);
+		}
 	}
-	async renameMediaFolder(t, r) {
-		return this.request(n(e["folders.update"], {
-			...this.baseParams,
-			mediaFolder: t
-		}), {
-			method: "PUT",
-			body: JSON.stringify({ name: r })
-		});
+	function M() {
+		return t.folders === !1 ? null : t.folders;
 	}
-	async deleteMediaFolder(t) {
-		return this.request(n(e["folders.destroy"], {
-			...this.baseParams,
-			mediaFolder: t
-		}), { method: "DELETE" });
-	}
-	async checkMediaUsage(t) {
-		let r = await this.authManager.authenticatedFetch(n(e["media.checkUsage"], this.baseParams), {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-				Accept: "application/json"
-			},
-			body: JSON.stringify({ ids: t })
-		});
-		if (!r.ok) {
-			let e = await r.json().catch(() => ({ message: `HTTP error ${r.status}` }));
-			throw Error(e.message, { cause: e });
-		}
-		return r.json();
-	}
-	async getFrequentlyUsed() {
-		return this.request(n(e["media.frequentlyUsed"], this.baseParams));
-	}
-	async importFromUrl(t, r) {
-		return this.request(n(e["media.importFromUrl"], this.baseParams), {
-			method: "POST",
-			body: JSON.stringify({
-				url: t,
-				folder_id: r ?? null
-			})
-		});
+	function N() {
+		return T(e.templateId);
 	}
-	async replaceMedia(t, r) {
-		let i = new FormData();
-		i.append("file", r);
-		let a = n(e["media.replace"], {
-			...this.baseParams,
-			media: t
-		}), o = await this.authManager.authenticatedFetch(a, {
-			method: "POST",
-			headers: { Accept: "application/json" },
-			body: i
-		});
-		if (!o.ok) {
-			let e = await o.json().catch(() => ({ message: `HTTP error ${o.status}` }));
-			throw Error(e.message, { cause: e });
-		}
-		return (await o.json()).data;
+	function P(e) {
+		let t = {};
+		o.value ? t.search = o.value : i.value != null && (t.folderId = i.value), s.value && (t.category = s.value), e && (t.cursor = e);
+		let n = N();
+		return n && (t.templateId = n), t;
 	}
-};
-//#endregion
-//#region src/composable.ts
-function me(e) {
-	if (!e.projectId) throw Error("projectId is required for useMediaLibrary");
-	let t = new pe(e.authManager), n = w([]), r = w([]), i = w(null), a = w("files"), o = w(""), s = w(null), c = w("newest"), l = w(!1), u = w(!1), d = w(!1), f = w(null), p = w(null), m = w(/* @__PURE__ */ new Set()), h = w(null), g = w([]), _ = w({}), v = w(!1), y = w([]), b = w(!1), x = w(null), S = w(!1), C = w(null), T = w(!1), E = w(null), D = w(null), O = 0;
-	async function k() {
-		let r = ++O;
+	async function F() {
+		let r = ++A;
 		l.value = !0;
+		let i = P();
 		try {
-			let e = await t.browseMedia({
-				folder_id: o.value ? void 0 : i.value,
-				search: o.value || void 0,
-				category: s.value || void 0,
-				sort: c.value === "newest" ? void 0 : c.value
-			});
-			if (r !== O) return;
-			n.value = e.data, f.value = e.meta.next_cursor, d.value = !!e.meta.next_cursor;
+			let e = await t.list(i);
+			if (r !== A) return;
+			n.value = e.items, f.value = e.nextCursor ?? null, d.value = !!e.nextCursor;
 		} catch (t) {
-			if (r !== O) return;
+			if (r !== A) return;
 			e.onError?.(t);
 		} finally {
-			r === O && (l.value = !1);
+			r === A && (l.value = !1);
 		}
 	}
-	async function A() {
+	async function I() {
 		if (!d.value || !f.value || l.value) return;
-		let r = ++O;
+		let r = ++A;
 		l.value = !0;
+		let i = P(f.value);
 		try {
-			let e = await t.browseMedia({
-				folder_id: o.value ? void 0 : i.value,
-				search: o.value || void 0,
-				category: s.value || void 0,
-				sort: c.value === "newest" ? void 0 : c.value,
-				cursor: f.value
-			});
-			if (r !== O) return;
-			n.value = [...n.value, ...e.data], f.value = e.meta.next_cursor, d.value = !!e.meta.next_cursor;
+			let e = await t.list(i);
+			if (r !== A) return;
+			n.value = [...n.value, ...e.items], f.value = e.nextCursor ?? null, d.value = !!e.nextCursor;
 		} catch (t) {
-			if (r !== O) return;
+			if (r !== A) return;
 			e.onError?.(t);
 		} finally {
-			r === O && (l.value = !1);
+			r === A && (l.value = !1);
 		}
 	}
-	async function j(e) {
-		o.value = e, await k();
+	async function L(e) {
+		o.value = e, await F();
 	}
-	async function M(e) {
-		s.value = e, await k();
+	async function R(e) {
+		s.value = e, await F();
 	}
-	async function N(e) {
-		c.value = e, await k();
+	async function z(e) {
+		c.value = e, await F();
 	}
-	async function P(e) {
-		a.value = "files", i.value = e, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await k();
+	async function B(e) {
+		a.value = "files", i.value = e, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await F();
 	}
-	async function F() {
-		a.value = "frequently-used", i.value = null, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await V();
+	async function V() {
+		a.value = "frequently-used", i.value = null, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await q();
 	}
-	async function I(r) {
+	async function H(r) {
+		let { create: a } = t;
+		if (typeof a != "function") return null;
 		u.value = !0;
 		try {
-			let e = await t.uploadMedia(r, i.value);
-			return n.value = [e, ...n.value], e;
+			let e = { file: r };
+			i.value != null && (e.folderId = i.value);
+			let o = N();
+			o && (e.templateId = o);
+			let s = await a(e);
+			return n.value = [s, ...n.value], j(() => t.onCreated?.(s)), s;
 		} catch (t) {
 			return e.onError?.(t), null;
 		} finally {
 			u.value = !1;
 		}
 	}
-	async function L(r) {
-		u.value = !0, p.value = {
-			current: 0,
-			total: r.length
-		};
-		try {
-			for (let a = 0; a < r.length; a++) {
-				p.value = {
-					current: a + 1,
-					total: r.length
-				};
-				try {
-					let e = await t.uploadMedia(r[a], i.value);
-					n.value = [e, ...n.value];
-				} catch (t) {
-					e.onError?.(t);
+	async function U(r) {
+		let { create: a } = t;
+		if (typeof a == "function") {
+			u.value = !0, p.value = {
+				current: 0,
+				total: r.length
+			};
+			try {
+				for (let o = 0; o < r.length; o++) {
+					p.value = {
+						current: o + 1,
+						total: r.length
+					};
+					try {
+						let e = { file: r[o] };
+						i.value != null && (e.folderId = i.value);
+						let s = N();
+						s && (e.templateId = s);
+						let c = await a(e);
+						n.value = [c, ...n.value], j(() => t.onCreated?.(c));
+					} catch (t) {
+						e.onError?.(t);
+					}
 				}
+			} finally {
+				u.value = !1, p.value = null;
 			}
-		} finally {
-			u.value = !1, p.value = null;
 		}
 	}
-	async function R(r) {
-		if (m.value.size !== 0) try {
-			let e = await t.moveMedia([...m.value], r);
+	async function W(t) {
+		if (m.value.size === 0) return;
+		let { move: r } = M() ?? { move: !1 };
+		if (typeof r == "function") try {
+			let e = await r([...m.value], t);
 			if (i.value === null) {
 				let t = new Map(e.map((e) => [e.id, e]));
 				n.value = n.value.map((e) => t.get(e.id) ?? e);
@@ -271,139 +140,189 @@ function me(e) {
 			e.onError?.(t);
 		}
 	}
-	async function z(r, i, a) {
-		try {
-			let e = await t.updateMedia(r, i, a);
-			n.value = n.value.map((t) => t.id === r ? e : t), h.value?.id === r && (h.value = e);
+	async function G(r, i, a) {
+		let { update: o } = t;
+		if (typeof o == "function") try {
+			let e = { filename: i };
+			a !== void 0 && (e.alt = a);
+			let s = await o(r, e);
+			n.value = n.value.map((e) => e.id === r ? s : e), h.value?.id === r && (h.value = s), j(() => t.onUpdated?.(s));
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function B() {
-		if (m.value.size !== 0) try {
-			await t.deleteMedia([...m.value]), n.value = n.value.filter((e) => !m.value.has(e.id)), g.value = g.value.filter((e) => !m.value.has(e.id)), m.value = /* @__PURE__ */ new Set(), h.value = null;
+	function ee(e) {
+		let t = /* @__PURE__ */ new Map();
+		for (let r of n.value) e.includes(r.id) && t.set(r.id, r);
+		for (let n of g.value) e.includes(n.id) && !t.has(n.id) && t.set(n.id, n);
+		return [...t.values()];
+	}
+	function K(e) {
+		n.value = n.value.filter((t) => !e.includes(t.id)), g.value = g.value.filter((t) => !e.includes(t.id)), m.value = /* @__PURE__ */ new Set(), h.value = null;
+	}
+	async function te() {
+		if (m.value.size === 0) return;
+		let { delete: n } = t;
+		if (typeof n != "function") return;
+		let r = [...m.value], i = ee(r);
+		try {
+			await n(r), K(r);
+			for (let e of i) j(() => t.onDeleted?.(e));
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function V() {
-		try {
-			g.value = await t.getFrequentlyUsed();
+	async function q() {
+		let { frequentlyUsed: n } = t;
+		if (typeof n == "function") try {
+			g.value = await n();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function H() {
+	async function ne() {
 		if (m.value.size === 0) return !1;
 		y.value = [...m.value];
+		let { checkUsage: n } = t;
+		if (typeof n != "function") return _.value = {}, v.value = !0, !1;
 		try {
-			let e = await t.checkMediaUsage(y.value);
-			_.value = e.data;
-			let n = Object.values(e.data).some((e) => e.template_count > 0);
-			return v.value = !0, n;
+			let e = await n(y.value);
+			_.value = e;
+			let t = Object.values(e).some((e) => e.templateCount > 0);
+			return v.value = !0, t;
 		} catch (t) {
 			return e.onError?.(t), !1;
 		}
 	}
-	async function U() {
-		if (v.value = !1, y.value.length !== 0) try {
-			await t.deleteMedia(y.value), n.value = n.value.filter((e) => !y.value.includes(e.id)), g.value = g.value.filter((e) => !y.value.includes(e.id)), m.value = /* @__PURE__ */ new Set(), h.value = null, y.value = [], _.value = {};
+	async function re() {
+		let { delete: n } = t;
+		if (typeof n != "function" || (v.value = !1, y.value.length === 0)) return;
+		let r = y.value, i = ee(r);
+		try {
+			await n(r), K(r), y.value = [], _.value = {};
+			for (let e of i) j(() => t.onDeleted?.(e));
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	function W() {
+	function J() {
 		v.value = !1, y.value = [], _.value = {};
 	}
-	async function G(r) {
-		b.value = !0, x.value = null;
+	async function Y(r) {
+		let a = t.importFromUrl;
+		if (typeof a != "function") return null;
+		x.value = !0, S.value = null;
 		try {
-			let e = await t.importFromUrl(r, i.value);
-			return n.value = [e, ...n.value], e;
+			let e = await a(r, i.value, N());
+			return n.value = [e, ...n.value], j(() => t.onCreated?.(e)), e;
 		} catch (t) {
-			return x.value = t instanceof Error ? t.message : "Import failed", e.onError?.(t), null;
+			return S.value = t instanceof Error ? t.message : "Import failed", e.onError?.(t), null;
 		} finally {
-			b.value = !1;
+			x.value = !1;
 		}
 	}
-	function K(e) {
+	function ie(e) {
 		let t = new Set(m.value);
 		t.has(e) ? t.delete(e) : t.add(e), m.value = t;
 	}
-	function q() {
+	function ae() {
 		m.value = /* @__PURE__ */ new Set(), h.value = null;
 	}
-	function J(e) {
+	function oe(e) {
 		h.value = e, m.value = /* @__PURE__ */ new Set([e.id]);
 	}
-	async function Y() {
+	async function se() {
+		let { storage: n } = t;
+		if (typeof n != "function") {
+			k.value = null;
+			return;
+		}
 		try {
-			r.value = await t.getMediaFolders();
+			k.value = await n();
+		} catch (t) {
+			e.onError?.(t);
+		}
+	}
+	async function X() {
+		let t = M();
+		if (t) try {
+			r.value = await t.list();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function ee(n, r) {
+	async function ce(t, n) {
+		let { create: r } = M() ?? { create: !1 };
+		if (typeof r != "function") return null;
 		try {
-			let e = await t.createMediaFolder(n, r);
-			return await Y(), e;
+			let e = { name: t };
+			n !== void 0 && (e.parentId = n);
+			let i = await r(e);
+			return await X(), i;
 		} catch (t) {
 			return e.onError?.(t), null;
 		}
 	}
-	function X(e, t) {
-		for (let n of e) {
-			if (n.id === t) return n;
-			if (n.children) {
-				let e = X(n.children, t);
-				if (e) return e;
-			}
-		}
+	function le(e, t) {
+		for (let n of e) if (n.id === t) return n;
 		return null;
 	}
-	async function te(n, r) {
-		try {
-			await t.renameMediaFolder(n, r), await Y();
+	async function ue(t, n) {
+		let { update: r } = M() ?? { update: !1 };
+		if (typeof r == "function") try {
+			await r(t, { name: n }), await X();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function ne(n) {
-		try {
-			let e = X(r.value, n)?.parent_id ?? null;
-			await t.deleteMediaFolder(n), i.value === n && (i.value = e), await Y(), await k();
+	async function de(t) {
+		let { delete: n } = M() ?? { delete: !1 };
+		if (typeof n == "function") try {
+			let e = le(r.value, t)?.parentId ?? null;
+			await n(t), i.value === t && (i.value = e), await X(), await F();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function re(n) {
-		E.value = n, C.value = null;
+	async function fe(n) {
+		D.value = n, w.value = null;
+		let { checkUsage: r } = t;
+		if (typeof r != "function") {
+			O.value = null, E.value = !0;
+			return;
+		}
 		try {
-			let e = await t.checkMediaUsage([n.id]);
-			D.value = e.data[n.id] ?? null, T.value = !0;
+			let e = await r([n.id]);
+			O.value = e[n.id] ?? null, E.value = !0;
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	function ie() {
-		T.value = !1, E.value = null, D.value = null, C.value = null;
+	function pe() {
+		E.value = !1, D.value = null, O.value = null, w.value = null;
+	}
+	function Z(e) {
+		n.value = n.value.map((t) => t.id === e.id ? e : t), g.value = g.value.map((t) => t.id === e.id ? e : t), h.value?.id === e.id && (h.value = e), j(() => t.onUpdated?.(e));
 	}
-	async function ae(r) {
-		if (!E.value) return null;
-		S.value = !0, C.value = null;
+	async function me(n) {
+		let { replace: r } = t;
+		if (typeof r != "function" || !D.value) return null;
+		C.value = !0, w.value = null;
 		try {
-			let e = await t.replaceMedia(E.value.id, r);
-			return n.value = n.value.map((t) => t.id === e.id ? e : t), g.value = g.value.map((t) => t.id === e.id ? e : t), h.value?.id === e.id && (h.value = e), T.value = !1, E.value = null, D.value = null, e;
+			let e = await r(D.value.id, n);
+			return Z(e), E.value = !1, D.value = null, O.value = null, e;
 		} catch (t) {
-			return C.value = t instanceof Error ? t.message : "Replace failed", e.onError?.(t), null;
+			return w.value = t instanceof Error ? t.message : "Replace failed", e.onError?.(t), null;
 		} finally {
-			S.value = !1;
+			C.value = !1;
 		}
 	}
-	async function oe(r, i) {
+	async function he(n, r) {
+		let { replace: i } = t;
+		if (typeof i != "function") return null;
 		try {
-			let e = await t.replaceMedia(r, i);
-			return n.value = n.value.map((t) => t.id === e.id ? e : t), g.value = g.value.map((t) => t.id === e.id ? e : t), h.value?.id === e.id && (h.value = e), e;
+			let e = await i(n, r);
+			return Z(e), e;
 		} catch (t) {
 			return e.onError?.(t), null;
 		}
@@ -425,47 +344,49 @@ function me(e) {
 		frequentlyUsedItems: g,
 		deleteUsageInfo: _,
 		showDeleteWarning: v,
-		loadItems: k,
-		loadMore: A,
-		search: j,
-		filterByCategory: M,
-		sortBy: N,
-		navigateToFolder: P,
-		showFrequentlyUsed: F,
-		uploadFile: I,
-		uploadFiles: L,
-		moveSelected: R,
-		updateFile: z,
-		deleteSelected: B,
-		isImportingFromUrl: b,
-		importFromUrlError: x,
-		importFromUrl: G,
-		toggleSelection: K,
-		clearSelection: q,
-		selectItem: J,
-		loadFolders: Y,
-		createFolder: ee,
-		renameFolder: te,
-		deleteFolder: ne,
-		findFolderInTree: X,
-		loadFrequentlyUsed: V,
-		checkUsageBeforeDelete: H,
-		confirmDelete: U,
-		cancelDelete: W,
-		isReplacing: S,
-		replaceError: C,
-		showReplaceWarning: T,
-		pendingReplaceItem: E,
-		replaceUsageInfo: D,
-		checkUsageBeforeReplace: re,
-		cancelReplace: ie,
-		replaceFile: ae,
-		replaceMediaDirectly: oe
+		loadItems: F,
+		loadMore: I,
+		search: L,
+		filterByCategory: R,
+		sortBy: z,
+		navigateToFolder: B,
+		showFrequentlyUsed: V,
+		uploadFile: H,
+		uploadFiles: U,
+		moveSelected: W,
+		updateFile: G,
+		deleteSelected: te,
+		isImportingFromUrl: x,
+		importFromUrlError: S,
+		importFromUrl: Y,
+		toggleSelection: ie,
+		clearSelection: ae,
+		selectItem: oe,
+		loadFolders: X,
+		createFolder: ce,
+		renameFolder: ue,
+		deleteFolder: de,
+		findFolderInTree: le,
+		loadFrequentlyUsed: q,
+		checkUsageBeforeDelete: ne,
+		confirmDelete: re,
+		cancelDelete: J,
+		isReplacing: C,
+		replaceError: w,
+		showReplaceWarning: E,
+		pendingReplaceItem: D,
+		replaceUsageInfo: O,
+		checkUsageBeforeReplace: fe,
+		cancelReplace: pe,
+		replaceFile: me,
+		replaceMediaDirectly: he,
+		storageInfo: k,
+		loadStorage: se
 	};
 }
 //#endregion
 //#region src/keys.ts
-var he = Symbol("templaticalMediaPlanConfig"), ge = Symbol("templaticalMediaPopoverTarget"), _e = Symbol("templaticalMediaTranslations"), ve = Symbol("templaticalMediaUiTheme"), ye = Symbol("templaticalMediaUiLocale"), be = /* @__PURE__ */ fe({ default: () => xe }), xe = { mediaLibrary: {
+var de = Symbol("templaticalMediaLimits"), fe = Symbol("templaticalMediaPopoverTarget"), pe = Symbol("templaticalMediaTranslations"), Z = Symbol("templaticalMediaUiTheme"), me = Symbol("templaticalMediaUiLocale"), he = /* @__PURE__ */ le({ default: () => ge }), ge = { mediaLibrary: {
 	title: "Media Library",
 	searchPlaceholder: "Search files...",
 	allFiles: "All Files",
@@ -477,6 +398,7 @@ var he = Symbol("templaticalMediaPlanConfig"), ge = Symbol("templaticalMediaPopo
 	newFolder: "New Folder",
 	folderName: "Folder name",
 	noFiles: "No files found",
+	noSearchResults: "No files match your search",
 	dropOrClick: "Drop files here or click to upload",
 	acceptedFormats: "Images, PDF, Video, Audio, Documents (max 10MB)",
 	uploading: "Uploading...",
@@ -522,11 +444,6 @@ var he = Symbol("templaticalMediaPlanConfig"), ge = Symbol("templaticalMediaPopo
 	import: "Import",
 	importing: "Importing...",
 	importError: "Failed to import from URL",
-	conversionLabel: "Size",
-	conversionOriginal: "Original",
-	conversionSmall: "Small (150px)",
-	conversionMedium: "Medium (600px)",
-	conversionLarge: "Large (1200px)",
 	replaceFile: "Replace File",
 	replaceWarningTitle: "Replace File",
 	replaceWarningMessage: "You are about to replace this file. The replacement must have the same file extension ({extension}).",
@@ -551,8 +468,8 @@ var he = Symbol("templaticalMediaPlanConfig"), ge = Symbol("templaticalMediaPopo
 } };
 //#endregion
 //#region src/composables/useI18n.ts
-function Z(e) {
-	let t = e ?? _(_e, null), n = (v(t) ? t.value : t) ?? xe;
+function Q(e) {
+	let t = e ?? p(pe, null), n = (m(t) ? t.value : t) ?? ge;
 	function r(e, t) {
 		return e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : `{${n}}`);
 	}
@@ -563,86 +480,104 @@ function Z(e) {
 }
 //#endregion
 //#region src/components/media/MediaBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var Se = {
+var _e = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Ce = ["onClick"], we = {
+}, ve = ["onClick"], ye = {
 	key: 1,
 	style: { color: "var(--tpl-text)" }
-}, Te = /* @__PURE__ */ h({
+}, be = /* @__PURE__ */ d({
 	__name: "MediaBreadcrumb",
 	props: {
 		folders: {},
 		currentFolderId: {}
 	},
 	emits: ["navigate"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Z(), o = s(() => {
-			if (!n.currentFolderId) return [];
+	setup(t, { emit: n }) {
+		let i = t, a = n, { t: l } = Q(), d = r(() => {
+			if (!i.currentFolderId) return [];
 			let e = [];
-			return c(n.folders, n.currentFolderId, e), e;
+			return f(i.folders, i.currentFolderId, e), e;
 		});
-		function c(e, t, n) {
+		function f(e, t, n) {
 			for (let r of e) {
 				if (r.id === t) return n.push(r), !0;
-				if (r.children && c(r.children, t, n)) return n.unshift(r), !0;
+				if (f(r.children, t, n)) return n.unshift(r), !0;
 			}
 			return !1;
 		}
-		return (e, t) => o.value.length > 0 ? (S(), d("div", Se, [f("button", {
+		return (t, n) => d.value.length > 0 ? (v(), s("div", _e, [c("button", {
 			class: "tpl:transition-colors tpl:duration-150 tpl:hover:underline",
 			style: { color: "var(--tpl-primary)" },
-			onClick: t[0] ||= (e) => r("navigate", null)
-		}, D(k(a).mediaLibrary.allFiles), 1), (S(!0), d(i, null, T(o.value, (e, t) => (S(), d(i, { key: e.id }, [m(k(L), {
+			onClick: n[0] ||= (e) => a("navigate", null)
+		}, C(E(l).mediaLibrary.allFiles), 1), (v(!0), s(e, null, x(d.value, (t, n) => (v(), s(e, { key: t.id }, [u(E(P), {
 			size: 12,
 			"stroke-width": 2
-		}), t < o.value.length - 1 ? (S(), d("button", {
+		}), n < d.value.length - 1 ? (v(), s("button", {
 			key: 0,
 			class: "tpl:transition-colors tpl:duration-150 tpl:hover:underline",
 			style: { color: "var(--tpl-primary)" },
-			onClick: (t) => r("navigate", e.id)
-		}, D(e.name), 9, Ce)) : (S(), d("span", we, D(e.name), 1))], 64))), 128))])) : u("", !0);
-	}
-});
-//#endregion
-//#region src/composables/useMediaCategories.ts
-function Q(e) {
-	let t = e ?? _(he, null);
-	if (!t) throw Error("[Templatical] useMediaCategories() needs a plan config in scope. Render it under <MediaLibraryModal> (pass its `planConfig` prop) or provide PLAN_CONFIG_KEY yourself.");
-	let n = s(() => t.config.value?.media ?? null), r = s(() => n.value?.use_media_library ?? !0), i = s(() => n.value?.categories ?? null), a = s(() => i.value ? Object.values(i.value).flatMap((e) => e.mime_types) : []), o = s(() => a.value.join(",")), c = s(() => n.value?.max_file_size ?? 0);
+			onClick: (e) => a("navigate", t.id)
+		}, C(t.name), 9, ve)) : (v(), s("span", ye, C(t.name), 1))], 64))), 128))])) : o("", !0);
+	}
+}), xe = [
+	"images",
+	"documents",
+	"videos",
+	"audio"
+];
+function $(e) {
+	let t = e ?? p(de, null);
+	if (!t) throw Error("[Templatical] useMediaCategories() needs media limits in scope. Render it under <MediaLibraryModal> or provide MEDIA_LIMITS_KEY yourself.");
+	let n = t, i = r(() => !0), a = r(() => n.maxFileSize ?? Infinity), o = r(() => {
+		let e = n.accept;
+		if (e && e.length > 0) return e;
+		let t = n.mimeTypes;
+		return t ? Object.keys(t) : xe;
+	}), s = r(() => {
+		let e = n.mimeTypes;
+		return e ? o.value.flatMap((t) => e[t] ?? []) : [];
+	}), c = r(() => s.value.join(","));
 	function l(e, t) {
-		return i.value ? !t || t.length === 0 ? a.value.includes(e) : t.some((t) => i.value[t]?.mime_types.includes(e)) : !1;
+		let r = n.mimeTypes;
+		return !r || (t && t.length > 0 ? t : Object.keys(r)).some((t) => r[t]?.includes(e) ?? !1);
 	}
 	function u(e) {
-		return i.value ? i.value.images?.mime_types.includes(e) ?? !1 : !1;
+		return l(e.type) && e.size <= a.value;
 	}
 	function d(e) {
-		if (!i.value) return null;
-		for (let [t, n] of Object.entries(i.value)) if (n.mime_types.includes(e)) return t;
+		let t = n.mimeTypes;
+		return t ? t.images?.includes(e) ?? !1 : e.startsWith("image/");
+	}
+	function f(e) {
+		let t = n.mimeTypes;
+		if (!t) return null;
+		for (let [n, r] of Object.entries(t)) if (r?.includes(e)) return n;
 		return null;
 	}
 	return {
-		isMediaLibraryEnabled: r,
-		allAcceptedMimeTypes: a,
-		allAcceptedInputString: o,
-		maxFileSize: c,
-		availableCategories: s(() => i.value ? Object.keys(i.value) : []),
+		isMediaLibraryEnabled: i,
+		allAcceptedMimeTypes: s,
+		allAcceptedInputString: c,
+		maxFileSize: a,
+		availableCategories: o,
 		isAcceptedMimeType: l,
-		isImageMimeType: u,
-		getCategoryForMimeType: d
+		isAcceptedFile: u,
+		isImageMimeType: d,
+		getCategoryForMimeType: f
 	};
 }
 //#endregion
 //#region src/composables/useImageCrop.ts
-var Ee = {
+var Se = {
 	free: void 0,
 	square: 1,
 	landscape43: 4 / 3,
 	landscape169: 16 / 9,
 	original: void 0
 };
-function De(e) {
+function Ce(e) {
 	return e === "image/png" || e === "image/gif" ? {
 		mimeType: "image/png",
 		quality: 1
@@ -654,7 +589,7 @@ function De(e) {
 		quality: .92
 	};
 }
-function Oe(e, t, n) {
+function we(e, t, n) {
 	let r = e.width, i = e.height;
 	if (!t && !n) return e;
 	let a = r, o = i;
@@ -668,7 +603,7 @@ function Oe(e, t, n) {
 	let c = s.getContext("2d");
 	return c && (c.imageSmoothingEnabled = !0, c.imageSmoothingQuality = "high", c.drawImage(e, 0, 0, a, o)), s;
 }
-function ke(e, t, n) {
+function Te(e, t, n) {
 	return new Promise((r, i) => {
 		e.toBlob((e) => {
 			if (!e) {
@@ -680,7 +615,7 @@ function ke(e, t, n) {
 		}, n.mimeType, n.quality);
 	});
 }
-function Ae(e, t, n, r) {
+function Ee(e, t, n, r) {
 	let i = e, a = t;
 	if (n && i > n) {
 		let e = n / i;
@@ -697,101 +632,101 @@ function Ae(e, t, n, r) {
 }
 //#endregion
 //#region src/components/media/MediaEditModal.vue?vue&type=script&setup=true&lang.ts
-var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne = {
+var De = ["data-tpl-theme"], Oe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, ke = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Pe = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, Fe = {
+}, Ae = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, je = {
 	key: 0,
 	class: "tpl:mb-4"
-}, Ie = {
+}, Me = {
 	class: "tpl:relative tpl:mb-3 tpl:overflow-hidden tpl:rounded-md tpl:border",
 	style: {
 		"border-color": "var(--tpl-border)",
 		height: "300px",
 		"background-color": "var(--tpl-bg)"
 	}
-}, Le = { class: "tpl:space-y-3" }, Re = {
+}, Ne = { class: "tpl:space-y-3" }, Pe = {
 	class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, ze = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, Be = ["onClick"], Ve = { class: "tpl:flex tpl:gap-3" }, He = { class: "tpl:flex-1" }, Ue = {
+}, Fe = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, Ie = ["onClick"], Le = { class: "tpl:flex tpl:gap-3" }, Re = { class: "tpl:flex-1" }, ze = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, We = {
+}, Be = {
 	class: "tpl:font-normal",
 	style: { color: "var(--tpl-text-dim)" }
-}, Ge = { class: "tpl:relative" }, Ke = ["value", "placeholder"], qe = {
+}, Ve = { class: "tpl:relative" }, He = ["value", "placeholder"], Ue = {
 	class: "tpl:absolute tpl:top-1/2 tpl:right-2.5 tpl:-translate-y-1/2 tpl:text-xs",
 	style: { color: "var(--tpl-text-dim)" }
-}, Je = { class: "tpl:flex-1" }, Ye = {
+}, We = { class: "tpl:flex-1" }, Ge = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, Xe = {
+}, Ke = {
 	class: "tpl:font-normal",
 	style: { color: "var(--tpl-text-dim)" }
-}, Ze = { class: "tpl:relative" }, Qe = ["value", "placeholder"], $e = {
+}, qe = { class: "tpl:relative" }, Je = ["value", "placeholder"], Ye = {
 	class: "tpl:absolute tpl:top-1/2 tpl:right-2.5 tpl:-translate-y-1/2 tpl:text-xs",
 	style: { color: "var(--tpl-text-dim)" }
-}, et = {
+}, Xe = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, tt = {
+}, Ze = {
 	class: "tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, nt = { class: "tpl:mb-3" }, rt = {
+}, Qe = { class: "tpl:mb-3" }, $e = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, it = ["autofocus"], at = {
+}, et = ["autofocus"], tt = {
 	key: 1,
 	class: "tpl:mb-4"
-}, ot = {
+}, nt = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, st = ["placeholder"], ct = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, lt = ["disabled"], ut = /*@__PURE__*/ h({
+}, rt = ["placeholder"], it = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, at = ["disabled"], ot = /*@__PURE__*/ d({
 	__name: "MediaEditModal",
 	props: {
 		visible: { type: Boolean },
 		item: {}
 	},
 	emits: ["save", "close"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: c } = Z(), h = _(ve, null), g = _(ge, w(null)), v = c.mediaLibrary, { isImageMimeType: x } = Q(), C = w(""), E = w(""), O = w(null), P = w("free"), I = w(void 0), L = w(void 0), R = w(""), z = w(""), B = w(void 0), V = w(null), H = w(!1), U = w(!1), W = w(!1), G = s(() => n.item ? [
+	setup(i, { emit: d }) {
+		let f = i, m = d, { t: _ } = Q(), y = p(Z, null), S = p(fe, b(null)), w = _.mediaLibrary, { isImageMimeType: T } = $(), j = b(""), N = b(""), P = b(null), F = b("free"), I = b(void 0), L = b(void 0), R = b(""), z = b(""), B = b(void 0), V = b(null), H = b(!1), U = b(!1), W = b(!1), G = r(() => f.item ? [
 			"image/jpeg",
 			"image/png",
 			"image/webp",
 			"image/gif"
-		].includes(n.item.mime_type) : !1), K = s(() => P.value === "original" ? B.value : Ee[P.value]), q = s(() => V.value ? Ae(V.value.width, V.value.height, I.value, L.value) : null);
-		j(() => n.visible, (e) => {
-			e && n.item && (C.value = n.item.filename, E.value = n.item.alt_text || "", P.value = "free", I.value = void 0, L.value = void 0, R.value = "", z.value = "", B.value = void 0, V.value = null, H.value = !1, W.value = !1, n.item.width && n.item.height && (B.value = n.item.width / n.item.height));
+		].includes(f.item.mimeType ?? "") : !1), ee = r(() => F.value === "original" ? B.value : Se[F.value]), K = r(() => V.value ? Ee(V.value.width, V.value.height, I.value, L.value) : null);
+		O(() => f.visible, (e) => {
+			e && f.item && (j.value = f.item.filename ?? "", N.value = f.item.alt ?? "", F.value = "free", I.value = void 0, L.value = void 0, R.value = "", z.value = "", B.value = void 0, V.value = null, H.value = !1, W.value = !1, f.item.width && f.item.height && (B.value = f.item.width / f.item.height));
 		});
-		function J(e) {
+		function te(e) {
 			e.coordinates && (V.value = {
 				width: Math.round(e.coordinates.width),
 				height: Math.round(e.coordinates.height)
 			}, W.value = !0);
 		}
-		function Y() {
-			H.value = !0, !B.value && n.item?.width && n.item?.height && (B.value = n.item.width / n.item.height);
+		function q() {
+			H.value = !0, !B.value && f.item?.width && f.item?.height && (B.value = f.item.width / f.item.height);
 		}
-		function ee(e) {
+		function ne(e) {
 			let t = e.target.value;
 			R.value = t, I.value = t && parseInt(t, 10) || void 0;
 		}
-		function X(e) {
+		function J(e) {
 			let t = e.target.value;
 			z.value = t, L.value = t && parseInt(t, 10) || void 0;
 		}
-		async function te() {
-			let e = C.value.trim();
-			if (!e || !n.item || U.value) return;
-			let t = x(n.item.mime_type), i;
-			if (G.value && O.value && W.value) {
+		async function Y() {
+			let e = j.value.trim();
+			if (!e || !f.item || U.value) return;
+			let t = T(f.item.mimeType ?? ""), n;
+			if (G.value && P.value && W.value) {
 				U.value = !0;
 				try {
-					let { canvas: e } = O.value.getResult();
+					let { canvas: e } = P.value.getResult();
 					if (e) {
-						let t = Oe(e, I.value, L.value), r = De(n.item.mime_type);
-						i = { file: await ke(t, n.item.filename, r) };
+						let t = we(e, I.value, L.value), r = Ce(f.item.mimeType ?? "");
+						n = { file: await Te(t, f.item.filename ?? "image", r) };
 					}
 				} catch {
 					U.value = !1;
@@ -799,12 +734,12 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 				}
 				U.value = !1;
 			}
-			r("save", n.item.id, e, t ? E.value : void 0, i), r("close");
+			m("save", f.item.id, e, t ? N.value : void 0, n), m("close");
 		}
-		function ne(e) {
-			e.key === "Enter" && !U.value && (e.preventDefault(), te()), e.key === "Escape" && r("close");
+		function ie(e) {
+			e.key === "Enter" && !U.value && (e.preventDefault(), Y()), e.key === "Escape" && m("close");
 		}
-		return (t, n) => (S(), l(a, { to: k(g) || "body" }, [m(o, {
+		return (r, d) => (v(), a(t, { to: E(S) || "body" }, [u(n, {
 			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 			"enter-from-class": "tpl:opacity-0",
 			"enter-to-class": "tpl:opacity-100",
@@ -812,47 +747,47 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 			"leave-from-class": "tpl:opacity-100",
 			"leave-to-class": "tpl:opacity-0"
 		}, {
-			default: M(() => [e.visible && e.item ? (S(), d("div", {
+			default: k(() => [i.visible && i.item ? (v(), s("div", {
 				key: 0,
-				"data-tpl-theme": k(h),
-				class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
+				"data-tpl-theme": E(y),
+				class: "tpl tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
 				style: { "background-color": "var(--tpl-overlay)" },
-				onClick: n[3] ||= F((e) => r("close"), ["self"]),
-				onKeydown: ne
-			}, [f("div", {
-				class: y(["tpl:flex tpl:max-h-[90%] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", G.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
+				onClick: d[3] ||= M((e) => m("close"), ["self"]),
+				onKeydown: ie
+			}, [c("div", {
+				class: h(["tpl:flex tpl:max-h-[90%] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", G.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
 				style: { "background-color": "var(--tpl-bg-elevated)" }
 			}, [
-				f("div", Me, [f("h3", Ne, D(k(c).mediaLibrary.editFile), 1)]),
-				f("div", Pe, [
-					G.value ? (S(), d("div", Fe, [f("div", Ie, [m(k(re), {
+				c("div", Oe, [c("h3", ke, C(E(_).mediaLibrary.editFile), 1)]),
+				c("div", Ae, [
+					G.value ? (v(), s("div", je, [c("div", Me, [u(E(re), {
 						ref_key: "cropperRef",
-						ref: O,
-						src: e.item.url,
-						"stencil-props": { aspectRatio: K.value },
+						ref: P,
+						src: i.item.url,
+						"stencil-props": { aspectRatio: ee.value },
 						class: "tpl:h-full tpl:w-full",
 						"background-class": "tpl-cropper-background",
-						onChange: J,
-						onReady: Y
-					}, null, 8, ["src", "stencil-props"])]), f("div", Le, [
-						f("div", null, [f("label", Re, D(k(c).mediaLibrary.cropAspectRatio), 1), f("div", ze, [(S(), d(i, null, T([
+						onChange: te,
+						onReady: q
+					}, null, 8, ["src", "stencil-props"])]), c("div", Ne, [
+						c("div", null, [c("label", Pe, C(E(_).mediaLibrary.cropAspectRatio), 1), c("div", Fe, [(v(), s(e, null, x([
 							"free",
 							"square",
 							"landscape43",
 							"landscape169",
 							"original"
-						], (e) => f("button", {
+						], (e) => c("button", {
 							key: e,
 							type: "button",
 							class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
-							style: b({
-								borderColor: P.value === e ? "var(--tpl-primary)" : "var(--tpl-border)",
-								backgroundColor: P.value === e ? "var(--tpl-primary-light)" : "var(--tpl-bg)",
-								color: P.value === e ? "var(--tpl-primary)" : "var(--tpl-text)"
+							style: g({
+								borderColor: F.value === e ? "var(--tpl-primary)" : "var(--tpl-border)",
+								backgroundColor: F.value === e ? "var(--tpl-primary-light)" : "var(--tpl-bg)",
+								color: F.value === e ? "var(--tpl-primary)" : "var(--tpl-text)"
 							}),
-							onClick: (t) => P.value = e
-						}, D(k(v)[`crop${e.charAt(0).toUpperCase()}${e.slice(1)}`]), 13, Be)), 64))])]),
-						f("div", Ve, [f("div", He, [f("label", Ue, [p(D(k(c).mediaLibrary.cropMaxWidth) + " ", 1), f("span", We, D(k(c).mediaLibrary.cropOptional), 1)]), f("div", Ge, [f("input", {
+							onClick: (t) => F.value = e
+						}, C(E(w)[`crop${e.charAt(0).toUpperCase()}${e.slice(1)}`]), 13, Ie)), 64))])]),
+						c("div", Le, [c("div", Re, [c("label", ze, [l(C(E(_).mediaLibrary.cropMaxWidth) + " ", 1), c("span", Be, C(E(_).mediaLibrary.cropOptional), 1)]), c("div", Ve, [c("input", {
 							value: R.value,
 							type: "number",
 							min: "1",
@@ -863,8 +798,8 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 								color: "var(--tpl-text)"
 							},
 							placeholder: V.value?.width?.toString() || "",
-							onInput: ee
-						}, null, 40, Ke), f("span", qe, D(k(c).mediaLibrary.cropPixels), 1)])]), f("div", Je, [f("label", Ye, [p(D(k(c).mediaLibrary.cropMaxHeight) + " ", 1), f("span", Xe, D(k(c).mediaLibrary.cropOptional), 1)]), f("div", Ze, [f("input", {
+							onInput: ne
+						}, null, 40, He), c("span", Ue, C(E(_).mediaLibrary.cropPixels), 1)])]), c("div", We, [c("label", Ge, [l(C(E(_).mediaLibrary.cropMaxHeight) + " ", 1), c("span", Ke, C(E(_).mediaLibrary.cropOptional), 1)]), c("div", qe, [c("input", {
 							value: z.value,
 							type: "number",
 							min: "1",
@@ -875,12 +810,12 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 								color: "var(--tpl-text)"
 							},
 							placeholder: V.value?.height?.toString() || "",
-							onInput: X
-						}, null, 40, Qe), f("span", $e, D(k(c).mediaLibrary.cropPixels), 1)])])]),
-						q.value ? (S(), d("div", et, [f("span", null, D(k(c).mediaLibrary.cropOutputSize) + ": ", 1), f("span", tt, D(q.value.width) + " x " + D(q.value.height) + " " + D(k(c).mediaLibrary.cropPixels), 1)])) : u("", !0)
-					])])) : u("", !0),
-					f("div", nt, [f("label", rt, D(k(c).mediaLibrary.fileName), 1), N(f("input", {
-						"onUpdate:modelValue": n[0] ||= (e) => C.value = e,
+							onInput: J
+						}, null, 40, Je), c("span", Ye, C(E(_).mediaLibrary.cropPixels), 1)])])]),
+						K.value ? (v(), s("div", Xe, [c("span", null, C(E(_).mediaLibrary.cropOutputSize) + ": ", 1), c("span", Ze, C(K.value.width) + " x " + C(K.value.height) + " " + C(E(_).mediaLibrary.cropPixels), 1)])) : o("", !0)
+					])])) : o("", !0),
+					c("div", Qe, [c("label", $e, C(E(_).mediaLibrary.fileName), 1), A(c("input", {
+						"onUpdate:modelValue": d[0] ||= (e) => j.value = e,
 						type: "text",
 						class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
 						style: {
@@ -889,9 +824,9 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 							color: "var(--tpl-text)"
 						},
 						autofocus: !G.value
-					}, null, 8, it), [[A, C.value]])]),
-					k(x)(e.item.mime_type) ? (S(), d("div", at, [f("label", ot, D(k(c).mediaLibrary.altText), 1), N(f("input", {
-						"onUpdate:modelValue": n[1] ||= (e) => E.value = e,
+					}, null, 8, et), [[D, j.value]])]),
+					E(T)(i.item.mimeType ?? "") ? (v(), s("div", tt, [c("label", nt, C(E(_).mediaLibrary.altText), 1), A(c("input", {
+						"onUpdate:modelValue": d[1] ||= (e) => N.value = e,
 						type: "text",
 						class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
 						style: {
@@ -899,46 +834,49 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 							"background-color": "var(--tpl-bg)",
 							color: "var(--tpl-text)"
 						},
-						placeholder: k(c).mediaLibrary.altTextPlaceholder
-					}, null, 8, st), [[A, E.value]])])) : u("", !0)
+						placeholder: E(_).mediaLibrary.altTextPlaceholder
+					}, null, 8, rt), [[D, N.value]])])) : o("", !0)
 				]),
-				f("div", ct, [f("button", {
+				c("div", it, [c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 					style: {
 						"border-color": "var(--tpl-border)",
 						color: "var(--tpl-text)",
 						"background-color": "var(--tpl-bg)"
 					},
-					onClick: n[2] ||= (e) => r("close")
-				}, D(k(c).mediaLibrary.cancel), 1), f("button", {
+					onClick: d[2] ||= (e) => m("close")
+				}, C(E(_).mediaLibrary.cancel), 1), c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-white tpl:transition-all tpl:duration-150 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 					style: { background: "linear-gradient(\n                  135deg,\n                  var(--tpl-primary),\n                  var(--tpl-primary-hover)\n                )" },
 					disabled: U.value,
-					onClick: te
-				}, D(U.value ? k(c).mediaLibrary.saving : k(c).mediaLibrary.saveChanges), 9, lt)])
-			], 2)], 40, je)) : u("", !0)]),
+					onClick: Y
+				}, C(U.value ? E(_).mediaLibrary.saving : E(_).mediaLibrary.saveChanges), 9, at)])
+			], 2)], 40, De)) : o("", !0)]),
 			_: 1
 		})], 8, ["to"]));
 	}
-}), dt = (e, t) => {
+}), st = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, ft = /*#__PURE__*/ dt(ut, [["__scopeId", "data-v-72091aa5"]]), pt = {
+}, ct = /*#__PURE__*/ st(ot, [["__scopeId", "data-v-c7f50076"]]), lt = {
 	key: 1,
 	class: "tpl:size-4 tpl:shrink-0"
-}, mt = {
+}, ut = {
 	key: 0,
 	class: "tpl:truncate"
-}, ht = {
+}, dt = {
 	key: 3,
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-0.5 tpl:opacity-0 tpl:transition-opacity tpl:group-hover:opacity-100"
-}, gt = ["title"], _t = ["title"], vt = { key: 0 }, yt = ["placeholder"], bt = /* @__PURE__ */ h({
+}, ft = ["title"], pt = ["title"], mt = { key: 0 }, ht = ["placeholder"], gt = /* @__PURE__ */ d({
 	__name: "MediaFolderTreeNode",
 	props: {
 		folder: {},
 		currentFolderId: {},
-		depth: {}
+		depth: {},
+		canCreateFolder: { type: Boolean },
+		canRenameFolder: { type: Boolean },
+		canDeleteFolder: { type: Boolean }
 	},
 	emits: [
 		"navigate",
@@ -946,64 +884,64 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 		"renameFolder",
 		"deleteFolder"
 	],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Z(), o = w(!1), c = w(!1), p = w(""), h = w(!1), g = w(""), _ = s(() => (n.folder.children?.length ?? 0) > 0), v = s(() => n.depth < 4), x = s(() => n.currentFolderId === n.folder.id), C = s(() => !n.currentFolderId || !n.folder.children ? !1 : j(n.folder.children, n.currentFolderId)), O = s(() => o.value || C.value);
-		function j(e, t) {
-			for (let n of e) if (n.id === t || n.children && j(n.children, t)) return !0;
+	setup(t, { emit: n }) {
+		let i = t, l = n, { t: d } = Q(), f = b(!1), p = b(!1), m = b(""), _ = b(!1), y = b(""), w = r(() => i.folder.children.length > 0), T = r(() => i.depth < 4), O = r(() => i.currentFolderId === i.folder.id), k = r(() => i.currentFolderId ? F(i.folder.children, i.currentFolderId) : !1), N = r(() => f.value || k.value);
+		function F(e, t) {
+			for (let n of e) if (n.id === t || F(n.children, t)) return !0;
 			return !1;
 		}
-		function M() {
-			o.value = !o.value;
-		}
 		function I() {
-			c.value = !0, p.value = n.folder.name;
+			f.value = !f.value;
 		}
 		function R() {
-			let e = p.value.trim();
-			e && e !== n.folder.name && r("renameFolder", n.folder.id, e), c.value = !1, p.value = "";
+			p.value = !0, m.value = i.folder.name;
 		}
 		function z() {
-			c.value = !1, p.value = "";
+			let e = m.value.trim();
+			e && e !== i.folder.name && l("renameFolder", i.folder.id, e), p.value = !1, m.value = "";
+		}
+		function B() {
+			p.value = !1, m.value = "";
 		}
 		function V() {
-			h.value = !0, g.value = "", o.value = !0;
+			_.value = !0, y.value = "", f.value = !0;
 		}
 		function H() {
-			g.value.trim() && r("createFolder", g.value.trim(), n.folder.id), h.value = !1, g.value = "";
+			y.value.trim() && l("createFolder", y.value.trim(), i.folder.id), _.value = !1, y.value = "";
 		}
-		function U() {
-			h.value = !1, g.value = "";
+		function G() {
+			_.value = !1, y.value = "";
 		}
-		return (t, n) => {
-			let o = E("MediaFolderTreeNode", !0);
-			return S(), d("div", null, [f("div", {
+		return (n, r) => {
+			let i = S("MediaFolderTreeNode", !0);
+			return v(), s("div", null, [c("div", {
 				class: "tpl:group tpl:flex tpl:w-full tpl:items-center tpl:gap-1 tpl:py-1.5 tpl:pr-2 tpl:text-left tpl:text-xs tpl:transition-all tpl:duration-150",
-				style: b({
-					paddingLeft: `${e.depth * 16 + 8}px`,
-					backgroundColor: x.value ? "var(--tpl-bg-active)" : "transparent",
-					color: x.value ? "var(--tpl-primary)" : "var(--tpl-text)"
+				style: g({
+					paddingLeft: `${t.depth * 16 + 8}px`,
+					backgroundColor: O.value ? "var(--tpl-bg-active)" : "transparent",
+					color: O.value ? "var(--tpl-primary)" : "var(--tpl-text)"
 				})
 			}, [
-				_.value || h.value ? (S(), d("button", {
+				w.value || _.value ? (v(), s("button", {
 					key: 0,
 					class: "tpl:flex tpl:size-4 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
-					onClick: F(M, ["stop"])
-				}, [m(k(L), {
-					class: y(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-90": O.value }]),
+					onClick: M(I, ["stop"])
+				}, [u(E(P), {
+					class: h(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-90": N.value }]),
 					size: 10,
 					"stroke-width": 2
-				}, null, 8, ["class"])])) : (S(), d("span", pt)),
-				f("button", {
+				}, null, 8, ["class"])])) : (v(), s("span", lt)),
+				c("button", {
 					class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-1.5",
-					onClick: n[0] ||= (t) => r("navigate", e.folder.id)
-				}, [m(k(B), {
+					onClick: r[0] ||= (e) => l("navigate", t.folder.id)
+				}, [u(E(L), {
 					class: "tpl:shrink-0",
 					size: 14,
 					"stroke-width": 1.5
-				}), c.value ? u("", !0) : (S(), d("span", mt, D(e.folder.name), 1))]),
-				c.value ? N((S(), d("input", {
+				}), p.value ? o("", !0) : (v(), s("span", ut, C(t.folder.name), 1))]),
+				p.value ? A((v(), s("input", {
 					key: 2,
-					"onUpdate:modelValue": n[1] ||= (e) => p.value = e,
+					"onUpdate:modelValue": r[1] ||= (e) => m.value = e,
 					type: "text",
 					class: "tpl:min-w-0 tpl:flex-1 tpl:rounded tpl:border tpl:px-1.5 tpl:py-0.5 tpl:text-xs tpl:outline-none",
 					style: {
@@ -1012,56 +950,64 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 						color: "var(--tpl-text)"
 					},
 					autofocus: "",
-					onKeydown: [P(R, ["enter"]), P(z, ["escape"])],
-					onBlur: R,
-					onClick: n[2] ||= F(() => {}, ["stop"])
-				}, null, 544)), [[A, p.value]]) : u("", !0),
-				c.value ? u("", !0) : (S(), d("span", ht, [
-					v.value ? (S(), d("button", {
+					onKeydown: [j(z, ["enter"]), j(B, ["escape"])],
+					onBlur: z,
+					onClick: r[2] ||= M(() => {}, ["stop"])
+				}, null, 544)), [[D, m.value]]) : o("", !0),
+				p.value ? o("", !0) : (v(), s("span", dt, [
+					T.value && t.canCreateFolder ? (v(), s("button", {
 						key: 0,
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
-						title: k(a).mediaLibrary.addSubfolder,
-						onClick: F(V, ["stop"])
-					}, [m(k(q), {
+						title: E(d).mediaLibrary.addSubfolder,
+						onClick: M(V, ["stop"])
+					}, [u(E(W), {
 						size: 12,
 						"stroke-width": 2
-					})], 8, gt)) : u("", !0),
-					f("button", {
+					})], 8, ft)) : o("", !0),
+					t.canRenameFolder ? (v(), s("button", {
+						key: 1,
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
-						title: k(a).mediaLibrary.renameFolder,
-						onClick: F(I, ["stop"])
-					}, [m(k(K), {
+						title: E(d).mediaLibrary.renameFolder,
+						onClick: M(R, ["stop"])
+					}, [u(E(U), {
 						size: 12,
 						"stroke-width": 2
-					})], 8, _t),
-					f("button", {
+					})], 8, pt)) : o("", !0),
+					t.canDeleteFolder ? (v(), s("button", {
+						key: 2,
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
-						onClick: n[3] ||= F((t) => r("deleteFolder", e.folder.id), ["stop"])
-					}, [m(k(X), {
+						onClick: r[3] ||= M((e) => l("deleteFolder", t.folder.id), ["stop"])
+					}, [u(E(te), {
 						size: 12,
 						"stroke-width": 2,
 						style: { color: "var(--tpl-danger)" }
-					})])
+					})])) : o("", !0)
 				]))
-			], 4), O.value ? (S(), d("div", vt, [(S(!0), d(i, null, T(e.folder.children, (t) => (S(), l(o, {
-				key: t.id,
-				folder: t,
-				"current-folder-id": e.currentFolderId,
-				depth: e.depth + 1,
-				onNavigate: n[4] ||= (e) => r("navigate", e),
-				onCreateFolder: n[5] ||= (e, t) => r("createFolder", e, t),
-				onRenameFolder: n[6] ||= (e, t) => r("renameFolder", e, t),
-				onDeleteFolder: n[7] ||= (e) => r("deleteFolder", e)
+			], 4), N.value ? (v(), s("div", mt, [(v(!0), s(e, null, x(t.folder.children, (e) => (v(), a(i, {
+				key: e.id,
+				folder: e,
+				"current-folder-id": t.currentFolderId,
+				depth: t.depth + 1,
+				"can-create-folder": t.canCreateFolder,
+				"can-rename-folder": t.canRenameFolder,
+				"can-delete-folder": t.canDeleteFolder,
+				onNavigate: r[4] ||= (e) => l("navigate", e),
+				onCreateFolder: r[5] ||= (e, t) => l("createFolder", e, t),
+				onRenameFolder: r[6] ||= (e, t) => l("renameFolder", e, t),
+				onDeleteFolder: r[7] ||= (e) => l("deleteFolder", e)
 			}, null, 8, [
 				"folder",
 				"current-folder-id",
-				"depth"
-			]))), 128)), h.value ? (S(), d("div", {
+				"depth",
+				"can-create-folder",
+				"can-rename-folder",
+				"can-delete-folder"
+			]))), 128)), _.value ? (v(), s("div", {
 				key: 0,
-				style: b({ paddingLeft: `${(e.depth + 1) * 16 + 8}px` }),
+				style: g({ paddingLeft: `${(t.depth + 1) * 16 + 8}px` }),
 				class: "tpl:py-1.5 tpl:pr-2"
-			}, [N(f("input", {
-				"onUpdate:modelValue": n[8] ||= (e) => g.value = e,
+			}, [A(c("input", {
+				"onUpdate:modelValue": r[8] ||= (e) => y.value = e,
 				type: "text",
 				class: "tpl:w-full tpl:rounded tpl:border tpl:px-2 tpl:py-1 tpl:text-xs tpl:outline-none",
 				style: {
@@ -1069,23 +1015,29 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 					"background-color": "var(--tpl-bg)",
 					color: "var(--tpl-text)"
 				},
-				placeholder: k(a).mediaLibrary.subfolderName,
+				placeholder: E(d).mediaLibrary.subfolderName,
 				autofocus: "",
-				onKeydown: [P(H, ["enter"]), P(U, ["escape"])],
+				onKeydown: [j(H, ["enter"]), j(G, ["escape"])],
 				onBlur: H
-			}, null, 40, yt), [[A, g.value]])], 4)) : u("", !0)])) : u("", !0)]);
+			}, null, 40, ht), [[D, y.value]])], 4)) : o("", !0)])) : o("", !0)]);
 		};
 	}
-}), xt = { class: "tpl:flex tpl:h-full tpl:flex-col tpl:overflow-y-auto" }, St = {
+}), _t = {
+	"data-testid": "media-folder-tree",
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:overflow-y-auto"
+}, vt = {
 	key: 0,
 	class: "tpl:px-3 tpl:py-2"
-}, Ct = ["placeholder"], wt = /* @__PURE__ */ h({
+}, yt = ["placeholder"], bt = /* @__PURE__ */ d({
 	__name: "MediaFolderTree",
 	props: {
 		folders: {},
 		currentFolderId: {},
 		viewMode: {},
-		hasFrequentlyUsed: { type: Boolean }
+		hasFrequentlyUsed: { type: Boolean },
+		canCreateFolder: { type: Boolean },
+		canRenameFolder: { type: Boolean },
+		canDeleteFolder: { type: Boolean }
 	},
 	emits: [
 		"navigate",
@@ -1094,41 +1046,50 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 		"deleteFolder",
 		"showFrequentlyUsed"
 	],
-	setup(e, { emit: t }) {
-		let n = t, { t: r } = Z(), a = w(!1), o = w("");
-		function s() {
-			a.value = !0, o.value = "";
+	setup(t, { emit: n }) {
+		let r = n, { t: i } = Q(), d = b(!1), f = b("");
+		function p() {
+			d.value = !0, f.value = "";
 		}
-		function c() {
-			o.value.trim() && n("createFolder", o.value.trim()), a.value = !1, o.value = "";
+		function m() {
+			f.value.trim() && r("createFolder", f.value.trim()), d.value = !1, f.value = "";
 		}
 		function h() {
-			a.value = !1, o.value = "";
+			d.value = !1, f.value = "";
 		}
-		return (t, g) => (S(), d("div", xt, [
-			f("button", {
+		return (n, _) => (v(), s("div", _t, [
+			c("button", {
 				class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-2 tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
-				style: b({
-					backgroundColor: e.viewMode === "files" && e.currentFolderId === null ? "var(--tpl-bg-active)" : "transparent",
-					color: e.viewMode === "files" && e.currentFolderId === null ? "var(--tpl-primary)" : "var(--tpl-text)"
+				style: g({
+					backgroundColor: t.viewMode === "files" && t.currentFolderId === null ? "var(--tpl-bg-active)" : "transparent",
+					color: t.viewMode === "files" && t.currentFolderId === null ? "var(--tpl-primary)" : "var(--tpl-text)"
 				}),
-				onClick: g[0] ||= (e) => n("navigate", null)
-			}, [m(k(z), {
+				onClick: _[0] ||= (e) => r("navigate", null)
+			}, [u(E(I), {
 				size: 14,
 				"stroke-width": 1.5
-			}), p(" " + D(k(r).mediaLibrary.allFiles), 1)], 4),
-			(S(!0), d(i, null, T(e.folders, (t) => (S(), l(bt, {
-				key: t.id,
-				folder: t,
-				"current-folder-id": e.currentFolderId,
+			}), l(" " + C(E(i).mediaLibrary.allFiles), 1)], 4),
+			(v(!0), s(e, null, x(t.folders, (e) => (v(), a(gt, {
+				key: e.id,
+				folder: e,
+				"current-folder-id": t.currentFolderId,
 				depth: 0,
-				onNavigate: g[1] ||= (e) => n("navigate", e),
-				onCreateFolder: g[2] ||= (e, t) => n("createFolder", e, t),
-				onRenameFolder: g[3] ||= (e, t) => n("renameFolder", e, t),
-				onDeleteFolder: g[4] ||= (e) => n("deleteFolder", e)
-			}, null, 8, ["folder", "current-folder-id"]))), 128)),
-			a.value ? (S(), d("div", St, [N(f("input", {
-				"onUpdate:modelValue": g[5] ||= (e) => o.value = e,
+				"can-create-folder": t.canCreateFolder,
+				"can-rename-folder": t.canRenameFolder,
+				"can-delete-folder": t.canDeleteFolder,
+				onNavigate: _[1] ||= (e) => r("navigate", e),
+				onCreateFolder: _[2] ||= (e, t) => r("createFolder", e, t),
+				onRenameFolder: _[3] ||= (e, t) => r("renameFolder", e, t),
+				onDeleteFolder: _[4] ||= (e) => r("deleteFolder", e)
+			}, null, 8, [
+				"folder",
+				"current-folder-id",
+				"can-create-folder",
+				"can-rename-folder",
+				"can-delete-folder"
+			]))), 128)),
+			d.value ? (v(), s("div", vt, [A(c("input", {
+				"onUpdate:modelValue": _[5] ||= (e) => f.value = e,
 				type: "text",
 				class: "tpl:w-full tpl:rounded tpl:border tpl:px-2 tpl:py-1 tpl:text-xs tpl:outline-none",
 				style: {
@@ -1136,37 +1097,38 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 					"background-color": "var(--tpl-bg)",
 					color: "var(--tpl-text)"
 				},
-				placeholder: k(r).mediaLibrary.folderName,
+				placeholder: E(i).mediaLibrary.folderName,
 				autofocus: "",
-				onKeydown: [P(c, ["enter"]), P(h, ["escape"])],
-				onBlur: c
-			}, null, 40, Ct), [[A, o.value]])])) : u("", !0),
-			a.value ? u("", !0) : (S(), d("button", {
+				onKeydown: [j(m, ["enter"]), j(h, ["escape"])],
+				onBlur: m
+			}, null, 40, yt), [[D, f.value]])])) : o("", !0),
+			!d.value && t.canCreateFolder ? (v(), s("button", {
 				key: 1,
 				class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-2 tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:transition-all tpl:duration-150",
 				style: { color: "var(--tpl-text-muted)" },
-				onClick: s
-			}, [m(k(q), {
+				onClick: p
+			}, [u(E(W), {
 				size: 14,
 				"stroke-width": 1.5
-			}), p(" " + D(k(r).mediaLibrary.newFolder), 1)])),
-			g[7] ||= f("div", { class: "tpl:flex-1" }, null, -1),
-			e.hasFrequentlyUsed ? (S(), d("button", {
+			}), l(" " + C(E(i).mediaLibrary.newFolder), 1)])) : o("", !0),
+			_[7] ||= c("div", { class: "tpl:flex-1" }, null, -1),
+			t.hasFrequentlyUsed ? (v(), s("button", {
 				key: 2,
+				"data-testid": "media-frequently-used",
 				class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-2 tpl:border-t tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
-				style: b({
+				style: g({
 					borderColor: "var(--tpl-border)",
-					backgroundColor: e.viewMode === "frequently-used" ? "var(--tpl-bg-active)" : "transparent",
-					color: e.viewMode === "frequently-used" ? "var(--tpl-primary)" : "var(--tpl-text)"
+					backgroundColor: t.viewMode === "frequently-used" ? "var(--tpl-bg-active)" : "transparent",
+					color: t.viewMode === "frequently-used" ? "var(--tpl-primary)" : "var(--tpl-text)"
 				}),
-				onClick: g[6] ||= (e) => n("showFrequentlyUsed")
-			}, [m(k(ee), {
+				onClick: _[6] ||= (e) => r("showFrequentlyUsed")
+			}, [u(E(K), {
 				size: 14,
 				"stroke-width": 1.5
-			}), p(" " + D(k(r).mediaLibrary.frequentlyUsed), 1)], 4)) : u("", !0)
+			}), l(" " + C(E(i).mediaLibrary.frequentlyUsed), 1)], 4)) : o("", !0)
 		]));
 	}
-}), Tt = { class: "tpl:flex tpl:aspect-square tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2" }, Et = /* @__PURE__ */ h({
+}), xt = { class: "tpl:flex tpl:aspect-square tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2" }, St = /* @__PURE__ */ d({
 	__name: "MediaFileIcon",
 	props: { mimeType: {} },
 	setup(e) {
@@ -1261,13 +1223,13 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 				bgColor: "#f0fdfa",
 				icon: "audio"
 			}
-		}, r = {
+		}, i = {
 			label: "FILE",
 			color: "#6b7280",
 			bgColor: "#f9fafb",
 			icon: "document"
-		}, i = s(() => n[t.mimeType] ?? r);
-		return (e, t) => (S(), d("div", Tt, [i.value.icon === "document" ? (S(), d("svg", {
+		}, a = r(() => n[t.mimeType] ?? i);
+		return (e, t) => (v(), s("div", xt, [a.value.icon === "document" ? (v(), s("svg", {
 			key: 0,
 			width: "60",
 			height: "60",
@@ -1275,23 +1237,23 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 			fill: "none",
 			stroke: "currentColor",
 			"stroke-width": "1.5",
-			style: b({ color: i.value.color })
+			style: g({ color: a.value.color })
 		}, [...t[0] ||= [
-			f("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }, null, -1),
-			f("polyline", { points: "14 2 14 8 20 8" }, null, -1),
-			f("line", {
+			c("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }, null, -1),
+			c("polyline", { points: "14 2 14 8 20 8" }, null, -1),
+			c("line", {
 				x1: "8",
 				y1: "13",
 				x2: "16",
 				y2: "13"
 			}, null, -1),
-			f("line", {
+			c("line", {
 				x1: "8",
 				y1: "17",
 				x2: "12",
 				y2: "17"
 			}, null, -1)
-		]], 4)) : i.value.icon === "video" ? (S(), d("svg", {
+		]], 4)) : a.value.icon === "video" ? (v(), s("svg", {
 			key: 1,
 			width: "40",
 			height: "40",
@@ -1299,18 +1261,18 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 			fill: "none",
 			stroke: "currentColor",
 			"stroke-width": "1.5",
-			style: b({ color: i.value.color })
-		}, [...t[1] ||= [f("rect", {
+			style: g({ color: a.value.color })
+		}, [...t[1] ||= [c("rect", {
 			x: "2",
 			y: "4",
 			width: "20",
 			height: "16",
 			rx: "2"
-		}, null, -1), f("polygon", {
+		}, null, -1), c("polygon", {
 			points: "10,8 16,12 10,16",
 			fill: "currentColor",
 			stroke: "none"
-		}, null, -1)]], 4)) : (S(), d("svg", {
+		}, null, -1)]], 4)) : (v(), s("svg", {
 			key: 2,
 			width: "40",
 			height: "40",
@@ -1318,28 +1280,28 @@ var je = ["data-tpl-theme"], Me = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ne
 			fill: "none",
 			stroke: "currentColor",
 			"stroke-width": "1.5",
-			style: b({ color: i.value.color })
+			style: g({ color: a.value.color })
 		}, [...t[2] ||= [
-			f("path", { d: "M9 18V5l12-2v13" }, null, -1),
-			f("circle", {
+			c("path", { d: "M9 18V5l12-2v13" }, null, -1),
+			c("circle", {
 				cx: "6",
 				cy: "18",
 				r: "3"
 			}, null, -1),
-			f("circle", {
+			c("circle", {
 				cx: "18",
 				cy: "16",
 				r: "3"
 			}, null, -1)
-		]], 4)), f("span", {
+		]], 4)), c("span", {
 			class: "tpl:text-xs tpl:font-bold tpl:tracking-wider",
-			style: b({ color: i.value.color })
-		}, D(i.value.label), 5)]));
+			style: g({ color: a.value.color })
+		}, C(a.value.label), 5)]));
 	}
 });
 //#endregion
 //#region src/utils/formatAbsoluteDate.ts
-function Dt(e, t, n) {
+function Ct(e, t, n) {
 	let r = new Date(e);
 	if (Number.isNaN(r.getTime())) return "";
 	let i = t?.trim().replace(/_/g, "-") || void 0;
@@ -1351,48 +1313,56 @@ function Dt(e, t, n) {
 }
 //#endregion
 //#region src/components/media/MediaGrid.vue?vue&type=script&setup=true&lang.ts
-var Ot = { class: "tpl:p-4" }, kt = {
+var wt = { class: "tpl:p-4" }, Tt = {
 	key: 1,
 	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-16"
-}, At = {
+}, Et = {
 	class: "tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, jt = {
+}, Dt = {
 	key: 2,
 	class: "tpl:grid tpl:grid-cols-4 tpl:gap-3"
-}, Mt = ["onClick"], Nt = { class: "tpl:aspect-square" }, Pt = ["src", "alt"], Ft = { class: "tpl:px-2 tpl:py-1.5" }, It = {
+}, Ot = [
+	"data-media-id",
+	"onClick",
+	"onDblclick"
+], kt = { class: "tpl:aspect-square" }, At = ["src", "alt"], jt = { class: "tpl:px-2 tpl:py-1.5" }, Mt = {
 	class: "tpl:truncate tpl:text-[10px] tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Lt = {
+}, Nt = {
 	class: "tpl:flex tpl:justify-between tpl:text-[9px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, Rt = { key: 0 }, zt = { class: "tpl:absolute tpl:top-1.5 tpl:left-1.5 tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Bt = ["title", "onClick"], Vt = ["title", "onClick"], Ht = {
+}, Pt = { key: 0 }, Ft = { key: 1 }, It = { class: "tpl:absolute tpl:top-1.5 tpl:left-1.5 tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Lt = ["title", "onClick"], Rt = ["title", "onClick"], zt = {
 	key: 0,
 	class: "tpl:absolute tpl:top-1.5 tpl:right-1.5 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-white",
 	style: { "background-color": "var(--tpl-primary)" }
-}, Ut = {
+}, Bt = {
 	key: 3,
 	class: "tpl:flex tpl:flex-col tpl:gap-1"
-}, Wt = ["onClick"], Gt = {
+}, Vt = [
+	"data-media-id",
+	"onClick",
+	"onDblclick"
+], Ht = {
 	class: "tpl:size-10 tpl:shrink-0 tpl:overflow-hidden tpl:rounded",
 	style: { "background-color": "var(--tpl-bg-hover)" }
-}, Kt = ["src", "alt"], qt = {
+}, Ut = ["src", "alt"], Wt = {
 	key: 1,
 	class: "tpl-list-icon tpl:size-full"
-}, Jt = { class: "tpl:min-w-0 tpl:flex-1" }, Yt = {
+}, Gt = { class: "tpl:min-w-0 tpl:flex-1" }, Kt = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Xt = {
+}, qt = {
 	class: "tpl:text-[10px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, Zt = { class: "tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Qt = ["title", "onClick"], $t = ["title", "onClick"], en = {
+}, Jt = { class: "tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Yt = ["title", "onClick"], Xt = ["title", "onClick"], Zt = {
 	key: 0,
 	class: "tpl:flex tpl:size-5 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-white",
 	style: { "background-color": "var(--tpl-primary)" }
-}, tn = {
+}, Qt = {
 	key: 4,
 	class: "tpl:flex tpl:justify-center tpl:py-4"
-}, nn = /*#__PURE__*/ dt(/* @__PURE__ */ h({
+}, $t = /*#__PURE__*/ st(/* @__PURE__ */ d({
 	__name: "MediaGrid",
 	props: {
 		items: {},
@@ -1400,158 +1370,202 @@ var Ot = { class: "tpl:p-4" }, kt = {
 		isLoading: { type: Boolean },
 		hasMore: { type: Boolean },
 		accept: {},
-		layout: {}
+		layout: {},
+		searchQuery: {},
+		canUpdate: { type: Boolean },
+		canReplace: { type: Boolean }
 	},
 	emits: [
 		"select",
 		"toggle",
 		"loadMore",
 		"edit",
-		"replace"
+		"replace",
+		"confirm"
 	],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { isAcceptedMimeType: a, isImageMimeType: o } = Q();
-		function s(e) {
-			return !n.accept || n.accept.length === 0 || a(e.mime_type, n.accept);
+	setup(t, { emit: n }) {
+		let r = t, i = n, { isAcceptedMimeType: d, isImageMimeType: f } = $();
+		function m(e) {
+			return e.mimeType ?? "";
+		}
+		function _(e) {
+			return e.thumbnailUrl ?? e.url;
+		}
+		function y(e) {
+			return !r.accept || r.accept.length === 0 || d(m(e), r.accept);
 		}
-		function c(e) {
-			r("select", e);
+		function S(e) {
+			return r.canUpdate === !0 && e.canUpdate !== !1;
 		}
-		let { t: h } = Z(), g = _(ye, null), v = w(null);
-		ue(v, ([{ isIntersecting: e }]) => {
-			e && n.hasMore && !n.isLoading && r("loadMore");
+		function w(e) {
+			return r.canReplace === !0 && e.canUpdate !== !1;
+		}
+		function T(e, t) {
+			if (t.metaKey || t.ctrlKey) {
+				i("toggle", e.id);
+				return;
+			}
+			i("select", e);
+		}
+		function D(e) {
+			y(e) && i("confirm", e);
+		}
+		let { t: O } = Q(), k = p(me, null), A = b(null);
+		X(A, ([{ isIntersecting: e }]) => {
+			e && r.hasMore && !r.isLoading && i("loadMore");
 		}, { threshold: .1 });
-		function x(e) {
+		function j(e) {
 			return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : `${(e / 1048576).toFixed(1)} MB`;
 		}
-		function C(e) {
-			return Dt(e, g?.value, {
+		function P(e) {
+			return Ct(e, k?.value, {
 				year: "numeric",
 				month: "short",
 				day: "numeric"
 			});
 		}
-		return (t, n) => (S(), d("div", Ot, [
-			e.isLoading && e.items.length === 0 ? (S(), d("div", {
+		return (n, r) => (v(), s("div", wt, [
+			t.isLoading && t.items.length === 0 ? (v(), s("div", {
 				key: 0,
-				class: y(e.layout === "list" ? "tpl:flex tpl:flex-col tpl:gap-1" : "tpl:grid tpl:grid-cols-4 tpl:gap-3")
-			}, [(S(), d(i, null, T(8, (t) => f("div", {
-				key: t,
-				class: y(["tpl-pulse tpl:rounded-lg", e.layout === "list" ? "tpl:h-12" : "tpl:aspect-square"]),
-				style: { "background-color": "var(--tpl-bg-hover)" }
-			}, null, 2)), 64))], 2)) : e.items.length === 0 ? (S(), d("div", kt, [m(k(z), {
+				role: "status",
+				"aria-busy": "true",
+				class: h(t.layout === "list" ? "tpl:flex tpl:flex-col tpl:gap-1" : "tpl:grid tpl:grid-cols-4 tpl:gap-3")
+			}, [(v(), s(e, null, x(8, (e) => c("div", {
+				key: e,
+				class: h(["tpl-pulse tpl:rounded-lg", t.layout === "list" ? "tpl:h-12" : "tpl:aspect-square"]),
+				style: { "background-color": "var(--tpl-bg-hover)" },
+				"aria-hidden": "true"
+			}, null, 2)), 64))], 2)) : t.items.length === 0 ? (v(), s("div", Tt, [u(E(I), {
 				class: "tpl:mb-3",
 				size: 40,
 				"stroke-width": 1,
 				style: { color: "var(--tpl-text-dim)" }
-			}), f("p", At, D(k(h).mediaLibrary.noFiles), 1)])) : e.layout === "list" ? (S(), d("div", Ut, [(S(!0), d(i, null, T(e.items, (t) => (S(), d("div", {
-				key: t.id,
-				class: y(["tpl-media-list-item tpl:group tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-3 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:transition-all tpl:duration-150", [!s(t) && !e.selectedIds.has(t.id) ? "tpl:opacity-60" : ""]]),
-				style: b({ backgroundColor: e.selectedIds.has(t.id) ? "var(--tpl-bg-hover)" : "transparent" }),
-				onClick: (e) => c(t)
+			}), c("p", Et, C(t.searchQuery ? E(O).mediaLibrary.noSearchResults : E(O).mediaLibrary.noFiles), 1)])) : t.layout === "list" ? (v(), s("div", Bt, [(v(!0), s(e, null, x(t.items, (n) => (v(), s("div", {
+				key: n.id,
+				"data-testid": "media-library-item",
+				class: h(["tpl-media-list-item tpl:group tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-3 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:transition-all tpl:duration-150", [!y(n) && !t.selectedIds.has(n.id) ? "tpl:opacity-60" : ""]]),
+				"data-media-id": n.id,
+				style: g({ backgroundColor: t.selectedIds.has(n.id) ? "var(--tpl-bg-hover)" : "transparent" }),
+				onClick: (e) => T(n, e),
+				onDblclick: (e) => D(n)
 			}, [
-				f("div", Gt, [k(o)(t.mime_type) ? (S(), d("img", {
+				c("div", Ht, [E(f)(m(n)) ? (v(), s("img", {
 					key: 0,
-					src: t.small_url || t.url,
-					alt: t.filename,
+					src: _(n),
+					alt: n.filename || n.url,
 					class: "tpl:size-full tpl:object-cover",
 					loading: "lazy"
-				}, null, 8, Kt)) : (S(), d("div", qt, [m(Et, { "mime-type": t.mime_type }, null, 8, ["mime-type"])]))]),
-				f("div", Jt, [f("p", Yt, D(t.filename), 1), f("p", Xt, [p(D(x(t.size)) + " · " + D(C(t.created_at)) + " ", 1), k(o)(t.mime_type) && t.width && t.height ? (S(), d(i, { key: 0 }, [p(" · " + D(t.width) + "×" + D(t.height), 1)], 64)) : u("", !0)])]),
-				f("div", Zt, [f("button", {
+				}, null, 8, Ut)) : (v(), s("div", Wt, [u(St, { "mime-type": m(n) }, null, 8, ["mime-type"])]))]),
+				c("div", Gt, [c("p", Kt, C(n.filename || n.url), 1), c("p", qt, [
+					n.size == null ? o("", !0) : (v(), s(e, { key: 0 }, [l(C(j(n.size)), 1)], 64)),
+					n.createdAt ? (v(), s(e, { key: 1 }, [n.size == null ? o("", !0) : (v(), s(e, { key: 0 }, [l(" · ")], 64)), l(" " + C(P(n.createdAt)), 1)], 64)) : o("", !0),
+					E(f)(m(n)) && n.width && n.height ? (v(), s(e, { key: 2 }, [l(" · " + C(n.width) + "×" + C(n.height), 1)], 64)) : o("", !0)
+				])]),
+				c("div", Jt, [S(n) ? (v(), s("button", {
+					key: 0,
+					"data-testid": "media-edit",
 					class: "tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded",
 					style: { color: "var(--tpl-text-muted)" },
-					title: k(h).mediaLibrary.editFile,
-					onClick: F((e) => r("edit", t), ["stop"])
-				}, [m(k(K), {
+					title: E(O).mediaLibrary.editFile,
+					onClick: M((e) => i("edit", n), ["stop"])
+				}, [u(E(U), {
 					size: 12,
 					"stroke-width": 2
-				})], 8, Qt), f("button", {
+				})], 8, Yt)) : o("", !0), w(n) ? (v(), s("button", {
+					key: 1,
+					"data-testid": "media-replace",
 					class: "tpl:flex tpl:size-6 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded",
 					style: { color: "var(--tpl-text-muted)" },
-					title: k(h).mediaLibrary.replaceFile,
-					onClick: F((e) => r("replace", t), ["stop"])
-				}, [m(k(J), {
+					title: E(O).mediaLibrary.replaceFile,
+					onClick: M((e) => i("replace", n), ["stop"])
+				}, [u(E(G), {
 					size: 12,
 					"stroke-width": 2
-				})], 8, $t)]),
-				e.selectedIds.has(t.id) ? (S(), d("div", en, [m(k(I), {
+				})], 8, Xt)) : o("", !0)]),
+				t.selectedIds.has(n.id) ? (v(), s("div", Zt, [u(E(N), {
 					size: 12,
 					"stroke-width": 3
-				})])) : u("", !0)
-			], 14, Wt))), 128))])) : (S(), d("div", jt, [(S(!0), d(i, null, T(e.items, (t) => (S(), d("div", {
-				key: t.id,
-				class: y(["tpl-media-item tpl:group tpl:relative tpl:overflow-hidden tpl:rounded-lg tpl:border-2 tpl:transition-all tpl:duration-150", [
+				})])) : o("", !0)
+			], 46, Vt))), 128))])) : (v(), s("div", Dt, [(v(!0), s(e, null, x(t.items, (e) => (v(), s("div", {
+				key: e.id,
+				"data-testid": "media-library-item",
+				class: h(["tpl-media-item tpl:group tpl:relative tpl:overflow-hidden tpl:rounded-lg tpl:border-2 tpl:transition-all tpl:duration-150", [
 					"tpl:cursor-pointer",
-					!s(t) && !e.selectedIds.has(t.id) ? "tpl:opacity-60" : "",
-					e.selectedIds.has(t.id) ? "tpl-media-item--selected" : ""
+					!y(e) && !t.selectedIds.has(e.id) ? "tpl:opacity-60" : "",
+					t.selectedIds.has(e.id) ? "tpl-media-item--selected" : ""
 				]]),
-				style: b({
-					borderColor: e.selectedIds.has(t.id) ? "var(--tpl-primary)" : "transparent",
-					backgroundColor: !s(t) && !e.selectedIds.has(t.id) ? "var(--tpl-bg)" : "var(--tpl-bg-hover)"
+				"data-media-id": e.id,
+				style: g({
+					borderColor: t.selectedIds.has(e.id) ? "var(--tpl-primary)" : "transparent",
+					backgroundColor: !y(e) && !t.selectedIds.has(e.id) ? "var(--tpl-bg)" : "var(--tpl-bg-hover)"
 				}),
-				onClick: (e) => c(t)
+				onClick: (t) => T(e, t),
+				onDblclick: (t) => D(e)
 			}, [
-				f("div", Nt, [k(o)(t.mime_type) ? (S(), d("img", {
+				c("div", kt, [E(f)(m(e)) ? (v(), s("img", {
 					key: 0,
-					src: t.small_url || t.url,
-					alt: t.filename,
+					src: _(e),
+					alt: e.filename || e.url,
 					class: "tpl:size-full tpl:object-cover",
 					loading: "lazy"
-				}, null, 8, Pt)) : (S(), l(Et, {
+				}, null, 8, At)) : (v(), a(St, {
 					key: 1,
-					"mime-type": t.mime_type
+					"mime-type": m(e)
 				}, null, 8, ["mime-type"]))]),
-				f("div", Ft, [f("p", It, D(t.filename), 1), f("p", Lt, [f("span", null, D(x(t.size)), 1), k(o)(t.mime_type) && t.width && t.height ? (S(), d("span", Rt, D(t.width) + "×" + D(t.height), 1)) : u("", !0)])]),
-				f("div", zt, [f("button", {
+				c("div", jt, [c("p", Mt, C(e.filename || e.url), 1), c("p", Nt, [e.size == null ? o("", !0) : (v(), s("span", Pt, C(j(e.size)), 1)), E(f)(m(e)) && e.width && e.height ? (v(), s("span", Ft, C(e.width) + "×" + C(e.height), 1)) : o("", !0)])]),
+				c("div", It, [S(e) ? (v(), s("button", {
+					key: 0,
+					"data-testid": "media-edit",
 					class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-white",
 					style: { "background-color": "rgba(0, 0, 0, 0.6)" },
-					title: k(h).mediaLibrary.editFile,
-					onClick: F((e) => r("edit", t), ["stop"])
-				}, [m(k(K), {
+					title: E(O).mediaLibrary.editFile,
+					onClick: M((t) => i("edit", e), ["stop"])
+				}, [u(E(U), {
 					size: 11,
 					"stroke-width": 2
-				})], 8, Bt), f("button", {
+				})], 8, Lt)) : o("", !0), w(e) ? (v(), s("button", {
+					key: 1,
+					"data-testid": "media-replace",
 					class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-white",
 					style: { "background-color": "rgba(0, 0, 0, 0.6)" },
-					title: k(h).mediaLibrary.replaceFile,
-					onClick: F((e) => r("replace", t), ["stop"])
-				}, [m(k(J), {
+					title: E(O).mediaLibrary.replaceFile,
+					onClick: M((t) => i("replace", e), ["stop"])
+				}, [u(E(G), {
 					size: 11,
 					"stroke-width": 2
-				})], 8, Vt)]),
-				e.selectedIds.has(t.id) ? (S(), d("div", Ht, [m(k(I), {
+				})], 8, Rt)) : o("", !0)]),
+				t.selectedIds.has(e.id) ? (v(), s("div", zt, [u(E(N), {
 					size: 12,
 					"stroke-width": 3
-				})])) : u("", !0)
-			], 14, Mt))), 128))])),
-			f("div", {
+				})])) : o("", !0)
+			], 46, Ot))), 128))])),
+			c("div", {
 				ref_key: "sentinelRef",
-				ref: v,
+				ref: A,
 				class: "tpl:h-4"
 			}, null, 512),
-			e.isLoading && e.items.length > 0 ? (S(), d("div", tn, [m(k(W), {
+			t.isLoading && t.items.length > 0 ? (v(), s("div", Qt, [u(E(V), {
 				class: "tpl-spinner",
 				size: 20,
 				"stroke-width": 2,
 				style: { color: "var(--tpl-primary)" }
-			})])) : u("", !0)
+			})])) : o("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-5b4cc2c6"]]), rn = ["data-tpl-theme"], an = {
+}), [["__scopeId", "data-v-02bd861d"]]), en = ["data-tpl-theme"], tn = {
 	class: "tpl:max-h-[90%] tpl:w-full tpl:max-w-sm tpl:overflow-y-auto tpl:rounded-lg tpl:p-5 tpl:shadow-xl",
 	style: { "background-color": "var(--tpl-bg-elevated)" }
-}, on = {
+}, nn = {
 	class: "tpl:mb-4 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, sn = { class: "tpl:mb-3" }, cn = ["placeholder", "disabled"], ln = {
+}, rn = { class: "tpl:mb-3" }, an = ["placeholder", "disabled"], on = {
 	key: 0,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-danger)" }
-}, un = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, dn = ["disabled"], fn = ["disabled"], pn = {
+}, sn = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, cn = ["disabled"], ln = ["disabled"], un = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1.5"
-}, mn = { key: 1 }, hn = /* @__PURE__ */ h({
+}, dn = { key: 1 }, fn = /* @__PURE__ */ d({
 	__name: "MediaImportUrlModal",
 	props: {
 		visible: { type: Boolean },
@@ -1559,22 +1573,22 @@ var Ot = { class: "tpl:p-4" }, kt = {
 		error: {}
 	},
 	emits: ["import", "close"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Z(), s = _(ve, null), c = _(ge, w(null)), h = w("");
-		j(() => n.visible, (e) => {
-			e && (h.value = "");
+	setup(e, { emit: r }) {
+		let i = e, d = r, { t: f } = Q(), m = p(Z, null), g = p(fe, b(null)), _ = b("");
+		O(() => i.visible, (e) => {
+			e && (_.value = "");
 		});
-		function g() {
-			let e = h.value.trim();
-			e && !n.isImporting && r("import", e);
+		function y() {
+			let e = _.value.trim();
+			e && !i.isImporting && d("import", e);
 		}
-		function v() {
-			n.isImporting || r("close");
+		function x() {
+			i.isImporting || d("close");
 		}
-		function b(e) {
-			e.key === "Enter" && (e.preventDefault(), g()), e.key === "Escape" && v();
+		function S(e) {
+			e.key === "Enter" && (e.preventDefault(), y()), e.key === "Escape" && x();
 		}
-		return (t, n) => (S(), l(a, { to: k(c) || "body" }, [m(o, {
+		return (r, i) => (v(), a(t, { to: E(g) || "body" }, [u(n, {
 			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 			"enter-from-class": "tpl:opacity-0",
 			"enter-to-class": "tpl:opacity-100",
@@ -1582,17 +1596,17 @@ var Ot = { class: "tpl:p-4" }, kt = {
 			"leave-from-class": "tpl:opacity-100",
 			"leave-to-class": "tpl:opacity-0"
 		}, {
-			default: M(() => [e.visible ? (S(), d("div", {
+			default: k(() => [e.visible ? (v(), s("div", {
 				key: 0,
-				"data-tpl-theme": k(s),
-				class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
+				"data-tpl-theme": E(m),
+				class: "tpl tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
 				style: { "background-color": "var(--tpl-overlay)" },
-				onClick: F(v, ["self"]),
-				onKeydown: b
-			}, [f("div", an, [
-				f("h3", on, D(k(i).mediaLibrary.importFromUrl), 1),
-				f("div", sn, [N(f("input", {
-					"onUpdate:modelValue": n[0] ||= (e) => h.value = e,
+				onClick: M(x, ["self"]),
+				onKeydown: S
+			}, [c("div", tn, [
+				c("h3", nn, C(E(f).mediaLibrary.importFromUrl), 1),
+				c("div", rn, [A(c("input", {
+					"onUpdate:modelValue": i[0] ||= (e) => _.value = e,
 					type: "url",
 					class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
 					style: {
@@ -1600,59 +1614,59 @@ var Ot = { class: "tpl:p-4" }, kt = {
 						"background-color": "var(--tpl-bg)",
 						color: "var(--tpl-text)"
 					},
-					placeholder: k(i).mediaLibrary.importUrlPlaceholder,
+					placeholder: E(f).mediaLibrary.importUrlPlaceholder,
 					disabled: e.isImporting,
 					autofocus: ""
-				}, null, 8, cn), [[A, h.value]])]),
-				e.error ? (S(), d("p", ln, D(e.error), 1)) : u("", !0),
-				f("div", un, [f("button", {
-					class: y(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150", { "tpl:cursor-not-allowed tpl:opacity-50": e.isImporting }]),
+				}, null, 8, an), [[D, _.value]])]),
+				e.error ? (v(), s("p", on, C(e.error), 1)) : o("", !0),
+				c("div", sn, [c("button", {
+					class: h(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150", { "tpl:cursor-not-allowed tpl:opacity-50": e.isImporting }]),
 					style: {
 						"border-color": "var(--tpl-border)",
 						color: "var(--tpl-text)",
 						"background-color": "var(--tpl-bg)"
 					},
 					disabled: e.isImporting,
-					onClick: v
-				}, D(k(i).mediaLibrary.cancel), 11, dn), f("button", {
+					onClick: x
+				}, C(E(f).mediaLibrary.cancel), 11, cn), c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-white tpl:transition-all tpl:duration-150 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 					style: { background: "linear-gradient(\n                  135deg,\n                  var(--tpl-primary),\n                  var(--tpl-primary-hover)\n                )" },
-					disabled: !h.value.trim() || e.isImporting,
-					onClick: g
-				}, [e.isImporting ? (S(), d("span", pn, [m(k(W), {
+					disabled: !_.value.trim() || e.isImporting,
+					onClick: y
+				}, [e.isImporting ? (v(), s("span", un, [u(E(V), {
 					class: "tpl:animate-spin",
 					size: 12,
 					"stroke-width": 2
-				}), p(" " + D(k(i).mediaLibrary.importing), 1)])) : (S(), d("span", mn, D(k(i).mediaLibrary.import), 1))], 8, fn)])
-			])], 40, rn)) : u("", !0)]),
+				}), l(" " + C(E(f).mediaLibrary.importing), 1)])) : (v(), s("span", dn, C(E(f).mediaLibrary.import), 1))], 8, ln)])
+			])], 40, en)) : o("", !0)]),
 			_: 1
 		})], 8, ["to"]));
 	}
-}), gn = { class: "tpl:max-h-56 tpl:overflow-y-auto tpl:py-1" }, _n = ["disabled", "onClick"], vn = { class: "tpl:truncate" }, yn = {
+}), pn = { class: "tpl:max-h-56 tpl:overflow-y-auto tpl:py-1" }, mn = ["disabled", "onClick"], hn = { class: "tpl:truncate" }, gn = {
 	key: 0,
 	class: "tpl:shrink-0",
 	style: { color: "var(--tpl-text-dim)" }
-}, bn = /* @__PURE__ */ h({
+}, _n = /* @__PURE__ */ d({
 	__name: "MediaMovePicker",
 	props: {
 		folders: {},
 		currentFolderId: {}
 	},
 	emits: ["select", "close"],
-	setup(e, { emit: t }) {
-		let n = t, { t: r } = Z(), a = w(null);
-		function o(e, t = 0) {
+	setup(t, { emit: n }) {
+		let r = n, { t: i } = Q(), a = b(null);
+		function d(e, t = 0) {
 			let n = [];
 			for (let r of e) n.push({
 				id: r.id,
 				name: r.name,
 				depth: t
-			}), r.children?.length && n.push(...o(r.children, t + 1));
+			}), r.children.length && n.push(...d(r.children, t + 1));
 			return n;
 		}
-		return ie(a, () => {
-			n("close");
-		}), (t, s) => (S(), d("div", {
+		return J(a, () => {
+			r("close");
+		}), (n, f) => (v(), s("div", {
 			ref_key: "pickerRef",
 			ref: a,
 			class: "tpl:absolute tpl:bottom-full tpl:left-0 tpl:z-10 tpl:mb-2 tpl:w-56 tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:shadow-lg",
@@ -1660,193 +1674,139 @@ var Ot = { class: "tpl:p-4" }, kt = {
 				"border-color": "var(--tpl-border)",
 				"background-color": "var(--tpl-bg-elevated)"
 			}
-		}, [f("div", gn, [e.currentFolderId === null ? u("", !0) : (S(), d("button", {
+		}, [c("div", pn, [t.currentFolderId === null ? o("", !0) : (v(), s("button", {
 			key: 0,
 			class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-1.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors tpl:duration-100",
 			style: { color: "var(--tpl-text)" },
-			onClick: s[0] ||= (e) => n("select", null)
-		}, [m(k(z), {
+			onClick: f[0] ||= (e) => r("select", null)
+		}, [u(E(I), {
 			class: "tpl:shrink-0",
 			size: 14,
 			"stroke-width": 1.5
-		}), p(" " + D(k(r).mediaLibrary.moveToRoot), 1)])), (S(!0), d(i, null, T(o(e.folders), (t) => (S(), d("button", {
-			key: t.id,
+		}), l(" " + C(E(i).mediaLibrary.moveToRoot), 1)])), (v(!0), s(e, null, x(d(t.folders), (e) => (v(), s("button", {
+			key: e.id,
 			class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-1.5 tpl:py-1.5 tpl:pr-3 tpl:text-left tpl:text-xs tpl:transition-colors tpl:duration-100",
-			style: b({
-				paddingLeft: `${t.depth * 16 + 12}px`,
-				color: t.id === e.currentFolderId ? "var(--tpl-text-dim)" : "var(--tpl-text)",
-				opacity: t.id === e.currentFolderId ? .5 : 1
+			style: g({
+				paddingLeft: `${e.depth * 16 + 12}px`,
+				color: e.id === t.currentFolderId ? "var(--tpl-text-dim)" : "var(--tpl-text)",
+				opacity: e.id === t.currentFolderId ? .5 : 1
 			}),
-			disabled: t.id === e.currentFolderId,
-			onClick: (e) => n("select", t.id)
+			disabled: e.id === t.currentFolderId,
+			onClick: (t) => r("select", e.id)
 		}, [
-			m(k(B), {
+			u(E(L), {
 				class: "tpl:shrink-0",
 				size: 14,
 				"stroke-width": 1.5
 			}),
-			f("span", vn, D(t.name), 1),
-			t.id === e.currentFolderId ? (S(), d("span", yn, D(k(r).mediaLibrary.currentFolder), 1)) : u("", !0)
-		], 12, _n))), 128))])], 512));
+			c("span", hn, C(e.name), 1),
+			e.id === t.currentFolderId ? (v(), s("span", gn, C(E(i).mediaLibrary.currentFolder), 1)) : o("", !0)
+		], 12, mn))), 128))])], 512));
 	}
-}), xn = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Sn = ["src", "alt"], Cn = {
+}), vn = { class: "tpl:flex tpl:items-center tpl:gap-3" }, yn = ["src", "alt"], bn = {
 	key: 1,
 	class: "tpl:flex tpl:size-10 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:overflow-hidden tpl:rounded",
 	style: { border: "1px solid var(--tpl-border)" }
-}, wn = { class: "tpl:min-w-0 tpl:flex-1" }, Tn = {
+}, xn = { class: "tpl:min-w-0 tpl:flex-1" }, Sn = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, En = {
+}, Cn = {
 	class: "tpl:mt-0.5 tpl:text-[10px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, Dn = {
-	key: 2,
-	class: "tpl:shrink-0"
-}, On = {
-	class: "tpl:block tpl:text-[10px]",
-	style: { color: "var(--tpl-text-muted)" }
-}, kn = ["value"], An = ["value"], jn = /*#__PURE__*/ dt(/* @__PURE__ */ h({
+}, wn = /*#__PURE__*/ st(/* @__PURE__ */ d({
 	__name: "MediaPreviewPanel",
 	props: {
 		item: {},
-		folders: {},
-		selectedConversion: {}
+		folders: {}
 	},
-	emits: ["update:selectedConversion"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Z(), o = _(ye, null), { isImageMimeType: c } = Q(), l = s(() => {
-			if (!C.value || !n.item.conversions_generated) return [];
-			let e = [];
-			return n.item.small_url && e.push({
-				value: "small",
-				label: a.mediaLibrary.conversionSmall,
-				url: n.item.small_url
-			}), n.item.medium_url && e.push({
-				value: "medium",
-				label: a.mediaLibrary.conversionMedium,
-				url: n.item.medium_url
-			}), n.item.large_url && e.push({
-				value: "large",
-				label: a.mediaLibrary.conversionLarge,
-				url: n.item.large_url
-			}), e.push({
-				value: "original",
-				label: a.mediaLibrary.conversionOriginal,
-				url: n.item.url
-			}), e;
-		}), h = s(() => C.value && l.value.length > 1), g = s(() => {
-			if (!C.value) return null;
-			switch (n.selectedConversion) {
-				case "small": return n.item.small_url || n.item.url;
-				case "medium": return n.item.medium_url || n.item.url;
-				case "large": return n.item.large_url || n.item.url;
-				default: return n.item.url;
-			}
-		});
-		function v(e) {
-			let t = e.target;
-			r("update:selectedConversion", t.value);
-		}
-		function b(e, t, n = []) {
+	setup(t) {
+		let n = t, i = p(me, null), { isImageMimeType: a } = $();
+		function d(e, t, n = []) {
 			for (let r of e) {
 				let e = [...n, r.name];
 				if (r.id === t) return e;
-				if (r.children) {
-					let n = b(r.children, t, e);
+				if (r.children.length) {
+					let n = d(r.children, t, e);
 					if (n) return n;
 				}
 			}
 			return null;
 		}
-		let x = s(() => {
-			if (!n.item.folder_id || !n.folders) return null;
-			let e = b(n.folders, n.item.folder_id);
+		let f = r(() => {
+			if (!n.item.folderId || !n.folders) return null;
+			let e = d(n.folders, n.item.folderId);
 			return e ? e.join("/") : null;
-		}), C = s(() => c(n.item.mime_type));
-		function w(e) {
+		}), m = r(() => n.item.mimeType ?? ""), g = r(() => a(m.value));
+		function _(e) {
 			return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : `${(e / 1048576).toFixed(1)} MB`;
 		}
-		function E(e) {
-			return Dt(e, o?.value, {
+		function y(e) {
+			return Ct(e, i?.value, {
 				year: "numeric",
 				month: "short",
 				day: "numeric"
 			});
 		}
-		return (t, n) => (S(), d("div", xn, [
-			C.value ? (S(), d("img", {
-				key: 0,
-				src: g.value ?? void 0,
-				alt: e.item.alt_text || e.item.filename,
-				class: "tpl:size-10 tpl:shrink-0 tpl:rounded tpl:object-cover",
-				style: { border: "1px solid var(--tpl-border)" }
-			}, null, 8, Sn)) : (S(), d("div", Cn, [m(Et, {
-				"mime-type": e.item.mime_type,
-				class: "tpl-preview-icon"
-			}, null, 8, ["mime-type"])])),
-			f("div", wn, [
-				f("p", Tn, D(e.item.filename), 1),
-				f("p", En, [
-					p(D(w(e.item.size)) + " · " + D(E(e.item.created_at)) + " ", 1),
-					C.value && e.item.width && e.item.height ? (S(), d(i, { key: 0 }, [p(" · " + D(e.item.width) + "×" + D(e.item.height) + "px ", 1)], 64)) : u("", !0),
-					x.value ? (S(), d(i, { key: 1 }, [
-						n[0] ||= p(" · ", -1),
-						m(k(B), {
-							class: "tpl:mb-px tpl:inline",
-							size: 9,
-							"stroke-width": 2
-						}),
-						p(" " + D(x.value), 1)
-					], 64)) : u("", !0)
-				]),
-				C.value ? (S(), d("p", {
-					key: 0,
-					class: y(["tpl:mt-0.5 tpl:truncate tpl:text-[10px] tpl:italic", { "tpl:invisible": !e.item.alt_text }]),
-					style: { color: "var(--tpl-text-dim)" }
-				}, D(e.item.alt_text || "\xA0"), 3)) : u("", !0)
+		let b = r(() => n.item.filename || n.item.url);
+		return (n, r) => (v(), s("div", vn, [g.value ? (v(), s("img", {
+			key: 0,
+			src: t.item.url,
+			alt: t.item.alt || b.value,
+			class: "tpl:size-10 tpl:shrink-0 tpl:rounded tpl:object-cover",
+			style: { border: "1px solid var(--tpl-border)" }
+		}, null, 8, yn)) : (v(), s("div", bn, [u(St, {
+			"mime-type": m.value,
+			class: "tpl-preview-icon"
+		}, null, 8, ["mime-type"])])), c("div", xn, [
+			c("p", Sn, C(b.value), 1),
+			c("p", Cn, [
+				t.item.size == null ? o("", !0) : (v(), s(e, { key: 0 }, [l(C(_(t.item.size)), 1)], 64)),
+				t.item.createdAt ? (v(), s(e, { key: 1 }, [t.item.size == null ? o("", !0) : (v(), s(e, { key: 0 }, [l(" · ")], 64)), l(" " + C(y(t.item.createdAt)), 1)], 64)) : o("", !0),
+				g.value && t.item.width && t.item.height ? (v(), s(e, { key: 2 }, [l(" · " + C(t.item.width) + "×" + C(t.item.height) + "px ", 1)], 64)) : o("", !0),
+				f.value ? (v(), s(e, { key: 3 }, [
+					r[0] ||= l(" · ", -1),
+					u(E(L), {
+						class: "tpl:mb-px tpl:inline",
+						size: 9,
+						"stroke-width": 2
+					}),
+					l(" " + C(f.value), 1)
+				], 64)) : o("", !0)
 			]),
-			h.value ? (S(), d("div", Dn, [f("label", On, D(k(a).mediaLibrary.conversionLabel), 1), f("select", {
-				class: "tpl:mt-0.5 tpl:rounded-md tpl:border tpl:py-1 tpl:pr-6 tpl:pl-2 tpl:text-xs tpl:outline-none",
-				style: {
-					"border-color": "var(--tpl-border)",
-					"background-color": "var(--tpl-bg)",
-					color: "var(--tpl-text)"
-				},
-				value: e.selectedConversion,
-				onChange: v
-			}, [(S(!0), d(i, null, T(l.value, (e) => (S(), d("option", {
-				key: e.value,
-				value: e.value
-			}, D(e.label), 9, An))), 128))], 40, kn)])) : u("", !0)
-		]));
+			g.value ? (v(), s("p", {
+				key: 0,
+				class: h(["tpl:mt-0.5 tpl:truncate tpl:text-[10px] tpl:italic", { "tpl:invisible": !t.item.alt }]),
+				style: { color: "var(--tpl-text-dim)" }
+			}, C(t.item.alt || "\xA0"), 3)) : o("", !0)
+		])]));
 	}
-}), [["__scopeId", "data-v-79f055d7"]]), Mn = ["data-tpl-theme"], Nn = {
+}), [["__scopeId", "data-v-c7fe5962"]]), Tn = ["data-tpl-theme"], En = {
 	class: "tpl:max-h-[90%] tpl:w-full tpl:max-w-sm tpl:overflow-y-auto tpl:rounded-lg tpl:p-5 tpl:shadow-xl",
 	style: { "background-color": "var(--tpl-bg-elevated)" }
-}, Pn = {
+}, Dn = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Fn = {
+}, On = {
 	class: "tpl:mb-2 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, In = {
+}, kn = {
 	key: 0,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-warning)" }
-}, Ln = {
+}, An = {
 	class: "tpl:mb-3 tpl:rounded tpl:border tpl:p-2",
 	style: { "border-color": "var(--tpl-border)" }
-}, Rn = {
+}, jn = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, zn = { class: "tpl:mb-4" }, Bn = {
+}, Mn = { class: "tpl:mb-4" }, Nn = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, Vn = ["accept"], Hn = {
+}, Pn = ["accept"], Fn = {
 	key: 1,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-danger)" }
-}, Un = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Wn = ["disabled"], Gn = ["disabled"], Kn = /* @__PURE__ */ h({
+}, In = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Ln = ["disabled"], Rn = ["disabled"], zn = /* @__PURE__ */ d({
 	__name: "MediaReplaceModal",
 	props: {
 		visible: { type: Boolean },
@@ -1856,26 +1816,26 @@ var Ot = { class: "tpl:p-4" }, kt = {
 		error: {}
 	},
 	emits: ["replace", "close"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Z(), c = _(ve, null), p = _(ge, w(null)), h = w(null), g = w(null), v = s(() => {
-			if (!n.item) return "";
-			let e = n.item.filename.split(".");
+	setup(e, { emit: i }) {
+		let l = e, d = i, { t: f } = Q(), m = p(Z, null), h = p(fe, b(null)), g = b(null), _ = b(null), y = r(() => {
+			if (!l.item) return "";
+			let e = (l.item.filename ?? "").split(".");
 			return e.length > 1 ? e[e.length - 1].toLowerCase() : "";
-		}), y = s(() => v.value ? `.${v.value}` : "*"), b = s(() => (n.usageInfo?.template_count ?? 0) > 0);
-		j(() => n.visible, (e) => {
-			e || (g.value = null, h.value && (h.value.value = ""));
+		}), x = r(() => y.value ? `.${y.value}` : "*"), S = r(() => (l.usageInfo?.templateCount ?? 0) > 0);
+		O(() => l.visible, (e) => {
+			e || (_.value = null, g.value && (g.value.value = ""));
 		});
-		function x(e) {
+		function w(e) {
 			let t = e.target;
-			t.files && t.files.length > 0 && (g.value = t.files[0]);
+			t.files && t.files.length > 0 && (_.value = t.files[0]);
 		}
-		function C() {
-			g.value && r("replace", g.value);
+		function T() {
+			_.value && d("replace", _.value);
 		}
-		function T(e) {
-			e.key === "Escape" && r("close");
+		function D(e) {
+			e.key === "Escape" && d("close");
 		}
-		return (t, n) => (S(), l(a, { to: k(p) || "body" }, [m(o, {
+		return (r, i) => (v(), a(t, { to: E(h) || "body" }, [u(n, {
 			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 			"enter-from-class": "tpl:opacity-0",
 			"enter-to-class": "tpl:opacity-100",
@@ -1883,33 +1843,33 @@ var Ot = { class: "tpl:p-4" }, kt = {
 			"leave-from-class": "tpl:opacity-100",
 			"leave-to-class": "tpl:opacity-0"
 		}, {
-			default: M(() => [e.visible && e.item ? (S(), d("div", {
+			default: k(() => [e.visible && e.item ? (v(), s("div", {
 				key: 0,
-				"data-tpl-theme": k(c),
-				class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
+				"data-tpl-theme": E(m),
+				class: "tpl tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
 				style: { "background-color": "var(--tpl-overlay)" },
-				onClick: n[1] ||= F((e) => r("close"), ["self"]),
-				onKeydown: T
-			}, [f("div", Nn, [
-				f("h3", Pn, D(k(i).mediaLibrary.replaceWarningTitle), 1),
-				f("p", Fn, D(k(i).mediaLibrary.replaceWarningMessage.replace("{extension}", `.${v.value}`)), 1),
-				b.value ? (S(), d("p", In, D(k(i).mediaLibrary.replaceWarningUsageNote.replace("{count}", e.usageInfo.template_count.toString())), 1)) : u("", !0),
-				f("div", Ln, [f("p", Rn, D(e.item.filename), 1)]),
-				f("div", zn, [f("label", Bn, D(k(i).mediaLibrary.replaceSelectFile), 1), f("input", {
+				onClick: i[1] ||= M((e) => d("close"), ["self"]),
+				onKeydown: D
+			}, [c("div", En, [
+				c("h3", Dn, C(E(f).mediaLibrary.replaceWarningTitle), 1),
+				c("p", On, C(E(f).mediaLibrary.replaceWarningMessage.replace("{extension}", `.${y.value}`)), 1),
+				S.value ? (v(), s("p", kn, C(E(f).mediaLibrary.replaceWarningUsageNote.replace("{count}", e.usageInfo.templateCount.toString())), 1)) : o("", !0),
+				c("div", An, [c("p", jn, C(e.item.filename), 1)]),
+				c("div", Mn, [c("label", Nn, C(E(f).mediaLibrary.replaceSelectFile), 1), c("input", {
 					ref_key: "fileInputRef",
-					ref: h,
+					ref: g,
 					type: "file",
-					accept: y.value,
+					accept: x.value,
 					class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs",
 					style: {
 						"border-color": "var(--tpl-border)",
 						"background-color": "var(--tpl-bg)",
 						color: "var(--tpl-text)"
 					},
-					onChange: x
-				}, null, 40, Vn)]),
-				e.error ? (S(), d("p", Hn, D(e.error), 1)) : u("", !0),
-				f("div", Un, [f("button", {
+					onChange: w
+				}, null, 40, Pn)]),
+				e.error ? (v(), s("p", Fn, C(e.error), 1)) : o("", !0),
+				c("div", In, [c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 					style: {
 						"border-color": "var(--tpl-border)",
@@ -1917,93 +1877,94 @@ var Ot = { class: "tpl:p-4" }, kt = {
 						"background-color": "var(--tpl-bg)"
 					},
 					disabled: e.isReplacing,
-					onClick: n[0] ||= (e) => r("close")
-				}, D(k(i).mediaLibrary.cancel), 9, Wn), f("button", {
+					onClick: i[0] ||= (e) => d("close")
+				}, C(E(f).mediaLibrary.cancel), 9, Ln), c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-white tpl:transition-all tpl:duration-150 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 					style: { background: "linear-gradient(\n                  135deg,\n                  var(--tpl-primary),\n                  var(--tpl-primary-hover)\n                )" },
-					disabled: !g.value || e.isReplacing,
-					onClick: C
-				}, D(e.isReplacing ? k(i).mediaLibrary.replacing : k(i).mediaLibrary.replace), 9, Gn)])
-			])], 40, Mn)) : u("", !0)]),
+					disabled: !_.value || e.isReplacing,
+					onClick: T
+				}, C(e.isReplacing ? E(f).mediaLibrary.replacing : E(f).mediaLibrary.replace), 9, Rn)])
+			])], 40, Tn)) : o("", !0)]),
 			_: 1
 		})], 8, ["to"]));
 	}
-}), qn = {
+}), Bn = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, Jn = {
+}, Vn = {
 	class: "tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Yn = {
+}, Hn = {
 	class: "tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Xn = {
+}, Un = {
 	class: "tpl:mt-1 tpl:text-[10px]",
 	style: { color: "var(--tpl-text-dim)" }
-}, Zn = /* @__PURE__ */ h({
+}, Wn = /* @__PURE__ */ d({
 	__name: "MediaUploadZone",
 	props: {
 		isUploading: { type: Boolean },
 		uploadProgress: {}
 	},
 	emits: ["upload"],
-	setup(e, { emit: t }) {
-		let n = t, { t: r, format: a } = Z(), { allAcceptedMimeTypes: o, allAcceptedInputString: s, maxFileSize: c } = Q(), l = w();
-		function u(e) {
+	setup(t, { emit: n }) {
+		let r = n, { t: i, format: a } = Q(), { allAcceptedInputString: o, isAcceptedFile: l } = $(), d = b();
+		function f(e) {
 			let t = [];
-			for (let n of Array.from(e)) o.value.includes(n.type) && n.size <= c.value && t.push(n);
+			for (let n of Array.from(e)) l(n) && t.push(n);
 			return t;
 		}
 		function p(e) {
-			let t = u(e);
-			t.length && n("upload", t);
+			let t = f(e);
+			t.length && r("upload", t);
 		}
-		let { isOverDropZone: h } = se(l, { onDrop: (e) => {
+		let { isOverDropZone: m } = ae(d, { onDrop: (e) => {
 			e?.length && p(e);
-		} }), { open: g, onChange: _ } = le({
-			accept: s.value,
+		} }), { open: g, onChange: _ } = se({
+			accept: o.value,
 			multiple: !0
 		});
 		return _((e) => {
 			e?.length && p(e);
-		}), (t, n) => (S(), d("div", {
+		}), (n, r) => (v(), s("div", {
 			ref_key: "dropZoneRef",
-			ref: l,
-			class: y(["tpl-upload-zone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-lg tpl:border-2 tpl:border-dashed tpl:p-5 tpl:text-center tpl:transition-all tpl:duration-150", k(h) ? "tpl-upload-zone-active" : ""]),
+			ref: d,
+			"data-testid": "media-upload-zone",
+			class: h(["tpl-upload-zone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-lg tpl:border-2 tpl:border-dashed tpl:p-5 tpl:text-center tpl:transition-all tpl:duration-150", E(m) ? "tpl-upload-zone-active" : ""]),
 			style: {
 				"border-color": "var(--tpl-border-light)",
 				"background-color": "var(--tpl-bg)"
 			},
-			onClick: n[0] ||= (e) => k(g)()
-		}, [e.isUploading ? (S(), d("div", qn, [m(k(W), {
+			onClick: r[0] ||= (e) => E(g)()
+		}, [t.isUploading ? (v(), s("div", Bn, [u(E(V), {
 			class: "tpl-spinner",
 			size: 20,
 			"stroke-width": 2,
 			style: { color: "var(--tpl-primary)" }
-		}), f("span", Jn, D(e.uploadProgress && e.uploadProgress.total > 1 ? k(a)(k(r).mediaLibrary.uploadingProgress, {
-			current: e.uploadProgress.current,
-			total: e.uploadProgress.total
-		}) : k(r).mediaLibrary.uploading), 1)])) : (S(), d(i, { key: 1 }, [
-			m(k(te), {
+		}), c("span", Vn, C(t.uploadProgress && t.uploadProgress.total > 1 ? E(a)(E(i).mediaLibrary.uploadingProgress, {
+			current: t.uploadProgress.current,
+			total: t.uploadProgress.total
+		}) : E(i).mediaLibrary.uploading), 1)])) : (v(), s(e, { key: 1 }, [
+			u(E(q), {
 				class: "tpl:mb-2",
 				size: 24,
 				"stroke-width": 1.5,
 				style: { color: "var(--tpl-text-dim)" }
 			}),
-			f("p", Yn, D(k(r).mediaLibrary.dropOrClick), 1),
-			f("p", Xn, D(k(r).mediaLibrary.acceptedFormats), 1)
+			c("p", Hn, C(E(i).mediaLibrary.dropOrClick), 1),
+			c("p", Un, C(E(i).mediaLibrary.acceptedFormats), 1)
 		], 64))], 2));
 	}
-}), Qn = [
+}), Gn = [
 	"width",
 	"height",
 	"viewBox"
-], $n = [
+], Kn = [
 	"cx",
 	"cy",
 	"r",
 	"stroke-width"
-], er = [
+], qn = [
 	"cx",
 	"cy",
 	"r",
@@ -2011,14 +1972,14 @@ var Ot = { class: "tpl:p-4" }, kt = {
 	"stroke",
 	"stroke-dasharray",
 	"stroke-dashoffset"
-], tr = {
+], Jn = {
 	key: 0,
 	class: "tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:-translate-x-1/2 tpl:rounded-md tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:whitespace-nowrap tpl:shadow-lg",
 	style: {
 		"background-color": "var(--tpl-text)",
 		color: "var(--tpl-bg-elevated)"
 	}
-}, nr = /* @__PURE__ */ h({
+}, Yn = /* @__PURE__ */ d({
 	__name: "StorageProgressRing",
 	props: {
 		usedBytes: {},
@@ -2026,8 +1987,8 @@ var Ot = { class: "tpl:p-4" }, kt = {
 		size: {}
 	},
 	setup(e) {
-		let t = e, { t: n, format: r } = Z(), i = w(!1), a = s(() => t.size ?? 24), c = s(() => Math.max(2, a.value / 8)), l = s(() => (a.value - c.value) / 2), h = s(() => 2 * Math.PI * l.value), g = s(() => t.limitBytes <= 0 ? 0 : Math.min(100, t.usedBytes / t.limitBytes * 100)), _ = s(() => h.value - g.value / 100 * h.value), v = s(() => g.value >= 95 ? "var(--tpl-danger)" : g.value >= 75 ? "var(--tpl-warning, #f59e0b)" : "var(--tpl-primary)");
-		function y(e) {
+		let t = e, { t: i, format: a } = Q(), d = b(!1), f = r(() => t.size ?? 24), p = r(() => Math.max(2, f.value / 8)), m = r(() => (f.value - p.value) / 2), h = r(() => 2 * Math.PI * m.value), g = r(() => t.limitBytes <= 0 ? 0 : Math.min(100, t.usedBytes / t.limitBytes * 100)), _ = r(() => h.value - g.value / 100 * h.value), y = r(() => g.value >= 95 ? "var(--tpl-danger)" : g.value >= 75 ? "var(--tpl-warning, #f59e0b)" : "var(--tpl-primary)");
+		function x(e) {
 			if (e === 0) return "0 B";
 			let t = 1024, n = [
 				"B",
@@ -2037,39 +1998,40 @@ var Ot = { class: "tpl:p-4" }, kt = {
 			], r = Math.floor(Math.log(e) / Math.log(t)), i = e / t ** r, a = +(r >= 2);
 			return `${i.toFixed(a)} ${n[r]}`;
 		}
-		let b = s(() => y(t.usedBytes)), x = s(() => y(t.limitBytes)), C = s(() => Math.max(0, t.limitBytes - t.usedBytes)), T = s(() => y(C.value)), E = s(() => r(n.mediaLibrary.storageTooltip, {
-			used: b.value,
-			total: x.value,
-			remaining: T.value
+		let S = r(() => x(t.usedBytes)), w = r(() => x(t.limitBytes)), T = r(() => Math.max(0, t.limitBytes - t.usedBytes)), E = r(() => x(T.value)), D = r(() => a(i.mediaLibrary.storageTooltip, {
+			used: S.value,
+			total: w.value,
+			remaining: E.value
 		}));
-		return (e, t) => (S(), d("div", {
+		return (e, t) => (v(), s("div", {
+			"data-testid": "media-storage-ring",
 			class: "tpl:relative tpl:inline-flex tpl:cursor-help tpl:items-center tpl:justify-center",
-			onMouseenter: t[0] ||= (e) => i.value = !0,
-			onMouseleave: t[1] ||= (e) => i.value = !1
-		}, [(S(), d("svg", {
-			width: a.value,
-			height: a.value,
+			onMouseenter: t[0] ||= (e) => d.value = !0,
+			onMouseleave: t[1] ||= (e) => d.value = !1
+		}, [(v(), s("svg", {
+			width: f.value,
+			height: f.value,
 			class: "tpl:-rotate-90",
-			viewBox: `0 0 ${a.value} ${a.value}`
-		}, [f("circle", {
-			cx: a.value / 2,
-			cy: a.value / 2,
-			r: l.value,
+			viewBox: `0 0 ${f.value} ${f.value}`
+		}, [c("circle", {
+			cx: f.value / 2,
+			cy: f.value / 2,
+			r: m.value,
 			fill: "none",
-			"stroke-width": c.value,
+			"stroke-width": p.value,
 			style: { stroke: "var(--tpl-border)" }
-		}, null, 8, $n), f("circle", {
-			cx: a.value / 2,
-			cy: a.value / 2,
-			r: l.value,
+		}, null, 8, Kn), c("circle", {
+			cx: f.value / 2,
+			cy: f.value / 2,
+			r: m.value,
 			fill: "none",
-			"stroke-width": c.value,
-			stroke: v.value,
+			"stroke-width": p.value,
+			stroke: y.value,
 			"stroke-linecap": "round",
 			"stroke-dasharray": h.value,
 			"stroke-dashoffset": _.value,
 			class: "tpl:transition-all tpl:duration-300 tpl:ease-out"
-		}, null, 8, er)], 8, Qn)), m(o, {
+		}, null, 8, qn)], 8, Gn)), u(n, {
 			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 			"enter-from-class": "tpl:opacity-0 tpl:translate-y-1",
 			"enter-to-class": "tpl:opacity-100 tpl:translate-y-0",
@@ -2077,58 +2039,62 @@ var Ot = { class: "tpl:p-4" }, kt = {
 			"leave-from-class": "tpl:opacity-100 tpl:translate-y-0",
 			"leave-to-class": "tpl:opacity-0 tpl:translate-y-1"
 		}, {
-			default: M(() => [i.value ? (S(), d("div", tr, [p(D(E.value) + " ", 1), t[2] ||= f("div", {
+			default: k(() => [d.value ? (v(), s("div", Jn, [l(C(D.value) + " ", 1), t[2] ||= c("div", {
 				class: "tpl:absolute tpl:-top-1 tpl:left-1/2 tpl:size-2 tpl:-translate-x-1/2 tpl:rotate-45",
 				style: { "background-color": "var(--tpl-text)" }
-			}, null, -1)])) : u("", !0)]),
+			}, null, -1)])) : o("", !0)]),
 			_: 1
 		})], 32));
 	}
 });
 //#endregion
+//#region src/utils/treeFolders.ts
+function Xn(e) {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) t.set(n.id, {
+		...n,
+		children: []
+	});
+	let n = [];
+	for (let e of t.values()) {
+		let r = e.parentId ?? null, i = r ? t.get(r) : void 0;
+		i ? i.children.push(e) : n.push(e);
+	}
+	return n;
+}
+//#endregion
 //#region src/composables/useMediaLibraryUI.ts
-function rr(e) {
+function Zn(e) {
 	let { library: t, translations: n } = e;
-	function r() {
+	function i() {
 		return "value" in n && typeof n.value == "object" ? n.value : n;
 	}
-	let i = w("grid"), a = w(!1), o = w(""), c = w("original"), l = w(null), u = w(!1), d = w(!1), f = s(() => {
-		let e = t.previewItem.value;
-		if (!e) return null;
-		switch (c.value) {
-			case "small": return e.small_url || e.url;
-			case "medium": return e.medium_url || e.url;
-			case "large": return e.large_url || e.url;
-			default: return e.url;
-		}
-	}), p = s(() => t.frequentlyUsedItems.value.length > 0), m = s(() => t.viewMode.value === "frequently-used" ? t.frequentlyUsedItems.value : t.items.value), h = s(() => Object.values(t.deleteUsageInfo.value).some((e) => e.template_count > 0)), g = {
-		images: () => r().mediaLibrary.filterImages,
-		documents: () => r().mediaLibrary.filterDocuments,
-		videos: () => r().mediaLibrary.filterVideos,
-		audio: () => r().mediaLibrary.filterAudio
+	let a = b("grid"), o = b(!1), s = b(""), c = b(null), l = b(!1), u = b(!1), d = r(() => t.previewItem.value?.url ?? null), f = r(() => t.frequentlyUsedItems.value.length > 0), p = r(() => t.viewMode.value === "frequently-used" ? t.frequentlyUsedItems.value : t.items.value), m = r(() => Object.values(t.deleteUsageInfo.value).some((e) => e.templateCount > 0)), h = r(() => Xn(t.folders.value)), g = {
+		images: () => i().mediaLibrary.filterImages,
+		documents: () => i().mediaLibrary.filterDocuments,
+		videos: () => i().mediaLibrary.filterVideos,
+		audio: () => i().mediaLibrary.filterAudio
 	};
 	function _(e) {
 		return g[e]?.() ?? e;
 	}
-	j(a, (e) => {
+	O(o, (e) => {
 		e && t.loadFolders();
-	}), j(() => t.previewItem.value?.id, () => {
-		c.value = "original";
 	});
-	let v = oe((e) => {
+	let v = ie((e) => {
 		t.search(e);
 	}, 300);
 	function y(e) {
-		o.value = e, v(e);
+		s.value = e, v(e);
 	}
-	let { copy: b, copied: x } = ae({
+	let { copy: x, copied: S } = Y({
 		copiedDuring: 2e3,
 		legacy: !0
 	});
-	async function S(e) {
+	async function C(e) {
 		await t.uploadFiles(e);
 	}
-	function C(e) {
+	function w(e) {
 		t.selectItem(e);
 	}
 	async function T(e, n) {
@@ -2140,17 +2106,17 @@ function rr(e) {
 	async function D(e) {
 		await t.deleteFolder(e);
 	}
-	function O(e) {
-		l.value = e;
+	function k(e) {
+		c.value = e;
 	}
-	async function k(e, n, r, i) {
-		i && await t.replaceMediaDirectly(e, i.file), await t.updateFile(e, n, r), l.value = null;
+	async function A(e, n, r, i) {
+		i && await t.replaceMediaDirectly(e, i.file), await t.updateFile(e, n, r), c.value = null;
 	}
-	async function A(e) {
-		await t.importFromUrl(e) && (u.value = !1);
+	async function j(e) {
+		await t.importFromUrl(e) && (l.value = !1);
 	}
 	async function M(e) {
-		d.value = !1, await t.moveSelected(e);
+		u.value = !1, await t.moveSelected(e);
 	}
 	async function N() {
 		await t.checkUsageBeforeDelete();
@@ -2162,32 +2128,32 @@ function rr(e) {
 		await t.replaceFile(e);
 	}
 	function I() {
-		t.clearSelection(), t.cancelDelete(), t.cancelReplace(), o.value = "", t.categoryFilter.value = null, t.sortOption.value = "newest", t.viewMode.value = "files", l.value = null, u.value = !1, c.value = "original";
+		t.clearSelection(), t.cancelDelete(), t.cancelReplace(), s.value = "", t.searchQuery.value = "", t.categoryFilter.value = null, t.sortOption.value = "newest", t.viewMode.value = "files", c.value = null, l.value = !1;
 	}
 	return {
-		layoutMode: i,
-		showSidebar: a,
-		searchInput: o,
-		selectedConversion: c,
-		editingItem: l,
-		showImportUrlModal: u,
-		showMovePicker: d,
-		selectedUrl: f,
-		hasFrequentlyUsed: p,
-		displayItems: m,
-		hasUsedFiles: h,
-		copy: b,
-		copied: x,
+		layoutMode: a,
+		showSidebar: o,
+		searchInput: s,
+		editingItem: c,
+		showImportUrlModal: l,
+		showMovePicker: u,
+		selectedUrl: d,
+		hasFrequentlyUsed: f,
+		displayItems: p,
+		hasUsedFiles: m,
+		folderTree: h,
+		copy: x,
+		copied: S,
 		getCategoryLabel: _,
 		handleSearchInput: y,
-		handleUpload: S,
-		handleSelect: C,
+		handleUpload: C,
+		handleSelect: w,
 		handleCreateFolder: T,
 		handleRenameFolder: E,
 		handleDeleteFolder: D,
-		handleEditItem: O,
-		handleEditSave: k,
-		handleImportFromUrl: A,
+		handleEditItem: k,
+		handleEditSave: A,
+		handleImportFromUrl: j,
 		handleMoveToFolder: M,
 		handleDeleteClick: N,
 		handleReplaceItem: P,
@@ -2197,39 +2163,39 @@ function rr(e) {
 }
 //#endregion
 //#region src/i18n/index.ts
-var ir = /* #__PURE__ */ Object.assign({
-	"./locales/ca.ts": () => import("./ca-DnghH5Xn.js"),
-	"./locales/de.ts": () => import("./de-ByQyu2jv.js"),
-	"./locales/en.ts": () => Promise.resolve().then(() => be),
-	"./locales/es.ts": () => import("./es-Bcp-DbmC.js"),
-	"./locales/fr.ts": () => import("./fr-DXb0cCZG.js"),
-	"./locales/nl.ts": () => import("./nl-DGT1t3Be.js"),
-	"./locales/pt-BR.ts": () => import("./pt-BR-C0Hzc26R.js")
+var Qn = /* #__PURE__ */ Object.assign({
+	"./locales/ca.ts": () => import("./ca-CGf3MuE2.js"),
+	"./locales/de.ts": () => import("./de-D5ebAV5i.js"),
+	"./locales/en.ts": () => Promise.resolve().then(() => he),
+	"./locales/es.ts": () => import("./es-BG--QNW0.js"),
+	"./locales/fr.ts": () => import("./fr-Mdi4AlCR.js"),
+	"./locales/nl.ts": () => import("./nl-D-6hT8te.js"),
+	"./locales/pt-BR.ts": () => import("./pt-BR-DMfAgDWi.js")
 });
-function ar(e) {
+function $n(e) {
 	return Object.keys(e).map((e) => e.match(/\/([^/]+)\.ts$/)?.[1]).filter((e) => !!e);
 }
-var or = ar(ir);
-function sr(e) {
+var er = $n(Qn);
+function tr(e) {
 	return e.trim().replace(/_/g, "-").toLowerCase();
 }
-function cr(e) {
-	let t = sr(e);
-	return or.find((e) => sr(e) === t);
+function nr(e) {
+	let t = tr(e);
+	return er.find((e) => tr(e) === t);
 }
-function lr(e) {
-	return sr(e).split("-")[0];
+function rr(e) {
+	return tr(e).split("-")[0];
 }
-function ur(e) {
-	return cr(e) ?? cr(lr(e)) ?? "en";
+function ir(e) {
+	return nr(e) ?? nr(rr(e)) ?? "en";
 }
-async function dr(e) {
-	let t = ir[`./locales/${ur(e)}.ts`];
+async function ar(e) {
+	let t = Qn[`./locales/${ir(e)}.ts`];
 	return (await t()).default;
 }
 //#endregion
 //#region src/components/MediaLibraryModal.vue?vue&type=script&setup=true&lang.ts
-var fr = ["data-tpl-theme"], pr = {
+var or = ["data-tpl-theme"], sr = {
 	class: "tpl-media-modal tpl-scale-in tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
 	style: {
 		width: "900px",
@@ -2240,107 +2206,148 @@ var fr = ["data-tpl-theme"], pr = {
 		border: "1px solid var(--tpl-border)",
 		"box-shadow": "var(--tpl-shadow-xl)"
 	}
-}, mr = {
+}, cr = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-3.5",
 	style: { "border-color": "var(--tpl-border)" }
-}, hr = {
+}, lr = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, gr = { class: "tpl:flex tpl:items-center tpl:gap-3" }, _r = { class: "tpl:relative" }, vr = ["value", "placeholder"], yr = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, br = {
+}, ur = { class: "tpl:flex tpl:items-center tpl:gap-3" }, dr = { class: "tpl:relative" }, fr = [
+	"value",
+	"disabled",
+	"placeholder"
+], pr = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, mr = {
 	key: 0,
 	class: "tpl:flex tpl:w-48 tpl:shrink-0 tpl:flex-col tpl:border-r",
 	style: {
 		"border-color": "var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, xr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, Sr = {
+}, hr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, gr = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-4 tpl:py-2.5",
 	style: { "border-color": "var(--tpl-border)" }
-}, Cr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, wr = ["title"], Tr = {
-	key: 0,
+}, _r = { class: "tpl:flex tpl:items-center tpl:gap-2" }, vr = ["title"], yr = {
+	key: 1,
 	class: "tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Er = {
+}, br = {
 	class: "tpl:flex tpl:rounded-md tpl:p-0.5",
 	style: {
 		border: "1px solid var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, Dr = ["title"], Or = ["title"], kr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ar = ["value"], jr = { value: "" }, Mr = ["value"], Nr = ["value"], Pr = { value: "newest" }, Fr = { value: "oldest" }, Ir = { value: "name_asc" }, Lr = { value: "name_desc" }, Rr = { value: "size_asc" }, zr = { value: "size_desc" }, Br = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Vr = {
+}, xr = ["title"], Sr = ["title"], Cr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, wr = ["value"], Tr = { value: "" }, Er = ["value"], Dr = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Or = {
 	key: 0,
 	class: "tpl:px-4 tpl:pt-3"
-}, Hr = {
+}, kr = {
 	class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
 	style: {
 		"background-color": "var(--tpl-bg-elevated)",
 		"box-shadow": "var(--tpl-shadow-xl)"
 	}
-}, Ur = {
+}, Ar = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Wr = {
+}, jr = {
 	key: 0,
+	"data-testid": "media-delete-usage",
 	class: "tpl:mb-4 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Gr = {
+}, Mr = {
 	key: 1,
 	class: "tpl:mb-4 tpl:max-h-32 tpl:overflow-y-auto tpl:rounded tpl:border tpl:p-2",
 	style: { "border-color": "var(--tpl-border)" }
-}, Kr = { class: "tpl:font-medium" }, qr = { style: { color: "var(--tpl-text-muted)" } }, Jr = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Yr = {
+}, Nr = { class: "tpl:font-medium" }, Pr = { style: { color: "var(--tpl-text-muted)" } }, Fr = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Ir = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3",
 	style: { "border-color": "var(--tpl-border)" }
-}, Xr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Zr = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Qr = {
+}, Lr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Rr = { class: "tpl:flex tpl:items-center tpl:gap-5" }, zr = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, $r = { class: "tpl:relative" }, ei = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ti = ["disabled"], ni = /* @__PURE__ */ h({
+}, Br = {
+	key: 1,
+	class: "tpl:relative"
+}, Vr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Hr = ["disabled"], Ur = /* @__PURE__ */ d({
 	__name: "MediaLibraryModal",
 	props: {
 		visible: { type: Boolean },
+		provider: {},
 		accept: {},
-		authManager: {},
-		projectId: {},
-		planConfig: {},
 		popoverTarget: {},
 		locale: {},
-		uiTheme: {}
+		uiTheme: {},
+		templateId: {},
+		onError: { type: Function }
 	},
 	emits: ["close", "select"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, c = w(null);
-		j(() => n.locale, async (e) => {
-			c.value = await dr(e ?? "en");
-		}, { immediate: !0 }), C(_e, c);
-		let h = s(() => c.value), g = s(() => n.uiTheme);
-		C(ve, g);
-		let _ = O(() => n.popoverTarget ?? null);
-		C(ge, _), C(ye, O(() => n.locale)), C(he, n.planConfig);
-		let v = s(() => n.planConfig.config.value?.storage.used_bytes ?? 0), x = s(() => n.planConfig.config.value?.storage.limit_bytes ?? 0), { isAcceptedMimeType: E, availableCategories: A } = Q(n.planConfig), N = me({
-			projectId: n.projectId,
-			authManager: n.authManager
-		}), P = rr({
-			library: N,
-			translations: h
-		});
-		j(() => n.visible, (e) => {
-			e ? (N.loadItems(), N.loadFrequentlyUsed()) : P.resetUI();
+	setup(i, { emit: d }) {
+		let f = i, p = d, m = b(null);
+		O(() => f.locale, async (e) => {
+			m.value = await ar(e ?? "en");
+		}, { immediate: !0 }), y(pe, m);
+		let _ = r(() => m.value), S = r(() => f.uiTheme);
+		y(Z, S);
+		let T = w(() => f.popoverTarget ?? null);
+		y(fe, T), y(me, w(() => f.locale));
+		let D = {
+			get maxFileSize() {
+				return f.provider.maxFileSize;
+			},
+			get mimeTypes() {
+				return f.provider.mimeTypes;
+			},
+			get accept() {
+				return f.accept;
+			}
+		};
+		y(de, D);
+		let { isAcceptedMimeType: A, availableCategories: j } = $(D), P = ue({
+			provider: f.provider,
+			templateId: () => f.templateId,
+			onError: (e) => f.onError?.(e)
+		}), I = Zn({
+			library: P,
+			translations: _
+		}), L = r(() => typeof f.provider.create == "function"), V = r(() => f.provider.folders !== !1), U = r(() => typeof f.provider.importFromUrl == "function"), W = r(() => typeof f.provider.delete == "function"), G = r(() => typeof f.provider.update == "function"), K = r(() => typeof f.provider.replace == "function"), te = r(() => typeof f.provider.frequentlyUsed == "function"), q = r(() => {
+			let e = f.provider.folders;
+			return e !== !1 && typeof e.move == "function";
+		}), re = r(() => {
+			let e = f.provider.folders;
+			return e !== !1 && typeof e.create == "function";
+		}), J = r(() => {
+			let e = f.provider.folders;
+			return e !== !1 && typeof e.update == "function";
+		}), Y = r(() => {
+			let e = f.provider.folders;
+			return e !== !1 && typeof e.delete == "function";
+		}), ie = r(() => P.isLoading.value && I.displayItems.value.length === 0), ae = r(() => {
+			let e = P.previewItem.value;
+			return e ? !f.accept?.length || A(e.mimeType ?? "", f.accept) : !1;
+		}), se = r(() => {
+			if (!W.value) return 0;
+			let e = 0;
+			for (let t of P.selectedItems.value) I.displayItems.value.find((e) => e.id === t)?.canDelete !== !1 && (e += 1);
+			return e;
 		});
-		function L(e) {
-			e.key === "Escape" && r("close");
+		O(() => f.visible, (e) => {
+			e ? (f.accept?.length === 1 && (P.categoryFilter.value = f.accept[0]), P.loadItems(), P.loadFrequentlyUsed(), P.loadStorage()) : I.resetUI();
+		}, { immediate: !0 });
+		function X(e) {
+			e.key === "Escape" && p("close");
 		}
-		ce(document, "keydown", L);
-		function z() {
-			return N.previewItem.value ? !n.accept?.length || E(N.previewItem.value.mime_type, n.accept) : !1;
+		oe(document, "keydown", X);
+		function ce() {
+			ae.value && P.previewItem.value && (p("select", P.previewItem.value), p("close"));
 		}
-		function B() {
-			if (z()) {
-				let e = N.previewItem.value, t = {
-					...e,
-					url: P.selectedUrl.value || e.url
-				};
-				r("select", t), r("close");
-			}
+		function le(e) {
+			let t = e.target.value;
+			P.filterByCategory(t || null);
 		}
-		return (t, n) => (S(), l(a, { to: e.popoverTarget || "body" }, [m(o, {
+		async function he() {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of P.selectedItems.value) I.displayItems.value.find((e) => e.id === t)?.canDelete !== !1 && e.add(t);
+			P.selectedItems.value = e, await I.handleDeleteClick();
+		}
+		return (r, d) => (v(), a(t, { to: i.popoverTarget || "body" }, [u(n, {
 			"enter-active-class": "tpl:transition tpl:duration-200",
 			"enter-from-class": "tpl:opacity-0",
 			"enter-to-class": "tpl:opacity-100",
@@ -2348,45 +2355,48 @@ var fr = ["data-tpl-theme"], pr = {
 			"leave-from-class": "tpl:opacity-100",
 			"leave-to-class": "tpl:opacity-0"
 		}, {
-			default: M(() => [e.visible && c.value ? (S(), d("div", {
+			default: k(() => [i.visible && m.value ? (v(), s("div", {
 				key: 0,
-				"data-tpl-theme": g.value,
-				class: "tpl tpl-media-overlay tpl:fixed tpl:inset-0 tpl:z-[9999] tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
-				onClick: n[18] ||= F((e) => r("close"), ["self"])
-			}, [f("div", pr, [
-				f("div", mr, [f("h2", hr, D(h.value.mediaLibrary.title), 1), f("div", gr, [
-					m(nr, {
-						"used-bytes": v.value,
-						"limit-bytes": x.value,
+				"data-testid": "media-library-modal",
+				"data-tpl-theme": S.value,
+				class: "tpl tpl-media-overlay tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4",
+				onClick: d[14] ||= M((e) => p("close"), ["self"])
+			}, [c("div", sr, [
+				c("div", cr, [c("h2", lr, C(_.value.mediaLibrary.title), 1), c("div", ur, [
+					E(P).storageInfo.value ? (v(), a(Yn, {
+						key: 0,
+						"used-bytes": E(P).storageInfo.value.usedBytes,
+						"limit-bytes": E(P).storageInfo.value.limitBytes,
 						size: 22
-					}, null, 8, ["used-bytes", "limit-bytes"]),
-					f("div", _r, [f("input", {
-						value: k(P).searchInput.value,
+					}, null, 8, ["used-bytes", "limit-bytes"])) : o("", !0),
+					c("div", dr, [c("input", {
+						value: E(I).searchInput.value,
 						type: "text",
-						class: "tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)]",
+						disabled: ie.value,
+						class: "tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 						style: {
 							"border-color": "var(--tpl-border)",
 							"background-color": "var(--tpl-bg)",
 							color: "var(--tpl-text)"
 						},
-						placeholder: h.value.mediaLibrary.searchPlaceholder,
-						onInput: n[0] ||= (e) => k(P).handleSearchInput(e.target.value)
-					}, null, 40, vr), m(k(Y), {
+						placeholder: _.value.mediaLibrary.searchPlaceholder,
+						onInput: d[0] ||= (e) => E(I).handleSearchInput(e.target.value)
+					}, null, 40, fr), u(E(ee), {
 						class: "tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2",
 						size: 13,
 						"stroke-width": 2,
 						style: { color: "var(--tpl-text-dim)" }
 					})]),
-					f("button", {
+					c("button", {
 						class: "tpl:flex tpl:size-7 tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150",
 						style: { color: "var(--tpl-text-muted)" },
-						onClick: n[1] ||= (e) => r("close")
-					}, [m(k(ne), {
+						onClick: d[1] ||= (e) => p("close")
+					}, [u(E(ne), {
 						size: 18,
 						"stroke-width": 2
 					})])
 				])]),
-				f("div", yr, [m(o, {
+				c("div", pr, [u(n, {
 					"enter-active-class": "tpl:transition-all tpl:duration-200 tpl:ease-out",
 					"enter-from-class": "tpl:-ml-48 tpl:opacity-0",
 					"enter-to-class": "tpl:ml-0 tpl:opacity-100",
@@ -2394,76 +2404,84 @@ var fr = ["data-tpl-theme"], pr = {
 					"leave-from-class": "tpl:ml-0 tpl:opacity-100",
 					"leave-to-class": "tpl:-ml-48 tpl:opacity-0"
 				}, {
-					default: M(() => [k(P).showSidebar.value ? (S(), d("div", br, [m(wt, {
-						folders: k(N).folders.value,
-						"current-folder-id": k(N).currentFolderId.value,
-						"view-mode": k(N).viewMode.value,
-						"has-frequently-used": k(P).hasFrequentlyUsed.value,
-						onNavigate: k(N).navigateToFolder,
-						onCreateFolder: k(P).handleCreateFolder,
-						onRenameFolder: k(P).handleRenameFolder,
-						onDeleteFolder: k(P).handleDeleteFolder,
-						onShowFrequentlyUsed: k(N).showFrequentlyUsed
+					default: k(() => [V.value && E(I).showSidebar.value ? (v(), s("div", mr, [u(bt, {
+						folders: E(I).folderTree.value,
+						"current-folder-id": E(P).currentFolderId.value,
+						"view-mode": E(P).viewMode.value,
+						"has-frequently-used": te.value && E(I).hasFrequentlyUsed.value,
+						"can-create-folder": re.value,
+						"can-rename-folder": J.value,
+						"can-delete-folder": Y.value,
+						onNavigate: E(P).navigateToFolder,
+						onCreateFolder: E(I).handleCreateFolder,
+						onRenameFolder: E(I).handleRenameFolder,
+						onDeleteFolder: E(I).handleDeleteFolder,
+						onShowFrequentlyUsed: E(P).showFrequentlyUsed
 					}, null, 8, [
 						"folders",
 						"current-folder-id",
 						"view-mode",
 						"has-frequently-used",
+						"can-create-folder",
+						"can-rename-folder",
+						"can-delete-folder",
 						"onNavigate",
 						"onCreateFolder",
 						"onRenameFolder",
 						"onDeleteFolder",
 						"onShowFrequentlyUsed"
-					])])) : u("", !0)]),
+					])])) : o("", !0)]),
 					_: 1
-				}), f("div", xr, [f("div", Sr, [f("div", Cr, [
-					f("button", {
+				}), c("div", hr, [c("div", gr, [c("div", _r, [
+					V.value ? (v(), s("button", {
+						key: 0,
+						"data-testid": "media-folder-toggle",
 						class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150",
-						style: b({
-							color: k(P).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: k(P).showSidebar.value ? "var(--tpl-bg)" : "transparent",
-							border: k(P).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+						style: g({
+							color: E(I).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: E(I).showSidebar.value ? "var(--tpl-bg)" : "transparent",
+							border: E(I).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
 						}),
-						title: k(P).showSidebar.value ? h.value.mediaLibrary.hideFolders : h.value.mediaLibrary.showFolders,
-						onClick: n[2] ||= (e) => k(P).showSidebar.value = !k(P).showSidebar.value
-					}, [m(k(G), {
+						title: E(I).showSidebar.value ? _.value.mediaLibrary.hideFolders : _.value.mediaLibrary.showFolders,
+						onClick: d[2] ||= (e) => E(I).showSidebar.value = !E(I).showSidebar.value
+					}, [u(E(H), {
 						size: 16,
 						"stroke-width": 2
-					})], 12, wr),
-					k(N).viewMode.value === "frequently-used" ? (S(), d("span", Tr, D(h.value.mediaLibrary.frequentlyUsed), 1)) : (S(), l(Te, {
-						key: 1,
-						folders: k(N).folders.value,
-						"current-folder-id": k(N).currentFolderId.value,
-						onNavigate: k(N).navigateToFolder
+					})], 12, vr)) : o("", !0),
+					E(P).viewMode.value === "frequently-used" ? (v(), s("span", yr, C(_.value.mediaLibrary.frequentlyUsed), 1)) : (v(), a(be, {
+						key: 2,
+						folders: E(I).folderTree.value,
+						"current-folder-id": E(P).currentFolderId.value,
+						onNavigate: E(P).navigateToFolder
 					}, null, 8, [
 						"folders",
 						"current-folder-id",
 						"onNavigate"
 					])),
-					f("div", Er, [f("button", {
+					c("div", br, [c("button", {
 						class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
-						style: b({
-							color: k(P).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: k(P).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+						style: g({
+							color: E(I).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: E(I).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
 						}),
-						title: h.value.mediaLibrary.viewGrid,
-						onClick: n[3] ||= (e) => k(P).layoutMode.value = "grid"
-					}, [m(k(V), {
+						title: _.value.mediaLibrary.viewGrid,
+						onClick: d[3] ||= (e) => E(I).layoutMode.value = "grid"
+					}, [u(E(R), {
 						size: 14,
 						"stroke-width": 2
-					})], 12, Dr), f("button", {
+					})], 12, xr), c("button", {
 						class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
-						style: b({
-							color: k(P).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: k(P).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+						style: g({
+							color: E(I).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: E(I).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
 						}),
-						title: h.value.mediaLibrary.viewList,
-						onClick: n[4] ||= (e) => k(P).layoutMode.value = "list"
-					}, [m(k(U), {
+						title: _.value.mediaLibrary.viewList,
+						onClick: d[4] ||= (e) => E(I).layoutMode.value = "list"
+					}, [u(E(B), {
 						size: 14,
 						"stroke-width": 2
-					})], 12, Or)])
-				]), f("div", kr, [k(A).length > 1 ? (S(), d("select", {
+					})], 12, Sr)])
+				]), c("div", Cr, [E(j).length > 1 ? (v(), s("select", {
 					key: 0,
 					class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
 					style: {
@@ -2471,58 +2489,49 @@ var fr = ["data-tpl-theme"], pr = {
 						"background-color": "var(--tpl-bg)",
 						color: "var(--tpl-text)"
 					},
-					value: k(N).categoryFilter.value ?? "",
-					onChange: n[5] ||= (e) => k(N).filterByCategory(e.target.value || null)
-				}, [f("option", jr, D(h.value.mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(k(A), (e) => (S(), d("option", {
+					value: E(P).categoryFilter.value ?? "",
+					onChange: le
+				}, [c("option", Tr, C(_.value.mediaLibrary.filterAll), 1), (v(!0), s(e, null, x(E(j), (e) => (v(), s("option", {
 					key: e,
 					value: e
-				}, D(k(P).getCategoryLabel(e)), 9, Mr))), 128))], 40, Ar)) : u("", !0), f("select", {
-					class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
-					style: {
-						"border-color": "var(--tpl-border)",
-						"background-color": "var(--tpl-bg)",
-						color: "var(--tpl-text)"
-					},
-					value: k(N).sortOption.value,
-					onChange: n[6] ||= (e) => k(N).sortBy(e.target.value)
-				}, [
-					f("option", Pr, D(h.value.mediaLibrary.sortNewest), 1),
-					f("option", Fr, D(h.value.mediaLibrary.sortOldest), 1),
-					f("option", Ir, D(h.value.mediaLibrary.sortNameAsc), 1),
-					f("option", Lr, D(h.value.mediaLibrary.sortNameDesc), 1),
-					f("option", Rr, D(h.value.mediaLibrary.sortSizeAsc), 1),
-					f("option", zr, D(h.value.mediaLibrary.sortSizeDesc), 1)
-				], 40, Nr)])]), f("div", Br, [k(N).viewMode.value === "files" ? (S(), d("div", Vr, [m(Zn, {
-					"is-uploading": k(N).isUploading.value,
-					"upload-progress": k(N).uploadProgress.value,
-					onUpload: k(P).handleUpload
+				}, C(E(I).getCategoryLabel(e)), 9, Er))), 128))], 40, wr)) : o("", !0)])]), c("div", Dr, [E(P).viewMode.value === "files" && (L.value || U.value) ? (v(), s("div", Or, [L.value ? (v(), a(Wn, {
+					key: 0,
+					"is-uploading": E(P).isUploading.value,
+					"upload-progress": E(P).uploadProgress.value,
+					onUpload: E(I).handleUpload
 				}, null, 8, [
 					"is-uploading",
 					"upload-progress",
 					"onUpload"
-				]), f("button", {
+				])) : o("", !0), U.value ? (v(), s("button", {
+					key: 1,
+					"data-testid": "media-import-url",
 					class: "tpl:mt-2 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 					style: {
 						"border-color": "var(--tpl-border)",
 						color: "var(--tpl-text-muted)",
 						"background-color": "var(--tpl-bg)"
 					},
-					onClick: n[7] ||= (e) => k(P).showImportUrlModal.value = !0
-				}, [m(k(H), {
+					onClick: d[5] ||= (e) => E(I).showImportUrlModal.value = !0
+				}, [u(E(z), {
 					size: 14,
 					"stroke-width": 2
-				}), p(" " + D(h.value.mediaLibrary.importFromUrl), 1)])])) : u("", !0), m(nn, {
-					items: k(P).displayItems.value,
-					"selected-ids": k(N).selectedItems.value,
-					"is-loading": k(N).isLoading.value,
-					"has-more": k(N).viewMode.value === "files" && k(N).hasMore.value,
-					accept: e.accept,
-					layout: k(P).layoutMode.value,
-					onSelect: k(P).handleSelect,
-					onToggle: k(N).toggleSelection,
-					onLoadMore: k(N).loadMore,
-					onEdit: k(P).handleEditItem,
-					onReplace: k(P).handleReplaceItem
+				}), l(" " + C(_.value.mediaLibrary.importFromUrl), 1)])) : o("", !0)])) : o("", !0), u($t, {
+					items: E(I).displayItems.value,
+					"selected-ids": E(P).selectedItems.value,
+					"is-loading": E(P).isLoading.value,
+					"has-more": E(P).viewMode.value === "files" && E(P).hasMore.value,
+					accept: i.accept,
+					layout: E(I).layoutMode.value,
+					"search-query": E(P).searchQuery.value,
+					"can-update": G.value,
+					"can-replace": K.value,
+					onSelect: E(I).handleSelect,
+					onToggle: E(P).toggleSelection,
+					onLoadMore: E(P).loadMore,
+					onEdit: E(I).handleEditItem,
+					onReplace: E(I).handleReplaceItem,
+					onConfirm: ce
 				}, null, 8, [
 					"items",
 					"selected-ids",
@@ -2530,42 +2539,45 @@ var fr = ["data-tpl-theme"], pr = {
 					"has-more",
 					"accept",
 					"layout",
+					"search-query",
+					"can-update",
+					"can-replace",
 					"onSelect",
 					"onToggle",
 					"onLoadMore",
 					"onEdit",
 					"onReplace"
 				])])])]),
-				m(hn, {
-					visible: k(P).showImportUrlModal.value,
-					"is-importing": k(N).isImportingFromUrl.value,
-					error: k(N).importFromUrlError.value,
-					onImport: k(P).handleImportFromUrl,
-					onClose: n[8] ||= (e) => k(P).showImportUrlModal.value = !1
+				u(fn, {
+					visible: E(I).showImportUrlModal.value,
+					"is-importing": E(P).isImportingFromUrl.value,
+					error: E(P).importFromUrlError.value,
+					onImport: E(I).handleImportFromUrl,
+					onClose: d[6] ||= (e) => E(I).showImportUrlModal.value = !1
 				}, null, 8, [
 					"visible",
 					"is-importing",
 					"error",
 					"onImport"
 				]),
-				m(ft, {
-					visible: !!k(P).editingItem.value,
-					item: k(P).editingItem.value,
-					onSave: k(P).handleEditSave,
-					onClose: n[9] ||= (e) => k(P).editingItem.value = null
+				u(ct, {
+					visible: !!E(I).editingItem.value,
+					item: E(I).editingItem.value,
+					onSave: E(I).handleEditSave,
+					onClose: d[7] ||= (e) => E(I).editingItem.value = null
 				}, null, 8, [
 					"visible",
 					"item",
 					"onSave"
 				]),
-				m(Kn, {
-					visible: k(N).showReplaceWarning.value,
-					item: k(N).pendingReplaceItem.value,
-					"usage-info": k(N).replaceUsageInfo.value,
-					"is-replacing": k(N).isReplacing.value,
-					error: k(N).replaceError.value,
-					onReplace: k(P).handleReplaceFile,
-					onClose: k(N).cancelReplace
+				u(zn, {
+					visible: E(P).showReplaceWarning.value,
+					item: E(P).pendingReplaceItem.value,
+					"usage-info": E(P).replaceUsageInfo.value,
+					"is-replacing": E(P).isReplacing.value,
+					error: E(P).replaceError.value,
+					onReplace: E(I).handleReplaceFile,
+					onClose: E(P).cancelReplace
 				}, null, 8, [
 					"visible",
 					"item",
@@ -2575,7 +2587,7 @@ var fr = ["data-tpl-theme"], pr = {
 					"onReplace",
 					"onClose"
 				]),
-				m(o, {
+				u(n, {
 					"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 					"enter-from-class": "tpl:opacity-0",
 					"enter-to-class": "tpl:opacity-100",
@@ -2583,7 +2595,7 @@ var fr = ["data-tpl-theme"], pr = {
 					"leave-from-class": "tpl:opacity-100",
 					"leave-to-class": "tpl:opacity-0"
 				}, {
-					default: M(() => [k(N).showDeleteWarning.value ? (S(), d("div", {
+					default: k(() => [E(P).showDeleteWarning.value ? (v(), s("div", {
 						key: 0,
 						class: "tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]",
 						style: {
@@ -2591,112 +2603,108 @@ var fr = ["data-tpl-theme"], pr = {
 							"backdrop-filter": "blur(8px)",
 							"-webkit-backdrop-filter": "blur(8px)"
 						},
-						onClick: n[12] ||= F((...e) => k(N).cancelDelete && k(N).cancelDelete(...e), ["self"])
-					}, [f("div", Hr, [
-						f("h3", Ur, D(h.value.mediaLibrary.deleteWarningTitle), 1),
-						f("p", {
-							class: y(["tpl:text-xs", k(P).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
+						onClick: d[10] ||= M((...e) => E(P).cancelDelete && E(P).cancelDelete(...e), ["self"])
+					}, [c("div", kr, [
+						c("h3", Ar, C(_.value.mediaLibrary.deleteWarningTitle), 1),
+						c("p", {
+							class: h(["tpl:text-xs", E(I).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
 							style: { color: "var(--tpl-text-muted)" }
-						}, D(h.value.mediaLibrary.deleteWarningMessage), 3),
-						k(P).hasUsedFiles.value ? (S(), d("p", Wr, D(h.value.mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
-						k(P).hasUsedFiles.value ? (S(), d("div", Gr, [(S(!0), d(i, null, T(k(N).deleteUsageInfo.value, (e, t) => (S(), d("div", {
-							key: t,
+						}, C(_.value.mediaLibrary.deleteWarningMessage), 3),
+						E(I).hasUsedFiles.value ? (v(), s("p", jr, C(_.value.mediaLibrary.deleteWarningUsageNote), 1)) : o("", !0),
+						E(I).hasUsedFiles.value ? (v(), s("div", Mr, [(v(!0), s(e, null, x(E(P).deleteUsageInfo.value, (t, n) => (v(), s("div", {
+							key: n,
 							class: "tpl:text-xs",
 							style: { color: "var(--tpl-text)" }
-						}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", Kr, D(k(P).displayItems.value.find((e) => e.id === t)?.filename || t), 1), f("span", qr, " - " + D(h.value.mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
-						f("div", Jr, [f("button", {
+						}, [t.templateCount > 0 ? (v(), s(e, { key: 0 }, [c("span", Nr, C(E(I).displayItems.value.find((e) => e.id === n)?.filename || n), 1), c("span", Pr, " - " + C(_.value.mediaLibrary.usedInTemplates.replace("{count}", t.templateCount.toString())), 1)], 64)) : o("", !0)]))), 128))])) : o("", !0),
+						c("div", Fr, [c("button", {
 							class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 							style: {
 								"border-color": "var(--tpl-border)",
 								color: "var(--tpl-text)",
 								"background-color": "var(--tpl-bg)"
 							},
-							onClick: n[10] ||= (...e) => k(N).cancelDelete && k(N).cancelDelete(...e)
-						}, D(h.value.mediaLibrary.cancel), 1), f("button", {
+							onClick: d[8] ||= (...e) => E(P).cancelDelete && E(P).cancelDelete(...e)
+						}, C(_.value.mediaLibrary.cancel), 1), c("button", {
 							class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 							style: {
 								"border-color": "var(--tpl-danger)",
 								color: "var(--tpl-danger)",
 								"background-color": "var(--tpl-danger-light)"
 							},
-							onClick: n[11] ||= (...e) => k(N).confirmDelete && k(N).confirmDelete(...e)
-						}, D(k(P).hasUsedFiles.value ? h.value.mediaLibrary.deleteAnyway : h.value.mediaLibrary.confirmDelete), 1)])
-					])])) : u("", !0)]),
+							onClick: d[9] ||= (...e) => E(P).confirmDelete && E(P).confirmDelete(...e)
+						}, C(E(I).hasUsedFiles.value ? _.value.mediaLibrary.deleteAnyway : _.value.mediaLibrary.confirmDelete), 1)])
+					])])) : o("", !0)]),
 					_: 1
 				}),
-				f("div", Yr, [f("div", Xr, [k(N).previewItem.value ? (S(), l(jn, {
+				c("div", Ir, [c("div", Lr, [E(P).previewItem.value ? (v(), a(wn, {
 					key: 0,
-					"selected-conversion": k(P).selectedConversion.value,
-					"onUpdate:selectedConversion": n[13] ||= (e) => k(P).selectedConversion.value = e,
-					item: k(N).previewItem.value,
-					folders: k(N).folders.value
-				}, null, 8, [
-					"selected-conversion",
-					"item",
-					"folders"
-				])) : u("", !0)]), f("div", Zr, [k(N).selectedItems.value.size > 0 ? (S(), d("div", Qr, [k(N).previewItem.value ? (S(), d("button", {
+					item: E(P).previewItem.value,
+					folders: E(I).folderTree.value
+				}, null, 8, ["item", "folders"])) : o("", !0)]), c("div", Rr, [E(P).selectedItems.value.size > 0 ? (v(), s("div", zr, [E(P).previewItem.value ? (v(), s("button", {
 					key: 0,
 					class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
-					style: b({
-						borderColor: k(P).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
-						color: k(P).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
+					style: g({
+						borderColor: E(I).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
+						color: E(I).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
 						backgroundColor: "var(--tpl-bg)"
 					}),
-					onClick: n[14] ||= (e) => k(P).copy(k(P).selectedUrl.value)
-				}, [k(P).copied.value ? (S(), l(k(I), {
+					onClick: d[11] ||= (e) => E(I).copy(E(I).selectedUrl.value)
+				}, [E(I).copied.value ? (v(), a(E(N), {
 					key: 1,
 					size: 12,
 					"stroke-width": 2
-				})) : (S(), l(k(R), {
+				})) : (v(), a(E(F), {
 					key: 0,
 					size: 12,
 					"stroke-width": 2
-				})), p(" " + D(k(P).copied.value ? h.value.mediaLibrary.copied : h.value.mediaLibrary.copyUrl), 1)], 4)) : u("", !0), f("div", $r, [f("button", {
+				})), l(" " + C(E(I).copied.value ? _.value.mediaLibrary.copied : _.value.mediaLibrary.copyUrl), 1)], 4)) : o("", !0), q.value ? (v(), s("div", Br, [c("button", {
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 					style: {
 						"border-color": "var(--tpl-border)",
 						color: "var(--tpl-text)",
 						"background-color": "var(--tpl-bg)"
 					},
-					onClick: n[15] ||= (e) => k(P).showMovePicker.value = !k(P).showMovePicker.value
-				}, D(h.value.mediaLibrary.moveSelected), 1), k(P).showMovePicker.value ? (S(), l(bn, {
+					onClick: d[12] ||= (e) => E(I).showMovePicker.value = !E(I).showMovePicker.value
+				}, C(_.value.mediaLibrary.moveSelected), 1), E(I).showMovePicker.value ? (v(), a(_n, {
 					key: 0,
-					folders: k(N).folders.value,
-					"current-folder-id": k(N).currentFolderId.value,
-					onSelect: k(P).handleMoveToFolder,
-					onClose: n[16] ||= (e) => k(P).showMovePicker.value = !1
+					folders: E(I).folderTree.value,
+					"current-folder-id": E(P).currentFolderId.value,
+					onSelect: E(I).handleMoveToFolder,
+					onClose: d[13] ||= (e) => E(I).showMovePicker.value = !1
 				}, null, 8, [
 					"folders",
 					"current-folder-id",
 					"onSelect"
-				])) : u("", !0)])])) : u("", !0), f("div", ei, [k(N).selectedItems.value.size > 0 ? (S(), d("button", {
+				])) : o("", !0)])) : o("", !0)])) : o("", !0), c("div", Vr, [se.value > 0 ? (v(), s("button", {
 					key: 0,
+					"data-testid": "media-delete",
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 					style: {
 						"border-color": "var(--tpl-danger)",
 						color: "var(--tpl-danger)",
 						"background-color": "var(--tpl-danger-light)"
 					},
-					onClick: n[17] ||= (...e) => k(P).handleDeleteClick && k(P).handleDeleteClick(...e)
-				}, D(h.value.mediaLibrary.deleteSelected), 1)) : u("", !0), f("button", {
+					onClick: he
+				}, C(_.value.mediaLibrary.deleteSelected), 1)) : o("", !0), c("button", {
+					"data-testid": "media-confirm",
 					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-4 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 					style: {
 						"background-color": "var(--tpl-primary)",
 						color: "var(--tpl-bg)"
 					},
-					disabled: !z(),
-					onClick: B
-				}, D(e.accept?.length ? h.value.mediaLibrary.selectImage : h.value.mediaLibrary.selectFile), 9, ti)])])])
-			])], 8, fr)) : u("", !0)]),
+					disabled: !ae.value,
+					onClick: ce
+				}, C(i.accept?.length ? _.value.mediaLibrary.selectImage : _.value.mediaLibrary.selectFile), 9, Hr)])])])
+			])], 8, or)) : o("", !0)]),
 			_: 1
 		})], 8, ["to"]));
 	}
 });
 //#endregion
 //#region src/composables/useMediaPicker.ts
-function ri() {
-	let e = _("onRequestMedia"), t = w(!1), n = s(() => !!e);
-	async function r(n) {
+function Wr() {
+	let e = p("onRequestMedia"), t = b(!1), n = r(() => !!e);
+	async function i(n) {
 		if (!e) return null;
 		t.value = !0;
 		try {
@@ -2708,12 +2716,12 @@ function ri() {
 	return {
 		isPluggableMediaEnabled: n,
 		isRequesting: t,
-		requestMedia: r
+		requestMedia: i
 	};
 }
 //#endregion
 //#region src/standalone/MediaLibrary.vue?vue&type=script&setup=true&lang.ts
-var ii = {
+var Gr = {
 	class: "tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
 	style: {
 		width: "100%",
@@ -2721,121 +2729,154 @@ var ii = {
 		"background-color": "var(--tpl-bg-elevated)",
 		border: "1px solid var(--tpl-border)"
 	}
-}, ai = {
+}, Kr = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-3.5",
 	style: { "border-color": "var(--tpl-border)" }
-}, oi = {
+}, qr = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, si = { class: "tpl:flex tpl:items-center tpl:gap-3" }, ci = { class: "tpl:relative" }, li = ["value", "placeholder"], ui = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, di = {
+}, Jr = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Yr = { class: "tpl:relative" }, Xr = [
+	"value",
+	"disabled",
+	"placeholder"
+], Zr = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, Qr = {
 	key: 0,
 	class: "tpl:flex tpl:w-48 tpl:shrink-0 tpl:flex-col tpl:border-r",
 	style: {
 		"border-color": "var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, fi = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, pi = {
+}, $r = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, ei = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-b tpl:px-4 tpl:py-2.5",
 	style: { "border-color": "var(--tpl-border)" }
-}, mi = { class: "tpl:flex tpl:items-center tpl:gap-2" }, hi = ["title"], gi = {
-	key: 0,
+}, ti = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ni = ["title"], ri = {
+	key: 1,
 	class: "tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, _i = {
+}, ii = {
 	class: "tpl:flex tpl:rounded-md tpl:p-0.5",
 	style: {
 		border: "1px solid var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, vi = ["title"], yi = ["title"], bi = { class: "tpl:flex tpl:items-center tpl:gap-2" }, xi = ["value"], Si = { value: "" }, Ci = ["value"], wi = ["value"], Ti = { value: "newest" }, Ei = { value: "oldest" }, Di = { value: "name_asc" }, Oi = { value: "name_desc" }, ki = { value: "size_asc" }, Ai = { value: "size_desc" }, ji = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Mi = {
+}, ai = ["title"], oi = ["title"], si = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ci = ["value"], li = { value: "" }, ui = ["value"], di = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, fi = {
 	key: 0,
 	class: "tpl:px-4 tpl:pt-3"
-}, Ni = {
+}, pi = {
 	class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
 	style: {
 		"background-color": "var(--tpl-bg-elevated)",
 		"box-shadow": "var(--tpl-shadow-xl)"
 	}
-}, Pi = {
+}, mi = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Fi = {
+}, hi = {
 	key: 0,
+	"data-testid": "media-delete-usage",
 	class: "tpl:mb-4 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Ii = {
+}, gi = {
 	key: 1,
 	class: "tpl:mb-4 tpl:max-h-32 tpl:overflow-y-auto tpl:rounded tpl:border tpl:p-2",
 	style: { "border-color": "var(--tpl-border)" }
-}, Li = { class: "tpl:font-medium" }, Ri = { style: { color: "var(--tpl-text-muted)" } }, zi = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Bi = {
+}, _i = { class: "tpl:font-medium" }, vi = { style: { color: "var(--tpl-text-muted)" } }, yi = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, bi = {
 	class: "tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3",
 	style: { "border-color": "var(--tpl-border)" }
-}, Vi = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Hi = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Ui = {
+}, xi = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Si = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Ci = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, Wi = { class: "tpl:relative" }, Gi = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ki = ["disabled"], qi = /* @__PURE__ */ h({
+}, wi = {
+	key: 1,
+	class: "tpl:relative"
+}, Ti = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ei = ["disabled"], Di = /* @__PURE__ */ d({
 	__name: "MediaLibrary",
 	props: {
-		authManager: {},
-		projectId: {},
-		planConfig: {},
+		provider: {},
 		translations: {},
 		onSelect: { type: Function },
-		onError: { type: Function }
+		accept: {},
+		locale: {}
 	},
 	emits: ["ready"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, a = s(() => n.translations);
-		C(_e, w(n.translations));
-		let c = {
-			config: w(n.planConfig),
-			isLoading: w(!1),
-			hasFeature: (e) => n.planConfig.features[e] ?? !1,
-			features: s(() => n.planConfig.features),
-			fetchConfig: async () => {}
+	setup(t, { emit: i }) {
+		let d = t, f = i, p = r(() => d.translations);
+		y(pe, b(d.translations)), y(me, w(() => d.locale));
+		let m = {
+			get maxFileSize() {
+				return d.provider.maxFileSize;
+			},
+			get mimeTypes() {
+				return d.provider.mimeTypes;
+			},
+			get accept() {
+				return d.accept;
+			}
 		};
-		C(he, c);
-		let h = s(() => n.planConfig.storage.used_bytes ?? 0), g = s(() => n.planConfig.storage.limit_bytes ?? 0), { availableCategories: _ } = Q(c), v = me({
-			projectId: n.projectId,
-			authManager: n.authManager,
-			onError: n.onError
-		}), E = rr({
-			library: v,
-			translations: a
+		y(de, m);
+		let { isAcceptedMimeType: S, availableCategories: T } = $(m), D = ue({ provider: d.provider }), O = Zn({
+			library: D,
+			translations: p
+		}), A = r(() => typeof d.provider.create == "function"), j = r(() => d.provider.folders !== !1), P = r(() => typeof d.provider.importFromUrl == "function"), I = r(() => typeof d.provider.delete == "function"), L = r(() => typeof d.provider.update == "function"), V = r(() => typeof d.provider.replace == "function"), U = r(() => typeof d.provider.frequentlyUsed == "function"), W = r(() => {
+			let e = d.provider.folders;
+			return e !== !1 && typeof e.move == "function";
+		}), G = r(() => {
+			let e = d.provider.folders;
+			return e !== !1 && typeof e.create == "function";
+		}), K = r(() => {
+			let e = d.provider.folders;
+			return e !== !1 && typeof e.update == "function";
+		}), te = r(() => {
+			let e = d.provider.folders;
+			return e !== !1 && typeof e.delete == "function";
+		}), q = r(() => D.isLoading.value && O.displayItems.value.length === 0), ne = r(() => {
+			let e = D.previewItem.value;
+			return e ? !d.accept?.length || S(e.mimeType ?? "", d.accept) : !1;
+		}), re = r(() => {
+			if (!I.value) return 0;
+			let e = 0;
+			for (let t of D.selectedItems.value) O.displayItems.value.find((e) => e.id === t)?.canDelete !== !1 && (e += 1);
+			return e;
 		});
-		function O() {
-			if (!v.previewItem.value) return;
-			let e = v.previewItem.value, t = {
-				...e,
-				url: E.selectedUrl.value || e.url
-			};
-			n.onSelect?.(t);
-		}
-		return x(() => {
-			v.loadItems(), v.loadFrequentlyUsed(), r("ready");
-		}), (t, n) => (S(), d("div", ii, [
-			f("div", ai, [f("h2", oi, D(a.value.mediaLibrary.title), 1), f("div", si, [m(nr, {
-				"used-bytes": h.value,
-				"limit-bytes": g.value,
+		function J() {
+			d.onSelect && ne.value && D.previewItem.value && d.onSelect(D.previewItem.value);
+		}
+		function Y(e) {
+			let t = e.target.value;
+			D.filterByCategory(t || null);
+		}
+		async function ie() {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of D.selectedItems.value) O.displayItems.value.find((e) => e.id === t)?.canDelete !== !1 && e.add(t);
+			D.selectedItems.value = e, await O.handleDeleteClick();
+		}
+		return _(() => {
+			d.accept?.length === 1 && (D.categoryFilter.value = d.accept[0]), D.loadItems(), D.loadFrequentlyUsed(), D.loadStorage(), f("ready");
+		}), (r, i) => (v(), s("div", Gr, [
+			c("div", Kr, [c("h2", qr, C(p.value.mediaLibrary.title), 1), c("div", Jr, [E(D).storageInfo.value ? (v(), a(Yn, {
+				key: 0,
+				"used-bytes": E(D).storageInfo.value.usedBytes,
+				"limit-bytes": E(D).storageInfo.value.limitBytes,
 				size: 22
-			}, null, 8, ["used-bytes", "limit-bytes"]), f("div", ci, [f("input", {
-				value: k(E).searchInput.value,
+			}, null, 8, ["used-bytes", "limit-bytes"])) : o("", !0), c("div", Yr, [c("input", {
+				value: E(O).searchInput.value,
 				type: "text",
-				class: "tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)]",
+				disabled: q.value,
+				class: "tpl:w-52 tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-3 tpl:pl-8 tpl:text-xs tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:outline-none tpl:focus:shadow-[var(--tpl-ring)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 				style: {
 					"border-color": "var(--tpl-border)",
 					"background-color": "var(--tpl-bg)",
 					color: "var(--tpl-text)"
 				},
-				placeholder: a.value.mediaLibrary.searchPlaceholder,
-				onInput: n[0] ||= (e) => k(E).handleSearchInput(e.target.value)
-			}, null, 40, li), m(k(Y), {
+				placeholder: p.value.mediaLibrary.searchPlaceholder,
+				onInput: i[0] ||= (e) => E(O).handleSearchInput(e.target.value)
+			}, null, 40, Xr), u(E(ee), {
 				class: "tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2",
 				size: 13,
 				"stroke-width": 2,
 				style: { color: "var(--tpl-text-dim)" }
 			})])])]),
-			f("div", ui, [m(o, {
+			c("div", Zr, [u(n, {
 				"enter-active-class": "tpl:transition-all tpl:duration-200 tpl:ease-out",
 				"enter-from-class": "tpl:-ml-48 tpl:opacity-0",
 				"enter-to-class": "tpl:ml-0 tpl:opacity-100",
@@ -2843,76 +2884,84 @@ var ii = {
 				"leave-from-class": "tpl:ml-0 tpl:opacity-100",
 				"leave-to-class": "tpl:-ml-48 tpl:opacity-0"
 			}, {
-				default: M(() => [k(E).showSidebar.value ? (S(), d("div", di, [m(wt, {
-					folders: k(v).folders.value,
-					"current-folder-id": k(v).currentFolderId.value,
-					"view-mode": k(v).viewMode.value,
-					"has-frequently-used": k(E).hasFrequentlyUsed.value,
-					onNavigate: k(v).navigateToFolder,
-					onCreateFolder: k(E).handleCreateFolder,
-					onRenameFolder: k(E).handleRenameFolder,
-					onDeleteFolder: k(E).handleDeleteFolder,
-					onShowFrequentlyUsed: k(v).showFrequentlyUsed
+				default: k(() => [j.value && E(O).showSidebar.value ? (v(), s("div", Qr, [u(bt, {
+					folders: E(O).folderTree.value,
+					"current-folder-id": E(D).currentFolderId.value,
+					"view-mode": E(D).viewMode.value,
+					"has-frequently-used": U.value && E(O).hasFrequentlyUsed.value,
+					"can-create-folder": G.value,
+					"can-rename-folder": K.value,
+					"can-delete-folder": te.value,
+					onNavigate: E(D).navigateToFolder,
+					onCreateFolder: E(O).handleCreateFolder,
+					onRenameFolder: E(O).handleRenameFolder,
+					onDeleteFolder: E(O).handleDeleteFolder,
+					onShowFrequentlyUsed: E(D).showFrequentlyUsed
 				}, null, 8, [
 					"folders",
 					"current-folder-id",
 					"view-mode",
 					"has-frequently-used",
+					"can-create-folder",
+					"can-rename-folder",
+					"can-delete-folder",
 					"onNavigate",
 					"onCreateFolder",
 					"onRenameFolder",
 					"onDeleteFolder",
 					"onShowFrequentlyUsed"
-				])])) : u("", !0)]),
+				])])) : o("", !0)]),
 				_: 1
-			}), f("div", fi, [f("div", pi, [f("div", mi, [
-				f("button", {
+			}), c("div", $r, [c("div", ei, [c("div", ti, [
+				j.value ? (v(), s("button", {
+					key: 0,
+					"data-testid": "media-folder-toggle",
 					class: "tpl:flex tpl:size-7 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150",
-					style: b({
-						color: k(E).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: k(E).showSidebar.value ? "var(--tpl-bg)" : "transparent",
-						border: k(E).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+					style: g({
+						color: E(O).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: E(O).showSidebar.value ? "var(--tpl-bg)" : "transparent",
+						border: E(O).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
 					}),
-					title: k(E).showSidebar.value ? a.value.mediaLibrary.hideFolders : a.value.mediaLibrary.showFolders,
-					onClick: n[1] ||= (e) => k(E).showSidebar.value = !k(E).showSidebar.value
-				}, [m(k(G), {
+					title: E(O).showSidebar.value ? p.value.mediaLibrary.hideFolders : p.value.mediaLibrary.showFolders,
+					onClick: i[1] ||= (e) => E(O).showSidebar.value = !E(O).showSidebar.value
+				}, [u(E(H), {
 					size: 16,
 					"stroke-width": 2
-				})], 12, hi),
-				k(v).viewMode.value === "frequently-used" ? (S(), d("span", gi, D(a.value.mediaLibrary.frequentlyUsed), 1)) : (S(), l(Te, {
-					key: 1,
-					folders: k(v).folders.value,
-					"current-folder-id": k(v).currentFolderId.value,
-					onNavigate: k(v).navigateToFolder
+				})], 12, ni)) : o("", !0),
+				E(D).viewMode.value === "frequently-used" ? (v(), s("span", ri, C(p.value.mediaLibrary.frequentlyUsed), 1)) : (v(), a(be, {
+					key: 2,
+					folders: E(O).folderTree.value,
+					"current-folder-id": E(D).currentFolderId.value,
+					onNavigate: E(D).navigateToFolder
 				}, null, 8, [
 					"folders",
 					"current-folder-id",
 					"onNavigate"
 				])),
-				f("div", _i, [f("button", {
+				c("div", ii, [c("button", {
 					class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
-					style: b({
-						color: k(E).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: k(E).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+					style: g({
+						color: E(O).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: E(O).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
 					}),
-					title: a.value.mediaLibrary.viewGrid,
-					onClick: n[2] ||= (e) => k(E).layoutMode.value = "grid"
-				}, [m(k(V), {
+					title: p.value.mediaLibrary.viewGrid,
+					onClick: i[2] ||= (e) => E(O).layoutMode.value = "grid"
+				}, [u(E(R), {
 					size: 14,
 					"stroke-width": 2
-				})], 12, vi), f("button", {
+				})], 12, ai), c("button", {
 					class: "tpl:flex tpl:size-6 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded tpl:transition-all tpl:duration-150",
-					style: b({
-						color: k(E).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: k(E).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+					style: g({
+						color: E(O).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: E(O).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
 					}),
-					title: a.value.mediaLibrary.viewList,
-					onClick: n[3] ||= (e) => k(E).layoutMode.value = "list"
-				}, [m(k(U), {
+					title: p.value.mediaLibrary.viewList,
+					onClick: i[3] ||= (e) => E(O).layoutMode.value = "list"
+				}, [u(E(B), {
 					size: 14,
 					"stroke-width": 2
-				})], 12, yi)])
-			]), f("div", bi, [k(_).length > 1 ? (S(), d("select", {
+				})], 12, oi)])
+			]), c("div", si, [E(T).length > 1 ? (v(), s("select", {
 				key: 0,
 				class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
 				style: {
@@ -2920,99 +2969,95 @@ var ii = {
 					"background-color": "var(--tpl-bg)",
 					color: "var(--tpl-text)"
 				},
-				value: k(v).categoryFilter.value ?? "",
-				onChange: n[4] ||= (e) => k(v).filterByCategory(e.target.value || null)
-			}, [f("option", Si, D(a.value.mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(k(_), (e) => (S(), d("option", {
+				value: E(D).categoryFilter.value ?? "",
+				onChange: Y
+			}, [c("option", li, C(p.value.mediaLibrary.filterAll), 1), (v(!0), s(e, null, x(E(T), (e) => (v(), s("option", {
 				key: e,
 				value: e
-			}, D(k(E).getCategoryLabel(e)), 9, Ci))), 128))], 40, xi)) : u("", !0), f("select", {
-				class: "tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-7 tpl:pl-2.5 tpl:text-xs tpl:transition-all tpl:duration-150 tpl:outline-none",
-				style: {
-					"border-color": "var(--tpl-border)",
-					"background-color": "var(--tpl-bg)",
-					color: "var(--tpl-text)"
-				},
-				value: k(v).sortOption.value,
-				onChange: n[5] ||= (e) => k(v).sortBy(e.target.value)
-			}, [
-				f("option", Ti, D(a.value.mediaLibrary.sortNewest), 1),
-				f("option", Ei, D(a.value.mediaLibrary.sortOldest), 1),
-				f("option", Di, D(a.value.mediaLibrary.sortNameAsc), 1),
-				f("option", Oi, D(a.value.mediaLibrary.sortNameDesc), 1),
-				f("option", ki, D(a.value.mediaLibrary.sortSizeAsc), 1),
-				f("option", Ai, D(a.value.mediaLibrary.sortSizeDesc), 1)
-			], 40, wi)])]), f("div", ji, [k(v).viewMode.value === "files" ? (S(), d("div", Mi, [m(Zn, {
-				"is-uploading": k(v).isUploading.value,
-				"upload-progress": k(v).uploadProgress.value,
-				onUpload: k(E).handleUpload
+			}, C(E(O).getCategoryLabel(e)), 9, ui))), 128))], 40, ci)) : o("", !0)])]), c("div", di, [E(D).viewMode.value === "files" && (A.value || P.value) ? (v(), s("div", fi, [A.value ? (v(), a(Wn, {
+				key: 0,
+				"is-uploading": E(D).isUploading.value,
+				"upload-progress": E(D).uploadProgress.value,
+				onUpload: E(O).handleUpload
 			}, null, 8, [
 				"is-uploading",
 				"upload-progress",
 				"onUpload"
-			]), f("button", {
+			])) : o("", !0), P.value ? (v(), s("button", {
+				key: 1,
+				"data-testid": "media-import-url",
 				class: "tpl:mt-2 tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:border-dashed tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 				style: {
 					"border-color": "var(--tpl-border)",
 					color: "var(--tpl-text-muted)",
 					"background-color": "var(--tpl-bg)"
 				},
-				onClick: n[6] ||= (e) => k(E).showImportUrlModal.value = !0
-			}, [m(k(H), {
+				onClick: i[4] ||= (e) => E(O).showImportUrlModal.value = !0
+			}, [u(E(z), {
 				size: 14,
 				"stroke-width": 2
-			}), p(" " + D(a.value.mediaLibrary.importFromUrl), 1)])])) : u("", !0), m(nn, {
-				items: k(E).displayItems.value,
-				"selected-ids": k(v).selectedItems.value,
-				"is-loading": k(v).isLoading.value,
-				"has-more": k(v).viewMode.value === "files" && k(v).hasMore.value,
-				layout: k(E).layoutMode.value,
-				onSelect: k(E).handleSelect,
-				onToggle: k(v).toggleSelection,
-				onLoadMore: k(v).loadMore,
-				onEdit: k(E).handleEditItem,
-				onReplace: k(E).handleReplaceItem
+			}), l(" " + C(p.value.mediaLibrary.importFromUrl), 1)])) : o("", !0)])) : o("", !0), u($t, {
+				items: E(O).displayItems.value,
+				"selected-ids": E(D).selectedItems.value,
+				"is-loading": E(D).isLoading.value,
+				"has-more": E(D).viewMode.value === "files" && E(D).hasMore.value,
+				accept: t.accept,
+				layout: E(O).layoutMode.value,
+				"search-query": E(D).searchQuery.value,
+				"can-update": L.value,
+				"can-replace": V.value,
+				onSelect: E(O).handleSelect,
+				onToggle: E(D).toggleSelection,
+				onLoadMore: E(D).loadMore,
+				onEdit: E(O).handleEditItem,
+				onReplace: E(O).handleReplaceItem,
+				onConfirm: J
 			}, null, 8, [
 				"items",
 				"selected-ids",
 				"is-loading",
 				"has-more",
+				"accept",
 				"layout",
+				"search-query",
+				"can-update",
+				"can-replace",
 				"onSelect",
 				"onToggle",
 				"onLoadMore",
 				"onEdit",
 				"onReplace"
 			])])])]),
-			m(hn, {
-				visible: k(E).showImportUrlModal.value,
-				"is-importing": k(v).isImportingFromUrl.value,
-				error: k(v).importFromUrlError.value,
-				onImport: k(E).handleImportFromUrl,
-				onClose: n[7] ||= (e) => k(E).showImportUrlModal.value = !1
+			u(fn, {
+				visible: E(O).showImportUrlModal.value,
+				"is-importing": E(D).isImportingFromUrl.value,
+				error: E(D).importFromUrlError.value,
+				onImport: E(O).handleImportFromUrl,
+				onClose: i[5] ||= (e) => E(O).showImportUrlModal.value = !1
 			}, null, 8, [
 				"visible",
 				"is-importing",
 				"error",
 				"onImport"
 			]),
-			m(ft, {
-				visible: !!k(E).editingItem.value,
-				item: k(E).editingItem.value,
-				onSave: k(E).handleEditSave,
-				onClose: n[8] ||= (e) => k(E).editingItem.value = null
+			u(ct, {
+				visible: !!E(O).editingItem.value,
+				item: E(O).editingItem.value,
+				onSave: E(O).handleEditSave,
+				onClose: i[6] ||= (e) => E(O).editingItem.value = null
 			}, null, 8, [
 				"visible",
 				"item",
 				"onSave"
 			]),
-			m(Kn, {
-				visible: k(v).showReplaceWarning.value,
-				item: k(v).pendingReplaceItem.value,
-				"usage-info": k(v).replaceUsageInfo.value,
-				"is-replacing": k(v).isReplacing.value,
-				error: k(v).replaceError.value,
-				onReplace: k(E).handleReplaceFile,
-				onClose: k(v).cancelReplace
+			u(zn, {
+				visible: E(D).showReplaceWarning.value,
+				item: E(D).pendingReplaceItem.value,
+				"usage-info": E(D).replaceUsageInfo.value,
+				"is-replacing": E(D).isReplacing.value,
+				error: E(D).replaceError.value,
+				onReplace: E(O).handleReplaceFile,
+				onClose: E(D).cancelReplace
 			}, null, 8, [
 				"visible",
 				"item",
@@ -3022,7 +3067,7 @@ var ii = {
 				"onReplace",
 				"onClose"
 			]),
-			m(o, {
+			u(n, {
 				"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
 				"enter-from-class": "tpl:opacity-0",
 				"enter-to-class": "tpl:opacity-100",
@@ -3030,154 +3075,147 @@ var ii = {
 				"leave-from-class": "tpl:opacity-100",
 				"leave-to-class": "tpl:opacity-0"
 			}, {
-				default: M(() => [k(v).showDeleteWarning.value ? (S(), d("div", {
+				default: k(() => [E(D).showDeleteWarning.value ? (v(), s("div", {
 					key: 0,
 					class: "tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]",
 					style: {
-						"background-color": "rgba(0, 0, 0, 0.5)",
+						"background-color": "var(--tpl-overlay)",
 						"backdrop-filter": "blur(8px)",
 						"-webkit-backdrop-filter": "blur(8px)"
 					},
-					onClick: n[11] ||= F((...e) => k(v).cancelDelete && k(v).cancelDelete(...e), ["self"])
-				}, [f("div", Ni, [
-					f("h3", Pi, D(a.value.mediaLibrary.deleteWarningTitle), 1),
-					f("p", {
-						class: y(["tpl:text-xs", k(E).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
+					onClick: i[9] ||= M((...e) => E(D).cancelDelete && E(D).cancelDelete(...e), ["self"])
+				}, [c("div", pi, [
+					c("h3", mi, C(p.value.mediaLibrary.deleteWarningTitle), 1),
+					c("p", {
+						class: h(["tpl:text-xs", E(O).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
 						style: { color: "var(--tpl-text-muted)" }
-					}, D(a.value.mediaLibrary.deleteWarningMessage), 3),
-					k(E).hasUsedFiles.value ? (S(), d("p", Fi, D(a.value.mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
-					k(E).hasUsedFiles.value ? (S(), d("div", Ii, [(S(!0), d(i, null, T(k(v).deleteUsageInfo.value, (e, t) => (S(), d("div", {
-						key: t,
+					}, C(p.value.mediaLibrary.deleteWarningMessage), 3),
+					E(O).hasUsedFiles.value ? (v(), s("p", hi, C(p.value.mediaLibrary.deleteWarningUsageNote), 1)) : o("", !0),
+					E(O).hasUsedFiles.value ? (v(), s("div", gi, [(v(!0), s(e, null, x(E(D).deleteUsageInfo.value, (t, n) => (v(), s("div", {
+						key: n,
 						class: "tpl:text-xs",
 						style: { color: "var(--tpl-text)" }
-					}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", Li, D(k(E).displayItems.value.find((e) => e.id === t)?.filename || t), 1), f("span", Ri, " - " + D(a.value.mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
-					f("div", zi, [f("button", {
+					}, [t.templateCount > 0 ? (v(), s(e, { key: 0 }, [c("span", _i, C(E(O).displayItems.value.find((e) => e.id === n)?.filename || n), 1), c("span", vi, " - " + C(p.value.mediaLibrary.usedInTemplates.replace("{count}", t.templateCount.toString())), 1)], 64)) : o("", !0)]))), 128))])) : o("", !0),
+					c("div", yi, [c("button", {
 						class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 						style: {
 							"border-color": "var(--tpl-border)",
 							color: "var(--tpl-text)",
 							"background-color": "var(--tpl-bg)"
 						},
-						onClick: n[9] ||= (...e) => k(v).cancelDelete && k(v).cancelDelete(...e)
-					}, D(a.value.mediaLibrary.cancel), 1), f("button", {
+						onClick: i[7] ||= (...e) => E(D).cancelDelete && E(D).cancelDelete(...e)
+					}, C(p.value.mediaLibrary.cancel), 1), c("button", {
 						class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 						style: {
 							"border-color": "var(--tpl-danger)",
 							color: "var(--tpl-danger)",
 							"background-color": "var(--tpl-danger-light)"
 						},
-						onClick: n[10] ||= (...e) => k(v).confirmDelete && k(v).confirmDelete(...e)
-					}, D(k(E).hasUsedFiles.value ? a.value.mediaLibrary.deleteAnyway : a.value.mediaLibrary.confirmDelete), 1)])
-				])])) : u("", !0)]),
+						onClick: i[8] ||= (...e) => E(D).confirmDelete && E(D).confirmDelete(...e)
+					}, C(E(O).hasUsedFiles.value ? p.value.mediaLibrary.deleteAnyway : p.value.mediaLibrary.confirmDelete), 1)])
+				])])) : o("", !0)]),
 				_: 1
 			}),
-			f("div", Bi, [f("div", Vi, [k(v).previewItem.value ? (S(), l(jn, {
+			c("div", bi, [c("div", xi, [E(D).previewItem.value ? (v(), a(wn, {
 				key: 0,
-				"selected-conversion": k(E).selectedConversion.value,
-				"onUpdate:selectedConversion": n[12] ||= (e) => k(E).selectedConversion.value = e,
-				item: k(v).previewItem.value,
-				folders: k(v).folders.value
-			}, null, 8, [
-				"selected-conversion",
-				"item",
-				"folders"
-			])) : u("", !0)]), f("div", Hi, [k(v).selectedItems.value.size > 0 ? (S(), d("div", Ui, [k(v).previewItem.value ? (S(), d("button", {
+				item: E(D).previewItem.value,
+				folders: E(O).folderTree.value
+			}, null, 8, ["item", "folders"])) : o("", !0)]), c("div", Si, [E(D).selectedItems.value.size > 0 ? (v(), s("div", Ci, [E(D).previewItem.value ? (v(), s("button", {
 				key: 0,
 				class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
-				style: b({
-					borderColor: k(E).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
-					color: k(E).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
+				style: g({
+					borderColor: E(O).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
+					color: E(O).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
 					backgroundColor: "var(--tpl-bg)"
 				}),
-				onClick: n[13] ||= (e) => k(E).copy(k(E).selectedUrl.value)
-			}, [k(E).copied.value ? (S(), l(k(I), {
+				onClick: i[10] ||= (e) => E(O).copy(E(O).selectedUrl.value)
+			}, [E(O).copied.value ? (v(), a(E(N), {
 				key: 1,
 				size: 12,
 				"stroke-width": 2
-			})) : (S(), l(k(R), {
+			})) : (v(), a(E(F), {
 				key: 0,
 				size: 12,
 				"stroke-width": 2
-			})), p(" " + D(k(E).copied.value ? a.value.mediaLibrary.copied : a.value.mediaLibrary.copyUrl), 1)], 4)) : u("", !0), f("div", Wi, [f("button", {
+			})), l(" " + C(E(O).copied.value ? p.value.mediaLibrary.copied : p.value.mediaLibrary.copyUrl), 1)], 4)) : o("", !0), W.value ? (v(), s("div", wi, [c("button", {
 				class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 				style: {
 					"border-color": "var(--tpl-border)",
 					color: "var(--tpl-text)",
 					"background-color": "var(--tpl-bg)"
 				},
-				onClick: n[14] ||= (e) => k(E).showMovePicker.value = !k(E).showMovePicker.value
-			}, D(a.value.mediaLibrary.moveSelected), 1), k(E).showMovePicker.value ? (S(), l(bn, {
+				onClick: i[11] ||= (e) => E(O).showMovePicker.value = !E(O).showMovePicker.value
+			}, C(p.value.mediaLibrary.moveSelected), 1), E(O).showMovePicker.value ? (v(), a(_n, {
 				key: 0,
-				folders: k(v).folders.value,
-				"current-folder-id": k(v).currentFolderId.value,
-				onSelect: k(E).handleMoveToFolder,
-				onClose: n[15] ||= (e) => k(E).showMovePicker.value = !1
+				folders: E(O).folderTree.value,
+				"current-folder-id": E(D).currentFolderId.value,
+				onSelect: E(O).handleMoveToFolder,
+				onClose: i[12] ||= (e) => E(O).showMovePicker.value = !1
 			}, null, 8, [
 				"folders",
 				"current-folder-id",
 				"onSelect"
-			])) : u("", !0)])])) : u("", !0), f("div", Gi, [k(v).selectedItems.value.size > 0 ? (S(), d("button", {
+			])) : o("", !0)])) : o("", !0)])) : o("", !0), c("div", Ti, [re.value > 0 ? (v(), s("button", {
 				key: 0,
+				"data-testid": "media-delete",
 				class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 				style: {
 					"border-color": "var(--tpl-danger)",
 					color: "var(--tpl-danger)",
 					"background-color": "var(--tpl-danger-light)"
 				},
-				onClick: n[16] ||= (...e) => k(E).handleDeleteClick && k(E).handleDeleteClick(...e)
-			}, D(a.value.mediaLibrary.deleteSelected), 1)) : u("", !0), e.onSelect ? (S(), d("button", {
+				onClick: ie
+			}, C(p.value.mediaLibrary.deleteSelected), 1)) : o("", !0), t.onSelect ? (v(), s("button", {
 				key: 1,
+				"data-testid": "media-select",
 				class: "tpl:cursor-pointer tpl:rounded-md tpl:px-4 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
 				style: {
 					"background-color": "var(--tpl-primary)",
 					color: "var(--tpl-bg)"
 				},
-				disabled: !k(v).previewItem.value,
-				onClick: O
-			}, D(a.value.mediaLibrary.selectFile), 9, Ki)) : u("", !0)])])])
+				disabled: !ne.value,
+				onClick: J
+			}, C(t.accept?.length ? p.value.mediaLibrary.selectImage : p.value.mediaLibrary.selectFile), 9, Ei)) : o("", !0)])])])
 		]));
 	}
-}), $ = null, Ji = w(null);
-async function Yi(e) {
-	let n = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
-	if (!n) throw Error(`Container element not found: ${e.container}`);
-	let i = r(e.auth, e.onError);
-	await i.initialize();
-	let a = await new t(i).fetchConfig(), o = await dr(e.locale ?? "en");
-	return Zi(n, e.theme), $ && Xi(), new Promise((t, r) => {
+}), Oi = null, ki = b(null);
+async function Ai(e) {
+	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
+	if (!t) throw Error(`Container element not found: ${e.container}`);
+	let n = await ar(e.locale ?? "en");
+	return Mi(t, e.theme), Oi && ji(), new Promise((r, a) => {
 		try {
-			$ = c({ setup() {
-				let r = () => {
-					t({
-						setTheme: (e) => Zi(n, e),
-						unmount: Xi
+			Oi = i({ setup() {
+				let i = () => {
+					r({
+						setTheme: (e) => Mi(t, e),
+						unmount: ji
 					});
 				};
-				return () => g(qi, {
-					authManager: i,
-					projectId: i.projectId,
-					planConfig: a,
-					translations: o,
+				return () => f(Di, {
+					provider: e.provider,
+					translations: n,
 					onSelect: e.onSelect,
-					onError: e.onError,
-					ref: Ji,
-					onReady: r
+					accept: e.accept,
+					locale: e.locale,
+					ref: ki,
+					onReady: i
 				});
-			} }), $.mount(n);
+			} }), Oi.mount(t);
 		} catch (e) {
-			r(e);
+			a(e);
 		}
 	});
 }
-function Xi() {
-	$ && ($.unmount(), $ = null, Ji.value = null);
+function ji() {
+	Oi && (Oi.unmount(), Oi = null, ki.value = null);
 }
-function Zi(e, t) {
+function Mi(e, t) {
 	t && (t.primaryColor && e.style.setProperty("--tpl-primary", t.primaryColor), t.borderRadius !== void 0 && (e.style.setProperty("--tpl-radius", `${t.borderRadius}px`), e.style.setProperty("--tpl-radius-sm", `${Math.max(0, t.borderRadius - 3)}px`), e.style.setProperty("--tpl-radius-lg", `${t.borderRadius + 4}px`)));
 }
 typeof window < "u" && (window.TemplaticalMedia = {
-	init: Yi,
-	unmount: Xi
+	init: Ai,
+	unmount: ji
 });
 //#endregion
-export { pe as MediaApiClient, ni as MediaLibraryModal, Yi as init, Xi as unmount, Z as useI18n, Q as useMediaCategories, me as useMediaLibrary, ri as useMediaPicker };
+export { Ur as MediaLibraryModal, Ai as init, ji as unmount, Q as useI18n, $ as useMediaCategories, ue as useMediaLibrary, Wr as useMediaPicker };