@webx-ui/module-banners 0.2.3 → 0.3.0

package/dist/index.js

@@ -1,2487 +1,31 @@
-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: () => 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: (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: (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;
-}
-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"
-  },
-  places: {
-    hero: "Home page slider",
-    promo: "Promo strip",
-    notice: "Announcement bar",
-    list: "Places",
-    new: "New place",
-    title: "Name",
-    key: "Key",
-    "key-help": "What the site’s template asks for: lowercase Latin letters, digits and dashes, starting with a letter. It cannot be changed later.",
-    declared: "Declared in the configuration",
-    "in-template": "In a template: banners(':key')",
-    count: "Banners",
-    rename: "Rename",
-    delete: "Delete",
-    "delete-confirm": "Delete the place “:title”?",
-    "delete-not-empty": "Only an empty place can be deleted — the bin counts too.",
-    empty: "No places yet",
-    choose: "Choose a place on the left",
-    create: "Create",
-    save: "Save",
-    cancel: "Cancel",
-    created: "Place created",
-    renamed: "Place renamed",
-    deleted: "Place deleted",
-    places: "Places",
-    "new-title": "New place",
-    "rename-title": "Rename the place",
-    "delete-title": "Delete the place “:place”?",
-    "delete-text": "There is nothing in it. A template that still asks for it gets an empty list, not an error.",
-    "delete-empty-first": "Delete: empty it first",
-    "delete-blocked": "Banners in this place, the bin included: :count. Take them out first.",
-    "field-title": "Name",
-    "field-key": "Key",
-    "declared-help": "Cannot be renamed or deleted here: a template asks for it by its key.",
-    usage: "In a template:",
-    "layout-single": "One banner",
-    "layout-random": "A random one",
-    "layout-slider": "Slider",
-    "empty-help": "The site’s config declares the places its templates ask for.",
-    "choose-help": "Its banners open beside the list."
-  },
-  banner: {
-    new: "New banner",
-    trash: "Bin",
-    "to-trash": "Move to the bin",
-    restore: "Restore",
-    open: "Open",
-    enable: "Turn on",
-    disable: "Turn off",
-    disabled: "Off",
-    video: "Video",
-    empty: "No banners in this place yet",
-    "trash-empty": "The bin is empty",
-    place: "Place",
-    "place-help": "Moving the banner puts it at the end of the new place.",
-    back: "Back to the place",
-    save: "Save",
-    saved: "Banner saved",
-    trashed: "Bin",
-    restored: "Banner restored",
-    "leave-title": "Leave without saving?",
-    "leave-text": "The changes to this banner will be lost.",
-    leave: "Leave",
-    stay: "Stay",
-    reorder: "Reorder",
-    untitled: "Untitled banner",
-    all: "Banners",
-    "empty-help": "The site shows them wherever a template asks for this place.",
-    "empty-bin": "The bin is empty.",
-    "no-picture": "No picture",
-    order: "Drag to change the order on the site.",
-    "switched-on": "Switched on.",
-    "switched-off": "Switched off.",
-    delete: "Delete",
-    "delete-title": "Delete “:name”?",
-    "delete-text": "It goes to the bin and leaves the site. Restored, it comes back to its place.",
-    deleted: "Moved to the bin.",
-    "reorder-failed": "The new order was not saved.",
-    "save-failed": "Not saved.",
-    cancel: "Cancel",
-    previous: "Previous banner",
-    next: "Next banner"
-  },
-  screen: {
-    media: "Pictures and video",
-    image: "Picture",
-    "image-help": "Required. Shown on wide screens, and as the poster of the video.",
-    "image-mobile": "Picture for phones",
-    "image-mobile-help": "Optional. Narrow screens show it instead of the picture above.",
-    video: "Video",
-    "video-help": "Optional. Plays silently over the picture; the picture becomes its poster and what is seen without it.",
-    words: "Words",
-    title: "Title",
-    "title-help": "A banner with words is shown only in the languages they are written in; one without words is shown everywhere.",
-    text: "Text",
-    "text-help": "Plain text; line breaks are kept.",
-    buttons: "Buttons",
-    "buttons-help": "Up to three. A button without a label in a language is not shown in it.",
-    "buttons-add": "Add a button",
-    "buttons-empty": "No buttons",
-    label: "Label",
-    link: "Link",
-    variant: "Look",
-    "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.",
-    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"
-  }
-}, _t = /* @__PURE__ */ new WeakSet();
-function Te() {
-  try {
-    const { i18n: t } = ze();
-    _t.has(t) || (t.defaults("webx-banners", za), _t.add(t));
-  } catch {
-  }
-}
-const Sa = /* @__PURE__ */ Ve({
-  name: "WxBannerEditorPage",
-  __name: "BannerEditorPage",
-  props: {
-    base: { default: "/banners" }
-  },
-  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;
-    }), 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) => {
-        V.value = a == null ? null : String(a);
-      }
-    });
-    function Ce() {
-      return {
-        image: null,
-        image_mobile: null,
-        video: null,
-        title: {},
-        text: {},
-        buttons: [],
-        layers: null,
-        enabled: !1
-      };
-    }
-    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 me() {
-      J.value = !0;
-      try {
-        const [a, n] = await Promise.all([
-          f.places(),
-          v.value === null ? Promise.resolve(null) : f.get(v.value)
-        ]);
-        if (K.value = a, n !== null)
-          ge(n);
-        else {
-          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) {
-        Z.danger(b(a)), $.push(c.base);
-      } finally {
-        J.value = !1;
-      }
-    }
-    async function ie() {
-      if (!(U.value || !L.value || V.value === null)) {
-        U.value = !0, C.value = {};
-        try {
-          const a = v.value === null, n = a ? await f.create(V.value, g.value) : await f.save(
-            v.value,
-            g.value,
-            V.value !== W.value ? V.value : void 0
-          );
-          ge(n), Z.success(h("banner.saved")), a && $.replace(`${c.base}/${n.banner.id}`);
-        } catch (a) {
-          const n = a.body;
-          n?.errors ? (C.value = n.errors, Z.danger(h("banner.save-failed"))) : Z.danger(b(a));
-        } finally {
-          U.value = !1;
-        }
-      }
-    }
-    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 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 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 p = y(
-      () => L.value && w.value !== null ? [
-        {
-          key: "delete",
-          label: h("banner.delete"),
-          icon: "trash",
-          danger: !0,
-          menu: !0,
-          run: () => {
-            de();
-          }
-        }
-      ] : []
-    );
-    return (a, n) => (m(), B("div", {
-      class: "wx-banner-editor",
-      onKeydown: ce
-    }, [
-      J.value ? (m(), B(ne, { key: 0 }, [
-        i(e(qe), {
-          class: "wx-banner-editor__ghost",
-          title: "",
-          rows: 1
-        }),
-        i(e(Qe), null, {
-          default: d(() => [
-            i(e(qe), { rows: 6 })
-          ]),
-          _: 1
-        })
-      ], 64)) : (m(), B(ne, { key: 1 }, [
-        i(e(Bt), {
-          divider: "",
-          back: k.value,
-          "back-label": q.value,
-          title: se.value,
-          actions: p.value
-        }, zt({ _: 2 }, [
-          w.value && !w.value.enabled ? {
-            name: "title-after",
-            fn: d(() => [
-              i(e(et), { dot: "" }, {
-                default: d(() => [
-                  F(N(e(h)("banner.disabled")), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["back", "back-label", "title", "actions"]),
-        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: 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
-            }, 8, ["label", "help", "error"])
-          ]),
-          _: 1
-        }),
-        i(e(ra), {
-          modelValue: g.value,
-          "onUpdate:modelValue": n[1] || (n[1] = (I) => g.value = I),
-          name: "banners.form",
-          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: d(() => [
-            i(e(Q), {
-              type: "primary",
-              loading: U.value,
-              disabled: !X.value && v.value !== null || V.value === null,
-              onClick: ie
-            }, {
-              default: d(() => [
-                F(N(e(h)("banner.save")), 1)
-              ]),
-              _: 1
-            }, 8, ["loading", "disabled"])
-          ]),
-          _: 1
-        })) : H("", !0)
-      ], 64))
-    ], 32));
-  }
-}), 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(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 K() {
-      return Object.values(g.value).some((C) => C.trim() !== "");
-    }
-    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 U() {
-      if (!(!K() || T.value)) {
-        T.value = !0, V.value = {};
-        try {
-          f(
-            b && c.place !== null ? await $.renamePlace(c.place.key, g.value) : await $.createPlace({ key: w.value.trim(), title: g.value })
-          );
-        } catch (C) {
-          V.value = C.body?.errors ?? {};
-        } finally {
-          T.value = !1;
-        }
-      }
-    }
-    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: d(() => [
-        i(e(ea), { size: "sm" }, {
-          default: d(() => [
-            i(e(Q), {
-              variant: "outline",
-              onClick: L[2] || (L[2] = (R) => e(s)())
-            }, {
-              default: d(() => [
-                F(N(e(h)("places.cancel")), 1)
-              ]),
-              _: 1
-            }),
-            i(e(Q), {
-              type: "primary",
-              loading: T.value,
-              disabled: !K() || w.value.trim() === "",
-              onClick: U
-            }, {
-              default: d(() => [
-                F(N(b ? e(h)("places.save") : e(h)("places.create")), 1)
-              ]),
-              _: 1
-            }, 8, ["loading", "disabled"])
-          ]),
-          _: 1
-        })
-      ]),
-      default: d(() => [
-        i(e(G), {
-          label: e(h)("places.field-title"),
-          error: J("title"),
-          required: ""
-        }, {
-          default: d(() => [
-            P("div", {
-              ref_key: "field",
-              ref: W
-            }, [
-              i(e(Ke), {
-                modelValue: g.value,
-                "onUpdate:modelValue": L[0] || (L[0] = (R) => g.value = R),
-                localized: "",
-                "aria-label": e(h)("places.field-title"),
-                onKeyup: ft(U, ["enter"])
-              }, null, 8, ["modelValue", "aria-label"])
-            ], 512)
-          ]),
-          _: 1
-        }, 8, ["label", "error"]),
-        i(e(G), {
-          label: e(h)("places.field-key"),
-          error: J("key"),
-          help: b ? void 0 : e(h)("places.key-help"),
-          required: ""
-        }, {
-          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: ft(U, ["enter"])
-            }, null, 8, ["modelValue", "aria-label"])
-          ]),
-          _: 1
-        }, 8, ["label", "error", "help"])
-      ]),
-      _: 1
-    }, 8, ["open", "title"]));
-  }
-}), Ba = { class: "wx-banner-place" }, Pa = ["aria-label"], Wa = { class: "wx-banner-place__usage" }, La = {
-  key: 0,
-  class: "wx-banner-place__layout"
-}, 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"
-}, Da = /* @__PURE__ */ Ve({
-  name: "WxBannerPlacePane",
-  __name: "PlacePane",
-  props: {
-    place: {},
-    base: {},
-    inline: { type: Boolean, default: !0 }
-  },
-  emits: ["back", "changed"],
-  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 }
-        });
-      }
-    }), 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 {
-        w.value = await $.list(o.place.key, W.value);
-      } catch (S) {
-        Z.danger(v(S));
-      } finally {
-        g.value = !1;
-      }
-    }
-    $e(W, () => {
-      C();
-    }), C();
-    function L(S) {
-      return `${o.base}/${S.id}`;
-    }
-    function R() {
-      h.push({ path: `${o.base}/new`, query: { place: o.place.key } });
-    }
-    async function X() {
-      try {
-        await $.reorder(
-          o.place.key,
-          w.value.map((S) => S.id)
-        );
-      } catch (S) {
-        Z.danger(v(S, b("banner.reorder-failed"))), await C();
-      }
-    }
-    async function ee(S) {
-      try {
-        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 C();
-      }
-    }
-    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 $.remove(S.id), Z.success(b("banner.deleted")), f("changed");
-        } catch (D) {
-          Z.danger(v(D));
-        } finally {
-          await C();
-        }
-    }
-    async function k(S) {
-      try {
-        await $.restore(S.id), Z.success(b("banner.restored")), f("changed");
-      } catch (M) {
-        Z.danger(v(M));
-      } finally {
-        await C();
-      }
-    }
-    function q(S) {
-      if (W.value)
-        return T.value ? [
-          {
-            key: "restore",
-            icon: "refresh",
-            label: b("banner.restore"),
-            run: () => {
-              k(S);
-            }
-          }
-        ] : [];
-      const M = {
-        key: "open",
-        icon: "edit",
-        label: b("banner.open"),
-        run: () => {
-          h.push(L(S));
-        }
-      };
-      return T.value ? [
-        M,
-        {
-          key: "toggle",
-          icon: S.enabled ? "eye-off" : "eye",
-          label: S.enabled ? b("banner.disable") : b("banner.enable"),
-          run: () => {
-            ee(S);
-          }
-        },
-        {
-          key: "delete",
-          icon: "trash",
-          label: b("banner.delete"),
-          danger: !0,
-          run: () => {
-            se(S);
-          }
-        }
-      ] : [M];
-    }
-    const z = y(
-      () => T.value && !W.value ? [{ key: "new", label: b("banner.new"), icon: "plus", primary: !0, run: R }] : []
-    );
-    return (S, M) => (m(), B("div", Ba, [
-      i(e(Bt), {
-        level: 3,
-        back: !o.inline,
-        "back-label": e(b)("places.places"),
-        title: t.place.title,
-        actions: z.value,
-        "collapse-below": 420,
-        onBack: M[0] || (M[0] = (D) => f("back"))
-      }, zt({ _: 2 }, [
-        t.place.declared ? {
-          name: "title-after",
-          fn: d(() => [
-            i(e(tt), {
-              content: e(b)("places.declared-help")
-            }, {
-              default: d(() => [
-                P("span", {
-                  class: "wx-banner-place__lock",
-                  tabindex: "0",
-                  "aria-label": e(b)("places.declared")
-                }, [
-                  i(e(le), {
-                    name: "lock",
-                    size: "sm"
-                  })
-                ], 8, Pa)
-              ]),
-              _: 1
-            }, 8, ["content"])
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["back", "back-label", "title", "actions"]),
-      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)
-      ]),
-      i(e(it), {
-        modelValue: V.value,
-        "onUpdate:modelValue": M[1] || (M[1] = (D) => V.value = D),
-        class: "wx-banner-place__views",
-        size: "sm",
-        options: K.value,
-        "aria-label": e(b)("banner.all")
-      }, null, 8, ["modelValue", "options", "aria-label"]),
-      g.value && w.value.length === 0 ? (m(), E(e(qe), {
-        key: 0,
-        rows: 4
-      })) : w.value.length === 0 ? (m(), E(e(at), {
-        key: 1,
-        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: J.value ? "grip" : "row",
-          "item-label": (D) => D.title,
-          disabled: !J.value,
-          onMove: X
-        }, {
-          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: d(() => [
-                P("span", Oa, [
-                  D.thumb ? (m(), B("img", {
-                    key: 0,
-                    src: D.thumb,
-                    alt: "",
-                    loading: "lazy"
-                  }, null, 8, Na)) : (m(), E(e(le), {
-                    key: 1,
-                    name: "image",
-                    size: "sm",
-                    "aria-label": e(b)("banner.no-picture")
-                  }, null, 8, ["aria-label"]))
-                ]),
-                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: d(() => [
-                        F(N(e(b)("banner.video")), 1)
-                      ]),
-                      _: 1
-                    })) : H("", !0),
-                    !D.enabled && !W.value ? (m(), E(e(et), {
-                      key: 1,
-                      dot: "",
-                      size: "sm"
-                    }, {
-                      default: d(() => [
-                        F(N(e(b)("banner.disabled")), 1)
-                      ]),
-                      _: 1
-                    })) : H("", !0)
-                  ])) : H("", !0)
-                ])
-              ]),
-              _: 2
-            }, 1032, ["to", "class"]))
-          ]),
-          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"]),
-        J.value ? (m(), E(e(ta), {
-          key: 0,
-          class: "wx-banner-place__note",
-          type: "info",
-          description: e(b)("banner.order")
-        }, null, 8, ["description"])) : H("", !0)
-      ], 64))
-    ]));
-  }
-}), Ea = /* @__PURE__ */ Ie(Da, [["__scopeId", "data-v-48d645bf"]]), Ma = {
-  key: 2,
-  class: "wx-banners__list"
-}, Aa = ["onClick"], Ra = { class: "wx-banners__name" }, Fa = /* @__PURE__ */ Ve({
-  __name: "BannersPage",
-  props: {
-    base: { default: "/banners" }
-  },
-  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 {
-        b.value = await f.places();
-      } catch (k) {
-        Z.danger(h(k));
-      } finally {
-        v.value = !1;
-      }
-    }
-    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 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 (z) {
-          Z.danger(h(z));
-        } finally {
-          await U();
-        }
-    }
-    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: k.count > 0 ? _("places.delete-empty-first") : _("places.delete"),
-          danger: !0,
-          disabled: k.count > 0,
-          run: () => {
-            X(k);
-          }
-        }
-      ];
-    }
-    const se = y(
-      () => T.value ? [{ key: "new-place", label: _("places.new"), icon: "plus", run: () => {
-        L();
-      } }] : []
-    );
-    return (k, q) => (m(), E(e(da), {
-      title: W.value,
-      actions: se.value,
-      card: !1
-    }, {
-      default: d(() => [
-        i(e(Qe), {
-          class: "wx-banners",
-          padding: "none"
-        }, {
-          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(_)("places.places"),
-              onDetailInline: q[1] || (q[1] = (z) => g.value = z)
-            }, {
-              list: d(() => [
-                v.value && b.value.length === 0 ? (m(), E(e(qe), {
-                  key: 0,
-                  class: "wx-banners__loading",
-                  rows: 3
-                })) : b.value.length === 0 ? (m(), E(e(at), {
-                  key: 1,
-                  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"
-                  }, [
-                    P("button", {
-                      type: "button",
-                      class: oe(["wx-banners__open", { "is-current": z.key === K.value }]),
-                      onClick: (S) => C(z)
-                    }, [
-                      P("span", Ra, [
-                        i(e(re), {
-                          truncate: "",
-                          weight: "medium"
-                        }, {
-                          default: d(() => [
-                            F(N(z.title), 1)
-                          ]),
-                          _: 2
-                        }, 1024),
-                        z.declared ? (m(), E(e(le), {
-                          key: 0,
-                          class: "wx-banners__lock",
-                          name: "lock",
-                          size: "sm",
-                          "aria-label": e(_)("places.declared")
-                        }, null, 8, ["aria-label"])) : H("", !0),
-                        i(e(na), {
-                          class: "wx-banners__count",
-                          type: "neutral",
-                          value: z.count,
-                          label: e(_)("places.count")
-                        }, null, 8, ["value", "label"])
-                      ]),
-                      i(e(re), {
-                        size: "sm",
-                        tone: "muted",
-                        mono: "",
-                        truncate: ""
-                      }, {
-                        default: d(() => [
-                          F("banners('" + N(z.key) + "')", 1)
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ], 10, Aa),
-                    ee(z).length > 0 ? (m(), E(e(Pt), {
-                      key: 0,
-                      actions: ee(z),
-                      label: z.title
-                    }, null, 8, ["actions", "label"])) : H("", !0)
-                  ]))), 128))
-                ]))
-              ]),
-              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: d(() => [
-                i(e(at), {
-                  title: e(_)("places.choose"),
-                  description: e(_)("places.choose-help")
-                }, null, 8, ["title", "description"])
-              ]),
-              _: 1
-            }, 8, ["open", "detail-label"])
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    }, 8, ["title", "actions"]));
-  }
-}), 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: c,
-    routes: [
-      // The open place is in the address (`?place=`), so a link to it is a link to its banners.
-      { 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: `${c}/new`,
-        name: "webx.banners.new",
-        component: $t,
-        props: { base: c }
-      },
-      {
-        path: `${c}/:id(\\d+)`,
-        name: "webx.banners.edit",
-        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 }
-    }
-  };
-}
+import "vue";
+import { E as r, F as n, a as o, L as l, O as t, W as y, b as i, e as m, f as L, g as c, h as d, i as E, c as I, j as f, k as p, d as x, l as B, m as F, n as O, o as S, q as W, r as g, s as b, t as w, v as A, w as C } from "./index-3RALKrkh.js";
 export {
-  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
+  r as ENTRANCES,
+  n as FIELDS,
+  o as FRAME_LIMITS,
+  l as LOOPS,
+  t as ORIGINS,
+  y as WxBannerEditorPage,
+  i as WxBannerLayers,
+  m as WxBannersPage,
+  L as banners,
+  c as bannersMessages,
+  d as clampFrame,
+  E as clone,
+  I as createBannersApi,
+  f as cropBox,
+  p as cssColor,
+  x as defaultLayers,
+  B as frame,
+  F as layerClasses,
+  O as layerId,
+  S as layerVars,
+  W as layerWords,
+  g as motion,
+  b as newLayer,
+  w as ratioOf,
+  A as style,
+  C as unknownFields
 };
 //# sourceMappingURL=index.js.map