@templatical/media-library 0.0.2 → 0.0.4

package/dist/templatical-media-library.js

@@ -1,10 +1,10 @@
 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, unref as O, vModelText as k, watch as A, withCtx as j, withDirectives as M, withKeys as N, withModifiers as P } from "vue";
-import { Check as F, ChevronRight as I, Copy as L, File as R, Folder as z, Grid2x2 as B, Link as ee, List as V, LoaderCircle as H, PanelLeft as U, Pencil as W, Plus as G, RefreshCw as K, Search as q, Star as J, Trash2 as Y, Upload as X, X as te } from "@lucide/vue";
+import { Check as F, ChevronRight as I, Copy as L, File as R, Folder as z, Grid2x2 as B, Link as V, List as H, LoaderCircle as U, PanelLeft as W, Pencil as G, Plus as K, RefreshCw as q, Search as J, Star as ee, Trash2 as Y, Upload as X, X as te } from "@lucide/vue";
 import { Cropper as ne } from "vue-advanced-cropper";
-import { onClickOutside as re, useClipboard as ie, useDebounceFn as ae, useDropZone as oe, useEventListener as se, useFileDialog as Z, useIntersectionObserver as ce } from "@vueuse/core";
+import { onClickOutside as re, useClipboard as ie, useDebounceFn as ae, useDropZone as oe, useEventListener as se, useFileDialog as ce, useIntersectionObserver as le } from "@vueuse/core";
 //#region src/api-client.ts
-var le = class {
+var ue = class {
 	constructor(e) {
 		this.authManager = e;
 	}
@@ -160,9 +160,9 @@ var le = class {
 };
 //#endregion
 //#region src/composable.ts
-function ue(e) {
+function de(e) {
 	if (!e.projectId) throw Error("projectId is required for useMediaLibrary");
-	let t = new le(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);
+	let t = new ue(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);
 	async function O() {
 		l.value = !0;
 		try {
@@ -279,7 +279,7 @@ function ue(e) {
 			e.onError?.(t);
 		}
 	}
-	async function ee() {
+	async function V() {
 		if (m.value.size === 0) return !1;
 		y.value = [...m.value];
 		try {
@@ -291,17 +291,17 @@ function ue(e) {
 			return e.onError?.(t), !1;
 		}
 	}
-	async function V() {
+	async function H() {
 		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 = {};
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	function H() {
+	function U() {
 		v.value = !1, y.value = [], _.value = {};
 	}
-	async function U(r) {
+	async function W(r) {
 		b.value = !0, x.value = null;
 		try {
 			let e = await t.importFromUrl(r, i.value);
@@ -312,27 +312,27 @@ function ue(e) {
 			b.value = !1;
 		}
 	}
-	function W(e) {
+	function G(e) {
 		let t = new Set(m.value);
 		t.has(e) ? t.delete(e) : t.add(e), m.value = t;
 	}
-	function G() {
+	function K() {
 		m.value = /* @__PURE__ */ new Set(), h.value = null;
 	}
-	function K(e) {
+	function q(e) {
 		h.value = e, m.value = new Set([e.id]);
 	}
-	async function q() {
+	async function J() {
 		try {
 			r.value = await t.getMediaFolders();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function J(n, r) {
+	async function ee(n, r) {
 		try {
 			let e = await t.createMediaFolder(n, r);
-			return await q(), e;
+			return await J(), e;
 		} catch (t) {
 			return e.onError?.(t), null;
 		}
@@ -349,7 +349,7 @@ function ue(e) {
 	}
 	async function X(n, r) {
 		try {
-			await t.renameMediaFolder(n, r), await q();
+			await t.renameMediaFolder(n, r), await J();
 		} catch (t) {
 			e.onError?.(t);
 		}
@@ -357,7 +357,7 @@ function ue(e) {
 	async function te(n) {
 		try {
 			let e = Y(r.value, n)?.parent_id ?? null;
-			await t.deleteMediaFolder(n), i.value === n && (i.value = e), await q(), await O();
+			await t.deleteMediaFolder(n), i.value === n && (i.value = e), await J(), await O();
 		} catch (t) {
 			e.onError?.(t);
 		}
@@ -424,19 +424,19 @@ function ue(e) {
 		deleteSelected: z,
 		isImportingFromUrl: b,
 		importFromUrlError: x,
-		importFromUrl: U,
-		toggleSelection: W,
-		clearSelection: G,
-		selectItem: K,
-		loadFolders: q,
-		createFolder: J,
+		importFromUrl: W,
+		toggleSelection: G,
+		clearSelection: K,
+		selectItem: q,
+		loadFolders: J,
+		createFolder: ee,
 		renameFolder: X,
 		deleteFolder: te,
 		findFolderInTree: Y,
 		loadFrequentlyUsed: B,
-		checkUsageBeforeDelete: ee,
-		confirmDelete: V,
-		cancelDelete: H,
+		checkUsageBeforeDelete: V,
+		confirmDelete: H,
+		cancelDelete: U,
 		isReplacing: S,
 		replaceError: C,
 		showReplaceWarning: T,
@@ -450,7 +450,7 @@ function ue(e) {
 }
 //#endregion
 //#region src/composables/useI18n.ts
-function Q(e) {
+function Z(e) {
 	let t = e ?? _("translations"), n = v(t) ? t.value : t;
 	function r(e, t) {
 		return e.replace(/\{(\w+)\}/g, (e, n) => n in t ? String(t[n]) : `{${n}}`);
@@ -462,14 +462,14 @@ function Q(e) {
 }
 //#endregion
 //#region src/components/media/MediaBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var de = {
+var fe = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, fe = ["onClick"], pe = {
+}, pe = ["onClick"], me = {
 	key: 1,
 	style: { color: "var(--tpl-text)" }
-}, me = /* @__PURE__ */ h({
+}, he = /* @__PURE__ */ h({
 	__name: "MediaBreadcrumb",
 	props: {
 		folders: {},
@@ -477,7 +477,7 @@ var de = {
 	},
 	emits: ["navigate"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Q(), o = s(() => {
+		let n = e, r = t, { t: a } = Z(), o = s(() => {
 			if (!n.currentFolderId) return [];
 			let e = [];
 			return c(n.folders, n.currentFolderId, e), e;
@@ -489,7 +489,7 @@ var de = {
 			}
 			return !1;
 		}
-		return (e, t) => o.value.length > 0 ? (S(), d("div", de, [f("button", {
+		return (e, t) => o.value.length > 0 ? (S(), d("div", fe, [f("button", {
 			class: "tpl:transition-colors tpl:duration-150 tpl:hover:underline",
 			style: { color: "var(--tpl-primary)" },
 			onClick: t[0] ||= (e) => r("navigate", null)
@@ -501,12 +501,12 @@ var de = {
 			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, fe)) : (S(), d("span", pe, D(e.name), 1))], 64))), 128))])) : u("", !0);
+		}, D(e.name), 9, pe)) : (S(), d("span", me, D(e.name), 1))], 64))), 128))])) : u("", !0);
 	}
 });
 //#endregion
 //#region src/composables/useMediaCategories.ts
-function he() {
+function Q() {
 	let e = _("planConfig"), t = s(() => e.config.value?.media ?? null), n = s(() => t.value?.use_media_library ?? !0), r = s(() => t.value?.categories ?? null), i = s(() => r.value ? Object.values(r.value).flatMap((e) => e.mime_types) : []), a = s(() => i.value.join(",")), o = s(() => t.value?.max_file_size ?? 0);
 	function c(e, t) {
 		return r.value ? !t || t.length === 0 ? i.value.includes(e) : t.some((t) => r.value[t]?.mime_types.includes(e)) : !1;
@@ -573,7 +573,7 @@ function ye(e, t, n) {
 		}, n.mimeType, n.quality);
 	});
 }
-function $(e, t, n, r) {
+function be(e, t, n, r) {
 	let i = e, a = t;
 	if (n && i > n) {
 		let e = n / i;
@@ -590,57 +590,57 @@ function $(e, t, n, r) {
 }
 //#endregion
 //#region src/components/media/MediaEditModal.vue?vue&type=script&setup=true&lang.ts
-var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se = {
+var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Ce = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, we = {
+}, we = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, Te = {
 	key: 0,
 	class: "tpl:mb-4"
-}, Te = {
+}, Ee = {
 	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)"
 	}
-}, Ee = { class: "tpl:space-y-3" }, De = {
+}, De = { class: "tpl:space-y-3" }, Oe = {
 	class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, Oe = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, ke = ["onClick"], Ae = { class: "tpl:flex tpl:gap-3" }, je = { class: "tpl:flex-1" }, Me = {
+}, ke = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, Ae = ["onClick"], je = { class: "tpl:flex tpl:gap-3" }, Me = { class: "tpl:flex-1" }, Ne = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, Ne = {
+}, Pe = {
 	class: "tpl:font-normal",
 	style: { color: "var(--tpl-text-dim)" }
-}, Pe = { class: "tpl:relative" }, Fe = ["value", "placeholder"], Ie = {
+}, Fe = { class: "tpl:relative" }, Ie = ["value", "placeholder"], Le = {
 	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)" }
-}, Le = { class: "tpl:flex-1" }, Re = {
+}, Re = { class: "tpl:flex-1" }, ze = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, ze = {
+}, Be = {
 	class: "tpl:font-normal",
 	style: { color: "var(--tpl-text-dim)" }
-}, Be = { class: "tpl:relative" }, Ve = ["value", "placeholder"], He = {
+}, 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)" }
-}, Ue = {
+}, We = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, We = {
+}, Ge = {
 	class: "tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Ge = { class: "tpl:mb-3" }, Ke = {
+}, Ke = { class: "tpl:mb-3" }, qe = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, qe = ["autofocus"], Je = {
+}, Je = ["autofocus"], Ye = {
 	key: 1,
 	class: "tpl:mb-4"
-}, Ye = {
+}, Xe = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, Xe = ["placeholder"], Ze = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, Qe = ["disabled"], $e = /* @__PURE__ */ h({
+}, Ze = ["placeholder"], Qe = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, $e = ["disabled"], et = /* @__PURE__ */ h({
 	__name: "MediaEditModal",
 	props: {
 		visible: { type: Boolean },
@@ -648,25 +648,25 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["save", "close"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: c } = Q(), h = _("tplUiTheme"), g = c.mediaLibrary, { isImageMimeType: v } = he(), x = w(""), C = w(""), E = w(null), N = w("free"), F = w(void 0), I = w(void 0), L = w(""), R = w(""), z = w(void 0), B = w(null), ee = w(!1), V = w(!1), H = w(!1), U = s(() => n.item ? [
+		let n = e, r = t, { t: c } = Z(), h = _("tplUiTheme"), g = c.mediaLibrary, { isImageMimeType: v } = Q(), x = w(""), C = w(""), E = w(null), N = w("free"), F = w(void 0), I = w(void 0), L = w(""), R = w(""), z = w(void 0), B = w(null), V = w(!1), H = w(!1), U = w(!1), W = s(() => n.item ? [
 			"image/jpeg",
 			"image/png",
 			"image/webp",
 			"image/gif"
-		].includes(n.item.mime_type) : !1), W = s(() => N.value === "original" ? z.value : ge[N.value]), G = s(() => B.value ? $(B.value.width, B.value.height, F.value, I.value) : null);
+		].includes(n.item.mime_type) : !1), G = s(() => N.value === "original" ? z.value : ge[N.value]), K = s(() => B.value ? be(B.value.width, B.value.height, F.value, I.value) : null);
 		A(() => n.visible, (e) => {
-			e && n.item && (x.value = n.item.filename, C.value = n.item.alt_text || "", N.value = "free", F.value = void 0, I.value = void 0, L.value = "", R.value = "", z.value = void 0, B.value = null, ee.value = !1, H.value = !1, n.item.width && n.item.height && (z.value = n.item.width / n.item.height));
+			e && n.item && (x.value = n.item.filename, C.value = n.item.alt_text || "", N.value = "free", F.value = void 0, I.value = void 0, L.value = "", R.value = "", z.value = void 0, B.value = null, V.value = !1, U.value = !1, n.item.width && n.item.height && (z.value = n.item.width / n.item.height));
 		});
-		function K(e) {
+		function q(e) {
 			e.coordinates && (B.value = {
 				width: Math.round(e.coordinates.width),
 				height: Math.round(e.coordinates.height)
-			}, H.value = !0);
+			}, U.value = !0);
 		}
-		function q() {
-			ee.value = !0, !z.value && n.item?.width && n.item?.height && (z.value = n.item.width / n.item.height);
+		function J() {
+			V.value = !0, !z.value && n.item?.width && n.item?.height && (z.value = n.item.width / n.item.height);
 		}
-		function J(e) {
+		function ee(e) {
 			let t = e.target.value;
 			L.value = t, F.value = t && parseInt(t, 10) || void 0;
 		}
@@ -676,10 +676,10 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		}
 		async function X() {
 			let e = x.value.trim();
-			if (!e || !n.item || V.value) return;
+			if (!e || !n.item || H.value) return;
 			let t = v(n.item.mime_type), i;
-			if (U.value && E.value && H.value) {
-				V.value = !0;
+			if (W.value && E.value && U.value) {
+				H.value = !0;
 				try {
 					let { canvas: e } = E.value.getResult();
 					if (e) {
@@ -687,15 +687,15 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						i = { file: await ye(t, n.item.filename, r) };
 					}
 				} catch {
-					V.value = !1;
+					H.value = !1;
 					return;
 				}
-				V.value = !1;
+				H.value = !1;
 			}
 			r("save", n.item.id, e, t ? C.value : void 0, i), r("close");
 		}
 		function te(e) {
-			e.key === "Enter" && !V.value && (e.preventDefault(), X()), e.key === "Escape" && r("close");
+			e.key === "Enter" && !H.value && (e.preventDefault(), X()), e.key === "Escape" && r("close");
 		}
 		return (t, n) => (S(), l(a, { to: "body" }, [m(o, {
 			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
@@ -713,22 +713,22 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				onClick: n[3] ||= P((e) => r("close"), ["self"]),
 				onKeydown: te
 			}, [f("div", {
-				class: y(["tpl:mx-4 tpl:flex tpl:max-h-[90vh] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", U.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
+				class: y(["tpl:mx-4 tpl:flex tpl:max-h-[90vh] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", W.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
 				style: { "background-color": "var(--tpl-bg-elevated)" }
 			}, [
-				f("div", xe, [f("h3", Se, D(O(c).mediaLibrary.editFile), 1)]),
-				f("div", Ce, [
-					U.value ? (S(), d("div", we, [f("div", Te, [m(O(ne), {
+				f("div", Se, [f("h3", Ce, D(O(c).mediaLibrary.editFile), 1)]),
+				f("div", we, [
+					W.value ? (S(), d("div", Te, [f("div", Ee, [m(O(ne), {
 						ref_key: "cropperRef",
 						ref: E,
 						src: e.item.url,
-						"stencil-props": { aspectRatio: W.value },
+						"stencil-props": { aspectRatio: G.value },
 						class: "tpl:h-full tpl:w-full",
 						"background-class": "tpl-cropper-background",
-						onChange: K,
-						onReady: q
-					}, null, 8, ["src", "stencil-props"])]), f("div", Ee, [
-						f("div", null, [f("label", De, D(O(c).mediaLibrary.cropAspectRatio), 1), f("div", Oe, [(S(), d(i, null, T([
+						onChange: q,
+						onReady: J
+					}, null, 8, ["src", "stencil-props"])]), f("div", De, [
+						f("div", null, [f("label", Oe, D(O(c).mediaLibrary.cropAspectRatio), 1), f("div", ke, [(S(), d(i, null, T([
 							"free",
 							"square",
 							"landscape43",
@@ -744,8 +744,8 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 								color: N.value === e ? "var(--tpl-primary)" : "var(--tpl-text)"
 							}),
 							onClick: (t) => N.value = e
-						}, D(O(g)[`crop${e.charAt(0).toUpperCase()}${e.slice(1)}`]), 13, ke)), 64))])]),
-						f("div", Ae, [f("div", je, [f("label", Me, [p(D(O(c).mediaLibrary.cropMaxWidth) + " ", 1), f("span", Ne, D(O(c).mediaLibrary.cropOptional), 1)]), f("div", Pe, [f("input", {
+						}, D(O(g)[`crop${e.charAt(0).toUpperCase()}${e.slice(1)}`]), 13, Ae)), 64))])]),
+						f("div", je, [f("div", Me, [f("label", Ne, [p(D(O(c).mediaLibrary.cropMaxWidth) + " ", 1), f("span", Pe, D(O(c).mediaLibrary.cropOptional), 1)]), f("div", Fe, [f("input", {
 							value: L.value,
 							type: "number",
 							min: "1",
@@ -756,8 +756,8 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 								color: "var(--tpl-text)"
 							},
 							placeholder: B.value?.width?.toString() || "",
-							onInput: J
-						}, null, 40, Fe), f("span", Ie, D(O(c).mediaLibrary.cropPixels), 1)])]), f("div", Le, [f("label", Re, [p(D(O(c).mediaLibrary.cropMaxHeight) + " ", 1), f("span", ze, D(O(c).mediaLibrary.cropOptional), 1)]), f("div", Be, [f("input", {
+							onInput: ee
+						}, null, 40, Ie), f("span", Le, D(O(c).mediaLibrary.cropPixels), 1)])]), f("div", Re, [f("label", ze, [p(D(O(c).mediaLibrary.cropMaxHeight) + " ", 1), f("span", Be, D(O(c).mediaLibrary.cropOptional), 1)]), f("div", Ve, [f("input", {
 							value: R.value,
 							type: "number",
 							min: "1",
@@ -769,10 +769,10 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 							},
 							placeholder: B.value?.height?.toString() || "",
 							onInput: Y
-						}, null, 40, Ve), f("span", He, D(O(c).mediaLibrary.cropPixels), 1)])])]),
-						G.value ? (S(), d("div", Ue, [f("span", null, D(O(c).mediaLibrary.cropOutputSize) + ": ", 1), f("span", We, D(G.value.width) + " x " + D(G.value.height) + " " + D(O(c).mediaLibrary.cropPixels), 1)])) : u("", !0)
+						}, null, 40, He), f("span", Ue, D(O(c).mediaLibrary.cropPixels), 1)])])]),
+						K.value ? (S(), d("div", We, [f("span", null, D(O(c).mediaLibrary.cropOutputSize) + ": ", 1), f("span", Ge, D(K.value.width) + " x " + D(K.value.height) + " " + D(O(c).mediaLibrary.cropPixels), 1)])) : u("", !0)
 					])])) : u("", !0),
-					f("div", Ge, [f("label", Ke, D(O(c).mediaLibrary.fileName), 1), M(f("input", {
+					f("div", Ke, [f("label", qe, D(O(c).mediaLibrary.fileName), 1), M(f("input", {
 						"onUpdate:modelValue": n[0] ||= (e) => x.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",
@@ -781,9 +781,9 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 							"background-color": "var(--tpl-bg)",
 							color: "var(--tpl-text)"
 						},
-						autofocus: !U.value
-					}, null, 8, qe), [[k, x.value]])]),
-					O(v)(e.item.mime_type) ? (S(), d("div", Je, [f("label", Ye, D(O(c).mediaLibrary.altText), 1), M(f("input", {
+						autofocus: !W.value
+					}, null, 8, Je), [[k, x.value]])]),
+					O(v)(e.item.mime_type) ? (S(), d("div", Ye, [f("label", Xe, D(O(c).mediaLibrary.altText), 1), M(f("input", {
 						"onUpdate:modelValue": n[1] ||= (e) => C.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",
@@ -793,9 +793,9 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 							color: "var(--tpl-text)"
 						},
 						placeholder: O(c).mediaLibrary.altTextPlaceholder
-					}, null, 8, Xe), [[k, C.value]])])) : u("", !0)
+					}, null, 8, Ze), [[k, C.value]])])) : u("", !0)
 				]),
-				f("div", Ze, [f("button", {
+				f("div", Qe, [f("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)",
@@ -806,27 +806,27 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				}, D(O(c).mediaLibrary.cancel), 1), f("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: V.value,
+					disabled: H.value,
 					onClick: X
-				}, D(V.value ? O(c).mediaLibrary.saving : O(c).mediaLibrary.saveChanges), 9, Qe)])
-			], 2)], 40, be)) : u("", !0)]),
+				}, D(H.value ? O(c).mediaLibrary.saving : O(c).mediaLibrary.saveChanges), 9, $e)])
+			], 2)], 40, xe)) : u("", !0)]),
 			_: 1
 		})]));
 	}
-}), et = (e, t) => {
+}), tt = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, tt = /* @__PURE__ */ et($e, [["__scopeId", "data-v-bd5f2e31"]]), nt = {
+}, nt = /* @__PURE__ */ tt(et, [["__scopeId", "data-v-bd5f2e31"]]), rt = {
 	key: 1,
 	class: "tpl:size-4 tpl:shrink-0"
-}, rt = {
+}, it = {
 	key: 0,
 	class: "tpl:truncate"
-}, it = {
+}, at = {
 	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"
-}, at = ["title"], ot = ["title"], st = { key: 0 }, ct = ["placeholder"], lt = 5, ut = /* @__PURE__ */ h({
+}, ot = ["title"], st = ["title"], ct = { key: 0 }, lt = ["placeholder"], ut = 5, dt = /* @__PURE__ */ h({
 	__name: "MediaFolderTreeNode",
 	props: {
 		folder: {},
@@ -840,7 +840,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		"deleteFolder"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Q(), o = w(!1), c = w(!1), p = w(""), h = w(!1), g = w(""), _ = s(() => (n.folder.children?.length ?? 0) > 0), v = s(() => n.depth < lt - 1), x = s(() => n.currentFolderId === n.folder.id), C = s(() => !n.currentFolderId || !n.folder.children ? !1 : j(n.folder.children, n.currentFolderId)), A = s(() => o.value || C.value);
+		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 < ut - 1), x = s(() => n.currentFolderId === n.folder.id), C = s(() => !n.currentFolderId || !n.folder.children ? !1 : j(n.folder.children, n.currentFolderId)), A = 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;
 			return !1;
@@ -858,13 +858,13 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		function B() {
 			c.value = !1, p.value = "";
 		}
-		function ee() {
+		function V() {
 			h.value = !0, g.value = "", o.value = !0;
 		}
-		function V() {
+		function H() {
 			g.value.trim() && r("createFolder", g.value.trim(), n.folder.id), h.value = !1, g.value = "";
 		}
-		function H() {
+		function U() {
 			h.value = !1, g.value = "";
 		}
 		return (t, n) => {
@@ -885,7 +885,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					class: y(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-90": A.value }]),
 					size: 10,
 					"stroke-width": 2
-				}, null, 8, ["class"])])) : (S(), d("span", nt)),
+				}, null, 8, ["class"])])) : (S(), d("span", rt)),
 				f("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)
@@ -893,7 +893,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					class: "tpl:shrink-0",
 					size: 14,
 					"stroke-width": 1.5
-				}), c.value ? u("", !0) : (S(), d("span", rt, D(e.folder.name), 1))]),
+				}), c.value ? u("", !0) : (S(), d("span", it, D(e.folder.name), 1))]),
 				c.value ? M((S(), d("input", {
 					key: 2,
 					"onUpdate:modelValue": n[1] ||= (e) => p.value = e,
@@ -909,24 +909,24 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					onBlur: R,
 					onClick: n[2] ||= P(() => {}, ["stop"])
 				}, null, 544)), [[k, p.value]]) : u("", !0),
