@webx-ui/module-media 0.8.0 → 0.8.3

package/dist/index.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, useModel as A, ref as R, watch as G, openBlock as w, createBlock as T, unref as e, mergeModels as q, computed as z, resolveDirective as Ye, withCtx as b, createElementBlock as L, Fragment as ce, renderList as me, withDirectives as Je, createCommentVNode as D, createVNode as g, createTextVNode as O, toDisplayString as U, isRef as ve, useTemplateRef as oe, onMounted as Fe, nextTick as Qe, createElementVNode as V, withKeys as Ze, normalizeClass as pe, createSlots as We, inject as et, normalizeStyle as fe, mergeProps as ge } from "vue";
-import { useTranslate as H, useAdmin as se, useErrorText as tt, adminKey as lt, WxListScreen as at } from "@webx-ui/module-admin";
-import { WxTree as it, WxSelectionArea as nt, WxFileCard as Le, WxEmpty as ot, 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 st, WxSpace as we, WxButton as I, useElementWidth as rt, createModal as ae, WxPagination as dt, WxDrawer as ut, confirm as ue, openImageEditor as ct, WxSortableList as mt, WxPopover as Re, WxPopconfirm as De, WxImage as pt, WxCard as ft } from "@webx-ui/core";
+import { defineComponent as S, useModel as O, ref as R, watch as G, openBlock as h, createBlock as z, unref as e, mergeModels as q, computed as V, resolveDirective as Ge, withCtx as b, createElementBlock as L, Fragment as ce, renderList as me, withDirectives as Ye, createCommentVNode as D, createVNode as g, createTextVNode as A, toDisplayString as U, isRef as ve, useTemplateRef as oe, onMounted as Fe, nextTick as Je, createElementVNode as T, withKeys as Qe, normalizeClass as pe, createSlots as Ze, inject as et, normalizeStyle as fe, mergeProps as ge } from "vue";
+import { useTranslate as I, useAdmin as se, useErrorText as tt, adminKey as lt, WxListScreen as at } from "@webx-ui/module-admin";
+import { WxTree as it, WxSelectionArea as nt, WxFileCard as We, WxEmpty as ot, 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 st, WxSpace as we, WxButton as X, useElementWidth as rt, createModal as ae, WxPagination as dt, WxDrawer as ut, confirm as ue, openImageEditor as ct, WxSortableList as mt, WxPopover as Le, WxPopconfirm as Re, WxImage as pt, WxCard as ft } from "@webx-ui/core";
 function be(a) {
   const i = `${a.apiPath}/media`, n = (l) => l.data;
   return {
@@ -26,24 +26,24 @@ function be(a) {
     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 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", a.i18n.state.locale);
         const s = vt();
-        s && y.setRequestHeader("X-XSRF-TOKEN", s), y.upload.addEventListener("progress", (u) => {
+        s && w.setRequestHeader("X-XSRF-TOKEN", s), w.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) {
+        }), w.addEventListener("load", () => {
+          const u = w.response;
+          if (w.status >= 200 && w.status < 300 && u?.data) {
             t(u.data);
             return;
           }
           x(
             Object.assign(new Error(u?.message ?? "Upload failed"), {
-              status: y.status,
+              status: w.status,
               body: u
             })
           );
-        }), y.addEventListener("error", () => x(new Error("Upload failed"))), y.send(v);
+        }), w.addEventListener("error", () => x(new Error("Upload failed"))), w.send(v);
       });
     },
     rename: (l, r) => a.http.patch(`${i}/files/${l}`, { name: r }).then(n),
@@ -67,7 +67,7 @@ function vt() {
   const a = document.cookie.split("; ").find((i) => i.startsWith("XSRF-TOKEN="));
   return a ? decodeURIComponent(a.slice(11)) : null;
 }
