@webx-ui/module-banners 0.3.2 → 0.3.3

package/dist/{index-3RALKrkh.js → index-QnpLuOX2.js}

@@ -1,39 +1,39 @@
-import { provide as Vt, inject as zt, defineComponent as lt, computed as v, openBlock as f, createElementBlock as x, createElementVNode as g, createVNode as d, unref as e, withCtx as m, createTextVNode as O, toDisplayString as z, Fragment as H, createBlock as W, createCommentVNode as I, isRef as me, renderList as oe, normalizeClass as J, normalizeStyle as xe, ref as te, reactive as _t, watch as Ct, onMounted as St, onBeforeUnmount as Ot, resolveDynamicComponent as Bt, withModifiers as Ee, defineAsyncComponent as at } from "vue";
-import { useLocales as nt, WxInput as Ze, WxButton as E, WxIcon as F, WxFormItem as S, WxTextarea as Lt, WxText as Y, WxSelect as ye, WxInputNumber as ge, WxSwitch as _e, WxSegmented as st, WxColorPicker as Nt, WxTooltip as qe, WxSortableList as Pt } from "@webx-ui/core";
-import { useAdmin as ot, useTranslate as it, WxLinkField as Ut } from "@webx-ui/module-admin";
-import { WxMediaField as Wt, createMediaApi as Tt } from "@webx-ui/module-media";
-function It(t) {
+import { provide as St, inject as _t, defineComponent as lt, computed as v, openBlock as f, createElementBlock as x, createElementVNode as w, createVNode as d, unref as e, withCtx as m, createTextVNode as _, toDisplayString as V, Fragment as H, createBlock as W, createCommentVNode as I, isRef as ye, renderList as ie, normalizeClass as J, normalizeStyle as ke, ref as ae, reactive as Ot, watch as Bt, onMounted as Lt, onBeforeUnmount as Nt, resolveDynamicComponent as Pt, withModifiers as De, defineAsyncComponent as nt } from "vue";
+import { useLocales as st, WxInput as qe, WxPopconfirm as ot, WxButton as E, WxIcon as F, WxFormItem as S, WxTextarea as Tt, WxText as Y, WxSelect as pe, WxInputNumber as xe, WxSwitch as Se, WxSegmented as it, WxColorPicker as Ut, WxTooltip as Ge, WxSortableList as Wt } from "@webx-ui/core";
+import { useAdmin as rt, useTranslate as dt, useRemoveConfirm as ut, WxLinkField as It } from "@webx-ui/module-admin";
+import { WxMediaField as Et, createMediaApi as Dt } from "@webx-ui/module-media";
+function At(t) {
   const c = `${t.apiPath}/banners`, r = (s) => `${c}/places/${encodeURIComponent(s)}`, y = (s) => s.data;
   return {
     places: () => t.http.get(`${c}/places`).then(y),
     createPlace: (s) => t.http.post(`${c}/places`, s).then(y),
-    renamePlace: (s, w) => t.http.put(r(s), { title: w }).then(y),
+    renamePlace: (s, g) => t.http.put(r(s), { title: g }).then(y),
     removePlace: (s) => t.http.delete(r(s)).then(() => {
     }),
-    list: (s, w = !1) => t.http.get(`${r(s)}/banners${w ? "?trashed=1" : ""}`).then(y),
+    list: (s, g = !1) => t.http.get(`${r(s)}/banners${g ? "?trashed=1" : ""}`).then(y),
     get: (s) => t.http.get(`${c}/${s}`).then(y),
-    create: (s, w) => t.http.post(`${r(s)}/banners`, { values: w }).then(y),
-    save: (s, w, B) => t.http.put(
+    create: (s, g) => t.http.post(`${r(s)}/banners`, { values: g }).then(y),
+    save: (s, g, O) => t.http.put(
       `${c}/${s}`,
-      B === void 0 ? { values: w } : { values: w, place: B }
+      O === void 0 ? { values: g } : { values: g, place: O }
     ).then(y),
     remove: (s) => t.http.delete(`${c}/${s}`).then(() => {
     }),
     // The resource of the list line, and not the form's pair: a restored banner stays closed.
     restore: (s) => t.http.post(`${c}/${s}/restore`, {}).then(y),
-    reorder: (s, w) => t.http.post(`${r(s)}/reorder`, { ids: w }).then(() => {
+    reorder: (s, g) => t.http.post(`${r(s)}/reorder`, { ids: g }).then(() => {
     }),
     theme: () => t.http.get(`${c}/theme`).then(y)
   };
 }
-const rt = /* @__PURE__ */ Symbol("wx-banner-editor");
-function El(t) {
-  Vt(rt, t);
+const ct = /* @__PURE__ */ Symbol("wx-banner-editor");
+function Ma(t) {
+  St(ct, t);
 }
-function Et() {
-  return zt(rt, null);
+function Mt() {
+  return _t(ct, null);
 }
-const Dt = {
+const Ft = {
   module: {
     banners: "Banners"
   },
@@ -228,15 +228,15 @@ const Dt = {
     "loop-spin": "Spin",
     "loop-float": "Float"
   }
-}, Ge = /* @__PURE__ */ new WeakSet();
-function At() {
+}, Xe = /* @__PURE__ */ new WeakSet();
+function Rt() {
   try {
-    const { i18n: t } = ot();
-    Ge.has(t) || (t.defaults("webx-banners", Dt), Ge.add(t));
+    const { i18n: t } = rt();
+    Xe.has(t) || (t.defaults("webx-banners", Ft), Xe.add(t));
   } catch {
   }
 }
-const ke = {
+const $e = {
   x: [-50, 150, 5],
   y: [-50, 150, 5],
   w: [1, 150, 40],
@@ -246,7 +246,7 @@ const ke = {
   tracking: [-0.2, 1, 0],
   rotate: [-180, 180, 0],
   gap: [0, 10, 1]
-}, Mt = ["tl", "t", "tr", "l", "c", "r", "bl", "b", "br"], Ft = {
+}, Kt = ["tl", "t", "tr", "l", "c", "r", "bl", "b", "br"], jt = {
   tl: [0, 0],
   t: [-50, 0],
   tr: [-100, 0],
@@ -256,8 +256,8 @@ const ke = {
   bl: [0, -100],
   b: [-50, -100],
   br: [-100, -100]
-}, Xe = ["fade", "rise", "slide-start", "slide-end", "zoom"], Ye = ["spin", "float"], Rt = ["title", "text"];
-function ie(t = {}) {
+}, Ye = ["fade", "rise", "slide-start", "slide-end", "zoom"], Qe = ["spin", "float"], Jt = ["title", "text"];
+function re(t = {}) {
   return {
     x: 5,
     y: 5,
@@ -273,7 +273,7 @@ function ie(t = {}) {
     ...t
   };
 }
-function Ce(t = {}) {
+function _e(t = {}) {
   return {
     font: null,
     weight: 400,
@@ -288,13 +288,13 @@ function Ce(t = {}) {
     ...t
   };
 }
-function Se(t = {}) {
+function Oe(t = {}) {
   return { in: null, loop: null, delay: 0, duration: 600, ...t };
 }
-function De(t) {
+function Ae(t) {
   return JSON.parse(JSON.stringify(t));
 }
-function dt(t = []) {
+function mt(t = []) {
   const c = new Set(t);
   let r = "";
   do
@@ -302,21 +302,21 @@ function dt(t = []) {
   while (c.has(r) || !/^[a-z0-9]{4,12}$/.test(r));
   return r;
 }
-function Qe(t, c, r) {
-  const y = { id: dt(c), type: t, style: Ce(), motion: Se() };
+function et(t, c, r) {
+  const y = { id: mt(c), type: t, style: _e(), motion: Oe() };
   switch (t) {
     case "text":
       return {
         ...y,
         text: { [r]: "Text" },
         tag: "p",
-        frames: { desktop: ie({ x: 10, y: 10, size: 2.4 }), mobile: null }
+        frames: { desktop: re({ x: 10, y: 10, size: 2.4 }), mobile: null }
       };
     case "image":
       return {
         ...y,
         image: null,
-        frames: { desktop: ie({ x: 60, y: 10, w: 20 }), mobile: null }
+        frames: { desktop: re({ x: 60, y: 10, w: 20 }), mobile: null }
       };
     case "button":
       return {
@@ -324,18 +324,18 @@ function Qe(t, c, r) {
         text: { [r]: "Button" },
         link: null,
         variant: null,
-        frames: { desktop: ie({ x: 10, y: 25, w: 30, size: 1.2 }), mobile: null }
+        frames: { desktop: re({ x: 10, y: 25, w: 30, size: 1.2 }), mobile: null }
       };
     case "buttons":
       return {
         ...y,
-        frames: { desktop: ie({ x: 6, y: 27, w: 50, size: 1.2 }), mobile: null }
+        frames: { desktop: re({ x: 6, y: 27, w: 50, size: 1.2 }), mobile: null }
       };
   }
 }
-function Dl(t) {
+function Fa(t) {
   const c = [], r = (y) => {
-    const s = { ...y, id: dt(c) };
+    const s = { ...y, id: mt(c) };
     return c.push(s.id), s;
   };
   return [
@@ -343,67 +343,67 @@ function Dl(t) {
       type: "text",
       text: { [t]: "{title}" },
       tag: "h2",
-      style: Ce({ weight: 700, line_height: 1.05, color: "#ffffff", shadow: !0 }),
-      frames: { desktop: ie({ x: 6, y: 6, w: 45, size: 4.2 }), mobile: null },
-      motion: Se({ in: "rise" })
+      style: _e({ weight: 700, line_height: 1.05, color: "#ffffff", shadow: !0 }),
+      frames: { desktop: re({ x: 6, y: 6, w: 45, size: 4.2 }), mobile: null },
+      motion: Oe({ in: "rise" })
     }),
     r({
       type: "text",
       text: { [t]: "{text}" },
       tag: "p",
-      style: Ce({ line_height: 1.4, color: "#ffffff", shadow: !0 }),
-      frames: { desktop: ie({ x: 6, y: 18, w: 40, size: 1.4 }), mobile: null },
-      motion: Se({ in: "rise", delay: 150 })
+      style: _e({ line_height: 1.4, color: "#ffffff", shadow: !0 }),
+      frames: { desktop: re({ x: 6, y: 18, w: 40, size: 1.4 }), mobile: null },
+      motion: Oe({ in: "rise", delay: 150 })
     }),
     r({
       type: "buttons",
-      style: Ce(),
-      frames: { desktop: ie({ x: 6, y: 28, w: 50, size: 1.2 }), mobile: null },
-      motion: Se({ in: "rise", delay: 300 })
+      style: _e(),
+      frames: { desktop: re({ x: 6, y: 28, w: 50, size: 1.2 }), mobile: null },
+      motion: Oe({ in: "rise", delay: 300 })
     })
   ];
 }
-function Kt(t, c, r, y) {
+function Ht(t, c, r, y) {
   const s = t ?? {};
-  return ([.../* @__PURE__ */ new Set([c, ...r, ...Object.keys(s)])].map((T) => s[T]).find((T) => (T ?? "").trim() !== "") ?? "").replaceAll("{title}", y.title ?? "").replaceAll("{text}", y.text ?? "").trim();
+  return ([.../* @__PURE__ */ new Set([c, ...r, ...Object.keys(s)])].map((L) => s[L]).find((L) => (L ?? "").trim() !== "") ?? "").replaceAll("{title}", y.title ?? "").replaceAll("{text}", y.text ?? "").trim();
 }
-function jt(t) {
-  return [...t.matchAll(/\{([a-z_.]+)\}/g)].map((c) => c[1] ?? "").filter((c) => !Rt.includes(c));
+function Zt(t) {
+  return [...t.matchAll(/\{([a-z_.]+)\}/g)].map((c) => c[1] ?? "").filter((c) => !Jt.includes(c));
 }
-function et(t) {
+function tt(t) {
   if (typeof t != "string") return null;
   if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/.test(t)) return t;
   const c = /^token:([a-z][a-z0-9-]{0,40})$/.exec(t);
   return c ? `var(--site-color-${c[1]})` : null;
 }
-const ut = (t) => Math.round(t * 100) / 100;
-function Jt(t, c) {
+const bt = (t) => Math.round(t * 100) / 100;
+function qt(t, c) {
   const r = {}, y = t.frames.desktop, s = t.frames.mobile ?? y;
-  for (const [T, C] of [
+  for (const [L, Q] of [
     ["", y],
     ["m-", s]
   ]) {
-    for (const V of Object.keys(ke))
-      r[`--${T}${V}`] = String(ut(C[V]));
-    const [p, k] = Ft[C.origin] ?? [0, 0];
-    r[`--${T}ox`] = `${p}%`, r[`--${T}oy`] = `${k}%`, r[`--${T}display`] = C.hidden ? "none" : "block";
+    for (const k of Object.keys($e))
+      r[`--${L}${k}`] = String(bt(Q[k]));
+    const [p, B] = jt[Q.origin] ?? [0, 0];
+    r[`--${L}ox`] = `${p}%`, r[`--${L}oy`] = `${B}%`, r[`--${L}display`] = Q.hidden ? "none" : "block";
   }
   r["--weight"] = String(t.style.weight), r["--leading"] = String(t.style.line_height), r["--opacity"] = String(t.style.opacity), r["--align"] = t.style.align;
-  const w = et(t.style.color), B = et(t.style.background);
-  return w && (r["--color"] = w), B && (r["--background"] = B), t.style.font && (r["--font"] = `var(--site-font-${t.style.font})`), r["z-index"] = String(c), r;
+  const g = tt(t.style.color), O = tt(t.style.background);
+  return g && (r["--color"] = g), O && (r["--background"] = O), t.style.font && (r["--font"] = `var(--site-font-${t.style.font})`), r["z-index"] = String(c), r;
 }
-function Ht(t) {
+function Gt(t) {
   const c = ["webx-banner__layer", `webx-banner__layer--${t.type}`];
   return t.style.italic && c.push("is-italic"), t.style.uppercase && c.push("is-uppercase"), t.style.shadow && c.push("is-shadow"), t.style.background && c.push("has-background"), c;
 }
-function tt(t, c) {
+function at(t, c) {
   if (typeof t == "number") return t > 0 ? t : c;
   const r = /^\s*(\d+(?:\.\d+)?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\s*$/.exec(t ?? "");
   if (!r) return c;
   const y = Number(r[1]) / Number(r[2] ?? 1);
   return Number.isFinite(y) && y > 0 ? y : c;
 }
-function Zt(t, c) {
+function Xt(t, c) {
   if (t > c) {
     const y = c / t * 100;
     return { left: (100 - y) / 2, top: 0, width: y, height: 100 };
@@ -411,18 +411,18 @@ function Zt(t, c) {
   const r = t / c * 100;
   return { left: 0, top: (100 - r) / 2, width: 100, height: r };
 }
-function qt(t) {
+function Yt(t) {
   const c = { ...t };
-  for (const r of Object.keys(ke)) {
-    const [y, s] = ke[r];
-    c[r] = ut(Math.min(s, Math.max(y, Number(c[r]) || 0)));
+  for (const r of Object.keys($e)) {
+    const [y, s] = $e[r];
+    c[r] = bt(Math.min(s, Math.max(y, Number(c[r]) || 0)));
   }
   return c;
 }
-const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-layer-inspector__head" }, Yt = { class: "wx-banner-layer-inspector__fields" }, Qt = { class: "wx-banner-layer-inspector__group" }, el = { class: "wx-banner-layer-inspector__title" }, tl = { class: "wx-banner-layer-inspector__grid" }, ll = ["aria-label"], al = ["aria-checked", "aria-label", "disabled", "onClick"], nl = {
+const Qt = { class: "wx-banner-layer-inspector" }, ea = { class: "wx-banner-layer-inspector__head" }, ta = { class: "wx-banner-layer-inspector__fields" }, aa = { class: "wx-banner-layer-inspector__group" }, la = { class: "wx-banner-layer-inspector__title" }, na = { class: "wx-banner-layer-inspector__grid" }, sa = ["aria-label"], oa = ["aria-checked", "aria-label", "disabled", "onClick"], ia = {
   key: 5,
   class: "wx-banner-layer-inspector__group"
-}, sl = { class: "wx-banner-layer-inspector__grid" }, ol = { class: "wx-banner-layer-inspector__switches" }, il = { class: "wx-banner-layer-inspector__color" }, rl = ["title", "aria-label", "disabled", "onClick"], dl = { class: "wx-banner-layer-inspector__group" }, ul = { class: "wx-banner-layer-inspector__grid" }, cl = /* @__PURE__ */ lt({
+}, ra = { class: "wx-banner-layer-inspector__grid" }, da = { class: "wx-banner-layer-inspector__switches" }, ua = { class: "wx-banner-layer-inspector__color" }, ca = ["title", "aria-label", "disabled", "onClick"], ma = { class: "wx-banner-layer-inspector__group" }, ba = { class: "wx-banner-layer-inspector__grid" }, ya = /* @__PURE__ */ lt({
   name: "WxBannerLayerInspector",
   __name: "LayerInspector",
   props: {
@@ -435,81 +435,81 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
   },
   emits: ["update", "frame", "same-as-desktop", "delete"],
   setup(t, { emit: c }) {
-    const r = t, y = c, s = it("webx-banners"), w = nt(), B = v(
+    const r = t, y = c, s = dt("webx-banners"), g = ut(), O = st(), L = v(
       () => r.view === "mobile" ? r.layer.frames.mobile ?? r.layer.frames.desktop : r.layer.frames.desktop
-    ), T = v(() => r.view === "mobile" && r.layer.frames.mobile !== null);
-    function C(u) {
-      const a = De(r.layer);
-      u(a), y("update", a);
+    ), Q = v(() => r.view === "mobile" && r.layer.frames.mobile !== null);
+    function p(u) {
+      const l = Ae(r.layer);
+      u(l), y("update", l);
     }
-    function p(u, a) {
-      C((o) => {
-        o.style[u] = a;
+    function B(u, l) {
+      p((o) => {
+        o.style[u] = l;
       });
     }
-    const k = v(() => r.layer.type === "text" || r.layer.type === "button"), V = v({
+    const k = v(() => r.layer.type === "text" || r.layer.type === "button"), C = v({
       get: () => r.layer.text ?? {},
-      set: (u) => C((a) => {
-        a.text = u;
+      set: (u) => p((l) => {
+        l.text = u;
       })
     }), D = v({
       get: () => r.layer.name ?? "",
-      set: (u) => C((a) => {
-        a.name = u;
+      set: (u) => p((l) => {
+        l.name = u;
       })
-    }), N = v(() => jt(V.value[w.active.value] ?? "")), Q = v(() => N.value.map((u) => `{${u}}`).join(", ")), Z = v(() => {
-      const u = V.value, a = w.active.value;
-      return (u[a] ?? "").trim() !== "" ? null : [...w.list.value.map((o) => o.code), ...Object.keys(u)].find(
+    }), P = v(() => Zt(C.value[O.active.value] ?? "")), ee = v(() => P.value.map((u) => `{${u}}`).join(", ")), Z = v(() => {
+      const u = C.value, l = O.active.value;
+      return (u[l] ?? "").trim() !== "" ? null : [...O.list.value.map((o) => o.code), ...Object.keys(u)].find(
         (o) => (u[o] ?? "").trim() !== ""
       ) ?? null;
     });
-    function $e(u) {
-      const a = w.active.value, o = V.value[a] ?? "";
-      V.value = { ...V.value, [a]: `${o}${o === "" ? "" : " "}{${u}}` };
+    function Ve(u) {
+      const l = O.active.value, o = C.value[l] ?? "";
+      C.value = { ...C.value, [l]: `${o}${o === "" ? "" : " "}{${u}}` };
     }
     const A = v({
       get: () => r.layer.image ?? null,
-      set: (u) => C((a) => {
-        a.image = u;
+      set: (u) => p((l) => {
+        l.image = u;
       })
     }), R = v({
       get: () => r.layer.link ?? null,
-      set: (u) => C((a) => {
-        a.link = u;
+      set: (u) => p((l) => {
+        l.link = u;
       })
-    }), q = (u, a) => v({
+    }), q = (u, l) => v({
       get: () => u(),
-      set: (o) => a(o)
+      set: (o) => l(o)
     }), G = q(
       () => r.layer.tag ?? "p",
-      (u) => C((a) => {
-        a.tag = u;
+      (u) => p((l) => {
+        l.tag = u;
       })
-    ), re = q(
+    ), de = q(
       () => r.layer.variant ?? r.variants[0]?.value ?? null,
-      (u) => C((a) => {
-        a.variant = u;
+      (u) => p((l) => {
+        l.variant = u;
       })
     ), le = q(
       () => r.layer.style.font ?? "site",
-      (u) => p("font", u === "heading" || u === "body" ? u : null)
-    ), ae = q(
+      (u) => B("font", u === "heading" || u === "body" ? u : null)
+    ), ne = q(
       () => r.layer.style.weight,
-      (u) => p("weight", Number(u))
+      (u) => B("weight", Number(u))
     ), M = v({
       get: () => r.layer.style.align,
-      set: (u) => p("align", u)
+      set: (u) => B("align", u)
     }), K = q(
       () => r.layer.motion.in ?? "none",
-      (u) => C((a) => {
-        a.motion.in = Xe.includes(u) ? u : null;
+      (u) => p((l) => {
+        l.motion.in = Ye.includes(u) ? u : null;
       })
     ), j = q(
       () => r.layer.motion.loop ?? "none",
-      (u) => C((a) => {
-        a.motion.loop = Ye.includes(u) ? u : null;
+      (u) => p((l) => {
+        l.motion.loop = Qe.includes(u) ? u : null;
       })
-    ), Oe = v(() => {
+    ), Be = v(() => {
       switch (r.layer.type) {
         case "image":
           return ["x", "y", "w", "radius", "rotate"];
@@ -518,7 +518,7 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
         default:
           return ["x", "y", "w", "size", "pad", "radius", "tracking", "rotate"];
       }
-    }), de = {
+    }), ue = {
       x: 0.05,
       y: 0.05,
       w: 0.5,
@@ -529,63 +529,76 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
       rotate: 1,
       gap: 0.1
     };
-    function pe(u, a) {
-      a === null || Number.isNaN(a) || y("frame", { [u]: a });
+    function fe(u, l) {
+      l === null || Number.isNaN(l) || y("frame", { [u]: l });
     }
-    function Be(u) {
+    function Le(u) {
       y("frame", { origin: u });
     }
-    const Le = v(() => [
+    const Ne = v(() => [
       { value: "site", label: s("layers.font-site") },
       { value: "heading", label: s("layers.font-heading") },
       { value: "body", label: s("layers.font-body") }
-    ]), Ne = [100, 200, 300, 400, 500, 600, 700, 800, 900].map((u) => ({
+    ]), Pe = [100, 200, 300, 400, 500, 600, 700, 800, 900].map((u) => ({
       value: u,
       label: String(u)
-    })), Ve = v(() => [
+    })), ze = v(() => [
       { value: "start", label: s("layers.align-start") },
       { value: "center", label: s("layers.align-center") },
       { value: "end", label: s("layers.align-end") }
     ]), X = v(() => [
       { value: "none", label: s("layers.motion-none") },
-      ...Xe.map((u) => ({ value: u, label: s(`layers.in-${u}`) }))
-    ]), ue = v(() => [
+      ...Ye.map((u) => ({ value: u, label: s(`layers.in-${u}`) }))
+    ]), ce = v(() => [
       { value: "none", label: s("layers.motion-none") },
-      ...Ye.map((u) => ({ value: u, label: s(`layers.loop-${u}`) }))
+      ...Qe.map((u) => ({ value: u, label: s(`layers.loop-${u}`) }))
     ]);
-    function Pe(u) {
-      const a = r.layer.style[u];
-      return a === null ? null : a.startsWith("token:") ? r.palette.find((o) => `token:${o.key}` === a)?.value ?? null : a;
+    function Te(u) {
+      const l = r.layer.style[u];
+      return l === null ? null : l.startsWith("token:") ? r.palette.find((o) => `token:${o.key}` === l)?.value ?? null : l;
     }
-    function fe(u, a) {
-      const o = typeof a == "string" && /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(a) ? a.toLowerCase() : null;
-      p(u, o);
+    function ve(u, l) {
+      const o = typeof l == "string" && /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(l) ? l.toLowerCase() : null;
+      B(u, o);
     }
-    return (u, a) => (f(), x("div", Gt, [
-      g("div", Xt, [
-        d(e(Ze), {
+    return (u, l) => (f(), x("div", Qt, [
+      w("div", ea, [
+        d(e(qe), {
           modelValue: D.value,
-          "onUpdate:modelValue": a[0] || (a[0] = (o) => D.value = o),
+          "onUpdate:modelValue": l[0] || (l[0] = (o) => D.value = o),
           size: "sm",
           placeholder: e(s)("layers.name"),
           "aria-label": e(s)("layers.name"),
           disabled: t.disabled
         }, null, 8, ["modelValue", "placeholder", "aria-label", "disabled"]),
-        d(e(E), {
-          size: "sm",
-          variant: "outline",
-          danger: "",
+        d(e(ot), {
+          title: e(g).confirm,
+          "confirm-text": e(g).confirmText,
+          "cancel-text": e(g).cancelText,
+          "confirm-type": "danger",
+          side: "bottom",
+          align: "end",
           disabled: t.disabled,
-          onClick: a[1] || (a[1] = (o) => y("delete"))
+          onConfirm: l[1] || (l[1] = (o) => y("delete"))
         }, {
-          icon: m(() => [
-            d(e(F), { name: "trash" })
-          ]),
-          default: m(() => [
-            O(" " + z(e(s)("layers.delete")), 1)
+          trigger: m(() => [
+            d(e(E), {
+              size: "sm",
+              variant: "outline",
+              danger: "",
+              disabled: t.disabled
+            }, {
+              icon: m(() => [
+                d(e(F), { name: "trash" })
+              ]),
+              default: m(() => [
+                _(" " + V(e(s)("layers.delete")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
           ]),
           _: 1
-        }, 8, ["disabled"])
+        }, 8, ["title", "confirm-text", "cancel-text", "disabled"])
       ]),
       k.value ? (f(), x(H, { key: 0 }, [
         d(e(S), {
@@ -593,32 +606,32 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           help: Z.value ? e(s)("layers.falls-back", { code: Z.value.toUpperCase() }) : e(s)("layers.words-help")
         }, {
           default: m(() => [
-            t.layer.type === "text" ? (f(), W(e(Lt), {
+            t.layer.type === "text" ? (f(), W(e(Tt), {
               key: 0,
-              modelValue: V.value,
-              "onUpdate:modelValue": a[2] || (a[2] = (o) => V.value = o),
+              modelValue: C.value,
+              "onUpdate:modelValue": l[2] || (l[2] = (o) => C.value = o),
               localized: "",
               rows: 2,
               disabled: t.disabled
-            }, null, 8, ["modelValue", "disabled"])) : (f(), W(e(Ze), {
+            }, null, 8, ["modelValue", "disabled"])) : (f(), W(e(qe), {
               key: 1,
-              modelValue: V.value,
-              "onUpdate:modelValue": a[3] || (a[3] = (o) => V.value = o),
+              modelValue: C.value,
+              "onUpdate:modelValue": l[3] || (l[3] = (o) => C.value = o),
               localized: "",
               disabled: t.disabled
             }, null, 8, ["modelValue", "disabled"]))
           ]),
           _: 1
         }, 8, ["label", "help"]),
-        g("div", Yt, [
+        w("div", ta, [
           d(e(E), {
             size: "sm",
             variant: "text",
             disabled: t.disabled,
-            onClick: a[4] || (a[4] = (o) => $e("title"))
+            onClick: l[4] || (l[4] = (o) => Ve("title"))
           }, {
-            default: m(() => [...a[24] || (a[24] = [
-              O("+ {title}", -1)
+            default: m(() => [...l[24] || (l[24] = [
+              _("+ {title}", -1)
             ])]),
             _: 1
           }, 8, ["disabled"]),
@@ -626,21 +639,21 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             size: "sm",
             variant: "text",
             disabled: t.disabled,
-            onClick: a[5] || (a[5] = (o) => $e("text"))
+            onClick: l[5] || (l[5] = (o) => Ve("text"))
           }, {
-            default: m(() => [...a[25] || (a[25] = [
-              O("+ {text}", -1)
+            default: m(() => [...l[25] || (l[25] = [
+              _("+ {text}", -1)
             ])]),
             _: 1
           }, 8, ["disabled"])
         ]),
-        N.value.length > 0 ? (f(), W(e(Y), {
+        P.value.length > 0 ? (f(), W(e(Y), {
           key: 0,
           size: "sm",
           tone: "warning"
         }, {
           default: m(() => [
-            O(z(e(s)("layers.unknown-field", { fields: Q.value })), 1)
+            _(V(e(s)("layers.unknown-field", { fields: ee.value })), 1)
           ]),
           _: 1
         })) : I("", !0)
@@ -650,9 +663,9 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
         label: e(s)("layers.tag")
       }, {
         default: m(() => [
-          d(e(ye), {
+          d(e(pe), {
             modelValue: e(G),
-            "onUpdate:modelValue": a[6] || (a[6] = (o) => me(G) ? G.value = o : null),
+            "onUpdate:modelValue": l[6] || (l[6] = (o) => ye(G) ? G.value = o : null),
             options: t.tags,
             size: "sm",
             disabled: t.disabled
@@ -665,9 +678,9 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
         label: e(s)("layers.image")
       }, {
         default: m(() => [
-          d(e(Wt), {
+          d(e(Et), {
             modelValue: A.value,
-            "onUpdate:modelValue": a[7] || (a[7] = (o) => A.value = o),
+            "onUpdate:modelValue": l[7] || (l[7] = (o) => A.value = o),
             accept: "image",
             aspect: null,
             height: 120,
@@ -681,9 +694,9 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           label: e(s)("layers.link")
         }, {
           default: m(() => [
-            d(e(Ut), {
+            d(e(It), {
               modelValue: R.value,
-              "onUpdate:modelValue": a[8] || (a[8] = (o) => R.value = o),
+              "onUpdate:modelValue": l[8] || (l[8] = (o) => R.value = o),
               "allow-none": !1,
               disabled: t.disabled
             }, null, 8, ["modelValue", "disabled"])
@@ -694,9 +707,9 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           label: e(s)("layers.variant")
         }, {
           default: m(() => [
-            d(e(ye), {
-              modelValue: e(re),
-              "onUpdate:modelValue": a[9] || (a[9] = (o) => me(re) ? re.value = o : null),
+            d(e(pe), {
+              modelValue: e(de),
+              "onUpdate:modelValue": l[9] || (l[9] = (o) => ye(de) ? de.value = o : null),
               options: t.variants,
               size: "sm",
               disabled: t.disabled
@@ -711,30 +724,30 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
         tone: "muted"
       }, {
         default: m(() => [
-          O(z(e(s)("layers.buttons-help")), 1)
+          _(V(e(s)("layers.buttons-help")), 1)
         ]),
         _: 1
       })) : I("", !0),
-      g("section", Qt, [
-        g("div", el, [
+      w("section", aa, [
+        w("div", la, [
           d(e(Y), {
             size: "sm",
             strong: ""
           }, {
             default: m(() => [
-              O(z(t.view === "mobile" ? T.value ? e(s)("layers.geometry-mobile-own") : e(s)("layers.geometry-mobile-same") : e(s)("layers.geometry-desktop")), 1)
+              _(V(t.view === "mobile" ? Q.value ? e(s)("layers.geometry-mobile-own") : e(s)("layers.geometry-mobile-same") : e(s)("layers.geometry-desktop")), 1)
             ]),
             _: 1
           }),
-          T.value ? (f(), W(e(E), {
+          Q.value ? (f(), W(e(E), {
             key: 0,
             size: "sm",
             variant: "text",
             disabled: t.disabled,
-            onClick: a[10] || (a[10] = (o) => y("same-as-desktop"))
+            onClick: l[10] || (l[10] = (o) => y("same-as-desktop"))
           }, {
             default: m(() => [
-              O(z(e(s)("layers.same-as-desktop")), 1)
+              _(V(e(s)("layers.same-as-desktop")), 1)
             ]),
             _: 1
           }, 8, ["disabled"])) : I("", !0)
@@ -744,25 +757,25 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           tone: "muted"
         }, {
           default: m(() => [
-            O(z(e(s)("layers.unit")), 1)
+            _(V(e(s)("layers.unit")), 1)
           ]),
           _: 1
         }),
-        g("div", tl, [
-          (f(!0), x(H, null, oe(Oe.value, (o) => (f(), W(e(S), {
+        w("div", na, [
+          (f(!0), x(H, null, ie(Be.value, (o) => (f(), W(e(S), {
             key: o,
             label: e(s)(`layers.${o}`)
           }, {
             default: m(() => [
-              d(e(ge), {
-                "model-value": B.value[o],
-                min: e(ke)[o][0],
-                max: e(ke)[o][1],
-                step: de[o],
+              d(e(xe), {
+                "model-value": L.value[o],
+                min: e($e)[o][0],
+                max: e($e)[o][1],
+                step: ue[o],
                 precision: 2,
                 size: "sm",
                 disabled: t.disabled,
-                "onUpdate:modelValue": (_) => pe(o, _ ?? null)
+                "onUpdate:modelValue": (z) => fe(o, z ?? null)
               }, null, 8, ["model-value", "min", "max", "step", "disabled", "onUpdate:modelValue"])
             ]),
             _: 2
@@ -773,54 +786,54 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           help: e(s)("layers.origin-help")
         }, {
           default: m(() => [
-            g("div", {
+            w("div", {
               class: "wx-banner-layer-inspector__origins",
               role: "radiogroup",
               "aria-label": e(s)("layers.origin")
             }, [
-              (f(!0), x(H, null, oe(e(Mt), (o) => (f(), x("button", {
+              (f(!0), x(H, null, ie(e(Kt), (o) => (f(), x("button", {
                 key: o,
                 type: "button",
                 role: "radio",
-                "aria-checked": B.value.origin === o,
+                "aria-checked": L.value.origin === o,
                 "aria-label": o,
                 disabled: t.disabled,
                 class: J([
                   "wx-banner-layer-inspector__origin",
-                  { "is-active": B.value.origin === o }
+                  { "is-active": L.value.origin === o }
                 ]),
-                onClick: (_) => Be(o)
-              }, null, 10, al))), 128))
-            ], 8, ll)
+                onClick: (z) => Le(o)
+              }, null, 10, oa))), 128))
+            ], 8, sa)
           ]),
           _: 1
         }, 8, ["label", "help"]),
-        d(e(_e), {
-          "model-value": B.value.hidden,
+        d(e(Se), {
+          "model-value": L.value.hidden,
           label: e(s)("layers.hidden-here"),
           disabled: t.disabled,
-          "onUpdate:modelValue": a[11] || (a[11] = (o) => y("frame", { hidden: o === !0 }))
+          "onUpdate:modelValue": l[11] || (l[11] = (o) => y("frame", { hidden: o === !0 }))
         }, null, 8, ["model-value", "label", "disabled"])
       ]),
-      t.layer.type !== "image" ? (f(), x("section", nl, [
+      t.layer.type !== "image" ? (f(), x("section", ia, [
         d(e(Y), {
           size: "sm",
           strong: ""
         }, {
           default: m(() => [
-            O(z(e(s)("layers.look")), 1)
+            _(V(e(s)("layers.look")), 1)
           ]),
           _: 1
         }),
-        g("div", sl, [
+        w("div", ra, [
           d(e(S), {
             label: e(s)("layers.font")
           }, {
             default: m(() => [
-              d(e(ye), {
+              d(e(pe), {
                 modelValue: e(le),
-                "onUpdate:modelValue": a[12] || (a[12] = (o) => me(le) ? le.value = o : null),
-                options: Le.value,
+                "onUpdate:modelValue": l[12] || (l[12] = (o) => ye(le) ? le.value = o : null),
+                options: Ne.value,
                 size: "sm",
                 disabled: t.disabled
               }, null, 8, ["modelValue", "options", "disabled"])
@@ -831,10 +844,10 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.weight")
           }, {
             default: m(() => [
-              d(e(ye), {
-                modelValue: e(ae),
-                "onUpdate:modelValue": a[13] || (a[13] = (o) => me(ae) ? ae.value = o : null),
-                options: e(Ne),
+              d(e(pe), {
+                modelValue: e(ne),
+                "onUpdate:modelValue": l[13] || (l[13] = (o) => ye(ne) ? ne.value = o : null),
+                options: e(Pe),
                 size: "sm",
                 disabled: t.disabled
               }, null, 8, ["modelValue", "options", "disabled"])
@@ -845,7 +858,7 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.line-height")
           }, {
             default: m(() => [
-              d(e(ge), {
+              d(e(xe), {
                 "model-value": t.layer.style.line_height,
                 min: 0.8,
                 max: 3,
@@ -853,7 +866,7 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
                 precision: 2,
                 size: "sm",
                 disabled: t.disabled,
-                "onUpdate:modelValue": a[14] || (a[14] = (o) => o != null && p("line_height", o))
+                "onUpdate:modelValue": l[14] || (l[14] = (o) => o != null && B("line_height", o))
               }, null, 8, ["model-value", "disabled"])
             ]),
             _: 1
@@ -862,7 +875,7 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.opacity")
           }, {
             default: m(() => [
-              d(e(ge), {
+              d(e(xe), {
                 "model-value": t.layer.style.opacity,
                 min: 0,
                 max: 1,
@@ -870,7 +883,7 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
                 precision: 2,
                 size: "sm",
                 disabled: t.disabled,
-                "onUpdate:modelValue": a[15] || (a[15] = (o) => o != null && p("opacity", o))
+                "onUpdate:modelValue": l[15] || (l[15] = (o) => o != null && B("opacity", o))
               }, null, 8, ["model-value", "disabled"])
             ]),
             _: 1
@@ -880,85 +893,85 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
           label: e(s)("layers.align")
         }, {
           default: m(() => [
-            d(e(st), {
+            d(e(it), {
               modelValue: M.value,
-              "onUpdate:modelValue": a[16] || (a[16] = (o) => M.value = o),
-              options: Ve.value,
+              "onUpdate:modelValue": l[16] || (l[16] = (o) => M.value = o),
+              options: ze.value,
               size: "sm",
               disabled: t.disabled
             }, null, 8, ["modelValue", "options", "disabled"])
           ]),
           _: 1
         }, 8, ["label"]),
-        g("div", ol, [
-          d(e(_e), {
+        w("div", da, [
+          d(e(Se), {
             "model-value": t.layer.style.italic,
             label: e(s)("layers.italic"),
             disabled: t.disabled,
-            "onUpdate:modelValue": a[17] || (a[17] = (o) => p("italic", o === !0))
+            "onUpdate:modelValue": l[17] || (l[17] = (o) => B("italic", o === !0))
           }, null, 8, ["model-value", "label", "disabled"]),
-          d(e(_e), {
+          d(e(Se), {
             "model-value": t.layer.style.uppercase,
             label: e(s)("layers.uppercase"),
             disabled: t.disabled,
-            "onUpdate:modelValue": a[18] || (a[18] = (o) => p("uppercase", o === !0))
+            "onUpdate:modelValue": l[18] || (l[18] = (o) => B("uppercase", o === !0))
           }, null, 8, ["model-value", "label", "disabled"]),
-          d(e(_e), {
+          d(e(Se), {
             "model-value": t.layer.style.shadow,
             label: e(s)("layers.shadow"),
             disabled: t.disabled,
-            "onUpdate:modelValue": a[19] || (a[19] = (o) => p("shadow", o === !0))
+            "onUpdate:modelValue": l[19] || (l[19] = (o) => B("shadow", o === !0))
           }, null, 8, ["model-value", "label", "disabled"])
         ]),
-        (f(), x(H, null, oe(["color", "background"], (o) => d(e(S), {
+        (f(), x(H, null, ie(["color", "background"], (o) => d(e(S), {
           key: o,
           label: e(s)(`layers.${o}`)
         }, {
           default: m(() => [
-            g("div", il, [
-              (f(!0), x(H, null, oe(t.palette, (_) => (f(), x("button", {
-                key: _.key,
+            w("div", ua, [
+              (f(!0), x(H, null, ie(t.palette, (z) => (f(), x("button", {
+                key: z.key,
                 type: "button",
-                title: _.key,
-                "aria-label": _.key,
+                title: z.key,
+                "aria-label": z.key,
                 disabled: t.disabled,
                 class: J([
                   "wx-banner-layer-inspector__swatch",
-                  { "is-active": t.layer.style[o] === `token:${_.key}` }
+                  { "is-active": t.layer.style[o] === `token:${z.key}` }
                 ]),
-                style: xe({ background: _.value }),
-                onClick: (ne) => p(o, `token:${_.key}`)
-              }, null, 14, rl))), 128)),
-              d(e(Nt), {
-                "model-value": Pe(o),
+                style: ke({ background: z.value }),
+                onClick: (se) => B(o, `token:${z.key}`)
+              }, null, 14, ca))), 128)),
+              d(e(Ut), {
+                "model-value": Te(o),
                 clearable: "",
                 size: "sm",
                 disabled: t.disabled,
-                "onUpdate:modelValue": (_) => fe(o, _)
+                "onUpdate:modelValue": (z) => ve(o, z)
               }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
             ])
           ]),
           _: 2
         }, 1032, ["label"])), 64))
       ])) : I("", !0),
-      g("section", dl, [
+      w("section", ma, [
         d(e(Y), {
           size: "sm",
           strong: ""
         }, {
           default: m(() => [
-            O(z(e(s)("layers.motion")), 1)
+            _(V(e(s)("layers.motion")), 1)
           ]),
           _: 1
         }),
-        g("div", ul, [
+        w("div", ba, [
           d(e(S), {
             label: e(s)("layers.entrance")
           }, {
             default: m(() => [
-              d(e(ye), {
+              d(e(pe), {
                 modelValue: e(K),
-                "onUpdate:modelValue": a[20] || (a[20] = (o) => me(K) ? K.value = o : null),
+                "onUpdate:modelValue": l[20] || (l[20] = (o) => ye(K) ? K.value = o : null),
                 options: X.value,
                 size: "sm",
                 disabled: t.disabled
@@ -970,10 +983,10 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.loop")
           }, {
             default: m(() => [
-              d(e(ye), {
+              d(e(pe), {
                 modelValue: e(j),
-                "onUpdate:modelValue": a[21] || (a[21] = (o) => me(j) ? j.value = o : null),
-                options: ue.value,
+                "onUpdate:modelValue": l[21] || (l[21] = (o) => ye(j) ? j.value = o : null),
+                options: ce.value,
                 size: "sm",
                 disabled: t.disabled
               }, null, 8, ["modelValue", "options", "disabled"])
@@ -984,14 +997,14 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.delay")
           }, {
             default: m(() => [
-              d(e(ge), {
+              d(e(xe), {
                 "model-value": t.layer.motion.delay,
                 min: 0,
                 max: 1e4,
                 step: 50,
                 size: "sm",
                 disabled: t.disabled || t.layer.motion.in === null,
-                "onUpdate:modelValue": a[22] || (a[22] = (o) => o != null && C((_) => _.motion.delay = o))
+                "onUpdate:modelValue": l[22] || (l[22] = (o) => o != null && p((z) => z.motion.delay = o))
               }, null, 8, ["model-value", "disabled"])
             ]),
             _: 1
@@ -1000,14 +1013,14 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
             label: e(s)("layers.duration")
           }, {
             default: m(() => [
-              d(e(ge), {
+              d(e(xe), {
                 "model-value": t.layer.motion.duration,
                 min: 100,
                 max: 5e3,
                 step: 50,
                 size: "sm",
                 disabled: t.disabled || t.layer.motion.in === null,
-                "onUpdate:modelValue": a[23] || (a[23] = (o) => o != null && C((_) => _.motion.duration = o))
+                "onUpdate:modelValue": l[23] || (l[23] = (o) => o != null && p((z) => z.motion.duration = o))
               }, null, 8, ["model-value", "disabled"])
             ]),
             _: 1
@@ -1016,27 +1029,27 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
       ])
     ]));
   }
-}), ct = (t, c) => {
+}), yt = (t, c) => {
   const r = t.__vccOpts || t;
   for (const [y, s] of c)
     r[y] = s;
   return r;
-}, bl = /* @__PURE__ */ ct(cl, [["__scopeId", "data-v-32ff51cd"]]), ml = { class: "wx-banner-layers__bar" }, yl = { class: "wx-banner-layers__tools" }, pl = { class: "wx-banner-layers__body" }, fl = { class: "wx-banner-layers__main" }, vl = ["aria-label"], hl = { class: "webx-banner__picture" }, wl = ["src"], gl = {
+}, pa = /* @__PURE__ */ yt(ya, [["__scopeId", "data-v-c9a97c91"]]), fa = { class: "wx-banner-layers__bar" }, va = { class: "wx-banner-layers__tools" }, ha = { class: "wx-banner-layers__body" }, wa = { class: "wx-banner-layers__main" }, ga = ["aria-label"], xa = { class: "webx-banner__picture" }, ka = ["src"], $a = {
   key: 1,
   class: "wx-banner-layers__empty"
-}, xl = {
+}, Va = {
   key: 0,
   class: "webx-banner__inner wx-banner-layers__words"
-}, kl = ["src"], $l = {
+}, za = ["src"], Ca = {
   key: 2,
   class: "webx-banner__inner webx-banner__buttons"
-}, Vl = {
+}, Sa = {
   key: 3,
   class: "webx-banner__inner webx-banner__buttons"
-}, zl = {
+}, _a = {
   key: 0,
   class: "webx-banner__button"
-}, _l = ["onPointerdown"], Cl = ["onPointerdown"], Sl = ["onClick"], Ol = { class: "wx-banner-layers__name" }, Bl = 3, Ll = 6, Nl = /* @__PURE__ */ lt({
+}, Oa = ["onPointerdown"], Ba = ["onPointerdown"], La = ["onClick"], Na = { class: "wx-banner-layers__name" }, Pa = 3, Ta = 6, Ua = /* @__PURE__ */ lt({
   name: "WxBannerLayers",
   __name: "LayersField",
   props: {
@@ -1045,68 +1058,68 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
   },
   emits: ["update:modelValue"],
   setup(t, { emit: c }) {
-    const r = t, y = c, s = ot(), w = Et(), B = nt(), T = Tt(s), C = It(s);
-    At();
-    const p = it("webx-banners"), k = v(() => r.modelValue ?? []), V = v(() => w?.place.value?.layers ?? null), D = te("desktop"), N = te(null), Q = v(() => k.value.find((l) => l.id === N.value) ?? null), Z = v(() => {
-      const l = B.active.value;
-      return B.list.value.some((n) => n.code === l) ? l : B.list.value[0]?.code ?? "en";
-    }), $e = v(() => B.list.value.map((l) => l.code)), A = te([]), R = te([]);
+    const r = t, y = c, s = rt(), g = Mt(), O = st(), L = Dt(s), Q = At(s);
+    Rt();
+    const p = dt("webx-banners"), B = ut(), k = v(() => r.modelValue ?? []), C = v(() => g?.place.value?.layers ?? null), D = ae("desktop"), P = ae(null), ee = v(() => k.value.find((a) => a.id === P.value) ?? null), Z = v(() => {
+      const a = O.active.value;
+      return O.list.value.some((n) => n.code === a) ? a : O.list.value[0]?.code ?? "en";
+    }), Ve = v(() => O.list.value.map((a) => a.code)), A = ae([]), R = ae([]);
     function q() {
       A.value = [...A.value.slice(-99), JSON.stringify(k.value)], R.value = [];
     }
-    function G(l, n = !0) {
-      n && q(), y("update:modelValue", l);
+    function G(a, n = !0) {
+      n && q(), y("update:modelValue", a);
     }
-    function re() {
-      const l = A.value.at(-1);
-      l !== void 0 && (R.value = [...R.value, JSON.stringify(k.value)], A.value = A.value.slice(0, -1), y("update:modelValue", JSON.parse(l)));
+    function de() {
+      const a = A.value.at(-1);
+      a !== void 0 && (R.value = [...R.value, JSON.stringify(k.value)], A.value = A.value.slice(0, -1), y("update:modelValue", JSON.parse(a)));
     }
     function le() {
-      const l = R.value.at(-1);
-      l !== void 0 && (A.value = [...A.value, JSON.stringify(k.value)], R.value = R.value.slice(0, -1), y("update:modelValue", JSON.parse(l)));
+      const a = R.value.at(-1);
+      a !== void 0 && (A.value = [...A.value, JSON.stringify(k.value)], R.value = R.value.slice(0, -1), y("update:modelValue", JSON.parse(a)));
     }
-    function ae(l, n, i = !0) {
+    function ne(a, n, i = !0) {
       G(
-        k.value.map((b) => b.id === l ? n(De(b)) : b),
+        k.value.map((b) => b.id === a ? n(Ae(b)) : b),
         i
       );
     }
-    function M(l, n = D.value) {
-      return n === "mobile" ? l.frames.mobile ?? l.frames.desktop : l.frames.desktop;
+    function M(a, n = D.value) {
+      return n === "mobile" ? a.frames.mobile ?? a.frames.desktop : a.frames.desktop;
     }
-    function K(l, n, i = !0) {
-      ae(
-        l,
+    function K(a, n, i = !0) {
+      ne(
+        a,
         (b) => {
-          const h = qt({ ...M(b), ...n });
+          const h = Yt({ ...M(b), ...n });
           return D.value === "mobile" ? b.frames.mobile = h : b.frames.desktop = h, b;
         },
         i
       );
     }
     let j = { id: "", at: 0 };
-    function Oe(l) {
-      const n = Date.now(), i = j.id === l.id && n - j.at < 800;
-      j = { id: l.id, at: n }, ae(l.id, () => l, !i);
+    function Be(a) {
+      const n = Date.now(), i = j.id === a.id && n - j.at < 800;
+      j = { id: a.id, at: n }, ne(a.id, () => a, !i);
     }
-    function de(l) {
-      const n = Qe(
-        l,
+    function ue(a) {
+      const n = et(
+        a,
         k.value.map((i) => i.id),
         Z.value
       );
-      G([n, ...k.value]), N.value = n.id;
+      G([n, ...k.value]), P.value = n.id;
     }
-    function pe(l) {
-      G(k.value.filter((n) => n.id !== l)), N.value === l && (N.value = null);
+    function fe(a) {
+      G(k.value.filter((n) => n.id !== a)), P.value === a && (P.value = null);
     }
-    function Be(l) {
-      const n = k.value.findIndex((P) => P.id === l), i = k.value[n];
+    function Le(a) {
+      const n = k.value.findIndex((T) => T.id === a), i = k.value[n];
       if (!i || i.type === "buttons") return;
-      const b = De(i);
-      b.id = Qe(
+      const b = Ae(i);
+      b.id = et(
         "text",
-        k.value.map((P) => P.id),
+        k.value.map((T) => T.id),
         Z.value
       ).id, b.frames.desktop = {
         ...b.frames.desktop,
@@ -1114,207 +1127,207 @@ const Gt = { class: "wx-banner-layer-inspector" }, Xt = { class: "wx-banner-laye
         y: b.frames.desktop.y + 2
       };
       const h = [...k.value];
-      h.splice(n, 0, b), G(h), N.value = b.id;
+      h.splice(n, 0, b), G(h), P.value = b.id;
     }
-    function Le(l) {
-      K(l.id, { hidden: !M(l).hidden });
+    function Ne(a) {
+      K(a.id, { hidden: !M(a).hidden });
     }
-    const Ne = v(() => k.value.some((l) => l.type === "buttons")), Ve = v({
+    const Pe = v(() => k.value.some((a) => a.type === "buttons")), ze = v({
       get: () => k.value,
-      set: (l) => G(l)
-    }), X = _t({});
-    function ue(l) {
-      const n = l?.path;
+      set: (a) => G(a)
+    }), X = Ot({});
+    function ce(a) {
+      const n = a?.path;
       return typeof n == "string" && n !== "" ? n : null;
     }
-    async function Pe(l) {
-      if (!(l === null || l in X)) {
-        X[l] = null;
+    async function Te(a) {
+      if (!(a === null || a in X)) {
+        X[a] = null;
         try {
-          const n = await T.fileByPath(l);
-          X[l] = n ? { url: n.url, ratio: n.width && n.height ? n.width / n.height : null } : null;
+          const n = await L.fileByPath(a);
+          X[a] = n ? { url: n.url, ratio: n.width && n.height ? n.width / n.height : null } : null;
         } catch {
-          X[l] = null;
+          X[a] = null;
         }
       }
     }
-    const fe = v(() => ue(w?.values.value.image)), u = v(() => ue(w?.values.value.image_mobile));
-    Ct(
-      () => [fe.value, u.value, ...k.value.map((l) => ue(l.image))],
-      (l) => l.forEach((n) => {
-        Pe(n);
+    const ve = v(() => ce(g?.values.value.image)), u = v(() => ce(g?.values.value.image_mobile));
+    Bt(
+      () => [ve.value, u.value, ...k.value.map((a) => ce(a.image))],
+      (a) => a.forEach((n) => {
+        Te(n);
       }),
       { immediate: !0 }
     );
-    const a = v(
-      () => D.value === "mobile" ? tt(V.value?.ratio_mobile, 0.8) : tt(V.value?.ratio, 16 / 6)
+    const l = v(
+      () => D.value === "mobile" ? at(C.value?.ratio_mobile, 0.8) : at(C.value?.ratio, 16 / 6)
     ), o = v(() => {
-      const l = u.value === null ? null : X[u.value] ?? null, n = fe.value === null ? null : X[fe.value] ?? null;
-      return D.value === "mobile" ? l ?? n : n;
-    }), _ = v(() => o.value?.ratio ?? a.value), ne = v(() => Zt(_.value, a.value)), bt = v(() => {
-      const l = String(_.value);
-      return { "--ratio": l, "--ratio-mobile": l, "--img": l, "--img-m": l };
-    }), mt = v(() => {
-      const l = (n) => (w?.values.value[n]?.[Z.value] ?? "").trim();
-      return { title: l("title"), text: l("text") };
+      const a = u.value === null ? null : X[u.value] ?? null, n = ve.value === null ? null : X[ve.value] ?? null;
+      return D.value === "mobile" ? a ?? n : n;
+    }), z = v(() => o.value?.ratio ?? l.value), se = v(() => Xt(z.value, l.value)), pt = v(() => {
+      const a = String(z.value);
+      return { "--ratio": a, "--ratio-mobile": a, "--img": a, "--img-m": a };
+    }), ft = v(() => {
+      const a = (n) => (g?.values.value[n]?.[Z.value] ?? "").trim();
+      return { title: a("title"), text: a("text") };
     });
-    function Ae(l) {
-      return Kt(l.text, Z.value, $e.value, mt.value);
+    function Me(a) {
+      return Ht(a.text, Z.value, Ve.value, ft.value);
     }
-    const Me = v(
-      () => (w?.values.value.buttons ?? []).map((l) => ({
-        label: (l.label?.[Z.value] ?? "").trim(),
-        variant: l.variant ?? V.value?.variants[0]?.value ?? "primary"
-      })).filter((l) => l.label !== "")
+    const Fe = v(
+      () => (g?.values.value.buttons ?? []).map((a) => ({
+        label: (a.label?.[Z.value] ?? "").trim(),
+        variant: a.variant ?? C.value?.variants[0]?.value ?? "primary"
+      })).filter((a) => a.label !== "")
     );
-    function yt(l) {
-      return l.type === "text" && /^(p|span|h[1-6])$/.test(l.tag ?? "") ? l.tag : "div";
+    function vt(a) {
+      return a.type === "text" && /^(p|span|h[1-6])$/.test(a.tag ?? "") ? a.tag : "div";
     }
-    function pt(l) {
-      if (l.name) return l.name;
-      const n = l.text?.[Z.value] ?? Object.values(l.text ?? {})[0] ?? "";
-      return n.trim() === "{title}" ? p("layers.title-layer") : n.trim() === "{text}" ? p("layers.text-layer") : l.type === "buttons" ? p("layers.buttons-layer") : l.type === "image" ? p("layers.image") : n.trim() || p(`layers.${l.type}`);
+    function ht(a) {
+      if (a.name) return a.name;
+      const n = a.text?.[Z.value] ?? Object.values(a.text ?? {})[0] ?? "";
+      return n.trim() === "{title}" ? p("layers.title-layer") : n.trim() === "{text}" ? p("layers.text-layer") : a.type === "buttons" ? p("layers.buttons-layer") : a.type === "image" ? p("layers.image") : n.trim() || p(`layers.${a.type}`);
     }
-    const ft = {
+    const wt = {
       text: "file-text",
       image: "image",
       button: "link",
       buttons: "grid"
     };
-    function Fe(l) {
-      const n = M(l), i = 100 / _.value, b = ne.value, h = b.left, P = b.left + b.width, L = b.top / 100 * i, U = (b.top + b.height) / 100 * i, $ = n.x + Te(n.origin)[0] / 100 * n.w;
-      return $ > P || $ + n.w < h || n.y > U || n.y < L - 50;
+    function Re(a) {
+      const n = M(a), i = 100 / z.value, b = se.value, h = b.left, T = b.left + b.width, N = b.top / 100 * i, U = (b.top + b.height) / 100 * i, $ = n.x + Ie(n.origin)[0] / 100 * n.w;
+      return $ > T || $ + n.w < h || n.y > U || n.y < N - 50;
     }
-    const Ue = te(null), Re = te(null), ve = te([]);
-    function vt(l, n) {
-      const i = 100 / _.value, b = ne.value, h = l === "x" ? [0, 50, 100, b.left, b.left + b.width] : [0, i / 2, i, b.top / 100 * i, (b.top + b.height) / 100 * i];
-      for (const P of k.value) {
-        if (P.id === n) continue;
-        const L = M(P);
-        l === "x" ? h.push(L.x, L.x + L.w) : h.push(L.y);
+    const Ue = ae(null), Ke = ae(null), he = ae([]);
+    function gt(a, n) {
+      const i = 100 / z.value, b = se.value, h = a === "x" ? [0, 50, 100, b.left, b.left + b.width] : [0, i / 2, i, b.top / 100 * i, (b.top + b.height) / 100 * i];
+      for (const T of k.value) {
+        if (T.id === n) continue;
+        const N = M(T);
+        a === "x" ? h.push(N.x, N.x + N.w) : h.push(N.y);
       }
       return h;
     }
-    function Ke(l, n, i, b, h, P) {
-      if (P) return n;
-      const L = [0, i / 2, i];
+    function je(a, n, i, b, h, T) {
+      if (T) return n;
+      const N = [0, i / 2, i];
       let U = null;
-      for (const $ of vt(l, h))
-        for (const ee of L) {
-          const ce = $ - (n + ee);
-          Math.abs(ce) * b <= Ll && (U === null || Math.abs(ce) < Math.abs(U.delta)) && (U = { delta: ce, at: $ });
+      for (const $ of gt(a, h))
+        for (const te of N) {
+          const me = $ - (n + te);
+          Math.abs(me) * b <= Ta && (U === null || Math.abs(me) < Math.abs(U.delta)) && (U = { delta: me, at: $ });
         }
-      return U === null ? n : (ve.value = [...ve.value.filter(($) => $.axis !== l), { axis: l, at: U.at }], n + U.delta);
+      return U === null ? n : (he.value = [...he.value.filter(($) => $.axis !== a), { axis: a, at: U.at }], n + U.delta);
     }
-    function je(l) {
-      N.value = l.id, Re.value?.focus({ preventScroll: !0 });
+    function Je(a) {
+      P.value = a.id, Ke.value?.focus({ preventScroll: !0 });
     }
-    function We(l, n, i) {
-      if (je(n), r.disabled || l.button !== 0 || !Ue.value) return;
-      l.preventDefault();
-      const h = Ue.value.getBoundingClientRect().width / 100, L = l.target.closest(".webx-banner__layer")?.getBoundingClientRect(), U = L ? L.height / h : 0, $ = { ...M(n) }, ee = { x: l.clientX, y: l.clientY };
-      let ce = !1;
-      const He = (be) => {
-        const Ie = (be.clientX - ee.x) / h, xt = (be.clientY - ee.y) / h;
-        if (!ce) {
-          if (Math.hypot(be.clientX - ee.x, be.clientY - ee.y) < Bl) return;
-          ce = !0, q();
+    function We(a, n, i) {
+      if (Je(n), r.disabled || a.button !== 0 || !Ue.value) return;
+      a.preventDefault();
+      const h = Ue.value.getBoundingClientRect().width / 100, N = a.target.closest(".webx-banner__layer")?.getBoundingClientRect(), U = N ? N.height / h : 0, $ = { ...M(n) }, te = { x: a.clientX, y: a.clientY };
+      let me = !1;
+      const Ze = (be) => {
+        const Ee = (be.clientX - te.x) / h, Vt = (be.clientY - te.y) / h;
+        if (!me) {
+          if (Math.hypot(be.clientX - te.x, be.clientY - te.y) < Pa) return;
+          me = !0, q();
         }
-        if (ve.value = [], i === "move") {
-          const se = {
-            x: Te($.origin)[0] / 100 * $.w,
-            y: Te($.origin)[1] / 100 * U
-          }, kt = Ke("x", $.x + Ie + se.x, $.w, h, n.id, be.altKey), $t = Ke("y", $.y + xt + se.y, U, h, n.id, be.altKey);
-          K(n.id, { x: kt - se.x, y: $t - se.y }, !1);
+        if (he.value = [], i === "move") {
+          const oe = {
+            x: Ie($.origin)[0] / 100 * $.w,
+            y: Ie($.origin)[1] / 100 * U
+          }, zt = je("x", $.x + Ee + oe.x, $.w, h, n.id, be.altKey), Ct = je("y", $.y + Vt + oe.y, U, h, n.id, be.altKey);
+          K(n.id, { x: zt - oe.x, y: Ct - oe.y }, !1);
         } else if (i === "width")
-          K(n.id, { w: Math.max(1, $.w + Ie) }, !1);
+          K(n.id, { w: Math.max(1, $.w + Ee) }, !1);
         else {
-          const se = Math.max(0.05, ($.w + Ie) / $.w);
-          K(n.id, { w: $.w * se, size: $.size * se }, !1);
+          const oe = Math.max(0.05, ($.w + Ee) / $.w);
+          K(n.id, { w: $.w * oe, size: $.size * oe }, !1);
         }
-      }, ze = () => {
-        window.removeEventListener("pointermove", He), window.removeEventListener("pointerup", ze), window.removeEventListener("pointercancel", ze), ve.value = [];
+      }, Ce = () => {
+        window.removeEventListener("pointermove", Ze), window.removeEventListener("pointerup", Ce), window.removeEventListener("pointercancel", Ce), he.value = [];
       };
-      window.addEventListener("pointermove", He), window.addEventListener("pointerup", ze), window.addEventListener("pointercancel", ze);
+      window.addEventListener("pointermove", Ze), window.addEventListener("pointerup", Ce), window.addEventListener("pointercancel", Ce);
     }
-    function Te(l) {
-      const n = l.endsWith("r") ? -100 : l === "t" || l === "c" || l === "b" ? -50 : 0, i = l.startsWith("b") ? -100 : l === "l" || l === "c" || l === "r" ? -50 : 0;
+    function Ie(a) {
+      const n = a.endsWith("r") ? -100 : a === "t" || a === "c" || a === "b" ? -50 : 0, i = a.startsWith("b") ? -100 : a === "l" || a === "c" || a === "r" ? -50 : 0;
       return [n, i];
     }
-    function ht(l) {
-      l.target.closest(".webx-banner__layer") || (N.value = null);
+    function xt(a) {
+      a.target.closest(".webx-banner__layer") || (P.value = null);
     }
-    function wt(l) {
-      const n = l.ctrlKey || l.metaKey, i = l.key.toLowerCase();
+    function kt(a) {
+      const n = a.ctrlKey || a.metaKey, i = a.key.toLowerCase();
       if (n && i === "z") {
-        l.preventDefault(), l.shiftKey ? le() : re();
+        a.preventDefault(), a.shiftKey ? le() : de();
         return;
       }
       if (n && i === "y") {
-        l.preventDefault(), le();
+        a.preventDefault(), le();
         return;
       }
-      const b = Q.value;
+      const b = ee.value;
       if (!b || r.disabled) return;
       if (n && i === "d") {
-        l.preventDefault(), Be(b.id);
+        a.preventDefault(), Le(b.id);
         return;
       }
       if (i === "delete" || i === "backspace") {
-        l.preventDefault(), pe(b.id);
+        a.preventDefault(), fe(b.id);
         return;
       }
       if (i === "escape") {
-        N.value = null;
+        P.value = null;
         return;
       }
-      const h = l.shiftKey ? 0.5 : 0.05, L = {
+      const h = a.shiftKey ? 0.5 : 0.05, N = {
         arrowleft: [-h, 0],
         arrowright: [h, 0],
         arrowup: [0, -h],
         arrowdown: [0, h]
       }[i];
-      if (!L) return;
-      l.preventDefault();
-      const U = M(b), $ = Date.now(), ee = j.id === `arrows:${b.id}` && $ - j.at < 800;
-      j = { id: `arrows:${b.id}`, at: $ }, K(b.id, { x: U.x + L[0], y: U.y + L[1] }, !ee);
+      if (!N) return;
+      a.preventDefault();
+      const U = M(b), $ = Date.now(), te = j.id === `arrows:${b.id}` && $ - j.at < 800;
+      j = { id: `arrows:${b.id}`, at: $ }, K(b.id, { x: U.x + N[0], y: U.y + N[1] }, !te);
     }
-    const he = te(null);
-    let we = null;
-    St(async () => {
+    const we = ae(null);
+    let ge = null;
+    Lt(async () => {
       try {
-        he.value = await C.theme();
+        we.value = await Q.theme();
       } catch {
-        he.value = null;
+        we.value = null;
       }
-      const l = `${he.value?.tokens_css ?? ""}
-${he.value?.fonts_css ?? ""}`.trim();
-      l !== "" && !document.getElementById("wx-banners-theme") && (we = document.createElement("style"), we.id = "wx-banners-theme", we.textContent = l, document.head.append(we));
-    }), Ot(() => {
-      we?.remove();
+      const a = `${we.value?.tokens_css ?? ""}
+${we.value?.fonts_css ?? ""}`.trim();
+      a !== "" && !document.getElementById("wx-banners-theme") && (ge = document.createElement("style"), ge.id = "wx-banners-theme", ge.textContent = a, document.head.append(ge));
+    }), Nt(() => {
+      ge?.remove();
     });
-    const gt = v(() => [
+    const $t = v(() => [
       { value: "desktop", label: p("layers.desktop"), icon: "monitor" },
       { value: "mobile", label: p("layers.mobile"), icon: "smartphone" }
-    ]), Je = v({
+    ]), He = v({
       get: () => D.value,
-      set: (l) => {
-        D.value = l === "mobile" ? "mobile" : "desktop";
+      set: (a) => {
+        D.value = a === "mobile" ? "mobile" : "desktop";
       }
     });
-    return (l, n) => (f(), x("div", {
+    return (a, n) => (f(), x("div", {
       class: J(["wx-banner-layers", { "is-disabled": t.disabled }])
     }, [
-      g("div", ml, [
-        d(e(st), {
-          modelValue: Je.value,
-          "onUpdate:modelValue": n[0] || (n[0] = (i) => Je.value = i),
-          options: gt.value,
+      w("div", fa, [
+        d(e(it), {
+          modelValue: He.value,
+          "onUpdate:modelValue": n[0] || (n[0] = (i) => He.value = i),
+          options: $t.value,
           size: "sm",
           "aria-label": e(p)("layers.layout")
         }, null, 8, ["modelValue", "options", "aria-label"]),
-        g("div", yl, [
-          d(e(qe), {
+        w("div", va, [
+          d(e(Ge), {
             content: e(p)("layers.undo")
           }, {
             default: m(() => [
@@ -1323,7 +1336,7 @@ ${he.value?.fonts_css ?? ""}`.trim();
                 variant: "text",
                 disabled: t.disabled || A.value.length === 0,
                 "aria-label": e(p)("layers.undo"),
-                onClick: re
+                onClick: de
               }, {
                 icon: m(() => [
                   d(e(F), { name: "rotate-left" })
@@ -1333,7 +1346,7 @@ ${he.value?.fonts_css ?? ""}`.trim();
             ]),
             _: 1
           }, 8, ["content"]),
-          d(e(qe), {
+          d(e(Ge), {
             content: e(p)("layers.redo")
           }, {
             default: m(() => [
@@ -1356,13 +1369,13 @@ ${he.value?.fonts_css ?? ""}`.trim();
             size: "sm",
             variant: "outline",
             disabled: t.disabled,
-            onClick: n[1] || (n[1] = (i) => de("text"))
+            onClick: n[1] || (n[1] = (i) => ue("text"))
           }, {
             icon: m(() => [
               d(e(F), { name: "plus" })
             ]),
             default: m(() => [
-              O(" " + z(e(p)("layers.text")), 1)
+              _(" " + V(e(p)("layers.text")), 1)
             ]),
             _: 1
           }, 8, ["disabled"]),
@@ -1370,13 +1383,13 @@ ${he.value?.fonts_css ?? ""}`.trim();
             size: "sm",
             variant: "outline",
             disabled: t.disabled,
-            onClick: n[2] || (n[2] = (i) => de("image"))
+            onClick: n[2] || (n[2] = (i) => ue("image"))
           }, {
             icon: m(() => [
               d(e(F), { name: "plus" })
             ]),
             default: m(() => [
-              O(" " + z(e(p)("layers.image")), 1)
+              _(" " + V(e(p)("layers.image")), 1)
             ]),
             _: 1
           }, 8, ["disabled"]),
@@ -1384,145 +1397,145 @@ ${he.value?.fonts_css ?? ""}`.trim();
             size: "sm",
             variant: "outline",
             disabled: t.disabled,
-            onClick: n[3] || (n[3] = (i) => de("button"))
+            onClick: n[3] || (n[3] = (i) => ue("button"))
           }, {
             icon: m(() => [
               d(e(F), { name: "plus" })
             ]),
             default: m(() => [
-              O(" " + z(e(p)("layers.button")), 1)
+              _(" " + V(e(p)("layers.button")), 1)
             ]),
             _: 1
           }, 8, ["disabled"]),
-          Ne.value ? I("", !0) : (f(), W(e(E), {
+          Pe.value ? I("", !0) : (f(), W(e(E), {
             key: 0,
             size: "sm",
             variant: "outline",
             disabled: t.disabled,
-            onClick: n[4] || (n[4] = (i) => de("buttons"))
+            onClick: n[4] || (n[4] = (i) => ue("buttons"))
           }, {
             icon: m(() => [
               d(e(F), { name: "plus" })
             ]),
             default: m(() => [
-              O(" " + z(e(p)("layers.buttons-layer")), 1)
+              _(" " + V(e(p)("layers.buttons-layer")), 1)
             ]),
             _: 1
           }, 8, ["disabled"]))
         ])
       ]),
-      V.value ? I("", !0) : (f(), W(e(Y), {
+      C.value ? I("", !0) : (f(), W(e(Y), {
         key: 0,
         size: "sm",
         tone: "muted"
       }, {
         default: m(() => [
-          O(z(e(p)("layers.not-here")), 1)
+          _(V(e(p)("layers.not-here")), 1)
         ]),
         _: 1
       })),
-      g("div", pl, [
-        g("div", fl, [
-          g("div", {
+      w("div", ha, [
+        w("div", wa, [
+          w("div", {
             ref_key: "canvas",
-            ref: Re,
-            class: J(["wx-banner-layers__canvas", { "is-overflow": V.value?.overflow }]),
+            ref: Ke,
+            class: J(["wx-banner-layers__canvas", { "is-overflow": C.value?.overflow }]),
             tabindex: "0",
             "aria-label": e(p)("layers.canvas"),
-            onPointerdown: ht,
-            onKeydown: wt
+            onPointerdown: xt,
+            onKeydown: kt
           }, [
-            g("div", {
+            w("div", {
               class: J(["webx-banner wx-banner-layers__frame", { "is-mobile": D.value === "mobile" }]),
-              style: xe(bt.value)
+              style: ke(pt.value)
             }, [
-              g("div", hl, [
+              w("div", xa, [
                 o.value ? (f(), x("img", {
                   key: 0,
                   class: "webx-banner__image",
                   src: o.value.url,
                   alt: ""
-                }, null, 8, wl)) : (f(), x("div", gl, z(e(p)("layers.no-picture")), 1))
+                }, null, 8, ka)) : (f(), x("div", $a, V(e(p)("layers.no-picture")), 1))
               ]),
-              g("div", {
+              w("div", {
                 ref_key: "stage",
                 ref: Ue,
                 class: "webx-banner__stage"
               }, [
-                (f(!0), x(H, null, oe(k.value, (i, b) => (f(), W(Bt(yt(i)), {
+                (f(!0), x(H, null, ie(k.value, (i, b) => (f(), W(Pt(vt(i)), {
                   key: i.id,
                   class: J([
-                    ...e(Ht)(i),
-                    { "is-selected": i.id === N.value, "is-outside": Fe(i) }
+                    ...e(Gt)(i),
+                    { "is-selected": i.id === P.value, "is-outside": Re(i) }
                   ]),
-                  style: xe(e(Jt)(i, k.value.length - b)),
-                  onPointerdown: Ee((h) => We(h, i, "move"), ["stop"])
+                  style: ke(e(qt)(i, k.value.length - b)),
+                  onPointerdown: De((h) => We(h, i, "move"), ["stop"])
                 }, {
                   default: m(() => [
-                    i.type === "text" ? (f(), x("span", xl, z(Ae(i) || "…"), 1)) : i.type === "image" ? (f(), x("img", {
+                    i.type === "text" ? (f(), x("span", Va, V(Me(i) || "…"), 1)) : i.type === "image" ? (f(), x("img", {
                       key: 1,
                       class: "webx-banner__inner",
-                      src: X[ue(i.image) ?? ""]?.url ?? "",
+                      src: X[ce(i.image) ?? ""]?.url ?? "",
                       alt: "",
                       draggable: "false"
-                    }, null, 8, kl)) : i.type === "button" ? (f(), x("span", $l, [
-                      g("span", {
+                    }, null, 8, za)) : i.type === "button" ? (f(), x("span", Ca, [
+                      w("span", {
                         class: J([
                           "webx-banner__button",
-                          `webx-banner__button--${i.variant ?? V.value?.variants[0]?.value ?? "primary"}`
+                          `webx-banner__button--${i.variant ?? C.value?.variants[0]?.value ?? "primary"}`
                         ])
-                      }, z(Ae(i) || "…"), 3)
-                    ])) : (f(), x("span", Vl, [
-                      (f(!0), x(H, null, oe(Me.value, (h, P) => (f(), x("span", {
-                        key: P,
+                      }, V(Me(i) || "…"), 3)
+                    ])) : (f(), x("span", Sa, [
+                      (f(!0), x(H, null, ie(Fe.value, (h, T) => (f(), x("span", {
+                        key: T,
                         class: J(["webx-banner__button", `webx-banner__button--${h.variant}`])
-                      }, z(h.label), 3))), 128)),
-                      Me.value.length === 0 ? (f(), x("span", zl, z(e(p)("layers.buttons-layer")), 1)) : I("", !0)
+                      }, V(h.label), 3))), 128)),
+                      Fe.value.length === 0 ? (f(), x("span", _a, V(e(p)("layers.buttons-layer")), 1)) : I("", !0)
                     ])),
-                    i.id === N.value && !t.disabled ? (f(), x(H, { key: 4 }, [
-                      g("span", {
+                    i.id === P.value && !t.disabled ? (f(), x(H, { key: 4 }, [
+                      w("span", {
                         class: "wx-banner-layers__handle wx-banner-layers__handle--width",
-                        onPointerdown: Ee((h) => We(h, i, "width"), ["stop"])
-                      }, null, 40, _l),
-                      g("span", {
+                        onPointerdown: De((h) => We(h, i, "width"), ["stop"])
+                      }, null, 40, Oa),
+                      w("span", {
                         class: "wx-banner-layers__handle wx-banner-layers__handle--scale",
-                        onPointerdown: Ee((h) => We(h, i, "scale"), ["stop"])
-                      }, null, 40, Cl)
+                        onPointerdown: De((h) => We(h, i, "scale"), ["stop"])
+                      }, null, 40, Ba)
                     ], 64)) : I("", !0)
                   ]),
                   _: 2
                 }, 1064, ["class", "style", "onPointerdown"]))), 128))
               ], 512),
-              g("div", {
+              w("div", {
                 class: "wx-banner-layers__crop",
-                style: xe({
-                  left: `${ne.value.left}%`,
-                  top: `${ne.value.top}%`,
-                  width: `${ne.value.width}%`,
-                  height: `${ne.value.height}%`
+                style: ke({
+                  left: `${se.value.left}%`,
+                  top: `${se.value.top}%`,
+                  width: `${se.value.width}%`,
+                  height: `${se.value.height}%`
                 })
               }, null, 4),
-              (f(!0), x(H, null, oe(ve.value, (i) => (f(), x("div", {
+              (f(!0), x(H, null, ie(he.value, (i) => (f(), x("div", {
                 key: i.axis,
                 class: J(["wx-banner-layers__guide", `wx-banner-layers__guide--${i.axis}`]),
-                style: xe(
+                style: ke(
                   i.axis === "x" ? { left: `${i.at}%` } : { top: `calc(${i.at} * 1cqw)` }
                 )
               }, null, 6))), 128))
             ], 6)
-          ], 42, vl),
+          ], 42, ga),
           d(e(Y), {
             size: "sm",
             tone: "muted"
           }, {
             default: m(() => [
-              O(z(e(p)("layers.hint")), 1)
+              _(V(e(p)("layers.hint")), 1)
             ]),
             _: 1
           }),
-          d(e(Pt), {
-            modelValue: Ve.value,
-            "onUpdate:modelValue": n[5] || (n[5] = (i) => Ve.value = i),
+          d(e(Wt), {
+            modelValue: ze.value,
+            "onUpdate:modelValue": n[5] || (n[5] = (i) => ze.value = i),
             class: "wx-banner-layers__list",
             "item-key": "id",
             size: "sm",
@@ -1531,22 +1544,22 @@ ${he.value?.fonts_css ?? ""}`.trim();
             "aria-label": e(p)("layers.list")
           }, {
             default: m(({ item: i }) => [
-              g("button", {
+              w("button", {
                 type: "button",
-                class: J(["wx-banner-layers__row", { "is-selected": i.id === N.value }]),
-                onClick: (b) => je(i)
+                class: J(["wx-banner-layers__row", { "is-selected": i.id === P.value }]),
+                onClick: (b) => Je(i)
               }, [
                 d(e(F), {
-                  name: ft[i.type]
+                  name: wt[i.type]
                 }, null, 8, ["name"]),
-                g("span", Ol, z(pt(i)), 1),
-                Fe(i) ? (f(), W(e(F), {
+                w("span", Na, V(ht(i)), 1),
+                Re(i) ? (f(), W(e(F), {
                   key: 0,
                   name: "warning",
                   class: "wx-banner-layers__warn",
                   "aria-label": e(p)("layers.outside")
                 }, null, 8, ["aria-label"])) : I("", !0)
-              ], 10, Sl)
+              ], 10, La)
             ]),
             actions: m(({ item: i }) => [
               d(e(E), {
@@ -1554,7 +1567,7 @@ ${he.value?.fonts_css ?? ""}`.trim();
                 variant: "text",
                 disabled: t.disabled,
                 "aria-label": M(i).hidden ? e(p)("layers.show") : e(p)("layers.hide"),
-                onClick: (b) => Le(i)
+                onClick: (b) => Ne(i)
               }, {
                 icon: m(() => [
                   d(e(F), {
@@ -1563,38 +1576,49 @@ ${he.value?.fonts_css ?? ""}`.trim();
                 ]),
                 _: 2
               }, 1032, ["disabled", "aria-label", "onClick"]),
-              d(e(E), {
-                size: "sm",
-                variant: "text",
+              d(e(ot), {
+                title: e(B).confirm,
+                "confirm-text": e(B).confirmText,
+                "cancel-text": e(B).cancelText,
+                "confirm-type": "danger",
                 disabled: t.disabled,
-                "aria-label": e(p)("layers.delete"),
-                onClick: (b) => pe(i.id)
+                onConfirm: (b) => fe(i.id)
               }, {
-                icon: m(() => [
-                  d(e(F), { name: "trash" })
+                trigger: m(() => [
+                  d(e(E), {
+                    size: "sm",
+                    variant: "text",
+                    disabled: t.disabled,
+                    "aria-label": e(p)("layers.delete")
+                  }, {
+                    icon: m(() => [
+                      d(e(F), { name: "trash" })
+                    ]),
+                    _: 1
+                  }, 8, ["disabled", "aria-label"])
                 ]),
                 _: 1
-              }, 8, ["disabled", "aria-label", "onClick"])
+              }, 8, ["title", "confirm-text", "cancel-text", "disabled", "onConfirm"])
             ]),
             _: 1
           }, 8, ["modelValue", "disabled", "empty-text", "aria-label"])
         ]),
-        Q.value ? (f(), W(bl, {
+        ee.value ? (f(), W(pa, {
           key: 0,
           class: "wx-banner-layers__inspector",
-          layer: Q.value,
+          layer: ee.value,
           view: D.value,
-          tags: V.value?.tags ?? [],
-          variants: V.value?.variants ?? [],
-          palette: he.value?.palette ?? [],
+          tags: C.value?.tags ?? [],
+          variants: C.value?.variants ?? [],
+          palette: we.value?.palette ?? [],
           disabled: t.disabled,
-          onUpdate: Oe,
-          onFrame: n[6] || (n[6] = (i) => K(Q.value.id, i)),
-          onSameAsDesktop: n[7] || (n[7] = (i) => ae(Q.value.id, (b) => ({
+          onUpdate: Be,
+          onFrame: n[6] || (n[6] = (i) => K(ee.value.id, i)),
+          onSameAsDesktop: n[7] || (n[7] = (i) => ne(ee.value.id, (b) => ({
             ...b,
             frames: { ...b.frames, mobile: null }
           }))),
-          onDelete: n[8] || (n[8] = (i) => pe(Q.value.id))
+          onDelete: n[8] || (n[8] = (i) => fe(ee.value.id))
         }, null, 8, ["layer", "view", "tags", "variants", "palette", "disabled"])) : (f(), W(e(Y), {
           key: 1,
           class: "wx-banner-layers__inspector",
@@ -1602,15 +1626,15 @@ ${he.value?.fonts_css ?? ""}`.trim();
           tone: "muted"
         }, {
           default: m(() => [
-            O(z(e(p)("layers.choose")), 1)
+            _(V(e(p)("layers.choose")), 1)
           ]),
           _: 1
         }))
       ])
     ], 2));
   }
-}), Pl = /* @__PURE__ */ ct(Nl, [["__scopeId", "data-v-540c304c"]]);
-function Al(t = {}) {
+}), Wa = /* @__PURE__ */ yt(Ua, [["__scopeId", "data-v-90d46ca5"]]);
+function Ra(t = {}) {
   const c = t.path ?? "/banners";
   return {
     id: "banners",
@@ -1620,20 +1644,20 @@ function Al(t = {}) {
       {
         path: c,
         name: "webx.banners",
-        component: () => import("./BannersPage-Dl_BCozz.js"),
+        component: () => import("./BannersPage-D7hpUcBn.js"),
         props: { base: c }
       },
       // A banner not written yet: the place it goes to rides in the query (`?place=hero`).
       {
         path: `${c}/new`,
         name: "webx.banners.new",
-        component: () => import("./BannerEditorPage-j7WlEaek.js"),
+        component: () => import("./BannerEditorPage-B8e-IHkN.js"),
         props: { base: c }
       },
       {
         path: `${c}/:id(\\d+)`,
         name: "webx.banners.edit",
-        component: () => import("./BannerEditorPage-j7WlEaek.js"),
+        component: () => import("./BannerEditorPage-B8e-IHkN.js"),
         props: { base: c }
       }
     ],
@@ -1642,40 +1666,40 @@ function Al(t = {}) {
      * picture. A field like any other — its value is the list of layers.
      */
     types: {
-      "wx-banner-layers": { component: Pl, kind: "field", wide: !0 }
+      "wx-banner-layers": { component: Wa, kind: "field", wide: !0 }
     }
   };
 }
-const Ml = at(() => import("./BannersPage-Dl_BCozz.js")), Fl = at(() => import("./BannerEditorPage-j7WlEaek.js"));
+const Ka = nt(() => import("./BannersPage-D7hpUcBn.js")), ja = nt(() => import("./BannerEditorPage-B8e-IHkN.js"));
 export {
-  Xe as E,
-  Rt as F,
-  Ye as L,
-  Mt as O,
-  Fl as W,
-  ct as _,
-  ke as a,
-  Pl as b,
-  It as c,
-  Dl as d,
-  Ml as e,
-  Al as f,
-  Dt as g,
-  qt as h,
-  De as i,
-  Zt as j,
-  et as k,
-  ie as l,
-  Ht as m,
-  dt as n,
-  Jt as o,
-  El as p,
-  Kt as q,
-  Se as r,
-  Qe as s,
-  tt as t,
-  At as u,
-  Ce as v,
-  jt as w
+  Ye as E,
+  Jt as F,
+  Qe as L,
+  Kt as O,
+  ja as W,
+  yt as _,
+  $e as a,
+  Wa as b,
+  At as c,
+  Fa as d,
+  Ka as e,
+  Ra as f,
+  Ft as g,
+  Yt as h,
+  Ae as i,
+  Xt as j,
+  tt as k,
+  re as l,
+  Gt as m,
+  mt as n,
+  qt as o,
+  Ma as p,
+  Ht as q,
+  Oe as r,
+  et as s,
+  at as t,
+  Rt as u,
+  _e as v,
+  Zt as w
 };
-//# sourceMappingURL=index-3RALKrkh.js.map
+//# sourceMappingURL=index-QnpLuOX2.js.map