-				c.value ? u("", !0) : (S(), d("span", it, [
+				c.value ? u("", !0) : (S(), d("span", at, [
 					v.value ? (S(), d("button", {
 						key: 0,
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
 						title: O(a).mediaLibrary.addSubfolder,
-						onClick: P(ee, ["stop"])
-					}, [m(O(G), {
+						onClick: P(V, ["stop"])
+					}, [m(O(K), {
 						size: 12,
 						"stroke-width": 2
-					})], 8, at)) : u("", !0),
+					})], 8, ot)) : u("", !0),
 					f("button", {
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
 						title: O(a).mediaLibrary.renameFolder,
 						onClick: P(L, ["stop"])
-					}, [m(O(W), {
+					}, [m(O(G), {
 						size: 12,
 						"stroke-width": 2
-					})], 8, ot),
+					})], 8, st),
 					f("button", {
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
 						onClick: n[3] ||= P((t) => r("deleteFolder", e.folder.id), ["stop"])
@@ -936,7 +936,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						style: { color: "var(--tpl-danger)" }
 					})])
 				]))
-			], 4), A.value ? (S(), d("div", st, [(S(!0), d(i, null, T(e.folder.children, (t) => (S(), l(o, {
+			], 4), A.value ? (S(), d("div", ct, [(S(!0), d(i, null, T(e.folder.children, (t) => (S(), l(o, {
 				key: t.id,
 				folder: t,
 				"current-folder-id": e.currentFolderId,
@@ -964,15 +964,15 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				},
 				placeholder: O(a).mediaLibrary.subfolderName,
 				autofocus: "",
-				onKeydown: [N(V, ["enter"]), N(H, ["escape"])],
-				onBlur: V
-			}, null, 40, ct), [[k, g.value]])], 4)) : u("", !0)])) : u("", !0)]);
+				onKeydown: [N(H, ["enter"]), N(U, ["escape"])],
+				onBlur: H
+			}, null, 40, lt), [[k, g.value]])], 4)) : u("", !0)])) : u("", !0)]);
 		};
 	}