-function Be(a) {
+function De(a) {
   const i = ["B", "KB", "MB", "GB", "TB"];
   let n = a, l = 0;
   for (; n >= 1024 && l < i.length - 1; )
@@ -87,11 +87,11 @@ const ze = /* @__PURE__ */ S({
   }),
   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([]);
+    const n = a, l = O(a, "selected"), r = i, d = I("webx-media"), v = R([]), t = R([]);
     G(
       () => n.directories,
       (u) => {
-        v.value = u.map(x), t.value = y(u);
+        v.value = u.map(x), t.value = w(u);
       },
       { immediate: !0, deep: !0 }
     );
@@ -102,20 +102,20 @@ const ze = /* @__PURE__ */ S({
         children: (u.children ?? []).map(x)
       };
     }
-    function y(u) {
-      return u.flatMap((k) => [k.id, ...y(k.children ?? [])]);
+    function w(u) {
+      return u.flatMap((k) => [k.id, ...w(k.children ?? [])]);
     }
     function s(u) {
       const k = u.zone === "inside" ? u.target : u.parent;
       k && r("move", u.node.id, k.id);
     }
-    return (u, k) => (w(), T(e(it), {
+    return (u, k) => (h(), z(e(it), {
       selected: l.value,
-      "onUpdate:selected": k[0] || (k[0] = (h) => l.value = h),
+      "onUpdate:selected": k[0] || (k[0] = (y) => l.value = y),
       expanded: t.value,
-      "onUpdate:expanded": k[1] || (k[1] = (h) => t.value = h),
+      "onUpdate:expanded": k[1] || (k[1] = (y) => t.value = y),
       modelValue: v.value,
-      "onUpdate:modelValue": k[2] || (k[2] = (h) => v.value = h),
+      "onUpdate:modelValue": k[2] || (k[2] = (y) => v.value = y),
       class: "wx-media-tree",
       "node-key": "id",
       draggable: "",
@@ -136,15 +136,15 @@ const ze = /* @__PURE__ */ S({
   }),
   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(
+    const n = a, l = O(a, "selected"), r = i, d = I("webx-media"), v = V(
       () => n.query ? d("manager.empty-search", { query: n.query }) : d("manager.empty")
     );
     function t() {
       J.success(d("manager.link-copied"));
     }
-    function x(y) {
+    function x(w) {
       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();
+      s.value = w.url, s.setAttribute("readonly", ""), s.style.position = "fixed", s.style.opacity = "0", document.body.appendChild(s), s.select();
       let u = !1;
       try {
         u = document.execCommand("copy");
@@ -155,11 +155,11 @@ const ze = /* @__PURE__ */ S({
         t();
         return;
       }
-      J.danger(`${d("errors.copy")} ${y.url}`, { duration: 0 });
+      J.danger(`${d("errors.copy")} ${w.url}`, { duration: 0 });
     }
-    return (y, s) => {
-      const u = Ye("wx-select");
-      return a.files.length > 0 ? (w(), T(e(nt), {
+    return (w, s) => {
+      const u = Ge("wx-select");
+      return a.files.length > 0 ? (h(), z(e(nt), {
         key: 0,
         modelValue: l.value,
         "onUpdate:modelValue": s[0] || (s[0] = (k) => l.value = k),
@@ -167,41 +167,41 @@ const ze = /* @__PURE__ */ S({
         multiple: !a.single
       }, {
         default: b(({ isSelected: k }) => [
-          (w(!0), L(ce, null, me(a.files, (h) => Je((w(), T(e(Le), {
-            key: h.id,
+          (h(!0), L(ce, null, me(a.files, (y) => Ye((h(), z(e(We), {
+            key: y.id,
             class: "wx-media-grid__card",
-            name: h.name,
-            url: h.url,
-            thumbnail: a.api.thumb(h, 320, 320) ?? void 0,
-            type: h.mime,
-            selected: k(h.id),
+            name: y.name,
+            url: y.url,
+            thumbnail: a.api.thumb(y, 320, 320) ?? void 0,
+            type: y.mime,
+            selected: k(y.id),
             renamable: "",
-            editable: h.editable,
+            editable: y.editable,
             removable: "",
             copyable: "",
             "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 }),
+            "remove-confirm-text": e(d)("dialogs.delete-file", { name: y.name }),
             "cancel-label": e(d)("manager.cancel"),
             "save-label": e(d)("manager.save"),
-            "download-url": h.source ?? h.url,
+            "download-url": y.source ?? y.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),
+            onRename: (o) => r("rename", y, o),
+            onEdit: (o) => r("edit", y),
+            onRemove: (o) => r("remove", y),
             onCopy: t,
-            onCopyError: (o) => x(h),
-            onDblclick: (o) => r("open", h)
+            onCopyError: (o) => x(y),
+            onDblclick: (o) => r("open", y)
           }, 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]
+            [u, y.id]
           ])), 128))
         ]),
         _: 1
-      }, 8, ["modelValue", "multiple"])) : (w(), T(e(ot), {
+      }, 8, ["modelValue", "multiple"])) : (h(), z(e(ot), {
         key: 1,
         description: v.value
       }, null, 8, ["description"]));
@@ -225,35 +225,35 @@ const ze = /* @__PURE__ */ S({
   }),
   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(() => [
+    const n = a, l = O(a, "search"), r = O(a, "type"), d = O(a, "sort"), v = i, t = I("webx-media"), x = V(() => [
       { value: "all", label: t("manager.all-types") },
       ...["image", "video", "audio", "document", "other"].map((k) => ({
         value: k,
         label: t(`manager.${k}`)
       }))
-    ]), y = z(() => [
+    ]), w = V(() => [
       { 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) => (w(), L("header", ht, [
-      a.compact ? (w(), T(e(B), {
+    ]), s = V(() => x.value.find((k) => k.value === r.value)?.label ?? ""), u = V(() => w.value.find((k) => k.value === d.value)?.label ?? "");
+    return (k, y) => (h(), L("header", ht, [
+      a.compact ? (h(), z(e(B), {
         key: 0,
         icon: "sidebar",
         title: e(t)("manager.folders"),
         size: "sm",
-        onClick: h[0] || (h[0] = (o) => v("folders"))
+        onClick: y[0] || (y[0] = (o) => v("folders"))
       }, null, 8, ["title"])) : D("", !0),
       g(e(Z), {
         modelValue: l.value,
-        "onUpdate:modelValue": h[1] || (h[1] = (o) => l.value = o),
+        "onUpdate:modelValue": y[1] || (y[1] = (o) => l.value = o),
         class: "wx-media-toolbar__search",
         placeholder: e(t)("manager.search"),
         clearable: "",
         size: "sm"
       }, null, 8, ["modelValue", "placeholder"]),
-      a.fixedType ? D("", !0) : (w(), T(e(Ve), { key: 1 }, {
+      a.fixedType ? D("", !0) : (h(), z(e(Ve), { key: 1 }, {
         trigger: b(() => [
           g(e(B), {
             icon: "filter",
@@ -262,13 +262,13 @@ const ze = /* @__PURE__ */ S({
           }, null, 8, ["title"])
         ]),
         default: b(() => [
-          (w(!0), L(ce, null, me(x.value, (o) => (w(), T(e(Te), {
+          (h(!0), L(ce, null, me(x.value, (o) => (h(), z(e(Te), {
             key: String(o.value),
             active: o.value === r.value,
             onClick: ($) => r.value = o.value
           }, {
             default: b(() => [
-              O(U(o.label), 1)
+              A(U(o.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
@@ -284,27 +284,27 @@ const ze = /* @__PURE__ */ S({
           }, null, 8, ["title"])
         ]),
         default: b(() => [
-          (w(!0), L(ce, null, me(y.value, (o) => (w(), T(e(Te), {
+          (h(!0), L(ce, null, me(w.value, (o) => (h(), z(e(Te), {
             key: o.value,
             active: o.value === d.value,
             onClick: ($) => d.value = o.value
           }, {
             default: b(() => [
-              O(U(o.label), 1)
+              A(U(o.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       }),
-      a.canUpload ? (w(), T(e(B), {
+      a.canUpload ? (h(), z(e(B), {
         key: 2,
         type: "upload",
         title: e(t)("manager.upload"),
         size: "sm",
-        onClick: h[2] || (h[2] = (o) => v("upload"))
+        onClick: y[2] || (y[2] = (o) => v("upload"))
       }, null, 8, ["title"])) : D("", !0),
-      a.canManage ? (w(), T(e(le), {
+      a.canManage ? (h(), z(e(le), {
         key: 3,
         size: "sm"
       }, {
@@ -313,13 +313,13 @@ const ze = /* @__PURE__ */ S({
             icon: "folder-move",
             title: e(t)("manager.move"),
             disabled: n.selected === 0,
-            onClick: h[3] || (h[3] = (o) => v("move"))
+            onClick: y[3] || (y[3] = (o) => v("move"))
           }, null, 8, ["title", "disabled"]),
           g(e(B), {
             type: "remove",
             title: e(t)("manager.delete"),
             disabled: n.selected === 0,
-            onClick: h[4] || (h[4] = (o) => v("remove"))
+            onClick: y[4] || (y[4] = (o) => v("remove"))
           }, null, 8, ["title", "disabled"])
         ]),
         _: 1
@@ -334,11 +334,11 @@ const ze = /* @__PURE__ */ S({
     count: {}
   },
   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)
+    const i = a, { open: n, resolve: l, dismiss: r } = ye(), d = I("webx-media"), v = V(
+      () => x(i.directories).filter((w) => w.value !== i.from)
     ), t = R(v.value[0]?.value ?? null);
-    function x(y) {
-      return y.flatMap((s) => [
+    function x(w) {
+      return w.flatMap((s) => [
         {
           value: s.id,
           // Indented, so the tree is still readable once it is a flat list.
@@ -347,7 +347,7 @@ const ze = /* @__PURE__ */ S({
         ...x(s.children ?? [])
       ]);
     }
-    return (y, s) => (w(), T(e(he), {
+    return (w, s) => (h(), z(e(he), {
       open: e(n),
       "onUpdate:open": s[3] || (s[3] = (u) => ve(n) ? n.value = u : null),
       title: e(d)("manager.move-to"),
@@ -356,22 +356,22 @@ const ze = /* @__PURE__ */ S({
       footer: b(() => [
         g(e(we), { size: "sm" }, {
           default: b(() => [
-            g(e(I), {
+            g(e(X), {
               variant: "outline",
               onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
               default: b(() => [
-                O(U(e(d)("manager.cancel")), 1)
+                A(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            g(e(I), {
+            g(e(X), {
               type: "primary",
               disabled: t.value === null,
               onClick: s[2] || (s[2] = (u) => e(l)(t.value))
             }, {
               default: b(() => [
-                O(U(e(d)("manager.move")), 1)
+                A(U(e(d)("manager.move")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -398,15 +398,15 @@ const ze = /* @__PURE__ */ S({
     confirmText: { default: void 0 }
   },
   setup(a) {
-    const i = a, { open: n, resolve: l, dismiss: r } = ye(), d = H("webx-media"), v = R(i.value), t = oe("input");
+    const i = a, { open: n, resolve: l, dismiss: r } = ye(), d = I("webx-media"), v = R(i.value), t = oe("input");
     Fe(async () => {
-      await Qe(), t.value?.querySelector("input")?.focus();
+      await Je(), t.value?.querySelector("input")?.focus();
     });
     function x() {
-      const y = v.value.trim();
-      y !== "" && l(y);
+      const w = v.value.trim();
+      w !== "" && l(w);
     }
-    return (y, s) => (w(), T(e(he), {
+    return (w, s) => (h(), z(e(he), {
       open: e(n),
       "onUpdate:open": s[2] || (s[2] = (u) => ve(n) ? n.value = u : null),
       title: a.title,
@@ -415,22 +415,22 @@ const ze = /* @__PURE__ */ S({
       footer: b(() => [
         g(e(we), { size: "sm" }, {
           default: b(() => [
-            g(e(I), {
+            g(e(X), {
               variant: "outline",
               onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
               default: b(() => [
-                O(U(e(d)("manager.cancel")), 1)
+                A(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            g(e(I), {
+            g(e(X), {
               type: "primary",
               disabled: v.value.trim() === "",
               onClick: x
             }, {
               default: b(() => [
-                O(U(a.confirmText ?? e(d)("manager.save")), 1)
+                A(U(a.confirmText ?? e(d)("manager.save")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -439,7 +439,7 @@ const ze = /* @__PURE__ */ S({
         })
       ]),
       default: b(() => [
-        V("div", {
+        T("div", {
           ref_key: "input",
           ref: t
         }, [
@@ -448,7 +448,7 @@ const ze = /* @__PURE__ */ S({
             "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: Ze(x, ["enter"])
+            onKeyup: Qe(x, ["enter"])
           }, null, 8, ["modelValue", "placeholder", "aria-label"])
         ], 512)
       ]),
@@ -597,7 +597,7 @@ function re() {
 const $t = {
   key: 0,
   class: "wx-media__folders"
-}, _t = { class: "wx-media__files" }, Ct = ["accept"], Mt = { class: "wx-media__status" }, Vt = { key: 0 }, Tt = { class: "wx-media__drawer" }, Se = /* @__PURE__ */ S({
+}, _t = { class: "wx-media__files" }, Ct = ["accept"], Mt = { class: "wx-media__status" }, Vt = { key: 0 }, Tt = { class: "wx-media__drawer" }, Be = /* @__PURE__ */ S({
   __name: "MediaManager",
   props: /* @__PURE__ */ q({
     picking: { type: Boolean, default: !1 },
@@ -613,8 +613,8 @@ const $t = {
   setup(a, { expose: i, emit: n }) {
     const l = a, r = n, d = se(), v = be(d);
     re();
-    const t = H("webx-media"), x = tt();
-    function y() {
+    const t = I("webx-media"), x = tt();
+    function w() {
       return {
         title: t("editor.title"),
         saveLabel: t("editor.save"),
@@ -635,14 +635,14 @@ const $t = {
         errorText: t("editor.error")
       };
     }
-    const s = oe("root"), u = rt(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(
+    const s = oe("root"), u = rt(s), k = V(() => u.value > 0 && u.value < 640), y = R([]), o = R(null), $ = R(null), F = R([]), K = R(""), H = O(a, "type");
+    l.accept && (H.value = l.accept), G(
       () => l.accept,
       (p) => {
-        X.value = p ?? "all";
+        H.value = p ?? "all";
       }
     );
-    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(() => Xe(o.value)), ne = z(() => l.picking && !l.multiple);
+    const N = R("-created_at"), ee = R(!1), j = R(!1), te = oe("picker"), ie = V(() => $.value?.data ?? []), Q = V(() => d.can("media.manage")), de = V(() => d.can("media.upload") || Q.value), E = V(() => He(o.value)), ne = V(() => 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);
@@ -652,14 +652,14 @@ const $t = {
         "selection",
         ie.value.filter((f) => p.includes(f.id))
       );
-    }), Fe(c), G([o, X, N], () => m(1)), G(
+    }), Fe(c), G([o, H, N], () => m(1)), G(
       K,
-      je(() => m(1), 300)
+      Ke(() => m(1), 300)
     ), G(k, (p) => {
       p || (j.value = !1);
     });
     async function c() {
-      h.value = await v.directories(), o.value ??= h.value[0]?.id ?? null, await m(1);
+      y.value = await v.directories(), o.value ??= y.value[0]?.id ?? null, await m(1);
     }
     async function m(p = $.value?.meta.current_page ?? 1) {
       ee.value = !0;
@@ -667,7 +667,7 @@ const $t = {
         $.value = await v.files({
           directory_id: K.value ? null : o.value,
           q: K.value,
-          type: X.value === "all" ? null : X.value,
+          type: H.value === "all" ? null : H.value,
           sort: N.value,
           page: p
         }), F.value = [];
@@ -682,7 +682,7 @@ const $t = {
       const f = p.target, _ = Array.from(f.files ?? []);
       if (f.value = "", !(_.length === 0 || o.value === null))
         try {
-          const P = await v.upload(o.value, _), Y = P.filter((Ge) => Ge.duplicate).length;
+          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")));
@@ -719,7 +719,7 @@ const $t = {
         try {
           await v.deleteDirectory(p.id);
         } catch (_) {
-          const P = Ke(_);
+          const P = Xe(_);
           if (!P) {
             J.danger(x(_));
             return;
@@ -745,16 +745,16 @@ const $t = {
       }
       await c();
     }
-    const Pe = ae(bt);
-    async function Oe() {
-      const p = await Pe({
-        directories: h.value,
+    const Ee = ae(bt);
+    async function Pe() {
+      const p = await Ee({
+        directories: y.value,
         from: o.value,
         count: F.value.length
       });
       p !== void 0 && (await v.move([...F.value], p), await Promise.all([c(), m()]));
     }
-    async function Ae() {
+    async function Oe() {
       const p = [...F.value];
       await ue({
         title: t("dialogs.delete-files-title", { count: p.length }),
@@ -764,13 +764,13 @@ const $t = {
         tone: "danger"
       }) && (await v.remove(p), await Promise.all([c(), m()]));
     }
-    async function Ne(p, f) {
+    async function Ae(p, f) {
       await v.rename(p.id, f), await m();
     }
-    async function qe(p) {
+    async function Ne(p) {
       await v.removeOne(p.id), await Promise.all([c(), m()]);
     }
-    async function Ie(p) {
+    async function qe(p) {
       const f = await ct({
         src: p.source ?? p.url,
         fileName: p.file_name,
@@ -778,7 +778,7 @@ const $t = {
         // 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.
-        ...y()
+        ...w()
       });
       f && (await v.edit(p.id, {
         // The editor's frame is read against the picture as it is on screen — already turned — and
@@ -789,10 +789,10 @@ const $t = {
         resize: { width: f.width, height: f.height }
       }), await m());
     }
-    function He(p) {
+    function Ie(p) {
       l.multiple || r("pick", p);
     }
-    function Xe(p) {
+    function He(p) {
       const f = (_) => {
         for (const P of _) {
           if (P.id === p)
@@ -803,32 +803,32 @@ const $t = {
         }
         return null;
       };
-      return p === null ? null : f(h.value);
+      return p === null ? null : f(y.value);
     }
-    function Ke(p) {
+    function Xe(p) {
       const f = p?.body;
       return f?.code === "directory_not_empty" ? f.counts ?? null : null;
     }
     i({ upload: M });
-    function je(p, f) {
+    function Ke(p, f) {
       let _;
       return () => {
         clearTimeout(_), _ = setTimeout(p, f);
       };
     }
-    return (p, f) => (w(), L("div", {
+    return (p, f) => (h(), L("div", {
       ref_key: "root",
       ref: s,
       class: pe(["wx-media", { "wx-media--compact": k.value }])
     }, [
-      k.value ? D("", !0) : (w(), L("aside", $t, [
+      k.value ? D("", !0) : (h(), L("aside", $t, [
         g(ze, {
           selected: o.value,
           "onUpdate:selected": f[0] || (f[0] = (_) => o.value = _),
-          directories: h.value,
+          directories: y.value,
           onMove: Me
         }, null, 8, ["selected", "directories"]),
-        Q.value ? (w(), T(e(le), {
+        Q.value ? (h(), z(e(le), {
           key: 0,
           size: "sm",
           align: "start"
@@ -855,12 +855,12 @@ const $t = {
           _: 1
         })) : D("", !0)
       ])),
-      V("section", _t, [
+      T("section", _t, [
         g(wt, {
           search: K.value,
           "onUpdate:search": f[1] || (f[1] = (_) => K.value = _),
-          type: X.value,
-          "onUpdate:type": f[2] || (f[2] = (_) => X.value = _),
+          type: H.value,
+          "onUpdate:type": f[2] || (f[2] = (_) => H.value = _),
           sort: N.value,
           "onUpdate:sort": f[3] || (f[3] = (_) => N.value = _),
           "can-upload": de.value && !a.inPage,
@@ -869,11 +869,11 @@ const $t = {
           selected: F.value.length,
           compact: k.value,
           onUpload: M,
-          onMove: Oe,
-          onRemove: Ae,
+          onMove: Pe,
+          onRemove: Oe,
           onFolders: f[4] || (f[4] = (_) => j.value = !0)
         }, null, 8, ["search", "type", "sort", "can-upload", "fixed-type", "can-manage", "selected", "compact"]),
-        V("input", {
+        T("input", {
           ref_key: "picker",
           ref: te,
           type: "file",
@@ -889,17 +889,17 @@ const $t = {
           api: e(v),
           query: K.value,
           single: ne.value,
-          onRename: Ne,
-          onEdit: Ie,
-          onRemove: qe,
-          onOpen: He
+          onRename: Ae,
+          onEdit: qe,
+          onRemove: Ne,
+          onOpen: Ie
         }, null, 8, ["selected", "files", "api", "query", "single"]),
-        V("footer", Mt, [
-          V("span", null, U(e(t)("manager.status-files", { count: $.value?.stats.files ?? 0 })), 1),
-          F.value.length > 0 ? (w(), L("span", Vt, 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)
+        T("footer", Mt, [
+          T("span", null, U(e(t)("manager.status-files", { count: $.value?.stats.files ?? 0 })), 1),
+          F.value.length > 0 ? (h(), L("span", Vt, U(e(t)("manager.status-selected", { count: F.value.length })), 1)) : D("", !0),
+          T("span", null, U(e(t)("manager.status-size", { size: e(De)($.value?.stats.size ?? 0) })), 1)
         ]),
-        $.value && $.value.meta.last_page > 1 ? (w(), T(e(dt), {
+        $.value && $.value.meta.last_page > 1 ? (h(), z(e(dt), {
           key: 0,
           page: $.value.meta.current_page,
           "per-page": $.value.meta.per_page,
@@ -918,17 +918,17 @@ const $t = {
         size: 280
       }, {
         default: b(() => [
-          V("div", Tt, [
+          T("div", Tt, [
             g(ze, {
               selected: o.value,
               "onUpdate:selected": [
                 f[7] || (f[7] = (_) => o.value = _),
                 f[8] || (f[8] = (_) => j.value = !1)
               ],
-              directories: h.value,
+              directories: y.value,
               onMove: Me
             }, null, 8, ["selected", "directories"]),
-            Q.value ? (w(), T(e(le), {
+            Q.value ? (h(), z(e(le), {
               key: 0,
               size: "sm",
               align: "start"
@@ -973,16 +973,16 @@ const $t = {
     max: { default: null }
   },
   setup(a) {
-    const { open: i, resolve: n, dismiss: l } = ye(), r = H("webx-media"), d = R([]);
-    return (v, t) => (w(), T(e(he), {
+    const { open: i, resolve: n, dismiss: l } = ye(), r = I("webx-media"), d = R([]);
+    return (v, t) => (h(), z(e(he), {
       open: e(i),
       "onUpdate:open": t[4] || (t[4] = (x) => ve(i) ? i.value = x : null),
       title: a.title ?? e(r)("module.title"),
       width: 960
-    }, We({
+    }, Ze({
       default: b(() => [
-        V("div", zt, [
-          g(Se, {
+        T("div", zt, [
+          g(Be, {
             picking: !a.manage,
             accept: a.manage ? null : a.accept,
             multiple: a.multiple && !a.manage,
@@ -999,24 +999,24 @@ const $t = {
         fn: b(() => [
           g(e(we), { size: "sm" }, {
             default: b(() => [
-              a.max !== null && a.max > 0 ? (w(), L("span", Ut, U(e(r)("manager.chosen", { count: d.value.length, max: a.max })), 1)) : D("", !0),
-              g(e(I), {
+              a.max !== null && a.max > 0 ? (h(), L("span", Ut, U(e(r)("manager.chosen", { count: d.value.length, max: a.max })), 1)) : D("", !0),
+              g(e(X), {
                 variant: "outline",
                 onClick: t[2] || (t[2] = (x) => e(l)())
               }, {
                 default: b(() => [
-                  O(U(e(r)("manager.cancel")), 1)
+                  A(U(e(r)("manager.cancel")), 1)
                 ]),
                 _: 1
               }),
-              g(e(I), {
+              g(e(X), {
                 class: "wx-media-picker__confirm",
                 type: "primary",
                 disabled: d.value.length === 0,
                 onClick: t[3] || (t[3] = (x) => e(n)(d.value))
               }, {
                 default: b(() => [
-                  O(U(e(r)("manager.pick", { count: d.value.length })), 1)
+                  A(U(e(r)("manager.pick", { count: d.value.length })), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -1028,7 +1028,7 @@ const $t = {
       } : void 0
     ]), 1032, ["open", "title"]));
   }
-}), Ee = ae(xe), Ft = ae(xe, {
+}), Se = ae(xe), Ft = ae(xe, {
   props: { multiple: !0 }
 }), Wt = ae(
   xe,
@@ -1064,18 +1064,18 @@ const $t = {
   }),
   emits: ["update:modelValue"],
   setup(a) {
-    const i = a, n = A(a, "modelValue");
+    const i = a, n = O(a, "modelValue");
     re();
-    const l = H("webx-media"), r = et(lt, null), d = r ? be(r) : null, v = {
+    const l = I("webx-media"), r = et(lt, null), d = r ? be(r) : null, v = {
       "16/9": "16 / 9",
       "4/3": "4 / 3",
       "1/1": "1 / 1"
-    }, t = z({
+    }, t = V({
       get: () => Array.isArray(n.value) ? n.value : [],
       set: (c) => {
         n.value = 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();
+    }), x = V(() => i.single ? 1 : i.max ?? null), w = V(() => 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));
@@ -1093,7 +1093,7 @@ const $t = {
       },
       { immediate: !0 }
     );
-    function h(c) {
+    function y(c) {
       s.value = { ...s.value, ...Object.fromEntries(c.map((m) => [m.path, m])) };
     }
     function o(c) {
@@ -1109,10 +1109,10 @@ const $t = {
       const m = o(c);
       return m && d ? d.thumb(m, 320, 320) ?? void 0 : void 0;
     }
-    function X(c) {
+    function H(c) {
       const m = o(c);
       if (!m) return "";
-      const M = Be(m.size);
+      const M = De(m.size);
       return m.width && m.height ? `${m.width}×${m.height} · ${M}` : M;
     }
     const N = R(null);
@@ -1132,7 +1132,7 @@ const $t = {
       if (i.disabled) return;
       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);
+      y(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];
     }
@@ -1144,21 +1144,21 @@ const $t = {
       const m = { ...s.value };
       delete m[c.path], s.value = m, k([c.path]);
     }
-    const E = z(() => {
+    const E = V(() => {
       const c = i.columns ? `repeat(${i.columns}, minmax(0, 1fr))` : "repeat(auto-fill, minmax(140px, 1fr))";
       return i.aspect ? {
         "--wx-media-list-columns": c,
         "--wx-media-list-aspect": v[i.aspect] ?? i.aspect
       } : { "--wx-media-list-columns": c };
-    }), ne = z(() => {
+    }), ne = V(() => {
       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 (c, m) => (w(), L("div", {
+    return (c, m) => (h(), L("div", {
       class: pe(["wx-media-list", [`wx-media-list--${a.layout}`, { "is-disabled": a.disabled }]]),
       style: fe(E.value)
     }, [
-      a.label ? (w(), L("span", Lt, U(a.label), 1)) : D("", !0),
+      a.label ? (h(), L("span", Lt, U(a.label), 1)) : D("", !0),
       g(e(mt), {
         modelValue: t.value,
         "onUpdate:modelValue": m[1] || (m[1] = (M) => t.value = M),
@@ -1171,24 +1171,24 @@ const $t = {
         "empty-text": e(l)("field.empty")
       }, {
         default: b(({ item: M, index: C }) => [
-          V("div", {
+          T("div", {
             class: pe(["wx-media-list__cell", { "is-broken": $(M), "is-busy": N.value === C }])
           }, [
-            g(e(Le), {
+            g(e(We), {
               name: F(M),
               thumbnail: K(M),
               type: o(M)?.mime,
               size: a.layout === "rows" ? "sm" : "md"
             }, {
               meta: b(() => [
-                $(M) ? (w(), L("span", Rt, U(e(l)("field.missing")), 1)) : (w(), L("span", Dt, U(X(M)), 1))
+                $(M) ? (h(), L("span", Rt, U(e(l)("field.missing")), 1)) : (h(), L("span", Dt, U(H(M)), 1))
               ]),
               _: 2
             }, 1032, ["name", "thumbnail", "type", "size"]),
-            a.disabled ? D("", !0) : (w(), L("div", Bt, [
+            a.disabled ? D("", !0) : (h(), L("div", Bt, [
               g(e(le), { size: "sm" }, {
                 default: b(() => [
-                  a.captions ? (w(), T(e(Re), {
+                  a.captions ? (h(), z(e(Le), {
                     key: 0,
                     open: N.value === C,
                     title: e(l)("field.captions"),
@@ -1204,9 +1204,9 @@ const $t = {
                       }, null, 8, ["title"])
                     ]),
                     default: b(() => [
-                      V("div", St, [
-                        V("div", Et, [
-                          m[2] || (m[2] = V("span", { class: "wx-media-list__caption-label" }, "alt", -1)),
+                      T("div", St, [
+                        T("div", Et, [
+                          m[2] || (m[2] = T("span", { class: "wx-media-list__caption-label" }, "alt", -1)),
                           g(e(Z), {
                             localized: "",
                             "model-value": j(C, "alt"),
@@ -1214,8 +1214,8 @@ const $t = {
                             "onUpdate:modelValue": (W) => te(C, "alt", W)
                           }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
                         ]),
-                        V("div", Pt, [
-                          m[3] || (m[3] = V("span", { class: "wx-media-list__caption-label" }, "title", -1)),
+                        T("div", Pt, [
+                          m[3] || (m[3] = T("span", { class: "wx-media-list__caption-label" }, "title", -1)),
                           g(e(Z), {
                             localized: "",
                             "model-value": j(C, "title"),
@@ -1223,14 +1223,14 @@ const $t = {
                             "onUpdate:modelValue": (W) => te(C, "title", W)
                           }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
                         ]),
-                        V("div", Ot, [
-                          g(e(I), {
+                        T("div", Ot, [
+                          g(e(X), {
                             size: "sm",
                             type: "primary",
                             onClick: m[0] || (m[0] = (W) => N.value = null)
                           }, {
                             default: b(() => [
-                              O(U(e(l)("manager.save")), 1)
+                              A(U(e(l)("manager.save")), 1)
                             ]),
                             _: 1
                           })
@@ -1239,13 +1239,13 @@ const $t = {
                     ]),
                     _: 2
                   }, 1032, ["open", "title", "onUpdate:open"])) : D("", !0),
-                  $(M) ? D("", !0) : (w(), T(e(B), {
+                  $(M) ? D("", !0) : (h(), z(e(B), {
                     key: 1,
                     type: "goto",
                     title: e(l)("field.open"),
                     onClick: (W) => de(M)
                   }, null, 8, ["title", "onClick"])),
-                  g(e(De), {
+                  g(e(Re), {
                     title: e(l)("field.remove-title"),
                     description: e(l)("field.remove-text"),
                     "confirm-text": e(l)("field.remove-confirm"),
@@ -1270,19 +1270,19 @@ const $t = {
         ]),
         _: 1
       }, 8, ["modelValue", "disabled", "handle", "drag-label", "empty-text"]),
-      V("div", At, [
-        g(e(I), {
+      T("div", At, [
+        g(e(X), {
           size: "sm",
           variant: "outline",
-          disabled: a.disabled || y.value,
+          disabled: a.disabled || w.value,
           onClick: ie
         }, {
           default: b(() => [
-            O(U(e(l)("field.add")), 1)
+            A(U(e(l)("field.add")), 1)
           ]),
           _: 1
         }, 8, ["disabled"]),
-        ne.value ? (w(), L("span", Nt, U(ne.value), 1)) : D("", !0)
+        ne.value ? (h(), L("span", Nt, U(ne.value), 1)) : D("", !0)
       ])
     ], 6));
   }
@@ -1296,13 +1296,13 @@ const $t = {
   },
   emits: ["update:modelValue"],
   setup(a) {
-    const i = A(a, "modelValue"), n = z({
+    const i = O(a, "modelValue"), n = V({
       get: () => i.value ? [i.value] : [],
       set: (l) => {
         i.value = l[0] ?? null;
       }
     });
-    return (l, r) => (w(), T(ke, ge(l.$attrs, {
+    return (l, r) => (h(), z(ke, ge(l.$attrs, {
       modelValue: n.value,
       "onUpdate:modelValue": r[0] || (r[0] = (d) => n.value = d),
       layout: "rows",
@@ -1319,8 +1319,8 @@ const $t = {
   },
   emits: ["update:modelValue"],
   setup(a) {
-    const i = A(a, "modelValue");
-    return (n, l) => (w(), T(ke, ge(n.$attrs, {
+    const i = O(a, "modelValue");
+    return (n, l) => (h(), z(ke, ge(n.$attrs, {
       modelValue: i.value,
       "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "rows"
@@ -1336,8 +1336,8 @@ const $t = {
   },
   emits: ["update:modelValue"],
   setup(a) {
-    const i = A(a, "modelValue");
-    return (n, l) => (w(), T(ke, ge(n.$attrs, {
+    const i = O(a, "modelValue");
+    return (n, l) => (h(), z(ke, ge(n.$attrs, {
       modelValue: i.value,
       "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "grid",
@@ -1368,9 +1368,9 @@ const $t = {
   }),
   emits: ["update:modelValue"],
   setup(a) {
-    const i = a, n = A(a, "modelValue");
+    const i = a, n = O(a, "modelValue");
     re();
-    const l = H("webx-media"), r = be(se()), d = {
+    const l = I("webx-media"), r = be(se()), d = {
       "16/9": "16 / 9",
       "4/3": "4 / 3",
       "1/1": "1 / 1"
@@ -1384,10 +1384,10 @@ const $t = {
       },
       { immediate: !0 }
     );
-    const x = z(() => {
+    const x = V(() => {
       const o = n.value;
       return o ? o.url ?? t.value[o.path] ?? null : null;
-    }), y = z(
+    }), w = V(
       () => i.aspect ? { aspectRatio: d[i.aspect] ?? i.aspect } : { height: typeof i.height == "number" ? `${i.height}px` : i.height }
     );
     function s(o) {
@@ -1398,38 +1398,38 @@ const $t = {
     }
     async function k() {
       if (i.disabled) return;
-      const o = await Ee({ accept: i.accept });
+      const o = await Se({ accept: i.accept });
       o && (t.value = { ...t.value, [o.path]: o.url }, n.value = { ...n.value, path: o.path, url: o.url });
     }
-    function h() {
+    function y() {
       n.value = null, v.value = !1;
     }
-    return (o, $) => (w(), L("div", Xt, [
-      a.label ? (w(), L("span", Kt, U(a.label), 1)) : D("", !0),
-      n.value ? (w(), L("div", {
+    return (o, $) => (h(), L("div", Xt, [
+      a.label ? (h(), L("span", Kt, U(a.label), 1)) : D("", !0),
+      n.value ? (h(), L("div", {
         key: 2,
         class: "wx-media-field__frame",
-        style: fe(y.value)
+        style: fe(w.value)
       }, [
-        V("button", {
+        T("button", {
           type: "button",
           class: "wx-media-field__picture",
           disabled: a.disabled,
           title: e(l)("field.replace"),
           onClick: k
         }, [
-          x.value ? (w(), T(e(pt), {
+          x.value ? (h(), z(e(pt), {
             key: 0,
             src: x.value,
             fit: "contain",
             width: "100%",
             height: "100%"
-          }, null, 8, ["src"])) : (w(), L("span", Yt, U(e(l)("field.no-preview")), 1))
+          }, null, 8, ["src"])) : (h(), L("span", Yt, U(e(l)("field.no-preview")), 1))
         ], 8, Gt),
-        a.disabled ? D("", !0) : (w(), L("div", Jt, [
+        a.disabled ? D("", !0) : (h(), L("div", Jt, [
           g(e(le), { size: "sm" }, {
             default: b(() => [
-              a.captions ? (w(), T(e(Re), {
+              a.captions ? (h(), z(e(Le), {
                 key: 0,
                 open: v.value,
                 "onUpdate:open": $[3] || ($[3] = (F) => v.value = F),
@@ -1445,9 +1445,9 @@ const $t = {
                   }, null, 8, ["title"])
                 ]),
                 default: b(() => [
-                  V("div", Qt, [
-                    V("div", Zt, [
-                      $[4] || ($[4] = V("label", {
+                  T("div", Qt, [
+                    T("div", Zt, [
+                      $[4] || ($[4] = T("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-alt"
                       }, "alt", -1)),
@@ -1459,8 +1459,8 @@ const $t = {
                         "onUpdate:modelValue": $[0] || ($[0] = (F) => u("alt", F))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    V("div", el, [
-                      $[5] || ($[5] = V("label", {
+                    T("div", el, [
+                      $[5] || ($[5] = T("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-title"
                       }, "title", -1)),
@@ -1472,14 +1472,14 @@ const $t = {
                         "onUpdate:modelValue": $[1] || ($[1] = (F) => u("title", F))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    V("div", tl, [
-                      g(e(I), {
+                    T("div", tl, [
+                      g(e(X), {
                         size: "sm",
                         type: "primary",
                         onClick: $[2] || ($[2] = (F) => v.value = !1)
                       }, {
                         default: b(() => [
-                          O(U(e(l)("manager.save")), 1)
+                          A(U(e(l)("manager.save")), 1)
                         ]),
                         _: 1
                       })
@@ -1488,14 +1488,14 @@ const $t = {
                 ]),
                 _: 1
               }, 8, ["open", "title"])) : D("", !0),
-              g(e(De), {
+              g(e(Re), {
                 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: h
+                onConfirm: y
               }, {
                 trigger: b(() => [
                   g(e(B), {
@@ -1509,12 +1509,12 @@ const $t = {
             _: 1
           })
         ]))
-      ], 4)) : (w(), L("div", {
+      ], 4)) : (h(), L("div", {
         key: 1,
         class: "wx-media-field__frame is-empty",
-        style: fe(y.value)
+        style: fe(w.value)
       }, [
-        V("button", {
+        T("button", {
           type: "button",
           class: "wx-media-field__pick",
           disabled: a.disabled,
@@ -1528,30 +1528,41 @@ const $t = {
   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(() => [
+    const n = I("webx-media"), l = oe("manager"), r = R("all"), d = V(() => r.value), v = V(() => i.can("media.upload") || i.can("media.manage")), t = V(
+      () => i.state.manifest?.modules.find((s) => s.id === "media")?.title ?? n("module.title")
+    ), x = V(() => [
       { value: "all", label: n("manager.all-types") },
-      ...["image", "video", "audio", "document", "other"].map((y) => ({
-        value: y,
-        label: n(`manager.${y}`)
+      ...["image", "video", "audio", "document", "other"].map((s) => ({
+        value: s,
+        label: n(`manager.${s}`)
       }))
-    ]);
-    return (y, s) => (w(), T(e(at), {
+    ]), w = V(
+      () => v.value ? [
+        {
+          key: "upload",
+          label: n("manager.upload"),
+          icon: "upload",
+          primary: !0,
+          run: () => l.value?.upload()
+        }
+      ] : []
+    );
+    return (s, u) => (h(), z(e(at), {
       view: r.value,
-      "onUpdate:view": s[1] || (s[1] = (u) => r.value = u),
+      "onUpdate:view": u[0] || (u[0] = (k) => r.value = k),
       title: t.value,
       views: x.value,
+      actions: w.value,
       card: !1,
       fill: ""
-    }, We({
+    }, {
       default: b(() => [
         g(e(ft), {
           class: "wx-media-page",
           padding: "md"
         }, {
           default: b(() => [
-            g(Se, {
+            g(Be, {
               ref_key: "manager",
               ref: l,
               type: d.value,
@@ -1561,25 +1572,8 @@ const $t = {
           _: 1
         })
       ]),
-      _: 2
-    }, [
-      v.value ? {
-        name: "actions",
-        fn: b(() => [
-          g(e(I), {
-            type: "primary",
-            icon: "upload",
-            onClick: s[0] || (s[0] = (u) => l.value?.upload())
-          }, {
-            default: b(() => [
-              O(U(e(n)("manager.upload")), 1)
-            ]),
-            _: 1
-          })
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1032, ["view", "title", "views"]));
+      _: 1
+    }, 8, ["view", "title", "views", "actions"]));
   }
 });
 function sl(a = {}) {
@@ -1611,7 +1605,7 @@ function sl(a = {}) {
      * has no image button in its editors.
      */
     pickImage: async () => {
-      const n = await Ee({ accept: "image" });
+      const n = await Se({ accept: "image" });
       return n ? { url: n.url, path: n.path } : null;
     }
   };
@@ -1621,7 +1615,7 @@ export {
   It as WxFilesField,
   Ht as WxGalleryField,
   ll as WxMediaField,
-  Se as WxMediaManager,
+  Be as WxMediaManager,
   al as WxMediaPage,
   xe as WxMediaPicker,
   be as createMediaApi,
@@ -1629,6 +1623,6 @@ export {
   kt as mediaMessages,
   Ft as openMediaFiles,
   Wt as openMediaLibrary,
-  Ee as openMediaPicker
+  Se as openMediaPicker
 };
 //# sourceMappingURL=index.js.map