@webx-ui/module-media 0.6.1 → 0.7.0

package/dist/index.js

@@ -1,17 +1,17 @@
-import { defineComponent as O, useModel as I, ref as L, watch as K, openBlock as b, createBlock as T, unref as e, mergeModels as j, computed as U, resolveDirective as Ke, withCtx as x, createElementBlock as W, Fragment as se, renderList as re, withDirectives as je, createCommentVNode as R, createVNode as v, createTextVNode as N, toDisplayString as z, isRef as me, useTemplateRef as de, onMounted as Fe, nextTick as Ge, createElementVNode as M, withKeys as Ye, normalizeClass as ue, createSlots as Je, inject as Qe, normalizeStyle as ce, mergeProps as pe } from "vue";
-import { useTranslate as X, useAdmin as fe, adminKey as Ze } from "@webx-ui/module-admin";
-import { WxTree as et, WxSelectionArea as tt, WxFileCard as Ue, WxEmpty as lt, toast as Q, WxAction as D, WxInput as Z, WxDropdown as Ce, WxDropdownItem as Ve, WxActions as le, useModal as ve, WxDialog as ge, WxSelect as at, WxSpace as ye, WxButton as H, useElementWidth as it, createModal as ae, WxPagination as nt, WxDrawer as ot, confirm as Me, openImageEditor as st, WxSortableList as rt, WxPopover as We, WxPopconfirm as Le, WxImage as dt, WxCard as ut } from "@webx-ui/core";
-function he(t) {
-  const i = `${t.apiPath}/media`, o = (l) => l.data;
+import { defineComponent as S, useModel as A, ref as R, watch as G, openBlock as b, createBlock as T, unref as e, mergeModels as q, computed as z, resolveDirective as Ge, withCtx as w, createElementBlock as L, Fragment as ce, renderList as me, withDirectives as Ye, createCommentVNode as D, createVNode as g, createTextVNode as O, toDisplayString as U, isRef as ve, useTemplateRef as oe, onMounted as Fe, nextTick as Je, createElementVNode as V, withKeys as Qe, normalizeClass as pe, createSlots as We, inject as Ze, normalizeStyle as fe, mergeProps as ge } from "vue";
+import { useTranslate as H, useAdmin as se, useErrorText as et, adminKey as tt, WxListScreen as lt } from "@webx-ui/module-admin";
+import { WxTree as at, WxSelectionArea as it, WxFileCard as Le, WxEmpty as nt, toast as J, WxAction as B, WxInput as Z, WxDropdown as Ve, WxDropdownItem as Te, WxActions as le, useModal as ye, WxDialog as he, WxSelect as ot, WxSpace as be, WxButton as I, useElementWidth as st, createModal as ae, WxPagination as rt, WxDrawer as dt, confirm as ue, openImageEditor as ut, WxSortableList as ct, WxPopover as Re, WxPopconfirm as De, WxImage as mt, WxCard as pt } from "@webx-ui/core";
+function we(a) {
+  const i = `${a.apiPath}/media`, n = (l) => l.data;
   return {
-    directories: () => t.http.get(`${i}/directories`).then(o),
-    createDirectory: (l, c) => t.http.post(`${i}/directories`, { parent_id: l, title: c }).then(o),
-    renameDirectory: (l, c) => t.http.patch(`${i}/directories/${l}`, { title: c }).then(o),
-    moveDirectory: (l, c) => t.http.patch(`${i}/directories/${l}/move`, { parent_id: c }).then(o),
-    deleteDirectory: (l, c = !1) => t.http.delete(`${i}/directories/${l}`, {
-      query: { force: c ? 1 : void 0 }
+    directories: () => a.http.get(`${i}/directories`).then(n),
+    createDirectory: (l, r) => a.http.post(`${i}/directories`, { parent_id: l, title: r }).then(n),
+    renameDirectory: (l, r) => a.http.patch(`${i}/directories/${l}`, { title: r }).then(n),
+    moveDirectory: (l, r) => a.http.patch(`${i}/directories/${l}/move`, { parent_id: r }).then(n),
+    deleteDirectory: (l, r = !1) => a.http.delete(`${i}/directories/${l}`, {
+      query: { force: r ? 1 : void 0 }
     }),
-    files: (l = {}) => t.http.get(`${i}/files`, {
+    files: (l = {}) => a.http.get(`${i}/files`, {
       query: {
         directory_id: l.directory_id ?? void 0,
         q: l.q || void 0,
@@ -21,111 +21,111 @@ function he(t) {
         per_page: l.per_page
       }
     }),
-    file: (l) => t.http.get(`${i}/files/${l}`).then(o),
-    fileByPath: (l) => t.http.get(`${i}/files/by-path?path=${encodeURIComponent(l)}`).then(o).catch(() => null),
-    async upload(l, c, s) {
-      const a = new FormData();
-      return a.append("directory_id", String(l)), c.forEach((n) => a.append("files[]", n)), new Promise((n, k) => {
-        const w = new XMLHttpRequest();
-        w.open("POST", `${i}/files`), w.responseType = "json", w.withCredentials = !0, w.setRequestHeader("Accept", "application/json"), w.setRequestHeader("X-Requested-With", "XMLHttpRequest"), w.setRequestHeader("X-Webx-Locale", t.i18n.state.locale);
-        const u = ct();
-        u && w.setRequestHeader("X-XSRF-TOKEN", u), w.upload.addEventListener("progress", (r) => {
-          r.lengthComputable && s?.(Math.round(r.loaded / r.total * 100));
-        }), w.addEventListener("load", () => {
-          const r = w.response;
-          if (w.status >= 200 && w.status < 300 && r?.data) {
-            n(r.data);
+    file: (l) => a.http.get(`${i}/files/${l}`).then(n),
+    fileByPath: (l) => a.http.get(`${i}/files/by-path?path=${encodeURIComponent(l)}`).then(n).catch(() => null),
+    async upload(l, r, d) {
+      const v = new FormData();
+      return v.append("directory_id", String(l)), r.forEach((t) => v.append("files[]", t)), new Promise((t, x) => {
+        const y = new XMLHttpRequest();
+        y.open("POST", `${i}/files`), y.responseType = "json", y.withCredentials = !0, y.setRequestHeader("Accept", "application/json"), y.setRequestHeader("X-Requested-With", "XMLHttpRequest"), y.setRequestHeader("X-Webx-Locale", a.i18n.state.locale);
+        const s = ft();
+        s && y.setRequestHeader("X-XSRF-TOKEN", s), y.upload.addEventListener("progress", (u) => {
+          u.lengthComputable && d?.(Math.round(u.loaded / u.total * 100));
+        }), y.addEventListener("load", () => {
+          const u = y.response;
+          if (y.status >= 200 && y.status < 300 && u?.data) {
+            t(u.data);
             return;
           }
-          k(
-            Object.assign(new Error(r?.message ?? "Upload failed"), {
-              status: w.status,
-              body: r
+          x(
+            Object.assign(new Error(u?.message ?? "Upload failed"), {
+              status: y.status,
+              body: u
             })
           );
-        }), w.addEventListener("error", () => k(new Error("Upload failed"))), w.send(a);
+        }), y.addEventListener("error", () => x(new Error("Upload failed"))), y.send(v);
       });
     },
-    rename: (l, c) => t.http.patch(`${i}/files/${l}`, { name: c }).then(o),
-    move: (l, c) => t.http.post(`${i}/files/move`, { ids: l, directory_id: c }).then((s) => s.data.moved),
+    rename: (l, r) => a.http.patch(`${i}/files/${l}`, { name: r }).then(n),
+    move: (l, r) => a.http.post(`${i}/files/move`, { ids: l, directory_id: r }).then((d) => d.data.moved),
     // A POST for the batch, not a DELETE: the panel's own client sends no body on DELETE, and
     // a list of ids in a query string is a worse answer than an honest verb.
-    remove: (l) => t.http.post(`${i}/files/delete`, { ids: l }).then((c) => c.data.deleted),
-    removeOne: (l) => t.http.delete(`${i}/files/${l}`),
-    edit: (l, c) => t.http.post(`${i}/files/${l}/edit`, c).then(o),
-    copy: (l) => t.http.post(`${i}/files/${l}/copy`).then(o),
-    restoreOriginal: (l) => t.http.post(`${i}/files/${l}/restore-original`).then(o),
-    thumb(l, c, s, a = "cover") {
+    remove: (l) => a.http.post(`${i}/files/delete`, { ids: l }).then((r) => r.data.deleted),
+    removeOne: (l) => a.http.delete(`${i}/files/${l}`),
+    edit: (l, r) => a.http.post(`${i}/files/${l}/edit`, r).then(n),
+    copy: (l) => a.http.post(`${i}/files/${l}/copy`).then(n),
+    restoreOriginal: (l) => a.http.post(`${i}/files/${l}/restore-original`).then(n),
+    thumb(l, r, d, v = "cover") {
       if (!l.thumb)
         return null;
-      const n = new URL(l.thumb, window.location.origin);
-      return n.searchParams.set("w", String(c)), s && n.searchParams.set("h", String(s)), n.searchParams.set("fit", a), n.pathname + n.search;
+      const t = new URL(l.thumb, window.location.origin);
+      return t.searchParams.set("w", String(r)), d && t.searchParams.set("h", String(d)), t.searchParams.set("fit", v), t.pathname + t.search;
     }
   };
 }
-function ct() {
-  const t = document.cookie.split("; ").find((i) => i.startsWith("XSRF-TOKEN="));
-  return t ? decodeURIComponent(t.slice(11)) : null;
+function ft() {
+  const a = document.cookie.split("; ").find((i) => i.startsWith("XSRF-TOKEN="));
+  return a ? decodeURIComponent(a.slice(11)) : null;
 }
-function Re(t) {
+function Be(a) {
   const i = ["B", "KB", "MB", "GB", "TB"];
-  let o = t, l = 0;
-  for (; o >= 1024 && l < i.length - 1; )
-    o /= 1024, l++;
-  return `${o >= 10 || l === 0 ? Math.round(o) : o.toFixed(1)} ${i[l]}`;
+  let n = a, l = 0;
+  for (; n >= 1024 && l < i.length - 1; )
+    n /= 1024, l++;
+  return `${n >= 10 || l === 0 ? Math.round(n) : n.toFixed(1)} ${i[l]}`;
 }
-function mt(t) {
-  return t.split("/").pop() || t;
+function vt(a) {
+  return a.split("/").pop() || a;
 }
-const Te = /* @__PURE__ */ O({
+const ze = /* @__PURE__ */ S({
   __name: "DirectoryTree",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ q({
     directories: {}
   }, {
     selected: { default: null },
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ j(["move"], ["update:selected"]),
-  setup(t, { emit: i }) {
-    const o = t, l = I(t, "selected"), c = i, s = X("webx-media"), a = L([]), n = L([]);
-    K(
-      () => o.directories,
-      (r) => {
-        a.value = r.map(k), n.value = w(r);
+  emits: /* @__PURE__ */ q(["move"], ["update:selected"]),
+  setup(a, { emit: i }) {
+    const n = a, l = A(a, "selected"), r = i, d = H("webx-media"), v = R([]), t = R([]);
+    G(
+      () => n.directories,
+      (u) => {
+        v.value = u.map(x), t.value = y(u);
       },
       { immediate: !0, deep: !0 }
     );
-    function k(r) {
+    function x(u) {
       return {
-        ...r,
-        label: r.is_root ? s("manager.root") : r.title,
-        children: (r.children ?? []).map(k)
+        ...u,
+        label: u.is_root ? d("manager.root") : u.title,
+        children: (u.children ?? []).map(x)
       };
     }
-    function w(r) {
-      return r.flatMap((g) => [g.id, ...w(g.children ?? [])]);
+    function y(u) {
+      return u.flatMap((k) => [k.id, ...y(k.children ?? [])]);
     }
-    function u(r) {
-      const g = r.zone === "inside" ? r.target : r.parent;
-      g && c("move", r.node.id, g.id);
+    function s(u) {
+      const k = u.zone === "inside" ? u.target : u.parent;
+      k && r("move", u.node.id, k.id);
     }
-    return (r, g) => (b(), T(e(et), {
+    return (u, k) => (b(), T(e(at), {
       selected: l.value,
-      "onUpdate:selected": g[0] || (g[0] = (f) => l.value = f),
-      expanded: n.value,
-      "onUpdate:expanded": g[1] || (g[1] = (f) => n.value = f),
-      modelValue: a.value,
-      "onUpdate:modelValue": g[2] || (g[2] = (f) => a.value = f),
+      "onUpdate:selected": k[0] || (k[0] = (h) => l.value = h),
+      expanded: t.value,
+      "onUpdate:expanded": k[1] || (k[1] = (h) => t.value = h),
+      modelValue: v.value,
+      "onUpdate:modelValue": k[2] || (k[2] = (h) => v.value = h),
       class: "wx-media-tree",
       "node-key": "id",
       draggable: "",
       "show-lines": "",
-      onDrop: u
+      onDrop: s
     }, null, 8, ["selected", "expanded", "modelValue"]));
   }
-}), pt = /* @__PURE__ */ O({
+}), gt = /* @__PURE__ */ S({
   __name: "FileGrid",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ q({
     files: {},
     api: {},
     query: {},
@@ -134,79 +134,82 @@ const Te = /* @__PURE__ */ O({
     selected: { default: () => [] },
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ j(["open", "rename", "edit", "remove"], ["update:selected"]),
-  setup(t, { emit: i }) {
-    const o = t, l = I(t, "selected"), c = i, s = X("webx-media"), a = U(
-      () => o.query ? s("manager.empty-search", { query: o.query }) : s("manager.empty")
+  emits: /* @__PURE__ */ q(["open", "rename", "edit", "remove"], ["update:selected"]),
+  setup(a, { emit: i }) {
+    const n = a, l = A(a, "selected"), r = i, d = H("webx-media"), v = z(
+      () => n.query ? d("manager.empty-search", { query: n.query }) : d("manager.empty")
     );
-    function n() {
-      Q.success(s("manager.link-copied"));
+    function t() {
+      J.success(d("manager.link-copied"));
     }
-    function k(w) {
-      const u = document.createElement("textarea");
-      u.value = w.url, u.setAttribute("readonly", ""), u.style.position = "fixed", u.style.opacity = "0", document.body.appendChild(u), u.select();
-      let r = !1;
+    function x(y) {
+      const s = document.createElement("textarea");
+      s.value = y.url, s.setAttribute("readonly", ""), s.style.position = "fixed", s.style.opacity = "0", document.body.appendChild(s), s.select();
+      let u = !1;
       try {
-        r = document.execCommand("copy");
+        u = document.execCommand("copy");
       } catch {
-        r = !1;
+        u = !1;
       }
-      if (u.remove(), r) {
-        n();
+      if (s.remove(), u) {
+        t();
         return;
       }
-      Q.danger(`${s("errors.copy")} ${w.url}`, { duration: 0 });
+      J.danger(`${d("errors.copy")} ${y.url}`, { duration: 0 });
     }
-    return (w, u) => {
-      const r = Ke("wx-select");
-      return t.files.length > 0 ? (b(), T(e(tt), {
+    return (y, s) => {
+      const u = Ge("wx-select");
+      return a.files.length > 0 ? (b(), T(e(it), {
         key: 0,
         modelValue: l.value,
-        "onUpdate:modelValue": u[0] || (u[0] = (g) => l.value = g),
+        "onUpdate:modelValue": s[0] || (s[0] = (k) => l.value = k),
         class: "wx-media-grid",
-        multiple: !t.single
+        multiple: !a.single
       }, {
-        default: x(({ isSelected: g }) => [
-          (b(!0), W(se, null, re(t.files, (f) => je((b(), T(e(Ue), {
-            key: f.id,
+        default: w(({ isSelected: k }) => [
+          (b(!0), L(ce, null, me(a.files, (h) => Ye((b(), T(e(Le), {
+            key: h.id,
             class: "wx-media-grid__card",
-            name: f.name,
-            url: f.url,
-            thumbnail: t.api.thumb(f, 320, 320) ?? void 0,
-            type: f.mime,
-            selected: g(f.id),
+            name: h.name,
+            url: h.url,
+            thumbnail: a.api.thumb(h, 320, 320) ?? void 0,
+            type: h.mime,
+            selected: k(h.id),
             renamable: "",
-            editable: f.editable,
+            editable: h.editable,
             removable: "",
             copyable: "",
-            "rename-label": e(s)("manager.rename"),
-            "edit-label": e(s)("manager.edit"),
-            "remove-label": e(s)("manager.delete"),
-            "remove-confirm-text": e(s)("dialogs.delete-file", { name: f.name }),
-            "cancel-label": e(s)("manager.cancel"),
-            "save-label": e(s)("manager.save"),
-            "copy-label": e(s)("manager.copy-link"),
-            "copied-label": e(s)("manager.link-copied"),
-            onRename: (d) => c("rename", f, d),
-            onEdit: (d) => c("edit", f),
-            onRemove: (d) => c("remove", f),
-            onCopy: n,
-            onCopyError: (d) => k(f),
-            onDblclick: (d) => c("open", f)
-          }, null, 8, ["name", "url", "thumbnail", "type", "selected", "editable", "rename-label", "edit-label", "remove-label", "remove-confirm-text", "cancel-label", "save-label", "copy-label", "copied-label", "onRename", "onEdit", "onRemove", "onCopyError", "onDblclick"])), [
-            [r, f.id]
+            "actions-menu": "",
+            "rename-label": e(d)("manager.rename"),
+            "edit-label": e(d)("manager.edit"),
+            "remove-label": e(d)("manager.delete"),
+            "remove-confirm-text": e(d)("dialogs.delete-file", { name: h.name }),
+            "cancel-label": e(d)("manager.cancel"),
+            "save-label": e(d)("manager.save"),
+            "download-url": h.source ?? h.url,
+            "copy-label": e(d)("manager.copy-link"),
+            "download-label": e(d)("manager.download"),
+            "copied-label": e(d)("manager.link-copied"),
+            onRename: (o) => r("rename", h, o),
+            onEdit: (o) => r("edit", h),
+            onRemove: (o) => r("remove", h),
+            onCopy: t,
+            onCopyError: (o) => x(h),
+            onDblclick: (o) => r("open", h)
+          }, null, 8, ["name", "url", "thumbnail", "type", "selected", "editable", "rename-label", "edit-label", "remove-label", "remove-confirm-text", "cancel-label", "save-label", "download-url", "copy-label", "download-label", "copied-label", "onRename", "onEdit", "onRemove", "onCopyError", "onDblclick"])), [
+            [u, h.id]
           ])), 128))
         ]),
         _: 1
-      }, 8, ["modelValue", "multiple"])) : (b(), T(e(lt), {
+      }, 8, ["modelValue", "multiple"])) : (b(), T(e(nt), {
         key: 1,
-        description: a.value
+        description: v.value
       }, null, 8, ["description"]));
     };
   }
-}), ft = { class: "wx-media-toolbar" }, vt = /* @__PURE__ */ O({
+}), yt = { class: "wx-media-toolbar" }, ht = /* @__PURE__ */ S({
   __name: "MediaToolbar",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ q({
     canUpload: { type: Boolean },
     canManage: { type: Boolean },
     selected: {},
@@ -220,155 +223,155 @@ const Te = /* @__PURE__ */ O({
     sort: { default: "-created_at" },
     sortModifiers: {}
   }),
-  emits: /* @__PURE__ */ j(["upload", "move", "remove", "folders"], ["update:search", "update:type", "update:sort"]),
-  setup(t, { emit: i }) {
-    const o = t, l = I(t, "search"), c = I(t, "type"), s = I(t, "sort"), a = i, n = X("webx-media"), k = U(() => [
-      { value: "all", label: n("manager.all-types") },
-      ...["image", "video", "audio", "document", "other"].map((g) => ({
-        value: g,
-        label: n(`manager.${g}`)
+  emits: /* @__PURE__ */ q(["upload", "move", "remove", "folders"], ["update:search", "update:type", "update:sort"]),
+  setup(a, { emit: i }) {
+    const n = a, l = A(a, "search"), r = A(a, "type"), d = A(a, "sort"), v = i, t = H("webx-media"), x = z(() => [
+      { value: "all", label: t("manager.all-types") },
+      ...["image", "video", "audio", "document", "other"].map((k) => ({
+        value: k,
+        label: t(`manager.${k}`)
       }))
-    ]), w = U(() => [
-      { value: "-created_at", label: n("manager.sort-newest") },
-      { value: "created_at", label: n("manager.sort-oldest") },
-      { value: "name", label: n("manager.sort-name") },
-      { value: "-size", label: n("manager.sort-size") }
-    ]), u = U(() => k.value.find((g) => g.value === c.value)?.label ?? ""), r = U(() => w.value.find((g) => g.value === s.value)?.label ?? "");
-    return (g, f) => (b(), W("header", ft, [
-      t.compact ? (b(), T(e(D), {
+    ]), y = z(() => [
+      { value: "-created_at", label: t("manager.sort-newest") },
+      { value: "created_at", label: t("manager.sort-oldest") },
+      { value: "name", label: t("manager.sort-name") },
+      { value: "-size", label: t("manager.sort-size") }
+    ]), s = z(() => x.value.find((k) => k.value === r.value)?.label ?? ""), u = z(() => y.value.find((k) => k.value === d.value)?.label ?? "");
+    return (k, h) => (b(), L("header", yt, [
+      a.compact ? (b(), T(e(B), {
         key: 0,
-        icon: "folder",
-        title: e(n)("manager.folders"),
+        icon: "sidebar",
+        title: e(t)("manager.folders"),
         size: "sm",
-        onClick: f[0] || (f[0] = (d) => a("folders"))
-      }, null, 8, ["title"])) : R("", !0),
-      v(e(Z), {
+        onClick: h[0] || (h[0] = (o) => v("folders"))
+      }, null, 8, ["title"])) : D("", !0),
+      g(e(Z), {
         modelValue: l.value,
-        "onUpdate:modelValue": f[1] || (f[1] = (d) => l.value = d),
+        "onUpdate:modelValue": h[1] || (h[1] = (o) => l.value = o),
         class: "wx-media-toolbar__search",
-        placeholder: e(n)("manager.search"),
+        placeholder: e(t)("manager.search"),
         clearable: "",
         size: "sm"
       }, null, 8, ["modelValue", "placeholder"]),
-      t.fixedType ? R("", !0) : (b(), T(e(Ce), { key: 1 }, {
-        trigger: x(() => [
-          v(e(D), {
+      a.fixedType ? D("", !0) : (b(), T(e(Ve), { key: 1 }, {
+        trigger: w(() => [
+          g(e(B), {
             icon: "filter",
-            title: `${e(n)("manager.all-types")}: ${u.value}`,
+            title: `${e(t)("manager.all-types")}: ${s.value}`,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: x(() => [
-          (b(!0), W(se, null, re(k.value, (d) => (b(), T(e(Ve), {
-            key: String(d.value),
-            active: d.value === c.value,
-            onClick: ($) => c.value = d.value
+        default: w(() => [
+          (b(!0), L(ce, null, me(x.value, (o) => (b(), T(e(Te), {
+            key: String(o.value),
+            active: o.value === r.value,
+            onClick: ($) => r.value = o.value
           }, {
-            default: x(() => [
-              N(z(d.label), 1)
+            default: w(() => [
+              O(U(o.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       })),
-      v(e(Ce), null, {
-        trigger: x(() => [
-          v(e(D), {
+      g(e(Ve), null, {
+        trigger: w(() => [
+          g(e(B), {
             icon: "arrow-down",
-            title: r.value,
+            title: u.value,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: x(() => [
-          (b(!0), W(se, null, re(w.value, (d) => (b(), T(e(Ve), {
-            key: d.value,
-            active: d.value === s.value,
-            onClick: ($) => s.value = d.value
+        default: w(() => [
+          (b(!0), L(ce, null, me(y.value, (o) => (b(), T(e(Te), {
+            key: o.value,
+            active: o.value === d.value,
+            onClick: ($) => d.value = o.value
           }, {
-            default: x(() => [
-              N(z(d.label), 1)
+            default: w(() => [
+              O(U(o.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       }),
-      t.canUpload ? (b(), T(e(D), {
+      a.canUpload ? (b(), T(e(B), {
         key: 2,
         type: "upload",
-        title: e(n)("manager.upload"),
+        title: e(t)("manager.upload"),
         size: "sm",
-        onClick: f[2] || (f[2] = (d) => a("upload"))
-      }, null, 8, ["title"])) : R("", !0),
-      t.canManage ? (b(), T(e(le), {
+        onClick: h[2] || (h[2] = (o) => v("upload"))
+      }, null, 8, ["title"])) : D("", !0),
+      a.canManage ? (b(), T(e(le), {
         key: 3,
         size: "sm"
       }, {
-        default: x(() => [
-          v(e(D), {
-            icon: "folder",
-            title: e(n)("manager.move"),
-            disabled: o.selected === 0,
-            onClick: f[3] || (f[3] = (d) => a("move"))
+        default: w(() => [
+          g(e(B), {
+            icon: "folder-move",
+            title: e(t)("manager.move"),
+            disabled: n.selected === 0,
+            onClick: h[3] || (h[3] = (o) => v("move"))
           }, null, 8, ["title", "disabled"]),
-          v(e(D), {
+          g(e(B), {
             type: "remove",
-            title: e(n)("manager.delete"),
-            disabled: o.selected === 0,
-            onClick: f[4] || (f[4] = (d) => a("remove"))
+            title: e(t)("manager.delete"),
+            disabled: n.selected === 0,
+            onClick: h[4] || (h[4] = (o) => v("remove"))
           }, null, 8, ["title", "disabled"])
         ]),
         _: 1
-      })) : R("", !0)
+      })) : D("", !0)
     ]));
   }
-}), gt = /* @__PURE__ */ O({
+}), bt = /* @__PURE__ */ S({
   __name: "MoveDialog",
   props: {
     directories: {},
     from: {},
     count: {}
   },
-  setup(t) {
-    const i = t, { open: o, resolve: l, dismiss: c } = ve(), s = X("webx-media"), a = U(
-      () => k(i.directories).filter((w) => w.value !== i.from)
-    ), n = L(a.value[0]?.value ?? null);
-    function k(w) {
-      return w.flatMap((u) => [
+  setup(a) {
+    const i = a, { open: n, resolve: l, dismiss: r } = ye(), d = H("webx-media"), v = z(
+      () => x(i.directories).filter((y) => y.value !== i.from)
+    ), t = R(v.value[0]?.value ?? null);
+    function x(y) {
+      return y.flatMap((s) => [
         {
-          value: u.id,
+          value: s.id,
           // Indented, so the tree is still readable once it is a flat list.
-          label: " ".repeat(u.depth * 3) + (u.is_root ? s("manager.root") : u.title)
+          label: " ".repeat(s.depth * 3) + (s.is_root ? d("manager.root") : s.title)
         },
-        ...k(u.children ?? [])
+        ...x(s.children ?? [])
       ]);
     }
-    return (w, u) => (b(), T(e(ge), {
-      open: e(o),
-      "onUpdate:open": u[3] || (u[3] = (r) => me(o) ? o.value = r : null),
-      title: e(s)("manager.move-to"),
+    return (y, s) => (b(), T(e(he), {
+      open: e(n),
+      "onUpdate:open": s[3] || (s[3] = (u) => ve(n) ? n.value = u : null),
+      title: e(d)("manager.move-to"),
       width: 420
     }, {
-      footer: x(() => [
-        v(e(ye), { size: "sm" }, {
-          default: x(() => [
-            v(e(H), {
+      footer: w(() => [
+        g(e(be), { size: "sm" }, {
+          default: w(() => [
+            g(e(I), {
               variant: "outline",
-              onClick: u[1] || (u[1] = (r) => e(c)())
+              onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
-              default: x(() => [
-                N(z(e(s)("manager.cancel")), 1)
+              default: w(() => [
+                O(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            v(e(H), {
+            g(e(I), {
               type: "primary",
-              disabled: n.value === null,
-              onClick: u[2] || (u[2] = (r) => e(l)(n.value))
+              disabled: t.value === null,
+              onClick: s[2] || (s[2] = (u) => e(l)(t.value))
             }, {
-              default: x(() => [
-                N(z(e(s)("manager.move")), 1)
+              default: w(() => [
+                O(U(e(d)("manager.move")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -376,17 +379,17 @@ const Te = /* @__PURE__ */ O({
           _: 1
         })
       ]),
-      default: x(() => [
-        v(e(at), {
-          modelValue: n.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (r) => n.value = r),
-          options: a.value
+      default: w(() => [
+        g(e(ot), {
+          modelValue: t.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (u) => t.value = u),
+          options: v.value
         }, null, 8, ["modelValue", "options"])
       ]),
       _: 1
     }, 8, ["open", "title"]));
   }
-}), yt = /* @__PURE__ */ O({
+}), wt = /* @__PURE__ */ S({
   __name: "NameDialog",
   props: {
     title: {},
@@ -394,40 +397,40 @@ const Te = /* @__PURE__ */ O({
     value: { default: "" },
     confirmText: { default: void 0 }
   },
-  setup(t) {
-    const i = t, { open: o, resolve: l, dismiss: c } = ve(), s = X("webx-media"), a = L(i.value), n = de("input");
+  setup(a) {
+    const i = a, { open: n, resolve: l, dismiss: r } = ye(), d = H("webx-media"), v = R(i.value), t = oe("input");
     Fe(async () => {
-      await Ge(), n.value?.querySelector("input")?.focus();
+      await Je(), t.value?.querySelector("input")?.focus();
     });
-    function k() {
-      const w = a.value.trim();
-      w !== "" && l(w);
+    function x() {
+      const y = v.value.trim();
+      y !== "" && l(y);
     }
-    return (w, u) => (b(), T(e(ge), {
-      open: e(o),
-      "onUpdate:open": u[2] || (u[2] = (r) => me(o) ? o.value = r : null),
-      title: t.title,
+    return (y, s) => (b(), T(e(he), {
+      open: e(n),
+      "onUpdate:open": s[2] || (s[2] = (u) => ve(n) ? n.value = u : null),
+      title: a.title,
       width: 420
     }, {
-      footer: x(() => [
-        v(e(ye), { size: "sm" }, {
-          default: x(() => [
-            v(e(H), {
+      footer: w(() => [
+        g(e(be), { size: "sm" }, {
+          default: w(() => [
+            g(e(I), {
               variant: "outline",
-              onClick: u[1] || (u[1] = (r) => e(c)())
+              onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
-              default: x(() => [
-                N(z(e(s)("manager.cancel")), 1)
+              default: w(() => [
+                O(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            v(e(H), {
+            g(e(I), {
               type: "primary",
-              disabled: a.value.trim() === "",
-              onClick: k
+              disabled: v.value.trim() === "",
+              onClick: x
             }, {
-              default: x(() => [
-                N(z(t.confirmText ?? e(s)("manager.save")), 1)
+              default: w(() => [
+                O(U(a.confirmText ?? e(d)("manager.save")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -435,24 +438,24 @@ const Te = /* @__PURE__ */ O({
           _: 1
         })
       ]),
-      default: x(() => [
-        M("div", {
+      default: w(() => [
+        V("div", {
           ref_key: "input",
-          ref: n
+          ref: t
         }, [
-          v(e(Z), {
-            modelValue: a.value,
-            "onUpdate:modelValue": u[0] || (u[0] = (r) => a.value = r),
-            placeholder: t.label ?? e(s)("manager.folder-name"),
-            "aria-label": t.label ?? e(s)("manager.folder-name"),
-            onKeyup: Ye(k, ["enter"])
+          g(e(Z), {
+            modelValue: v.value,
+            "onUpdate:modelValue": s[0] || (s[0] = (u) => v.value = u),
+            placeholder: a.label ?? e(d)("manager.folder-name"),
+            "aria-label": a.label ?? e(d)("manager.folder-name"),
+            onKeyup: Qe(x, ["enter"])
           }, null, 8, ["modelValue", "placeholder", "aria-label"])
         ], 512)
       ]),
       _: 1
     }, 8, ["open", "title"]));
   }
-}), ht = {
+}), xt = {
   module: {
     title: "Files"
   },
@@ -488,6 +491,7 @@ const Te = /* @__PURE__ */ O({
     folders: "Folders",
     edit: "Edit",
     "copy-link": "Copy the link",
+    download: "Download",
     "link-copied": "Link copied",
     "status-files": "Files: :count",
     "status-selected": "selected: :count",
@@ -543,6 +547,7 @@ const Te = /* @__PURE__ */ O({
     "delete-files-title": "Delete :count file(s)?",
     "delete-files-text": "Anywhere they are already used, they will stop opening.",
     "delete-folder-title": "Delete the folder :title?",
+    "delete-folder-text": "It goes for good, and so does whatever is inside it.",
     "delete-folder-contents": "It holds :files file(s) and :directories folder(s).",
     "delete-folder-warning": "Everything inside goes too, and pictures already placed in content will stop opening.",
     confirm: "Delete",
@@ -581,374 +586,384 @@ const Te = /* @__PURE__ */ O({
       other: "other files"
     }
   }
-}, ze = /* @__PURE__ */ new WeakSet();
-function be() {
+}, Ue = /* @__PURE__ */ new WeakSet();
+function re() {
   try {
-    const { i18n: t } = fe();
-    ze.has(t) || (t.defaults("webx-media", ht), ze.add(t));
+    const { i18n: a } = se();
+    Ue.has(a) || (a.defaults("webx-media", xt), Ue.add(a));
   } catch {
   }
 }
-const bt = {
+const kt = {
   key: 0,
   class: "wx-media__folders"
-}, wt = { class: "wx-media__files" }, xt = ["accept"], kt = { class: "wx-media__status" }, $t = { key: 0 }, _t = { class: "wx-media__drawer" }, De = /* @__PURE__ */ O({
+}, $t = { class: "wx-media__files" }, _t = ["accept"], Ct = { class: "wx-media__status" }, Mt = { key: 0 }, Vt = { class: "wx-media__drawer" }, Se = /* @__PURE__ */ S({
   __name: "MediaManager",
-  props: {
+  props: /* @__PURE__ */ q({
     picking: { type: Boolean, default: !1 },
     accept: { default: null },
     multiple: { type: Boolean, default: !1 },
-    max: { default: null }
-  },
-  emits: ["pick", "selection"],
-  setup(t, { emit: i }) {
-    const o = t, l = i, c = fe(), s = he(c);
-    be();
-    const a = X("webx-media");
-    function n() {
+    max: { default: null },
+    inPage: { type: Boolean, default: !1 }
+  }, {
+    type: { default: "all" },
+    typeModifiers: {}
+  }),
+  emits: /* @__PURE__ */ q(["pick", "selection"], ["update:type"]),
+  setup(a, { expose: i, emit: n }) {
+    const l = a, r = n, d = se(), v = we(d);
+    re();
+    const t = H("webx-media"), x = et();
+    function y() {
       return {
-        title: a("editor.title"),
-        saveLabel: a("editor.save"),
-        cancelLabel: a("editor.cancel"),
-        resetLabel: a("editor.reset"),
-        rotateLeftLabel: a("editor.rotate-left"),
-        rotateRightLabel: a("editor.rotate-right"),
-        flipHorizontalLabel: a("editor.flip-horizontal"),
-        flipVerticalLabel: a("editor.flip-vertical"),
-        ratioLabel: a("editor.ratio"),
-        cropLabel: a("editor.crop"),
-        outputLabel: a("editor.output"),
-        outputHint: a("editor.output-hint"),
-        widthLabel: a("editor.width"),
-        heightLabel: a("editor.height"),
-        freeLabel: a("editor.free"),
-        originalLabel: a("editor.original"),
-        errorText: a("editor.error")
+        title: t("editor.title"),
+        saveLabel: t("editor.save"),
+        cancelLabel: t("editor.cancel"),
+        resetLabel: t("editor.reset"),
+        rotateLeftLabel: t("editor.rotate-left"),
+        rotateRightLabel: t("editor.rotate-right"),
+        flipHorizontalLabel: t("editor.flip-horizontal"),
+        flipVerticalLabel: t("editor.flip-vertical"),
+        ratioLabel: t("editor.ratio"),
+        cropLabel: t("editor.crop"),
+        outputLabel: t("editor.output"),
+        outputHint: t("editor.output-hint"),
+        widthLabel: t("editor.width"),
+        heightLabel: t("editor.height"),
+        freeLabel: t("editor.free"),
+        originalLabel: t("editor.original"),
+        errorText: t("editor.error")
       };
     }
-    const k = de("root"), w = it(k), u = U(() => w.value > 0 && w.value < 640), r = L([]), g = L(null), f = L(null), d = L([]), $ = L(""), B = L(o.accept ?? "all");
-    K(
-      () => o.accept,
-      (m) => {
-        B.value = m ?? "all";
+    const s = oe("root"), u = st(s), k = z(() => u.value > 0 && u.value < 640), h = R([]), o = R(null), $ = R(null), F = R([]), K = R(""), X = A(a, "type");
+    l.accept && (X.value = l.accept), G(
+      () => l.accept,
+      (p) => {
+        X.value = p ?? "all";
       }
     );
-    const Y = L("-created_at"), ee = L(!1), P = L(!1), ie = de("picker"), te = U(() => f.value?.data ?? []), G = U(() => c.can("media.manage")), ne = U(() => c.can("media.upload") || G.value), E = U(() => qe(g.value)), oe = U(() => o.picking && !o.multiple);
-    K(d, (m) => {
-      if (o.max !== null && o.max > 0 && m.length > o.max) {
-        d.value = m.slice(0, o.max);
+    const N = R("-created_at"), ee = R(!1), j = R(!1), te = oe("picker"), ie = z(() => $.value?.data ?? []), Q = z(() => d.can("media.manage")), de = z(() => d.can("media.upload") || Q.value), E = z(() => He(o.value)), ne = z(() => l.picking && !l.multiple);
+    G(F, (p) => {
+      if (l.max !== null && l.max > 0 && p.length > l.max) {
+        F.value = p.slice(0, l.max);
         return;
       }
-      l(
+      r(
         "selection",
-        te.value.filter((p) => m.includes(p.id))
+        ie.value.filter((f) => p.includes(f.id))
       );
-    }), Fe(A), K([g, B, Y], () => S(1)), K(
-      $,
-      He(() => S(1), 300)
-    ), K(u, (m) => {
-      m || (P.value = !1);
+    }), Fe(c), G([o, X, N], () => m(1)), G(
+      K,
+      Ke(() => m(1), 300)
+    ), G(k, (p) => {
+      p || (j.value = !1);
     });
-    async function A() {
-      r.value = await s.directories(), g.value ??= r.value[0]?.id ?? null, await S(1);
+    async function c() {
+      h.value = await v.directories(), o.value ??= h.value[0]?.id ?? null, await m(1);
     }
-    async function S(m = f.value?.meta.current_page ?? 1) {
+    async function m(p = $.value?.meta.current_page ?? 1) {
       ee.value = !0;
       try {
-        f.value = await s.files({
-          directory_id: $.value ? null : g.value,
-          q: $.value,
-          type: B.value === "all" ? null : B.value,
-          sort: Y.value,
-          page: m
-        }), d.value = [];
+        $.value = await v.files({
+          directory_id: K.value ? null : o.value,
+          q: K.value,
+          type: X.value === "all" ? null : X.value,
+          sort: N.value,
+          page: p
+        }), F.value = [];
       } finally {
         ee.value = !1;
       }
     }
-    function y() {
-      ie.value?.click();
+    function M() {
+      te.value?.click();
     }
-    async function h(m) {
-      const p = m.target, _ = Array.from(p.files ?? []);
-      if (p.value = "", !(_.length === 0 || g.value === null))
+    async function C(p) {
+      const f = p.target, _ = Array.from(f.files ?? []);
+      if (f.value = "", !(_.length === 0 || o.value === null))
         try {
-          const q = await s.upload(g.value, _), J = q.filter((Xe) => Xe.duplicate).length;
-          q.length > J && Q.success(a("manager.uploaded", { count: q.length - J })), J > 0 && Q.info(a("manager.duplicate-added")), await Promise.all([A(), S(1)]);
-        } catch (q) {
-          Q.danger(_e(q) ?? a("errors.upload"));
+          const P = await v.upload(o.value, _), Y = P.filter((je) => je.duplicate).length;
+          P.length > Y && J.success(t("manager.uploaded", { count: P.length - Y })), Y > 0 && J.info(t("manager.duplicate-added")), await Promise.all([c(), m(1)]);
+        } catch (P) {
+          J.danger(x(P, t("errors.upload")));
         }
     }
-    const V = ae(yt);
-    async function C() {
-      const m = await V({
-        title: a("manager.new-folder"),
-        confirmText: a("manager.new-folder")
+    const W = ae(wt);
+    async function $e() {
+      const p = await W({
+        title: t("manager.new-folder"),
+        confirmText: t("manager.new-folder")
       });
-      m === void 0 || g.value === null || (await s.createDirectory(g.value, m), await A());
+      p === void 0 || o.value === null || (await v.createDirectory(o.value, p), await c());
     }
-    async function F() {
-      const m = E.value;
-      if (!m || m.is_root)
+    async function _e() {
+      const p = E.value;
+      if (!p || p.is_root)
         return;
-      const p = await V({
-        title: a("manager.rename"),
-        value: m.title,
-        confirmText: a("manager.save")
+      const f = await W({
+        title: t("manager.rename"),
+        value: p.title,
+        confirmText: t("manager.save")
       });
-      p !== void 0 && (await s.renameDirectory(m.id, p), await A());
+      f !== void 0 && (await v.renameDirectory(p.id, f), await c());
     }
-    async function ke() {
-      const m = E.value;
-      if (!(!m || m.is_root)) {
+    async function Ce() {
+      const p = E.value;
+      if (!(!p || p.is_root || !await ue({
+        title: t("dialogs.delete-folder-title", { title: p.title }),
+        message: t("dialogs.delete-folder-text"),
+        confirmText: t("dialogs.confirm"),
+        cancelText: t("manager.cancel"),
+        tone: "danger"
+      }))) {
         try {
-          await s.deleteDirectory(m.id);
-        } catch (p) {
-          const _ = Ie(p);
-          if (!_)
-            throw p;
-          if (!await Me({
-            title: a("dialogs.delete-folder-title", { title: m.title }),
-            message: `${a("dialogs.delete-folder-contents", _)} ${a("dialogs.delete-folder-warning")}`,
-            confirmText: a("dialogs.confirm"),
-            cancelText: a("manager.cancel"),
+          await v.deleteDirectory(p.id);
+        } catch (_) {
+          const P = Xe(_);
+          if (!P) {
+            J.danger(x(_));
+            return;
+          }
+          if (!await ue({
+            title: t("dialogs.delete-folder-title", { title: p.title }),
+            message: `${t("dialogs.delete-folder-contents", P)} ${t("dialogs.delete-folder-warning")}`,
+            confirmText: t("dialogs.confirm"),
+            cancelText: t("manager.cancel"),
             tone: "danger"
           }))
             return;
-          await s.deleteDirectory(m.id, !0);
+          await v.deleteDirectory(p.id, !0);
         }
-        g.value = null, await A();
+        o.value = null, await c();
       }
     }
-    async function $e(m, p) {
+    async function Me(p, f) {
       try {
-        await s.moveDirectory(m, p);
+        await v.moveDirectory(p, f);
       } catch (_) {
-        Q.danger(_e(_) ?? a("errors.directory-into-itself"));
+        J.danger(x(_, t("errors.directory-into-itself")));
       }
-      await A();
+      await c();
     }
-    const Be = ae(gt);
-    async function Se() {
-      const m = await Be({
-        directories: r.value,
-        from: g.value,
-        count: d.value.length
+    const Ee = ae(bt);
+    async function Pe() {
+      const p = await Ee({
+        directories: h.value,
+        from: o.value,
+        count: F.value.length
       });
-      m !== void 0 && (await s.move([...d.value], m), await Promise.all([A(), S()]));
+      p !== void 0 && (await v.move([...F.value], p), await Promise.all([c(), m()]));
     }
     async function Oe() {
-      const m = [...d.value];
-      await Me({
-        title: a("dialogs.delete-files-title", { count: m.length }),
-        message: a("dialogs.delete-files-text"),
-        confirmText: a("dialogs.confirm"),
-        cancelText: a("manager.cancel"),
+      const p = [...F.value];
+      await ue({
+        title: t("dialogs.delete-files-title", { count: p.length }),
+        message: t("dialogs.delete-files-text"),
+        confirmText: t("dialogs.confirm"),
+        cancelText: t("manager.cancel"),
         tone: "danger"
-      }) && (await s.remove(m), await Promise.all([A(), S()]));
+      }) && (await v.remove(p), await Promise.all([c(), m()]));
     }
-    async function Ee(m, p) {
-      await s.rename(m.id, p), await S();
+    async function Ae(p, f) {
+      await v.rename(p.id, f), await m();
     }
-    async function Pe(m) {
-      await s.removeOne(m.id), await Promise.all([A(), S()]);
+    async function Ne(p) {
+      await v.removeOne(p.id), await Promise.all([c(), m()]);
     }
-    async function Ae(m) {
-      const p = await st({
-        src: m.source ?? m.url,
-        fileName: m.file_name,
+    async function qe(p) {
+      const f = await ut({
+        src: p.source ?? p.url,
+        fileName: p.file_name,
         filters: !1,
         // The editor is a component of the design system: its words are props with English
         // defaults, not lines in the panel's dictionary. Whoever opens it is the one who knows
         // what language the panel is being read in.
-        ...n()
+        ...y()
       });
-      p && (await s.edit(m.id, {
+      f && (await v.edit(p.id, {
         // The editor's frame is read against the picture as it is on screen — already turned — and
         // the server applies the operations in that order for the same reason.
-        crop: p.crop,
-        rotate: (p.rotation % 360 + 360) % 360,
-        flip: p.flipX ? "horizontal" : p.flipY ? "vertical" : void 0,
-        resize: { width: p.width, height: p.height }
-      }), await S());
+        crop: f.crop,
+        rotate: (f.rotation % 360 + 360) % 360,
+        flip: f.flipX ? "horizontal" : f.flipY ? "vertical" : void 0,
+        resize: { width: f.width, height: f.height }
+      }), await m());
     }
-    function Ne(m) {
-      o.multiple || l("pick", m);
+    function Ie(p) {
+      l.multiple || r("pick", p);
     }
-    function qe(m) {
-      const p = (_) => {
-        for (const q of _) {
-          if (q.id === m)
-            return q;
-          const J = p(q.children ?? []);
-          if (J)
-            return J;
+    function He(p) {
+      const f = (_) => {
+        for (const P of _) {
+          if (P.id === p)
+            return P;
+          const Y = f(P.children ?? []);
+          if (Y)
+            return Y;
         }
         return null;
       };
-      return m === null ? null : p(r.value);
-    }
-    function Ie(m) {
-      const p = m?.body;
-      return p?.code === "directory_not_empty" ? p.counts ?? null : null;
+      return p === null ? null : f(h.value);
     }
-    function _e(m) {
-      return m?.message ?? null;
+    function Xe(p) {
+      const f = p?.body;
+      return f?.code === "directory_not_empty" ? f.counts ?? null : null;
     }
-    function He(m, p) {
+    i({ upload: M });
+    function Ke(p, f) {
       let _;
       return () => {
-        clearTimeout(_), _ = setTimeout(m, p);
+        clearTimeout(_), _ = setTimeout(p, f);
       };
     }
-    return (m, p) => (b(), W("div", {
+    return (p, f) => (b(), L("div", {
       ref_key: "root",
-      ref: k,
-      class: ue(["wx-media", { "wx-media--compact": u.value }])
+      ref: s,
+      class: pe(["wx-media", { "wx-media--compact": k.value }])
     }, [
-      u.value ? R("", !0) : (b(), W("aside", bt, [
-        v(Te, {
-          selected: g.value,
-          "onUpdate:selected": p[0] || (p[0] = (_) => g.value = _),
-          directories: r.value,
-          onMove: $e
+      k.value ? D("", !0) : (b(), L("aside", kt, [
+        g(ze, {
+          selected: o.value,
+          "onUpdate:selected": f[0] || (f[0] = (_) => o.value = _),
+          directories: h.value,
+          onMove: Me
         }, null, 8, ["selected", "directories"]),
-        G.value ? (b(), T(e(le), {
+        Q.value ? (b(), T(e(le), {
           key: 0,
           size: "sm",
           align: "start"
         }, {
-          default: x(() => [
-            v(e(D), {
+          default: w(() => [
+            g(e(B), {
               type: "add",
-              title: e(a)("manager.new-folder"),
-              onClick: C
+              title: e(t)("manager.new-folder"),
+              onClick: $e
             }, null, 8, ["title"]),
-            v(e(D), {
+            g(e(B), {
               type: "edit",
-              title: e(a)("manager.rename"),
+              title: e(t)("manager.rename"),
               disabled: !E.value || E.value.is_root,
-              onClick: F
+              onClick: _e
             }, null, 8, ["title", "disabled"]),
-            v(e(D), {
+            g(e(B), {
               type: "remove",
-              title: e(a)("manager.delete"),
+              title: e(t)("manager.delete"),
               disabled: !E.value || E.value.is_root,
-              onClick: ke
+              onClick: Ce
             }, null, 8, ["title", "disabled"])
           ]),
           _: 1
-        })) : R("", !0)
+        })) : D("", !0)
       ])),
-      M("section", wt, [
-        v(vt, {
-          search: $.value,
-          "onUpdate:search": p[1] || (p[1] = (_) => $.value = _),
-          type: B.value,
-          "onUpdate:type": p[2] || (p[2] = (_) => B.value = _),
-          sort: Y.value,
-          "onUpdate:sort": p[3] || (p[3] = (_) => Y.value = _),
-          "can-upload": ne.value,
-          "fixed-type": t.accept !== null,
-          "can-manage": G.value,
-          selected: d.value.length,
-          compact: u.value,
-          onUpload: y,
-          onMove: Se,
+      V("section", $t, [
+        g(ht, {
+          search: K.value,
+          "onUpdate:search": f[1] || (f[1] = (_) => K.value = _),
+          type: X.value,
+          "onUpdate:type": f[2] || (f[2] = (_) => X.value = _),
+          sort: N.value,
+          "onUpdate:sort": f[3] || (f[3] = (_) => N.value = _),
+          "can-upload": de.value && !a.inPage,
+          "fixed-type": a.accept !== null || a.inPage,
+          "can-manage": Q.value,
+          selected: F.value.length,
+          compact: k.value,
+          onUpload: M,
+          onMove: Pe,
           onRemove: Oe,
-          onFolders: p[4] || (p[4] = (_) => P.value = !0)
+          onFolders: f[4] || (f[4] = (_) => j.value = !0)
         }, null, 8, ["search", "type", "sort", "can-upload", "fixed-type", "can-manage", "selected", "compact"]),
-        M("input", {
+        V("input", {
           ref_key: "picker",
-          ref: ie,
+          ref: te,
           type: "file",
           multiple: "",
           hidden: "",
-          accept: t.accept === null ? void 0 : `${t.accept}/*`,
-          onChange: h
-        }, null, 40, xt),
-        v(pt, {
-          selected: d.value,
-          "onUpdate:selected": p[5] || (p[5] = (_) => d.value = _),
-          files: te.value,
-          api: e(s),
-          query: $.value,
-          single: oe.value,
-          onRename: Ee,
-          onEdit: Ae,
-          onRemove: Pe,
-          onOpen: Ne
+          accept: a.accept === null ? void 0 : `${a.accept}/*`,
+          onChange: C
+        }, null, 40, _t),
+        g(gt, {
+          selected: F.value,
+          "onUpdate:selected": f[5] || (f[5] = (_) => F.value = _),
+          files: ie.value,
+          api: e(v),
+          query: K.value,
+          single: ne.value,
+          onRename: Ae,
+          onEdit: qe,
+          onRemove: Ne,
+          onOpen: Ie
         }, null, 8, ["selected", "files", "api", "query", "single"]),
-        M("footer", kt, [
-          M("span", null, z(e(a)("manager.status-files", { count: f.value?.stats.files ?? 0 })), 1),
-          d.value.length > 0 ? (b(), W("span", $t, z(e(a)("manager.status-selected", { count: d.value.length })), 1)) : R("", !0),
-          M("span", null, z(e(a)("manager.status-size", { size: e(Re)(f.value?.stats.size ?? 0) })), 1)
+        V("footer", Ct, [
+          V("span", null, U(e(t)("manager.status-files", { count: $.value?.stats.files ?? 0 })), 1),
+          F.value.length > 0 ? (b(), L("span", Mt, U(e(t)("manager.status-selected", { count: F.value.length })), 1)) : D("", !0),
+          V("span", null, U(e(t)("manager.status-size", { size: e(Be)($.value?.stats.size ?? 0) })), 1)
         ]),
-        f.value && f.value.meta.last_page > 1 ? (b(), T(e(nt), {
+        $.value && $.value.meta.last_page > 1 ? (b(), T(e(rt), {
           key: 0,
-          page: f.value.meta.current_page,
-          "per-page": f.value.meta.per_page,
-          total: f.value.meta.total,
-          "last-page": f.value.meta.last_page,
+          page: $.value.meta.current_page,
+          "per-page": $.value.meta.per_page,
+          total: $.value.meta.total,
+          "last-page": $.value.meta.last_page,
           disabled: ee.value,
           size: "sm",
-          onChange: p[6] || (p[6] = ({ page: _ }) => S(_))
-        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : R("", !0)
+          onChange: f[6] || (f[6] = ({ page: _ }) => m(_))
+        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : D("", !0)
       ]),
-      v(e(ot), {
-        open: P.value,
-        "onUpdate:open": p[9] || (p[9] = (_) => P.value = _),
+      g(e(dt), {
+        open: j.value,
+        "onUpdate:open": f[9] || (f[9] = (_) => j.value = _),
         side: "left",
-        title: e(a)("manager.folders"),
+        title: e(t)("manager.folders"),
         size: 280
       }, {
-        default: x(() => [
-          M("div", _t, [
-            v(Te, {
-              selected: g.value,
+        default: w(() => [
+          V("div", Vt, [
+            g(ze, {
+              selected: o.value,
               "onUpdate:selected": [
-                p[7] || (p[7] = (_) => g.value = _),
-                p[8] || (p[8] = (_) => P.value = !1)
+                f[7] || (f[7] = (_) => o.value = _),
+                f[8] || (f[8] = (_) => j.value = !1)
               ],
-              directories: r.value,
-              onMove: $e
+              directories: h.value,
+              onMove: Me
             }, null, 8, ["selected", "directories"]),
-            G.value ? (b(), T(e(le), {
+            Q.value ? (b(), T(e(le), {
               key: 0,
               size: "sm",
               align: "start"
             }, {
-              default: x(() => [
-                v(e(D), {
+              default: w(() => [
+                g(e(B), {
                   type: "add",
-                  title: e(a)("manager.new-folder"),
-                  onClick: C
+                  title: e(t)("manager.new-folder"),
+                  onClick: $e
                 }, null, 8, ["title"]),
-                v(e(D), {
+                g(e(B), {
                   type: "edit",
-                  title: e(a)("manager.rename"),
+                  title: e(t)("manager.rename"),
                   disabled: !E.value || E.value.is_root,
-                  onClick: F
+                  onClick: _e
                 }, null, 8, ["title", "disabled"]),
-                v(e(D), {
+                g(e(B), {
                   type: "remove",
-                  title: e(a)("manager.delete"),
+                  title: e(t)("manager.delete"),
                   disabled: !E.value || E.value.is_root,
-                  onClick: ke
+                  onClick: Ce
                 }, null, 8, ["title", "disabled"])
               ]),
               _: 1
-            })) : R("", !0)
+            })) : D("", !0)
           ])
         ]),
         _: 1
       }, 8, ["open", "title"])
     ], 2));
   }
-}), Ct = { class: "wx-media-picker" }, Vt = {
+}), Tt = { class: "wx-media-picker" }, zt = {
   key: 0,
   class: "wx-media-picker__count"
-}, we = /* @__PURE__ */ O({
+}, xe = /* @__PURE__ */ S({
   __name: "MediaPicker",
   props: {
     accept: { default: "image" },
@@ -957,51 +972,51 @@ const bt = {
     multiple: { type: Boolean, default: !1 },
     max: { default: null }
   },
-  setup(t) {
-    const { open: i, resolve: o, dismiss: l } = ve(), c = X("webx-media"), s = L([]);
-    return (a, n) => (b(), T(e(ge), {
+  setup(a) {
+    const { open: i, resolve: n, dismiss: l } = ye(), r = H("webx-media"), d = R([]);
+    return (v, t) => (b(), T(e(he), {
       open: e(i),
-      "onUpdate:open": n[4] || (n[4] = (k) => me(i) ? i.value = k : null),
-      title: t.title ?? e(c)("module.title"),
+      "onUpdate:open": t[4] || (t[4] = (x) => ve(i) ? i.value = x : null),
+      title: a.title ?? e(r)("module.title"),
       width: 960
-    }, Je({
-      default: x(() => [
-        M("div", Ct, [
-          v(De, {
-            picking: !t.manage,
-            accept: t.manage ? null : t.accept,
-            multiple: t.multiple && !t.manage,
-            max: t.max,
-            onPick: n[0] || (n[0] = (k) => e(o)(k)),
-            onSelection: n[1] || (n[1] = (k) => s.value = k)
+    }, We({
+      default: w(() => [
+        V("div", Tt, [
+          g(Se, {
+            picking: !a.manage,
+            accept: a.manage ? null : a.accept,
+            multiple: a.multiple && !a.manage,
+            max: a.max,
+            onPick: t[0] || (t[0] = (x) => e(n)(x)),
+            onSelection: t[1] || (t[1] = (x) => d.value = x)
           }, null, 8, ["picking", "accept", "multiple", "max"])
         ])
       ]),
       _: 2
     }, [
-      t.multiple && !t.manage ? {
+      a.multiple && !a.manage ? {
         name: "footer",
-        fn: x(() => [
-          v(e(ye), { size: "sm" }, {
-            default: x(() => [
-              t.max !== null && t.max > 0 ? (b(), W("span", Vt, z(e(c)("manager.chosen", { count: s.value.length, max: t.max })), 1)) : R("", !0),
-              v(e(H), {
+        fn: w(() => [
+          g(e(be), { size: "sm" }, {
+            default: w(() => [
+              a.max !== null && a.max > 0 ? (b(), L("span", zt, U(e(r)("manager.chosen", { count: d.value.length, max: a.max })), 1)) : D("", !0),
+              g(e(I), {
                 variant: "outline",
-                onClick: n[2] || (n[2] = (k) => e(l)())
+                onClick: t[2] || (t[2] = (x) => e(l)())
               }, {
-                default: x(() => [
-                  N(z(e(c)("manager.cancel")), 1)
+                default: w(() => [
+                  O(U(e(r)("manager.cancel")), 1)
                 ]),
                 _: 1
               }),
-              v(e(H), {
+              g(e(I), {
                 class: "wx-media-picker__confirm",
                 type: "primary",
-                disabled: s.value.length === 0,
-                onClick: n[3] || (n[3] = (k) => e(o)(s.value))
+                disabled: d.value.length === 0,
+                onClick: t[3] || (t[3] = (x) => e(n)(d.value))
               }, {
-                default: x(() => [
-                  N(z(e(c)("manager.pick", { count: s.value.length })), 1)
+                default: w(() => [
+                  O(U(e(r)("manager.pick", { count: d.value.length })), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -1013,26 +1028,26 @@ const bt = {
       } : void 0
     ]), 1032, ["open", "title"]));
   }
-}), Mt = ae(we), Tt = ae(we, {
+}), Ut = ae(xe), Ft = ae(xe, {
   props: { multiple: !0 }
-}), zt = ae(
-  we,
+}), Wt = ae(
+  xe,
   { props: { manage: !0 } }
-), Ft = {
+), Lt = {
   key: 0,
   class: "wx-media-list__label"
-}, Ut = {
+}, Rt = {
   key: 0,
   class: "wx-media-list__missing"
-}, Wt = { key: 1 }, Lt = {
+}, Dt = { key: 1 }, Bt = {
   key: 0,
   class: "wx-media-list__tools"
-}, Rt = { class: "wx-media-list__captions" }, Dt = { class: "wx-media-list__caption" }, Bt = { class: "wx-media-list__caption" }, St = { class: "wx-media-list__captions-footer" }, Ot = { class: "wx-media-list__footer" }, Et = {
+}, St = { class: "wx-media-list__captions" }, Et = { class: "wx-media-list__caption" }, Pt = { class: "wx-media-list__caption" }, Ot = { class: "wx-media-list__captions-footer" }, At = { class: "wx-media-list__footer" }, Nt = {
   key: 0,
   class: "wx-media-list__hint"
-}, xe = /* @__PURE__ */ O({
+}, ke = /* @__PURE__ */ S({
   __name: "MediaList",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ q({
     label: { default: void 0 },
     layout: { default: "grid" },
     accept: { default: null },
@@ -1048,174 +1063,174 @@ const bt = {
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = t, o = I(t, "modelValue");
-    be();
-    const l = X("webx-media"), c = Qe(Ze, null), s = c ? he(c) : null, a = {
+  setup(a) {
+    const i = a, n = A(a, "modelValue");
+    re();
+    const l = H("webx-media"), r = Ze(tt, null), d = r ? we(r) : null, v = {
       "16/9": "16 / 9",
       "4/3": "4 / 3",
       "1/1": "1 / 1"
-    }, n = U({
-      get: () => Array.isArray(o.value) ? o.value : [],
-      set: (y) => {
-        o.value = y;
+    }, t = z({
+      get: () => Array.isArray(n.value) ? n.value : [],
+      set: (c) => {
+        n.value = c;
       }
-    }), k = U(() => i.single ? 1 : i.max ?? null), w = U(() => k.value !== null && n.value.length >= k.value), u = L({}), r = /* @__PURE__ */ new Set();
-    async function g(y) {
-      if (!s) return;
-      const h = y.filter((C) => !(C in u.value) && !r.has(C));
-      if (h.length === 0) return;
-      h.forEach((C) => r.add(C));
-      const V = await Promise.all(
-        h.map(async (C) => [C, await s.fileByPath(C)])
+    }), x = z(() => i.single ? 1 : i.max ?? null), y = z(() => x.value !== null && t.value.length >= x.value), s = R({}), u = /* @__PURE__ */ new Set();
+    async function k(c) {
+      if (!d) return;
+      const m = c.filter((C) => !(C in s.value) && !u.has(C));
+      if (m.length === 0) return;
+      m.forEach((C) => u.add(C));
+      const M = await Promise.all(
+        m.map(async (C) => [C, await d.fileByPath(C)])
       );
-      h.forEach((C) => r.delete(C)), u.value = { ...u.value, ...Object.fromEntries(V) };
+      m.forEach((C) => u.delete(C)), s.value = { ...s.value, ...Object.fromEntries(M) };
     }
-    K(
-      () => n.value.map((y) => y.path),
-      (y) => {
-        g(y.filter(Boolean));
+    G(
+      () => t.value.map((c) => c.path),
+      (c) => {
+        k(c.filter(Boolean));
       },
       { immediate: !0 }
     );
-    function f(y) {
-      u.value = { ...u.value, ...Object.fromEntries(y.map((h) => [h.path, h])) };
+    function h(c) {
+      s.value = { ...s.value, ...Object.fromEntries(c.map((m) => [m.path, m])) };
     }
-    function d(y) {
-      return u.value[y.path];
+    function o(c) {
+      return s.value[c.path];
     }
-    function $(y) {
-      return d(y) === null;
+    function $(c) {
+      return o(c) === null;
     }
-    function B(y) {
-      return d(y)?.name ?? mt(y.path);
+    function F(c) {
+      return o(c)?.name ?? vt(c.path);
     }
-    function Y(y) {
-      const h = d(y);
-      return h && s ? s.thumb(h, 320, 320) ?? void 0 : void 0;
+    function K(c) {
+      const m = o(c);
+      return m && d ? d.thumb(m, 320, 320) ?? void 0 : void 0;
     }
-    function ee(y) {
-      const h = d(y);
-      if (!h) return "";
-      const V = Re(h.size);
-      return h.width && h.height ? `${h.width}×${h.height} · ${V}` : V;
+    function X(c) {
+      const m = o(c);
+      if (!m) return "";
+      const M = Be(m.size);
+      return m.width && m.height ? `${m.width}×${m.height} · ${M}` : M;
     }
-    const P = L(null);
-    function ie(y, h) {
-      return n.value.findIndex((C) => C.path === y.path) === h ? y.path : `${y.path}#${h}`;
+    const N = R(null);
+    function ee(c, m) {
+      return t.value.findIndex((C) => C.path === c.path) === m ? c.path : `${c.path}#${m}`;
     }
-    function te(y, h) {
-      return n.value[y]?.[h] ?? {};
+    function j(c, m) {
+      return t.value[c]?.[m] ?? {};
     }
-    function G(y, h, V) {
-      const C = n.value[y];
+    function te(c, m, M) {
+      const C = t.value[c];
       if (!C) return;
-      const F = [...n.value];
-      F[y] = { ...C, [h]: V }, n.value = F;
+      const W = [...t.value];
+      W[c] = { ...C, [m]: M }, t.value = W;
     }
-    async function ne() {
+    async function ie() {
       if (i.disabled) return;
-      const y = k.value === null ? null : k.value - n.value.length, h = await Tt({ accept: i.accept, max: y });
-      if (!h || h.length === 0) return;
-      f(h);
-      const V = new Set(n.value.map((F) => F.path)), C = h.filter((F) => !V.has(F.path)).map((F) => ({ path: F.path }));
-      n.value = i.single ? C.slice(0, 1) : [...n.value, ...C];
+      const c = x.value === null ? null : x.value - t.value.length, m = await Ft({ accept: i.accept, max: c });
+      if (!m || m.length === 0) return;
+      h(m);
+      const M = new Set(t.value.map((W) => W.path)), C = m.filter((W) => !M.has(W.path)).map((W) => ({ path: W.path }));
+      t.value = i.single ? C.slice(0, 1) : [...t.value, ...C];
     }
-    function E(y) {
-      n.value = n.value.filter((h, V) => V !== y), P.value = null;
+    function Q(c) {
+      t.value = t.value.filter((m, M) => M !== c), N.value = null;
     }
-    async function oe(y) {
-      await zt({});
-      const h = { ...u.value };
-      delete h[y.path], u.value = h, g([y.path]);
+    async function de(c) {
+      await Wt({});
+      const m = { ...s.value };
+      delete m[c.path], s.value = m, k([c.path]);
     }
-    const A = U(() => {
-      const y = i.columns ? `repeat(${i.columns}, minmax(0, 1fr))` : "repeat(auto-fill, minmax(140px, 1fr))";
+    const E = z(() => {
+      const c = i.columns ? `repeat(${i.columns}, minmax(0, 1fr))` : "repeat(auto-fill, minmax(140px, 1fr))";
       return i.aspect ? {
-        "--wx-media-list-columns": y,
-        "--wx-media-list-aspect": a[i.aspect] ?? i.aspect
-      } : { "--wx-media-list-columns": y };
-    }), S = U(() => {
-      const y = n.value.length;
-      return i.min && y < i.min ? l("field.at-least", { count: i.min }) : k.value === null ? "" : l("field.count", { count: y, max: k.value });
+        "--wx-media-list-columns": c,
+        "--wx-media-list-aspect": v[i.aspect] ?? i.aspect
+      } : { "--wx-media-list-columns": c };
+    }), ne = z(() => {
+      const c = t.value.length;
+      return i.min && c < i.min ? l("field.at-least", { count: i.min }) : x.value === null ? "" : l("field.count", { count: c, max: x.value });
     });
-    return (y, h) => (b(), W("div", {
-      class: ue(["wx-media-list", [`wx-media-list--${t.layout}`, { "is-disabled": t.disabled }]]),
-      style: ce(A.value)
+    return (c, m) => (b(), L("div", {
+      class: pe(["wx-media-list", [`wx-media-list--${a.layout}`, { "is-disabled": a.disabled }]]),
+      style: fe(E.value)
     }, [
-      t.label ? (b(), W("span", Ft, z(t.label), 1)) : R("", !0),
-      v(e(rt), {
-        modelValue: n.value,
-        "onUpdate:modelValue": h[1] || (h[1] = (V) => n.value = V),
+      a.label ? (b(), L("span", Lt, U(a.label), 1)) : D("", !0),
+      g(e(ct), {
+        modelValue: t.value,
+        "onUpdate:modelValue": m[1] || (m[1] = (M) => t.value = M),
         plain: "",
-        disabled: t.disabled,
-        handle: t.layout === "grid" ? "row" : "grip",
-        "item-key": ie,
-        "item-label": B,
+        disabled: a.disabled,
+        handle: a.layout === "grid" ? "row" : "grip",
+        "item-key": ee,
+        "item-label": F,
         "drag-label": e(l)("field.reorder"),
         "empty-text": e(l)("field.empty")
       }, {
-        default: x(({ item: V, index: C }) => [
-          M("div", {
-            class: ue(["wx-media-list__cell", { "is-broken": $(V), "is-busy": P.value === C }])
+        default: w(({ item: M, index: C }) => [
+          V("div", {
+            class: pe(["wx-media-list__cell", { "is-broken": $(M), "is-busy": N.value === C }])
           }, [
-            v(e(Ue), {
-              name: B(V),
-              thumbnail: Y(V),
-              type: d(V)?.mime,
-              size: t.layout === "rows" ? "sm" : "md"
+            g(e(Le), {
+              name: F(M),
+              thumbnail: K(M),
+              type: o(M)?.mime,
+              size: a.layout === "rows" ? "sm" : "md"
             }, {
-              meta: x(() => [
-                $(V) ? (b(), W("span", Ut, z(e(l)("field.missing")), 1)) : (b(), W("span", Wt, z(ee(V)), 1))
+              meta: w(() => [
+                $(M) ? (b(), L("span", Rt, U(e(l)("field.missing")), 1)) : (b(), L("span", Dt, U(X(M)), 1))
               ]),
               _: 2
             }, 1032, ["name", "thumbnail", "type", "size"]),
-            t.disabled ? R("", !0) : (b(), W("div", Lt, [
-              v(e(le), { size: "sm" }, {
-                default: x(() => [
-                  t.captions ? (b(), T(e(We), {
+            a.disabled ? D("", !0) : (b(), L("div", Bt, [
+              g(e(le), { size: "sm" }, {
+                default: w(() => [
+                  a.captions ? (b(), T(e(Re), {
                     key: 0,
-                    open: P.value === C,
+                    open: N.value === C,
                     title: e(l)("field.captions"),
                     width: 360,
                     side: "top",
                     teleport: "",
-                    "onUpdate:open": (F) => P.value = F ? C : null
+                    "onUpdate:open": (W) => N.value = W ? C : null
                   }, {
-                    trigger: x(() => [
-                      v(e(D), {
+                    trigger: w(() => [
+                      g(e(B), {
                         type: "edit",
                         title: e(l)("field.captions")
                       }, null, 8, ["title"])
                     ]),
-                    default: x(() => [
-                      M("div", Rt, [
-                        M("div", Dt, [
-                          h[2] || (h[2] = M("span", { class: "wx-media-list__caption-label" }, "alt", -1)),
-                          v(e(Z), {
+                    default: w(() => [
+                      V("div", St, [
+                        V("div", Et, [
+                          m[2] || (m[2] = V("span", { class: "wx-media-list__caption-label" }, "alt", -1)),
+                          g(e(Z), {
                             localized: "",
-                            "model-value": te(C, "alt"),
+                            "model-value": j(C, "alt"),
                             placeholder: e(l)("field.alt-hint"),
-                            "onUpdate:modelValue": (F) => G(C, "alt", F)
+                            "onUpdate:modelValue": (W) => te(C, "alt", W)
                           }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
                         ]),
-                        M("div", Bt, [
-                          h[3] || (h[3] = M("span", { class: "wx-media-list__caption-label" }, "title", -1)),
-                          v(e(Z), {
+                        V("div", Pt, [
+                          m[3] || (m[3] = V("span", { class: "wx-media-list__caption-label" }, "title", -1)),
+                          g(e(Z), {
                             localized: "",
-                            "model-value": te(C, "title"),
+                            "model-value": j(C, "title"),
                             placeholder: e(l)("field.title-hint"),
-                            "onUpdate:modelValue": (F) => G(C, "title", F)
+                            "onUpdate:modelValue": (W) => te(C, "title", W)
                           }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
                         ]),
-                        M("div", St, [
-                          v(e(H), {
+                        V("div", Ot, [
+                          g(e(I), {
                             size: "sm",
                             type: "primary",
-                            onClick: h[0] || (h[0] = (F) => P.value = null)
+                            onClick: m[0] || (m[0] = (W) => N.value = null)
                           }, {
-                            default: x(() => [
-                              N(z(e(l)("manager.save")), 1)
+                            default: w(() => [
+                              O(U(e(l)("manager.save")), 1)
                             ]),
                             _: 1
                           })
@@ -1223,24 +1238,24 @@ const bt = {
                       ])
                     ]),
                     _: 2
-                  }, 1032, ["open", "title", "onUpdate:open"])) : R("", !0),
-                  $(V) ? R("", !0) : (b(), T(e(D), {
+                  }, 1032, ["open", "title", "onUpdate:open"])) : D("", !0),
+                  $(M) ? D("", !0) : (b(), T(e(B), {
                     key: 1,
                     type: "goto",
                     title: e(l)("field.open"),
-                    onClick: (F) => oe(V)
+                    onClick: (W) => de(M)
                   }, null, 8, ["title", "onClick"])),
-                  v(e(Le), {
+                  g(e(De), {
                     title: e(l)("field.remove-title"),
                     description: e(l)("field.remove-text"),
                     "confirm-text": e(l)("field.remove-confirm"),
                     "cancel-text": e(l)("manager.cancel"),
                     "confirm-type": "danger",
                     side: "top",
-                    onConfirm: (F) => E(C)
+                    onConfirm: (W) => Q(C)
                   }, {
-                    trigger: x(() => [
-                      v(e(D), {
+                    trigger: w(() => [
+                      g(e(B), {
                         type: "remove",
                         title: e(l)("field.remove-confirm")
                       }, null, 8, ["title"])
@@ -1255,23 +1270,23 @@ const bt = {
         ]),
         _: 1
       }, 8, ["modelValue", "disabled", "handle", "drag-label", "empty-text"]),
-      M("div", Ot, [
-        v(e(H), {
+      V("div", At, [
+        g(e(I), {
           size: "sm",
           variant: "outline",
-          disabled: t.disabled || w.value,
-          onClick: ne
+          disabled: a.disabled || y.value,
+          onClick: ie
         }, {
-          default: x(() => [
-            N(z(e(l)("field.add")), 1)
+          default: w(() => [
+            O(U(e(l)("field.add")), 1)
           ]),
           _: 1
         }, 8, ["disabled"]),
-        S.value ? (b(), W("span", Et, z(S.value), 1)) : R("", !0)
+        ne.value ? (b(), L("span", Nt, U(ne.value), 1)) : D("", !0)
       ])
     ], 6));
   }
-}), Pt = /* @__PURE__ */ O({
+}), qt = /* @__PURE__ */ S({
   name: "WxFileField",
   inheritAttrs: !1,
   __name: "FileField",
@@ -1280,21 +1295,21 @@ const bt = {
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = I(t, "modelValue"), o = U({
+  setup(a) {
+    const i = A(a, "modelValue"), n = z({
       get: () => i.value ? [i.value] : [],
       set: (l) => {
         i.value = l[0] ?? null;
       }
     });
-    return (l, c) => (b(), T(xe, pe(l.$attrs, {
-      modelValue: o.value,
-      "onUpdate:modelValue": c[0] || (c[0] = (s) => o.value = s),
+    return (l, r) => (b(), T(ke, ge(l.$attrs, {
+      modelValue: n.value,
+      "onUpdate:modelValue": r[0] || (r[0] = (d) => n.value = d),
       layout: "rows",
       single: ""
     }), null, 16, ["modelValue"]));
   }
-}), At = /* @__PURE__ */ O({
+}), It = /* @__PURE__ */ S({
   name: "WxFilesField",
   inheritAttrs: !1,
   __name: "FilesField",
@@ -1303,15 +1318,15 @@ const bt = {
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = I(t, "modelValue");
-    return (o, l) => (b(), T(xe, pe(o.$attrs, {
+  setup(a) {
+    const i = A(a, "modelValue");
+    return (n, l) => (b(), T(ke, ge(n.$attrs, {
       modelValue: i.value,
-      "onUpdate:modelValue": l[0] || (l[0] = (c) => i.value = c),
+      "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "rows"
     }), null, 16, ["modelValue"]));
   }
-}), Nt = /* @__PURE__ */ O({
+}), Ht = /* @__PURE__ */ S({
   name: "WxGalleryField",
   inheritAttrs: !1,
   __name: "GalleryField",
@@ -1320,27 +1335,27 @@ const bt = {
     modelModifiers: {}
   },
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = I(t, "modelValue");
-    return (o, l) => (b(), T(xe, pe(o.$attrs, {
+  setup(a) {
+    const i = A(a, "modelValue");
+    return (n, l) => (b(), T(ke, ge(n.$attrs, {
       modelValue: i.value,
-      "onUpdate:modelValue": l[0] || (l[0] = (c) => i.value = c),
+      "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "grid",
       accept: "image"
     }), null, 16, ["modelValue"]));
   }
-}), qt = { class: "wx-media-field" }, It = {
+}), Xt = { class: "wx-media-field" }, Kt = {
   key: 0,
   class: "wx-media-field__label"
-}, Ht = ["disabled"], Xt = ["disabled", "title"], Kt = {
+}, jt = ["disabled"], Gt = ["disabled", "title"], Yt = {
   key: 1,
   class: "wx-media-field__missing"
-}, jt = {
+}, Jt = {
   key: 0,
   class: "wx-media-field__bar"
-}, Gt = { class: "wx-media-field__captions" }, Yt = { class: "wx-media-field__caption" }, Jt = { class: "wx-media-field__caption" }, Qt = { class: "wx-media-field__captions-footer" }, Zt = /* @__PURE__ */ O({
+}, Qt = { class: "wx-media-field__captions" }, Zt = { class: "wx-media-field__caption" }, el = { class: "wx-media-field__caption" }, tl = { class: "wx-media-field__captions-footer" }, ll = /* @__PURE__ */ S({
   __name: "MediaField",
-  props: /* @__PURE__ */ j({
+  props: /* @__PURE__ */ q({
     label: { default: void 0 },
     accept: { default: "image" },
     captions: { type: Boolean, default: !0 },
@@ -1352,119 +1367,119 @@ const bt = {
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(t) {
-    const i = t, o = I(t, "modelValue");
-    be();
-    const l = X("webx-media"), c = he(fe()), s = {
+  setup(a) {
+    const i = a, n = A(a, "modelValue");
+    re();
+    const l = H("webx-media"), r = we(se()), d = {
       "16/9": "16 / 9",
       "4/3": "4 / 3",
       "1/1": "1 / 1"
-    }, a = L(!1), n = L({});
-    K(
-      () => o.value?.path,
-      async (d) => {
-        if (!d || o.value?.url || n.value[d]) return;
-        const $ = await c.fileByPath(d);
-        $ && (n.value = { ...n.value, [d]: $.url });
+    }, v = R(!1), t = R({});
+    G(
+      () => n.value?.path,
+      async (o) => {
+        if (!o || n.value?.url || t.value[o]) return;
+        const $ = await r.fileByPath(o);
+        $ && (t.value = { ...t.value, [o]: $.url });
       },
       { immediate: !0 }
     );
-    const k = U(() => {
-      const d = o.value;
-      return d ? d.url ?? n.value[d.path] ?? null : null;
-    }), w = U(
-      () => i.aspect ? { aspectRatio: s[i.aspect] ?? i.aspect } : { height: typeof i.height == "number" ? `${i.height}px` : i.height }
+    const x = z(() => {
+      const o = n.value;
+      return o ? o.url ?? t.value[o.path] ?? null : null;
+    }), y = z(
+      () => i.aspect ? { aspectRatio: d[i.aspect] ?? i.aspect } : { height: typeof i.height == "number" ? `${i.height}px` : i.height }
     );
-    function u(d) {
-      return o.value?.[d] ?? {};
+    function s(o) {
+      return n.value?.[o] ?? {};
     }
-    function r(d, $) {
-      o.value && (o.value = { ...o.value, [d]: $ });
+    function u(o, $) {
+      n.value && (n.value = { ...n.value, [o]: $ });
     }
-    async function g() {
+    async function k() {
       if (i.disabled) return;
-      const d = await Mt({ accept: i.accept });
-      d && (o.value = { ...o.value, path: d.path, url: d.url });
+      const o = await Ut({ accept: i.accept });
+      o && (t.value = { ...t.value, [o.path]: o.url }, n.value = { ...n.value, path: o.path, url: o.url });
     }
-    function f() {
-      o.value = null, a.value = !1;
+    function h() {
+      n.value = null, v.value = !1;
     }
-    return (d, $) => (b(), W("div", qt, [
-      t.label ? (b(), W("span", It, z(t.label), 1)) : R("", !0),
-      o.value ? (b(), W("div", {
+    return (o, $) => (b(), L("div", Xt, [
+      a.label ? (b(), L("span", Kt, U(a.label), 1)) : D("", !0),
+      n.value ? (b(), L("div", {
         key: 2,
         class: "wx-media-field__frame",
-        style: ce(w.value)
+        style: fe(y.value)
       }, [
-        M("button", {
+        V("button", {
           type: "button",
           class: "wx-media-field__picture",
-          disabled: t.disabled,
+          disabled: a.disabled,
           title: e(l)("field.replace"),
-          onClick: g
+          onClick: k
         }, [
-          k.value ? (b(), T(e(dt), {
+          x.value ? (b(), T(e(mt), {
             key: 0,
-            src: k.value,
+            src: x.value,
             fit: "contain",
             width: "100%",
             height: "100%"
-          }, null, 8, ["src"])) : (b(), W("span", Kt, z(e(l)("field.no-preview")), 1))
-        ], 8, Xt),
-        t.disabled ? R("", !0) : (b(), W("div", jt, [
-          v(e(le), { size: "sm" }, {
-            default: x(() => [
-              t.captions ? (b(), T(e(We), {
+          }, null, 8, ["src"])) : (b(), L("span", Yt, U(e(l)("field.no-preview")), 1))
+        ], 8, Gt),
+        a.disabled ? D("", !0) : (b(), L("div", Jt, [
+          g(e(le), { size: "sm" }, {
+            default: w(() => [
+              a.captions ? (b(), T(e(Re), {
                 key: 0,
-                open: a.value,
-                "onUpdate:open": $[3] || ($[3] = (B) => a.value = B),
+                open: v.value,
+                "onUpdate:open": $[3] || ($[3] = (F) => v.value = F),
                 title: e(l)("field.captions"),
                 width: 360,
                 side: "top",
                 teleport: ""
               }, {
-                trigger: x(() => [
-                  v(e(D), {
+                trigger: w(() => [
+                  g(e(B), {
                     type: "edit",
                     title: e(l)("field.edit")
                   }, null, 8, ["title"])
                 ]),
-                default: x(() => [
-                  M("div", Gt, [
-                    M("div", Yt, [
-                      $[4] || ($[4] = M("label", {
+                default: w(() => [
+                  V("div", Qt, [
+                    V("div", Zt, [
+                      $[4] || ($[4] = V("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-alt"
                       }, "alt", -1)),
-                      v(e(Z), {
+                      g(e(Z), {
                         id: "wx-media-alt",
                         localized: "",
-                        "model-value": u("alt"),
+                        "model-value": s("alt"),
                         placeholder: e(l)("field.alt-hint"),
-                        "onUpdate:modelValue": $[0] || ($[0] = (B) => r("alt", B))
+                        "onUpdate:modelValue": $[0] || ($[0] = (F) => u("alt", F))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    M("div", Jt, [
-                      $[5] || ($[5] = M("label", {
+                    V("div", el, [
+                      $[5] || ($[5] = V("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-title"
                       }, "title", -1)),
-                      v(e(Z), {
+                      g(e(Z), {
                         id: "wx-media-title",
                         localized: "",
-                        "model-value": u("title"),
+                        "model-value": s("title"),
                         placeholder: e(l)("field.title-hint"),
-                        "onUpdate:modelValue": $[1] || ($[1] = (B) => r("title", B))
+                        "onUpdate:modelValue": $[1] || ($[1] = (F) => u("title", F))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    M("div", Qt, [
-                      v(e(H), {
+                    V("div", tl, [
+                      g(e(I), {
                         size: "sm",
                         type: "primary",
-                        onClick: $[2] || ($[2] = (B) => a.value = !1)
+                        onClick: $[2] || ($[2] = (F) => v.value = !1)
                       }, {
-                        default: x(() => [
-                          N(z(e(l)("manager.save")), 1)
+                        default: w(() => [
+                          O(U(e(l)("manager.save")), 1)
                         ]),
                         _: 1
                       })
@@ -1472,18 +1487,18 @@ const bt = {
                   ])
                 ]),
                 _: 1
-              }, 8, ["open", "title"])) : R("", !0),
-              v(e(Le), {
+              }, 8, ["open", "title"])) : D("", !0),
+              g(e(De), {
                 title: e(l)("field.clear-title"),
                 description: e(l)("field.clear-text"),
                 "confirm-text": e(l)("field.clear-confirm"),
                 "cancel-text": e(l)("manager.cancel"),
                 "confirm-type": "danger",
                 side: "top",
-                onConfirm: f
+                onConfirm: h
               }, {
-                trigger: x(() => [
-                  v(e(D), {
+                trigger: w(() => [
+                  g(e(B), {
                     type: "remove",
                     title: e(l)("field.clear-confirm")
                   }, null, 8, ["title"])
@@ -1494,36 +1509,81 @@ const bt = {
             _: 1
           })
         ]))
-      ], 4)) : (b(), W("div", {
+      ], 4)) : (b(), L("div", {
         key: 1,
         class: "wx-media-field__frame is-empty",
-        style: ce(w.value)
+        style: fe(y.value)
       }, [
-        M("button", {
+        V("button", {
           type: "button",
           class: "wx-media-field__pick",
-          disabled: t.disabled,
-          onClick: g
-        }, z(e(l)("field.select")), 9, Ht)
+          disabled: a.disabled,
+          onClick: k
+        }, U(e(l)("field.select")), 9, jt)
       ], 4))
     ]));
   }
-}), el = /* @__PURE__ */ O({
+}), al = /* @__PURE__ */ S({
   __name: "MediaPage",
-  setup(t) {
-    return (i, o) => (b(), T(e(ut), {
-      class: "wx-media-page",
-      padding: "md"
-    }, {
-      default: x(() => [
-        v(De)
+  setup(a) {
+    const i = se();
+    re();
+    const n = H("webx-media"), l = oe("manager"), r = R("all"), d = z(() => r.value), v = z(() => i.can("media.upload") || i.can("media.manage")), t = z(
+      () => i.state.manifest?.modules.find((y) => y.id === "media")?.title ?? n("module.title")
+    ), x = z(() => [
+      { value: "all", label: n("manager.all-types") },
+      ...["image", "video", "audio", "document", "other"].map((y) => ({
+        value: y,
+        label: n(`manager.${y}`)
+      }))
+    ]);
+    return (y, s) => (b(), T(e(lt), {
+      view: r.value,
+      "onUpdate:view": s[1] || (s[1] = (u) => r.value = u),
+      title: t.value,
+      views: x.value,
+      card: !1,
+      fill: ""
+    }, We({
+      default: w(() => [
+        g(e(pt), {
+          class: "wx-media-page",
+          padding: "md"
+        }, {
+          default: w(() => [
+            g(Se, {
+              ref_key: "manager",
+              ref: l,
+              type: d.value,
+              "in-page": ""
+            }, null, 8, ["type"])
+          ]),
+          _: 1
+        })
       ]),
-      _: 1
-    }));
+      _: 2
+    }, [
+      v.value ? {
+        name: "actions",
+        fn: w(() => [
+          g(e(I), {
+            type: "primary",
+            icon: "upload",
+            onClick: s[0] || (s[0] = (u) => l.value?.upload())
+          }, {
+            default: w(() => [
+              O(U(e(n)("manager.upload")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["view", "title", "views"]));
   }
 });
-function il(t = {}) {
-  const i = t.path ?? "/media";
+function sl(a = {}) {
+  const i = a.path ?? "/media";
   return {
     id: "media",
     path: i,
@@ -1531,7 +1591,7 @@ function il(t = {}) {
       {
         path: i,
         name: "webx.media",
-        component: el
+        component: al
       }
     ],
     // What a screen means by these four: the fields over the library. The server registers the
@@ -1539,26 +1599,26 @@ function il(t = {}) {
     // limit — the names are what an author picks from a list, and nobody picks "media with
     // `multiple: true` and `accept: document`".
     types: {
-      "wx-media": { component: Zt, kind: "field" },
-      "wx-gallery": { component: Nt, kind: "field" },
-      "wx-file": { component: Pt, kind: "field" },
-      "wx-files": { component: At, kind: "field" }
+      "wx-media": { component: ll, kind: "field" },
+      "wx-gallery": { component: Ht, kind: "field" },
+      "wx-file": { component: qt, kind: "field" },
+      "wx-files": { component: It, kind: "field" }
     }
   };
 }
 export {
-  Pt as WxFileField,
-  At as WxFilesField,
-  Nt as WxGalleryField,
-  Zt as WxMediaField,
-  De as WxMediaManager,
-  el as WxMediaPage,
-  we as WxMediaPicker,
-  he as createMediaApi,
-  il as media,
-  ht as mediaMessages,
-  Tt as openMediaFiles,
-  zt as openMediaLibrary,
-  Mt as openMediaPicker
+  qt as WxFileField,
+  It as WxFilesField,
+  Ht as WxGalleryField,
+  ll as WxMediaField,
+  Se as WxMediaManager,
+  al as WxMediaPage,
+  xe as WxMediaPicker,
+  we as createMediaApi,
+  sl as media,
+  xt as mediaMessages,
+  Ft as openMediaFiles,
+  Wt as openMediaLibrary,
+  Ut as openMediaPicker
 };
 //# sourceMappingURL=index.js.map