-}), dt = { class: "tpl:flex tpl:h-full tpl:flex-col tpl:overflow-y-auto" }, ft = {
+}), ft = { class: "tpl:flex tpl:h-full tpl:flex-col tpl:overflow-y-auto" }, pt = {
 	key: 0,
 	class: "tpl:px-3 tpl:py-2"
-}, pt = ["placeholder"], mt = /* @__PURE__ */ h({
+}, mt = ["placeholder"], ht = /* @__PURE__ */ h({
 	__name: "MediaFolderTree",
 	props: {
 		folders: {},
@@ -988,7 +988,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		"showFrequentlyUsed"
 	],
 	setup(e, { emit: t }) {
-		let n = t, { t: r } = Q(), a = w(!1), o = w("");
+		let n = t, { t: r } = Z(), a = w(!1), o = w("");
 		function s() {
 			a.value = !0, o.value = "";
 		}
@@ -998,7 +998,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		function h() {
 			a.value = !1, o.value = "";
 		}
-		return (t, g) => (S(), d("div", dt, [
+		return (t, g) => (S(), d("div", ft, [
 			f("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({
@@ -1010,7 +1010,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				size: 14,
 				"stroke-width": 1.5
 			}), p(" " + D(O(r).mediaLibrary.allFiles), 1)], 4),
-			(S(!0), d(i, null, T(e.folders, (t) => (S(), l(ut, {
+			(S(!0), d(i, null, T(e.folders, (t) => (S(), l(dt, {
 				key: t.id,
 				folder: t,
 				"current-folder-id": e.currentFolderId,
@@ -1020,7 +1020,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				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", ft, [M(f("input", {
+			a.value ? (S(), d("div", pt, [M(f("input", {
 				"onUpdate:modelValue": g[5] ||= (e) => o.value = e,
 				type: "text",
 				class: "tpl:w-full tpl:rounded tpl:border tpl:px-2 tpl:py-1 tpl:text-xs tpl:outline-none",
@@ -1033,13 +1033,13 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				autofocus: "",
 				onKeydown: [N(c, ["enter"]), N(h, ["escape"])],
 				onBlur: c
-			}, null, 40, pt), [[k, o.value]])])) : u("", !0),
+			}, null, 40, mt), [[k, o.value]])])) : u("", !0),
 			a.value ? u("", !0) : (S(), d("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(O(G), {
+			}, [m(O(K), {
 				size: 14,
 				"stroke-width": 1.5
 			}), p(" " + D(O(r).mediaLibrary.newFolder), 1)])),
@@ -1053,13 +1053,13 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					color: e.viewMode === "frequently-used" ? "var(--tpl-primary)" : "var(--tpl-text)"
 				}),
 				onClick: g[6] ||= (e) => n("showFrequentlyUsed")
-			}, [m(O(J), {
+			}, [m(O(ee), {
 				size: 14,
 				"stroke-width": 1.5
 			}), p(" " + D(O(r).mediaLibrary.frequentlyUsed), 1)], 4)) : u("", !0)
 		]));
 	}
-}), ht = { class: "tpl:flex tpl:aspect-square tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2" }, gt = /* @__PURE__ */ h({
+}), gt = { class: "tpl:flex tpl:aspect-square tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2" }, _t = /* @__PURE__ */ h({
 	__name: "MediaFileIcon",
 	props: { mimeType: {} },
 	setup(e) {
@@ -1160,7 +1160,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			bgColor: "#f9fafb",
 			icon: "document"
 		}, i = s(() => n[t.mimeType] ?? r);
-		return (e, t) => (S(), d("div", ht, [i.value.icon === "document" ? (S(), d("svg", {
+		return (e, t) => (S(), d("div", gt, [i.value.icon === "document" ? (S(), d("svg", {
 			key: 0,
 			width: "60",
 			height: "60",
@@ -1229,48 +1229,48 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			style: b({ color: i.value.color })
 		}, D(i.value.label), 5)]));
 	}
-}), _t = { class: "tpl:p-4" }, vt = {
+}), vt = { class: "tpl:p-4" }, yt = {
 	key: 1,
 	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-16"
-}, yt = {
+}, bt = {
 	class: "tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, bt = {
+}, xt = {
 	key: 2,
 	class: "tpl:grid tpl:grid-cols-4 tpl:gap-3"
-}, xt = ["onClick"], St = { class: "tpl:aspect-square" }, Ct = ["src", "alt"], wt = { class: "tpl:px-2 tpl:py-1.5" }, Tt = {
+}, St = ["onClick"], Ct = { class: "tpl:aspect-square" }, wt = ["src", "alt"], Tt = { class: "tpl:px-2 tpl:py-1.5" }, Et = {
 	class: "tpl:truncate tpl:text-[10px] tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Et = {
+}, Dt = {
 	class: "tpl:flex tpl:justify-between tpl:text-[9px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, Dt = { key: 0 }, Ot = { 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" }, kt = ["title", "onClick"], At = ["title", "onClick"], jt = {
+}, Ot = { key: 0 }, kt = { 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" }, At = ["title", "onClick"], jt = ["title", "onClick"], Mt = {
 	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)" }
-}, Mt = {
+}, Nt = {
 	key: 3,
 	class: "tpl:flex tpl:flex-col tpl:gap-1"
-}, Nt = ["onClick"], Pt = {
+}, Pt = ["onClick"], Ft = {
 	class: "tpl:size-10 tpl:shrink-0 tpl:overflow-hidden tpl:rounded",
 	style: { "background-color": "var(--tpl-bg-hover)" }
-}, Ft = ["src", "alt"], It = {
+}, It = ["src", "alt"], Lt = {
 	key: 1,
 	class: "tpl-list-icon tpl:size-full"
-}, Lt = { class: "tpl:min-w-0 tpl:flex-1" }, Rt = {
+}, Rt = { class: "tpl:min-w-0 tpl:flex-1" }, zt = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, zt = {
+}, Bt = {
 	class: "tpl:text-[10px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, Bt = { class: "tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Vt = ["title", "onClick"], Ht = ["title", "onClick"], Ut = {
+}, Vt = { class: "tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, Ht = ["title", "onClick"], Ut = ["title", "onClick"], Wt = {
 	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)" }
-}, Wt = {
+}, Gt = {
 	key: 4,
 	class: "tpl:flex tpl:justify-center tpl:py-4"
-}, Gt = /* @__PURE__ */ et(/* @__PURE__ */ h({
+}, Kt = /* @__PURE__ */ tt(/* @__PURE__ */ h({
 	__name: "MediaGrid",
 	props: {
 		items: {},
@@ -1288,15 +1288,15 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		"replace"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { isAcceptedMimeType: a, isImageMimeType: o } = he();
+		let n = e, r = t, { isAcceptedMimeType: a, isImageMimeType: o } = Q();
 		function s(e) {
 			return !n.accept || n.accept.length === 0 ? !0 : a(e.mime_type, n.accept);
 		}
 		function c(e) {
 			r("select", e);
 		}
-		let { t: h } = Q(), g = w(null);
-		ce(g, ([{ isIntersecting: e }]) => {
+		let { t: h } = Z(), g = w(null);
+		le(g, ([{ isIntersecting: e }]) => {
 			e && n.hasMore && !n.isLoading && r("loadMore");
 		}, { threshold: .1 });
 		function _(e) {
@@ -1309,7 +1309,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				day: "numeric"
 			});
 		}
-		return (t, n) => (S(), d("div", _t, [
+		return (t, n) => (S(), d("div", vt, [
 			e.isLoading && e.items.length === 0 ? (S(), d("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")
@@ -1317,47 +1317,47 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				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", vt, [m(O(R), {
+			}, null, 2)), 64))], 2)) : e.items.length === 0 ? (S(), d("div", yt, [m(O(R), {
 				class: "tpl:mb-3",
 				size: 40,
 				"stroke-width": 1,
 				style: { color: "var(--tpl-text-dim)" }
-			}), f("p", yt, D(O(h).mediaLibrary.noFiles), 1)])) : e.layout === "list" ? (S(), d("div", Mt, [(S(!0), d(i, null, T(e.items, (t) => (S(), d("div", {
+			}), f("p", bt, D(O(h).mediaLibrary.noFiles), 1)])) : e.layout === "list" ? (S(), d("div", Nt, [(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)
 			}, [
-				f("div", Pt, [O(o)(t.mime_type) ? (S(), d("img", {
+				f("div", Ft, [O(o)(t.mime_type) ? (S(), d("img", {
 					key: 0,
 					src: t.small_url || t.url,
 					alt: t.filename,
 					class: "tpl:size-full tpl:object-cover",
 					loading: "lazy"
-				}, null, 8, Ft)) : (S(), d("div", It, [m(gt, { "mime-type": t.mime_type }, null, 8, ["mime-type"])]))]),
-				f("div", Lt, [f("p", Rt, D(t.filename), 1), f("p", zt, [p(D(_(t.size)) + " · " + D(v(t.created_at)) + " ", 1), O(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", Bt, [f("button", {
+				}, null, 8, It)) : (S(), d("div", Lt, [m(_t, { "mime-type": t.mime_type }, null, 8, ["mime-type"])]))]),
+				f("div", Rt, [f("p", zt, D(t.filename), 1), f("p", Bt, [p(D(_(t.size)) + " · " + D(v(t.created_at)) + " ", 1), O(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", Vt, [f("button", {
 					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: O(h).mediaLibrary.editFile,
 					onClick: P((e) => r("edit", t), ["stop"])
-				}, [m(O(W), {
+				}, [m(O(G), {
 					size: 12,
 					"stroke-width": 2
-				})], 8, Vt), f("button", {
+				})], 8, Ht), f("button", {
 					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: O(h).mediaLibrary.replaceFile,
 					onClick: P((e) => r("replace", t), ["stop"])
-				}, [m(O(K), {
+				}, [m(O(q), {
 					size: 12,
 					"stroke-width": 2
-				})], 8, Ht)]),
-				e.selectedIds.has(t.id) ? (S(), d("div", Ut, [m(O(F), {
+				})], 8, Ut)]),
+				e.selectedIds.has(t.id) ? (S(), d("div", Wt, [m(O(F), {
 					size: 12,
 					"stroke-width": 3
 				})])) : u("", !0)
-			], 14, Nt))), 128))])) : (S(), d("div", bt, [(S(!0), d(i, null, T(e.items, (t) => (S(), d("div", {
+			], 14, Pt))), 128))])) : (S(), d("div", xt, [(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", [
 					"tpl:cursor-pointer",
@@ -1370,45 +1370,45 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				}),
 				onClick: (e) => c(t)
 			}, [
-				f("div", St, [O(o)(t.mime_type) ? (S(), d("img", {
+				f("div", Ct, [O(o)(t.mime_type) ? (S(), d("img", {
 					key: 0,
 					src: t.small_url || t.url,
 					alt: t.filename,
 					class: "tpl:size-full tpl:object-cover",
 					loading: "lazy"
-				}, null, 8, Ct)) : (S(), l(gt, {
+				}, null, 8, wt)) : (S(), l(_t, {
 					key: 1,
 					"mime-type": t.mime_type
 				}, null, 8, ["mime-type"]))]),
-				f("div", wt, [f("p", Tt, D(t.filename), 1), f("p", Et, [f("span", null, D(_(t.size)), 1), O(o)(t.mime_type) && t.width && t.height ? (S(), d("span", Dt, D(t.width) + "×" + D(t.height), 1)) : u("", !0)])]),
-				f("div", Ot, [f("button", {
+				f("div", Tt, [f("p", Et, D(t.filename), 1), f("p", Dt, [f("span", null, D(_(t.size)), 1), O(o)(t.mime_type) && t.width && t.height ? (S(), d("span", Ot, D(t.width) + "×" + D(t.height), 1)) : u("", !0)])]),
+				f("div", kt, [f("button", {
 					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: O(h).mediaLibrary.editFile,
 					onClick: P((e) => r("edit", t), ["stop"])
-				}, [m(O(W), {
+				}, [m(O(G), {
 					size: 11,
 					"stroke-width": 2
-				})], 8, kt), f("button", {
+				})], 8, At), f("button", {
 					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: O(h).mediaLibrary.replaceFile,
 					onClick: P((e) => r("replace", t), ["stop"])
-				}, [m(O(K), {
+				}, [m(O(q), {
 					size: 11,
 					"stroke-width": 2
-				})], 8, At)]),
-				e.selectedIds.has(t.id) ? (S(), d("div", jt, [m(O(F), {
+				})], 8, jt)]),
+				e.selectedIds.has(t.id) ? (S(), d("div", Mt, [m(O(F), {
 					size: 12,
 					"stroke-width": 3
 				})])) : u("", !0)
-			], 14, xt))), 128))])),
+			], 14, St))), 128))])),
 			f("div", {
 				ref_key: "sentinelRef",
 				ref: g,
 				class: "tpl:h-4"
 			}, null, 512),
-			e.isLoading && e.items.length > 0 ? (S(), d("div", Wt, [m(O(H), {
+			e.isLoading && e.items.length > 0 ? (S(), d("div", Gt, [m(O(U), {
 				class: "tpl-spinner",
 				size: 20,
 				"stroke-width": 2,
@@ -1416,20 +1416,20 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			})])) : u("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-9db961d1"]]), Kt = ["data-tpl-theme"], qt = {
+}), [["__scopeId", "data-v-9db961d1"]]), qt = ["data-tpl-theme"], Jt = {
 	class: "tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-lg tpl:p-5 tpl:shadow-xl",
 	style: { "background-color": "var(--tpl-bg-elevated)" }
-}, Jt = {
+}, Yt = {
 	class: "tpl:mb-4 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Yt = { class: "tpl:mb-3" }, Xt = ["placeholder", "disabled"], Zt = {
+}, Xt = { class: "tpl:mb-3" }, Zt = ["placeholder", "disabled"], Qt = {
 	key: 0,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-danger)" }
-}, Qt = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, $t = ["disabled"], en = ["disabled"], tn = {
+}, $t = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, en = ["disabled"], tn = ["disabled"], nn = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-1.5"
-}, nn = { key: 1 }, rn = /* @__PURE__ */ h({
+}, rn = { key: 1 }, an = /* @__PURE__ */ h({
 	__name: "MediaImportUrlModal",
 	props: {
 		visible: { type: Boolean },
@@ -1438,7 +1438,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["import", "close"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Q(), s = _("tplUiTheme"), c = w("");
+		let n = e, r = t, { t: i } = Z(), s = _("tplUiTheme"), c = w("");
 		A(() => n.visible, (e) => {
 			e && (c.value = "");
 		});
@@ -1467,9 +1467,9 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				style: { "background-color": "var(--tpl-overlay)" },
 				onClick: P(g, ["self"]),
 				onKeydown: v
-			}, [f("div", qt, [
-				f("h3", Jt, D(O(i).mediaLibrary.importFromUrl), 1),
-				f("div", Yt, [M(f("input", {
+			}, [f("div", Jt, [
+				f("h3", Yt, D(O(i).mediaLibrary.importFromUrl), 1),
+				f("div", Xt, [M(f("input", {
 					"onUpdate:modelValue": n[0] ||= (e) => c.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",
@@ -1481,9 +1481,9 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					placeholder: O(i).mediaLibrary.importUrlPlaceholder,
 					disabled: e.isImporting,
 					autofocus: ""
-				}, null, 8, Xt), [[k, c.value]])]),
-				e.error ? (S(), d("p", Zt, D(e.error), 1)) : u("", !0),
-				f("div", Qt, [f("button", {
+				}, null, 8, Zt), [[k, c.value]])]),
+				e.error ? (S(), d("p", Qt, D(e.error), 1)) : u("", !0),
+				f("div", $t, [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 }]),
 					style: {
 						"border-color": "var(--tpl-border)",
@@ -1492,25 +1492,25 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					},
 					disabled: e.isImporting,
 					onClick: g
-				}, D(O(i).mediaLibrary.cancel), 11, $t), f("button", {
+				}, D(O(i).mediaLibrary.cancel), 11, en), f("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: !c.value.trim() || e.isImporting,
 					onClick: h
-				}, [e.isImporting ? (S(), d("span", tn, [m(O(H), {
+				}, [e.isImporting ? (S(), d("span", nn, [m(O(U), {
 					class: "tpl:animate-spin",
 					size: 12,
 					"stroke-width": 2
-				}), p(" " + D(O(i).mediaLibrary.importing), 1)])) : (S(), d("span", nn, D(O(i).mediaLibrary.import), 1))], 8, en)])
-			])], 40, Kt)) : u("", !0)]),
+				}), p(" " + D(O(i).mediaLibrary.importing), 1)])) : (S(), d("span", rn, D(O(i).mediaLibrary.import), 1))], 8, tn)])
+			])], 40, qt)) : u("", !0)]),
 			_: 1
 		})]));
 	}
-}), an = { class: "tpl:max-h-56 tpl:overflow-y-auto tpl:py-1" }, on = ["disabled", "onClick"], sn = { class: "tpl:truncate" }, cn = {
+}), on = { class: "tpl:max-h-56 tpl:overflow-y-auto tpl:py-1" }, sn = ["disabled", "onClick"], cn = { class: "tpl:truncate" }, ln = {
 	key: 0,
 	class: "tpl:shrink-0",
 	style: { color: "var(--tpl-text-dim)" }
-}, ln = /* @__PURE__ */ h({
+}, un = /* @__PURE__ */ h({
 	__name: "MediaMovePicker",
 	props: {
 		folders: {},
@@ -1518,7 +1518,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["select", "close"],
 	setup(e, { emit: t }) {
-		let n = t, { t: r } = Q(), a = w(null);
+		let n = t, { t: r } = Z(), a = w(null);
 		function o(e, t = 0) {
 			let n = [];
 			for (let r of e) n.push({
@@ -1538,7 +1538,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				"border-color": "var(--tpl-border)",
 				"background-color": "var(--tpl-bg-elevated)"
 			}
-		}, [f("div", an, [e.currentFolderId === null ? u("", !0) : (S(), d("button", {
+		}, [f("div", on, [e.currentFolderId === null ? u("", !0) : (S(), d("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)" },
@@ -1563,27 +1563,27 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				size: 14,
 				"stroke-width": 1.5
 			}),
-			f("span", sn, D(t.name), 1),
-			t.id === e.currentFolderId ? (S(), d("span", cn, D(O(r).mediaLibrary.currentFolder), 1)) : u("", !0)
-		], 12, on))), 128))])], 512));
+			f("span", cn, D(t.name), 1),
+			t.id === e.currentFolderId ? (S(), d("span", ln, D(O(r).mediaLibrary.currentFolder), 1)) : u("", !0)
+		], 12, sn))), 128))])], 512));
 	}
-}), un = { class: "tpl:flex tpl:items-center tpl:gap-3" }, dn = ["src", "alt"], fn = {
+}), dn = { class: "tpl:flex tpl:items-center tpl:gap-3" }, fn = ["src", "alt"], pn = {
 	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)" }
