@templatical/media-library 0.0.1

package/dist/templatical-media-library.js

@@ -0,0 +1,3424 @@
+import { buildUrl as ae, API_ROUTES as oe, createSdkAuthManager as gt, ApiClient as ht } from "@templatical/core/cloud";
+import { ref as h, inject as _e, isRef as xt, defineComponent as le, computed as I, openBlock as s, createElementBlock as p, createElementVNode as a, toDisplayString as d, unref as e, Fragment as J, renderList as se, createVNode as C, createCommentVNode as F, watch as ke, createBlock as Y, Teleport as Ee, Transition as ge, withCtx as he, withModifiers as te, normalizeClass as ce, normalizeStyle as X, createTextVNode as Q, withDirectives as Le, vModelText as Se, resolveComponent as wt, withKeys as Me, provide as Pe, onMounted as kt, createApp as _t, h as $t } from "vue";
+import { ChevronRight as Je, Folder as Ae, Plus as Xe, Pencil as qe, Trash2 as Ft, File as Ne, Star as Ct, RefreshCw as Ge, Check as Re, Loader2 as Ve, Upload as Mt, Search as Ze, X as It, PanelLeft as Qe, Grid2x2 as Ye, List as et, Link as tt, Copy as lt } from "lucide-vue-next";
+import { Cropper as Lt } from "vue-advanced-cropper";
+import { useIntersectionObserver as St, onClickOutside as Ut, useDropZone as zt, useFileDialog as jt, useDebounceFn as rt, useClipboard as at, useEventListener as Tt } from "@vueuse/core";
+class Pt {
+  constructor(o) {
+    this.authManager = o;
+  }
+  get projectId() {
+    return this.authManager.projectId;
+  }
+  get tenantSlug() {
+    return this.authManager.tenantSlug;
+  }
+  get baseParams() {
+    return { project: this.projectId, tenant: this.tenantSlug };
+  }
+  async request(o, l = {}) {
+    const n = await this.authManager.authenticatedFetch(o, {
+      ...l,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        ...l.headers
+      }
+    });
+    if (!n.ok) {
+      const u = await n.json().catch(() => ({
+        message: `HTTP error ${n.status}`
+      }));
+      throw new Error(u.message);
+    }
+    return n.status === 204 ? void 0 : (await n.json()).data;
+  }
+  async browseMedia(o) {
+    const l = new URLSearchParams();
+    o.folder_id && l.set("folder_id", o.folder_id), o.search && l.set("search", o.search), o.category && l.set("category", o.category), o.sort && l.set("sort", o.sort), o.cursor && l.set("cursor", o.cursor);
+    const n = l.toString(), r = `${ae(oe["media.browse"], this.baseParams)}${n ? `?${n}` : ""}`, u = await this.authManager.authenticatedFetch(r, {
+      headers: { Accept: "application/json" }
+    });
+    if (!u.ok) {
+      const m = await u.json().catch(() => ({
+        message: `HTTP error ${u.status}`
+      }));
+      throw new Error(m.message);
+    }
+    return u.json();
+  }
+  async uploadMedia(o, l) {
+    const n = new FormData();
+    n.append("file", o), l && n.append("folder_id", l);
+    const r = ae(oe["media.upload"], this.baseParams), u = await this.authManager.authenticatedFetch(r, {
+      method: "POST",
+      headers: { Accept: "application/json" },
+      body: n
+    });
+    if (!u.ok) {
+      const y = await u.json().catch(() => ({
+        message: `HTTP error ${u.status}`
+      }));
+      throw new Error(y.message);
+    }
+    return (await u.json()).data;
+  }
+  async updateMedia(o, l, n) {
+    return this.request(
+      ae(oe["media.update"], {
+        ...this.baseParams,
+        media: o
+      }),
+      {
+        method: "PUT",
+        body: JSON.stringify({
+          filename: l,
+          alt_text: n
+        })
+      }
+    );
+  }
+  async deleteMedia(o) {
+    return this.request(
+      ae(oe["media.delete"], this.baseParams),
+      {
+        method: "POST",
+        body: JSON.stringify({ ids: o })
+      }
+    );
+  }
+  async moveMedia(o, l) {
+    return this.request(
+      ae(oe["media.move"], this.baseParams),
+      {
+        method: "POST",
+        body: JSON.stringify({ ids: o, folder_id: l })
+      }
+    );
+  }
+  async getMediaFolders() {
+    return this.request(
+      ae(oe["folders.index"], this.baseParams)
+    );
+  }
+  async createMediaFolder(o, l) {
+    return this.request(
+      ae(oe["folders.store"], this.baseParams),
+      {
+        method: "POST",
+        body: JSON.stringify({
+          name: o,
+          parent_id: l ?? null
+        })
+      }
+    );
+  }
+  async renameMediaFolder(o, l) {
+    return this.request(
+      ae(oe["folders.update"], {
+        ...this.baseParams,
+        mediaFolder: o
+      }),
+      {
+        method: "PUT",
+        body: JSON.stringify({ name: l })
+      }
+    );
+  }
+  async deleteMediaFolder(o) {
+    return this.request(
+      ae(oe["folders.destroy"], {
+        ...this.baseParams,
+        mediaFolder: o
+      }),
+      {
+        method: "DELETE"
+      }
+    );
+  }
+  async checkMediaUsage(o) {
+    const l = await this.authManager.authenticatedFetch(
+      ae(oe["media.checkUsage"], this.baseParams),
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json"
+        },
+        body: JSON.stringify({ ids: o })
+      }
+    );
+    if (!l.ok) {
+      const n = await l.json().catch(() => ({
+        message: `HTTP error ${l.status}`
+      }));
+      throw new Error(n.message);
+    }
+    return l.json();
+  }
+  async getFrequentlyUsed() {
+    return this.request(
+      ae(oe["media.frequentlyUsed"], this.baseParams)
+    );
+  }
+  async importFromUrl(o, l) {
+    return this.request(
+      ae(oe["media.importFromUrl"], this.baseParams),
+      {
+        method: "POST",
+        body: JSON.stringify({
+          url: o,
+          folder_id: l ?? null
+        })
+      }
+    );
+  }
+  async replaceMedia(o, l) {
+    const n = new FormData();
+    n.append("file", l);
+    const r = ae(oe["media.replace"], {
+      ...this.baseParams,
+      media: o
+    }), u = await this.authManager.authenticatedFetch(r, {
+      method: "POST",
+      headers: { Accept: "application/json" },
+      body: n
+    });
+    if (!u.ok) {
+      const y = await u.json().catch(() => ({
+        message: `HTTP error ${u.status}`
+      }));
+      throw new Error(y.message);
+    }
+    return (await u.json()).data;
+  }
+}
+function ot(t) {
+  if (!t.projectId)
+    throw new Error("projectId is required for useMediaLibrary");
+  const o = new Pt(t.authManager), l = h([]), n = h([]), r = h(null), u = h("files"), m = h(""), y = h(null), f = h("newest"), w = h(!1), g = h(!1), M = h(!1), $ = h(null), j = h(null), i = h(/* @__PURE__ */ new Set()), b = h(null), T = h([]), c = h({}), E = h(!1), q = h([]), N = h(!1), v = h(null), ee = h(!1), W = h(null), B = h(!1), G = h(null), Z = h(null);
+  async function H() {
+    var k;
+    w.value = !0;
+    try {
+      const x = await o.browseMedia({
+        folder_id: m.value ? void 0 : r.value,
+        search: m.value || void 0,
+        category: y.value || void 0,
+        sort: f.value !== "newest" ? f.value : void 0
+      });
+      l.value = x.data, $.value = x.meta.next_cursor, M.value = !!x.meta.next_cursor;
+    } catch (x) {
+      (k = t.onError) == null || k.call(t, x);
+    } finally {
+      w.value = !1;
+    }
+  }
+  async function pe() {
+    var k;
+    if (!(!M.value || !$.value || w.value)) {
+      w.value = !0;
+      try {
+        const x = await o.browseMedia({
+          folder_id: m.value ? void 0 : r.value,
+          search: m.value || void 0,
+          category: y.value || void 0,
+          sort: f.value !== "newest" ? f.value : void 0,
+          cursor: $.value
+        });
+        l.value = [...l.value, ...x.data], $.value = x.meta.next_cursor, M.value = !!x.meta.next_cursor;
+      } catch (x) {
+        (k = t.onError) == null || k.call(t, x);
+      } finally {
+        w.value = !1;
+      }
+    }
+  }
+  async function A(k) {
+    m.value = k, await H();
+  }
+  async function O(k) {
+    y.value = k, await H();
+  }
+  async function ne(k) {
+    f.value = k, await H();
+  }
+  async function de(k) {
+    u.value = "files", r.value = k, m.value = "", i.value = /* @__PURE__ */ new Set(), b.value = null, await H();
+  }
+  async function ve() {
+    u.value = "frequently-used", r.value = null, m.value = "", i.value = /* @__PURE__ */ new Set(), b.value = null, await $e();
+  }
+  async function re(k) {
+    var x;
+    g.value = !0;
+    try {
+      const z = await o.uploadMedia(k, r.value);
+      return l.value = [z, ...l.value], z;
+    } catch (z) {
+      return (x = t.onError) == null || x.call(t, z), null;
+    } finally {
+      g.value = !1;
+    }
+  }
+  async function K(k) {
+    var x;
+    g.value = !0, j.value = { current: 0, total: k.length };
+    try {
+      for (let z = 0; z < k.length; z++) {
+        j.value = { current: z + 1, total: k.length };
+        try {
+          const R = await o.uploadMedia(k[z], r.value);
+          l.value = [R, ...l.value];
+        } catch (R) {
+          (x = t.onError) == null || x.call(t, R);
+        }
+      }
+    } finally {
+      g.value = !1, j.value = null;
+    }
+  }
+  async function ue(k) {
+    var x;
+    if (i.value.size !== 0)
+      try {
+        const z = await o.moveMedia(
+          [...i.value],
+          k
+        );
+        if (r.value === null) {
+          const R = new Map(z.map((V) => [V.id, V]));
+          l.value = l.value.map((V) => R.get(V.id) ?? V);
+        } else
+          l.value = l.value.filter(
+            (R) => !i.value.has(R.id)
+          );
+        i.value = /* @__PURE__ */ new Set(), b.value = null;
+      } catch (z) {
+        (x = t.onError) == null || x.call(t, z);
+      }
+  }
+  async function ye(k, x, z) {
+    var R, V;
+    try {
+      const fe = await o.updateMedia(k, x, z);
+      l.value = l.value.map(
+        (Ke) => Ke.id === k ? fe : Ke
+      ), ((R = b.value) == null ? void 0 : R.id) === k && (b.value = fe);
+    } catch (fe) {
+      (V = t.onError) == null || V.call(t, fe);
+    }
+  }
+  async function ze() {
+    var k;
+    if (i.value.size !== 0)
+      try {
+        await o.deleteMedia([...i.value]), l.value = l.value.filter(
+          (x) => !i.value.has(x.id)
+        ), T.value = T.value.filter(
+          (x) => !i.value.has(x.id)
+        ), i.value = /* @__PURE__ */ new Set(), b.value = null;
+      } catch (x) {
+        (k = t.onError) == null || k.call(t, x);
+      }
+  }
+  async function $e() {
+    var k;
+    try {
+      T.value = await o.getFrequentlyUsed();
+    } catch (x) {
+      (k = t.onError) == null || k.call(t, x);
+    }
+  }
+  async function xe() {
+    var k;
+    if (i.value.size === 0)
+      return !1;
+    q.value = [...i.value];
+    try {
+      const x = await o.checkMediaUsage(q.value);
+      c.value = x.data;
+      const z = Object.values(x.data).some(
+        (R) => R.template_count > 0
+      );
+      return E.value = !0, z;
+    } catch (x) {
+      return (k = t.onError) == null || k.call(t, x), !1;
+    }
+  }
+  async function be() {
+    var k;
+    if (E.value = !1, q.value.length !== 0)
+      try {
+        await o.deleteMedia(q.value), l.value = l.value.filter(
+          (x) => !q.value.includes(x.id)
+        ), T.value = T.value.filter(
+          (x) => !q.value.includes(x.id)
+        ), i.value = /* @__PURE__ */ new Set(), b.value = null, q.value = [], c.value = {};
+      } catch (x) {
+        (k = t.onError) == null || k.call(t, x);
+      }
+  }
+  function L() {
+    E.value = !1, q.value = [], c.value = {};
+  }
+  async function S(k) {
+    var x;
+    N.value = !0, v.value = null;
+    try {
+      const z = await o.importFromUrl(k, r.value);
+      return l.value = [z, ...l.value], z;
+    } catch (z) {
+      return v.value = z instanceof Error ? z.message : "Import failed", (x = t.onError) == null || x.call(t, z), null;
+    } finally {
+      N.value = !1;
+    }
+  }
+  function P(k) {
+    const x = new Set(i.value);
+    x.has(k) ? x.delete(k) : x.add(k), i.value = x;
+  }
+  function me() {
+    i.value = /* @__PURE__ */ new Set(), b.value = null;
+  }
+  function Fe(k) {
+    b.value = k, i.value = /* @__PURE__ */ new Set([k.id]);
+  }
+  async function we() {
+    var k;
+    try {
+      n.value = await o.getMediaFolders();
+    } catch (x) {
+      (k = t.onError) == null || k.call(t, x);
+    }
+  }
+  async function _(k, x) {
+    var z;
+    try {
+      const R = await o.createMediaFolder(k, x);
+      return await we(), R;
+    } catch (R) {
+      return (z = t.onError) == null || z.call(t, R), null;
+    }
+  }
+  function U(k, x) {
+    for (const z of k) {
+      if (z.id === x) return z;
+      if (z.children) {
+        const R = U(z.children, x);
+        if (R) return R;
+      }
+    }
+    return null;
+  }
+  async function Ce(k, x) {
+    var z;
+    try {
+      await o.renameMediaFolder(k, x), await we();
+    } catch (R) {
+      (z = t.onError) == null || z.call(t, R);
+    }
+  }
+  async function D(k) {
+    var x;
+    try {
+      const z = U(n.value, k), R = (z == null ? void 0 : z.parent_id) ?? null;
+      await o.deleteMediaFolder(k), r.value === k && (r.value = R), await we(), await H();
+    } catch (z) {
+      (x = t.onError) == null || x.call(t, z);
+    }
+  }
+  async function je(k) {
+    var x;
+    G.value = k, W.value = null;
+    try {
+      const z = await o.checkMediaUsage([k.id]);
+      Z.value = z.data[k.id] ?? null, B.value = !0;
+    } catch (z) {
+      (x = t.onError) == null || x.call(t, z);
+    }
+  }
+  function Te() {
+    B.value = !1, G.value = null, Z.value = null, W.value = null;
+  }
+  async function De(k) {
+    var x, z;
+    if (!G.value)
+      return null;
+    ee.value = !0, W.value = null;
+    try {
+      const R = await o.replaceMedia(G.value.id, k);
+      return l.value = l.value.map(
+        (V) => V.id === R.id ? R : V
+      ), T.value = T.value.map(
+        (V) => V.id === R.id ? R : V
+      ), ((x = b.value) == null ? void 0 : x.id) === R.id && (b.value = R), B.value = !1, G.value = null, Z.value = null, R;
+    } catch (R) {
+      return W.value = R instanceof Error ? R.message : "Replace failed", (z = t.onError) == null || z.call(t, R), null;
+    } finally {
+      ee.value = !1;
+    }
+  }
+  async function bt(k, x) {
+    var z, R;
+    try {
+      const V = await o.replaceMedia(k, x);
+      return l.value = l.value.map(
+        (fe) => fe.id === V.id ? V : fe
+      ), T.value = T.value.map(
+        (fe) => fe.id === V.id ? V : fe
+      ), ((z = b.value) == null ? void 0 : z.id) === V.id && (b.value = V), V;
+    } catch (V) {
+      return (R = t.onError) == null || R.call(t, V), null;
+    }
+  }
+  return {
+    items: l,
+    folders: n,
+    currentFolderId: r,
+    viewMode: u,
+    searchQuery: m,
+    categoryFilter: y,
+    sortOption: f,
+    isLoading: w,
+    isUploading: g,
+    uploadProgress: j,
+    hasMore: M,
+    selectedItems: i,
+    previewItem: b,
+    frequentlyUsedItems: T,
+    deleteUsageInfo: c,
+    showDeleteWarning: E,
+    loadItems: H,
+    loadMore: pe,
+    search: A,
+    filterByCategory: O,
+    sortBy: ne,
+    navigateToFolder: de,
+    showFrequentlyUsed: ve,
+    uploadFile: re,
+    uploadFiles: K,
+    moveSelected: ue,
+    updateFile: ye,
+    deleteSelected: ze,
+    isImportingFromUrl: N,
+    importFromUrlError: v,
+    importFromUrl: S,
+    toggleSelection: P,
+    clearSelection: me,
+    selectItem: Fe,
+    loadFolders: we,
+    createFolder: _,
+    renameFolder: Ce,
+    deleteFolder: D,
+    findFolderInTree: U,
+    loadFrequentlyUsed: $e,
+    checkUsageBeforeDelete: xe,
+    confirmDelete: be,
+    cancelDelete: L,
+    isReplacing: ee,
+    replaceError: W,
+    showReplaceWarning: B,
+    pendingReplaceItem: G,
+    replaceUsageInfo: Z,
+    checkUsageBeforeReplace: je,
+    cancelReplace: Te,
+    replaceFile: De,
+    replaceMediaDirectly: bt
+  };
+}
+function ie(t) {
+  const o = t ?? _e("translations"), l = xt(o) ? o.value : o;
+  function n(r, u) {
+    return r.replace(/\{(\w+)\}/g, (m, y) => y in u ? String(u[y]) : `{${y}}`);
+  }
+  return {
+    t: l,
+    format: n
+  };
+}
+const Rt = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, Et = ["onClick"], Dt = {
+  key: 1,
+  style: { color: "var(--tpl-text)" }
+}, st = /* @__PURE__ */ le({
+  __name: "MediaBreadcrumb",
+  props: {
+    folders: {},
+    currentFolderId: {}
+  },
+  emits: ["navigate"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = I(() => {
+      if (!l.currentFolderId) return [];
+      const y = [];
+      return m(l.folders, l.currentFolderId, y), y;
+    });
+    function m(y, f, w) {
+      for (const g of y) {
+        if (g.id === f)
+          return w.push(g), !0;
+        if (g.children && m(g.children, f, w))
+          return w.unshift(g), !0;
+      }
+      return !1;
+    }
+    return (y, f) => u.value.length > 0 ? (s(), p("div", Rt, [
+      a("button", {
+        class: "tpl:transition-colors tpl:duration-150 tpl:hover:underline",
+        style: { color: "var(--tpl-primary)" },
+        onClick: f[0] || (f[0] = (w) => n("navigate", null))
+      }, d(e(r).mediaLibrary.allFiles), 1),
+      (s(!0), p(J, null, se(u.value, (w, g) => (s(), p(J, {
+        key: w.id
+      }, [
+        C(e(Je), {
+          size: 12,
+          "stroke-width": 2
+        }),
+        g < u.value.length - 1 ? (s(), p("button", {
+          key: 0,
+          class: "tpl:transition-colors tpl:duration-150 tpl:hover:underline",
+          style: { color: "var(--tpl-primary)" },
+          onClick: (M) => n("navigate", w.id)
+        }, d(w.name), 9, Et)) : (s(), p("span", Dt, d(w.name), 1))
+      ], 64))), 128))
+    ])) : F("", !0);
+  }
+});
+function Ue() {
+  const t = _e("planConfig"), o = I(() => {
+    var M;
+    return ((M = t.config.value) == null ? void 0 : M.media) ?? null;
+  }), l = I(
+    () => {
+      var M;
+      return ((M = o.value) == null ? void 0 : M.use_media_library) ?? !0;
+    }
+  ), n = I(
+    () => {
+      var M;
+      return ((M = o.value) == null ? void 0 : M.categories) ?? null;
+    }
+  ), r = I(() => n.value ? Object.values(n.value).flatMap((M) => M.mime_types) : []), u = I(
+    () => r.value.join(",")
+  ), m = I(() => {
+    var M;
+    return ((M = o.value) == null ? void 0 : M.max_file_size) ?? 0;
+  });
+  function y(M, $) {
+    return n.value ? !$ || $.length === 0 ? r.value.includes(M) : $.some(
+      (j) => {
+        var i;
+        return (i = n.value[j]) == null ? void 0 : i.mime_types.includes(M);
+      }
+    ) : !1;
+  }
+  function f(M) {
+    var $;
+    return n.value ? (($ = n.value.images) == null ? void 0 : $.mime_types.includes(M)) ?? !1 : !1;
+  }
+  function w(M) {
+    if (!n.value)
+      return null;
+    for (const [$, j] of Object.entries(n.value))
+      if (j.mime_types.includes(M))
+        return $;
+    return null;
+  }
+  const g = I(() => n.value ? Object.keys(n.value) : []);
+  return {
+    isMediaLibraryEnabled: l,
+    allAcceptedMimeTypes: r,
+    allAcceptedInputString: u,
+    maxFileSize: m,
+    availableCategories: g,
+    isAcceptedMimeType: y,
+    isImageMimeType: f,
+    getCategoryForMimeType: w
+  };
+}
+const qt = {
+  free: void 0,
+  square: 1,
+  landscape43: 4 / 3,
+  landscape169: 16 / 9,
+  original: void 0
+};
+function Bt(t) {
+  return t === "image/png" ? { mimeType: "image/png", quality: 1 } : t === "image/gif" ? { mimeType: "image/png", quality: 1 } : t === "image/webp" ? { mimeType: "image/webp", quality: 0.92 } : { mimeType: "image/jpeg", quality: 0.92 };
+}
+function Ot(t, o, l) {
+  const n = t.width, r = t.height;
+  if (!o && !l)
+    return t;
+  let u = n, m = r;
+  if (o && n > o && (u = o, m = Math.round(r * (o / n))), l && m > l && (m = l, u = Math.round(
+    u * (l / (r * (o ? o / n : 1)))
+  )), u === n && m === r)
+    return t;
+  const y = document.createElement("canvas");
+  y.width = u, y.height = m;
+  const f = y.getContext("2d");
+  return f && (f.imageSmoothingEnabled = !0, f.imageSmoothingQuality = "high", f.drawImage(t, 0, 0, u, m)), y;
+}
+function At(t, o, l) {
+  return new Promise((n, r) => {
+    t.toBlob(
+      (u) => {
+        if (!u) {
+          r(new Error("Failed to create blob from canvas"));
+          return;
+        }
+        const m = l.mimeType.split("/")[1], f = `${o.replace(/\.[^.]+$/, "")}.${m}`, w = new File([u], f, {
+          type: l.mimeType
+        });
+        n(w);
+      },
+      l.mimeType,
+      l.quality
+    );
+  });
+}
+function Nt(t, o, l, n) {
+  let r = t, u = o;
+  if (l && r > l) {
+    const m = l / r;
+    r = l, u = Math.round(u * m);
+  }
+  if (n && u > n) {
+    const m = n / u;
+    u = n, r = Math.round(r * m);
+  }
+  return { width: r, height: u };
+}
+const Vt = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Wt = {
+  class: "tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, Kt = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, Gt = {
+  key: 0,
+  class: "tpl:mb-4"
+}, Ht = {
+  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)" }
+}, Jt = { class: "tpl:space-y-3" }, Xt = {
+  class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, Zt = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, Qt = ["onClick"], Yt = { class: "tpl:flex tpl:gap-3" }, el = { class: "tpl:flex-1" }, tl = {
+  class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, ll = {
+  class: "tpl:font-normal",
+  style: { color: "var(--tpl-text-dim)" }
+}, rl = { class: "tpl:relative" }, al = ["value", "placeholder"], ol = {
+  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)" }
+}, sl = { class: "tpl:flex-1" }, nl = {
+  class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, il = {
+  class: "tpl:font-normal",
+  style: { color: "var(--tpl-text-dim)" }
+}, pl = { class: "tpl:relative" }, dl = ["value", "placeholder"], ul = {
+  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)" }
+}, cl = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, vl = {
+  class: "tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, ml = { class: "tpl:mb-3" }, fl = {
+  class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, yl = ["autofocus"], bl = {
+  key: 1,
+  class: "tpl:mb-4"
+}, gl = {
+  class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, hl = ["placeholder"], xl = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, wl = ["disabled"], kl = /* @__PURE__ */ le({
+  __name: "MediaEditModal",
+  props: {
+    visible: { type: Boolean },
+    item: {}
+  },
+  emits: ["save", "close"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = r.mediaLibrary, { isImageMimeType: m } = Ue(), y = h(""), f = h(""), w = h(null), g = h("free"), M = h(void 0), $ = h(void 0), j = h(""), i = h(""), b = h(void 0), T = h(null), c = h(!1), E = h(!1), q = h(!1), N = I(() => l.item ? [
+      "image/jpeg",
+      "image/png",
+      "image/webp",
+      "image/gif"
+    ].includes(l.item.mime_type) : !1), v = I(() => g.value === "original" ? b.value : qt[g.value]), ee = I(() => T.value ? Nt(
+      T.value.width,
+      T.value.height,
+      M.value,
+      $.value
+    ) : null);
+    ke(
+      () => l.visible,
+      (A) => {
+        A && l.item && (y.value = l.item.filename, f.value = l.item.alt_text || "", g.value = "free", M.value = void 0, $.value = void 0, j.value = "", i.value = "", b.value = void 0, T.value = null, c.value = !1, q.value = !1, l.item.width && l.item.height && (b.value = l.item.width / l.item.height));
+      }
+    );
+    function W(A) {
+      A.coordinates && (T.value = {
+        width: Math.round(A.coordinates.width),
+        height: Math.round(A.coordinates.height)
+      }, q.value = !0);
+    }
+    function B() {
+      var A, O;
+      c.value = !0, !b.value && ((A = l.item) != null && A.width) && ((O = l.item) != null && O.height) && (b.value = l.item.width / l.item.height);
+    }
+    function G(A) {
+      const O = A.target.value;
+      j.value = O, M.value = O && parseInt(O, 10) || void 0;
+    }
+    function Z(A) {
+      const O = A.target.value;
+      i.value = O, $.value = O && parseInt(O, 10) || void 0;
+    }
+    async function H() {
+      const A = y.value.trim();
+      if (!A || !l.item || E.value)
+        return;
+      const O = m(l.item.mime_type);
+      let ne;
+      if (N.value && w.value && q.value) {
+        E.value = !0;
+        try {
+          const { canvas: de } = w.value.getResult();
+          if (de) {
+            const ve = Ot(
+              de,
+              M.value,
+              $.value
+            ), re = Bt(l.item.mime_type);
+            ne = { file: await At(
+              ve,
+              l.item.filename,
+              re
+            ) };
+          }
+        } catch {
+          E.value = !1;
+          return;
+        }
+        E.value = !1;
+      }
+      n(
+        "save",
+        l.item.id,
+        A,
+        O ? f.value : void 0,
+        ne
+      ), n("close");
+    }
+    function pe(A) {
+      A.key === "Enter" && !E.value && (A.preventDefault(), H()), A.key === "Escape" && n("close");
+    }
+    return (A, O) => (s(), Y(Ee, { to: "body" }, [
+      C(ge, {
+        "enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: he(() => {
+          var ne, de, ve, re;
+          return [
+            t.visible && t.item ? (s(), p("div", {
+              key: 0,
+              class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center",
+              style: { "background-color": "var(--tpl-overlay)" },
+              onClick: O[3] || (O[3] = te((K) => n("close"), ["self"])),
+              onKeydown: pe
+            }, [
+              a("div", {
+                class: ce(["tpl:mx-4 tpl:flex tpl:max-h-[90vh] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", N.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
+                style: { "background-color": "var(--tpl-bg-elevated)" }
+              }, [
+                a("div", Vt, [
+                  a("h3", Wt, d(e(r).mediaLibrary.editFile), 1)
+                ]),
+                a("div", Kt, [
+                  N.value ? (s(), p("div", Gt, [
+                    a("div", Ht, [
+                      C(e(Lt), {
+                        ref_key: "cropperRef",
+                        ref: w,
+                        src: t.item.url,
+                        "stencil-props": {
+                          aspectRatio: v.value
+                        },
+                        class: "tpl:h-full tpl:w-full",
+                        "background-class": "tpl-cropper-background",
+                        onChange: W,
+                        onReady: B
+                      }, null, 8, ["src", "stencil-props"])
+                    ]),
+                    a("div", Jt, [
+                      a("div", null, [
+                        a("label", Xt, d(e(r).mediaLibrary.cropAspectRatio), 1),
+                        a("div", Zt, [
+                          (s(), p(J, null, se([
+                            "free",
+                            "square",
+                            "landscape43",
+                            "landscape169",
+                            "original"
+                          ], (K) => a("button", {
+                            key: K,
+                            type: "button",
+                            class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+                            style: X({
+                              borderColor: g.value === K ? "var(--tpl-primary)" : "var(--tpl-border)",
+                              backgroundColor: g.value === K ? "var(--tpl-primary-light)" : "var(--tpl-bg)",
+                              color: g.value === K ? "var(--tpl-primary)" : "var(--tpl-text)"
+                            }),
+                            onClick: (ue) => g.value = K
+                          }, d(e(u)[`crop${K.charAt(0).toUpperCase()}${K.slice(1)}`]), 13, Qt)), 64))
+                        ])
+                      ]),
+                      a("div", Yt, [
+                        a("div", el, [
+                          a("label", tl, [
+                            Q(d(e(r).mediaLibrary.cropMaxWidth) + " ", 1),
+                            a("span", ll, d(e(r).mediaLibrary.cropOptional), 1)
+                          ]),
+                          a("div", rl, [
+                            a("input", {
+                              value: j.value,
+                              type: "number",
+                              min: "1",
+                              class: "tpl:w-full tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-8 tpl:pl-3 tpl:text-xs tpl:outline-none",
+                              style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                              placeholder: ((de = (ne = T.value) == null ? void 0 : ne.width) == null ? void 0 : de.toString()) || "",
+                              onInput: G
+                            }, null, 40, al),
+                            a("span", ol, d(e(r).mediaLibrary.cropPixels), 1)
+                          ])
+                        ]),
+                        a("div", sl, [
+                          a("label", nl, [
+                            Q(d(e(r).mediaLibrary.cropMaxHeight) + " ", 1),
+                            a("span", il, d(e(r).mediaLibrary.cropOptional), 1)
+                          ]),
+                          a("div", pl, [
+                            a("input", {
+                              value: i.value,
+                              type: "number",
+                              min: "1",
+                              class: "tpl:w-full tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-8 tpl:pl-3 tpl:text-xs tpl:outline-none",
+                              style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                              placeholder: ((re = (ve = T.value) == null ? void 0 : ve.height) == null ? void 0 : re.toString()) || "",
+                              onInput: Z
+                            }, null, 40, dl),
+                            a("span", ul, d(e(r).mediaLibrary.cropPixels), 1)
+                          ])
+                        ])
+                      ]),
+                      ee.value ? (s(), p("div", cl, [
+                        a("span", null, d(e(r).mediaLibrary.cropOutputSize) + ": ", 1),
+                        a("span", vl, d(ee.value.width) + " x " + d(ee.value.height) + " " + d(e(r).mediaLibrary.cropPixels), 1)
+                      ])) : F("", !0)
+                    ])
+                  ])) : F("", !0),
+                  a("div", ml, [
+                    a("label", fl, d(e(r).mediaLibrary.fileName), 1),
+                    Le(a("input", {
+                      "onUpdate:modelValue": O[0] || (O[0] = (K) => y.value = K),
+                      type: "text",
+                      class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
+                      style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                      autofocus: !N.value
+                    }, null, 8, yl), [
+                      [Se, y.value]
+                    ])
+                  ]),
+                  e(m)(t.item.mime_type) ? (s(), p("div", bl, [
+                    a("label", gl, d(e(r).mediaLibrary.altText), 1),
+                    Le(a("input", {
+                      "onUpdate:modelValue": O[1] || (O[1] = (K) => f.value = K),
+                      type: "text",
+                      class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
+                      style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                      placeholder: e(r).mediaLibrary.altTextPlaceholder
+                    }, null, 8, hl), [
+                      [Se, f.value]
+                    ])
+                  ])) : F("", !0)
+                ]),
+                a("div", xl, [
+                  a("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: O[2] || (O[2] = (K) => n("close"))
+                  }, d(e(r).mediaLibrary.cancel), 1),
+                  a("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(
+                  135deg,
+                  var(--tpl-primary),
+                  var(--tpl-primary-hover)
+                )` },
+                    disabled: E.value,
+                    onClick: H
+                  }, d(E.value ? e(r).mediaLibrary.saving : e(r).mediaLibrary.saveChanges), 9, wl)
+                ])
+              ], 2)
+            ], 32)) : F("", !0)
+          ];
+        }),
+        _: 1
+      })
+    ]));
+  }
+}), We = (t, o) => {
+  const l = t.__vccOpts || t;
+  for (const [n, r] of o)
+    l[n] = r;
+  return l;
+}, nt = /* @__PURE__ */ We(kl, [["__scopeId", "data-v-4d303952"]]), _l = {
+  key: 1,
+  class: "tpl:size-4 tpl:shrink-0"
+}, $l = {
+  key: 0,
+  class: "tpl:truncate"
+}, Fl = {
+  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"
+}, Cl = ["title"], Ml = ["title"], Il = { key: 0 }, Ll = ["placeholder"], Sl = 5, Ul = /* @__PURE__ */ le({
+  __name: "MediaFolderTreeNode",
+  props: {
+    folder: {},
+    currentFolderId: {},
+    depth: {}
+  },
+  emits: ["navigate", "createFolder", "renameFolder", "deleteFolder"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = h(!1), m = h(!1), y = h(""), f = h(!1), w = h(""), g = I(() => {
+      var W;
+      return (((W = l.folder.children) == null ? void 0 : W.length) ?? 0) > 0;
+    }), M = I(() => l.depth < Sl - 1), $ = I(() => l.currentFolderId === l.folder.id), j = I(() => !l.currentFolderId || !l.folder.children ? !1 : b(l.folder.children, l.currentFolderId)), i = I(
+      () => u.value || j.value
+    );
+    function b(W, B) {
+      for (const G of W)
+        if (G.id === B || G.children && b(G.children, B)) return !0;
+      return !1;
+    }
+    function T() {
+      u.value = !u.value;
+    }
+    function c() {
+      m.value = !0, y.value = l.folder.name;
+    }
+    function E() {
+      const W = y.value.trim();
+      W && W !== l.folder.name && n("renameFolder", l.folder.id, W), m.value = !1, y.value = "";
+    }
+    function q() {
+      m.value = !1, y.value = "";
+    }
+    function N() {
+      f.value = !0, w.value = "", u.value = !0;
+    }
+    function v() {
+      w.value.trim() && n("createFolder", w.value.trim(), l.folder.id), f.value = !1, w.value = "";
+    }
+    function ee() {
+      f.value = !1, w.value = "";
+    }
+    return (W, B) => {
+      const G = wt("MediaFolderTreeNode", !0);
+      return s(), p("div", null, [
+        a("div", {
+          class: "tpl:group tpl:flex tpl:w-full tpl:items-center tpl:gap-1 tpl:py-1.5 tpl:pr-2 tpl:text-left tpl:text-xs tpl:transition-all tpl:duration-150",
+          style: X({
+            paddingLeft: `${t.depth * 16 + 8}px`,
+            backgroundColor: $.value ? "var(--tpl-bg-active)" : "transparent",
+            color: $.value ? "var(--tpl-primary)" : "var(--tpl-text)"
+          })
+        }, [
+          g.value || f.value ? (s(), p("button", {
+            key: 0,
+            class: "tpl:flex tpl:size-4 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
+            onClick: te(T, ["stop"])
+          }, [
+            C(e(Je), {
+              class: ce(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-90": i.value }]),
+              size: 10,
+              "stroke-width": 2
+            }, null, 8, ["class"])
+          ])) : (s(), p("span", _l)),
+          a("button", {
+            class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-1.5",
+            onClick: B[0] || (B[0] = (Z) => n("navigate", t.folder.id))
+          }, [
+            C(e(Ae), {
+              class: "tpl:shrink-0",
+              size: 14,
+              "stroke-width": 1.5
+            }),
+            m.value ? F("", !0) : (s(), p("span", $l, d(t.folder.name), 1))
+          ]),
+          m.value ? Le((s(), p("input", {
+            key: 2,
+            "onUpdate:modelValue": B[1] || (B[1] = (Z) => y.value = Z),
+            type: "text",
+            class: "tpl:min-w-0 tpl:flex-1 tpl:rounded tpl:border tpl:px-1.5 tpl:py-0.5 tpl:text-xs tpl:outline-none",
+            style: { "border-color": "var(--tpl-primary)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+            autofocus: "",
+            onKeydown: [
+              Me(E, ["enter"]),
+              Me(q, ["escape"])
+            ],
+            onBlur: E,
+            onClick: B[2] || (B[2] = te(() => {
+            }, ["stop"]))
+          }, null, 544)), [
+            [Se, y.value]
+          ]) : F("", !0),
+          m.value ? F("", !0) : (s(), p("span", Fl, [
+            M.value ? (s(), p("button", {
+              key: 0,
+              class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
+              title: e(r).mediaLibrary.addSubfolder,
+              onClick: te(N, ["stop"])
+            }, [
+              C(e(Xe), {
+                size: 12,
+                "stroke-width": 2
+              })
+            ], 8, Cl)) : F("", !0),
+            a("button", {
+              class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
+              title: e(r).mediaLibrary.renameFolder,
+              onClick: te(c, ["stop"])
+            }, [
+              C(e(qe), {
+                size: 12,
+                "stroke-width": 2
+              })
+            ], 8, Ml),
+            a("button", {
+              class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
+              onClick: B[3] || (B[3] = te((Z) => n("deleteFolder", t.folder.id), ["stop"]))
+            }, [
+              C(e(Ft), {
+                size: 12,
+                "stroke-width": 2,
+                style: { color: "var(--tpl-danger)" }
+              })
+            ])
+          ]))
+        ], 4),
+        i.value ? (s(), p("div", Il, [
+          (s(!0), p(J, null, se(t.folder.children, (Z) => (s(), Y(G, {
+            key: Z.id,
+            folder: Z,
+            "current-folder-id": t.currentFolderId,
+            depth: t.depth + 1,
+            onNavigate: B[4] || (B[4] = (H) => n("navigate", H)),
+            onCreateFolder: B[5] || (B[5] = (H, pe) => n("createFolder", H, pe)),
+            onRenameFolder: B[6] || (B[6] = (H, pe) => n("renameFolder", H, pe)),
+            onDeleteFolder: B[7] || (B[7] = (H) => n("deleteFolder", H))
+          }, null, 8, ["folder", "current-folder-id", "depth"]))), 128)),
+          f.value ? (s(), p("div", {
+            key: 0,
+            style: X({ paddingLeft: `${(t.depth + 1) * 16 + 8}px` }),
+            class: "tpl:py-1.5 tpl:pr-2"
+          }, [
+            Le(a("input", {
+              "onUpdate:modelValue": B[8] || (B[8] = (Z) => w.value = Z),
+              type: "text",
+              class: "tpl:w-full tpl:rounded tpl:border tpl:px-2 tpl:py-1 tpl:text-xs tpl:outline-none",
+              style: { "border-color": "var(--tpl-primary)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+              placeholder: e(r).mediaLibrary.subfolderName,
+              autofocus: "",
+              onKeydown: [
+                Me(v, ["enter"]),
+                Me(ee, ["escape"])
+              ],
+              onBlur: v
+            }, null, 40, Ll), [
+              [Se, w.value]
+            ])
+          ], 4)) : F("", !0)
+        ])) : F("", !0)
+      ]);
+    };
+  }
+}), zl = { class: "tpl:flex tpl:h-full tpl:flex-col tpl:overflow-y-auto" }, jl = {
+  key: 0,
+  class: "tpl:px-3 tpl:py-2"
+}, Tl = ["placeholder"], it = /* @__PURE__ */ le({
+  __name: "MediaFolderTree",
+  props: {
+    folders: {},
+    currentFolderId: {},
+    viewMode: {},
+    hasFrequentlyUsed: { type: Boolean }
+  },
+  emits: ["navigate", "createFolder", "renameFolder", "deleteFolder", "showFrequentlyUsed"],
+  setup(t, { emit: o }) {
+    const l = o, { t: n } = ie(), r = h(!1), u = h("");
+    function m() {
+      r.value = !0, u.value = "";
+    }
+    function y() {
+      u.value.trim() && l("createFolder", u.value.trim()), r.value = !1, u.value = "";
+    }
+    function f() {
+      r.value = !1, u.value = "";
+    }
+    return (w, g) => (s(), p("div", zl, [
+      a("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: X({
+          backgroundColor: t.viewMode === "files" && t.currentFolderId === null ? "var(--tpl-bg-active)" : "transparent",
+          color: t.viewMode === "files" && t.currentFolderId === null ? "var(--tpl-primary)" : "var(--tpl-text)"
+        }),
+        onClick: g[0] || (g[0] = (M) => l("navigate", null))
+      }, [
+        C(e(Ne), {
+          size: 14,
+          "stroke-width": 1.5
+        }),
+        Q(" " + d(e(n).mediaLibrary.allFiles), 1)
+      ], 4),
+      (s(!0), p(J, null, se(t.folders, (M) => (s(), Y(Ul, {
+        key: M.id,
+        folder: M,
+        "current-folder-id": t.currentFolderId,
+        depth: 0,
+        onNavigate: g[1] || (g[1] = ($) => l("navigate", $)),
+        onCreateFolder: g[2] || (g[2] = ($, j) => l("createFolder", $, j)),
+        onRenameFolder: g[3] || (g[3] = ($, j) => l("renameFolder", $, j)),
+        onDeleteFolder: g[4] || (g[4] = ($) => l("deleteFolder", $))
+      }, null, 8, ["folder", "current-folder-id"]))), 128)),
+      r.value ? (s(), p("div", jl, [
+        Le(a("input", {
+          "onUpdate:modelValue": g[5] || (g[5] = (M) => u.value = M),
+          type: "text",
+          class: "tpl:w-full tpl:rounded tpl:border tpl:px-2 tpl:py-1 tpl:text-xs tpl:outline-none",
+          style: { "border-color": "var(--tpl-primary)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+          placeholder: e(n).mediaLibrary.folderName,
+          autofocus: "",
+          onKeydown: [
+            Me(y, ["enter"]),
+            Me(f, ["escape"])
+          ],
+          onBlur: y
+        }, null, 40, Tl), [
+          [Se, u.value]
+        ])
+      ])) : F("", !0),
+      r.value ? F("", !0) : (s(), p("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: m
+      }, [
+        C(e(Xe), {
+          size: 14,
+          "stroke-width": 1.5
+        }),
+        Q(" " + d(e(n).mediaLibrary.newFolder), 1)
+      ])),
+      g[7] || (g[7] = a("div", { class: "tpl:flex-1" }, null, -1)),
+      t.hasFrequentlyUsed ? (s(), p("button", {
+        key: 2,
+        class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-2 tpl:border-t tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+        style: X({
+          borderColor: "var(--tpl-border)",
+          backgroundColor: t.viewMode === "frequently-used" ? "var(--tpl-bg-active)" : "transparent",
+          color: t.viewMode === "frequently-used" ? "var(--tpl-primary)" : "var(--tpl-text)"
+        }),
+        onClick: g[6] || (g[6] = (M) => l("showFrequentlyUsed"))
+      }, [
+        C(e(Ct), {
+          size: 14,
+          "stroke-width": 1.5
+        }),
+        Q(" " + d(e(n).mediaLibrary.frequentlyUsed), 1)
+      ], 4)) : F("", !0)
+    ]));
+  }
+}), Pl = { class: "tpl:flex tpl:aspect-square tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2" }, Be = /* @__PURE__ */ le({
+  __name: "MediaFileIcon",
+  props: {
+    mimeType: {}
+  },
+  setup(t) {
+    const o = t, l = {
+      "application/pdf": {
+        label: "PDF",
+        color: "#dc2626",
+        bgColor: "#fef2f2",
+        icon: "document"
+      },
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
+        label: "DOC",
+        color: "#2563eb",
+        bgColor: "#eff6ff",
+        icon: "document"
+      },
+      "application/msword": {
+        label: "DOC",
+        color: "#2563eb",
+        bgColor: "#eff6ff",
+        icon: "document"
+      },
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": {
+        label: "XLS",
+        color: "#16a34a",
+        bgColor: "#f0fdf4",
+        icon: "document"
+      },
+      "application/vnd.ms-excel": {
+        label: "XLS",
+        color: "#16a34a",
+        bgColor: "#f0fdf4",
+        icon: "document"
+      },
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation": {
+        label: "PPT",
+        color: "#ea580c",
+        bgColor: "#fff7ed",
+        icon: "document"
+      },
+      "application/vnd.ms-powerpoint": {
+        label: "PPT",
+        color: "#ea580c",
+        bgColor: "#fff7ed",
+        icon: "document"
+      },
+      "text/csv": {
+        label: "CSV",
+        color: "#16a34a",
+        bgColor: "#f0fdf4",
+        icon: "document"
+      },
+      "text/plain": {
+        label: "TXT",
+        color: "#6b7280",
+        bgColor: "#f9fafb",
+        icon: "document"
+      },
+      "video/mp4": {
+        label: "MP4",
+        color: "#9333ea",
+        bgColor: "#faf5ff",
+        icon: "video"
+      },
+      "video/quicktime": {
+        label: "MOV",
+        color: "#9333ea",
+        bgColor: "#faf5ff",
+        icon: "video"
+      },
+      "video/webm": {
+        label: "WEBM",
+        color: "#9333ea",
+        bgColor: "#faf5ff",
+        icon: "video"
+      },
+      "audio/mpeg": {
+        label: "MP3",
+        color: "#0d9488",
+        bgColor: "#f0fdfa",
+        icon: "audio"
+      },
+      "audio/wav": {
+        label: "WAV",
+        color: "#0d9488",
+        bgColor: "#f0fdfa",
+        icon: "audio"
+      },
+      "audio/ogg": {
+        label: "OGG",
+        color: "#0d9488",
+        bgColor: "#f0fdfa",
+        icon: "audio"
+      }
+    }, n = {
+      label: "FILE",
+      color: "#6b7280",
+      bgColor: "#f9fafb",
+      icon: "document"
+    }, r = I(
+      () => l[o.mimeType] ?? n
+    );
+    return (u, m) => (s(), p("div", Pl, [
+      r.value.icon === "document" ? (s(), p("svg", {
+        key: 0,
+        width: "60",
+        height: "60",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        style: X({ color: r.value.color })
+      }, [...m[0] || (m[0] = [
+        a("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }, null, -1),
+        a("polyline", { points: "14 2 14 8 20 8" }, null, -1),
+        a("line", {
+          x1: "8",
+          y1: "13",
+          x2: "16",
+          y2: "13"
+        }, null, -1),
+        a("line", {
+          x1: "8",
+          y1: "17",
+          x2: "12",
+          y2: "17"
+        }, null, -1)
+      ])], 4)) : r.value.icon === "video" ? (s(), p("svg", {
+        key: 1,
+        width: "40",
+        height: "40",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        style: X({ color: r.value.color })
+      }, [...m[1] || (m[1] = [
+        a("rect", {
+          x: "2",
+          y: "4",
+          width: "20",
+          height: "16",
+          rx: "2"
+        }, null, -1),
+        a("polygon", {
+          points: "10,8 16,12 10,16",
+          fill: "currentColor",
+          stroke: "none"
+        }, null, -1)
+      ])], 4)) : (s(), p("svg", {
+        key: 2,
+        width: "40",
+        height: "40",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        style: X({ color: r.value.color })
+      }, [...m[2] || (m[2] = [
+        a("path", { d: "M9 18V5l12-2v13" }, null, -1),
+        a("circle", {
+          cx: "6",
+          cy: "18",
+          r: "3"
+        }, null, -1),
+        a("circle", {
+          cx: "18",
+          cy: "16",
+          r: "3"
+        }, null, -1)
+      ])], 4)),
+      a("span", {
+        class: "tpl:text-xs tpl:font-bold tpl:tracking-wider",
+        style: X({ color: r.value.color })
+      }, d(r.value.label), 5)
+    ]));
+  }
+}), Rl = { class: "tpl:p-4" }, El = {
+  key: 1,
+  class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-16"
+}, Dl = {
+  class: "tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, ql = {
+  key: 2,
+  class: "tpl:grid tpl:grid-cols-4 tpl:gap-3"
+}, Bl = ["onClick"], Ol = { class: "tpl:aspect-square" }, Al = ["src", "alt"], Nl = { class: "tpl:px-2 tpl:py-1.5" }, Vl = {
+  class: "tpl:truncate tpl:text-[10px] tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, Wl = {
+  class: "tpl:flex tpl:justify-between tpl:text-[9px]",
+  style: { color: "var(--tpl-text-muted)" }
+}, Kl = { key: 0 }, Gl = { 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" }, Hl = ["title", "onClick"], Jl = ["title", "onClick"], Xl = {
+  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)" }
+}, Zl = {
+  key: 3,
+  class: "tpl:flex tpl:flex-col tpl:gap-1"
+}, Ql = ["onClick"], Yl = {
+  class: "tpl:size-10 tpl:shrink-0 tpl:overflow-hidden tpl:rounded",
+  style: { "background-color": "var(--tpl-bg-hover)" }
+}, er = ["src", "alt"], tr = {
+  key: 1,
+  class: "tpl-list-icon tpl:size-full"
+}, lr = { class: "tpl:min-w-0 tpl:flex-1" }, rr = {
+  class: "tpl:truncate tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, ar = {
+  class: "tpl:text-[10px]",
+  style: { color: "var(--tpl-text-muted)" }
+}, or = { class: "tpl:flex tpl:gap-1 tpl:opacity-0 tpl:transition-opacity tpl:duration-150 tpl:group-hover:opacity-100" }, sr = ["title", "onClick"], nr = ["title", "onClick"], ir = {
+  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)" }
+}, pr = {
+  key: 4,
+  class: "tpl:flex tpl:justify-center tpl:py-4"
+}, dr = /* @__PURE__ */ le({
+  __name: "MediaGrid",
+  props: {
+    items: {},
+    selectedIds: {},
+    isLoading: { type: Boolean },
+    hasMore: { type: Boolean },
+    accept: {},
+    layout: {}
+  },
+  emits: ["select", "toggle", "loadMore", "edit", "replace"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { isAcceptedMimeType: r, isImageMimeType: u } = Ue();
+    function m($) {
+      return !l.accept || l.accept.length === 0 ? !0 : r($.mime_type, l.accept);
+    }
+    function y($) {
+      n("select", $);
+    }
+    const { t: f } = ie(), w = h(null);
+    St(
+      w,
+      ([{ isIntersecting: $ }]) => {
+        $ && l.hasMore && !l.isLoading && n("loadMore");
+      },
+      { threshold: 0.1 }
+    );
+    function g($) {
+      return $ < 1024 ? `${$} B` : $ < 1024 * 1024 ? `${($ / 1024).toFixed(1)} KB` : `${($ / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    function M($) {
+      return new Date($).toLocaleDateString(void 0, {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }
+    return ($, j) => (s(), p("div", Rl, [
+      t.isLoading && t.items.length === 0 ? (s(), p("div", {
+        key: 0,
+        class: ce(
+          t.layout === "list" ? "tpl:flex tpl:flex-col tpl:gap-1" : "tpl:grid tpl:grid-cols-4 tpl:gap-3"
+        )
+      }, [
+        (s(), p(J, null, se(8, (i) => a("div", {
+          key: i,
+          class: ce(["tpl-pulse tpl:rounded-lg", t.layout === "list" ? "tpl:h-12" : "tpl:aspect-square"]),
+          style: { "background-color": "var(--tpl-bg-hover)" }
+        }, null, 2)), 64))
+      ], 2)) : t.items.length === 0 ? (s(), p("div", El, [
+        C(e(Ne), {
+          class: "tpl:mb-3",
+          size: 40,
+          "stroke-width": 1,
+          style: { color: "var(--tpl-text-dim)" }
+        }),
+        a("p", Dl, d(e(f).mediaLibrary.noFiles), 1)
+      ])) : t.layout !== "list" ? (s(), p("div", ql, [
+        (s(!0), p(J, null, se(t.items, (i) => (s(), p("div", {
+          key: i.id,
+          class: ce(["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",
+            !m(i) && !t.selectedIds.has(i.id) ? "tpl:opacity-60" : "",
+            t.selectedIds.has(i.id) ? "tpl-media-item--selected" : ""
+          ]]),
+          style: X({
+            borderColor: t.selectedIds.has(i.id) ? "var(--tpl-primary)" : "transparent",
+            backgroundColor: !m(i) && !t.selectedIds.has(i.id) ? "var(--tpl-bg)" : "var(--tpl-bg-hover)"
+          }),
+          onClick: (b) => y(i)
+        }, [
+          a("div", Ol, [
+            e(u)(i.mime_type) ? (s(), p("img", {
+              key: 0,
+              src: i.small_url || i.url,
+              alt: i.filename,
+              class: "tpl:size-full tpl:object-cover",
+              loading: "lazy"
+            }, null, 8, Al)) : (s(), Y(Be, {
+              key: 1,
+              "mime-type": i.mime_type
+            }, null, 8, ["mime-type"]))
+          ]),
+          a("div", Nl, [
+            a("p", Vl, d(i.filename), 1),
+            a("p", Wl, [
+              a("span", null, d(g(i.size)), 1),
+              e(u)(i.mime_type) && i.width && i.height ? (s(), p("span", Kl, d(i.width) + "×" + d(i.height), 1)) : F("", !0)
+            ])
+          ]),
+          a("div", Gl, [
+            a("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: e(f).mediaLibrary.editFile,
+              onClick: te((b) => n("edit", i), ["stop"])
+            }, [
+              C(e(qe), {
+                size: 11,
+                "stroke-width": 2
+              })
+            ], 8, Hl),
+            a("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: e(f).mediaLibrary.replaceFile,
+              onClick: te((b) => n("replace", i), ["stop"])
+            }, [
+              C(e(Ge), {
+                size: 11,
+                "stroke-width": 2
+              })
+            ], 8, Jl)
+          ]),
+          t.selectedIds.has(i.id) ? (s(), p("div", Xl, [
+            C(e(Re), {
+              size: 12,
+              "stroke-width": 3
+            })
+          ])) : F("", !0)
+        ], 14, Bl))), 128))
+      ])) : (s(), p("div", Zl, [
+        (s(!0), p(J, null, se(t.items, (i) => (s(), p("div", {
+          key: i.id,
+          class: ce(["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", [
+            !m(i) && !t.selectedIds.has(i.id) ? "tpl:opacity-60" : ""
+          ]]),
+          style: X({
+            backgroundColor: t.selectedIds.has(i.id) ? "var(--tpl-bg-hover)" : "transparent"
+          }),
+          onClick: (b) => y(i)
+        }, [
+          a("div", Yl, [
+            e(u)(i.mime_type) ? (s(), p("img", {
+              key: 0,
+              src: i.small_url || i.url,
+              alt: i.filename,
+              class: "tpl:size-full tpl:object-cover",
+              loading: "lazy"
+            }, null, 8, er)) : (s(), p("div", tr, [
+              C(Be, {
+                "mime-type": i.mime_type
+              }, null, 8, ["mime-type"])
+            ]))
+          ]),
+          a("div", lr, [
+            a("p", rr, d(i.filename), 1),
+            a("p", ar, [
+              Q(d(g(i.size)) + " · " + d(M(i.created_at)) + " ", 1),
+              e(u)(i.mime_type) && i.width && i.height ? (s(), p(J, { key: 0 }, [
+                Q(" · " + d(i.width) + "×" + d(i.height), 1)
+              ], 64)) : F("", !0)
+            ])
+          ]),
+          a("div", or, [
+            a("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: e(f).mediaLibrary.editFile,
+              onClick: te((b) => n("edit", i), ["stop"])
+            }, [
+              C(e(qe), {
+                size: 12,
+                "stroke-width": 2
+              })
+            ], 8, sr),
+            a("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: e(f).mediaLibrary.replaceFile,
+              onClick: te((b) => n("replace", i), ["stop"])
+            }, [
+              C(e(Ge), {
+                size: 12,
+                "stroke-width": 2
+              })
+            ], 8, nr)
+          ]),
+          t.selectedIds.has(i.id) ? (s(), p("div", ir, [
+            C(e(Re), {
+              size: 12,
+              "stroke-width": 3
+            })
+          ])) : F("", !0)
+        ], 14, Ql))), 128))
+      ])),
+      a("div", {
+        ref_key: "sentinelRef",
+        ref: w,
+        class: "tpl:h-4"
+      }, null, 512),
+      t.isLoading && t.items.length > 0 ? (s(), p("div", pr, [
+        C(e(Ve), {
+          class: "tpl-spinner",
+          size: 20,
+          "stroke-width": 2,
+          style: { color: "var(--tpl-primary)" }
+        })
+      ])) : F("", !0)
+    ]));
+  }
+}), pt = /* @__PURE__ */ We(dr, [["__scopeId", "data-v-1c1258ec"]]), ur = {
+  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)" }
+}, cr = {
+  class: "tpl:mb-4 tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, vr = { class: "tpl:mb-3" }, mr = ["placeholder", "disabled"], fr = {
+  key: 0,
+  class: "tpl:mb-3 tpl:text-xs",
+  style: { color: "var(--tpl-danger)" }
+}, yr = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, br = ["disabled"], gr = ["disabled"], hr = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-1.5"
+}, xr = { key: 1 }, dt = /* @__PURE__ */ le({
+  __name: "MediaImportUrlModal",
+  props: {
+    visible: { type: Boolean },
+    isImporting: { type: Boolean },
+    error: {}
+  },
+  emits: ["import", "close"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = h("");
+    ke(
+      () => l.visible,
+      (w) => {
+        w && (u.value = "");
+      }
+    );
+    function m() {
+      const w = u.value.trim();
+      !w || l.isImporting || n("import", w);
+    }
+    function y() {
+      l.isImporting || n("close");
+    }
+    function f(w) {
+      w.key === "Enter" && (w.preventDefault(), m()), w.key === "Escape" && y();
+    }
+    return (w, g) => (s(), Y(Ee, { to: "body" }, [
+      C(ge, {
+        "enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: he(() => [
+          t.visible ? (s(), p("div", {
+            key: 0,
+            class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center",
+            style: { "background-color": "var(--tpl-overlay)" },
+            onClick: te(y, ["self"]),
+            onKeydown: f
+          }, [
+            a("div", ur, [
+              a("h3", cr, d(e(r).mediaLibrary.importFromUrl), 1),
+              a("div", vr, [
+                Le(a("input", {
+                  "onUpdate:modelValue": g[0] || (g[0] = (M) => u.value = M),
+                  type: "url",
+                  class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
+                  style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                  placeholder: e(r).mediaLibrary.importUrlPlaceholder,
+                  disabled: t.isImporting,
+                  autofocus: ""
+                }, null, 8, mr), [
+                  [Se, u.value]
+                ])
+              ]),
+              t.error ? (s(), p("p", fr, d(t.error), 1)) : F("", !0),
+              a("div", yr, [
+                a("button", {
+                  class: ce(["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": t.isImporting
+                  }]),
+                  style: { "border-color": "var(--tpl-border)", color: "var(--tpl-text)", "background-color": "var(--tpl-bg)" },
+                  disabled: t.isImporting,
+                  onClick: y
+                }, d(e(r).mediaLibrary.cancel), 11, br),
+                a("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(
+                  135deg,
+                  var(--tpl-primary),
+                  var(--tpl-primary-hover)
+                )` },
+                  disabled: !u.value.trim() || t.isImporting,
+                  onClick: m
+                }, [
+                  t.isImporting ? (s(), p("span", hr, [
+                    C(e(Ve), {
+                      class: "tpl:animate-spin",
+                      size: 12,
+                      "stroke-width": 2
+                    }),
+                    Q(" " + d(e(r).mediaLibrary.importing), 1)
+                  ])) : (s(), p("span", xr, d(e(r).mediaLibrary.import), 1))
+                ], 8, gr)
+              ])
+            ])
+          ], 32)) : F("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), wr = { class: "tpl:max-h-56 tpl:overflow-y-auto tpl:py-1" }, kr = ["disabled", "onClick"], _r = { class: "tpl:truncate" }, $r = {
+  key: 0,
+  class: "tpl:shrink-0",
+  style: { color: "var(--tpl-text-dim)" }
+}, ut = /* @__PURE__ */ le({
+  __name: "MediaMovePicker",
+  props: {
+    folders: {},
+    currentFolderId: {}
+  },
+  emits: ["select", "close"],
+  setup(t, { emit: o }) {
+    const l = o, { t: n } = ie(), r = h(null);
+    function u(m, y = 0) {
+      var w;
+      const f = [];
+      for (const g of m)
+        f.push({ id: g.id, name: g.name, depth: y }), (w = g.children) != null && w.length && f.push(...u(g.children, y + 1));
+      return f;
+    }
+    return Ut(r, () => {
+      l("close");
+    }), (m, y) => (s(), p("div", {
+      ref_key: "pickerRef",
+      ref: r,
+      class: "tpl:absolute tpl:bottom-full tpl:left-0 tpl:z-10 tpl:mb-2 tpl:w-56 tpl:overflow-hidden tpl:rounded-lg tpl:border tpl:shadow-lg",
+      style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg-elevated)" }
+    }, [
+      a("div", wr, [
+        t.currentFolderId !== null ? (s(), p("button", {
+          key: 0,
+          class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-1.5 tpl:px-3 tpl:py-1.5 tpl:text-left tpl:text-xs tpl:transition-colors tpl:duration-100",
+          style: { color: "var(--tpl-text)" },
+          onClick: y[0] || (y[0] = (f) => l("select", null))
+        }, [
+          C(e(Ne), {
+            class: "tpl:shrink-0",
+            size: 14,
+            "stroke-width": 1.5
+          }),
+          Q(" " + d(e(n).mediaLibrary.moveToRoot), 1)
+        ])) : F("", !0),
+        (s(!0), p(J, null, se(u(t.folders), (f) => (s(), p("button", {
+          key: f.id,
+          class: "tpl:flex tpl:w-full tpl:items-center tpl:gap-1.5 tpl:py-1.5 tpl:pr-3 tpl:text-left tpl:text-xs tpl:transition-colors tpl:duration-100",
+          style: X({
+            paddingLeft: `${f.depth * 16 + 12}px`,
+            color: f.id === t.currentFolderId ? "var(--tpl-text-dim)" : "var(--tpl-text)",
+            opacity: f.id === t.currentFolderId ? 0.5 : 1
+          }),
+          disabled: f.id === t.currentFolderId,
+          onClick: (w) => l("select", f.id)
+        }, [
+          C(e(Ae), {
+            class: "tpl:shrink-0",
+            size: 14,
+            "stroke-width": 1.5
+          }),
+          a("span", _r, d(f.name), 1),
+          f.id === t.currentFolderId ? (s(), p("span", $r, d(e(n).mediaLibrary.currentFolder), 1)) : F("", !0)
+        ], 12, kr))), 128))
+      ])
+    ], 512));
+  }
+}), Fr = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Cr = ["src", "alt"], Mr = {
+  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)" }
+}, Ir = { class: "tpl:min-w-0 tpl:flex-1" }, Lr = {
+  class: "tpl:truncate tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, Sr = {
+  class: "tpl:mt-0.5 tpl:text-[10px]",
+  style: { color: "var(--tpl-text-muted)" }
+}, Ur = {
+  key: 2,
+  class: "tpl:shrink-0"
+}, zr = {
+  class: "tpl:block tpl:text-[10px]",
+  style: { color: "var(--tpl-text-muted)" }
+}, jr = ["value"], Tr = ["value"], Pr = /* @__PURE__ */ le({
+  __name: "MediaPreviewPanel",
+  props: {
+    item: {},
+    folders: {},
+    selectedConversion: {}
+  },
+  emits: ["update:selectedConversion"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), { isImageMimeType: u } = Ue(), m = I(() => {
+      if (!$.value || !l.item.conversions_generated)
+        return [];
+      const b = [];
+      return l.item.small_url && b.push({
+        value: "small",
+        label: r.mediaLibrary.conversionSmall,
+        url: l.item.small_url
+      }), l.item.medium_url && b.push({
+        value: "medium",
+        label: r.mediaLibrary.conversionMedium,
+        url: l.item.medium_url
+      }), l.item.large_url && b.push({
+        value: "large",
+        label: r.mediaLibrary.conversionLarge,
+        url: l.item.large_url
+      }), b.push({
+        value: "original",
+        label: r.mediaLibrary.conversionOriginal,
+        url: l.item.url
+      }), b;
+    }), y = I(
+      () => $.value && m.value.length > 1
+    ), f = I(() => {
+      if (!$.value) return null;
+      switch (l.selectedConversion) {
+        case "small":
+          return l.item.small_url || l.item.url;
+        case "medium":
+          return l.item.medium_url || l.item.url;
+        case "large":
+          return l.item.large_url || l.item.url;
+        default:
+          return l.item.url;
+      }
+    });
+    function w(b) {
+      const T = b.target;
+      n("update:selectedConversion", T.value);
+    }
+    function g(b, T, c = []) {
+      for (const E of b) {
+        const q = [...c, E.name];
+        if (E.id === T)
+          return q;
+        if (E.children) {
+          const N = g(E.children, T, q);
+          if (N) return N;
+        }
+      }
+      return null;
+    }
+    const M = I(() => {
+      if (!l.item.folder_id || !l.folders)
+        return null;
+      const b = g(l.folders, l.item.folder_id);
+      return b ? b.join("/") : null;
+    }), $ = I(() => u(l.item.mime_type));
+    function j(b) {
+      return b < 1024 ? `${b} B` : b < 1024 * 1024 ? `${(b / 1024).toFixed(1)} KB` : `${(b / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    function i(b) {
+      return new Date(b).toLocaleDateString(void 0, {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      });
+    }
+    return (b, T) => (s(), p("div", Fr, [
+      $.value ? (s(), p("img", {
+        key: 0,
+        src: f.value ?? void 0,
+        alt: t.item.alt_text || t.item.filename,
+        class: "tpl:size-10 tpl:shrink-0 tpl:rounded tpl:object-cover",
+        style: { border: "1px solid var(--tpl-border)" }
+      }, null, 8, Cr)) : (s(), p("div", Mr, [
+        C(Be, {
+          "mime-type": t.item.mime_type,
+          class: "tpl-preview-icon"
+        }, null, 8, ["mime-type"])
+      ])),
+      a("div", Ir, [
+        a("p", Lr, d(t.item.filename), 1),
+        a("p", Sr, [
+          Q(d(j(t.item.size)) + " · " + d(i(t.item.created_at)) + " ", 1),
+          $.value && t.item.width && t.item.height ? (s(), p(J, { key: 0 }, [
+            Q(" · " + d(t.item.width) + "×" + d(t.item.height) + "px ", 1)
+          ], 64)) : F("", !0),
+          M.value ? (s(), p(J, { key: 1 }, [
+            T[0] || (T[0] = Q(" · ", -1)),
+            C(e(Ae), {
+              class: "tpl:mb-px tpl:inline",
+              size: 9,
+              "stroke-width": 2
+            }),
+            Q(" " + d(M.value), 1)
+          ], 64)) : F("", !0)
+        ]),
+        $.value ? (s(), p("p", {
+          key: 0,
+          class: ce(["tpl:mt-0.5 tpl:truncate tpl:text-[10px] tpl:italic", { "tpl:invisible": !t.item.alt_text }]),
+          style: { color: "var(--tpl-text-dim)" }
+        }, d(t.item.alt_text || " "), 3)) : F("", !0)
+      ]),
+      y.value ? (s(), p("div", Ur, [
+        a("label", zr, d(e(r).mediaLibrary.conversionLabel), 1),
+        a("select", {
+          class: "tpl:mt-0.5 tpl:rounded-md tpl:border tpl:py-1 tpl:pr-6 tpl:pl-2 tpl:text-xs tpl:outline-none",
+          style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+          value: t.selectedConversion,
+          onChange: w
+        }, [
+          (s(!0), p(J, null, se(m.value, (c) => (s(), p("option", {
+            key: c.value,
+            value: c.value
+          }, d(c.label), 9, Tr))), 128))
+        ], 40, jr)
+      ])) : F("", !0)
+    ]));
+  }
+}), ct = /* @__PURE__ */ We(Pr, [["__scopeId", "data-v-3c9c60c7"]]), Rr = {
+  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)" }
+}, Er = {
+  class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, Dr = {
+  class: "tpl:mb-2 tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, qr = {
+  key: 0,
+  class: "tpl:mb-3 tpl:text-xs",
+  style: { color: "var(--tpl-warning)" }
+}, Br = {
+  class: "tpl:mb-3 tpl:rounded tpl:border tpl:p-2",
+  style: { "border-color": "var(--tpl-border)" }
+}, Or = {
+  class: "tpl:truncate tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, Ar = { class: "tpl:mb-4" }, Nr = {
+  class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text-muted)" }
+}, Vr = ["accept"], Wr = {
+  key: 1,
+  class: "tpl:mb-3 tpl:text-xs",
+  style: { color: "var(--tpl-danger)" }
+}, Kr = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Gr = ["disabled"], Hr = ["disabled"], vt = /* @__PURE__ */ le({
+  __name: "MediaReplaceModal",
+  props: {
+    visible: { type: Boolean },
+    item: {},
+    usageInfo: {},
+    isReplacing: { type: Boolean },
+    error: {}
+  },
+  emits: ["replace", "close"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = h(null), m = h(null), y = I(() => {
+      if (!l.item)
+        return "";
+      const j = l.item.filename.split(".");
+      return j.length > 1 ? j[j.length - 1].toLowerCase() : "";
+    }), f = I(() => y.value ? `.${y.value}` : "*"), w = I(() => {
+      var j;
+      return (((j = l.usageInfo) == null ? void 0 : j.template_count) ?? 0) > 0;
+    });
+    ke(
+      () => l.visible,
+      (j) => {
+        j || (m.value = null, u.value && (u.value.value = ""));
+      }
+    );
+    function g(j) {
+      const i = j.target;
+      i.files && i.files.length > 0 && (m.value = i.files[0]);
+    }
+    function M() {
+      m.value && n("replace", m.value);
+    }
+    function $(j) {
+      j.key === "Escape" && n("close");
+    }
+    return (j, i) => (s(), Y(Ee, { to: "body" }, [
+      C(ge, {
+        "enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: he(() => [
+          t.visible && t.item ? (s(), p("div", {
+            key: 0,
+            class: "tpl tpl:fixed tpl:inset-0 tpl:z-[10000] tpl:flex tpl:items-center tpl:justify-center",
+            style: { "background-color": "var(--tpl-overlay)" },
+            onClick: i[1] || (i[1] = te((b) => n("close"), ["self"])),
+            onKeydown: $
+          }, [
+            a("div", Rr, [
+              a("h3", Er, d(e(r).mediaLibrary.replaceWarningTitle), 1),
+              a("p", Dr, d(e(r).mediaLibrary.replaceWarningMessage.replace(
+                "{extension}",
+                `.${y.value}`
+              )), 1),
+              w.value ? (s(), p("p", qr, d(e(r).mediaLibrary.replaceWarningUsageNote.replace(
+                "{count}",
+                t.usageInfo.template_count.toString()
+              )), 1)) : F("", !0),
+              a("div", Br, [
+                a("p", Or, d(t.item.filename), 1)
+              ]),
+              a("div", Ar, [
+                a("label", Nr, d(e(r).mediaLibrary.replaceSelectFile), 1),
+                a("input", {
+                  ref_key: "fileInputRef",
+                  ref: u,
+                  type: "file",
+                  accept: f.value,
+                  class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs",
+                  style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                  onChange: g
+                }, null, 40, Vr)
+              ]),
+              t.error ? (s(), p("p", Wr, d(t.error), 1)) : F("", !0),
+              a("div", Kr, [
+                a("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)" },
+                  disabled: t.isReplacing,
+                  onClick: i[0] || (i[0] = (b) => n("close"))
+                }, d(e(r).mediaLibrary.cancel), 9, Gr),
+                a("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(
+                  135deg,
+                  var(--tpl-primary),
+                  var(--tpl-primary-hover)
+                )` },
+                  disabled: !m.value || t.isReplacing,
+                  onClick: M
+                }, d(t.isReplacing ? e(r).mediaLibrary.replacing : e(r).mediaLibrary.replace), 9, Hr)
+              ])
+            ])
+          ], 32)) : F("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), Jr = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-2"
+}, Xr = {
+  class: "tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, Zr = {
+  class: "tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, Qr = {
+  class: "tpl:mt-1 tpl:text-[10px]",
+  style: { color: "var(--tpl-text-dim)" }
+}, mt = /* @__PURE__ */ le({
+  __name: "MediaUploadZone",
+  props: {
+    isUploading: { type: Boolean },
+    uploadProgress: {}
+  },
+  emits: ["upload"],
+  setup(t, { emit: o }) {
+    const l = o, { t: n, format: r } = ie(), { allAcceptedMimeTypes: u, allAcceptedInputString: m, maxFileSize: y } = Ue(), f = h();
+    function w(i) {
+      const b = [];
+      for (const T of Array.from(i))
+        u.value.includes(T.type) && T.size <= y.value && b.push(T);
+      return b;
+    }
+    function g(i) {
+      const b = w(i);
+      b.length && l("upload", b);
+    }
+    const { isOverDropZone: M } = zt(f, {
+      onDrop: (i) => {
+        i != null && i.length && g(i);
+      }
+    }), { open: $, onChange: j } = jt({
+      accept: m.value,
+      multiple: !0
+    });
+    return j((i) => {
+      i != null && i.length && g(i);
+    }), (i, b) => (s(), p("div", {
+      ref_key: "dropZoneRef",
+      ref: f,
+      class: ce(["tpl-upload-zone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:rounded-lg tpl:border-2 tpl:border-dashed tpl:p-5 tpl:text-center tpl:transition-all tpl:duration-150", e(M) ? "tpl-upload-zone-active" : ""]),
+      style: { "border-color": "var(--tpl-border-light)", "background-color": "var(--tpl-bg)" },
+      onClick: b[0] || (b[0] = (T) => e($)())
+    }, [
+      t.isUploading ? (s(), p("div", Jr, [
+        C(e(Ve), {
+          class: "tpl-spinner",
+          size: 20,
+          "stroke-width": 2,
+          style: { color: "var(--tpl-primary)" }
+        }),
+        a("span", Xr, d(t.uploadProgress && t.uploadProgress.total > 1 ? e(r)(e(n).mediaLibrary.uploadingProgress, {
+          current: t.uploadProgress.current,
+          total: t.uploadProgress.total
+        }) : e(n).mediaLibrary.uploading), 1)
+      ])) : (s(), p(J, { key: 1 }, [
+        C(e(Mt), {
+          class: "tpl:mb-2",
+          size: 24,
+          "stroke-width": 1.5,
+          style: { color: "var(--tpl-text-dim)" }
+        }),
+        a("p", Zr, d(e(n).mediaLibrary.dropOrClick), 1),
+        a("p", Qr, d(e(n).mediaLibrary.acceptedFormats), 1)
+      ], 64))
+    ], 2));
+  }
+}), Yr = ["width", "height", "viewBox"], ea = ["cx", "cy", "r", "stroke-width"], ta = ["cx", "cy", "r", "stroke-width", "stroke", "stroke-dasharray", "stroke-dashoffset"], la = {
+  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)" }
+}, ft = /* @__PURE__ */ le({
+  __name: "StorageProgressRing",
+  props: {
+    usedBytes: {},
+    limitBytes: {},
+    size: {}
+  },
+  setup(t) {
+    const o = t, { t: l, format: n } = ie(), r = h(!1), u = I(() => o.size ?? 24), m = I(() => Math.max(2, u.value / 8)), y = I(() => (u.value - m.value) / 2), f = I(() => 2 * Math.PI * y.value), w = I(() => o.limitBytes <= 0 ? 0 : Math.min(100, o.usedBytes / o.limitBytes * 100)), g = I(() => f.value - w.value / 100 * f.value), M = I(() => w.value >= 95 ? "var(--tpl-danger)" : w.value >= 75 ? "var(--tpl-warning, #f59e0b)" : "var(--tpl-primary)");
+    function $(E) {
+      if (E === 0) return "0 B";
+      const q = 1024, N = ["B", "KB", "MB", "GB"], v = Math.floor(Math.log(E) / Math.log(q)), ee = E / Math.pow(q, v), W = v >= 2 ? 1 : 0;
+      return `${ee.toFixed(W)} ${N[v]}`;
+    }
+    const j = I(() => $(o.usedBytes)), i = I(() => $(o.limitBytes)), b = I(
+      () => Math.max(0, o.limitBytes - o.usedBytes)
+    ), T = I(() => $(b.value)), c = I(
+      () => n(l.mediaLibrary.storageTooltip, {
+        used: j.value,
+        total: i.value,
+        remaining: T.value
+      })
+    );
+    return (E, q) => (s(), p("div", {
+      class: "tpl:relative tpl:inline-flex tpl:cursor-help tpl:items-center tpl:justify-center",
+      onMouseenter: q[0] || (q[0] = (N) => r.value = !0),
+      onMouseleave: q[1] || (q[1] = (N) => r.value = !1)
+    }, [
+      (s(), p("svg", {
+        width: u.value,
+        height: u.value,
+        class: "tpl:-rotate-90",
+        viewBox: `0 0 ${u.value} ${u.value}`
+      }, [
+        a("circle", {
+          cx: u.value / 2,
+          cy: u.value / 2,
+          r: y.value,
+          fill: "none",
+          "stroke-width": m.value,
+          style: { stroke: "var(--tpl-border)" }
+        }, null, 8, ea),
+        a("circle", {
+          cx: u.value / 2,
+          cy: u.value / 2,
+          r: y.value,
+          fill: "none",
+          "stroke-width": m.value,
+          stroke: M.value,
+          "stroke-linecap": "round",
+          "stroke-dasharray": f.value,
+          "stroke-dashoffset": g.value,
+          class: "tpl:transition-all tpl:duration-300 tpl:ease-out"
+        }, null, 8, ta)
+      ], 8, Yr)),
+      C(ge, {
+        "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",
+        "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100 tpl:translate-y-0",
+        "leave-to-class": "tpl:opacity-0 tpl:translate-y-1"
+      }, {
+        default: he(() => [
+          r.value ? (s(), p("div", la, [
+            Q(d(c.value) + " ", 1),
+            q[2] || (q[2] = a("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))
+          ])) : F("", !0)
+        ]),
+        _: 1
+      })
+    ], 32));
+  }
+}), ra = {
+  class: "tpl-media-modal tpl-scale-in tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
+  style: { width: "900px", height: "650px", "max-width": "95vw", "max-height": "90vh", "background-color": "var(--tpl-bg-elevated)", border: "1px solid var(--tpl-border)", "box-shadow": "var(--tpl-shadow-xl)" }
+}, aa = {
+  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)" }
+}, oa = {
+  class: "tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, sa = { class: "tpl:flex tpl:items-center tpl:gap-3" }, na = { class: "tpl:relative" }, ia = ["value", "placeholder"], pa = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, da = {
+  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)" }
+}, ua = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, ca = {
+  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)" }
+}, va = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ma = ["title"], fa = {
+  key: 1,
+  class: "tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, ya = {
+  class: "tpl:flex tpl:rounded-md tpl:p-0.5",
+  style: { border: "1px solid var(--tpl-border)", "background-color": "var(--tpl-bg)" }
+}, ba = ["title"], ga = ["title"], ha = { class: "tpl:flex tpl:items-center tpl:gap-2" }, xa = ["value"], wa = { value: "" }, ka = ["value"], _a = ["value"], $a = { value: "newest" }, Fa = { value: "oldest" }, Ca = { value: "name_asc" }, Ma = { value: "name_desc" }, Ia = { value: "size_asc" }, La = { value: "size_desc" }, Sa = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, Ua = {
+  key: 0,
+  class: "tpl:px-4 tpl:pt-3"
+}, za = {
+  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)" }
+}, ja = {
+  class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, Ta = {
+  key: 0,
+  class: "tpl:mb-4 tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, Pa = {
+  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)" }
+}, Ra = { class: "tpl:font-medium" }, Ea = { style: { color: "var(--tpl-text-muted)" } }, Da = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, qa = {
+  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)" }
+}, Ba = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Oa = { class: "tpl:flex tpl:items-center tpl:gap-5" }, Aa = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-2"
+}, Na = {
+  key: 1,
+  class: "tpl:relative"
+}, Va = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Wa = ["disabled"], Ho = /* @__PURE__ */ le({
+  __name: "MediaLibraryModal",
+  props: {
+    visible: { type: Boolean },
+    accept: {}
+  },
+  emits: ["close", "select"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, { t: r } = ie(), u = _e("authManager"), m = _e("projectId"), y = I(() => m.value), f = _e("planConfig"), w = I(
+      () => f.hasFeature("media_folders")
+    ), g = I(
+      () => f.hasFeature("import_from_url")
+    ), M = I(
+      () => {
+        var _;
+        return ((_ = f.config.value) == null ? void 0 : _.storage.used_bytes) ?? 0;
+      }
+    ), $ = I(
+      () => {
+        var _;
+        return ((_ = f.config.value) == null ? void 0 : _.storage.limit_bytes) ?? 0;
+      }
+    ), { isAcceptedMimeType: j, availableCategories: i } = Ue(), b = {
+      images: () => r.mediaLibrary.filterImages,
+      documents: () => r.mediaLibrary.filterDocuments,
+      videos: () => r.mediaLibrary.filterVideos,
+      audio: () => r.mediaLibrary.filterAudio
+    };
+    function T(_) {
+      var U;
+      return ((U = b[_]) == null ? void 0 : U.call(b)) ?? _;
+    }
+    const c = h("grid"), E = h(!1), q = h(""), N = h("original"), v = ot({
+      projectId: y.value,
+      authManager: u
+    }), ee = I(() => {
+      const _ = v.previewItem.value;
+      if (!_) return null;
+      switch (N.value) {
+        case "small":
+          return _.small_url || _.url;
+        case "medium":
+          return _.medium_url || _.url;
+        case "large":
+          return _.large_url || _.url;
+        default:
+          return _.url;
+      }
+    }), W = I(() => v.frequentlyUsedItems.value.length > 0), B = I(() => v.viewMode.value === "frequently-used" ? v.frequentlyUsedItems.value : v.items.value), G = I(() => Object.values(v.deleteUsageInfo.value).some(
+      (_) => _.template_count > 0
+    ));
+    ke(
+      () => l.visible,
+      (_) => {
+        _ ? (v.loadItems(), v.loadFrequentlyUsed()) : (v.clearSelection(), v.cancelDelete(), v.cancelReplace(), q.value = "", v.categoryFilter.value = null, v.sortOption.value = "newest", v.viewMode.value = "files", ue.value = null, be.value = !1, N.value = "original");
+      }
+    ), ke(E, (_) => {
+      _ && w.value && v.loadFolders();
+    }), ke(
+      () => {
+        var _;
+        return (_ = v.previewItem.value) == null ? void 0 : _.id;
+      },
+      () => {
+        N.value = "original";
+      }
+    );
+    const Z = rt((_) => {
+      v.search(_);
+    }, 300);
+    function H(_) {
+      q.value = _, Z(_);
+    }
+    function pe(_) {
+      _.key === "Escape" && n("close");
+    }
+    async function A(_) {
+      await v.uploadFiles(_);
+    }
+    function O(_) {
+      v.selectItem(_);
+    }
+    function ne() {
+      var _;
+      return v.previewItem.value ? (_ = l.accept) != null && _.length ? j(v.previewItem.value.mime_type, l.accept) : !0 : !1;
+    }
+    function de() {
+      if (ne()) {
+        const _ = v.previewItem.value, U = {
+          ..._,
+          url: ee.value || _.url
+        };
+        n("select", U), n("close");
+      }
+    }
+    async function ve(_, U) {
+      await v.createFolder(_, U);
+    }
+    async function re(_, U) {
+      await v.renameFolder(_, U);
+    }
+    async function K(_) {
+      await v.deleteFolder(_);
+    }
+    const ue = h(null);
+    function ye(_) {
+      ue.value = _;
+    }
+    async function ze(_, U, Ce, D) {
+      D && await v.replaceMediaDirectly(_, D.file), await v.updateFile(_, U, Ce), ue.value = null;
+    }
+    const { copy: $e, copied: xe } = at({ copiedDuring: 2e3, legacy: !0 }), be = h(!1);
+    async function L(_) {
+      await v.importFromUrl(_) && (be.value = !1);
+    }
+    const S = h(!1);
+    async function P(_) {
+      S.value = !1, await v.moveSelected(_);
+    }
+    async function me() {
+      await v.checkUsageBeforeDelete();
+    }
+    function Fe(_) {
+      v.checkUsageBeforeReplace(_);
+    }
+    async function we(_) {
+      await v.replaceFile(_);
+    }
+    return Tt(document, "keydown", pe), (_, U) => (s(), Y(Ee, { to: "body" }, [
+      C(ge, {
+        "enter-active-class": "tpl:transition tpl:duration-200",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:duration-150",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: he(() => {
+          var Ce;
+          return [
+            t.visible ? (s(), p("div", {
+              key: 0,
+              class: "tpl tpl-media-overlay tpl:fixed tpl:inset-0 tpl:z-[9999]",
+              onClick: U[17] || (U[17] = te((D) => n("close"), ["self"]))
+            }, [
+              a("div", ra, [
+                a("div", aa, [
+                  a("h2", oa, d(e(r).mediaLibrary.title), 1),
+                  a("div", sa, [
+                    C(ft, {
+                      "used-bytes": M.value,
+                      "limit-bytes": $.value,
+                      size: 22
+                    }, null, 8, ["used-bytes", "limit-bytes"]),
+                    a("div", na, [
+                      a("input", {
+                        value: q.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: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                        placeholder: e(r).mediaLibrary.searchPlaceholder,
+                        onInput: U[0] || (U[0] = (D) => H(D.target.value))
+                      }, null, 40, ia),
+                      C(e(Ze), {
+                        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)" }
+                      })
+                    ]),
+                    a("button", {
+                      class: "tpl:flex tpl:size-7 tpl:items-center tpl:justify-center tpl:rounded-md tpl:transition-all tpl:duration-150",
+                      style: { color: "var(--tpl-text-muted)" },
+                      onClick: U[1] || (U[1] = (D) => n("close"))
+                    }, [
+                      C(e(It), {
+                        size: 18,
+                        "stroke-width": 2
+                      })
+                    ])
+                  ])
+                ]),
+                a("div", pa, [
+                  C(ge, {
+                    "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",
+                    "leave-active-class": "tpl:transition-all tpl:duration-150 tpl:ease-in",
+                    "leave-from-class": "tpl:ml-0 tpl:opacity-100",
+                    "leave-to-class": "tpl:-ml-48 tpl:opacity-0"
+                  }, {
+                    default: he(() => [
+                      w.value && E.value ? (s(), p("div", da, [
+                        C(it, {
+                          folders: e(v).folders.value,
+                          "current-folder-id": e(v).currentFolderId.value,
+                          "view-mode": e(v).viewMode.value,
+                          "has-frequently-used": W.value,
+                          onNavigate: e(v).navigateToFolder,
+                          onCreateFolder: ve,
+                          onRenameFolder: re,
+                          onDeleteFolder: K,
+                          onShowFrequentlyUsed: e(v).showFrequentlyUsed
+                        }, null, 8, ["folders", "current-folder-id", "view-mode", "has-frequently-used", "onNavigate", "onShowFrequentlyUsed"])
+                      ])) : F("", !0)
+                    ]),
+                    _: 1
+                  }),
+                  a("div", ua, [
+                    a("div", ca, [
+                      a("div", va, [
+                        w.value ? (s(), p("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: X({
+                            color: E.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                            backgroundColor: E.value ? "var(--tpl-bg)" : "transparent",
+                            border: E.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+                          }),
+                          title: E.value ? e(r).mediaLibrary.hideFolders : e(r).mediaLibrary.showFolders,
+                          onClick: U[2] || (U[2] = (D) => E.value = !E.value)
+                        }, [
+                          C(e(Qe), {
+                            size: 16,
+                            "stroke-width": 2
+                          })
+                        ], 12, ma)) : F("", !0),
+                        e(v).viewMode.value === "frequently-used" ? (s(), p("span", fa, d(e(r).mediaLibrary.frequentlyUsed), 1)) : (s(), Y(st, {
+                          key: 2,
+                          folders: e(v).folders.value,
+                          "current-folder-id": e(v).currentFolderId.value,
+                          onNavigate: e(v).navigateToFolder
+                        }, null, 8, ["folders", "current-folder-id", "onNavigate"])),
+                        a("div", ya, [
+                          a("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: X({
+                              color: c.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                              backgroundColor: c.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+                            }),
+                            title: e(r).mediaLibrary.viewGrid,
+                            onClick: U[3] || (U[3] = (D) => c.value = "grid")
+                          }, [
+                            C(e(Ye), {
+                              size: 14,
+                              "stroke-width": 2
+                            })
+                          ], 12, ba),
+                          a("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: X({
+                              color: c.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                              backgroundColor: c.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+                            }),
+                            title: e(r).mediaLibrary.viewList,
+                            onClick: U[4] || (U[4] = (D) => c.value = "list")
+                          }, [
+                            C(e(et), {
+                              size: 14,
+                              "stroke-width": 2
+                            })
+                          ], 12, ga)
+                        ])
+                      ]),
+                      a("div", ha, [
+                        e(i).length > 1 ? (s(), p("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: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                          value: e(v).categoryFilter.value ?? "",
+                          onChange: U[5] || (U[5] = (D) => e(v).filterByCategory(
+                            D.target.value || null
+                          ))
+                        }, [
+                          a("option", wa, d(e(r).mediaLibrary.filterAll), 1),
+                          (s(!0), p(J, null, se(e(i), (D) => (s(), p("option", {
+                            key: D,
+                            value: D
+                          }, d(T(D)), 9, ka))), 128))
+                        ], 40, xa)) : F("", !0),
+                        a("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: e(v).sortOption.value,
+                          onChange: U[6] || (U[6] = (D) => e(v).sortBy(D.target.value))
+                        }, [
+                          a("option", $a, d(e(r).mediaLibrary.sortNewest), 1),
+                          a("option", Fa, d(e(r).mediaLibrary.sortOldest), 1),
+                          a("option", Ca, d(e(r).mediaLibrary.sortNameAsc), 1),
+                          a("option", Ma, d(e(r).mediaLibrary.sortNameDesc), 1),
+                          a("option", Ia, d(e(r).mediaLibrary.sortSizeAsc), 1),
+                          a("option", La, d(e(r).mediaLibrary.sortSizeDesc), 1)
+                        ], 40, _a)
+                      ])
+                    ]),
+                    a("div", Sa, [
+                      e(v).viewMode.value === "files" ? (s(), p("div", Ua, [
+                        C(mt, {
+                          "is-uploading": e(v).isUploading.value,
+                          "upload-progress": e(v).uploadProgress.value,
+                          onUpload: A
+                        }, null, 8, ["is-uploading", "upload-progress"]),
+                        g.value ? (s(), p("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: { "border-color": "var(--tpl-border)", color: "var(--tpl-text-muted)", "background-color": "var(--tpl-bg)" },
+                          onClick: U[7] || (U[7] = (D) => be.value = !0)
+                        }, [
+                          C(e(tt), {
+                            size: 14,
+                            "stroke-width": 2
+                          }),
+                          Q(" " + d(e(r).mediaLibrary.importFromUrl), 1)
+                        ])) : F("", !0)
+                      ])) : F("", !0),
+                      C(pt, {
+                        items: B.value,
+                        "selected-ids": e(v).selectedItems.value,
+                        "is-loading": e(v).isLoading.value,
+                        "has-more": e(v).viewMode.value === "files" && e(v).hasMore.value,
+                        accept: t.accept,
+                        layout: c.value,
+                        onSelect: O,
+                        onToggle: e(v).toggleSelection,
+                        onLoadMore: e(v).loadMore,
+                        onEdit: ye,
+                        onReplace: Fe
+                      }, null, 8, ["items", "selected-ids", "is-loading", "has-more", "accept", "layout", "onToggle", "onLoadMore"])
+                    ])
+                  ])
+                ]),
+                C(dt, {
+                  visible: be.value,
+                  "is-importing": e(v).isImportingFromUrl.value,
+                  error: e(v).importFromUrlError.value,
+                  onImport: L,
+                  onClose: U[8] || (U[8] = (D) => be.value = !1)
+                }, null, 8, ["visible", "is-importing", "error"]),
+                C(nt, {
+                  visible: !!ue.value,
+                  item: ue.value,
+                  onSave: ze,
+                  onClose: U[9] || (U[9] = (D) => ue.value = null)
+                }, null, 8, ["visible", "item"]),
+                C(vt, {
+                  visible: e(v).showReplaceWarning.value,
+                  item: e(v).pendingReplaceItem.value,
+                  "usage-info": e(v).replaceUsageInfo.value,
+                  "is-replacing": e(v).isReplacing.value,
+                  error: e(v).replaceError.value,
+                  onReplace: we,
+                  onClose: e(v).cancelReplace
+                }, null, 8, ["visible", "item", "usage-info", "is-replacing", "error", "onClose"]),
+                C(ge, {
+                  "enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+                  "enter-from-class": "tpl:opacity-0",
+                  "enter-to-class": "tpl:opacity-100",
+                  "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+                  "leave-from-class": "tpl:opacity-100",
+                  "leave-to-class": "tpl:opacity-0"
+                }, {
+                  default: he(() => [
+                    e(v).showDeleteWarning.value ? (s(), p("div", {
+                      key: 0,
+                      class: "tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]",
+                      style: { "background-color": "var(--tpl-overlay)", "backdrop-filter": "blur(8px)", "-webkit-backdrop-filter": "blur(8px)" },
+                      onClick: U[12] || (U[12] = te(
+                        //@ts-ignore
+                        (...D) => e(v).cancelDelete && e(v).cancelDelete(...D),
+                        ["self"]
+                      ))
+                    }, [
+                      a("div", za, [
+                        a("h3", ja, d(e(r).mediaLibrary.deleteWarningTitle), 1),
+                        a("p", {
+                          class: ce(["tpl:text-xs", G.value ? "tpl:mb-2" : "tpl:mb-4"]),
+                          style: { color: "var(--tpl-text-muted)" }
+                        }, d(e(r).mediaLibrary.deleteWarningMessage), 3),
+                        G.value ? (s(), p("p", Ta, d(e(r).mediaLibrary.deleteWarningUsageNote), 1)) : F("", !0),
+                        G.value ? (s(), p("div", Pa, [
+                          (s(!0), p(J, null, se(e(v).deleteUsageInfo.value, (D, je) => {
+                            var Te;
+                            return s(), p("div", {
+                              key: je,
+                              class: "tpl:text-xs",
+                              style: { color: "var(--tpl-text)" }
+                            }, [
+                              D.template_count > 0 ? (s(), p(J, { key: 0 }, [
+                                a("span", Ra, d(((Te = B.value.find((De) => De.id === je)) == null ? void 0 : Te.filename) || je), 1),
+                                a("span", Ea, " - " + d(e(r).mediaLibrary.usedInTemplates.replace(
+                                  "{count}",
+                                  D.template_count.toString()
+                                )), 1)
+                              ], 64)) : F("", !0)
+                            ]);
+                          }), 128))
+                        ])) : F("", !0),
+                        a("div", Da, [
+                          a("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: U[10] || (U[10] = //@ts-ignore
+                            (...D) => e(v).cancelDelete && e(v).cancelDelete(...D))
+                          }, d(e(r).mediaLibrary.cancel), 1),
+                          a("button", {
+                            class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+                            style: { "border-color": "var(--tpl-danger)", color: "var(--tpl-danger)", "background-color": "var(--tpl-danger-light)" },
+                            onClick: U[11] || (U[11] = //@ts-ignore
+                            (...D) => e(v).confirmDelete && e(v).confirmDelete(...D))
+                          }, d(G.value ? e(r).mediaLibrary.deleteAnyway : e(r).mediaLibrary.confirmDelete), 1)
+                        ])
+                      ])
+                    ])) : F("", !0)
+                  ]),
+                  _: 1
+                }),
+                a("div", qa, [
+                  a("div", Ba, [
+                    e(v).previewItem.value ? (s(), Y(ct, {
+                      key: 0,
+                      "selected-conversion": N.value,
+                      "onUpdate:selectedConversion": U[13] || (U[13] = (D) => N.value = D),
+                      item: e(v).previewItem.value,
+                      folders: e(v).folders.value
+                    }, null, 8, ["selected-conversion", "item", "folders"])) : F("", !0)
+                  ]),
+                  a("div", Oa, [
+                    e(v).selectedItems.value.size > 0 ? (s(), p("div", Aa, [
+                      e(v).previewItem.value ? (s(), p("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: X({
+                          borderColor: e(xe) ? "var(--tpl-success)" : "var(--tpl-border)",
+                          color: e(xe) ? "var(--tpl-success)" : "var(--tpl-text)",
+                          backgroundColor: "var(--tpl-bg)"
+                        }),
+                        onClick: U[14] || (U[14] = (D) => e($e)(ee.value))
+                      }, [
+                        e(xe) ? (s(), Y(e(Re), {
+                          key: 1,
+                          size: 12,
+                          "stroke-width": 2
+                        })) : (s(), Y(e(lt), {
+                          key: 0,
+                          size: 12,
+                          "stroke-width": 2
+                        })),
+                        Q(" " + d(e(xe) ? e(r).mediaLibrary.copied : e(r).mediaLibrary.copyUrl), 1)
+                      ], 4)) : F("", !0),
+                      w.value ? (s(), p("div", Na, [
+                        a("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: U[15] || (U[15] = (D) => S.value = !S.value)
+                        }, d(e(r).mediaLibrary.moveSelected), 1),
+                        S.value ? (s(), Y(ut, {
+                          key: 0,
+                          folders: e(v).folders.value,
+                          "current-folder-id": e(v).currentFolderId.value,
+                          onSelect: P,
+                          onClose: U[16] || (U[16] = (D) => S.value = !1)
+                        }, null, 8, ["folders", "current-folder-id"])) : F("", !0)
+                      ])) : F("", !0)
+                    ])) : F("", !0),
+                    a("div", Va, [
+                      e(v).selectedItems.value.size > 0 ? (s(), p("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: { "border-color": "var(--tpl-danger)", color: "var(--tpl-danger)", "background-color": "var(--tpl-danger-light)" },
+                        onClick: me
+                      }, d(e(r).mediaLibrary.deleteSelected), 1)) : F("", !0),
+                      a("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: !ne(),
+                        onClick: de
+                      }, d((Ce = t.accept) != null && Ce.length ? e(r).mediaLibrary.selectImage : e(r).mediaLibrary.selectFile), 9, Wa)
+                    ])
+                  ])
+                ])
+              ])
+            ])) : F("", !0)
+          ];
+        }),
+        _: 1
+      })
+    ]));
+  }
+});
+function Jo() {
+  const t = _e("onRequestMedia"), o = _e("planConfig"), l = h(!1), n = I(
+    () => !!t && o.hasFeature("pluggable_media")
+  );
+  async function r(u) {
+    if (!t)
+      return null;
+    l.value = !0;
+    try {
+      return await t(u ?? {});
+    } finally {
+      l.value = !1;
+    }
+  }
+  return { isPluggableMediaEnabled: n, isRequesting: l, requestMedia: r };
+}
+const Ka = {
+  class: "tpl tpl:flex tpl:flex-col tpl:overflow-hidden tpl:rounded-[var(--tpl-radius-lg)]",
+  style: { width: "100%", height: "100%", "background-color": "var(--tpl-bg-elevated)", border: "1px solid var(--tpl-border)" }
+}, Ga = {
+  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)" }
+}, Ha = {
+  class: "tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, Ja = { class: "tpl:flex tpl:items-center tpl:gap-3" }, Xa = { class: "tpl:relative" }, Za = ["value", "placeholder"], Qa = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, Ya = {
+  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)" }
+}, eo = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:flex-col" }, to = {
+  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)" }
+}, lo = { class: "tpl:flex tpl:items-center tpl:gap-2" }, ro = ["title"], ao = {
+  key: 1,
+  class: "tpl:text-xs tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, oo = {
+  class: "tpl:flex tpl:rounded-md tpl:p-0.5",
+  style: { border: "1px solid var(--tpl-border)", "background-color": "var(--tpl-bg)" }
+}, so = ["title"], no = ["title"], io = { class: "tpl:flex tpl:items-center tpl:gap-2" }, po = ["value"], uo = { value: "" }, co = ["value"], vo = ["value"], mo = { value: "newest" }, fo = { value: "oldest" }, yo = { value: "name_asc" }, bo = { value: "name_desc" }, go = { value: "size_asc" }, ho = { value: "size_desc" }, xo = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto" }, wo = {
+  key: 0,
+  class: "tpl:px-4 tpl:pt-3"
+}, ko = {
+  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)" }
+}, _o = {
+  class: "tpl:mb-2 tpl:text-sm tpl:font-semibold",
+  style: { color: "var(--tpl-text)" }
+}, $o = {
+  key: 0,
+  class: "tpl:mb-4 tpl:text-xs",
+  style: { color: "var(--tpl-text-muted)" }
+}, Fo = {
+  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)" }
+}, Co = { class: "tpl:font-medium" }, Mo = { style: { color: "var(--tpl-text-muted)" } }, Io = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, Lo = {
+  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)" }
+}, So = { class: "tpl:flex tpl:min-w-0 tpl:flex-1 tpl:items-center tpl:gap-3" }, Uo = { class: "tpl:flex tpl:items-center tpl:gap-5" }, zo = {
+  key: 0,
+  class: "tpl:flex tpl:items-center tpl:gap-2"
+}, jo = {
+  key: 1,
+  class: "tpl:relative"
+}, To = { class: "tpl:flex tpl:items-center tpl:gap-2" }, Po = ["disabled"], Ro = /* @__PURE__ */ le({
+  __name: "MediaLibrary",
+  props: {
+    authManager: {},
+    projectId: {},
+    planConfig: {},
+    translations: {},
+    onSelect: { type: Function },
+    onError: { type: Function }
+  },
+  emits: ["ready"],
+  setup(t, { emit: o }) {
+    const l = t, n = o, r = I(() => l.translations);
+    Pe("translations", l.translations), Pe("authManager", l.authManager), Pe(
+      "projectId",
+      I(() => l.projectId)
+    );
+    const u = h(l.planConfig);
+    Pe("planConfig", {
+      config: u,
+      isLoading: h(!1),
+      hasFeature: (L) => l.planConfig.features[L] ?? !1,
+      features: I(() => l.planConfig.features),
+      fetchConfig: async () => {
+      }
+    });
+    const m = I(
+      () => l.planConfig.features.media_folders ?? !1
+    ), y = I(
+      () => l.planConfig.features.import_from_url ?? !1
+    ), f = I(
+      () => l.planConfig.storage.used_bytes ?? 0
+    ), w = I(
+      () => l.planConfig.storage.limit_bytes ?? 0
+    ), { availableCategories: g } = Ue(), M = {
+      images: () => r.value.mediaLibrary.filterImages,
+      documents: () => r.value.mediaLibrary.filterDocuments,
+      videos: () => r.value.mediaLibrary.filterVideos,
+      audio: () => r.value.mediaLibrary.filterAudio
+    };
+    function $(L) {
+      var S;
+      return ((S = M[L]) == null ? void 0 : S.call(M)) ?? L;
+    }
+    const j = h("grid"), i = h(!1), b = h(""), T = h("original"), c = ot({
+      projectId: l.projectId,
+      authManager: l.authManager,
+      onError: l.onError
+    }), E = I(() => {
+      const L = c.previewItem.value;
+      if (!L) return null;
+      switch (T.value) {
+        case "small":
+          return L.small_url || L.url;
+        case "medium":
+          return L.medium_url || L.url;
+        case "large":
+          return L.large_url || L.url;
+        default:
+          return L.url;
+      }
+    }), q = I(() => c.frequentlyUsedItems.value.length > 0), N = I(() => c.viewMode.value === "frequently-used" ? c.frequentlyUsedItems.value : c.items.value), v = I(() => Object.values(c.deleteUsageInfo.value).some(
+      (L) => L.template_count > 0
+    ));
+    ke(i, (L) => {
+      L && m.value && c.loadFolders();
+    }), ke(
+      () => {
+        var L;
+        return (L = c.previewItem.value) == null ? void 0 : L.id;
+      },
+      () => {
+        T.value = "original";
+      }
+    );
+    const ee = rt((L) => {
+      c.search(L);
+    }, 300);
+    function W(L) {
+      b.value = L, ee(L);
+    }
+    async function B(L) {
+      await c.uploadFiles(L);
+    }
+    function G(L) {
+      c.selectItem(L);
+    }
+    function Z() {
+      var P;
+      if (!c.previewItem.value)
+        return;
+      const L = c.previewItem.value, S = {
+        ...L,
+        url: E.value || L.url
+      };
+      (P = l.onSelect) == null || P.call(l, S);
+    }
+    async function H(L, S) {
+      await c.createFolder(L, S);
+    }
+    async function pe(L, S) {
+      await c.renameFolder(L, S);
+    }
+    async function A(L) {
+      await c.deleteFolder(L);
+    }
+    const O = h(null);
+    function ne(L) {
+      O.value = L;
+    }
+    async function de(L, S, P, me) {
+      me && await c.replaceMediaDirectly(L, me.file), await c.updateFile(L, S, P), O.value = null;
+    }
+    const { copy: ve, copied: re } = at({ copiedDuring: 2e3, legacy: !0 }), K = h(!1);
+    async function ue(L) {
+      await c.importFromUrl(L) && (K.value = !1);
+    }
+    const ye = h(!1);
+    async function ze(L) {
+      ye.value = !1, await c.moveSelected(L);
+    }
+    async function $e() {
+      await c.checkUsageBeforeDelete();
+    }
+    function xe(L) {
+      c.checkUsageBeforeReplace(L);
+    }
+    async function be(L) {
+      await c.replaceFile(L);
+    }
+    return kt(() => {
+      c.loadItems(), c.loadFrequentlyUsed(), n("ready");
+    }), (L, S) => (s(), p("div", Ka, [
+      a("div", Ga, [
+        a("h2", Ha, d(r.value.mediaLibrary.title), 1),
+        a("div", Ja, [
+          C(ft, {
+            "used-bytes": f.value,
+            "limit-bytes": w.value,
+            size: 22
+          }, null, 8, ["used-bytes", "limit-bytes"]),
+          a("div", Xa, [
+            a("input", {
+              value: b.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: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+              placeholder: r.value.mediaLibrary.searchPlaceholder,
+              onInput: S[0] || (S[0] = (P) => W(P.target.value))
+            }, null, 40, Za),
+            C(e(Ze), {
+              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)" }
+            })
+          ])
+        ])
+      ]),
+      a("div", Qa, [
+        C(ge, {
+          "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",
+          "leave-active-class": "tpl:transition-all tpl:duration-150 tpl:ease-in",
+          "leave-from-class": "tpl:ml-0 tpl:opacity-100",
+          "leave-to-class": "tpl:-ml-48 tpl:opacity-0"
+        }, {
+          default: he(() => [
+            m.value && i.value ? (s(), p("div", Ya, [
+              C(it, {
+                folders: e(c).folders.value,
+                "current-folder-id": e(c).currentFolderId.value,
+                "view-mode": e(c).viewMode.value,
+                "has-frequently-used": q.value,
+                onNavigate: e(c).navigateToFolder,
+                onCreateFolder: H,
+                onRenameFolder: pe,
+                onDeleteFolder: A,
+                onShowFrequentlyUsed: e(c).showFrequentlyUsed
+              }, null, 8, ["folders", "current-folder-id", "view-mode", "has-frequently-used", "onNavigate", "onShowFrequentlyUsed"])
+            ])) : F("", !0)
+          ]),
+          _: 1
+        }),
+        a("div", eo, [
+          a("div", to, [
+            a("div", lo, [
+              m.value ? (s(), p("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: X({
+                  color: i.value ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                  backgroundColor: i.value ? "var(--tpl-bg)" : "transparent",
+                  border: i.value ? "1px solid var(--tpl-border)" : "1px solid transparent"
+                }),
+                title: i.value ? r.value.mediaLibrary.hideFolders : r.value.mediaLibrary.showFolders,
+                onClick: S[1] || (S[1] = (P) => i.value = !i.value)
+              }, [
+                C(e(Qe), {
+                  size: 16,
+                  "stroke-width": 2
+                })
+              ], 12, ro)) : F("", !0),
+              e(c).viewMode.value === "frequently-used" ? (s(), p("span", ao, d(r.value.mediaLibrary.frequentlyUsed), 1)) : (s(), Y(st, {
+                key: 2,
+                folders: e(c).folders.value,
+                "current-folder-id": e(c).currentFolderId.value,
+                onNavigate: e(c).navigateToFolder
+              }, null, 8, ["folders", "current-folder-id", "onNavigate"])),
+              a("div", oo, [
+                a("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: X({
+                    color: j.value === "grid" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                    backgroundColor: j.value === "grid" ? "var(--tpl-bg-elevated)" : "transparent"
+                  }),
+                  title: r.value.mediaLibrary.viewGrid,
+                  onClick: S[2] || (S[2] = (P) => j.value = "grid")
+                }, [
+                  C(e(Ye), {
+                    size: 14,
+                    "stroke-width": 2
+                  })
+                ], 12, so),
+                a("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: X({
+                    color: j.value === "list" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
+                    backgroundColor: j.value === "list" ? "var(--tpl-bg-elevated)" : "transparent"
+                  }),
+                  title: r.value.mediaLibrary.viewList,
+                  onClick: S[3] || (S[3] = (P) => j.value = "list")
+                }, [
+                  C(e(et), {
+                    size: 14,
+                    "stroke-width": 2
+                  })
+                ], 12, no)
+              ])
+            ]),
+            a("div", io, [
+              e(g).length > 1 ? (s(), p("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: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)", color: "var(--tpl-text)" },
+                value: e(c).categoryFilter.value ?? "",
+                onChange: S[4] || (S[4] = (P) => e(c).filterByCategory(
+                  P.target.value || null
+                ))
+              }, [
+                a("option", uo, d(r.value.mediaLibrary.filterAll), 1),
+                (s(!0), p(J, null, se(e(g), (P) => (s(), p("option", {
+                  key: P,
+                  value: P
+                }, d($(P)), 9, co))), 128))
+              ], 40, po)) : F("", !0),
+              a("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: e(c).sortOption.value,
+                onChange: S[5] || (S[5] = (P) => e(c).sortBy(P.target.value))
+              }, [
+                a("option", mo, d(r.value.mediaLibrary.sortNewest), 1),
+                a("option", fo, d(r.value.mediaLibrary.sortOldest), 1),
+                a("option", yo, d(r.value.mediaLibrary.sortNameAsc), 1),
+                a("option", bo, d(r.value.mediaLibrary.sortNameDesc), 1),
+                a("option", go, d(r.value.mediaLibrary.sortSizeAsc), 1),
+                a("option", ho, d(r.value.mediaLibrary.sortSizeDesc), 1)
+              ], 40, vo)
+            ])
+          ]),
+          a("div", xo, [
+            e(c).viewMode.value === "files" ? (s(), p("div", wo, [
+              C(mt, {
+                "is-uploading": e(c).isUploading.value,
+                "upload-progress": e(c).uploadProgress.value,
+                onUpload: B
+              }, null, 8, ["is-uploading", "upload-progress"]),
+              y.value ? (s(), p("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: { "border-color": "var(--tpl-border)", color: "var(--tpl-text-muted)", "background-color": "var(--tpl-bg)" },
+                onClick: S[6] || (S[6] = (P) => K.value = !0)
+              }, [
+                C(e(tt), {
+                  size: 14,
+                  "stroke-width": 2
+                }),
+                Q(" " + d(r.value.mediaLibrary.importFromUrl), 1)
+              ])) : F("", !0)
+            ])) : F("", !0),
+            C(pt, {
+              items: N.value,
+              "selected-ids": e(c).selectedItems.value,
+              "is-loading": e(c).isLoading.value,
+              "has-more": e(c).viewMode.value === "files" && e(c).hasMore.value,
+              layout: j.value,
+              onSelect: G,
+              onToggle: e(c).toggleSelection,
+              onLoadMore: e(c).loadMore,
+              onEdit: ne,
+              onReplace: xe
+            }, null, 8, ["items", "selected-ids", "is-loading", "has-more", "layout", "onToggle", "onLoadMore"])
+          ])
+        ])
+      ]),
+      C(dt, {
+        visible: K.value,
+        "is-importing": e(c).isImportingFromUrl.value,
+        error: e(c).importFromUrlError.value,
+        onImport: ue,
+        onClose: S[7] || (S[7] = (P) => K.value = !1)
+      }, null, 8, ["visible", "is-importing", "error"]),
+      C(nt, {
+        visible: !!O.value,
+        item: O.value,
+        onSave: de,
+        onClose: S[8] || (S[8] = (P) => O.value = null)
+      }, null, 8, ["visible", "item"]),
+      C(vt, {
+        visible: e(c).showReplaceWarning.value,
+        item: e(c).pendingReplaceItem.value,
+        "usage-info": e(c).replaceUsageInfo.value,
+        "is-replacing": e(c).isReplacing.value,
+        error: e(c).replaceError.value,
+        onReplace: be,
+        onClose: e(c).cancelReplace
+      }, null, 8, ["visible", "item", "usage-info", "is-replacing", "error", "onClose"]),
+      C(ge, {
+        "enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+        "enter-from-class": "tpl:opacity-0",
+        "enter-to-class": "tpl:opacity-100",
+        "leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+        "leave-from-class": "tpl:opacity-100",
+        "leave-to-class": "tpl:opacity-0"
+      }, {
+        default: he(() => [
+          e(c).showDeleteWarning.value ? (s(), p("div", {
+            key: 0,
+            class: "tpl:absolute tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-lg)]",
+            style: { "background-color": "rgba(0, 0, 0, 0.5)", "backdrop-filter": "blur(8px)", "-webkit-backdrop-filter": "blur(8px)" },
+            onClick: S[11] || (S[11] = te(
+              //@ts-ignore
+              (...P) => e(c).cancelDelete && e(c).cancelDelete(...P),
+              ["self"]
+            ))
+          }, [
+            a("div", ko, [
+              a("h3", _o, d(r.value.mediaLibrary.deleteWarningTitle), 1),
+              a("p", {
+                class: ce(["tpl:text-xs", v.value ? "tpl:mb-2" : "tpl:mb-4"]),
+                style: { color: "var(--tpl-text-muted)" }
+              }, d(r.value.mediaLibrary.deleteWarningMessage), 3),
+              v.value ? (s(), p("p", $o, d(r.value.mediaLibrary.deleteWarningUsageNote), 1)) : F("", !0),
+              v.value ? (s(), p("div", Fo, [
+                (s(!0), p(J, null, se(e(c).deleteUsageInfo.value, (P, me) => {
+                  var Fe;
+                  return s(), p("div", {
+                    key: me,
+                    class: "tpl:text-xs",
+                    style: { color: "var(--tpl-text)" }
+                  }, [
+                    P.template_count > 0 ? (s(), p(J, { key: 0 }, [
+                      a("span", Co, d(((Fe = N.value.find((we) => we.id === me)) == null ? void 0 : Fe.filename) || me), 1),
+                      a("span", Mo, " - " + d(r.value.mediaLibrary.usedInTemplates.replace(
+                        "{count}",
+                        P.template_count.toString()
+                      )), 1)
+                    ], 64)) : F("", !0)
+                  ]);
+                }), 128))
+              ])) : F("", !0),
+              a("div", Io, [
+                a("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: S[9] || (S[9] = //@ts-ignore
+                  (...P) => e(c).cancelDelete && e(c).cancelDelete(...P))
+                }, d(r.value.mediaLibrary.cancel), 1),
+                a("button", {
+                  class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+                  style: { "border-color": "var(--tpl-danger)", color: "var(--tpl-danger)", "background-color": "var(--tpl-danger-light)" },
+                  onClick: S[10] || (S[10] = //@ts-ignore
+                  (...P) => e(c).confirmDelete && e(c).confirmDelete(...P))
+                }, d(v.value ? r.value.mediaLibrary.deleteAnyway : r.value.mediaLibrary.confirmDelete), 1)
+              ])
+            ])
+          ])) : F("", !0)
+        ]),
+        _: 1
+      }),
+      a("div", Lo, [
+        a("div", So, [
+          e(c).previewItem.value ? (s(), Y(ct, {
+            key: 0,
+            "selected-conversion": T.value,
+            "onUpdate:selectedConversion": S[12] || (S[12] = (P) => T.value = P),
+            item: e(c).previewItem.value,
+            folders: e(c).folders.value
+          }, null, 8, ["selected-conversion", "item", "folders"])) : F("", !0)
+        ]),
+        a("div", Uo, [
+          e(c).selectedItems.value.size > 0 ? (s(), p("div", zo, [
+            e(c).previewItem.value ? (s(), p("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: X({
+                borderColor: e(re) ? "var(--tpl-success)" : "var(--tpl-border)",
+                color: e(re) ? "var(--tpl-success)" : "var(--tpl-text)",
+                backgroundColor: "var(--tpl-bg)"
+              }),
+              onClick: S[13] || (S[13] = (P) => e(ve)(E.value))
+            }, [
+              e(re) ? (s(), Y(e(Re), {
+                key: 1,
+                size: 12,
+                "stroke-width": 2
+              })) : (s(), Y(e(lt), {
+                key: 0,
+                size: 12,
+                "stroke-width": 2
+              })),
+              Q(" " + d(e(re) ? r.value.mediaLibrary.copied : r.value.mediaLibrary.copyUrl), 1)
+            ], 4)) : F("", !0),
+            m.value ? (s(), p("div", jo, [
+              a("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: S[14] || (S[14] = (P) => ye.value = !ye.value)
+              }, d(r.value.mediaLibrary.moveSelected), 1),
+              ye.value ? (s(), Y(ut, {
+                key: 0,
+                folders: e(c).folders.value,
+                "current-folder-id": e(c).currentFolderId.value,
+                onSelect: ze,
+                onClose: S[15] || (S[15] = (P) => ye.value = !1)
+              }, null, 8, ["folders", "current-folder-id"])) : F("", !0)
+            ])) : F("", !0)
+          ])) : F("", !0),
+          a("div", To, [
+            e(c).selectedItems.value.size > 0 ? (s(), p("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: { "border-color": "var(--tpl-danger)", color: "var(--tpl-danger)", "background-color": "var(--tpl-danger-light)" },
+              onClick: $e
+            }, d(r.value.mediaLibrary.deleteSelected), 1)) : F("", !0),
+            t.onSelect ? (s(), p("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",
+              style: { "background-color": "var(--tpl-primary)", color: "var(--tpl-bg)" },
+              disabled: !e(c).previewItem.value,
+              onClick: Z
+            }, d(r.value.mediaLibrary.selectFile), 9, Po)) : F("", !0)
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Eo = (t, o, l) => {
+  const n = t[o];
+  return n ? typeof n == "function" ? n() : Promise.resolve(n) : new Promise((r, u) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      u.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + o + (o.split("/").length !== l ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, Do = ["en", "de"];
+function qo(t) {
+  return t.split("-")[0].toLowerCase();
+}
+async function Bo(t) {
+  const o = qo(t), l = Do.includes(o) ? o : "en";
+  return (await Eo(/* @__PURE__ */ Object.assign({ "./locales/de.ts": () => import("./de-1v2LO7XG.js"), "./locales/en.ts": () => import("./en-mipcUdaJ.js") }), `./locales/${l}.ts`, 3)).default;
+}
+let Ie = null;
+const yt = h(null);
+async function Oo(t) {
+  const o = typeof t.container == "string" ? document.querySelector(t.container) : t.container;
+  if (!o)
+    throw new Error(`Container element not found: ${t.container}`);
+  Ie && Oe();
+  const l = gt(t.auth, t.onError);
+  await l.initialize();
+  const r = await new ht(l).fetchConfig(), u = await Bo(
+    t.locale ?? "en"
+  );
+  return He(o, t.theme), new Promise((m, y) => {
+    try {
+      Ie = _t({
+        setup() {
+          const f = () => {
+            m({
+              setTheme: (g) => He(o, g),
+              unmount: Oe
+            });
+          };
+          return () => $t(Ro, {
+            authManager: l,
+            projectId: l.projectId,
+            planConfig: r,
+            translations: u,
+            onSelect: t.onSelect,
+            onError: t.onError,
+            ref: yt,
+            onReady: f
+          });
+        }
+      }), Ie.mount(o);
+    } catch (f) {
+      y(f);
+    }
+  });
+}
+function Oe() {
+  Ie && (Ie.unmount(), Ie = null, yt.value = null);
+}
+function He(t, o) {
+  o && (o.primaryColor && t.style.setProperty("--tpl-primary", o.primaryColor), o.borderRadius !== void 0 && (t.style.setProperty("--tpl-radius", `${o.borderRadius}px`), t.style.setProperty(
+    "--tpl-radius-sm",
+    `${Math.max(0, o.borderRadius - 3)}px`
+  ), t.style.setProperty(
+    "--tpl-radius-lg",
+    `${o.borderRadius + 4}px`
+  )));
+}
+const Ao = {
+  init: Oo,
+  unmount: Oe
+};
+typeof window < "u" && (window.TemplaticalMedia = Ao);
+export {
+  Pt as MediaApiClient,
+  Ho as MediaLibraryModal,
+  Oo as init,
+  Oe as unmount,
+  ie as useI18n,
+  Ue as useMediaCategories,
+  ot as useMediaLibrary,
+  Jo as useMediaPicker
+};