@webx-ui/module-banners 0.1.12 → 0.2.1

package/dist/index.js

@@ -1,31 +1,223 @@
-import { defineComponent as X, computed as $, ref as W, watch as j, onMounted as _e, onBeforeUnmount as Ce, openBlock as m, createElementBlock as M, Fragment as H, createVNode as c, unref as e, withCtx as p, createSlots as xe, createTextVNode as E, toDisplayString as L, createBlock as D, createCommentVNode as A, useTemplateRef as Ne, nextTick as qe, isRef as De, createElementVNode as R, withKeys as ye, normalizeClass as ae, resolveDynamicComponent as Ie, renderList as Oe } from "vue";
-import { useRoute as ie, useRouter as ce, onBeforeRouteLeave as Le } from "vue-router";
-import { useLocales as $e, localizedValue as Me, confirm as G, WxSkeleton as Q, WxCard as te, WxBadge as ne, WxFormItem as le, WxSelect as Re, WxActionBar as Ue, WxButton as se, toast as T, useModal as ze, WxDialog as Ae, WxInput as he, WxSpace as Ee, WxTooltip as Ke, WxIcon as re, WxSegmented as Fe, WxEmpty as oe, WxSortableList as Je, WxAlert as je, createModal as He, WxListDetail as Ge, WxText as we, WxIndicator as Qe } from "@webx-ui/core";
-import { useAdmin as J, useTranslate as Y, useErrorText as ue, useBodyKeys as Xe, WxScreenHead as Pe, WxScreen as Ye, WxSaveState as Ze, WxRowMenu as Be, WxListScreen as ea } from "@webx-ui/module-admin";
-function Z(i) {
-  const s = `${i.apiPath}/banners`, u = (n) => `${s}/places/${encodeURIComponent(n)}`, y = (n) => n.data;
+import { provide as qt, inject as Kt, defineComponent as Ve, computed as y, ref as A, watch as $e, onMounted as nt, onBeforeUnmount as Vt, openBlock as m, createElementBlock as B, Fragment as ne, createVNode as i, unref as e, withCtx as d, createSlots as zt, createTextVNode as F, toDisplayString as N, createBlock as E, createCommentVNode as H, useTemplateRef as Jt, nextTick as jt, isRef as ye, createElementVNode as P, withKeys as ft, normalizeClass as oe, resolveDynamicComponent as St, renderList as ve, normalizeStyle as Oe, reactive as Ht, withModifiers as Ye } from "vue";
+import { useRoute as st, useRouter as ot, onBeforeRouteLeave as Gt } from "vue-router";
+import { useLocales as Je, localizedValue as Zt, confirm as Fe, WxSkeleton as qe, WxCard as Qe, WxBadge as et, WxFormItem as G, WxSelect as fe, WxActionBar as Xt, WxButton as Q, toast as Z, useModal as Yt, WxDialog as Qt, WxInput as Ke, WxSpace as ea, WxTooltip as tt, WxIcon as le, WxSegmented as it, WxEmpty as at, WxSortableList as Ct, WxAlert as ta, createModal as aa, WxListDetail as la, WxText as re, WxIndicator as na, WxTextarea as sa, WxInputNumber as Le, WxSwitch as Me, WxColorPicker as oa } from "@webx-ui/core";
+import { useAdmin as ze, useTranslate as Se, useErrorText as rt, useBodyKeys as ia, WxScreenHead as Bt, WxScreen as ra, WxSaveState as ua, WxRowMenu as Pt, WxListScreen as da, WxLinkField as ca } from "@webx-ui/module-admin";
+import { WxMediaField as ba, createMediaApi as va } from "@webx-ui/module-media";
+function Ue(t) {
+  const c = `${t.apiPath}/banners`, o = (s) => `${c}/places/${encodeURIComponent(s)}`, f = (s) => s.data;
   return {
-    places: () => i.http.get(`${s}/places`).then(y),
-    createPlace: (n) => i.http.post(`${s}/places`, n).then(y),
-    renamePlace: (n, v) => i.http.put(u(n), { title: v }).then(y),
-    removePlace: (n) => i.http.delete(u(n)).then(() => {
+    places: () => t.http.get(`${c}/places`).then(f),
+    createPlace: (s) => t.http.post(`${c}/places`, s).then(f),
+    renamePlace: (s, $) => t.http.put(o(s), { title: $ }).then(f),
+    removePlace: (s) => t.http.delete(o(s)).then(() => {
     }),
-    list: (n, v = !1) => i.http.get(`${u(n)}/banners${v ? "?trashed=1" : ""}`).then(y),
-    get: (n) => i.http.get(`${s}/${n}`).then(y),
-    create: (n, v) => i.http.post(`${u(n)}/banners`, { values: v }).then(y),
-    save: (n, v, d) => i.http.put(
-      `${s}/${n}`,
-      d === void 0 ? { values: v } : { values: v, place: d }
-    ).then(y),
-    remove: (n) => i.http.delete(`${s}/${n}`).then(() => {
+    list: (s, $ = !1) => t.http.get(`${o(s)}/banners${$ ? "?trashed=1" : ""}`).then(f),
+    get: (s) => t.http.get(`${c}/${s}`).then(f),
+    create: (s, $) => t.http.post(`${o(s)}/banners`, { values: $ }).then(f),
+    save: (s, $, _) => t.http.put(
+      `${c}/${s}`,
+      _ === void 0 ? { values: $ } : { values: $, place: _ }
+    ).then(f),
+    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: (n) => i.http.post(`${s}/${n}/restore`, {}).then(y),
-    reorder: (n, v) => i.http.post(`${u(n)}/reorder`, { ids: v }).then(() => {
-    })
+    restore: (s) => t.http.post(`${c}/${s}/restore`, {}).then(f),
+    reorder: (s, $) => t.http.post(`${o(s)}/reorder`, { ids: $ }).then(() => {
+    }),
+    theme: () => t.http.get(`${c}/theme`).then(f)
+  };
+}
+const Wt = /* @__PURE__ */ Symbol("wx-banner-editor");
+function ma(t) {
+  qt(Wt, t);
+}
+function pa() {
+  return Kt(Wt, null);
+}
+const Ne = {
+  x: [-50, 150, 5],
+  y: [-50, 150, 5],
+  w: [1, 150, 40],
+  size: [0.3, 20, 3],
+  pad: [0, 10, 0],
+  radius: [0, 50, 0],
+  tracking: [-0.2, 1, 0],
+  rotate: [-180, 180, 0],
+  gap: [0, 10, 1]
+}, ya = ["tl", "t", "tr", "l", "c", "r", "bl", "b", "br"], fa = {
+  tl: [0, 0],
+  t: [-50, 0],
+  tr: [-100, 0],
+  l: [0, -50],
+  c: [-50, -50],
+  r: [-100, -50],
+  bl: [0, -100],
+  b: [-50, -100],
+  br: [-100, -100]
+}, ht = ["fade", "rise", "slide-start", "slide-end", "zoom"], wt = ["spin", "float"], ha = ["title", "text"];
+function he(t = {}) {
+  return {
+    x: 5,
+    y: 5,
+    w: 40,
+    size: 3,
+    pad: 0,
+    radius: 0,
+    tracking: 0,
+    rotate: 0,
+    gap: 1,
+    origin: "tl",
+    hidden: !1,
+    ...t
+  };
+}
+function Ae(t = {}) {
+  return {
+    font: null,
+    weight: 400,
+    italic: !1,
+    uppercase: !1,
+    align: "start",
+    line_height: 1.2,
+    color: null,
+    background: null,
+    opacity: 1,
+    shadow: !1,
+    ...t
+  };
+}
+function Re(t = {}) {
+  return { in: null, loop: null, delay: 0, duration: 600, ...t };
+}
+function lt(t) {
+  return JSON.parse(JSON.stringify(t));
+}
+function Lt(t = []) {
+  const c = new Set(t);
+  let o = "";
+  do
+    o = Math.random().toString(36).slice(2, 8).padEnd(6, "0");
+  while (c.has(o) || !/^[a-z0-9]{4,12}$/.test(o));
+  return o;
+}
+function gt(t, c, o) {
+  const f = { id: Lt(c), type: t, style: Ae(), motion: Re() };
+  switch (t) {
+    case "text":
+      return {
+        ...f,
+        text: { [o]: "Text" },
+        tag: "p",
+        frames: { desktop: he({ x: 10, y: 10, size: 2.4 }), mobile: null }
+      };
+    case "image":
+      return {
+        ...f,
+        image: null,
+        frames: { desktop: he({ x: 60, y: 10, w: 20 }), mobile: null }
+      };
+    case "button":
+      return {
+        ...f,
+        text: { [o]: "Button" },
+        link: null,
+        variant: null,
+        frames: { desktop: he({ x: 10, y: 25, w: 30, size: 1.2 }), mobile: null }
+      };
+    case "buttons":
+      return {
+        ...f,
+        frames: { desktop: he({ x: 6, y: 27, w: 50, size: 1.2 }), mobile: null }
+      };
+  }
+}
+function wa(t) {
+  const c = [], o = (f) => {
+    const s = { ...f, id: Lt(c) };
+    return c.push(s.id), s;
   };
+  return [
+    o({
+      type: "text",
+      text: { [t]: "{title}" },
+      tag: "h2",
+      style: Ae({ weight: 700, line_height: 1.05, color: "#ffffff", shadow: !0 }),
+      frames: { desktop: he({ x: 6, y: 6, w: 45, size: 4.2 }), mobile: null },
+      motion: Re({ in: "rise" })
+    }),
+    o({
+      type: "text",
+      text: { [t]: "{text}" },
+      tag: "p",
+      style: Ae({ line_height: 1.4, color: "#ffffff", shadow: !0 }),
+      frames: { desktop: he({ x: 6, y: 18, w: 40, size: 1.4 }), mobile: null },
+      motion: Re({ in: "rise", delay: 150 })
+    }),
+    o({
+      type: "buttons",
+      style: Ae(),
+      frames: { desktop: he({ x: 6, y: 28, w: 50, size: 1.2 }), mobile: null },
+      motion: Re({ in: "rise", delay: 300 })
+    })
+  ];
+}
+function ga(t, c, o, f) {
+  const s = t ?? {};
+  return ([.../* @__PURE__ */ new Set([c, ...o, ...Object.keys(s)])].map((h) => s[h]).find((h) => (h ?? "").trim() !== "") ?? "").replaceAll("{title}", f.title ?? "").replaceAll("{text}", f.text ?? "").trim();
+}
+function xa(t) {
+  return [...t.matchAll(/\{([a-z_.]+)\}/g)].map((c) => c[1] ?? "").filter((c) => !ha.includes(c));
+}
+function xt(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 Ot = (t) => Math.round(t * 100) / 100;
+function ka(t, c) {
+  const o = {}, f = t.frames.desktop, s = t.frames.mobile ?? f;
+  for (const [h, b] of [
+    ["", f],
+    ["m-", s]
+  ]) {
+    for (const g of Object.keys(Ne))
+      o[`--${h}${g}`] = String(Ot(b[g]));
+    const [v, w] = fa[b.origin] ?? [0, 0];
+    o[`--${h}ox`] = `${v}%`, o[`--${h}oy`] = `${w}%`, o[`--${h}display`] = b.hidden ? "none" : "block";
+  }
+  o["--weight"] = String(t.style.weight), o["--leading"] = String(t.style.line_height), o["--opacity"] = String(t.style.opacity), o["--align"] = t.style.align;
+  const $ = xt(t.style.color), _ = xt(t.style.background);
+  return $ && (o["--color"] = $), _ && (o["--background"] = _), t.style.font && (o["--font"] = `var(--site-font-${t.style.font})`), o["z-index"] = String(c), o;
+}
+function _a(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;
 }
-const aa = {
+function kt(t, c) {
+  if (typeof t == "number") return t > 0 ? t : c;
+  const o = /^\s*(\d+(?:\.\d+)?)\s*(?:\/\s*(\d+(?:\.\d+)?))?\s*$/.exec(t ?? "");
+  if (!o) return c;
+  const f = Number(o[1]) / Number(o[2] ?? 1);
+  return Number.isFinite(f) && f > 0 ? f : c;
+}
+function $a(t, c) {
+  if (t > c) {
+    const f = c / t * 100;
+    return { left: (100 - f) / 2, top: 0, width: f, height: 100 };
+  }
+  const o = t / c * 100;
+  return { left: 0, top: (100 - o) / 2, width: 100, height: o };
+}
+function Va(t) {
+  const c = { ...t };
+  for (const o of Object.keys(Ne)) {
+    const [f, s] = Ne[o];
+    c[o] = Ot(Math.min(s, Math.max(f, Number(c[o]) || 0)));
+  }
+  return c;
+}
+const za = {
   module: {
     banners: "Banners"
   },
@@ -108,7 +300,9 @@ const aa = {
     deleted: "Moved to the bin.",
     "reorder-failed": "The new order was not saved.",
     "save-failed": "Not saved.",
-    cancel: "Cancel"
+    cancel: "Cancel",
+    previous: "Previous banner",
+    next: "Next banner"
   },
   screen: {
     media: "Pictures and video",
@@ -133,47 +327,138 @@ const aa = {
     "variant-placeholder": "The first one",
     settings: "Settings",
     enabled: "On",
-    "enabled-help": "Only a banner that is on is shown on the site. A new one starts off."
+    "enabled-help": "Only a banner that is on is shown on the site. A new one starts off.",
+    layers: "Layers",
+    "layers-help": "Texts, pictures and buttons placed on the picture. Every size is a percent of the picture’s width, so the banner scales as a whole."
+  },
+  layers: {
+    text: "Text",
+    image: "Picture",
+    button: "Button",
+    "title-layer": "Banner title",
+    "text-layer": "Banner text",
+    "buttons-layer": "Banner buttons",
+    desktop: "Computer",
+    mobile: "Phone",
+    layout: "Layout",
+    undo: "Undo (Ctrl+Z)",
+    redo: "Redo (Ctrl+Shift+Z)",
+    "not-here": "This place does not print layers: they are kept, but the site does not show them.",
+    canvas: "Banner canvas",
+    "no-picture": "Choose a picture above",
+    hint: "Click to select, drag to move, the handles resize. Arrows move by 0.05 (with Shift by 0.5), Delete removes, Ctrl+D duplicates, Ctrl+Z undoes. Alt while dragging: no snapping. The shade is what the frame of the place crops away.",
+    empty: "No layers yet",
+    list: "Layers",
+    outside: "Outside the frame: not seen on the site",
+    show: "Show on this layout",
+    hide: "Hide on this layout",
+    delete: "Delete",
+    choose: "Select a layer on the picture or in the list.",
+    name: "Name in the list",
+    label: "Label",
+    words: "Words",
+    "falls-back": "Empty here: the site shows the words in :code.",
+    "words-help": "Empty in a language — the default language is shown. {title} and {text} put in the banner’s fields.",
+    "unknown-field": "Not a field of the banner: :fields. Fields are {title} and {text}.",
+    tag: "Tag",
+    link: "Link",
+    variant: "Look",
+    "buttons-help": "The buttons of the banner, in a row. Edit them in “Buttons” below.",
+    "geometry-desktop": "Position on a computer",
+    "geometry-mobile-own": "Position on a phone",
+    "geometry-mobile-same": "Position on a phone — as on a computer",
+    "same-as-desktop": "As on a computer",
+    unit: "In percent of the picture’s width.",
+    x: "x (from the left)",
+    y: "y (from the top)",
+    w: "Width",
+    size: "Font size",
+    pad: "Padding",
+    radius: "Rounding",
+    tracking: "Letter spacing, em",
+    rotate: "Rotation, °",
+    gap: "Gap",
+    origin: "Anchor",
+    "origin-help": "Which point of the layer stands at x and y: longer words grow away from it.",
+    "hidden-here": "Hidden on this layout",
+    look: "Look",
+    font: "Font",
+    "font-site": "As on the site",
+    "font-heading": "Headings",
+    "font-body": "Body text",
+    weight: "Weight",
+    "line-height": "Line height",
+    opacity: "Opacity",
+    align: "Alignment",
+    "align-start": "Start",
+    "align-center": "Centre",
+    "align-end": "End",
+    italic: "Italic",
+    uppercase: "Capitals",
+    shadow: "Shadow",
+    color: "Colour",
+    background: "Background",
+    motion: "Motion",
+    entrance: "Entrance",
+    loop: "Loop",
+    delay: "Delay, ms",
+    duration: "Duration, ms",
+    "motion-none": "None",
+    "in-fade": "Fade in",
+    "in-rise": "Rise",
+    "in-slide-start": "From the start",
+    "in-slide-end": "From the end",
+    "in-zoom": "Zoom",
+    "loop-spin": "Spin",
+    "loop-float": "Float"
   }
-}, ge = /* @__PURE__ */ new WeakSet();
-function ee() {
+}, _t = /* @__PURE__ */ new WeakSet();
+function Te() {
   try {
-    const { i18n: i } = J();
-    ge.has(i) || (i.defaults("webx-banners", aa), ge.add(i));
+    const { i18n: t } = ze();
+    _t.has(t) || (t.defaults("webx-banners", za), _t.add(t));
   } catch {
   }
 }
-const ta = /* @__PURE__ */ X({
+const Sa = /* @__PURE__ */ Ve({
   name: "WxBannerEditorPage",
   __name: "BannerEditorPage",
   props: {
     base: { default: "/banners" }
   },
-  setup(i) {
-    const s = i, u = J(), y = Z(u), n = ie(), v = ce(), d = $e();
-    ee();
-    const l = Y("webx-banners"), t = ue(), P = $(() => {
-      const a = n.params.id;
+  setup(t) {
+    const c = t, o = ze(), f = Ue(o), s = st(), $ = ot(), _ = Je();
+    Te();
+    const h = Se("webx-banners"), b = rt(), v = y(() => {
+      const a = s.params.id;
       return typeof a == "string" && a !== "" ? Number(a) : null;
-    }), b = W(null), g = W({}), S = W(""), h = W(null), k = W(null), O = W([]), C = W(!0), B = W(!1), w = W({}), x = $(() => u.can("banners.manage")), N = $(() => JSON.stringify(g.value)), U = $(
-      () => S.value !== "" && (N.value !== S.value || h.value !== k.value)
-    ), K = $(() => B.value ? "saving" : U.value || P.value === null ? "unsaved" : "saved"), F = $(() => {
-      const a = g.value.title, q = P.value === null ? l("banner.new") : b.value?.title ?? "";
-      return Me(a, d.active.value, q) || l("banner.untitled");
-    }), r = $(() => {
-      const a = k.value ?? h.value;
-      return a === null ? s.base : `${s.base}?place=${encodeURIComponent(a)}`;
-    }), I = $(
-      () => u.state.manifest?.modules.find((a) => a.id === "banners")?.title ?? l("module.banners")
-    ), f = $(
-      () => O.value.map((a) => ({ value: a.key, label: `${a.title} · ${a.key}` }))
-    ), o = $({
-      get: () => h.value,
+    }), w = A(null), g = A({}), T = A(""), V = A(null), W = A(null), K = A([]), J = A(!0), U = A(!1), C = A({}), L = y(() => o.can("banners.manage")), R = y(() => JSON.stringify(g.value)), X = y(
+      () => T.value !== "" && (R.value !== T.value || V.value !== W.value)
+    ), ee = y(() => U.value ? "saving" : X.value || v.value === null ? "unsaved" : "saved"), se = y(() => {
+      const a = g.value.title, n = v.value === null ? h("banner.new") : w.value?.title ?? "";
+      return Zt(a, _.active.value, n) || h("banner.untitled");
+    }), k = y(() => {
+      const a = W.value ?? V.value;
+      return a === null ? c.base : `${c.base}?place=${encodeURIComponent(a)}`;
+    }), q = y(
+      () => o.state.manifest?.modules.find((a) => a.id === "banners")?.title ?? h("module.banners")
+    ), z = y(() => K.value.find((a) => a.key === V.value) ?? null);
+    ma({ values: g, place: z });
+    const S = y(
+      () => z.value?.layers ? [] : [{ op: "remove", target: "layers-card" }]
+    );
+    function M(a) {
+      return !z.value?.layers || a.layers !== null && a.layers !== void 0 ? a : { ...a, layers: wa(_.list.value[0]?.code ?? _.active.value) };
+    }
+    const D = y(
+      () => K.value.map((a) => ({ value: a.key, label: `${a.title} · ${a.key}` }))
+    ), we = y({
+      get: () => V.value,
       set: (a) => {
-        h.value = a == null ? null : String(a);
+        V.value = a == null ? null : String(a);
       }
     });
-    function V() {
+    function Ce() {
       return {
         image: null,
         image_mobile: null,
@@ -181,127 +466,134 @@ const ta = /* @__PURE__ */ X({
         title: {},
         text: {},
         buttons: [],
+        layers: null,
         enabled: !1
       };
     }
-    function _(a) {
-      b.value = a.banner, g.value = a.values, S.value = JSON.stringify(a.values), h.value = a.banner.place, k.value = a.banner.place;
+    function ge(a) {
+      w.value = a.banner, V.value = a.banner.place, W.value = a.banner.place;
+      const n = M(a.values);
+      g.value = n, T.value = JSON.stringify(n);
     }
-    async function pe() {
-      C.value = !0;
+    async function me() {
+      J.value = !0;
       try {
-        const [a, q] = await Promise.all([
-          y.places(),
-          P.value === null ? Promise.resolve(null) : y.get(P.value)
+        const [a, n] = await Promise.all([
+          f.places(),
+          v.value === null ? Promise.resolve(null) : f.get(v.value)
         ]);
-        if (O.value = a, q !== null)
-          _(q);
+        if (K.value = a, n !== null)
+          ge(n);
         else {
-          const z = n.query.place, Se = typeof z == "string" && a.some((Ve) => Ve.key === z) ? z : null, me = V();
-          b.value = null, g.value = me, S.value = JSON.stringify(me), h.value = Se ?? a[0]?.key ?? null, k.value = h.value;
+          const I = s.query.place, ue = typeof I == "string" && a.some((je) => je.key === I) ? I : null;
+          w.value = null, V.value = ue ?? a[0]?.key ?? null, W.value = V.value;
+          const De = M(Ce());
+          g.value = De, T.value = JSON.stringify(De);
         }
       } catch (a) {
-        T.danger(t(a)), v.push(s.base);
+        Z.danger(b(a)), $.push(c.base);
       } finally {
-        C.value = !1;
+        J.value = !1;
       }
     }
-    async function ve() {
-      if (!(B.value || !x.value || h.value === null)) {
-        B.value = !0, w.value = {};
+    async function ie() {
+      if (!(U.value || !L.value || V.value === null)) {
+        U.value = !0, C.value = {};
         try {
-          const a = P.value === null, q = a ? await y.create(h.value, g.value) : await y.save(
-            P.value,
+          const a = v.value === null, n = a ? await f.create(V.value, g.value) : await f.save(
+            v.value,
             g.value,
-            h.value !== k.value ? h.value : void 0
+            V.value !== W.value ? V.value : void 0
           );
-          _(q), T.success(l("banner.saved")), a && v.replace(`${s.base}/${q.banner.id}`);
+          ge(n), Z.success(h("banner.saved")), a && $.replace(`${c.base}/${n.banner.id}`);
         } catch (a) {
-          const q = a.body;
-          q?.errors ? (w.value = q.errors, T.danger(l("banner.save-failed"))) : T.danger(t(a));
+          const n = a.body;
+          n?.errors ? (C.value = n.errors, Z.danger(h("banner.save-failed"))) : Z.danger(b(a));
         } finally {
-          B.value = !1;
+          U.value = !1;
         }
       }
     }
-    async function We() {
-      const a = b.value;
-      if (!(!a || !await G({
-        title: l("banner.delete-title", { name: a.title }),
-        message: l("banner.delete-text"),
-        confirmText: l("banner.delete"),
-        cancelText: l("banner.cancel"),
+    async function de() {
+      const a = w.value;
+      if (!(!a || !await Fe({
+        title: h("banner.delete-title", { name: a.title }),
+        message: h("banner.delete-text"),
+        confirmText: h("banner.delete"),
+        cancelText: h("banner.cancel"),
         tone: "danger"
       })))
         try {
-          await y.remove(a.id), T.success(l("banner.deleted")), S.value = N.value, h.value = k.value, v.push(r.value);
-        } catch (z) {
-          T.danger(t(z));
+          await f.remove(a.id), Z.success(h("banner.deleted")), T.value = R.value, V.value = W.value, $.push(k.value);
+        } catch (I) {
+          Z.danger(b(I));
         }
     }
-    function be(a) {
-      U.value && a.preventDefault();
-    }
-    function fe(a) {
-      (a.ctrlKey || a.metaKey) && a.key.toLowerCase() === "s" && (a.preventDefault(), (U.value || P.value === null) && ve());
-    }
-    Xe(fe), j(P, (a) => {
-      a !== null && b.value?.id === a || pe();
-    }), _e(() => {
-      pe(), window.addEventListener("beforeunload", be);
-    }), Ce(() => {
-      window.removeEventListener("beforeunload", be);
-    }), Le(async () => !U.value || !x.value ? !0 : await G({
-      title: l("banner.leave-title"),
-      message: l("banner.leave-text"),
-      confirmText: l("banner.leave"),
-      cancelText: l("banner.cancel"),
+    function xe(a) {
+      X.value && a.preventDefault();
+    }
+    function ce(a) {
+      (a.ctrlKey || a.metaKey) && a.key.toLowerCase() === "s" && (a.preventDefault(), (X.value || v.value === null) && ie());
+    }
+    ia(ce), $e(V, () => {
+      J.value || (g.value = M(g.value));
+    }), $e(v, (a) => {
+      a !== null && w.value?.id === a || me();
+    }), nt(() => {
+      me(), window.addEventListener("beforeunload", xe);
+    }), Vt(() => {
+      window.removeEventListener("beforeunload", xe);
+    }), Gt(async () => !X.value || !L.value ? !0 : await Fe({
+      title: h("banner.leave-title"),
+      message: h("banner.leave-text"),
+      confirmText: h("banner.leave"),
+      cancelText: h("banner.cancel"),
       tone: "danger"
     }));
-    const Te = $(
-      () => x.value && b.value !== null ? [
+    const p = y(
+      () => L.value && w.value !== null ? [
         {
           key: "delete",
-          label: l("banner.delete"),
+          label: h("banner.delete"),
           icon: "trash",
           danger: !0,
           menu: !0,
           run: () => {
-            We();
+            de();
           }
         }
       ] : []
     );
-    return (a, q) => (m(), M("div", {
+    return (a, n) => (m(), B("div", {
       class: "wx-banner-editor",
-      onKeydown: fe
+      onKeydown: ce
     }, [
-      C.value ? (m(), M(H, { key: 0 }, [
-        c(e(Q), {
+      J.value ? (m(), B(ne, { key: 0 }, [
+        i(e(qe), {
           class: "wx-banner-editor__ghost",
           title: "",
           rows: 1
         }),
-        c(e(te), null, {
-          default: p(() => [
-            c(e(Q), { rows: 6 })
+        i(e(Qe), null, {
+          default: d(() => [
+            i(e(qe), { rows: 6 })
           ]),
           _: 1
         })
-      ], 64)) : (m(), M(H, { key: 1 }, [
-        c(e(Pe), {
+      ], 64)) : (m(), B(ne, { key: 1 }, [
+        i(e(Bt), {
           divider: "",
-          back: r.value,
-          "back-label": I.value,
-          title: F.value,
-          actions: Te.value
-        }, xe({ _: 2 }, [
-          b.value && !b.value.enabled ? {
+          back: k.value,
+          "back-label": q.value,
+          title: se.value,
+          actions: p.value
+        }, zt({ _: 2 }, [
+          w.value && !w.value.enabled ? {
             name: "title-after",
-            fn: p(() => [
-              c(e(ne), { dot: "" }, {
-                default: p(() => [
-                  E(L(e(l)("banner.disabled")), 1)
+            fn: d(() => [
+              i(e(et), { dot: "" }, {
+                default: d(() => [
+                  F(N(e(h)("banner.disabled")), 1)
                 ]),
                 _: 1
               })
@@ -309,21 +601,21 @@ const ta = /* @__PURE__ */ X({
             key: "0"
           } : void 0
         ]), 1032, ["back", "back-label", "title", "actions"]),
-        c(e(te), { class: "wx-banner-editor__place" }, {
-          default: p(() => [
-            c(e(le), {
-              label: e(l)("banner.place"),
-              help: P.value === null ? void 0 : e(l)("banner.place-help"),
-              error: w.value.place?.[0],
+        i(e(Qe), { class: "wx-banner-editor__place" }, {
+          default: d(() => [
+            i(e(G), {
+              label: e(h)("banner.place"),
+              help: v.value === null ? void 0 : e(h)("banner.place-help"),
+              error: C.value.place?.[0],
               required: ""
             }, {
-              default: p(() => [
-                c(e(Re), {
-                  modelValue: o.value,
-                  "onUpdate:modelValue": q[0] || (q[0] = (z) => o.value = z),
-                  options: f.value,
-                  disabled: !x.value || B.value,
-                  "aria-label": e(l)("banner.place")
+              default: d(() => [
+                i(e(fe), {
+                  modelValue: we.value,
+                  "onUpdate:modelValue": n[0] || (n[0] = (I) => we.value = I),
+                  options: D.value,
+                  disabled: !L.value || U.value,
+                  "aria-label": e(h)("banner.place")
                 }, null, 8, ["modelValue", "options", "disabled", "aria-label"])
               ]),
               _: 1
@@ -331,107 +623,108 @@ const ta = /* @__PURE__ */ X({
           ]),
           _: 1
         }),
-        c(e(Ye), {
+        i(e(ra), {
           modelValue: g.value,
-          "onUpdate:modelValue": q[1] || (q[1] = (z) => g.value = z),
+          "onUpdate:modelValue": n[1] || (n[1] = (I) => g.value = I),
           name: "banners.form",
-          errors: w.value,
-          disabled: !x.value || B.value
-        }, null, 8, ["modelValue", "errors", "disabled"]),
-        x.value ? (m(), D(e(Ue), { key: 0 }, {
-          state: p(() => [
-            c(e(Ze), { state: K.value }, null, 8, ["state"])
+          patch: S.value,
+          errors: C.value,
+          disabled: !L.value || U.value
+        }, null, 8, ["modelValue", "patch", "errors", "disabled"]),
+        L.value ? (m(), E(e(Xt), { key: 0 }, {
+          state: d(() => [
+            i(e(ua), { state: ee.value }, null, 8, ["state"])
           ]),
-          default: p(() => [
-            c(e(se), {
+          default: d(() => [
+            i(e(Q), {
               type: "primary",
-              loading: B.value,
-              disabled: !U.value && P.value !== null || h.value === null,
-              onClick: ve
+              loading: U.value,
+              disabled: !X.value && v.value !== null || V.value === null,
+              onClick: ie
             }, {
-              default: p(() => [
-                E(L(e(l)("banner.save")), 1)
+              default: d(() => [
+                F(N(e(h)("banner.save")), 1)
               ]),
               _: 1
             }, 8, ["loading", "disabled"])
           ]),
           _: 1
-        })) : A("", !0)
+        })) : H("", !0)
       ], 64))
     ], 32));
   }
-}), de = (i, s) => {
-  const u = i.__vccOpts || i;
-  for (const [y, n] of s)
-    u[y] = n;
-  return u;
-}, ke = /* @__PURE__ */ de(ta, [["__scopeId", "data-v-2c21e525"]]), na = /* @__PURE__ */ X({
+}), Ie = (t, c) => {
+  const o = t.__vccOpts || t;
+  for (const [f, s] of c)
+    o[f] = s;
+  return o;
+}, $t = /* @__PURE__ */ Ie(Sa, [["__scopeId", "data-v-b6bd4d3f"]]), Ca = /* @__PURE__ */ Ve({
   name: "WxBannerPlaceDialog",
   __name: "PlaceDialog",
   props: {
     place: { default: null }
   },
-  setup(i) {
-    const s = i, { open: u, resolve: y, dismiss: n } = ze(), v = Z(J()), d = $e();
-    ee();
-    const l = Y("webx-banners"), t = s.place !== null;
-    function P() {
-      if (s.place === null) return {};
-      if (s.place.titles) return { ...s.place.titles };
-      const w = d.list.value[0]?.code;
-      return w === void 0 ? {} : { [w]: s.place.title };
-    }
-    const b = W(s.place?.key ?? ""), g = W(P()), S = W(!1), h = W({}), k = Ne("field");
-    _e(async () => {
-      await qe(), k.value?.querySelector("input")?.focus();
+  setup(t) {
+    const c = t, { open: o, resolve: f, dismiss: s } = Yt(), $ = Ue(ze()), _ = Je();
+    Te();
+    const h = Se("webx-banners"), b = c.place !== null;
+    function v() {
+      if (c.place === null) return {};
+      if (c.place.titles) return { ...c.place.titles };
+      const C = _.list.value[0]?.code;
+      return C === void 0 ? {} : { [C]: c.place.title };
+    }
+    const w = A(c.place?.key ?? ""), g = A(v()), T = A(!1), V = A({}), W = Jt("field");
+    nt(async () => {
+      await jt(), W.value?.querySelector("input")?.focus();
     });
-    function O() {
-      return Object.values(g.value).some((w) => w.trim() !== "");
+    function K() {
+      return Object.values(g.value).some((C) => C.trim() !== "");
     }
-    function C(w) {
-      const x = Object.keys(h.value).find((N) => N === w || N.startsWith(`${w}.`));
-      return x === void 0 ? void 0 : h.value[x]?.[0];
+    function J(C) {
+      const L = Object.keys(V.value).find((R) => R === C || R.startsWith(`${C}.`));
+      return L === void 0 ? void 0 : V.value[L]?.[0];
     }
-    async function B() {
-      if (!(!O() || S.value)) {
-        S.value = !0, h.value = {};
+    async function U() {
+      if (!(!K() || T.value)) {
+        T.value = !0, V.value = {};
         try {
-          y(
-            t && s.place !== null ? await v.renamePlace(s.place.key, g.value) : await v.createPlace({ key: b.value.trim(), title: g.value })
+          f(
+            b && c.place !== null ? await $.renamePlace(c.place.key, g.value) : await $.createPlace({ key: w.value.trim(), title: g.value })
           );
-        } catch (w) {
-          h.value = w.body?.errors ?? {};
+        } catch (C) {
+          V.value = C.body?.errors ?? {};
         } finally {
-          S.value = !1;
+          T.value = !1;
         }
       }
     }
-    return (w, x) => (m(), D(e(Ae), {
-      open: e(u),
-      "onUpdate:open": x[3] || (x[3] = (N) => De(u) ? u.value = N : null),
-      title: t ? e(l)("places.rename-title") : e(l)("places.new-title"),
+    return (C, L) => (m(), E(e(Qt), {
+      open: e(o),
+      "onUpdate:open": L[3] || (L[3] = (R) => ye(o) ? o.value = R : null),
+      title: b ? e(h)("places.rename-title") : e(h)("places.new-title"),
       width: 440
     }, {
-      footer: p(() => [
-        c(e(Ee), { size: "sm" }, {
-          default: p(() => [
-            c(e(se), {
+      footer: d(() => [
+        i(e(ea), { size: "sm" }, {
+          default: d(() => [
+            i(e(Q), {
               variant: "outline",
-              onClick: x[2] || (x[2] = (N) => e(n)())
+              onClick: L[2] || (L[2] = (R) => e(s)())
             }, {
-              default: p(() => [
-                E(L(e(l)("places.cancel")), 1)
+              default: d(() => [
+                F(N(e(h)("places.cancel")), 1)
               ]),
               _: 1
             }),
-            c(e(se), {
+            i(e(Q), {
               type: "primary",
-              loading: S.value,
-              disabled: !O() || b.value.trim() === "",
-              onClick: B
+              loading: T.value,
+              disabled: !K() || w.value.trim() === "",
+              onClick: U
             }, {
-              default: p(() => [
-                E(L(t ? e(l)("places.save") : e(l)("places.create")), 1)
+              default: d(() => [
+                F(N(b ? e(h)("places.save") : e(h)("places.create")), 1)
               ]),
               _: 1
             }, 8, ["loading", "disabled"])
@@ -439,42 +732,42 @@ const ta = /* @__PURE__ */ X({
           _: 1
         })
       ]),
-      default: p(() => [
-        c(e(le), {
-          label: e(l)("places.field-title"),
-          error: C("title"),
+      default: d(() => [
+        i(e(G), {
+          label: e(h)("places.field-title"),
+          error: J("title"),
           required: ""
         }, {
-          default: p(() => [
-            R("div", {
+          default: d(() => [
+            P("div", {
               ref_key: "field",
-              ref: k
+              ref: W
             }, [
-              c(e(he), {
+              i(e(Ke), {
                 modelValue: g.value,
-                "onUpdate:modelValue": x[0] || (x[0] = (N) => g.value = N),
+                "onUpdate:modelValue": L[0] || (L[0] = (R) => g.value = R),
                 localized: "",
-                "aria-label": e(l)("places.field-title"),
-                onKeyup: ye(B, ["enter"])
+                "aria-label": e(h)("places.field-title"),
+                onKeyup: ft(U, ["enter"])
               }, null, 8, ["modelValue", "aria-label"])
             ], 512)
           ]),
           _: 1
         }, 8, ["label", "error"]),
-        c(e(le), {
-          label: e(l)("places.field-key"),
-          error: C("key"),
-          help: t ? void 0 : e(l)("places.key-help"),
+        i(e(G), {
+          label: e(h)("places.field-key"),
+          error: J("key"),
+          help: b ? void 0 : e(h)("places.key-help"),
           required: ""
         }, {
-          default: p(() => [
-            c(e(he), {
-              modelValue: b.value,
-              "onUpdate:modelValue": x[1] || (x[1] = (N) => b.value = N),
-              disabled: t,
-              "aria-label": e(l)("places.field-key"),
+          default: d(() => [
+            i(e(Ke), {
+              modelValue: w.value,
+              "onUpdate:modelValue": L[1] || (L[1] = (R) => w.value = R),
+              disabled: b,
+              "aria-label": e(h)("places.field-key"),
               autocomplete: "off",
-              onKeyup: ye(B, ["enter"])
+              onKeyup: ft(U, ["enter"])
             }, null, 8, ["modelValue", "aria-label"])
           ]),
           _: 1
@@ -483,13 +776,13 @@ const ta = /* @__PURE__ */ X({
       _: 1
     }, 8, ["open", "title"]));
   }
-}), la = { class: "wx-banner-place" }, sa = ["aria-label"], ra = { class: "wx-banner-place__usage" }, oa = {
+}), Ba = { class: "wx-banner-place" }, Pa = ["aria-label"], Wa = { class: "wx-banner-place__usage" }, La = {
   key: 0,
   class: "wx-banner-place__layout"
-}, ia = { class: "wx-banner-row__thumb" }, ca = ["src"], ua = { class: "wx-banner-row__body" }, da = { class: "wx-banner-row__title" }, pa = {
+}, Oa = { class: "wx-banner-row__thumb" }, Na = ["src"], Ua = { class: "wx-banner-row__body" }, Ta = { class: "wx-banner-row__title" }, Ia = {
   key: 0,
   class: "wx-banner-row__facts"
-}, va = /* @__PURE__ */ X({
+}, Da = /* @__PURE__ */ Ve({
   name: "WxBannerPlacePane",
   __name: "PlacePane",
   props: {
@@ -498,155 +791,155 @@ const ta = /* @__PURE__ */ X({
     inline: { type: Boolean, default: !0 }
   },
   emits: ["back", "changed"],
-  setup(i, { emit: s }) {
-    const u = i, y = s, n = J(), v = Z(n), d = ie(), l = ce();
-    ee();
-    const t = Y("webx-banners"), P = ue(), b = W([]), g = W(!0), S = $(() => n.can("banners.manage")), h = $({
-      get: () => d.query.view === "trashed" ? "trashed" : "live",
-      set: (o) => {
-        l.replace({
-          query: { ...d.query, view: o === "trashed" ? "trashed" : void 0 }
+  setup(t, { emit: c }) {
+    const o = t, f = c, s = ze(), $ = Ue(s), _ = st(), h = ot();
+    Te();
+    const b = Se("webx-banners"), v = rt(), w = A([]), g = A(!0), T = y(() => s.can("banners.manage")), V = y({
+      get: () => _.query.view === "trashed" ? "trashed" : "live",
+      set: (S) => {
+        h.replace({
+          query: { ..._.query, view: S === "trashed" ? "trashed" : void 0 }
         });
       }
-    }), k = $(() => h.value === "trashed"), O = $(() => [
-      { value: "live", label: t("banner.all") },
-      { value: "trashed", label: t("banner.trashed"), icon: "trash" }
-    ]), C = $(() => S.value && !k.value && b.value.length > 1), B = $(() => ["single", "random", "slider"].includes(u.place.layout) ? t(`places.layout-${u.place.layout}`) : "");
-    async function w() {
+    }), W = y(() => V.value === "trashed"), K = y(() => [
+      { value: "live", label: b("banner.all") },
+      { value: "trashed", label: b("banner.trashed"), icon: "trash" }
+    ]), J = y(() => T.value && !W.value && w.value.length > 1), U = y(() => ["single", "random", "slider"].includes(o.place.layout) ? b(`places.layout-${o.place.layout}`) : "");
+    async function C() {
       g.value = !0;
       try {
-        b.value = await v.list(u.place.key, k.value);
-      } catch (o) {
-        T.danger(P(o));
+        w.value = await $.list(o.place.key, W.value);
+      } catch (S) {
+        Z.danger(v(S));
       } finally {
         g.value = !1;
       }
     }
-    j(k, () => {
-      w();
-    }), w();
-    function x(o) {
-      return `${u.base}/${o.id}`;
+    $e(W, () => {
+      C();
+    }), C();
+    function L(S) {
+      return `${o.base}/${S.id}`;
     }
-    function N() {
-      l.push({ path: `${u.base}/new`, query: { place: u.place.key } });
+    function R() {
+      h.push({ path: `${o.base}/new`, query: { place: o.place.key } });
     }
-    async function U() {
+    async function X() {
       try {
-        await v.reorder(
-          u.place.key,
-          b.value.map((o) => o.id)
+        await $.reorder(
+          o.place.key,
+          w.value.map((S) => S.id)
         );
-      } catch (o) {
-        T.danger(P(o, t("banner.reorder-failed"))), await w();
+      } catch (S) {
+        Z.danger(v(S, b("banner.reorder-failed"))), await C();
       }
     }
-    async function K(o) {
+    async function ee(S) {
       try {
-        const V = await v.get(o.id);
-        await v.save(o.id, { ...V.values, enabled: !o.enabled }), T.success(o.enabled ? t("banner.switched-off") : t("banner.switched-on"));
-      } catch (V) {
-        T.danger(P(V));
+        const M = await $.get(S.id);
+        await $.save(S.id, { ...M.values, enabled: !S.enabled }), Z.success(S.enabled ? b("banner.switched-off") : b("banner.switched-on"));
+      } catch (M) {
+        Z.danger(v(M));
       } finally {
-        await w();
+        await C();
       }
     }
-    async function F(o) {
-      if (await G({
-        title: t("banner.delete-title", { name: o.title }),
-        message: t("banner.delete-text"),
-        confirmText: t("banner.delete"),
-        cancelText: t("banner.cancel"),
+    async function se(S) {
+      if (await Fe({
+        title: b("banner.delete-title", { name: S.title }),
+        message: b("banner.delete-text"),
+        confirmText: b("banner.delete"),
+        cancelText: b("banner.cancel"),
         tone: "danger"
       }))
         try {
-          await v.remove(o.id), T.success(t("banner.deleted")), y("changed");
-        } catch (_) {
-          T.danger(P(_));
+          await $.remove(S.id), Z.success(b("banner.deleted")), f("changed");
+        } catch (D) {
+          Z.danger(v(D));
         } finally {
-          await w();
+          await C();
         }
     }
-    async function r(o) {
+    async function k(S) {
       try {
-        await v.restore(o.id), T.success(t("banner.restored")), y("changed");
-      } catch (V) {
-        T.danger(P(V));
+        await $.restore(S.id), Z.success(b("banner.restored")), f("changed");
+      } catch (M) {
+        Z.danger(v(M));
       } finally {
-        await w();
+        await C();
       }
     }
-    function I(o) {
-      if (k.value)
-        return S.value ? [
+    function q(S) {
+      if (W.value)
+        return T.value ? [
           {
             key: "restore",
             icon: "refresh",
-            label: t("banner.restore"),
+            label: b("banner.restore"),
             run: () => {
-              r(o);
+              k(S);
             }
           }
         ] : [];
-      const V = {
+      const M = {
         key: "open",
         icon: "edit",
-        label: t("banner.open"),
+        label: b("banner.open"),
         run: () => {
-          l.push(x(o));
+          h.push(L(S));
         }
       };
-      return S.value ? [
-        V,
+      return T.value ? [
+        M,
         {
           key: "toggle",
-          icon: o.enabled ? "eye-off" : "eye",
-          label: o.enabled ? t("banner.disable") : t("banner.enable"),
+          icon: S.enabled ? "eye-off" : "eye",
+          label: S.enabled ? b("banner.disable") : b("banner.enable"),
           run: () => {
-            K(o);
+            ee(S);
           }
         },
         {
           key: "delete",
           icon: "trash",
-          label: t("banner.delete"),
+          label: b("banner.delete"),
           danger: !0,
           run: () => {
-            F(o);
+            se(S);
           }
         }
-      ] : [V];
+      ] : [M];
     }
-    const f = $(
-      () => S.value && !k.value ? [{ key: "new", label: t("banner.new"), icon: "plus", primary: !0, run: N }] : []
+    const z = y(
+      () => T.value && !W.value ? [{ key: "new", label: b("banner.new"), icon: "plus", primary: !0, run: R }] : []
     );
-    return (o, V) => (m(), M("div", la, [
-      c(e(Pe), {
+    return (S, M) => (m(), B("div", Ba, [
+      i(e(Bt), {
         level: 3,
-        back: !u.inline,
-        "back-label": e(t)("places.places"),
-        title: i.place.title,
-        actions: f.value,
+        back: !o.inline,
+        "back-label": e(b)("places.places"),
+        title: t.place.title,
+        actions: z.value,
         "collapse-below": 420,
-        onBack: V[0] || (V[0] = (_) => y("back"))
-      }, xe({ _: 2 }, [
-        i.place.declared ? {
+        onBack: M[0] || (M[0] = (D) => f("back"))
+      }, zt({ _: 2 }, [
+        t.place.declared ? {
           name: "title-after",
-          fn: p(() => [
-            c(e(Ke), {
-              content: e(t)("places.declared-help")
+          fn: d(() => [
+            i(e(tt), {
+              content: e(b)("places.declared-help")
             }, {
-              default: p(() => [
-                R("span", {
+              default: d(() => [
+                P("span", {
                   class: "wx-banner-place__lock",
                   tabindex: "0",
-                  "aria-label": e(t)("places.declared")
+                  "aria-label": e(b)("places.declared")
                 }, [
-                  c(e(re), {
+                  i(e(le), {
                     name: "lock",
                     size: "sm"
                   })
-                ], 8, sa)
+                ], 8, Pa)
               ]),
               _: 1
             }, 8, ["content"])
@@ -654,286 +947,287 @@ const ta = /* @__PURE__ */ X({
           key: "0"
         } : void 0
       ]), 1032, ["back", "back-label", "title", "actions"]),
-      R("p", ra, [
-        R("span", null, L(e(t)("places.usage")), 1),
-        R("code", null, "banners('" + L(i.place.key) + "')", 1),
-        B.value ? (m(), M("span", oa, "· " + L(B.value), 1)) : A("", !0)
+      P("p", Wa, [
+        P("span", null, N(e(b)("places.usage")), 1),
+        P("code", null, "banners('" + N(t.place.key) + "')", 1),
+        U.value ? (m(), B("span", La, "· " + N(U.value), 1)) : H("", !0)
       ]),
-      c(e(Fe), {
-        modelValue: h.value,
-        "onUpdate:modelValue": V[1] || (V[1] = (_) => h.value = _),
+      i(e(it), {
+        modelValue: V.value,
+        "onUpdate:modelValue": M[1] || (M[1] = (D) => V.value = D),
         class: "wx-banner-place__views",
         size: "sm",
-        options: O.value,
-        "aria-label": e(t)("banner.all")
+        options: K.value,
+        "aria-label": e(b)("banner.all")
       }, null, 8, ["modelValue", "options", "aria-label"]),
-      g.value && b.value.length === 0 ? (m(), D(e(Q), {
+      g.value && w.value.length === 0 ? (m(), E(e(qe), {
         key: 0,
         rows: 4
-      })) : b.value.length === 0 ? (m(), D(e(oe), {
+      })) : w.value.length === 0 ? (m(), E(e(at), {
         key: 1,
-        title: k.value ? e(t)("banner.empty-bin") : e(t)("banner.empty"),
-        description: k.value ? void 0 : e(t)("banner.empty-help")
-      }, null, 8, ["title", "description"])) : (m(), M(H, { key: 2 }, [
-        c(e(Je), {
-          modelValue: b.value,
-          "onUpdate:modelValue": V[2] || (V[2] = (_) => b.value = _),
-          class: ae(["wx-banner-place__list", { "is-loading": g.value }]),
+        title: W.value ? e(b)("banner.empty-bin") : e(b)("banner.empty"),
+        description: W.value ? void 0 : e(b)("banner.empty-help")
+      }, null, 8, ["title", "description"])) : (m(), B(ne, { key: 2 }, [
+        i(e(Ct), {
+          modelValue: w.value,
+          "onUpdate:modelValue": M[2] || (M[2] = (D) => w.value = D),
+          class: oe(["wx-banner-place__list", { "is-loading": g.value }]),
+          hoverable: "",
           plain: "",
           "item-key": "id",
-          handle: C.value ? "grip" : "row",
-          "item-label": (_) => _.title,
-          disabled: !C.value,
-          onMove: U
+          handle: J.value ? "grip" : "row",
+          "item-label": (D) => D.title,
+          disabled: !J.value,
+          onMove: X
         }, {
-          default: p(({ item: _ }) => [
-            (m(), D(Ie(k.value ? "div" : "router-link"), {
-              to: k.value ? void 0 : x(_),
-              class: ae(["wx-banner-row", { "is-off": !_.enabled && !k.value }])
+          default: d(({ item: D }) => [
+            (m(), E(St(W.value ? "div" : "router-link"), {
+              to: W.value ? void 0 : L(D),
+              class: oe(["wx-banner-row", { "is-off": !D.enabled && !W.value }])
             }, {
-              default: p(() => [
-                R("span", ia, [
-                  _.thumb ? (m(), M("img", {
+              default: d(() => [
+                P("span", Oa, [
+                  D.thumb ? (m(), B("img", {
                     key: 0,
-                    src: _.thumb,
+                    src: D.thumb,
                     alt: "",
                     loading: "lazy"
-                  }, null, 8, ca)) : (m(), D(e(re), {
+                  }, null, 8, Na)) : (m(), E(e(le), {
                     key: 1,
                     name: "image",
                     size: "sm",
-                    "aria-label": e(t)("banner.no-picture")
+                    "aria-label": e(b)("banner.no-picture")
                   }, null, 8, ["aria-label"]))
                 ]),
-                R("span", ua, [
-                  R("span", da, L(_.title), 1),
-                  _.video || !_.enabled && !k.value ? (m(), M("span", pa, [
-                    _.video ? (m(), D(e(ne), {
+                P("span", Ua, [
+                  P("span", Ta, N(D.title), 1),
+                  D.video || !D.enabled && !W.value ? (m(), B("span", Ia, [
+                    D.video ? (m(), E(e(et), {
                       key: 0,
                       size: "sm",
                       type: "info"
                     }, {
-                      default: p(() => [
-                        E(L(e(t)("banner.video")), 1)
+                      default: d(() => [
+                        F(N(e(b)("banner.video")), 1)
                       ]),
                       _: 1
-                    })) : A("", !0),
-                    !_.enabled && !k.value ? (m(), D(e(ne), {
+                    })) : H("", !0),
+                    !D.enabled && !W.value ? (m(), E(e(et), {
                       key: 1,
                       dot: "",
                       size: "sm"
                     }, {
-                      default: p(() => [
-                        E(L(e(t)("banner.disabled")), 1)
+                      default: d(() => [
+                        F(N(e(b)("banner.disabled")), 1)
                       ]),
                       _: 1
-                    })) : A("", !0)
-                  ])) : A("", !0)
+                    })) : H("", !0)
+                  ])) : H("", !0)
                 ])
               ]),
               _: 2
             }, 1032, ["to", "class"]))
           ]),
-          actions: p(({ item: _ }) => [
-            c(e(Be), {
-              actions: I(_),
-              label: _.title
+          actions: d(({ item: D }) => [
+            i(e(Pt), {
+              actions: q(D),
+              label: D.title
             }, null, 8, ["actions", "label"])
           ]),
           _: 1
         }, 8, ["modelValue", "class", "handle", "item-label", "disabled"]),
-        C.value ? (m(), D(e(je), {
+        J.value ? (m(), E(e(ta), {
           key: 0,
           class: "wx-banner-place__note",
           type: "info",
-          description: e(t)("banner.order")
-        }, null, 8, ["description"])) : A("", !0)
+          description: e(b)("banner.order")
+        }, null, 8, ["description"])) : H("", !0)
       ], 64))
     ]));
   }
-}), ba = /* @__PURE__ */ de(va, [["__scopeId", "data-v-23c95ae5"]]), fa = {
+}), Ea = /* @__PURE__ */ Ie(Da, [["__scopeId", "data-v-48d645bf"]]), Ma = {
   key: 2,
   class: "wx-banners__list"
-}, ma = ["onClick"], ya = { class: "wx-banners__name" }, ha = /* @__PURE__ */ X({
+}, Aa = ["onClick"], Ra = { class: "wx-banners__name" }, Fa = /* @__PURE__ */ Ve({
   __name: "BannersPage",
   props: {
     base: { default: "/banners" }
   },
-  setup(i) {
-    const s = i, u = J(), y = Z(u), n = ie(), v = ce();
-    ee();
-    const d = Y("webx-banners"), l = ue(), t = W([]), P = W(!0), b = W(!1), g = W(!0), S = $(() => u.can("banners.manage")), h = He(na), k = $(
-      () => u.state.manifest?.modules.find((r) => r.id === "banners")?.title ?? d("module.banners")
-    ), O = $(() => {
-      const r = n.query.place;
-      return typeof r == "string" && r !== "" ? r : null;
-    }), C = $(() => t.value.find((r) => r.key === O.value) ?? null);
-    async function B() {
-      P.value = !0;
+  setup(t) {
+    const c = t, o = ze(), f = Ue(o), s = st(), $ = ot();
+    Te();
+    const _ = Se("webx-banners"), h = rt(), b = A([]), v = A(!0), w = A(!1), g = A(!0), T = y(() => o.can("banners.manage")), V = aa(Ca), W = y(
+      () => o.state.manifest?.modules.find((k) => k.id === "banners")?.title ?? _("module.banners")
+    ), K = y(() => {
+      const k = s.query.place;
+      return typeof k == "string" && k !== "" ? k : null;
+    }), J = y(() => b.value.find((k) => k.key === K.value) ?? null);
+    async function U() {
+      v.value = !0;
       try {
-        t.value = await y.places();
-      } catch (r) {
-        T.danger(l(r));
+        b.value = await f.places();
+      } catch (k) {
+        Z.danger(h(k));
       } finally {
-        P.value = !1;
+        v.value = !1;
       }
     }
-    B(), j([t, C, g], () => {
-      !g.value || t.value.length === 0 || C.value !== null || v.replace({ query: { ...n.query, place: t.value[0].key } });
-    }), j(C, (r) => {
-      r !== null && g.value && (b.value = !0);
-    }), O.value !== null && (b.value = !0);
-    function w(r) {
-      const I = { ...n.query, place: r.key };
-      delete I.view, v.replace({ query: I }), b.value = !0;
-    }
-    async function x() {
-      const r = await h({ place: null });
-      r && (T.success(d("places.created")), await B(), w(r));
-    }
-    async function N(r) {
-      await h({ place: r }) && (T.success(d("places.renamed")), await B());
-    }
-    async function U(r) {
-      if (await G({
-        title: d("places.delete-title", { place: r.title }),
-        message: d("places.delete-text"),
-        confirmText: d("places.delete"),
-        cancelText: d("places.cancel"),
+    U(), $e([b, J, g], () => {
+      !g.value || b.value.length === 0 || J.value !== null || $.replace({ query: { ...s.query, place: b.value[0].key } });
+    }), $e(J, (k) => {
+      k !== null && g.value && (w.value = !0);
+    }), K.value !== null && (w.value = !0);
+    function C(k) {
+      const q = { ...s.query, place: k.key };
+      delete q.view, $.replace({ query: q }), w.value = !0;
+    }
+    async function L() {
+      const k = await V({ place: null });
+      k && (Z.success(_("places.created")), await U(), C(k));
+    }
+    async function R(k) {
+      await V({ place: k }) && (Z.success(_("places.renamed")), await U());
+    }
+    async function X(k) {
+      if (await Fe({
+        title: _("places.delete-title", { place: k.title }),
+        message: _("places.delete-text"),
+        confirmText: _("places.delete"),
+        cancelText: _("places.cancel"),
         tone: "danger"
       }))
         try {
-          if (await y.removePlace(r.key), T.success(d("places.deleted")), O.value === r.key) {
-            const f = { ...n.query };
-            delete f.place, delete f.view, v.replace({ query: f }), b.value = !1;
+          if (await f.removePlace(k.key), Z.success(_("places.deleted")), K.value === k.key) {
+            const z = { ...s.query };
+            delete z.place, delete z.view, $.replace({ query: z }), w.value = !1;
           }
-        } catch (f) {
-          T.danger(l(f));
+        } catch (z) {
+          Z.danger(h(z));
         } finally {
-          await B();
+          await U();
         }
     }
-    function K(r) {
-      return !S.value || r.declared ? [] : [
-        { key: "rename", icon: "edit", label: d("places.rename"), run: () => {
-          N(r);
+    function ee(k) {
+      return !T.value || k.declared ? [] : [
+        { key: "rename", icon: "edit", label: _("places.rename"), run: () => {
+          R(k);
         } },
         {
           key: "delete",
           icon: "trash",
           // Said in the line itself, since a switched-off line cannot carry a tooltip: an empty
           // place is the only kind that goes (decision 1).
-          label: r.count > 0 ? d("places.delete-empty-first") : d("places.delete"),
+          label: k.count > 0 ? _("places.delete-empty-first") : _("places.delete"),
           danger: !0,
-          disabled: r.count > 0,
+          disabled: k.count > 0,
           run: () => {
-            U(r);
+            X(k);
           }
         }
       ];
     }
-    const F = $(
-      () => S.value ? [{ key: "new-place", label: d("places.new"), icon: "plus", run: () => {
-        x();
+    const se = y(
+      () => T.value ? [{ key: "new-place", label: _("places.new"), icon: "plus", run: () => {
+        L();
       } }] : []
     );
-    return (r, I) => (m(), D(e(ea), {
-      title: k.value,
-      actions: F.value,
+    return (k, q) => (m(), E(e(da), {
+      title: W.value,
+      actions: se.value,
       card: !1
     }, {
-      default: p(() => [
-        c(e(te), {
+      default: d(() => [
+        i(e(Qe), {
           class: "wx-banners",
           padding: "none"
         }, {
-          default: p(() => [
-            c(e(Ge), {
-              open: b.value,
-              "onUpdate:open": I[0] || (I[0] = (f) => b.value = f),
+          default: d(() => [
+            i(e(la), {
+              open: w.value,
+              "onUpdate:open": q[0] || (q[0] = (z) => w.value = z),
               class: "wx-banners__panes",
               "list-width": 300,
               "detail-min": 440,
-              "detail-label": e(d)("places.places"),
-              onDetailInline: I[1] || (I[1] = (f) => g.value = f)
+              "detail-label": e(_)("places.places"),
+              onDetailInline: q[1] || (q[1] = (z) => g.value = z)
             }, {
-              list: p(() => [
-                P.value && t.value.length === 0 ? (m(), D(e(Q), {
+              list: d(() => [
+                v.value && b.value.length === 0 ? (m(), E(e(qe), {
                   key: 0,
                   class: "wx-banners__loading",
                   rows: 3
-                })) : t.value.length === 0 ? (m(), D(e(oe), {
+                })) : b.value.length === 0 ? (m(), E(e(at), {
                   key: 1,
-                  title: e(d)("places.empty"),
-                  description: e(d)("places.empty-help")
-                }, null, 8, ["title", "description"])) : (m(), M("ul", fa, [
-                  (m(!0), M(H, null, Oe(t.value, (f) => (m(), M("li", {
-                    key: f.key,
+                  title: e(_)("places.empty"),
+                  description: e(_)("places.empty-help")
+                }, null, 8, ["title", "description"])) : (m(), B("ul", Ma, [
+                  (m(!0), B(ne, null, ve(b.value, (z) => (m(), B("li", {
+                    key: z.key,
                     class: "wx-banners__row"
                   }, [
-                    R("button", {
+                    P("button", {
                       type: "button",
-                      class: ae(["wx-banners__open", { "is-current": f.key === O.value }]),
-                      onClick: (o) => w(f)
+                      class: oe(["wx-banners__open", { "is-current": z.key === K.value }]),
+                      onClick: (S) => C(z)
                     }, [
-                      R("span", ya, [
-                        c(e(we), {
+                      P("span", Ra, [
+                        i(e(re), {
                           truncate: "",
                           weight: "medium"
                         }, {
-                          default: p(() => [
-                            E(L(f.title), 1)
+                          default: d(() => [
+                            F(N(z.title), 1)
                           ]),
                           _: 2
                         }, 1024),
-                        f.declared ? (m(), D(e(re), {
+                        z.declared ? (m(), E(e(le), {
                           key: 0,
                           class: "wx-banners__lock",
                           name: "lock",
                           size: "sm",
-                          "aria-label": e(d)("places.declared")
-                        }, null, 8, ["aria-label"])) : A("", !0),
-                        c(e(Qe), {
+                          "aria-label": e(_)("places.declared")
+                        }, null, 8, ["aria-label"])) : H("", !0),
+                        i(e(na), {
                           class: "wx-banners__count",
                           type: "neutral",
-                          value: f.count,
-                          label: e(d)("places.count")
+                          value: z.count,
+                          label: e(_)("places.count")
                         }, null, 8, ["value", "label"])
                       ]),
-                      c(e(we), {
+                      i(e(re), {
                         size: "sm",
                         tone: "muted",
                         mono: "",
                         truncate: ""
                       }, {
-                        default: p(() => [
-                          E("banners('" + L(f.key) + "')", 1)
+                        default: d(() => [
+                          F("banners('" + N(z.key) + "')", 1)
                         ]),
                         _: 2
                       }, 1024)
-                    ], 10, ma),
-                    K(f).length > 0 ? (m(), D(e(Be), {
+                    ], 10, Aa),
+                    ee(z).length > 0 ? (m(), E(e(Pt), {
                       key: 0,
-                      actions: K(f),
-                      label: f.title
-                    }, null, 8, ["actions", "label"])) : A("", !0)
+                      actions: ee(z),
+                      label: z.title
+                    }, null, 8, ["actions", "label"])) : H("", !0)
                   ]))), 128))
                 ]))
               ]),
-              detail: p(({ inline: f, back: o }) => [
-                C.value ? (m(), D(ba, {
-                  key: C.value.key,
-                  place: C.value,
-                  base: s.base,
-                  inline: f,
-                  onBack: o,
-                  onChanged: B
-                }, null, 8, ["place", "base", "inline", "onBack"])) : A("", !0)
+              detail: d(({ inline: z, back: S }) => [
+                J.value ? (m(), E(Ea, {
+                  key: J.value.key,
+                  place: J.value,
+                  base: c.base,
+                  inline: z,
+                  onBack: S,
+                  onChanged: U
+                }, null, 8, ["place", "base", "inline", "onBack"])) : H("", !0)
               ]),
-              empty: p(() => [
-                c(e(oe), {
-                  title: e(d)("places.choose"),
-                  description: e(d)("places.choose-help")
+              empty: d(() => [
+                i(e(at), {
+                  title: e(_)("places.choose"),
+                  description: e(_)("places.choose-help")
                 }, null, 8, ["title", "description"])
               ]),
               _: 1
@@ -945,36 +1239,1249 @@ const ta = /* @__PURE__ */ X({
       _: 1
     }, 8, ["title", "actions"]));
   }
-}), wa = /* @__PURE__ */ de(ha, [["__scopeId", "data-v-615232f0"]]);
-function $a(i = {}) {
-  const s = i.path ?? "/banners";
+}), qa = /* @__PURE__ */ Ie(Fa, [["__scopeId", "data-v-615232f0"]]), Ka = { class: "wx-banner-layer-inspector" }, Ja = { class: "wx-banner-layer-inspector__head" }, ja = { class: "wx-banner-layer-inspector__fields" }, Ha = { class: "wx-banner-layer-inspector__group" }, Ga = { class: "wx-banner-layer-inspector__title" }, Za = { class: "wx-banner-layer-inspector__grid" }, Xa = ["aria-label"], Ya = ["aria-checked", "aria-label", "disabled", "onClick"], Qa = {
+  key: 5,
+  class: "wx-banner-layer-inspector__group"
+}, el = { class: "wx-banner-layer-inspector__grid" }, tl = { class: "wx-banner-layer-inspector__switches" }, al = { class: "wx-banner-layer-inspector__color" }, ll = ["title", "aria-label", "disabled", "onClick"], nl = { class: "wx-banner-layer-inspector__group" }, sl = { class: "wx-banner-layer-inspector__grid" }, ol = /* @__PURE__ */ Ve({
+  name: "WxBannerLayerInspector",
+  __name: "LayerInspector",
+  props: {
+    layer: {},
+    view: {},
+    tags: {},
+    variants: {},
+    palette: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update", "frame", "same-as-desktop", "delete"],
+  setup(t, { emit: c }) {
+    const o = t, f = c, s = Se("webx-banners"), $ = Je(), _ = y(
+      () => o.view === "mobile" ? o.layer.frames.mobile ?? o.layer.frames.desktop : o.layer.frames.desktop
+    ), h = y(() => o.view === "mobile" && o.layer.frames.mobile !== null);
+    function b(p) {
+      const a = lt(o.layer);
+      p(a), f("update", a);
+    }
+    function v(p, a) {
+      b((n) => {
+        n.style[p] = a;
+      });
+    }
+    const w = y(() => o.layer.type === "text" || o.layer.type === "button"), g = y({
+      get: () => o.layer.text ?? {},
+      set: (p) => b((a) => {
+        a.text = p;
+      })
+    }), T = y({
+      get: () => o.layer.name ?? "",
+      set: (p) => b((a) => {
+        a.name = p;
+      })
+    }), V = y(() => xa(g.value[$.active.value] ?? "")), W = y(() => V.value.map((p) => `{${p}}`).join(", ")), K = y(() => {
+      const p = g.value, a = $.active.value;
+      return (p[a] ?? "").trim() !== "" ? null : [...$.list.value.map((n) => n.code), ...Object.keys(p)].find(
+        (n) => (p[n] ?? "").trim() !== ""
+      ) ?? null;
+    });
+    function J(p) {
+      const a = $.active.value, n = g.value[a] ?? "";
+      g.value = { ...g.value, [a]: `${n}${n === "" ? "" : " "}{${p}}` };
+    }
+    const U = y({
+      get: () => o.layer.image ?? null,
+      set: (p) => b((a) => {
+        a.image = p;
+      })
+    }), C = y({
+      get: () => o.layer.link ?? null,
+      set: (p) => b((a) => {
+        a.link = p;
+      })
+    }), L = (p, a) => y({
+      get: () => p(),
+      set: (n) => a(n)
+    }), R = L(
+      () => o.layer.tag ?? "p",
+      (p) => b((a) => {
+        a.tag = p;
+      })
+    ), X = L(
+      () => o.layer.variant ?? o.variants[0]?.value ?? null,
+      (p) => b((a) => {
+        a.variant = p;
+      })
+    ), ee = L(
+      () => o.layer.style.font ?? "site",
+      (p) => v("font", p === "heading" || p === "body" ? p : null)
+    ), se = L(
+      () => o.layer.style.weight,
+      (p) => v("weight", Number(p))
+    ), k = y({
+      get: () => o.layer.style.align,
+      set: (p) => v("align", p)
+    }), q = L(
+      () => o.layer.motion.in ?? "none",
+      (p) => b((a) => {
+        a.motion.in = ht.includes(p) ? p : null;
+      })
+    ), z = L(
+      () => o.layer.motion.loop ?? "none",
+      (p) => b((a) => {
+        a.motion.loop = wt.includes(p) ? p : null;
+      })
+    ), S = y(() => {
+      switch (o.layer.type) {
+        case "image":
+          return ["x", "y", "w", "radius", "rotate"];
+        case "buttons":
+          return ["x", "y", "w", "size", "gap", "rotate"];
+        default:
+          return ["x", "y", "w", "size", "pad", "radius", "tracking", "rotate"];
+      }
+    }), M = {
+      x: 0.05,
+      y: 0.05,
+      w: 0.5,
+      size: 0.05,
+      pad: 0.05,
+      radius: 0.1,
+      tracking: 0.01,
+      rotate: 1,
+      gap: 0.1
+    };
+    function D(p, a) {
+      a === null || Number.isNaN(a) || f("frame", { [p]: a });
+    }
+    function we(p) {
+      f("frame", { origin: p });
+    }
+    const Ce = y(() => [
+      { value: "site", label: s("layers.font-site") },
+      { value: "heading", label: s("layers.font-heading") },
+      { value: "body", label: s("layers.font-body") }
+    ]), ge = [100, 200, 300, 400, 500, 600, 700, 800, 900].map((p) => ({
+      value: p,
+      label: String(p)
+    })), me = y(() => [
+      { value: "start", label: s("layers.align-start") },
+      { value: "center", label: s("layers.align-center") },
+      { value: "end", label: s("layers.align-end") }
+    ]), ie = y(() => [
+      { value: "none", label: s("layers.motion-none") },
+      ...ht.map((p) => ({ value: p, label: s(`layers.in-${p}`) }))
+    ]), de = y(() => [
+      { value: "none", label: s("layers.motion-none") },
+      ...wt.map((p) => ({ value: p, label: s(`layers.loop-${p}`) }))
+    ]);
+    function xe(p) {
+      const a = o.layer.style[p];
+      return a === null ? null : a.startsWith("token:") ? o.palette.find((n) => `token:${n.key}` === a)?.value ?? null : a;
+    }
+    function ce(p, a) {
+      const n = typeof a == "string" && /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(a) ? a.toLowerCase() : null;
+      v(p, n);
+    }
+    return (p, a) => (m(), B("div", Ka, [
+      P("div", Ja, [
+        i(e(Ke), {
+          modelValue: T.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (n) => T.value = n),
+          size: "sm",
+          placeholder: e(s)("layers.name"),
+          "aria-label": e(s)("layers.name"),
+          disabled: t.disabled
+        }, null, 8, ["modelValue", "placeholder", "aria-label", "disabled"]),
+        i(e(Q), {
+          size: "sm",
+          variant: "outline",
+          danger: "",
+          disabled: t.disabled,
+          onClick: a[1] || (a[1] = (n) => f("delete"))
+        }, {
+          icon: d(() => [
+            i(e(le), { name: "trash" })
+          ]),
+          default: d(() => [
+            F(" " + N(e(s)("layers.delete")), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])
+      ]),
+      w.value ? (m(), B(ne, { key: 0 }, [
+        i(e(G), {
+          label: t.layer.type === "button" ? e(s)("layers.label") : e(s)("layers.words"),
+          help: K.value ? e(s)("layers.falls-back", { code: K.value.toUpperCase() }) : e(s)("layers.words-help")
+        }, {
+          default: d(() => [
+            t.layer.type === "text" ? (m(), E(e(sa), {
+              key: 0,
+              modelValue: g.value,
+              "onUpdate:modelValue": a[2] || (a[2] = (n) => g.value = n),
+              localized: "",
+              rows: 2,
+              disabled: t.disabled
+            }, null, 8, ["modelValue", "disabled"])) : (m(), E(e(Ke), {
+              key: 1,
+              modelValue: g.value,
+              "onUpdate:modelValue": a[3] || (a[3] = (n) => g.value = n),
+              localized: "",
+              disabled: t.disabled
+            }, null, 8, ["modelValue", "disabled"]))
+          ]),
+          _: 1
+        }, 8, ["label", "help"]),
+        P("div", ja, [
+          i(e(Q), {
+            size: "sm",
+            variant: "text",
+            disabled: t.disabled,
+            onClick: a[4] || (a[4] = (n) => J("title"))
+          }, {
+            default: d(() => [...a[24] || (a[24] = [
+              F("+ {title}", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"]),
+          i(e(Q), {
+            size: "sm",
+            variant: "text",
+            disabled: t.disabled,
+            onClick: a[5] || (a[5] = (n) => J("text"))
+          }, {
+            default: d(() => [...a[25] || (a[25] = [
+              F("+ {text}", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        V.value.length > 0 ? (m(), E(e(re), {
+          key: 0,
+          size: "sm",
+          tone: "warning"
+        }, {
+          default: d(() => [
+            F(N(e(s)("layers.unknown-field", { fields: W.value })), 1)
+          ]),
+          _: 1
+        })) : H("", !0)
+      ], 64)) : H("", !0),
+      t.layer.type === "text" ? (m(), E(e(G), {
+        key: 1,
+        label: e(s)("layers.tag")
+      }, {
+        default: d(() => [
+          i(e(fe), {
+            modelValue: e(R),
+            "onUpdate:modelValue": a[6] || (a[6] = (n) => ye(R) ? R.value = n : null),
+            options: t.tags,
+            size: "sm",
+            disabled: t.disabled
+          }, null, 8, ["modelValue", "options", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["label"])) : H("", !0),
+      t.layer.type === "image" ? (m(), E(e(G), {
+        key: 2,
+        label: e(s)("layers.image")
+      }, {
+        default: d(() => [
+          i(e(ba), {
+            modelValue: U.value,
+            "onUpdate:modelValue": a[7] || (a[7] = (n) => U.value = n),
+            accept: "image",
+            aspect: null,
+            height: 120,
+            disabled: t.disabled
+          }, null, 8, ["modelValue", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["label"])) : H("", !0),
+      t.layer.type === "button" ? (m(), B(ne, { key: 3 }, [
+        i(e(G), {
+          label: e(s)("layers.link")
+        }, {
+          default: d(() => [
+            i(e(ca), {
+              modelValue: C.value,
+              "onUpdate:modelValue": a[8] || (a[8] = (n) => C.value = n),
+              "allow-none": !1,
+              disabled: t.disabled
+            }, null, 8, ["modelValue", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        i(e(G), {
+          label: e(s)("layers.variant")
+        }, {
+          default: d(() => [
+            i(e(fe), {
+              modelValue: e(X),
+              "onUpdate:modelValue": a[9] || (a[9] = (n) => ye(X) ? X.value = n : null),
+              options: t.variants,
+              size: "sm",
+              disabled: t.disabled
+            }, null, 8, ["modelValue", "options", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["label"])
+      ], 64)) : H("", !0),
+      t.layer.type === "buttons" ? (m(), E(e(re), {
+        key: 4,
+        size: "sm",
+        tone: "muted"
+      }, {
+        default: d(() => [
+          F(N(e(s)("layers.buttons-help")), 1)
+        ]),
+        _: 1
+      })) : H("", !0),
+      P("section", Ha, [
+        P("div", Ga, [
+          i(e(re), {
+            size: "sm",
+            strong: ""
+          }, {
+            default: d(() => [
+              F(N(t.view === "mobile" ? h.value ? e(s)("layers.geometry-mobile-own") : e(s)("layers.geometry-mobile-same") : e(s)("layers.geometry-desktop")), 1)
+            ]),
+            _: 1
+          }),
+          h.value ? (m(), E(e(Q), {
+            key: 0,
+            size: "sm",
+            variant: "text",
+            disabled: t.disabled,
+            onClick: a[10] || (a[10] = (n) => f("same-as-desktop"))
+          }, {
+            default: d(() => [
+              F(N(e(s)("layers.same-as-desktop")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : H("", !0)
+        ]),
+        i(e(re), {
+          size: "sm",
+          tone: "muted"
+        }, {
+          default: d(() => [
+            F(N(e(s)("layers.unit")), 1)
+          ]),
+          _: 1
+        }),
+        P("div", Za, [
+          (m(!0), B(ne, null, ve(S.value, (n) => (m(), E(e(G), {
+            key: n,
+            label: e(s)(`layers.${n}`)
+          }, {
+            default: d(() => [
+              i(e(Le), {
+                "model-value": _.value[n],
+                min: e(Ne)[n][0],
+                max: e(Ne)[n][1],
+                step: M[n],
+                precision: 2,
+                size: "sm",
+                disabled: t.disabled,
+                "onUpdate:modelValue": (I) => D(n, I ?? null)
+              }, null, 8, ["model-value", "min", "max", "step", "disabled", "onUpdate:modelValue"])
+            ]),
+            _: 2
+          }, 1032, ["label"]))), 128))
+        ]),
+        i(e(G), {
+          label: e(s)("layers.origin"),
+          help: e(s)("layers.origin-help")
+        }, {
+          default: d(() => [
+            P("div", {
+              class: "wx-banner-layer-inspector__origins",
+              role: "radiogroup",
+              "aria-label": e(s)("layers.origin")
+            }, [
+              (m(!0), B(ne, null, ve(e(ya), (n) => (m(), B("button", {
+                key: n,
+                type: "button",
+                role: "radio",
+                "aria-checked": _.value.origin === n,
+                "aria-label": n,
+                disabled: t.disabled,
+                class: oe([
+                  "wx-banner-layer-inspector__origin",
+                  { "is-active": _.value.origin === n }
+                ]),
+                onClick: (I) => we(n)
+              }, null, 10, Ya))), 128))
+            ], 8, Xa)
+          ]),
+          _: 1
+        }, 8, ["label", "help"]),
+        i(e(Me), {
+          "model-value": _.value.hidden,
+          label: e(s)("layers.hidden-here"),
+          disabled: t.disabled,
+          "onUpdate:modelValue": a[11] || (a[11] = (n) => f("frame", { hidden: n === !0 }))
+        }, null, 8, ["model-value", "label", "disabled"])
+      ]),
+      t.layer.type !== "image" ? (m(), B("section", Qa, [
+        i(e(re), {
+          size: "sm",
+          strong: ""
+        }, {
+          default: d(() => [
+            F(N(e(s)("layers.look")), 1)
+          ]),
+          _: 1
+        }),
+        P("div", el, [
+          i(e(G), {
+            label: e(s)("layers.font")
+          }, {
+            default: d(() => [
+              i(e(fe), {
+                modelValue: e(ee),
+                "onUpdate:modelValue": a[12] || (a[12] = (n) => ye(ee) ? ee.value = n : null),
+                options: Ce.value,
+                size: "sm",
+                disabled: t.disabled
+              }, null, 8, ["modelValue", "options", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.weight")
+          }, {
+            default: d(() => [
+              i(e(fe), {
+                modelValue: e(se),
+                "onUpdate:modelValue": a[13] || (a[13] = (n) => ye(se) ? se.value = n : null),
+                options: e(ge),
+                size: "sm",
+                disabled: t.disabled
+              }, null, 8, ["modelValue", "options", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.line-height")
+          }, {
+            default: d(() => [
+              i(e(Le), {
+                "model-value": t.layer.style.line_height,
+                min: 0.8,
+                max: 3,
+                step: 0.05,
+                precision: 2,
+                size: "sm",
+                disabled: t.disabled,
+                "onUpdate:modelValue": a[14] || (a[14] = (n) => n != null && v("line_height", n))
+              }, null, 8, ["model-value", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.opacity")
+          }, {
+            default: d(() => [
+              i(e(Le), {
+                "model-value": t.layer.style.opacity,
+                min: 0,
+                max: 1,
+                step: 0.05,
+                precision: 2,
+                size: "sm",
+                disabled: t.disabled,
+                "onUpdate:modelValue": a[15] || (a[15] = (n) => n != null && v("opacity", n))
+              }, null, 8, ["model-value", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"])
+        ]),
+        i(e(G), {
+          label: e(s)("layers.align")
+        }, {
+          default: d(() => [
+            i(e(it), {
+              modelValue: k.value,
+              "onUpdate:modelValue": a[16] || (a[16] = (n) => k.value = n),
+              options: me.value,
+              size: "sm",
+              disabled: t.disabled
+            }, null, 8, ["modelValue", "options", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        P("div", tl, [
+          i(e(Me), {
+            "model-value": t.layer.style.italic,
+            label: e(s)("layers.italic"),
+            disabled: t.disabled,
+            "onUpdate:modelValue": a[17] || (a[17] = (n) => v("italic", n === !0))
+          }, null, 8, ["model-value", "label", "disabled"]),
+          i(e(Me), {
+            "model-value": t.layer.style.uppercase,
+            label: e(s)("layers.uppercase"),
+            disabled: t.disabled,
+            "onUpdate:modelValue": a[18] || (a[18] = (n) => v("uppercase", n === !0))
+          }, null, 8, ["model-value", "label", "disabled"]),
+          i(e(Me), {
+            "model-value": t.layer.style.shadow,
+            label: e(s)("layers.shadow"),
+            disabled: t.disabled,
+            "onUpdate:modelValue": a[19] || (a[19] = (n) => v("shadow", n === !0))
+          }, null, 8, ["model-value", "label", "disabled"])
+        ]),
+        (m(), B(ne, null, ve(["color", "background"], (n) => i(e(G), {
+          key: n,
+          label: e(s)(`layers.${n}`)
+        }, {
+          default: d(() => [
+            P("div", al, [
+              (m(!0), B(ne, null, ve(t.palette, (I) => (m(), B("button", {
+                key: I.key,
+                type: "button",
+                title: I.key,
+                "aria-label": I.key,
+                disabled: t.disabled,
+                class: oe([
+                  "wx-banner-layer-inspector__swatch",
+                  { "is-active": t.layer.style[n] === `token:${I.key}` }
+                ]),
+                style: Oe({ background: I.value }),
+                onClick: (ue) => v(n, `token:${I.key}`)
+              }, null, 14, ll))), 128)),
+              i(e(oa), {
+                "model-value": xe(n),
+                clearable: "",
+                size: "sm",
+                disabled: t.disabled,
+                "onUpdate:modelValue": (I) => ce(n, I)
+              }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
+            ])
+          ]),
+          _: 2
+        }, 1032, ["label"])), 64))
+      ])) : H("", !0),
+      P("section", nl, [
+        i(e(re), {
+          size: "sm",
+          strong: ""
+        }, {
+          default: d(() => [
+            F(N(e(s)("layers.motion")), 1)
+          ]),
+          _: 1
+        }),
+        P("div", sl, [
+          i(e(G), {
+            label: e(s)("layers.entrance")
+          }, {
+            default: d(() => [
+              i(e(fe), {
+                modelValue: e(q),
+                "onUpdate:modelValue": a[20] || (a[20] = (n) => ye(q) ? q.value = n : null),
+                options: ie.value,
+                size: "sm",
+                disabled: t.disabled
+              }, null, 8, ["modelValue", "options", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.loop")
+          }, {
+            default: d(() => [
+              i(e(fe), {
+                modelValue: e(z),
+                "onUpdate:modelValue": a[21] || (a[21] = (n) => ye(z) ? z.value = n : null),
+                options: de.value,
+                size: "sm",
+                disabled: t.disabled
+              }, null, 8, ["modelValue", "options", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.delay")
+          }, {
+            default: d(() => [
+              i(e(Le), {
+                "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] = (n) => n != null && b((I) => I.motion.delay = n))
+              }, null, 8, ["model-value", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"]),
+          i(e(G), {
+            label: e(s)("layers.duration")
+          }, {
+            default: d(() => [
+              i(e(Le), {
+                "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] = (n) => n != null && b((I) => I.motion.duration = n))
+              }, null, 8, ["model-value", "disabled"])
+            ]),
+            _: 1
+          }, 8, ["label"])
+        ])
+      ])
+    ]));
+  }
+}), il = /* @__PURE__ */ Ie(ol, [["__scopeId", "data-v-32ff51cd"]]), rl = { class: "wx-banner-layers__bar" }, ul = { class: "wx-banner-layers__tools" }, dl = { class: "wx-banner-layers__body" }, cl = { class: "wx-banner-layers__main" }, bl = ["aria-label"], vl = { class: "webx-banner__picture" }, ml = ["src"], pl = {
+  key: 1,
+  class: "wx-banner-layers__empty"
+}, yl = {
+  key: 0,
+  class: "webx-banner__inner wx-banner-layers__words"
+}, fl = ["src"], hl = {
+  key: 2,
+  class: "webx-banner__inner webx-banner__buttons"
+}, wl = {
+  key: 3,
+  class: "webx-banner__inner webx-banner__buttons"
+}, gl = {
+  key: 0,
+  class: "webx-banner__button"
+}, xl = ["onPointerdown"], kl = ["onPointerdown"], _l = ["onClick"], $l = { class: "wx-banner-layers__name" }, Vl = 3, zl = 6, Sl = /* @__PURE__ */ Ve({
+  name: "WxBannerLayers",
+  __name: "LayersField",
+  props: {
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: c }) {
+    const o = t, f = c, s = ze(), $ = pa(), _ = Je(), h = va(s), b = Ue(s);
+    Te();
+    const v = Se("webx-banners"), w = y(() => o.modelValue ?? []), g = y(() => $?.place.value?.layers ?? null), T = A("desktop"), V = A(null), W = y(() => w.value.find((l) => l.id === V.value) ?? null), K = y(() => {
+      const l = _.active.value;
+      return _.list.value.some((r) => r.code === l) ? l : _.list.value[0]?.code ?? "en";
+    }), J = y(() => _.list.value.map((l) => l.code)), U = A([]), C = A([]);
+    function L() {
+      U.value = [...U.value.slice(-99), JSON.stringify(w.value)], C.value = [];
+    }
+    function R(l, r = !0) {
+      r && L(), f("update:modelValue", l);
+    }
+    function X() {
+      const l = U.value.at(-1);
+      l !== void 0 && (C.value = [...C.value, JSON.stringify(w.value)], U.value = U.value.slice(0, -1), f("update:modelValue", JSON.parse(l)));
+    }
+    function ee() {
+      const l = C.value.at(-1);
+      l !== void 0 && (U.value = [...U.value, JSON.stringify(w.value)], C.value = C.value.slice(0, -1), f("update:modelValue", JSON.parse(l)));
+    }
+    function se(l, r, u = !0) {
+      R(
+        w.value.map((x) => x.id === l ? r(lt(x)) : x),
+        u
+      );
+    }
+    function k(l, r = T.value) {
+      return r === "mobile" ? l.frames.mobile ?? l.frames.desktop : l.frames.desktop;
+    }
+    function q(l, r, u = !0) {
+      se(
+        l,
+        (x) => {
+          const O = Va({ ...k(x), ...r });
+          return T.value === "mobile" ? x.frames.mobile = O : x.frames.desktop = O, x;
+        },
+        u
+      );
+    }
+    let z = { id: "", at: 0 };
+    function S(l) {
+      const r = Date.now(), u = z.id === l.id && r - z.at < 800;
+      z = { id: l.id, at: r }, se(l.id, () => l, !u);
+    }
+    function M(l) {
+      const r = gt(
+        l,
+        w.value.map((u) => u.id),
+        K.value
+      );
+      R([r, ...w.value]), V.value = r.id;
+    }
+    function D(l) {
+      R(w.value.filter((r) => r.id !== l)), V.value === l && (V.value = null);
+    }
+    function we(l) {
+      const r = w.value.findIndex((te) => te.id === l), u = w.value[r];
+      if (!u || u.type === "buttons") return;
+      const x = lt(u);
+      x.id = gt(
+        "text",
+        w.value.map((te) => te.id),
+        K.value
+      ).id, x.frames.desktop = {
+        ...x.frames.desktop,
+        x: x.frames.desktop.x + 2,
+        y: x.frames.desktop.y + 2
+      };
+      const O = [...w.value];
+      O.splice(r, 0, x), R(O), V.value = x.id;
+    }
+    function Ce(l) {
+      q(l.id, { hidden: !k(l).hidden });
+    }
+    const ge = y(() => w.value.some((l) => l.type === "buttons")), me = y({
+      get: () => w.value,
+      set: (l) => R(l)
+    }), ie = Ht({});
+    function de(l) {
+      const r = l?.path;
+      return typeof r == "string" && r !== "" ? r : null;
+    }
+    async function xe(l) {
+      if (!(l === null || l in ie)) {
+        ie[l] = null;
+        try {
+          const r = await h.fileByPath(l);
+          ie[l] = r ? { url: r.url, ratio: r.width && r.height ? r.width / r.height : null } : null;
+        } catch {
+          ie[l] = null;
+        }
+      }
+    }
+    const ce = y(() => de($?.values.value.image)), p = y(() => de($?.values.value.image_mobile));
+    $e(
+      () => [ce.value, p.value, ...w.value.map((l) => de(l.image))],
+      (l) => l.forEach((r) => {
+        xe(r);
+      }),
+      { immediate: !0 }
+    );
+    const a = y(
+      () => T.value === "mobile" ? kt(g.value?.ratio_mobile, 0.8) : kt(g.value?.ratio, 16 / 6)
+    ), n = y(() => {
+      const l = p.value === null ? null : ie[p.value] ?? null, r = ce.value === null ? null : ie[ce.value] ?? null;
+      return T.value === "mobile" ? l ?? r : r;
+    }), I = y(() => n.value?.ratio ?? a.value), ue = y(() => $a(I.value, a.value)), De = y(() => {
+      const l = String(I.value);
+      return { "--ratio": l, "--ratio-mobile": l, "--img": l, "--img-m": l };
+    }), je = y(() => {
+      const l = (r) => ($?.values.value[r]?.[K.value] ?? "").trim();
+      return { title: l("title"), text: l("text") };
+    });
+    function ut(l) {
+      return ga(l.text, K.value, J.value, je.value);
+    }
+    const dt = y(
+      () => ($?.values.value.buttons ?? []).map((l) => ({
+        label: (l.label?.[K.value] ?? "").trim(),
+        variant: l.variant ?? g.value?.variants[0]?.value ?? "primary"
+      })).filter((l) => l.label !== "")
+    );
+    function Nt(l) {
+      return l.type === "text" && /^(p|span|h[1-6])$/.test(l.tag ?? "") ? l.tag : "div";
+    }
+    function Ut(l) {
+      if (l.name) return l.name;
+      const r = l.text?.[K.value] ?? Object.values(l.text ?? {})[0] ?? "";
+      return r.trim() === "{title}" ? v("layers.title-layer") : r.trim() === "{text}" ? v("layers.text-layer") : l.type === "buttons" ? v("layers.buttons-layer") : l.type === "image" ? v("layers.image") : r.trim() || v(`layers.${l.type}`);
+    }
+    const Tt = {
+      text: "file-text",
+      image: "image",
+      button: "link",
+      buttons: "grid"
+    };
+    function ct(l) {
+      const r = k(l), u = 100 / I.value, x = ue.value, O = x.left, te = x.left + x.width, Y = x.top / 100 * u, ae = (x.top + x.height) / 100 * u, j = r.x + Ze(r.origin)[0] / 100 * r.w;
+      return j > te || j + r.w < O || r.y > ae || r.y < Y - 50;
+    }
+    const He = A(null), bt = A(null), Be = A([]);
+    function It(l, r) {
+      const u = 100 / I.value, x = ue.value, O = l === "x" ? [0, 50, 100, x.left, x.left + x.width] : [0, u / 2, u, x.top / 100 * u, (x.top + x.height) / 100 * u];
+      for (const te of w.value) {
+        if (te.id === r) continue;
+        const Y = k(te);
+        l === "x" ? O.push(Y.x, Y.x + Y.w) : O.push(Y.y);
+      }
+      return O;
+    }
+    function vt(l, r, u, x, O, te) {
+      if (te) return r;
+      const Y = [0, u / 2, u];
+      let ae = null;
+      for (const j of It(l, O))
+        for (const be of Y) {
+          const ke = j - (r + be);
+          Math.abs(ke) * x <= zl && (ae === null || Math.abs(ke) < Math.abs(ae.delta)) && (ae = { delta: ke, at: j });
+        }
+      return ae === null ? r : (Be.value = [...Be.value.filter((j) => j.axis !== l), { axis: l, at: ae.at }], r + ae.delta);
+    }
+    function mt(l) {
+      V.value = l.id, bt.value?.focus({ preventScroll: !0 });
+    }
+    function Ge(l, r, u) {
+      if (mt(r), o.disabled || l.button !== 0 || !He.value) return;
+      l.preventDefault();
+      const O = He.value.getBoundingClientRect().width / 100, Y = l.target.closest(".webx-banner__layer")?.getBoundingClientRect(), ae = Y ? Y.height / O : 0, j = { ...k(r) }, be = { x: l.clientX, y: l.clientY };
+      let ke = !1;
+      const yt = (_e) => {
+        const Xe = (_e.clientX - be.x) / O, At = (_e.clientY - be.y) / O;
+        if (!ke) {
+          if (Math.hypot(_e.clientX - be.x, _e.clientY - be.y) < Vl) return;
+          ke = !0, L();
+        }
+        if (Be.value = [], u === "move") {
+          const pe = {
+            x: Ze(j.origin)[0] / 100 * j.w,
+            y: Ze(j.origin)[1] / 100 * ae
+          }, Rt = vt("x", j.x + Xe + pe.x, j.w, O, r.id, _e.altKey), Ft = vt("y", j.y + At + pe.y, ae, O, r.id, _e.altKey);
+          q(r.id, { x: Rt - pe.x, y: Ft - pe.y }, !1);
+        } else if (u === "width")
+          q(r.id, { w: Math.max(1, j.w + Xe) }, !1);
+        else {
+          const pe = Math.max(0.05, (j.w + Xe) / j.w);
+          q(r.id, { w: j.w * pe, size: j.size * pe }, !1);
+        }
+      }, Ee = () => {
+        window.removeEventListener("pointermove", yt), window.removeEventListener("pointerup", Ee), window.removeEventListener("pointercancel", Ee), Be.value = [];
+      };
+      window.addEventListener("pointermove", yt), window.addEventListener("pointerup", Ee), window.addEventListener("pointercancel", Ee);
+    }
+    function Ze(l) {
+      const r = l.endsWith("r") ? -100 : l === "t" || l === "c" || l === "b" ? -50 : 0, u = l.startsWith("b") ? -100 : l === "l" || l === "c" || l === "r" ? -50 : 0;
+      return [r, u];
+    }
+    function Dt(l) {
+      l.target.closest(".webx-banner__layer") || (V.value = null);
+    }
+    function Et(l) {
+      const r = l.ctrlKey || l.metaKey, u = l.key.toLowerCase();
+      if (r && u === "z") {
+        l.preventDefault(), l.shiftKey ? ee() : X();
+        return;
+      }
+      if (r && u === "y") {
+        l.preventDefault(), ee();
+        return;
+      }
+      const x = W.value;
+      if (!x || o.disabled) return;
+      if (r && u === "d") {
+        l.preventDefault(), we(x.id);
+        return;
+      }
+      if (u === "delete" || u === "backspace") {
+        l.preventDefault(), D(x.id);
+        return;
+      }
+      if (u === "escape") {
+        V.value = null;
+        return;
+      }
+      const O = l.shiftKey ? 0.5 : 0.05, Y = {
+        arrowleft: [-O, 0],
+        arrowright: [O, 0],
+        arrowup: [0, -O],
+        arrowdown: [0, O]
+      }[u];
+      if (!Y) return;
+      l.preventDefault();
+      const ae = k(x), j = Date.now(), be = z.id === `arrows:${x.id}` && j - z.at < 800;
+      z = { id: `arrows:${x.id}`, at: j }, q(x.id, { x: ae.x + Y[0], y: ae.y + Y[1] }, !be);
+    }
+    const Pe = A(null);
+    let We = null;
+    nt(async () => {
+      try {
+        Pe.value = await b.theme();
+      } catch {
+        Pe.value = null;
+      }
+      const l = `${Pe.value?.tokens_css ?? ""}
+${Pe.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));
+    }), Vt(() => {
+      We?.remove();
+    });
+    const Mt = y(() => [
+      { value: "desktop", label: v("layers.desktop"), icon: "monitor" },
+      { value: "mobile", label: v("layers.mobile"), icon: "smartphone" }
+    ]), pt = y({
+      get: () => T.value,
+      set: (l) => {
+        T.value = l === "mobile" ? "mobile" : "desktop";
+      }
+    });
+    return (l, r) => (m(), B("div", {
+      class: oe(["wx-banner-layers", { "is-disabled": t.disabled }])
+    }, [
+      P("div", rl, [
+        i(e(it), {
+          modelValue: pt.value,
+          "onUpdate:modelValue": r[0] || (r[0] = (u) => pt.value = u),
+          options: Mt.value,
+          size: "sm",
+          "aria-label": e(v)("layers.layout")
+        }, null, 8, ["modelValue", "options", "aria-label"]),
+        P("div", ul, [
+          i(e(tt), {
+            content: e(v)("layers.undo")
+          }, {
+            default: d(() => [
+              i(e(Q), {
+                size: "sm",
+                variant: "text",
+                disabled: t.disabled || U.value.length === 0,
+                "aria-label": e(v)("layers.undo"),
+                onClick: X
+              }, {
+                icon: d(() => [
+                  i(e(le), { name: "rotate-left" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "aria-label"])
+            ]),
+            _: 1
+          }, 8, ["content"]),
+          i(e(tt), {
+            content: e(v)("layers.redo")
+          }, {
+            default: d(() => [
+              i(e(Q), {
+                size: "sm",
+                variant: "text",
+                disabled: t.disabled || C.value.length === 0,
+                "aria-label": e(v)("layers.redo"),
+                onClick: ee
+              }, {
+                icon: d(() => [
+                  i(e(le), { name: "rotate-right" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "aria-label"])
+            ]),
+            _: 1
+          }, 8, ["content"]),
+          i(e(Q), {
+            size: "sm",
+            variant: "outline",
+            disabled: t.disabled,
+            onClick: r[1] || (r[1] = (u) => M("text"))
+          }, {
+            icon: d(() => [
+              i(e(le), { name: "plus" })
+            ]),
+            default: d(() => [
+              F(" " + N(e(v)("layers.text")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          i(e(Q), {
+            size: "sm",
+            variant: "outline",
+            disabled: t.disabled,
+            onClick: r[2] || (r[2] = (u) => M("image"))
+          }, {
+            icon: d(() => [
+              i(e(le), { name: "plus" })
+            ]),
+            default: d(() => [
+              F(" " + N(e(v)("layers.image")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          i(e(Q), {
+            size: "sm",
+            variant: "outline",
+            disabled: t.disabled,
+            onClick: r[3] || (r[3] = (u) => M("button"))
+          }, {
+            icon: d(() => [
+              i(e(le), { name: "plus" })
+            ]),
+            default: d(() => [
+              F(" " + N(e(v)("layers.button")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          ge.value ? H("", !0) : (m(), E(e(Q), {
+            key: 0,
+            size: "sm",
+            variant: "outline",
+            disabled: t.disabled,
+            onClick: r[4] || (r[4] = (u) => M("buttons"))
+          }, {
+            icon: d(() => [
+              i(e(le), { name: "plus" })
+            ]),
+            default: d(() => [
+              F(" " + N(e(v)("layers.buttons-layer")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]))
+        ])
+      ]),
+      g.value ? H("", !0) : (m(), E(e(re), {
+        key: 0,
+        size: "sm",
+        tone: "muted"
+      }, {
+        default: d(() => [
+          F(N(e(v)("layers.not-here")), 1)
+        ]),
+        _: 1
+      })),
+      P("div", dl, [
+        P("div", cl, [
+          P("div", {
+            ref_key: "canvas",
+            ref: bt,
+            class: oe(["wx-banner-layers__canvas", { "is-overflow": g.value?.overflow }]),
+            tabindex: "0",
+            "aria-label": e(v)("layers.canvas"),
+            onPointerdown: Dt,
+            onKeydown: Et
+          }, [
+            P("div", {
+              class: oe(["webx-banner wx-banner-layers__frame", { "is-mobile": T.value === "mobile" }]),
+              style: Oe(De.value)
+            }, [
+              P("div", vl, [
+                n.value ? (m(), B("img", {
+                  key: 0,
+                  class: "webx-banner__image",
+                  src: n.value.url,
+                  alt: ""
+                }, null, 8, ml)) : (m(), B("div", pl, N(e(v)("layers.no-picture")), 1))
+              ]),
+              P("div", {
+                ref_key: "stage",
+                ref: He,
+                class: "webx-banner__stage"
+              }, [
+                (m(!0), B(ne, null, ve(w.value, (u, x) => (m(), E(St(Nt(u)), {
+                  key: u.id,
+                  class: oe([
+                    ...e(_a)(u),
+                    { "is-selected": u.id === V.value, "is-outside": ct(u) }
+                  ]),
+                  style: Oe(e(ka)(u, w.value.length - x)),
+                  onPointerdown: Ye((O) => Ge(O, u, "move"), ["stop"])
+                }, {
+                  default: d(() => [
+                    u.type === "text" ? (m(), B("span", yl, N(ut(u) || "…"), 1)) : u.type === "image" ? (m(), B("img", {
+                      key: 1,
+                      class: "webx-banner__inner",
+                      src: ie[de(u.image) ?? ""]?.url ?? "",
+                      alt: "",
+                      draggable: "false"
+                    }, null, 8, fl)) : u.type === "button" ? (m(), B("span", hl, [
+                      P("span", {
+                        class: oe([
+                          "webx-banner__button",
+                          `webx-banner__button--${u.variant ?? g.value?.variants[0]?.value ?? "primary"}`
+                        ])
+                      }, N(ut(u) || "…"), 3)
+                    ])) : (m(), B("span", wl, [
+                      (m(!0), B(ne, null, ve(dt.value, (O, te) => (m(), B("span", {
+                        key: te,
+                        class: oe(["webx-banner__button", `webx-banner__button--${O.variant}`])
+                      }, N(O.label), 3))), 128)),
+                      dt.value.length === 0 ? (m(), B("span", gl, N(e(v)("layers.buttons-layer")), 1)) : H("", !0)
+                    ])),
+                    u.id === V.value && !t.disabled ? (m(), B(ne, { key: 4 }, [
+                      P("span", {
+                        class: "wx-banner-layers__handle wx-banner-layers__handle--width",
+                        onPointerdown: Ye((O) => Ge(O, u, "width"), ["stop"])
+                      }, null, 40, xl),
+                      P("span", {
+                        class: "wx-banner-layers__handle wx-banner-layers__handle--scale",
+                        onPointerdown: Ye((O) => Ge(O, u, "scale"), ["stop"])
+                      }, null, 40, kl)
+                    ], 64)) : H("", !0)
+                  ]),
+                  _: 2
+                }, 1064, ["class", "style", "onPointerdown"]))), 128))
+              ], 512),
+              P("div", {
+                class: "wx-banner-layers__crop",
+                style: Oe({
+                  left: `${ue.value.left}%`,
+                  top: `${ue.value.top}%`,
+                  width: `${ue.value.width}%`,
+                  height: `${ue.value.height}%`
+                })
+              }, null, 4),
+              (m(!0), B(ne, null, ve(Be.value, (u) => (m(), B("div", {
+                key: u.axis,
+                class: oe(["wx-banner-layers__guide", `wx-banner-layers__guide--${u.axis}`]),
+                style: Oe(
+                  u.axis === "x" ? { left: `${u.at}%` } : { top: `calc(${u.at} * 1cqw)` }
+                )
+              }, null, 6))), 128))
+            ], 6)
+          ], 42, bl),
+          i(e(re), {
+            size: "sm",
+            tone: "muted"
+          }, {
+            default: d(() => [
+              F(N(e(v)("layers.hint")), 1)
+            ]),
+            _: 1
+          }),
+          i(e(Ct), {
+            modelValue: me.value,
+            "onUpdate:modelValue": r[5] || (r[5] = (u) => me.value = u),
+            class: "wx-banner-layers__list",
+            "item-key": "id",
+            size: "sm",
+            disabled: t.disabled,
+            "empty-text": e(v)("layers.empty"),
+            "aria-label": e(v)("layers.list")
+          }, {
+            default: d(({ item: u }) => [
+              P("button", {
+                type: "button",
+                class: oe(["wx-banner-layers__row", { "is-selected": u.id === V.value }]),
+                onClick: (x) => mt(u)
+              }, [
+                i(e(le), {
+                  name: Tt[u.type]
+                }, null, 8, ["name"]),
+                P("span", $l, N(Ut(u)), 1),
+                ct(u) ? (m(), E(e(le), {
+                  key: 0,
+                  name: "warning",
+                  class: "wx-banner-layers__warn",
+                  "aria-label": e(v)("layers.outside")
+                }, null, 8, ["aria-label"])) : H("", !0)
+              ], 10, _l)
+            ]),
+            actions: d(({ item: u }) => [
+              i(e(Q), {
+                size: "sm",
+                variant: "text",
+                disabled: t.disabled,
+                "aria-label": k(u).hidden ? e(v)("layers.show") : e(v)("layers.hide"),
+                onClick: (x) => Ce(u)
+              }, {
+                icon: d(() => [
+                  i(e(le), {
+                    name: k(u).hidden ? "eye-off" : "eye"
+                  }, null, 8, ["name"])
+                ]),
+                _: 2
+              }, 1032, ["disabled", "aria-label", "onClick"]),
+              i(e(Q), {
+                size: "sm",
+                variant: "text",
+                disabled: t.disabled,
+                "aria-label": e(v)("layers.delete"),
+                onClick: (x) => D(u.id)
+              }, {
+                icon: d(() => [
+                  i(e(le), { name: "trash" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "aria-label", "onClick"])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "disabled", "empty-text", "aria-label"])
+        ]),
+        W.value ? (m(), E(il, {
+          key: 0,
+          class: "wx-banner-layers__inspector",
+          layer: W.value,
+          view: T.value,
+          tags: g.value?.tags ?? [],
+          variants: g.value?.variants ?? [],
+          palette: Pe.value?.palette ?? [],
+          disabled: t.disabled,
+          onUpdate: S,
+          onFrame: r[6] || (r[6] = (u) => q(W.value.id, u)),
+          onSameAsDesktop: r[7] || (r[7] = (u) => se(W.value.id, (x) => ({
+            ...x,
+            frames: { ...x.frames, mobile: null }
+          }))),
+          onDelete: r[8] || (r[8] = (u) => D(W.value.id))
+        }, null, 8, ["layer", "view", "tags", "variants", "palette", "disabled"])) : (m(), E(e(re), {
+          key: 1,
+          class: "wx-banner-layers__inspector",
+          size: "sm",
+          tone: "muted"
+        }, {
+          default: d(() => [
+            F(N(e(v)("layers.choose")), 1)
+          ]),
+          _: 1
+        }))
+      ])
+    ], 2));
+  }
+}), Cl = /* @__PURE__ */ Ie(Sl, [["__scopeId", "data-v-540c304c"]]);
+function Nl(t = {}) {
+  const c = t.path ?? "/banners";
   return {
     id: "banners",
-    path: s,
+    path: c,
     routes: [
       // The open place is in the address (`?place=`), so a link to it is a link to its banners.
-      { path: s, name: "webx.banners", component: wa, props: { base: s } },
+      { path: c, name: "webx.banners", component: qa, props: { base: c } },
       // A banner not written yet: the place it goes to rides in the query (`?place=hero`).
       {
-        path: `${s}/new`,
+        path: `${c}/new`,
         name: "webx.banners.new",
-        component: ke,
-        props: { base: s }
+        component: $t,
+        props: { base: c }
       },
       {
-        path: `${s}/:id(\\d+)`,
+        path: `${c}/:id(\\d+)`,
         name: "webx.banners.edit",
-        component: ke,
-        props: { base: s }
+        component: $t,
+        props: { base: c }
       }
-    ]
+    ],
+    /*
+     * The one node of `banners.form` only this module can draw: the layers, on the banner's
+     * picture. A field like any other — its value is the list of layers.
+     */
+    types: {
+      "wx-banner-layers": { component: Cl, kind: "field", wide: !0 }
+    }
   };
 }
 export {
-  ke as WxBannerEditorPage,
-  wa as WxBannersPage,
-  $a as banners,
-  aa as bannersMessages,
-  Z as createBannersApi
+  ht as ENTRANCES,
+  ha as FIELDS,
+  Ne as FRAME_LIMITS,
+  wt as LOOPS,
+  ya as ORIGINS,
+  $t as WxBannerEditorPage,
+  Cl as WxBannerLayers,
+  qa as WxBannersPage,
+  Nl as banners,
+  za as bannersMessages,
+  Va as clampFrame,
+  lt as clone,
+  Ue as createBannersApi,
+  $a as cropBox,
+  xt as cssColor,
+  wa as defaultLayers,
+  he as frame,
+  _a as layerClasses,
+  Lt as layerId,
+  ka as layerVars,
+  ga as layerWords,
+  Re as motion,
+  gt as newLayer,
+  kt as ratioOf,
+  Ae as style,
+  xa as unknownFields
 };
 //# sourceMappingURL=index.js.map