-}, pn = { class: "tpl:min-w-0 tpl:flex-1" }, mn = {
+}, mn = { class: "tpl:min-w-0 tpl:flex-1" }, hn = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, hn = {
+}, gn = {
 	class: "tpl:mt-0.5 tpl:text-[10px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, gn = {
+}, _n = {
 	key: 2,
 	class: "tpl:shrink-0"
-}, _n = {
+}, vn = {
 	class: "tpl:block tpl:text-[10px]",
 	style: { color: "var(--tpl-text-muted)" }
-}, vn = ["value"], yn = ["value"], bn = /* @__PURE__ */ et(/* @__PURE__ */ h({
+}, yn = ["value"], bn = ["value"], xn = /* @__PURE__ */ tt(/* @__PURE__ */ h({
 	__name: "MediaPreviewPanel",
 	props: {
 		item: {},
@@ -1592,7 +1592,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["update:selectedConversion"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: a } = Q(), { isImageMimeType: o } = he(), c = s(() => {
+		let n = e, r = t, { t: a } = Z(), { isImageMimeType: o } = Q(), c = s(() => {
 			if (!b.value || !n.item.conversions_generated) return [];
 			let e = [];
 			return n.item.small_url && e.push({
@@ -1651,20 +1651,20 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				day: "numeric"
 			});
 		}
-		return (t, n) => (S(), d("div", un, [
+		return (t, n) => (S(), d("div", dn, [
 			b.value ? (S(), d("img", {
 				key: 0,
 				src: h.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, dn)) : (S(), d("div", fn, [m(gt, {
+			}, null, 8, fn)) : (S(), d("div", pn, [m(_t, {
 				"mime-type": e.item.mime_type,
 				class: "tpl-preview-icon"
 			}, null, 8, ["mime-type"])])),
-			f("div", pn, [
-				f("p", mn, D(e.item.filename), 1),
-				f("p", hn, [
+			f("div", mn, [
+				f("p", hn, D(e.item.filename), 1),
+				f("p", gn, [
 					p(D(x(e.item.size)) + " · " + D(C(e.item.created_at)) + " ", 1),
 					b.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),
 					v.value ? (S(), d(i, { key: 1 }, [
@@ -1683,7 +1683,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					style: { color: "var(--tpl-text-dim)" }
 				}, D(e.item.alt_text || "\xA0"), 3)) : u("", !0)
 			]),
-			l.value ? (S(), d("div", gn, [f("label", _n, D(O(a).mediaLibrary.conversionLabel), 1), f("select", {
+			l.value ? (S(), d("div", _n, [f("label", vn, D(O(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)",
@@ -1695,36 +1695,36 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			}, [(S(!0), d(i, null, T(c.value, (e) => (S(), d("option", {
 				key: e.value,
 				value: e.value
-			}, D(e.label), 9, yn))), 128))], 40, vn)])) : u("", !0)
+			}, D(e.label), 9, bn))), 128))], 40, yn)])) : u("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-060e36cd"]]), xn = ["data-tpl-theme"], Sn = {
+}), [["__scopeId", "data-v-060e36cd"]]), Sn = ["data-tpl-theme"], Cn = {
 	class: "tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-lg tpl:p-5 tpl:shadow-xl",
 	style: { "background-color": "var(--tpl-bg-elevated)" }
-}, Cn = {
+}, wn = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, wn = {
+}, Tn = {
 	class: "tpl:mb-2 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Tn = {
+}, En = {
 	key: 0,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-warning)" }
-}, En = {
+}, Dn = {
 	class: "tpl:mb-3 tpl:rounded tpl:border tpl:p-2",
 	style: { "border-color": "var(--tpl-border)" }
-}, Dn = {
+}, On = {
 	class: "tpl:truncate tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, On = { class: "tpl:mb-4" }, kn = {
+}, kn = { class: "tpl:mb-4" }, An = {
 	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text-muted)" }
-}, An = ["accept"], jn = {
+}, jn = ["accept"], Mn = {
 	key: 1,
 	class: "tpl:mb-3 tpl:text-xs",
 	style: { color: "var(--tpl-danger)" }
-}, Mn = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Nn = ["disabled"], Pn = ["disabled"], Fn = /* @__PURE__ */ h({
+}, Nn = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Pn = ["disabled"], Fn = ["disabled"], In = /* @__PURE__ */ h({
 	__name: "MediaReplaceModal",
 	props: {
 		visible: { type: Boolean },
@@ -1735,7 +1735,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["replace", "close"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: i } = Q(), c = _("tplUiTheme"), p = w(null), h = w(null), g = s(() => {
+		let n = e, r = t, { t: i } = Z(), c = _("tplUiTheme"), p = w(null), h = w(null), g = s(() => {
 			if (!n.item) return "";
 			let e = n.item.filename.split(".");
 			return e.length > 1 ? e[e.length - 1].toLowerCase() : "";
@@ -1768,12 +1768,12 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				style: { "background-color": "var(--tpl-overlay)" },
 				onClick: n[1] ||= P((e) => r("close"), ["self"]),
 				onKeydown: C
-			}, [f("div", Sn, [
-				f("h3", Cn, D(O(i).mediaLibrary.replaceWarningTitle), 1),
-				f("p", wn, D(O(i).mediaLibrary.replaceWarningMessage.replace("{extension}", `.${g.value}`)), 1),
-				y.value ? (S(), d("p", Tn, D(O(i).mediaLibrary.replaceWarningUsageNote.replace("{count}", e.usageInfo.template_count.toString())), 1)) : u("", !0),
-				f("div", En, [f("p", Dn, D(e.item.filename), 1)]),
-				f("div", On, [f("label", kn, D(O(i).mediaLibrary.replaceSelectFile), 1), f("input", {
+			}, [f("div", Cn, [
+				f("h3", wn, D(O(i).mediaLibrary.replaceWarningTitle), 1),
+				f("p", Tn, D(O(i).mediaLibrary.replaceWarningMessage.replace("{extension}", `.${g.value}`)), 1),
+				y.value ? (S(), d("p", En, D(O(i).mediaLibrary.replaceWarningUsageNote.replace("{count}", e.usageInfo.template_count.toString())), 1)) : u("", !0),
+				f("div", Dn, [f("p", On, D(e.item.filename), 1)]),
+				f("div", kn, [f("label", An, D(O(i).mediaLibrary.replaceSelectFile), 1), f("input", {
 					ref_key: "fileInputRef",
 					ref: p,
 					type: "file",
@@ -1785,9 +1785,9 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						color: "var(--tpl-text)"
 					},
 					onChange: b
-				}, null, 40, An)]),
-				e.error ? (S(), d("p", jn, D(e.error), 1)) : u("", !0),
-				f("div", Mn, [f("button", {
+				}, null, 40, jn)]),
+				e.error ? (S(), d("p", Mn, D(e.error), 1)) : u("", !0),
+				f("div", Nn, [f("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)",
@@ -1796,29 +1796,29 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					},
 					disabled: e.isReplacing,
 					onClick: n[0] ||= (e) => r("close")
-				}, D(O(i).mediaLibrary.cancel), 9, Nn), f("button", {
+				}, D(O(i).mediaLibrary.cancel), 9, Pn), f("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 || e.isReplacing,
 					onClick: x
-				}, D(e.isReplacing ? O(i).mediaLibrary.replacing : O(i).mediaLibrary.replace), 9, Pn)])
-			])], 40, xn)) : u("", !0)]),
+				}, D(e.isReplacing ? O(i).mediaLibrary.replacing : O(i).mediaLibrary.replace), 9, Fn)])
+			])], 40, Sn)) : u("", !0)]),
 			_: 1
 		})]));
 	}
-}), In = {
+}), Ln = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, Ln = {
-	class: "tpl:text-xs",
-	style: { color: "var(--tpl-text-muted)" }
 }, Rn = {
 	class: "tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
 }, zn = {
+	class: "tpl:text-xs",
+	style: { color: "var(--tpl-text-muted)" }
+}, Bn = {
 	class: "tpl:mt-1 tpl:text-[10px]",
 	style: { color: "var(--tpl-text-dim)" }
-}, Bn = /* @__PURE__ */ h({
+}, Vn = /* @__PURE__ */ h({
 	__name: "MediaUploadZone",
 	props: {
 		isUploading: { type: Boolean },
@@ -1826,7 +1826,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["upload"],
 	setup(e, { emit: t }) {
-		let n = t, { t: r, format: a } = Q(), { allAcceptedMimeTypes: o, allAcceptedInputString: s, maxFileSize: c } = he(), l = w();
+		let n = t, { t: r, format: a } = Z(), { allAcceptedMimeTypes: o, allAcceptedInputString: s, maxFileSize: c } = Q(), l = w();
 		function u(e) {
 			let t = [];
 			for (let n of Array.from(e)) o.value.includes(n.type) && n.size <= c.value && t.push(n);
@@ -1838,7 +1838,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		}
 		let { isOverDropZone: h } = oe(l, { onDrop: (e) => {
 			e?.length && p(e);
-		} }), { open: g, onChange: _ } = Z({
+		} }), { open: g, onChange: _ } = ce({
 			accept: s.value,
 			multiple: !0
 		});
@@ -1853,12 +1853,12 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				"background-color": "var(--tpl-bg)"
 			},
 			onClick: n[0] ||= (e) => O(g)()
-		}, [e.isUploading ? (S(), d("div", In, [m(O(H), {
+		}, [e.isUploading ? (S(), d("div", Ln, [m(O(U), {
 			class: "tpl-spinner",
 			size: 20,
 			"stroke-width": 2,
 			style: { color: "var(--tpl-primary)" }
-		}), f("span", Ln, D(e.uploadProgress && e.uploadProgress.total > 1 ? O(a)(O(r).mediaLibrary.uploadingProgress, {
+		}), f("span", Rn, D(e.uploadProgress && e.uploadProgress.total > 1 ? O(a)(O(r).mediaLibrary.uploadingProgress, {
 			current: e.uploadProgress.current,
 			total: e.uploadProgress.total
 		}) : O(r).mediaLibrary.uploading), 1)])) : (S(), d(i, { key: 1 }, [
@@ -1868,20 +1868,20 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				"stroke-width": 1.5,
 				style: { color: "var(--tpl-text-dim)" }
 			}),
-			f("p", Rn, D(O(r).mediaLibrary.dropOrClick), 1),
-			f("p", zn, D(O(r).mediaLibrary.acceptedFormats), 1)
+			f("p", zn, D(O(r).mediaLibrary.dropOrClick), 1),
+			f("p", Bn, D(O(r).mediaLibrary.acceptedFormats), 1)
 		], 64))], 2));
 	}
-}), Vn = [
+}), Hn = [
 	"width",
 	"height",
 	"viewBox"
-], Hn = [
+], Un = [
 	"cx",
 	"cy",
 	"r",
 	"stroke-width"
-], Un = [
+], Wn = [
 	"cx",
 	"cy",
 	"r",
@@ -1889,14 +1889,14 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	"stroke",
 	"stroke-dasharray",
 	"stroke-dashoffset"
-], Wn = {
+], Gn = {
 	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)"
 	}
-}, Gn = /* @__PURE__ */ h({
+}, Kn = /* @__PURE__ */ h({
 	__name: "StorageProgressRing",
 	props: {
 		usedBytes: {},
@@ -1904,7 +1904,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		size: {}
 	},
 	setup(e) {
-		let t = e, { t: n, format: r } = Q(), 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)");
+		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) {
 			if (e === 0) return "0 B";
 			let t = 1024, n = [
@@ -1936,7 +1936,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			fill: "none",
 			"stroke-width": c.value,
 			style: { stroke: "var(--tpl-border)" }
-		}, null, 8, Hn), f("circle", {
+		}, null, 8, Un), f("circle", {
 			cx: a.value / 2,
 			cy: a.value / 2,
 			r: l.value,
@@ -1947,7 +1947,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			"stroke-dasharray": h.value,
 			"stroke-dashoffset": _.value,
 			class: "tpl:transition-all tpl:duration-300 tpl:ease-out"
-		}, null, 8, Un)], 8, Vn)), m(o, {
+		}, null, 8, Wn)], 8, Hn)), m(o, {
 			"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",
@@ -1955,14 +1955,127 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 			"leave-from-class": "tpl:opacity-100 tpl:translate-y-0",
 			"leave-to-class": "tpl:opacity-0 tpl:translate-y-1"
 		}, {
-			default: j(() => [i.value ? (S(), d("div", Wn, [p(D(E.value) + " ", 1), t[2] ||= f("div", {
+			default: j(() => [i.value ? (S(), d("div", Gn, [p(D(E.value) + " ", 1), t[2] ||= f("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)]),
 			_: 1
 		})], 32));
 	}
-}), Kn = ["data-tpl-theme"], qn = {
+});
+//#endregion
+//#region src/composables/useMediaLibraryUI.ts
+function qn(e) {
+	let { library: t, canUseMediaFolders: n, translations: r } = e;
+	function i() {
+		return "value" in r && typeof r.value == "object" ? r.value : r;
+	}
+	let a = w("grid"), o = w(!1), c = w(""), l = w("original"), u = w(null), d = w(!1), f = w(!1), p = s(() => {
+		let e = t.previewItem.value;
+		if (!e) return null;
+		switch (l.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;
+		}
+	}), m = s(() => t.frequentlyUsedItems.value.length > 0), h = s(() => t.viewMode.value === "frequently-used" ? t.frequentlyUsedItems.value : t.items.value), g = s(() => Object.values(t.deleteUsageInfo.value).some((e) => e.template_count > 0)), _ = {
+		images: () => i().mediaLibrary.filterImages,
+		documents: () => i().mediaLibrary.filterDocuments,
+		videos: () => i().mediaLibrary.filterVideos,
+		audio: () => i().mediaLibrary.filterAudio
+	};
+	function v(e) {
+		return _[e]?.() ?? e;
+	}
+	A(o, (e) => {
+		e && n.value && t.loadFolders();
+	}), A(() => t.previewItem.value?.id, () => {
+		l.value = "original";
+	});
+	let y = ae((e) => {
+		t.search(e);
+	}, 300);
+	function b(e) {
+		c.value = e, y(e);
+	}
+	let { copy: x, copied: S } = ie({
+		copiedDuring: 2e3,
+		legacy: !0
+	});
+	async function C(e) {
+		await t.uploadFiles(e);
+	}
+	function T(e) {
+		t.selectItem(e);
+	}
+	async function E(e, n) {
+		await t.createFolder(e, n);
+	}
+	async function D(e, n) {
+		await t.renameFolder(e, n);
+	}
+	async function O(e) {
+		await t.deleteFolder(e);
+	}
+	function k(e) {
+		u.value = e;
+	}
+	async function j(e, n, r, i) {
+		i && await t.replaceMediaDirectly(e, i.file), await t.updateFile(e, n, r), u.value = null;
+	}
+	async function M(e) {
+		await t.importFromUrl(e) && (d.value = !1);
+	}
+	async function N(e) {
+		f.value = !1, await t.moveSelected(e);
+	}
+	async function P() {
+		await t.checkUsageBeforeDelete();
+	}
+	function F(e) {
+		t.checkUsageBeforeReplace(e);
+	}
+	async function I(e) {
+		await t.replaceFile(e);
+	}
+	function L() {
+		t.clearSelection(), t.cancelDelete(), t.cancelReplace(), c.value = "", t.categoryFilter.value = null, t.sortOption.value = "newest", t.viewMode.value = "files", u.value = null, d.value = !1, l.value = "original";
+	}
+	return {
+		layoutMode: a,
+		showSidebar: o,
+		searchInput: c,
+		selectedConversion: l,
+		editingItem: u,
+		showImportUrlModal: d,
+		showMovePicker: f,
+		selectedUrl: p,
+		hasFrequentlyUsed: m,
+		displayItems: h,
+		hasUsedFiles: g,
+		copy: x,
+		copied: S,
+		getCategoryLabel: v,
+		handleSearchInput: b,
+		handleUpload: C,
+		handleSelect: T,
+		handleCreateFolder: E,
+		handleRenameFolder: D,
+		handleDeleteFolder: O,
+		handleEditItem: k,
+		handleEditSave: j,
+		handleImportFromUrl: M,
+		handleMoveToFolder: N,
+		handleDeleteClick: P,
+		handleReplaceItem: F,
+		handleReplaceFile: I,
+		resetUI: L
+	};
+}
+//#endregion
+//#region src/components/MediaLibraryModal.vue?vue&type=script&setup=true&lang.ts
+var Jn = ["data-tpl-theme"], Yn = {
 	class: "tpl-media-modal tpl-scale-in tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
 	style: {
 		width: "900px",
@@ -1973,62 +2086,62 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 		border: "1px solid var(--tpl-border)",
 		"box-shadow": "var(--tpl-shadow-xl)"
 	}
-}, Jn = {
+}, Xn = {
 	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)" }
-}, Yn = {
+}, Zn = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Xn = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Zn = { class: "tpl:relative" }, Qn = ["value", "placeholder"], $n = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, er = {
+}, Qn = { class: "tpl:flex tpl:items-center tpl:gap-3" }, $n = { class: "tpl:relative" }, er = ["value", "placeholder"], tr = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, nr = {
 	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)"
 	}
-}, tr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, nr = {
+}, rr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, ir = {
 	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)" }
-}, rr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ir = ["title"], ar = {
+}, ar = { class: "tpl:flex tpl:items-center tpl:gap-2" }, or = ["title"], sr = {
 	key: 1,
 	class: "tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, or = {
+}, cr = {
 	class: "tpl:flex tpl:rounded-md tpl:p-0.5",
 	style: {
 		border: "1px solid var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, sr = ["title"], cr = ["title"], lr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ur = ["value"], dr = { value: "" }, fr = ["value"], pr = ["value"], mr = { value: "newest" }, hr = { value: "oldest" }, gr = { value: "name_asc" }, _r = { value: "name_desc" }, vr = { value: "size_asc" }, yr = { value: "size_desc" }, br = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, xr = {
+}, lr = ["title"], ur = ["title"], dr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, fr = ["value"], pr = { value: "" }, mr = ["value"], hr = ["value"], gr = { value: "newest" }, _r = { value: "oldest" }, vr = { value: "name_asc" }, yr = { value: "name_desc" }, br = { value: "size_asc" }, xr = { value: "size_desc" }, Sr = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Cr = {
 	key: 0,
 	class: "tpl:px-4 tpl:pt-3"
-}, Sr = {
+}, wr = {
 	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)"
 	}
-}, Cr = {
+}, Tr = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, wr = {
+}, Er = {
 	key: 0,
 	class: "tpl:mb-4 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, Tr = {
+}, Dr = {
 	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)" }
-}, Er = { class: "tpl:font-medium" }, Dr = { style: { color: "var(--tpl-text-muted)" } }, Or = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, kr = {
+}, Or = { class: "tpl:font-medium" }, kr = { style: { color: "var(--tpl-text-muted)" } }, Ar = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, jr = {
 	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)" }
