@webx-ui/module-banners 0.2.4 → 0.3.1

package/dist/index-3RALKrkh.js

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