-}, Ar = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, jr = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Mr = {
+}, Mr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Nr = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Pr = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, Nr = {
+}, Fr = {
 	key: 1,
 	class: "tpl:relative"
-}, Pr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Fr = ["disabled"], Ir = /* @__PURE__ */ h({
+}, Ir = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Lr = ["disabled"], Rr = /* @__PURE__ */ h({
 	__name: "MediaLibraryModal",
 	props: {
 		visible: { type: Boolean },
@@ -2036,99 +2149,34 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 	},
 	emits: ["close", "select"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { t: c } = Q(), h = _("tplUiTheme"), g = _("authManager"), v = _("projectId"), x = s(() => v.value), C = _("planConfig"), E = s(() => C.hasFeature("media_folders")), k = s(() => C.hasFeature("import_from_url")), M = s(() => C.config.value?.storage.used_bytes ?? 0), N = s(() => C.config.value?.storage.limit_bytes ?? 0), { isAcceptedMimeType: I, availableCategories: R } = he(), z = {
-			images: () => c.mediaLibrary.filterImages,
-			documents: () => c.mediaLibrary.filterDocuments,
-			videos: () => c.mediaLibrary.filterVideos,
-			audio: () => c.mediaLibrary.filterAudio
-		};
-		function H(e) {
-			return z[e]?.() ?? e;
-		}
-		let W = w("grid"), G = w(!1), K = w(""), J = w("original"), Y = ue({
+		let n = e, r = t, { t: c } = Z(), h = _("tplUiTheme"), g = _("authManager"), v = _("projectId"), x = s(() => v.value), C = _("planConfig"), w = s(() => C.hasFeature("media_folders")), E = s(() => C.hasFeature("import_from_url")), k = s(() => C.config.value?.storage.used_bytes ?? 0), M = s(() => C.config.value?.storage.limit_bytes ?? 0), { isAcceptedMimeType: N, availableCategories: I } = Q(), R = de({
 			projectId: x.value,
 			authManager: g
-		}), X = s(() => {
-			let e = Y.previewItem.value;
-			if (!e) return null;
-			switch (J.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;
-			}
-		}), ne = s(() => Y.frequentlyUsedItems.value.length > 0), re = s(() => Y.viewMode.value === "frequently-used" ? Y.frequentlyUsedItems.value : Y.items.value), oe = s(() => Object.values(Y.deleteUsageInfo.value).some((e) => e.template_count > 0));
+		}), z = qn({
+			library: R,
+			canUseMediaFolders: w,
+			translations: c
+		});
 		A(() => n.visible, (e) => {
-			e ? (Y.loadItems(), Y.loadFrequentlyUsed()) : (Y.clearSelection(), Y.cancelDelete(), Y.cancelReplace(), K.value = "", Y.categoryFilter.value = null, Y.sortOption.value = "newest", Y.viewMode.value = "files", $.value = null, we.value = !1, J.value = "original");
-		}), A(G, (e) => {
-			e && E.value && Y.loadFolders();
-		}), A(() => Y.previewItem.value?.id, () => {
-			J.value = "original";
+			e ? (R.loadItems(), R.loadFrequentlyUsed()) : z.resetUI();
 		});
-		let Z = ae((e) => {
-			Y.search(e);
-		}, 300);
-		function ce(e) {
-			K.value = e, Z(e);
-		}
-		function le(e) {
+		function U(e) {
 			e.key === "Escape" && r("close");
 		}
-		async function de(e) {
-			await Y.uploadFiles(e);
-		}
-		function fe(e) {
-			Y.selectItem(e);
+		se(document, "keydown", U);
+		function G() {
+			return R.previewItem.value ? n.accept?.length ? N(R.previewItem.value.mime_type, n.accept) : !0 : !1;
 		}
-		function pe() {
-			return Y.previewItem.value ? n.accept?.length ? I(Y.previewItem.value.mime_type, n.accept) : !0 : !1;
-		}
-		function ge() {
-			if (pe()) {
-				let e = Y.previewItem.value;
+		function K() {
+			if (G()) {
+				let e = R.previewItem.value;
 				r("select", {
 					...e,
-					url: X.value || e.url
+					url: z.selectedUrl.value || e.url
 				}), r("close");
 			}
 		}
-		async function _e(e, t) {
-			await Y.createFolder(e, t);
-		}
-		async function ve(e, t) {
-			await Y.renameFolder(e, t);
-		}
-		async function ye(e) {
-			await Y.deleteFolder(e);
-		}
-		let $ = w(null);
-		function be(e) {
-			$.value = e;
-		}
-		async function xe(e, t, n, r) {
-			r && await Y.replaceMediaDirectly(e, r.file), await Y.updateFile(e, t, n), $.value = null;
-		}
-		let { copy: Se, copied: Ce } = ie({
-			copiedDuring: 2e3,
-			legacy: !0
-		}), we = w(!1);
-		async function Te(e) {
-			await Y.importFromUrl(e) && (we.value = !1);
-		}
-		let Ee = w(!1);
-		async function De(e) {
-			Ee.value = !1, await Y.moveSelected(e);
-		}
-		async function Oe() {
-			await Y.checkUsageBeforeDelete();
-		}
-		function ke(e) {
-			Y.checkUsageBeforeReplace(e);
-		}
-		async function Ae(e) {
-			await Y.replaceFile(e);
-		}
-		return se(document, "keydown", le), (t, n) => (S(), l(a, { to: "body" }, [m(o, {
+		return (t, n) => (S(), l(a, { to: "body" }, [m(o, {
 			"enter-active-class": "tpl:transition tpl:duration-200",
 			"enter-from-class": "tpl:opacity-0",
 			"enter-to-class": "tpl:opacity-100",
@@ -2140,16 +2188,16 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 				key: 0,
 				"data-tpl-theme": O(h),
 				class: "tpl tpl-media-overlay tpl:fixed tpl:inset-0 tpl:z-[9999]",
-				onClick: n[17] ||= P((e) => r("close"), ["self"])
-			}, [f("div", qn, [
-				f("div", Jn, [f("h2", Yn, D(O(c).mediaLibrary.title), 1), f("div", Xn, [
-					m(Gn, {
-						"used-bytes": M.value,
-						"limit-bytes": N.value,
+				onClick: n[18] ||= P((e) => r("close"), ["self"])
+			}, [f("div", Yn, [
+				f("div", Xn, [f("h2", Zn, D(O(c).mediaLibrary.title), 1), f("div", Qn, [
+					m(Kn, {
+						"used-bytes": k.value,
+						"limit-bytes": M.value,
 						size: 22
 					}, null, 8, ["used-bytes", "limit-bytes"]),
-					f("div", Zn, [f("input", {
-						value: K.value,
+					f("div", $n, [f("input", {
+						value: O(z).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)]",
 						style: {
@@ -2158,8 +2206,8 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 							color: "var(--tpl-text)"
 						},
 						placeholder: O(c).mediaLibrary.searchPlaceholder,
-						onInput: n[0] ||= (e) => ce(e.target.value)
-					}, null, 40, Qn), m(O(q), {
+						onInput: n[0] ||= (e) => O(z).handleSearchInput(e.target.value)
+					}, null, 40, er), m(O(J), {
 						class: "tpl:absolute tpl:top-1/2 tpl:left-2.5 tpl:-translate-y-1/2",
 						size: 13,
 						"stroke-width": 2,
@@ -2174,7 +2222,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						"stroke-width": 2
 					})])
 				])]),
-				f("div", $n, [m(o, {
+				f("div", tr, [m(o, {
 					"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",
@@ -2182,74 +2230,77 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					"leave-from-class": "tpl:ml-0 tpl:opacity-100",
 					"leave-to-class": "tpl:-ml-48 tpl:opacity-0"
 				}, {
-					default: j(() => [E.value && G.value ? (S(), d("div", er, [m(mt, {
-						folders: O(Y).folders.value,
-						"current-folder-id": O(Y).currentFolderId.value,
-						"view-mode": O(Y).viewMode.value,
-						"has-frequently-used": ne.value,
-						onNavigate: O(Y).navigateToFolder,
-						onCreateFolder: _e,
-						onRenameFolder: ve,
-						onDeleteFolder: ye,
-						onShowFrequentlyUsed: O(Y).showFrequentlyUsed
+					default: j(() => [w.value && O(z).showSidebar.value ? (S(), d("div", nr, [m(ht, {
+						folders: O(R).folders.value,
+						"current-folder-id": O(R).currentFolderId.value,
+						"view-mode": O(R).viewMode.value,
+						"has-frequently-used": O(z).hasFrequentlyUsed.value,
+						onNavigate: O(R).navigateToFolder,
+						onCreateFolder: O(z).handleCreateFolder,
+						onRenameFolder: O(z).handleRenameFolder,
+						onDeleteFolder: O(z).handleDeleteFolder,
+						onShowFrequentlyUsed: O(R).showFrequentlyUsed
 					}, null, 8, [
 						"folders",
 						"current-folder-id",
 						"view-mode",
 						"has-frequently-used",
 						"onNavigate",
+						"onCreateFolder",
+						"onRenameFolder",
+						"onDeleteFolder",
 						"onShowFrequentlyUsed"
 					])])) : u("", !0)]),
 					_: 1
-				}), f("div", tr, [f("div", nr, [f("div", rr, [
-					E.value ? (S(), d("button", {
+				}), f("div", rr, [f("div", ir, [f("div", ar, [
+					w.value ? (S(), d("button", {
 						key: 0,
 						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: G.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: G.value ? "var(--tpl-bg)" : "transparent",
-							border: G.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+							color: O(z).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: O(z).showSidebar.value ? "var(--tpl-bg)" : "transparent",
+							border: O(z).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
 						}),
-						title: G.value ? O(c).mediaLibrary.hideFolders : O(c).mediaLibrary.showFolders,
-						onClick: n[2] ||= (e) => G.value = !G.value
-					}, [m(O(U), {
+						title: O(z).showSidebar.value ? O(c).mediaLibrary.hideFolders : O(c).mediaLibrary.showFolders,
+						onClick: n[2] ||= (e) => O(z).showSidebar.value = !O(z).showSidebar.value
+					}, [m(O(W), {
 						size: 16,
 						"stroke-width": 2
-					})], 12, ir)) : u("", !0),
-					O(Y).viewMode.value === "frequently-used" ? (S(), d("span", ar, D(O(c).mediaLibrary.frequentlyUsed), 1)) : (S(), l(me, {
+					})], 12, or)) : u("", !0),
+					O(R).viewMode.value === "frequently-used" ? (S(), d("span", sr, D(O(c).mediaLibrary.frequentlyUsed), 1)) : (S(), l(he, {
 						key: 2,
-						folders: O(Y).folders.value,
-						"current-folder-id": O(Y).currentFolderId.value,
-						onNavigate: O(Y).navigateToFolder
+						folders: O(R).folders.value,
+						"current-folder-id": O(R).currentFolderId.value,
+						onNavigate: O(R).navigateToFolder
 					}, null, 8, [
 						"folders",
 						"current-folder-id",
 						"onNavigate"
 					])),
-					f("div", or, [f("button", {
+					f("div", cr, [f("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: W.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: W.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+							color: O(z).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: O(z).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
 						}),
 						title: O(c).mediaLibrary.viewGrid,
-						onClick: n[3] ||= (e) => W.value = "grid"
+						onClick: n[3] ||= (e) => O(z).layoutMode.value = "grid"
 					}, [m(O(B), {
 						size: 14,
 						"stroke-width": 2
-					})], 12, sr), f("button", {
+					})], 12, lr), f("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: W.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-							backgroundColor: W.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+							color: O(z).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+							backgroundColor: O(z).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
 						}),
 						title: O(c).mediaLibrary.viewList,
-						onClick: n[4] ||= (e) => W.value = "list"
-					}, [m(O(V), {
+						onClick: n[4] ||= (e) => O(z).layoutMode.value = "list"
+					}, [m(O(H), {
 						size: 14,
 						"stroke-width": 2
-					})], 12, cr)])
-				]), f("div", lr, [O(R).length > 1 ? (S(), d("select", {
+					})], 12, ur)])
+				]), f("div", dr, [O(I).length > 1 ? (S(), d("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: {
@@ -2257,32 +2308,36 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						"background-color": "var(--tpl-bg)",
 						color: "var(--tpl-text)"
 					},
-					value: O(Y).categoryFilter.value ?? "",
-					onChange: n[5] ||= (e) => O(Y).filterByCategory(e.target.value || null)
-				}, [f("option", dr, D(O(c).mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(O(R), (e) => (S(), d("option", {
+					value: O(R).categoryFilter.value ?? "",
+					onChange: n[5] ||= (e) => O(R).filterByCategory(e.target.value || null)
+				}, [f("option", pr, D(O(c).mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(O(I), (e) => (S(), d("option", {
 					key: e,
 					value: e
-				}, D(H(e)), 9, fr))), 128))], 40, ur)) : u("", !0), f("select", {
+				}, D(O(z).getCategoryLabel(e)), 9, mr))), 128))], 40, fr)) : 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: O(Y).sortOption.value,
-					onChange: n[6] ||= (e) => O(Y).sortBy(e.target.value)
+					value: O(R).sortOption.value,
+					onChange: n[6] ||= (e) => O(R).sortBy(e.target.value)
 				}, [
-					f("option", mr, D(O(c).mediaLibrary.sortNewest), 1),
-					f("option", hr, D(O(c).mediaLibrary.sortOldest), 1),
-					f("option", gr, D(O(c).mediaLibrary.sortNameAsc), 1),
-					f("option", _r, D(O(c).mediaLibrary.sortNameDesc), 1),
-					f("option", vr, D(O(c).mediaLibrary.sortSizeAsc), 1),
-					f("option", yr, D(O(c).mediaLibrary.sortSizeDesc), 1)
-				], 40, pr)])]), f("div", br, [O(Y).viewMode.value === "files" ? (S(), d("div", xr, [m(Bn, {
-					"is-uploading": O(Y).isUploading.value,
-					"upload-progress": O(Y).uploadProgress.value,
-					onUpload: de
-				}, null, 8, ["is-uploading", "upload-progress"]), k.value ? (S(), d("button", {
+					f("option", gr, D(O(c).mediaLibrary.sortNewest), 1),
+					f("option", _r, D(O(c).mediaLibrary.sortOldest), 1),
+					f("option", vr, D(O(c).mediaLibrary.sortNameAsc), 1),
+					f("option", yr, D(O(c).mediaLibrary.sortNameDesc), 1),
+					f("option", br, D(O(c).mediaLibrary.sortSizeAsc), 1),
+					f("option", xr, D(O(c).mediaLibrary.sortSizeDesc), 1)
+				], 40, hr)])]), f("div", Sr, [O(R).viewMode.value === "files" ? (S(), d("div", Cr, [m(Vn, {
+					"is-uploading": O(R).isUploading.value,
+					"upload-progress": O(R).uploadProgress.value,
+					onUpload: O(z).handleUpload
+				}, null, 8, [
+					"is-uploading",
+					"upload-progress",
+					"onUpload"
+				]), E.value ? (S(), d("button", {
 					key: 0,
 					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: {
@@ -2290,22 +2345,22 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						color: "var(--tpl-text-muted)",
 						"background-color": "var(--tpl-bg)"
 					},
-					onClick: n[7] ||= (e) => we.value = !0
-				}, [m(O(ee), {
+					onClick: n[7] ||= (e) => O(z).showImportUrlModal.value = !0
+				}, [m(O(V), {
 					size: 14,
 					"stroke-width": 2
-				}), p(" " + D(O(c).mediaLibrary.importFromUrl), 1)])) : u("", !0)])) : u("", !0), m(Gt, {
-					items: re.value,
-					"selected-ids": O(Y).selectedItems.value,
-					"is-loading": O(Y).isLoading.value,
-					"has-more": O(Y).viewMode.value === "files" && O(Y).hasMore.value,
+				}), p(" " + D(O(c).mediaLibrary.importFromUrl), 1)])) : u("", !0)])) : u("", !0), m(Kt, {
+					items: O(z).displayItems.value,
+					"selected-ids": O(R).selectedItems.value,
+					"is-loading": O(R).isLoading.value,
+					"has-more": O(R).viewMode.value === "files" && O(R).hasMore.value,
 					accept: e.accept,
-					layout: W.value,
-					onSelect: fe,
-					onToggle: O(Y).toggleSelection,
-					onLoadMore: O(Y).loadMore,
-					onEdit: be,
-					onReplace: ke
+					layout: O(z).layoutMode.value,
+					onSelect: O(z).handleSelect,
+					onToggle: O(R).toggleSelection,
+					onLoadMore: O(R).loadMore,
+					onEdit: O(z).handleEditItem,
+					onReplace: O(z).handleReplaceItem
 				}, null, 8, [
 					"items",
 					"selected-ids",
@@ -2313,40 +2368,49 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					"has-more",
 					"accept",
 					"layout",
+					"onSelect",
 					"onToggle",
-					"onLoadMore"
+					"onLoadMore",
+					"onEdit",
+					"onReplace"
 				])])])]),
-				m(rn, {
-					visible: we.value,
-					"is-importing": O(Y).isImportingFromUrl.value,
-					error: O(Y).importFromUrlError.value,
-					onImport: Te,
-					onClose: n[8] ||= (e) => we.value = !1
+				m(an, {
+					visible: O(z).showImportUrlModal.value,
+					"is-importing": O(R).isImportingFromUrl.value,
+					error: O(R).importFromUrlError.value,
+					onImport: O(z).handleImportFromUrl,
+					onClose: n[8] ||= (e) => O(z).showImportUrlModal.value = !1
 				}, null, 8, [
 					"visible",
 					"is-importing",
-					"error"
+					"error",
+					"onImport"
 				]),
-				m(tt, {
-					visible: !!$.value,
-					item: $.value,
-					onSave: xe,
-					onClose: n[9] ||= (e) => $.value = null
-				}, null, 8, ["visible", "item"]),
-				m(Fn, {
-					visible: O(Y).showReplaceWarning.value,
-					item: O(Y).pendingReplaceItem.value,
-					"usage-info": O(Y).replaceUsageInfo.value,
-					"is-replacing": O(Y).isReplacing.value,
-					error: O(Y).replaceError.value,
-					onReplace: Ae,
-					onClose: O(Y).cancelReplace
+				m(nt, {
+					visible: !!O(z).editingItem.value,
+					item: O(z).editingItem.value,
+					onSave: O(z).handleEditSave,
+					onClose: n[9] ||= (e) => O(z).editingItem.value = null
+				}, null, 8, [
+					"visible",
+					"item",
+					"onSave"
+				]),
+				m(In, {
+					visible: O(R).showReplaceWarning.value,
+					item: O(R).pendingReplaceItem.value,
+					"usage-info": O(R).replaceUsageInfo.value,
+					"is-replacing": O(R).isReplacing.value,
+					error: O(R).replaceError.value,
+					onReplace: O(z).handleReplaceFile,
+					onClose: O(R).cancelReplace
 				}, null, 8, [
 					"visible",
 					"item",
 					"usage-info",
 					"is-replacing",
 					"error",
+					"onReplace",
 					"onClose"
 				]),
 				m(o, {
@@ -2357,7 +2421,7 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					"leave-from-class": "tpl:opacity-100",
 					"leave-to-class": "tpl:opacity-0"
 				}, {
-					default: j(() => [O(Y).showDeleteWarning.value ? (S(), d("div", {
+					default: j(() => [O(R).showDeleteWarning.value ? (S(), d("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: {
@@ -2365,27 +2429,27 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 							"backdrop-filter": "blur(8px)",
 							"-webkit-backdrop-filter": "blur(8px)"
 						},
-						onClick: n[12] ||= P((...e) => O(Y).cancelDelete && O(Y).cancelDelete(...e), ["self"])
-					}, [f("div", Sr, [
-						f("h3", Cr, D(O(c).mediaLibrary.deleteWarningTitle), 1),
+						onClick: n[12] ||= P((...e) => O(R).cancelDelete && O(R).cancelDelete(...e), ["self"])
+					}, [f("div", wr, [
+						f("h3", Tr, D(O(c).mediaLibrary.deleteWarningTitle), 1),
 						f("p", {
-							class: y(["tpl:text-xs", oe.value ? "tpl:mb-2" : "tpl:mb-4"]),
+							class: y(["tpl:text-xs", O(z).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
 							style: { color: "var(--tpl-text-muted)" }
 						}, D(O(c).mediaLibrary.deleteWarningMessage), 3),
-						oe.value ? (S(), d("p", wr, D(O(c).mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
-						oe.value ? (S(), d("div", Tr, [(S(!0), d(i, null, T(O(Y).deleteUsageInfo.value, (e, t) => (S(), d("div", {
+						O(z).hasUsedFiles.value ? (S(), d("p", Er, D(O(c).mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
+						O(z).hasUsedFiles.value ? (S(), d("div", Dr, [(S(!0), d(i, null, T(O(R).deleteUsageInfo.value, (e, t) => (S(), d("div", {
 							key: t,
 							class: "tpl:text-xs",
 							style: { color: "var(--tpl-text)" }
-						}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", Er, D(re.value.find((e) => e.id === t)?.filename || t), 1), f("span", Dr, " - " + D(O(c).mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
-						f("div", Or, [f("button", {
+						}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", Or, D(O(z).displayItems.value.find((e) => e.id === t)?.filename || t), 1), f("span", kr, " - " + D(O(c).mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
+						f("div", Ar, [f("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) => O(Y).cancelDelete && O(Y).cancelDelete(...e)
+							onClick: n[10] ||= (...e) => O(R).cancelDelete && O(R).cancelDelete(...e)
 						}, D(O(c).mediaLibrary.cancel), 1), f("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: {
@@ -2393,31 +2457,31 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 								color: "var(--tpl-danger)",
 								"background-color": "var(--tpl-danger-light)"
 							},
-							onClick: n[11] ||= (...e) => O(Y).confirmDelete && O(Y).confirmDelete(...e)
-						}, D(oe.value ? O(c).mediaLibrary.deleteAnyway : O(c).mediaLibrary.confirmDelete), 1)])
+							onClick: n[11] ||= (...e) => O(R).confirmDelete && O(R).confirmDelete(...e)
+						}, D(O(z).hasUsedFiles.value ? O(c).mediaLibrary.deleteAnyway : O(c).mediaLibrary.confirmDelete), 1)])
 					])])) : u("", !0)]),
 					_: 1
 				}),
-				f("div", kr, [f("div", Ar, [O(Y).previewItem.value ? (S(), l(bn, {
+				f("div", jr, [f("div", Mr, [O(R).previewItem.value ? (S(), l(xn, {
 					key: 0,
-					"selected-conversion": J.value,
-					"onUpdate:selectedConversion": n[13] ||= (e) => J.value = e,
-					item: O(Y).previewItem.value,
-					folders: O(Y).folders.value
+					"selected-conversion": O(z).selectedConversion.value,
+					"onUpdate:selectedConversion": n[13] ||= (e) => O(z).selectedConversion.value = e,
+					item: O(R).previewItem.value,
+					folders: O(R).folders.value
 				}, null, 8, [
 					"selected-conversion",
 					"item",
 					"folders"
-				])) : u("", !0)]), f("div", jr, [O(Y).selectedItems.value.size > 0 ? (S(), d("div", Mr, [O(Y).previewItem.value ? (S(), d("button", {
+				])) : u("", !0)]), f("div", Nr, [O(R).selectedItems.value.size > 0 ? (S(), d("div", Pr, [O(R).previewItem.value ? (S(), d("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: O(Ce) ? "var(--tpl-success)" : "var(--tpl-border)",
-						color: O(Ce) ? "var(--tpl-success)" : "var(--tpl-text)",
+						borderColor: O(z).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
+						color: O(z).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
 						backgroundColor: "var(--tpl-bg)"
 					}),
-					onClick: n[14] ||= (e) => O(Se)(X.value)
-				}, [O(Ce) ? (S(), l(O(F), {
+					onClick: n[14] ||= (e) => O(z).copy(O(z).selectedUrl.value)
+				}, [O(z).copied.value ? (S(), l(O(F), {
 					key: 1,
 					size: 12,
 					"stroke-width": 2
@@ -2425,21 +2489,25 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 					key: 0,
 					size: 12,
 					"stroke-width": 2
-				})), p(" " + D(O(Ce) ? O(c).mediaLibrary.copied : O(c).mediaLibrary.copyUrl), 1)], 4)) : u("", !0), E.value ? (S(), d("div", Nr, [f("button", {
+				})), p(" " + D(O(z).copied.value ? O(c).mediaLibrary.copied : O(c).mediaLibrary.copyUrl), 1)], 4)) : u("", !0), w.value ? (S(), d("div", Fr, [f("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) => Ee.value = !Ee.value
-				}, D(O(c).mediaLibrary.moveSelected), 1), Ee.value ? (S(), l(ln, {
+					onClick: n[15] ||= (e) => O(z).showMovePicker.value = !O(z).showMovePicker.value
+				}, D(O(c).mediaLibrary.moveSelected), 1), O(z).showMovePicker.value ? (S(), l(un, {
 					key: 0,
-					folders: O(Y).folders.value,
-					"current-folder-id": O(Y).currentFolderId.value,
-					onSelect: De,
-					onClose: n[16] ||= (e) => Ee.value = !1
-				}, null, 8, ["folders", "current-folder-id"])) : u("", !0)])) : u("", !0)])) : u("", !0), f("div", Pr, [O(Y).selectedItems.value.size > 0 ? (S(), d("button", {
+					folders: O(R).folders.value,
+					"current-folder-id": O(R).currentFolderId.value,
+					onSelect: O(z).handleMoveToFolder,
+					onClose: n[16] ||= (e) => O(z).showMovePicker.value = !1
+				}, null, 8, [
+					"folders",
+					"current-folder-id",
+					"onSelect"
+				])) : u("", !0)])) : u("", !0)])) : u("", !0), f("div", Ir, [O(R).selectedItems.value.size > 0 ? (S(), d("button", {
 					key: 0,
 					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: {
@@ -2447,24 +2515,24 @@ var be = ["data-tpl-theme"], xe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Se
 						color: "var(--tpl-danger)",
 						"background-color": "var(--tpl-danger-light)"
 					},
-					onClick: Oe
+					onClick: n[17] ||= (...e) => O(z).handleDeleteClick && O(z).handleDeleteClick(...e)
 				}, D(O(c).mediaLibrary.deleteSelected), 1)) : u("", !0), f("button", {
 					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: !pe(),
-					onClick: ge
-				}, D(e.accept?.length ? O(c).mediaLibrary.selectImage : O(c).mediaLibrary.selectFile), 9, Fr)])])])
-			])], 8, Kn)) : u("", !0)]),
+					disabled: !G(),
+					onClick: K
+				}, D(e.accept?.length ? O(c).mediaLibrary.selectImage : O(c).mediaLibrary.selectFile), 9, Lr)])])])
+			])], 8, Jn)) : u("", !0)]),
 			_: 1
 		})]));
 	}
 });
 //#endregion
 //#region src/composables/useMediaPicker.ts
-function Lr() {
+function zr() {
 	let e = _("onRequestMedia"), t = _("planConfig"), n = w(!1), r = s(() => !!e && t.hasFeature("pluggable_media"));
 	async function i(t) {
 		if (!e) return null;
@@ -2483,7 +2551,7 @@ function Lr() {
 }
 //#endregion
 //#region src/standalone/MediaLibrary.vue?vue&type=script&setup=true&lang.ts
-var Rr = {
+var Br = {
 	class: "tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
 	style: {
 		width: "100%",
@@ -2491,62 +2559,62 @@ var Rr = {
 		"background-color": "var(--tpl-bg-elevated)",
 		border: "1px solid var(--tpl-border)"
 	}
-}, zr = {
+}, Vr = {
 	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)" }
-}, Br = {
+}, Hr = {
 	class: "tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, Vr = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Hr = { class: "tpl:relative" }, Ur = ["value", "placeholder"], Wr = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, Gr = {
+}, Ur = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Wr = { class: "tpl:relative" }, Gr = ["value", "placeholder"], Kr = { 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)"
 	}
-}, Kr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, qr = {
+}, Jr = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, Yr = {
 	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)" }
-}, Jr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Yr = ["title"], Xr = {
+}, Xr = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Zr = ["title"], Qr = {
 	key: 1,
 	class: "tpl:text-xs tpl:font-medium",
 	style: { color: "var(--tpl-text)" }
-}, Zr = {
+}, $r = {
 	class: "tpl:flex tpl:rounded-md tpl:p-0.5",
 	style: {
 		border: "1px solid var(--tpl-border)",
 		"background-color": "var(--tpl-bg)"
 	}
-}, Qr = ["title"], $r = ["title"], ei = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ti = ["value"], ni = { value: "" }, ri = ["value"], ii = ["value"], ai = { value: "newest" }, oi = { value: "oldest" }, si = { value: "name_asc" }, ci = { value: "name_desc" }, li = { value: "size_asc" }, ui = { value: "size_desc" }, di = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, fi = {
+}, ei = ["title"], ti = ["title"], ni = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ri = ["value"], ii = { value: "" }, ai = ["value"], oi = ["value"], si = { value: "newest" }, ci = { value: "oldest" }, li = { value: "name_asc" }, ui = { value: "name_desc" }, di = { value: "size_asc" }, fi = { value: "size_desc" }, pi = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, mi = {
 	key: 0,
 	class: "tpl:px-4 tpl:pt-3"
-}, pi = {
+}, hi = {
 	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)"
 	}
-}, mi = {
+}, gi = {
 	class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
 	style: { color: "var(--tpl-text)" }
-}, hi = {
+}, _i = {
 	key: 0,
 	class: "tpl:mb-4 tpl:text-xs",
 	style: { color: "var(--tpl-text-muted)" }
-}, gi = {
+}, vi = {
 	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)" }
-}, _i = { class: "tpl:font-medium" }, vi = { style: { color: "var(--tpl-text-muted)" } }, yi = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, bi = {
+}, yi = { class: "tpl:font-medium" }, bi = { style: { color: "var(--tpl-text-muted)" } }, xi = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Si = {
 	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)" }
-}, 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 = {
+}, Ci = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, wi = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Ti = {
 	key: 0,
 	class: "tpl:flex tpl:items-center tpl:gap-2"
-}, wi = {
+}, Ei = {
 	key: 1,
 	class: "tpl:relative"
-}, Ti = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Ei = ["disabled"], Di = /* @__PURE__ */ h({
+}, Di = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Oi = ["disabled"], ki = /* @__PURE__ */ h({
 	__name: "MediaLibrary",
 	props: {
 		authManager: {},
@@ -2566,99 +2634,32 @@ var Rr = {
 			features: s(() => n.planConfig.features),
 			fetchConfig: async () => {}
 		});
-		let c = s(() => n.planConfig.features.media_folders ?? !1), h = s(() => n.planConfig.features.import_from_url ?? !1), g = s(() => n.planConfig.storage.used_bytes ?? 0), _ = s(() => n.planConfig.storage.limit_bytes ?? 0), { availableCategories: v } = he(), E = {
-			images: () => a.value.mediaLibrary.filterImages,
-			documents: () => a.value.mediaLibrary.filterDocuments,
-			videos: () => a.value.mediaLibrary.filterVideos,
-			audio: () => a.value.mediaLibrary.filterAudio
-		};
-		function k(e) {
-			return E[e]?.() ?? e;
-		}
-		let M = w("grid"), N = w(!1), I = w(""), R = w("original"), z = ue({
+		let c = s(() => n.planConfig.features.media_folders ?? !1), h = s(() => n.planConfig.features.import_from_url ?? !1), g = s(() => n.planConfig.storage.used_bytes ?? 0), _ = s(() => n.planConfig.storage.limit_bytes ?? 0), { availableCategories: v } = Q(), E = de({
 			projectId: n.projectId,
 			authManager: n.authManager,
 			onError: n.onError
-		}), H = s(() => {
-			let e = z.previewItem.value;
-			if (!e) return null;
-			switch (R.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;
-			}
-		}), W = s(() => z.frequentlyUsedItems.value.length > 0), G = s(() => z.viewMode.value === "frequently-used" ? z.frequentlyUsedItems.value : z.items.value), K = s(() => Object.values(z.deleteUsageInfo.value).some((e) => e.template_count > 0));
-		A(N, (e) => {
-			e && c.value && z.loadFolders();
-		}), A(() => z.previewItem.value?.id, () => {
-			R.value = "original";
+		}), k = qn({
+			library: E,
+			canUseMediaFolders: c,
+			translations: a
 		});
-		let J = ae((e) => {
-			z.search(e);
-		}, 300);
-		function Y(e) {
-			I.value = e, J(e);
-		}
-		async function X(e) {
-			await z.uploadFiles(e);
-		}
-		function te(e) {
-			z.selectItem(e);
-		}
-		function ne() {
-			if (!z.previewItem.value) return;
-			let e = z.previewItem.value, t = {
+		function A() {
+			if (!E.previewItem.value) return;
+			let e = E.previewItem.value, t = {
 				...e,
-				url: H.value || e.url
+				url: k.selectedUrl.value || e.url
 			};
 			n.onSelect?.(t);
 		}
-		async function re(e, t) {
-			await z.createFolder(e, t);
-		}
-		async function oe(e, t) {
-			await z.renameFolder(e, t);
-		}
-		async function se(e) {
-			await z.deleteFolder(e);
-		}
-		let Z = w(null);
-		function ce(e) {
-			Z.value = e;
-		}
-		async function le(e, t, n, r) {
-			r && await z.replaceMediaDirectly(e, r.file), await z.updateFile(e, t, n), Z.value = null;
-		}
-		let { copy: Q, copied: de } = ie({
-			copiedDuring: 2e3,
-			legacy: !0
-		}), fe = w(!1);
-		async function pe(e) {
-			await z.importFromUrl(e) && (fe.value = !1);
-		}
-		let ge = w(!1);
-		async function _e(e) {
-			ge.value = !1, await z.moveSelected(e);
-		}
-		async function ve() {
-			await z.checkUsageBeforeDelete();
-		}
-		function ye(e) {
-			z.checkUsageBeforeReplace(e);
-		}
-		async function $(e) {
-			await z.replaceFile(e);
-		}
 		return x(() => {
-			z.loadItems(), z.loadFrequentlyUsed(), r("ready");
-		}), (t, n) => (S(), d("div", Rr, [
-			f("div", zr, [f("h2", Br, D(a.value.mediaLibrary.title), 1), f("div", Vr, [m(Gn, {
+			E.loadItems(), E.loadFrequentlyUsed(), r("ready");
+		}), (t, n) => (S(), d("div", Br, [
+			f("div", Vr, [f("h2", Hr, D(a.value.mediaLibrary.title), 1), f("div", Ur, [m(Kn, {
 				"used-bytes": g.value,
 				"limit-bytes": _.value,
 				size: 22
-			}, null, 8, ["used-bytes", "limit-bytes"]), f("div", Hr, [f("input", {
-				value: I.value,
+			}, null, 8, ["used-bytes", "limit-bytes"]), f("div", Wr, [f("input", {
+				value: O(k).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)]",
 				style: {
@@ -2667,14 +2668,14 @@ var Rr = {
 					color: "var(--tpl-text)"
 				},
 				placeholder: a.value.mediaLibrary.searchPlaceholder,
-				onInput: n[0] ||= (e) => Y(e.target.value)
-			}, null, 40, Ur), m(O(q), {
+				onInput: n[0] ||= (e) => O(k).handleSearchInput(e.target.value)
+			}, null, 40, Gr), m(O(J), {
 				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", Wr, [m(o, {
+			f("div", Kr, [m(o, {
 				"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",
@@ -2682,74 +2683,77 @@ var Rr = {
 				"leave-from-class": "tpl:ml-0 tpl:opacity-100",
 				"leave-to-class": "tpl:-ml-48 tpl:opacity-0"
 			}, {
-				default: j(() => [c.value && N.value ? (S(), d("div", Gr, [m(mt, {
-					folders: O(z).folders.value,
-					"current-folder-id": O(z).currentFolderId.value,
-					"view-mode": O(z).viewMode.value,
-					"has-frequently-used": W.value,
-					onNavigate: O(z).navigateToFolder,
-					onCreateFolder: re,
-					onRenameFolder: oe,
-					onDeleteFolder: se,
-					onShowFrequentlyUsed: O(z).showFrequentlyUsed
+				default: j(() => [c.value && O(k).showSidebar.value ? (S(), d("div", qr, [m(ht, {
+					folders: O(E).folders.value,
+					"current-folder-id": O(E).currentFolderId.value,
+					"view-mode": O(E).viewMode.value,
+					"has-frequently-used": O(k).hasFrequentlyUsed.value,
+					onNavigate: O(E).navigateToFolder,
+					onCreateFolder: O(k).handleCreateFolder,
+					onRenameFolder: O(k).handleRenameFolder,
+					onDeleteFolder: O(k).handleDeleteFolder,
+					onShowFrequentlyUsed: O(E).showFrequentlyUsed
 				}, null, 8, [
 					"folders",
 					"current-folder-id",
 					"view-mode",
 					"has-frequently-used",
 					"onNavigate",
+					"onCreateFolder",
+					"onRenameFolder",
+					"onDeleteFolder",
 					"onShowFrequentlyUsed"
 				])])) : u("", !0)]),
 				_: 1
-			}), f("div", Kr, [f("div", qr, [f("div", Jr, [
+			}), f("div", Jr, [f("div", Yr, [f("div", Xr, [
 				c.value ? (S(), d("button", {
 					key: 0,
 					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: N.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: N.value ? "var(--tpl-bg)" : "transparent",
-						border: N.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+						color: O(k).showSidebar.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: O(k).showSidebar.value ? "var(--tpl-bg)" : "transparent",
+						border: O(k).showSidebar.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
 					}),
-					title: N.value ? a.value.mediaLibrary.hideFolders : a.value.mediaLibrary.showFolders,
-					onClick: n[1] ||= (e) => N.value = !N.value
-				}, [m(O(U), {
+					title: O(k).showSidebar.value ? a.value.mediaLibrary.hideFolders : a.value.mediaLibrary.showFolders,
+					onClick: n[1] ||= (e) => O(k).showSidebar.value = !O(k).showSidebar.value
+				}, [m(O(W), {
 					size: 16,
 					"stroke-width": 2
-				})], 12, Yr)) : u("", !0),
-				O(z).viewMode.value === "frequently-used" ? (S(), d("span", Xr, D(a.value.mediaLibrary.frequentlyUsed), 1)) : (S(), l(me, {
+				})], 12, Zr)) : u("", !0),
+				O(E).viewMode.value === "frequently-used" ? (S(), d("span", Qr, D(a.value.mediaLibrary.frequentlyUsed), 1)) : (S(), l(he, {
 					key: 2,
-					folders: O(z).folders.value,
-					"current-folder-id": O(z).currentFolderId.value,
-					onNavigate: O(z).navigateToFolder
+					folders: O(E).folders.value,
+					"current-folder-id": O(E).currentFolderId.value,
+					onNavigate: O(E).navigateToFolder
 				}, null, 8, [
 					"folders",
 					"current-folder-id",
 					"onNavigate"
 				])),
-				f("div", Zr, [f("button", {
+				f("div", $r, [f("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: M.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: M.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+						color: O(k).layoutMode.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: O(k).layoutMode.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
 					}),
 					title: a.value.mediaLibrary.viewGrid,
-					onClick: n[2] ||= (e) => M.value = "grid"
+					onClick: n[2] ||= (e) => O(k).layoutMode.value = "grid"
 				}, [m(O(B), {
 					size: 14,
 					"stroke-width": 2
-				})], 12, Qr), f("button", {
+				})], 12, ei), f("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: M.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						backgroundColor: M.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+						color: O(k).layoutMode.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+						backgroundColor: O(k).layoutMode.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
 					}),
 					title: a.value.mediaLibrary.viewList,
-					onClick: n[3] ||= (e) => M.value = "list"
-				}, [m(O(V), {
+					onClick: n[3] ||= (e) => O(k).layoutMode.value = "list"
+				}, [m(O(H), {
 					size: 14,
 					"stroke-width": 2
-				})], 12, $r)])
-			]), f("div", ei, [O(v).length > 1 ? (S(), d("select", {
+				})], 12, ti)])
+			]), f("div", ni, [O(v).length > 1 ? (S(), d("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: {
@@ -2757,32 +2761,36 @@ var Rr = {
 					"background-color": "var(--tpl-bg)",
 					color: "var(--tpl-text)"
 				},
-				value: O(z).categoryFilter.value ?? "",
-				onChange: n[4] ||= (e) => O(z).filterByCategory(e.target.value || null)
-			}, [f("option", ni, D(a.value.mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(O(v), (e) => (S(), d("option", {
+				value: O(E).categoryFilter.value ?? "",
+				onChange: n[4] ||= (e) => O(E).filterByCategory(e.target.value || null)
+			}, [f("option", ii, D(a.value.mediaLibrary.filterAll), 1), (S(!0), d(i, null, T(O(v), (e) => (S(), d("option", {
 				key: e,
 				value: e
-			}, D(k(e)), 9, ri))), 128))], 40, ti)) : u("", !0), f("select", {
+			}, D(O(k).getCategoryLabel(e)), 9, ai))), 128))], 40, ri)) : 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: O(z).sortOption.value,
-				onChange: n[5] ||= (e) => O(z).sortBy(e.target.value)
+				value: O(E).sortOption.value,
+				onChange: n[5] ||= (e) => O(E).sortBy(e.target.value)
 			}, [
-				f("option", ai, D(a.value.mediaLibrary.sortNewest), 1),
-				f("option", oi, D(a.value.mediaLibrary.sortOldest), 1),
-				f("option", si, D(a.value.mediaLibrary.sortNameAsc), 1),
-				f("option", ci, D(a.value.mediaLibrary.sortNameDesc), 1),
-				f("option", li, D(a.value.mediaLibrary.sortSizeAsc), 1),
-				f("option", ui, D(a.value.mediaLibrary.sortSizeDesc), 1)
-			], 40, ii)])]), f("div", di, [O(z).viewMode.value === "files" ? (S(), d("div", fi, [m(Bn, {
-				"is-uploading": O(z).isUploading.value,
-				"upload-progress": O(z).uploadProgress.value,
-				onUpload: X
-			}, null, 8, ["is-uploading", "upload-progress"]), h.value ? (S(), d("button", {
+				f("option", si, D(a.value.mediaLibrary.sortNewest), 1),
+				f("option", ci, D(a.value.mediaLibrary.sortOldest), 1),
+				f("option", li, D(a.value.mediaLibrary.sortNameAsc), 1),
+				f("option", ui, D(a.value.mediaLibrary.sortNameDesc), 1),
+				f("option", di, D(a.value.mediaLibrary.sortSizeAsc), 1),
+				f("option", fi, D(a.value.mediaLibrary.sortSizeDesc), 1)
+			], 40, oi)])]), f("div", pi, [O(E).viewMode.value === "files" ? (S(), d("div", mi, [m(Vn, {
+				"is-uploading": O(E).isUploading.value,
+				"upload-progress": O(E).uploadProgress.value,
+				onUpload: O(k).handleUpload
+			}, null, 8, [
+				"is-uploading",
+				"upload-progress",
+				"onUpload"
+			]), h.value ? (S(), d("button", {
 				key: 0,
 				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: {
@@ -2790,61 +2798,70 @@ var Rr = {
 					color: "var(--tpl-text-muted)",
 					"background-color": "var(--tpl-bg)"
 				},
-				onClick: n[6] ||= (e) => fe.value = !0
-			}, [m(O(ee), {
+				onClick: n[6] ||= (e) => O(k).showImportUrlModal.value = !0
+			}, [m(O(V), {
 				size: 14,
 				"stroke-width": 2
-			}), p(" " + D(a.value.mediaLibrary.importFromUrl), 1)])) : u("", !0)])) : u("", !0), m(Gt, {
-				items: G.value,
-				"selected-ids": O(z).selectedItems.value,
-				"is-loading": O(z).isLoading.value,
-				"has-more": O(z).viewMode.value === "files" && O(z).hasMore.value,
-				layout: M.value,
-				onSelect: te,
-				onToggle: O(z).toggleSelection,
-				onLoadMore: O(z).loadMore,
-				onEdit: ce,
-				onReplace: ye
+			}), p(" " + D(a.value.mediaLibrary.importFromUrl), 1)])) : u("", !0)])) : u("", !0), m(Kt, {
+				items: O(k).displayItems.value,
+				"selected-ids": O(E).selectedItems.value,
+				"is-loading": O(E).isLoading.value,
+				"has-more": O(E).viewMode.value === "files" && O(E).hasMore.value,
+				layout: O(k).layoutMode.value,
+				onSelect: O(k).handleSelect,
+				onToggle: O(E).toggleSelection,
+				onLoadMore: O(E).loadMore,
+				onEdit: O(k).handleEditItem,
+				onReplace: O(k).handleReplaceItem
 			}, null, 8, [
 				"items",
 				"selected-ids",
 				"is-loading",
 				"has-more",
 				"layout",
+				"onSelect",
 				"onToggle",
-				"onLoadMore"
+				"onLoadMore",
+				"onEdit",
+				"onReplace"
 			])])])]),
-			m(rn, {
-				visible: fe.value,
-				"is-importing": O(z).isImportingFromUrl.value,
-				error: O(z).importFromUrlError.value,
-				onImport: pe,
-				onClose: n[7] ||= (e) => fe.value = !1
+			m(an, {
+				visible: O(k).showImportUrlModal.value,
+				"is-importing": O(E).isImportingFromUrl.value,
+				error: O(E).importFromUrlError.value,
+				onImport: O(k).handleImportFromUrl,
+				onClose: n[7] ||= (e) => O(k).showImportUrlModal.value = !1
 			}, null, 8, [
 				"visible",
 				"is-importing",
-				"error"
+				"error",
+				"onImport"
+			]),
+			m(nt, {
+				visible: !!O(k).editingItem.value,
+				item: O(k).editingItem.value,
+				onSave: O(k).handleEditSave,
+				onClose: n[8] ||= (e) => O(k).editingItem.value = null
+			}, null, 8, [
+				"visible",
+				"item",
+				"onSave"
 			]),
-			m(tt, {
-				visible: !!Z.value,
-				item: Z.value,
-				onSave: le,
-				onClose: n[8] ||= (e) => Z.value = null
-			}, null, 8, ["visible", "item"]),
-			m(Fn, {
-				visible: O(z).showReplaceWarning.value,
-				item: O(z).pendingReplaceItem.value,
-				"usage-info": O(z).replaceUsageInfo.value,
-				"is-replacing": O(z).isReplacing.value,
-				error: O(z).replaceError.value,
-				onReplace: $,
-				onClose: O(z).cancelReplace
+			m(In, {
+				visible: O(E).showReplaceWarning.value,
+				item: O(E).pendingReplaceItem.value,
+				"usage-info": O(E).replaceUsageInfo.value,
+				"is-replacing": O(E).isReplacing.value,
+				error: O(E).replaceError.value,
+				onReplace: O(k).handleReplaceFile,
+				onClose: O(E).cancelReplace
 			}, null, 8, [
 				"visible",
 				"item",
 				"usage-info",
 				"is-replacing",
 				"error",
+				"onReplace",
 				"onClose"
 			]),
 			m(o, {
@@ -2855,7 +2872,7 @@ var Rr = {
 				"leave-from-class": "tpl:opacity-100",
 				"leave-to-class": "tpl:opacity-0"
 			}, {
-				default: j(() => [O(z).showDeleteWarning.value ? (S(), d("div", {
+				default: j(() => [O(E).showDeleteWarning.value ? (S(), d("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: {
@@ -2863,27 +2880,27 @@ var Rr = {
 						"backdrop-filter": "blur(8px)",
 						"-webkit-backdrop-filter": "blur(8px)"
 					},
-					onClick: n[11] ||= P((...e) => O(z).cancelDelete && O(z).cancelDelete(...e), ["self"])
-				}, [f("div", pi, [
-					f("h3", mi, D(a.value.mediaLibrary.deleteWarningTitle), 1),
+					onClick: n[11] ||= P((...e) => O(E).cancelDelete && O(E).cancelDelete(...e), ["self"])
+				}, [f("div", hi, [
+					f("h3", gi, D(a.value.mediaLibrary.deleteWarningTitle), 1),
 					f("p", {
-						class: y(["tpl:text-xs", K.value ? "tpl:mb-2" : "tpl:mb-4"]),
+						class: y(["tpl:text-xs", O(k).hasUsedFiles.value ? "tpl:mb-2" : "tpl:mb-4"]),
 						style: { color: "var(--tpl-text-muted)" }
 					}, D(a.value.mediaLibrary.deleteWarningMessage), 3),
-					K.value ? (S(), d("p", hi, D(a.value.mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
-					K.value ? (S(), d("div", gi, [(S(!0), d(i, null, T(O(z).deleteUsageInfo.value, (e, t) => (S(), d("div", {
+					O(k).hasUsedFiles.value ? (S(), d("p", _i, D(a.value.mediaLibrary.deleteWarningUsageNote), 1)) : u("", !0),
+					O(k).hasUsedFiles.value ? (S(), d("div", vi, [(S(!0), d(i, null, T(O(E).deleteUsageInfo.value, (e, t) => (S(), d("div", {
 						key: t,
 						class: "tpl:text-xs",
 						style: { color: "var(--tpl-text)" }
-					}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", _i, D(G.value.find((e) => e.id === t)?.filename || t), 1), f("span", vi, " - " + D(a.value.mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
-					f("div", yi, [f("button", {
+					}, [e.template_count > 0 ? (S(), d(i, { key: 0 }, [f("span", yi, D(O(k).displayItems.value.find((e) => e.id === t)?.filename || t), 1), f("span", bi, " - " + D(a.value.mediaLibrary.usedInTemplates.replace("{count}", e.template_count.toString())), 1)], 64)) : u("", !0)]))), 128))])) : u("", !0),
+					f("div", xi, [f("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) => O(z).cancelDelete && O(z).cancelDelete(...e)
+						onClick: n[9] ||= (...e) => O(E).cancelDelete && O(E).cancelDelete(...e)
 					}, D(a.value.mediaLibrary.cancel), 1), f("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: {
@@ -2891,31 +2908,31 @@ var Rr = {
 							color: "var(--tpl-danger)",
 							"background-color": "var(--tpl-danger-light)"
 						},
-						onClick: n[10] ||= (...e) => O(z).confirmDelete && O(z).confirmDelete(...e)
-					}, D(K.value ? a.value.mediaLibrary.deleteAnyway : a.value.mediaLibrary.confirmDelete), 1)])
+						onClick: n[10] ||= (...e) => O(E).confirmDelete && O(E).confirmDelete(...e)
+					}, D(O(k).hasUsedFiles.value ? a.value.mediaLibrary.deleteAnyway : a.value.mediaLibrary.confirmDelete), 1)])
 				])])) : u("", !0)]),
 				_: 1
 			}),
-			f("div", bi, [f("div", xi, [O(z).previewItem.value ? (S(), l(bn, {
+			f("div", Si, [f("div", Ci, [O(E).previewItem.value ? (S(), l(xn, {
 				key: 0,
-				"selected-conversion": R.value,
-				"onUpdate:selectedConversion": n[12] ||= (e) => R.value = e,
-				item: O(z).previewItem.value,
-				folders: O(z).folders.value
+				"selected-conversion": O(k).selectedConversion.value,
+				"onUpdate:selectedConversion": n[12] ||= (e) => O(k).selectedConversion.value = e,
+				item: O(E).previewItem.value,
+				folders: O(E).folders.value
 			}, null, 8, [
 				"selected-conversion",
 				"item",
 				"folders"
-			])) : u("", !0)]), f("div", Si, [O(z).selectedItems.value.size > 0 ? (S(), d("div", Ci, [O(z).previewItem.value ? (S(), d("button", {
+			])) : u("", !0)]), f("div", wi, [O(E).selectedItems.value.size > 0 ? (S(), d("div", Ti, [O(E).previewItem.value ? (S(), d("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: O(de) ? "var(--tpl-success)" : "var(--tpl-border)",
-					color: O(de) ? "var(--tpl-success)" : "var(--tpl-text)",
+					borderColor: O(k).copied.value ? "var(--tpl-success)" : "var(--tpl-border)",
+					color: O(k).copied.value ? "var(--tpl-success)" : "var(--tpl-text)",
 					backgroundColor: "var(--tpl-bg)"
 				}),
-				onClick: n[13] ||= (e) => O(Q)(H.value)
-			}, [O(de) ? (S(), l(O(F), {
+				onClick: n[13] ||= (e) => O(k).copy(O(k).selectedUrl.value)
+			}, [O(k).copied.value ? (S(), l(O(F), {
 				key: 1,
 				size: 12,
 				"stroke-width": 2
@@ -2923,21 +2940,25 @@ var Rr = {
 				key: 0,
 				size: 12,
 				"stroke-width": 2
-			})), p(" " + D(O(de) ? a.value.mediaLibrary.copied : a.value.mediaLibrary.copyUrl), 1)], 4)) : u("", !0), c.value ? (S(), d("div", wi, [f("button", {
+			})), p(" " + D(O(k).copied.value ? a.value.mediaLibrary.copied : a.value.mediaLibrary.copyUrl), 1)], 4)) : u("", !0), c.value ? (S(), d("div", Ei, [f("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) => ge.value = !ge.value
-			}, D(a.value.mediaLibrary.moveSelected), 1), ge.value ? (S(), l(ln, {
+				onClick: n[14] ||= (e) => O(k).showMovePicker.value = !O(k).showMovePicker.value
+			}, D(a.value.mediaLibrary.moveSelected), 1), O(k).showMovePicker.value ? (S(), l(un, {
 				key: 0,
-				folders: O(z).folders.value,
-				"current-folder-id": O(z).currentFolderId.value,
-				onSelect: _e,
-				onClose: n[15] ||= (e) => ge.value = !1
-			}, null, 8, ["folders", "current-folder-id"])) : u("", !0)])) : u("", !0)])) : u("", !0), f("div", Ti, [O(z).selectedItems.value.size > 0 ? (S(), d("button", {
+				folders: O(E).folders.value,
+				"current-folder-id": O(E).currentFolderId.value,
+				onSelect: O(k).handleMoveToFolder,
+				onClose: n[15] ||= (e) => O(k).showMovePicker.value = !1
+			}, null, 8, [
+				"folders",
+				"current-folder-id",
+				"onSelect"
+			])) : u("", !0)])) : u("", !0)])) : u("", !0), f("div", Di, [O(E).selectedItems.value.size > 0 ? (S(), d("button", {
 				key: 0,
 				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: {
@@ -2945,7 +2966,7 @@ var Rr = {
 					color: "var(--tpl-danger)",
 					"background-color": "var(--tpl-danger-light)"
 				},
-				onClick: ve
+				onClick: n[16] ||= (...e) => O(k).handleDeleteClick && O(k).handleDeleteClick(...e)
 			}, D(a.value.mediaLibrary.deleteSelected), 1)) : u("", !0), e.onSelect ? (S(), d("button", {
 				key: 1,
 				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",
@@ -2953,71 +2974,71 @@ var Rr = {
 					"background-color": "var(--tpl-primary)",
 					color: "var(--tpl-bg)"
 				},
-				disabled: !O(z).previewItem.value,
-				onClick: ne
-			}, D(a.value.mediaLibrary.selectFile), 9, Ei)) : u("", !0)])])])
+				disabled: !O(E).previewItem.value,
+				onClick: A
+			}, D(a.value.mediaLibrary.selectFile), 9, Oi)) : u("", !0)])])])
 		]));
 	}
-}), Oi = (e, t, n) => {
+}), Ai = (e, t, n) => {
 	let r = t.lastIndexOf("?"), i = e[r === -1 || r < t.lastIndexOf("/") ? t : t.slice(0, r)];
 	return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((e, r) => {
 		(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(r.bind(null, /* @__PURE__ */ Error("Unknown variable dynamic import: " + t + (t.split("/").length === n ? "" : ". Note that variables only represent file names one level deep."))));
 	});
-}, ki = ["en", "de"];
-function Ai(e) {
+}, ji = ["en", "de"];
+function Mi(e) {
 	return e.split("-")[0].toLowerCase();
 }
-async function ji(e) {
-	let t = Ai(e), n = ki.includes(t) ? t : "en";
-	return (await Oi(/* @__PURE__ */ Object.assign({
+async function Ni(e) {
+	let t = Mi(e), n = ji.includes(t) ? t : "en";
+	return (await Ai(/* @__PURE__ */ Object.assign({
 		"./locales/de.ts": () => import("./de-BULkjF_s.js"),
 		"./locales/en.ts": () => import("./en-ivlOqPuR.js")
 	}), `./locales/${n}.ts`, 3)).default;
 }
 //#endregion
 //#region src/standalone/visual.ts
-var Mi = null, Ni = w(null);
-async function Pi(e) {
+var $ = null, Pi = w(null);
+async function Fi(e) {
 	let n = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!n) throw Error(`Container element not found: ${e.container}`);
-	Mi && Fi();
+	$ && Ii();
 	let i = r(e.auth, e.onError);
 	await i.initialize();
-	let a = await new t(i).fetchConfig(), o = await ji(e.locale ?? "en");
-	return Ii(n, e.theme), new Promise((t, r) => {
+	let a = await new t(i).fetchConfig(), o = await Ni(e.locale ?? "en");
+	return Li(n, e.theme), new Promise((t, r) => {
 		try {
-			Mi = c({ setup() {
+			$ = c({ setup() {
 				let r = () => {
 					t({
-						setTheme: (e) => Ii(n, e),
-						unmount: Fi
+						setTheme: (e) => Li(n, e),
+						unmount: Ii
 					});
 				};
-				return () => g(Di, {
+				return () => g(ki, {
 					authManager: i,
 					projectId: i.projectId,
 					planConfig: a,
 					translations: o,
 					onSelect: e.onSelect,
 					onError: e.onError,
-					ref: Ni,
+					ref: Pi,
 					onReady: r
 				});
-			} }), Mi.mount(n);
+			} }), $.mount(n);
 		} catch (e) {
 			r(e);
 		}
 	});
 }
-function Fi() {
-	Mi && (Mi.unmount(), Mi = null, Ni.value = null);
+function Ii() {
+	$ && ($.unmount(), $ = null, Pi.value = null);
 }
-function Ii(e, t) {
+function Li(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: Pi,
-	unmount: Fi
+	init: Fi,
+	unmount: Ii
 });
 //#endregion
-export { le as MediaApiClient, Ir as MediaLibraryModal, Pi as init, Fi as unmount, Q as useI18n, he as useMediaCategories, ue as useMediaLibrary, Lr as useMediaPicker };
+export { ue as MediaApiClient, Rr as MediaLibraryModal, Fi as init, Ii as unmount, Z as useI18n, Q as useMediaCategories, de as useMediaLibrary, zr as useMediaPicker };