@figurosity/consumer-controls 0.1.0

package/dist/consumer-controls.js

@@ -0,0 +1,4813 @@
+import { ref as y, watch as ce, onMounted as J, openBlock as _, createElementBlock as se, toDisplayString as be, defineComponent as M, computed as u, h as r, resolveComponent as A, createElementVNode as x, createVNode as D, createBlock as L, normalizeClass as Y, withCtx as S, Transition as ie, withDirectives as R, unref as Z, vShow as O, createTextVNode as at, createCommentVNode as le, renderSlot as I, normalizeStyle as pe, inject as sn, onBeforeUnmount as Me, nextTick as we, provide as cn, onUnmounted as At, onBeforeMount as rn, toRefs as un, useSlots as dn, TransitionGroup as ot, useModel as Ue, resolveDynamicComponent as mn, withModifiers as yt, mergeModels as fn } from "vue";
+import ge from "@tweenjs/tween.js";
+import { addCommas as kt, slugify as Ce, DEFAULT as ke, useEventBus as lt, Rect as Pe, NOTHING as me, VIEWS as _t, TOOLBAR as $t } from "@figurosity/toolbox";
+import { QIcon as qe, QBtn as he, useQuasar as Ve, TouchPan as vn, QCard as gn, QCardSection as Re, QResizeObserver as Xe, QDrawer as bn, QExpansionItem as Ke, QPageSticky as hn, QSlideTransition as st, QDialog as yn, QItem as qt, QItemSection as Le, QSlider as kn, QAvatar as pn, QItemLabel as wn, QToggle as Cn, getCssVar as Be, QLayout as Bn, QPageContainer as Vn } from "quasar";
+import { chevronLeft as xn, eyeDropper as Tt, lock as Je, settings as zt, menuAlt as ct, move as Dn, refresh as et, zoomIn as it, spin as rt, saturation as ut, contrast as dt, brightness as mt, grid as It, zoomOut as Sn, mark as ft } from "@figurosity/icons";
+import { matFiberManualRecord as je, matKeyboardArrowDown as Lt } from "@quasar/extras/material-icons";
+import { ChromePicker as An } from "vue-color";
+import { onBeforeRouteLeave as _n, useRoute as $n } from "vue-router";
+import { EventManager as Mt } from "mjolnir.js";
+const qn = { class: "c-animated-number" }, Nt = {
+  __name: "CAnimatedNumber",
+  props: {
+    total: Number,
+    speed: {
+      type: Number,
+      default: 800
+    },
+    delay: {
+      type: Number,
+      default: 1
+    },
+    loading: Boolean
+  },
+  setup(e) {
+    const a = y(0), n = y(0), t = y({}), o = e, s = y(window), c = (v) => {
+      n.value = s.value.requestAnimationFrame(c), ge.update(v);
+    }, i = (v, h, k = null) => {
+      l();
+      const f = { num: h }, w = { num: v };
+      t.value = new ge.Tween(f).to(w, o.speed).delay(o.delay).easing(ge.Easing.Quadratic.Out).onUpdate(m).onComplete(d).start(), c();
+    }, l = () => {
+      t.value && t.value.stop && (t.value.stop(), t.value = null);
+    }, d = () => {
+      s.value.cancelAnimationFrame(n.value);
+    }, m = (v) => {
+      a.value = kt(v.num.toFixed(0));
+    };
+    return ce(() => o.total, (v, h) => i(v, h)), J(() => a.value = kt(o.total)), (v, h) => (_(), se("span", qn, be(a.value), 1));
+  }
+}, Tn = M({
+  name: "CButtonBoolean",
+  props: {
+    dark: { type: Boolean, default: !1 },
+    disable: { type: Boolean, default: !1 },
+    selected: { type: Boolean, default: !1 },
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "lg"].includes(e)
+    },
+    type: {
+      type: String,
+      default: "radio",
+      validator: (e) => ["radio", "checkbox"].includes(e)
+    }
+  },
+  setup(e, { slots: a, emit: n }) {
+    function t() {
+      const s = {
+        class: u(() => [
+          "c-button-boolean",
+          `c-button-boolean--${e.type}`,
+          `c-button-boolean--${e.size}`,
+          { "c-button-boolean--selected": e.selected },
+          { "c-button-boolean--disable": e.disable },
+          { dark: e.dark }
+        ]).value
+      }, c = [];
+      if (e.type === "radio" && c.push(r("div")), e.type === "checkbox") {
+        const i = e.size === "sm" ? "10px" : "12px";
+        c.push(r(qe, { name: "f_checkmark", size: i }));
+      }
+      return r("div", s, c);
+    }
+    return () => t();
+  }
+}), Pt = (e) => {
+  let a, n, t;
+  return e.match(/^rgb/) ? (e = e.match(
+    /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/
+  ), a = +e[1], n = +e[2], t = +e[3]) : (e = +("0x" + e.slice(1).replace(e.length < 5 && /./g, "$&$&")), a = e >> 16, n = e >> 8 & 255, t = e & 255), Math.sqrt(0.299 * (a * a) + 0.587 * (n * n) + 0.114 * (t * t)) > 186;
+}, He = (e, a, n) => Math.min(n, Math.max(a, e)), zn = (e) => {
+  if (/^rgb/.test(e)) {
+    const t = e.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    return { r: +t[1], g: +t[2], b: +t[3] };
+  }
+  let a = e.replace("#", "");
+  a.length === 3 && (a = a.split("").map((t) => t + t).join(""));
+  const n = parseInt(a, 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}, In = ({ r: e, g: a, b: n }) => "#" + [e, a, n].map((t) => t.toString(16).padStart(2, "0")).join(""), Ln = ({ r: e, g: a, b: n }) => {
+  e /= 255, a /= 255, n /= 255;
+  const t = Math.max(e, a, n), o = Math.min(e, a, n);
+  let s = 0, c = 0, i = (t + o) / 2;
+  if (t !== o) {
+    const l = t - o;
+    switch (c = i > 0.5 ? l / (2 - t - o) : l / (t + o), t) {
+      case e:
+        s = (a - n) / l + (a < n ? 6 : 0);
+        break;
+      // <-- fixed (+0, not +1)
+      case a:
+        s = (n - e) / l + 2;
+        break;
+      case n:
+        s = (e - a) / l + 4;
+        break;
+    }
+    s *= 60;
+  }
+  return { h: s, s: c, l: i };
+}, Mn = ({ h: e, s: a, l: n }) => {
+  const t = (1 - Math.abs(2 * n - 1)) * a, o = t * (1 - Math.abs(e / 60 % 2 - 1)), s = n - t / 2;
+  let c = 0, i = 0, l = 0;
+  return 0 <= e && e < 60 ? [c, i, l] = [t, o, 0] : 60 <= e && e < 120 ? [c, i, l] = [o, t, 0] : 120 <= e && e < 180 ? [c, i, l] = [0, t, o] : 180 <= e && e < 240 ? [c, i, l] = [0, o, t] : 240 <= e && e < 300 ? [c, i, l] = [o, 0, t] : [c, i, l] = [t, 0, o], {
+    r: Math.round(He((c + s) * 255, 0, 255)),
+    g: Math.round(He((i + s) * 255, 0, 255)),
+    b: Math.round(He((l + s) * 255, 0, 255))
+  };
+}, pt = (e, a) => {
+  const n = zn(e), t = Ln(n);
+  return t.l = He(t.l + a / 100, 0, 1), In(Mn(t));
+}, Nn = (e, { angle: a = 135, stop1: n = 35, stop2: t = 95, delta: o = 12 } = {}) => {
+  const s = Pt(e), c = s ? e : pt(e, +o), i = s ? pt(e, -o) : e;
+  return `linear-gradient(${a}deg, ${c} ${n}%, ${i} ${t}%)`;
+}, Pn = M({
+  name: "CBaseButton",
+  props: {
+    access: String,
+    dark: Boolean,
+    color: { default: "#ffffff", type: String },
+    disable: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    image: String,
+    label: String,
+    type: {
+      type: String,
+      default: "radio",
+      validator: (e) => ["radio", "checkbox", "none", "borderless"].includes(e)
+    },
+    selected: Boolean,
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "lg"].includes(e)
+    }
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const t = () => {
+      if (!e.disable) {
+        if (e.hasAccess) {
+          n("click");
+          return;
+        }
+        n("blockAccess", e.access);
+      }
+    }, o = u(() => [
+      "c-base-button",
+      { row: e.size === "sm" },
+      `c-base-button--${e.size}`,
+      `c-base-button--${e.type}`,
+      { selected: e.selected },
+      { "c-base-button--disable": e.disable },
+      { dark: e.dark }
+    ]), s = u(() => ({
+      minWidth: e.size === "sm" ? "60px" : "90px",
+      maxWidth: e.size === "sm" ? "60px" : "90px"
+    }));
+    function c() {
+      const i = {
+        class: o.value,
+        onClick: t,
+        style: s.value,
+        "data-cy": "c-button-" + Ce(e.label)
+      }, l = [], d = u(() => ({
+        "c-base-button--icon": !0,
+        "col-shrink": e.size === "sm",
+        "flex justify-center items-center ": e.size === "sm",
+        "q-pt-xs": !0
+      })), m = u(() => ({
+        "c-base-button--image": !0,
+        "col-shrink": e.size === "sm",
+        "flex justify-center items-center ": e.size === "sm"
+      }));
+      if (e.icon && !e.image) {
+        const v = Pt(e.color), h = {
+          class: d.value
+        }, k = {
+          name: e.icon,
+          size: e.size === "sm" ? "38px" : "52px",
+          class: v ? "light" : "dark"
+        }, f = u(() => ({
+          background: Nn(e.color)
+        })), w = {
+          class: "c-base-button--background"
+        };
+        e.type !== "borderless" && (w.style = f.value), l.push(
+          r("div", h, [r("div", w), r(qe, k)])
+        );
+      }
+      if (e.image) {
+        const v = {
+          class: { ...m.value }
+        }, h = {
+          class: "c-base-button--overlay"
+        }, k = {
+          class: "unselectable",
+          src: e.image
+        };
+        l.push(
+          r("div", v, [r("div", h), r("img", k)])
+        );
+      }
+      if (e.label) {
+        const v = u(() => ({
+          "col flex items-center unselectable": !0,
+          "q-pl-md": !e.icon && !e.image
+        }));
+        l.push(
+          r("div", { class: v.value }, [
+            r("div", { class: "c-base-button--label" }, e.label)
+          ])
+        );
+      }
+      if (e.type === "radio" || e.type === "checkbox") {
+        const v = {
+          class: "col-shrink flex items-center justify center",
+          style: "min-width: 35px;"
+        };
+        l.push(
+          r("div", v, [
+            r(Tn, {
+              disable: e.disable,
+              selected: e.selected,
+              size: e.size,
+              type: e.type
+            })
+          ])
+        );
+      }
+      return r("div", i, l);
+    }
+    return () => c();
+  }
+}), Rn = M({
+  name: "CBaseButtons",
+  setup(e, { slots: a, emit: n }) {
+    function t() {
+      return r("div", {
+        class: "c-base-buttons row justify-center"
+      }, a.default ? a.default() : []);
+    }
+    return () => t();
+  }
+}), vt = (e, a) => {
+  const n = e.__vccOpts || e;
+  for (const [t, o] of a)
+    n[t] = o;
+  return n;
+}, On = {
+  name: "CCounter.vue",
+  components: { CAnimatedNumber: Nt },
+  props: {
+    title: String,
+    total: Number
+  }
+}, En = { class: "c-counter" }, Hn = { class: "c-counter-title" };
+function Un(e, a, n, t, o, s) {
+  const c = A("c-animated-number");
+  return _(), se("div", En, [
+    x("span", Hn, be(n.title), 1),
+    D(c, {
+      class: "c-counter-count",
+      total: n.total
+    }, null, 8, ["total"])
+  ]);
+}
+const Fn = /* @__PURE__ */ vt(On, [["render", Un]]), Rt = {
+  __name: "CDrawerHeader",
+  props: {
+    bottom: Boolean,
+    countTitle: String,
+    count: Number,
+    title: String,
+    icon: String,
+    selected: Boolean,
+    to: String,
+    toText: String,
+    dark: Boolean
+  },
+  setup(e) {
+    return (a, n) => {
+      const t = A("q-icon"), o = A("q-toolbar-title"), s = A("q-toolbar");
+      return _(), L(s, {
+        class: Y(["c-drawer-header", { dark: e.dark }])
+      }, {
+        default: S(() => [
+          D(o, null, {
+            default: S(() => [
+              x("span", {
+                class: Y(["c-drawer-header-title unselectable", { bottom: e.bottom }])
+              }, [
+                D(ie, { name: "fade" }, {
+                  default: S(() => [
+                    R(D(t, {
+                      class: "c-drawer-header-indicator",
+                      color: "primary",
+                      name: Z(je)
+                    }, null, 8, ["name"]), [
+                      [O, e.selected]
+                    ])
+                  ]),
+                  _: 1
+                }),
+                at(" " + be(e.title) + "  ", 1),
+                e.icon ? (_(), L(t, {
+                  key: 0,
+                  size: "26px",
+                  name: e.icon
+                }, null, 8, ["name"])) : le("", !0)
+              ], 2)
+            ]),
+            _: 1
+          }),
+          e.countTitle ? (_(), L(Fn, {
+            key: 0,
+            title: e.countTitle,
+            total: e.count
+          }, null, 8, ["title", "total"])) : le("", !0)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+}, jn = {
+  name: "CBottomDrawer.vue",
+  props: {
+    modelValue: Boolean
+  },
+  components: {
+    CDrawerHeader: Rt
+  },
+  computed: {
+    dialog: {
+      get() {
+        return this.modelValue;
+      },
+      set(e) {
+        this.$emit("update:modelValue", e);
+      }
+    }
+  },
+  emits: ["input"],
+  methods: {
+    addListeners() {
+      this.$nextTick(() => {
+        const e = this.$refs.dialog.$el;
+        e.addEventListener("DOMMouseScroll", this.mouseWheel), e.addEventListener("mousewheel", this.mouseWheel), e.addEventListener("onmousewheel", this.mouseWheel);
+      });
+    },
+    mouseWheel(e) {
+      e.preventDefault();
+    },
+    removeListeners() {
+      const e = this.$refs.dialog.$el;
+      e && (e.removeEventListener("DOMMouseScroll", this.mouseWheel), e.removeEventListener("mousewheel", this.mouseWheel), e.removeEventListener("onmousewheel", this.mouseWheel));
+    }
+  },
+  beforeDestroy() {
+    this.removeListeners();
+  },
+  watch: {
+    dialog(e) {
+      if (e)
+        return this.addListeners();
+      this.removeListeners();
+    }
+  }
+};
+function Wn(e, a, n, t, o, s) {
+  const c = A("q-dialog");
+  return _(), L(c, {
+    class: "c-bottom-drawer",
+    "full-width": "",
+    position: "bottom",
+    dark: "",
+    seamless: "",
+    square: "",
+    modelValue: s.dialog,
+    "onUpdate:modelValue": a[0] || (a[0] = (i) => s.dialog = i),
+    ref: "dialog"
+  }, {
+    default: S(() => [
+      I(e.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["modelValue"]);
+}
+const Ot = /* @__PURE__ */ vt(jn, [["render", Wn]]), Qn = { class: "c-drawer-header-title unselectable" }, Gn = { class: "q-pr-lg" }, Et = {
+  __name: "CBottomDrawerHeader",
+  props: {
+    title: String,
+    icon: String,
+    selected: Boolean,
+    dark: Boolean
+  },
+  setup(e) {
+    return (a, n) => {
+      const t = A("q-icon"), o = A("q-toolbar-title"), s = A("q-toolbar");
+      return _(), L(s, {
+        class: Y(["c-drawer-header", { dark: e.dark }])
+      }, {
+        default: S(() => [
+          D(o, null, {
+            default: S(() => [
+              x("span", Qn, [
+                D(ie, { name: "fade" }, {
+                  default: S(() => [
+                    R(D(t, {
+                      class: "c-drawer-header-indicator",
+                      color: "primary",
+                      name: Z(je)
+                    }, null, 8, ["name"]), [
+                      [O, e.selected]
+                    ])
+                  ]),
+                  _: 1
+                }),
+                at(" " + be(e.title) + "  ", 1),
+                e.icon ? (_(), L(t, {
+                  key: 0,
+                  size: "26px",
+                  name: e.icon
+                }, null, 8, ["name"])) : le("", !0)
+              ])
+            ]),
+            _: 1
+          }),
+          x("div", Gn, [
+            I(a.$slots, "default")
+          ])
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+}, Yn = {
+  class: "c-bottom-drawer-container-default",
+  ref: "drawers"
+}, Zn = {
+  __name: "CBottomDrawerContainer",
+  props: {
+    dark: Boolean,
+    height: {
+      type: Number,
+      default: 200
+    },
+    selected: Boolean,
+    show: Boolean,
+    title: String
+  },
+  setup(e) {
+    const a = e, n = u(() => ({
+      height: a.height + "px"
+    }));
+    return (t, o) => (_(), L(ie, { name: "fade" }, {
+      default: S(() => [
+        R(x("div", {
+          class: Y(["c-bottom-drawer-container", { dark: e.dark }]),
+          ref: "bottom",
+          style: pe(n.value)
+        }, [
+          x("div", Yn, [
+            D(Et, {
+              title: e.title,
+              selected: e.selected,
+              dark: e.dark
+            }, {
+              default: S(() => [
+                I(t.$slots, "bottomDrawerTop")
+              ]),
+              _: 3
+            }, 8, ["title", "selected", "dark"]),
+            I(t.$slots, "default")
+          ], 512)
+        ], 6), [
+          [O, e.show]
+        ])
+      ]),
+      _: 3
+    }));
+  }
+}, We = M({
+  name: "CButton",
+  props: {
+    access: String,
+    circle: Boolean,
+    dark: Boolean,
+    disable: Boolean,
+    disabled: Boolean,
+    duration: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    image: String,
+    label: String,
+    rectangle: Boolean,
+    selected: Boolean,
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "lg"].includes(e)
+    },
+    unit: String,
+    value: Number
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const t = () => {
+      if (e.hasAccess) {
+        n("click");
+        return;
+      }
+      n("blockAccess", e.access);
+    }, o = u(() => [
+      "c-button",
+      "c-button--" + e.size,
+      { "c-button--rectangle": e.rectangle },
+      { "c-button--duration": e.duration },
+      {
+        "c-button--circle": e.circle || !e.rectangle && !e.duration
+      },
+      { selected: e.selected },
+      { disabled: e.disabled },
+      { "c-button--dark": e.dark }
+    ]);
+    function s() {
+      if (e.duration) {
+        if (!e.value || !e.unit)
+          throw new Error(
+            "A duration button must have value and unit properties."
+          );
+        return r("div", {}, [
+          r("span", { class: "c-button-value" }, e.value),
+          r("br"),
+          r("span", { class: "c-button-unit" }, e.unit)
+        ]);
+      }
+    }
+    function c() {
+      return !e.image || e.duration ? void 0 : r(
+        "div",
+        {
+          class: "c-button--image unselectable",
+          draggable: !1
+        },
+        r("img", {
+          src: e.image,
+          draggable: !1,
+          class: "unselectable"
+        })
+      );
+    }
+    function i() {
+      return !e.label || e.duration ? void 0 : r("span", {
+        class: "c-button--label unselectable"
+      }, e.label);
+    }
+    function l() {
+      const d = {
+        class: o.value,
+        noRipple: e.disabled,
+        disable: e.disable,
+        round: !0,
+        outline: !0,
+        flat: !0,
+        unelevated: !0,
+        noCaps: !0,
+        icon: e.icon,
+        onClick: t
+      }, m = [s(), c(), i()];
+      return r(he, d, () => m);
+    }
+    return () => l();
+  }
+}), Xn = {
+  __name: "CButtonBar",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    resetText: {
+      type: String,
+      default: "Reset all"
+    },
+    doneText: {
+      type: String,
+      default: "Done"
+    }
+  },
+  emits: ["done", "reset"],
+  setup(e, { emit: a }) {
+    const n = a, t = () => n("done"), o = () => n("reset");
+    return (s, c) => {
+      const i = A("q-btn"), l = A("q-btn-group"), d = A("q-footer");
+      return _(), L(d, {
+        "data-cy": "c-button-bar",
+        class: "c-button-bar bg-black"
+      }, {
+        default: S(() => [
+          D(l, {
+            spread: "",
+            flat: "",
+            style: { "border-radius": "0" }
+          }, {
+            default: S(() => [
+              D(i, {
+                "data-cy": "c-button-bar-reset",
+                disabled: e.disabled,
+                class: "bg-dark text-white",
+                "no-caps": "",
+                onClick: o,
+                label: e.resetText
+              }, null, 8, ["disabled", "label"]),
+              D(i, {
+                "data-cy": "c-button-bar-done",
+                "no-caps": "",
+                class: "bg-dark text-white full-width",
+                onClick: t,
+                label: e.doneText
+              }, null, 8, ["label"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}, Kn = {
+  name: "CButtonRow",
+  props: {
+    count: {
+      type: Number,
+      default: 0
+    },
+    noWrap: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    //:class="{ 'no-wrap': noWrap, 'q-gutter-md': noWrap,
+    // 'q-gutter-sm': !noWrap, 'q-px-xl': !noWrap, 'q-pt-sm': !noWrap }">
+    twoPer() {
+      return this.count === 4;
+    },
+    classObject: function() {
+      return {
+        "no-wrap": this.noWrap,
+        "q-gutter-md": this.twoPer,
+        "q-gutter-sm": !this.twoPer,
+        "q-px-xl": this.twoPer,
+        "q-pt-sm": !this.noWrap
+      };
+    }
+  }
+};
+function Jn(e, a, n, t, o, s) {
+  return _(), se("div", {
+    class: Y(["row justify-center q-pb-sm", s.classObject])
+  }, [
+    I(e.$slots, "default")
+  ], 2);
+}
+const ea = /* @__PURE__ */ vt(Kn, [["render", Jn]]), ta = M({
+  name: "CButtonToggle",
+  props: {
+    access: String,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    disable: Boolean,
+    modelValue: { type: String, default: "360" },
+    labelLeft: { type: String, required: !1 },
+    labelRight: { type: String, required: !1 },
+    valueLeft: { type: String, required: !1 },
+    valueRight: { type: String, required: !1 }
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const t = u(() => ({
+      left: o.value ? "4px" : "58px"
+    })), o = u(() => e.valueLeft === e.modelValue), s = () => {
+      if (!e.disable) {
+        if (e.hasAccess) {
+          let l = e.valueLeft === e.modelValue ? e.valueRight : e.valueLeft;
+          n("update:modelValue", l);
+          return;
+        }
+        n("blockAccess", e.access);
+      }
+    };
+    function c() {
+      const i = e.disable ? " disable" : "", l = {
+        onClick: s,
+        class: "c-button-toggle position-relative row justify-center items-center" + i
+      }, d = {
+        class: "c-button-toggle-left col-6 text-center unselectable"
+      }, m = {
+        class: "c-button-toggle-right col-6 text-center unselectable"
+      }, v = {
+        class: "c-button-toggle-slide",
+        style: t.value
+      };
+      return r("div", l, [
+        r("div", d, e.labelLeft),
+        r("div", m, e.labelRight),
+        r("div", v)
+      ]);
+    }
+    return () => c();
+  }
+}), na = { class: "quarters overlay" }, aa = { class: "quarters borders" }, wt = "cps", oa = {
+  __name: "CCameraDirection",
+  props: {
+    dark: Boolean,
+    disabled: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({
+        back: !1,
+        front: !1,
+        left: !1,
+        right: !1
+      })
+    }
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = u(() => n.modelValue.back), s = u(() => n.modelValue.front), c = u(() => n.modelValue.left), i = u(() => n.modelValue.right), l = (d) => {
+      if (n.hasAccess) {
+        let m = Object.assign({}, n.modelValue);
+        m[d] = !m[d], t("update:modelValue", m);
+        return;
+      }
+      t("blockAccess", wt), store.dispatch("paywall/block", wt);
+    };
+    return (d, m) => (_(), se("div", {
+      class: Y(["c-camera-direction", { dark: e.dark }])
+    }, [
+      x("div", na, [
+        x("div", {
+          class: "back quarter",
+          onClick: m[0] || (m[0] = (v) => l("back"))
+        }),
+        x("div", {
+          class: "left quarter",
+          onClick: m[1] || (m[1] = (v) => l("left"))
+        }),
+        x("div", {
+          class: "front quarter",
+          onClick: m[2] || (m[2] = (v) => l("front"))
+        }),
+        x("div", {
+          class: "right quarter",
+          onClick: m[3] || (m[3] = (v) => l("right"))
+        })
+      ]),
+      x("div", aa, [
+        x("div", {
+          class: Y(["back quarter", { active: o.value }]),
+          ref_key: "back",
+          ref: o
+        }, [...m[4] || (m[4] = [
+          x("span", null, "BACK", -1)
+        ])], 2),
+        x("div", {
+          class: Y(["left quarter", { active: c.value }]),
+          ref_key: "left",
+          ref: c
+        }, [...m[5] || (m[5] = [
+          x("span", null, "SIDE", -1)
+        ])], 2),
+        x("div", {
+          class: Y(["front quarter", { active: s.value }]),
+          ref_key: "front",
+          ref: s
+        }, [...m[6] || (m[6] = [
+          x("span", null, "FRONT", -1)
+        ])], 2),
+        x("div", {
+          class: Y(["right quarter", { active: i.value }]),
+          ref_key: "right",
+          ref: i
+        }, [...m[7] || (m[7] = [
+          x("span", null, "SIDE", -1)
+        ])], 2)
+      ]),
+      m[8] || (m[8] = x("div", { class: "quickpose-angle" }, [
+        x("img", {
+          src: "https://static.figurosity.com/pose-generator/position/model-male.png",
+          class: ""
+        })
+      ], -1))
+    ], 2));
+  }
+}, la = M({
+  name: "ChromePicker",
+  props: {
+    modelValue: { type: String, default: 0 },
+    "onUpdate:modelValue": [Function, Array]
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const t = u({
+      get: () => e.modelValue,
+      set: (s) => n("update:modelValue", s)
+    });
+    function o() {
+      const s = {
+        class: "chrome-picker",
+        modelValue: t.value,
+        disableAlpha: !0,
+        disbleFields: !0,
+        "onUpdate:modelValue": (c) => t.value = c
+      };
+      return r(An, s);
+    }
+    return () => o();
+  }
+}), Oe = (e) => {
+  e.stopPropagation();
+}, sa = {
+  // Pointer
+  onPointerdown: Oe,
+  // onPointermove: stopBubble,
+  // onPointerup: stopBubble,
+  // onPointercancel: stopBubble,
+  // Mouse
+  onMousedown: Oe,
+  // onMousemove: stopBubble,
+  // onMouseup: stopBubble,
+  // Touch (mobile)
+  onTouchstart: Oe,
+  // onTouchmove: stopBubble,
+  // onTouchend: stopBubble,
+  // onTouchcancel: stopBubble,
+  // Synthetic follow-up events
+  onClick: Oe
+  // onDblclick: stopBubble,
+  // onContextmenu: stopBubble,
+}, Ht = M({
+  name: "CColorPopup",
+  props: {
+    modelValue: { type: String, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 },
+    show: { type: Boolean, required: !0 },
+    "onUpdate:show": [Function, Array]
+  },
+  emits: ["click", "update:modelValue", "update:show"],
+  setup(e, { slots: a, emit: n }) {
+    y(!1);
+    function t() {
+      n("update:show", !1);
+    }
+    const o = u({
+      get: () => e.modelValue,
+      set: (c) => n("update:modelValue", c)
+    });
+    function s() {
+      const c = {
+        class: "c-color-picker-popup",
+        ...sa
+      }, i = {
+        class: "row items-center"
+      }, l = {
+        onClick: t,
+        class: "c-color-picker-popup-btn q-mb-xs",
+        round: !0,
+        flat: !0,
+        size: "sm",
+        color: "primary",
+        icon: xn
+      }, d = {
+        class: "c-color-picker-popup-label q-ml-sm",
+        style: "color: var(--grey-700); font-size: 16px;font-weight: 700",
+        onClick: t
+      }, m = {
+        class: "c-color-picker-popup-chooser",
+        modelValue: o.value,
+        "onUpdate:modelValue": (v) => o.value = v
+      };
+      return R(
+        r("div", c, [
+          r("div", i, [
+            r(he, l),
+            r("div", d, e.label)
+          ]),
+          r(la, m)
+        ]),
+        [[O, e.show]]
+      );
+    }
+    return () => s();
+  }
+}), ca = M({
+  name: "CColorPicker",
+  props: {
+    modelValue: { type: String, default: "rbg(255,255,255)" },
+    "onUpdate:modelValue": [Function, Array],
+    label: String
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const t = y(!1);
+    function o() {
+      t.value = !0;
+    }
+    const s = u(() => ({ backgroundColor: c.value })), c = u({
+      get: () => e.modelValue,
+      set: (l) => n("update:modelValue", l)
+    });
+    ce(
+      () => t.value,
+      (l) => console.log("show popup changed:", l)
+    );
+    function i() {
+      const l = {
+        class: "c-color-picker"
+      }, d = {
+        class: "c-color-picker-button",
+        style: s.value,
+        onClick: o,
+        label: e.label,
+        icon: Tt
+      }, m = {
+        modelValue: c.value,
+        "onUpdate:modelValue": (v) => c.value = v,
+        show: t.value,
+        "onUpdate:show": (v) => t.value = v,
+        label: e.label,
+        onPointerdown: (v) => v.stopPropagation(),
+        onMousedown: (v) => v.stopPropagation()
+      };
+      return r("div", l, [
+        R(
+          r(he, d, () => []),
+          [[O, !t.value]]
+        ),
+        R(r(Ht, m), [
+          [O, t.value]
+        ])
+      ]);
+    }
+    return () => i();
+  }
+}), ia = M({
+  name: "CColorPickerButton",
+  props: {
+    modelValue: { type: Boolean, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 },
+    color: { type: String, required: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    function t() {
+      n("update:modelValue", !0);
+    }
+    const o = u(() => ({ backgroundColor: e.color })), s = u({
+      get: () => e.modelValue,
+      set: (i) => n("update:modelValue", i)
+    });
+    function c() {
+      const i = {
+        class: "c-color-picker-button",
+        modelValue: s.value,
+        "onUpdate:modelValue": (l) => s.value = l,
+        style: o.value,
+        onClick: t,
+        label: e.label,
+        icon: Tt
+      };
+      return r(he, i, () => []);
+    }
+    return () => c();
+  }
+}), ra = {
+  __name: "CDivider",
+  props: {
+    divider: Boolean
+  },
+  setup(e) {
+    return (a, n) => (_(), se("div", {
+      class: Y(["c-divider", { divider: e.divider }])
+    }, [...n[0] || (n[0] = [
+      x("div", null, null, -1),
+      x("span", null, null, -1),
+      x("span", null, null, -1),
+      x("span", null, null, -1),
+      x("div", null, null, -1)
+    ])], 2));
+  }
+}, Ut = "c_dd";
+function Ge() {
+}
+const ua = ["click"], Ye = "moving", da = "hidden", Ae = "default", ve = "expanded", Ee = "minimized", Ct = "up", Bt = "down", ma = "px", fa = {
+  detail: {
+    type: Boolean,
+    default: !0
+  },
+  name: {
+    type: Number,
+    default: ke
+  },
+  label: String,
+  noCaps: Boolean,
+  tabindex: [String, Number],
+  topOffset: {
+    type: Number,
+    default: 80
+  }
+  // disable: Boolean,
+};
+function va(e, a) {
+  const n = sn(Ut, Ge);
+  if (n === Ge)
+    return console.error(
+      "CDraggableDrawer component needs to be child of CDraggableDrawers"
+    ), Ge;
+  const t = lt(), o = Ve(), s = y(null), c = y(null), i = y(null), l = y(null), d = y(null), m = y(null), v = y(null), h = y(null), k = y(n.currentModel), f = y({}), w = y(da), p = y(!1), B = y(null), $ = u(() => {
+    const C = G() + ma, q = w.value === ve ? "auto" : "hidden";
+    return {
+      maxHeight: C,
+      overflowY: q
+    };
+  });
+  function E() {
+    return l.value ? l.value.$el.offsetHeight : 0;
+  }
+  function g() {
+    return d.value ? d.value.$el.offsetHeight : 0;
+  }
+  function z() {
+    if (!c.value) return 0;
+    const C = c.value.$el.offsetHeight;
+    return e.name === ke || !i.value ? C : C + i.value.$el.offsetHeight;
+  }
+  function T() {
+    const C = z();
+    return E() + C;
+  }
+  function G() {
+    const C = T();
+    return g() + C;
+  }
+  function F() {
+    const C = G(), q = o.screen.height - e.topOffset;
+    return Math.min(C, q);
+  }
+  const ee = u(() => {
+    var C, q;
+    return !!((q = (C = a.secondary) == null ? void 0 : C.call(a)) != null && q.length);
+  });
+  function K(C) {
+    p.value = !1;
+    const { direction: q, delta: P, duration: Q, isFinal: ae } = C;
+    if (P === 0) return;
+    const oe = ne() + P.y, de = F(), Se = z(), Ne = Q < 290, gt = T(), bt = De(oe, gt, de), ht = ye(oe, Se, gt, de);
+    if (q === Bt && oe > -Se) {
+      W(-Se, !1);
+      return;
+    }
+    if (q === Ct && oe < -de) {
+      W(-de, !1);
+      return;
+    }
+    if (!ae) {
+      W(oe, !1);
+      return;
+    }
+    if (Ne)
+      return q === Ct ? bt === ve ? re() : te() : q === Bt ? bt === Ae ? fe() : te() : void 0;
+    if (ht === "minimized")
+      return fe();
+    if (ht === ve)
+      return re();
+    te();
+  }
+  function ye(C, q, P, Q) {
+    const ae = Math.abs(C), de = [q, P, Q].reduce(
+      (Se, Ne) => Math.abs(Ne - ae) < Math.abs(Se - ae) ? Ne : Se
+    );
+    return de === q ? Ee : de === P ? Ae : ve;
+  }
+  function De(C, q, P) {
+    const Q = Math.abs(C);
+    return Q <= q ? Ae : Q <= P ? ve : "out-of-bounds";
+  }
+  function fe() {
+    const C = z();
+    w.value = Ye, W(-C), B.value = Ee;
+  }
+  function te() {
+    w.value = Ye;
+    const C = F(), q = T(), P = e.name === ke ? 1 : 3;
+    f.value = { ...f.value, zIndex: P };
+    const Q = q > C ? C : q;
+    W(-Q), B.value = Ae;
+  }
+  function re() {
+    w.value = Ye;
+    const C = F(), q = G(), P = e.name === ke ? 1 : 3;
+    f.value = { ...f.value, zIndex: P };
+    const Q = q > C ? C : q;
+    W(-Q), B.value = ve;
+  }
+  function ze() {
+    re(), setTimeout(te, 500);
+  }
+  function V(C = !0) {
+    const q = e.name === ke ? 1 : 3;
+    f.value = { ...f.value, zIndex: q }, W(0, C), p.value = !1;
+  }
+  function b(C) {
+    C.stopPropagation();
+    const q = ne(), P = F(), Q = z(), ae = T(), oe = ye(
+      q,
+      Q,
+      ae,
+      P
+    ), de = B.value;
+    if (!ee.value)
+      return oe === Ae ? fe() : te();
+    if (oe === Ee)
+      return te();
+    if (oe === ve)
+      return de === Ee ? te() : fe();
+    if (oe === Ae)
+      return de === ve ? fe() : re();
+  }
+  function N({ height: C }) {
+    console.log("appResize height", C), C !== 0 && (f.value = { ...f.value, top: C + "px !important" });
+  }
+  function H({ height: C }) {
+    n.currentModel.value !== e.name || C === 0 || we(() => te());
+  }
+  function U({ height: C }) {
+    const q = ne(), P = F(), Q = z(), ae = T(), oe = ye(
+      q,
+      Q,
+      ae,
+      P
+    );
+    n.currentModel.value !== e.name || oe !== ve || we(() => re());
+  }
+  function j(C) {
+    C.stopPropagation(), n.updateModel({
+      name: ke,
+      setCurrent: !0,
+      skipEmit: !1
+    }), p.value = !1;
+  }
+  function W(C, q = !0) {
+    if (C === ne()) return;
+    const P = `translateY(${C}px)`;
+    f.value = { ...f.value, transform: P };
+  }
+  function ne() {
+    var Q;
+    if (!((Q = s.value) != null && Q.$el)) return;
+    const q = getComputedStyle(s.value.$el).transform.match(/^matrix.*\((.+)\)$/);
+    if (!q) return 0;
+    const P = q[1].split(", ");
+    return parseFloat(P[5]) || 0;
+  }
+  const ue = {
+    name: u(() => e.name),
+    rootRef: h,
+    tabIndicatorRef: m
+  };
+  _n(() => {
+    V(!1);
+  }), Me(() => {
+    t.$off("resize"), V(!1), n.unregisterDrawer(ue);
+  }), J(() => {
+    t.$on("resize", N), n.registerDrawer(ue), we(() => {
+      setTimeout(() => {
+        E(), f.value = { ...f.value, top: o.screen.height + "px" }, console.log("screen height", o.screen.height), k.value === e.name && (ee.value ? ze() : te());
+      }, 50);
+    });
+  }), ce(
+    () => k.value,
+    (C, q) => {
+      console.log("watch currentModel", C, q), !(C === e.name && q === e.name) && (C === e.name && te(), q === e.name && V());
+    }
+  );
+  function tn() {
+    return r(
+      Re,
+      { class: "c-draggable-drawer__handler--horizontal row flex-center q-pt-sm q-pb-md sectional section-handle", ref: c, onClick: b },
+      () => r("div", { class: "cursor-grab grab" })
+    );
+  }
+  function nn() {
+    if (e.name === ke || !e.label)
+      return null;
+    const C = {
+      ref: i,
+      class: "q-px-md q-pb-sm q-pt-none sectional section-detail",
+      onClick: b
+    }, q = {
+      class: "row justify-between"
+    }, P = {
+      class: "section-title"
+    }, Q = {
+      class: "text-subtitle2 col-shrink"
+    }, ae = {
+      round: !0,
+      icon: "close",
+      size: "sm",
+      onClick: j,
+      style: "margin-top: -5px"
+    };
+    return r(Re, C, () => [
+      r("div", q, [
+        r("div", P, e.label),
+        r("div", Q, [r(he, ae)])
+      ])
+    ]);
+  }
+  function an() {
+    const C = {
+      class: "c-draggable-drawer__content",
+      ref: v,
+      style: u(() => $.value),
+      onClick: (P) => P.preventDefault(),
+      onTouch: (P) => P.preventDefault(),
+      onScroll: (P) => P.stopPropagation()
+    }, q = [];
+    if (a.default) {
+      const P = {
+        class: "q-px-md q-pb-sm q-pt-none sectional section-primary",
+        ref: l
+      }, Q = a.default ? a.default() : [], ae = { debounce: 0, onResize: H };
+      q.push(
+        r(Re, P, {
+          default: () => [r(Xe, ae), ...Q]
+        })
+      );
+    }
+    if (a.secondary) {
+      const P = {
+        class: "sectional section-secondary display-block",
+        ref: d
+      }, Q = a.secondary ? a.secondary() : [], ae = {
+        debounce: 0,
+        onResize: U
+      };
+      q.push(
+        r(Re, P, {
+          default: () => [r(Xe, ae), ...Q]
+        })
+      );
+    }
+    return r("div", C, q);
+  }
+  function on() {
+    const C = [];
+    C.push(tn()), C.push(nn()), C.push(an());
+    const P = {
+      ref: s,
+      class: "c-draggable-drawer column no-wrap ",
+      style: f.value,
+      "data-name": e.name,
+      "data-cy": "c-draggable-drawer-" + e.name,
+      role: "draggableDrawer"
+    };
+    return r(gn, P, () => C);
+  }
+  function ln() {
+    return R(on(), [
+      [vn, K, "vertical", { mouse: !0, prevent: !0 }]
+      //v-touch-pan.mouse.vertical.prevent="dragDrawer"
+    ]);
+  }
+  return { renderDrawer: ln, $drawers: n };
+}
+const ga = M({
+  name: "CDraggableDrawer",
+  props: fa,
+  emits: ua,
+  setup(e, { slots: a, emit: n }) {
+    const { renderDrawer: t } = va(e, a);
+    return () => t();
+  }
+}), Ft = M({
+  name: "CDraggableDrawers",
+  props: {
+    align: {
+      type: String,
+      default: "center",
+      validator(e, a) {
+        return ["center", "left", "right"].includes(e);
+      }
+    },
+    dark: Boolean,
+    modelValue: { type: Number, default: 0 },
+    "onUpdate:modelValue": [Function, Array],
+    maxWidth: {
+      type: [Number, String],
+      default: 400
+    }
+  },
+  setup(e, { slots: a, emit: n }) {
+    const t = y(null), o = y(e.modelValue), s = [], c = y(0), i = u(() => ({
+      "c-draggable-drawers": !0,
+      dark: e.dark
+    })), l = u(
+      () => typeof e.maxWidth == "string" ? e.maxWidth : e.maxWidth + "px"
+    ), d = u(() => {
+      const p = { maxWidth: l.value };
+      return e.align === "center" && (p.left = "50%", p.transform = "translateX(-50%)"), e.align === "left" && (p.left = "10px"), e.align === "right" && (p.right = "10px"), p;
+    }), m = u(() => {
+      const p = c.value, B = o.value;
+      for (let $ = 0; $ < p; $++)
+        if (s[$].name.value === B)
+          return !0;
+      return !1;
+    });
+    function v(p) {
+      s.push(p), c.value++;
+    }
+    function h(p) {
+      s.splice(s.indexOf(p), 1), c.value--;
+    }
+    const k = {
+      currentModel: o,
+      hasActiveTab: m.value,
+      registerDrawer: v,
+      unregisterDrawer: h,
+      updateModel: f
+    };
+    cn(Ut, k), ce(
+      () => e.modelValue,
+      (p) => {
+        f({ name: p, setCurrent: !0, skipEmit: !1 });
+      }
+    );
+    function f({ name: p, setCurrent: B = !0, skipEmit: $ = !0 }) {
+      o.value !== p && ($ !== !0 && e["onUpdate:modelValue"] !== void 0 && n("update:modelValue", p), (B === !0 || e["onUpdate:modelValue"] === void 0) && (o.value = p));
+    }
+    Me(() => {
+    }), At(() => {
+    }), J(() => {
+    });
+    function w() {
+      return r(
+        "div",
+        {
+          ref: t,
+          class: i.value,
+          role: "draggableDrawers",
+          style: d.value
+        },
+        {
+          default: a.default
+        }
+      );
+    }
+    return () => w();
+  }
+}), jt = M({
+  name: "CResponsiveLayout",
+  props: {
+    modelValue: Boolean,
+    side: {
+      type: String,
+      default: "left"
+    },
+    dark: Boolean,
+    overlayTransparent: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const t = u({
+      get: () => e.modelValue,
+      set: (c) => n("update:modelValue", c)
+    }), o = u(() => ({
+      "overlay-transparent": e.overlayTransparent,
+      dark: e.dark,
+      "text-white": e.dark
+    }));
+    function s() {
+      const c = {
+        class: o.value + " c-drawer",
+        bordered: !0,
+        dark: !0,
+        noSwipeBackdrop: e.overlayTransparent,
+        elevated: !0,
+        showIfAbove: !1,
+        side: e.side,
+        noSwipeOpen: !0,
+        modelValue: t.value,
+        "onUpdate:modelValue": (i) => t.value = i
+      };
+      return r(bn, c, () => (a == null ? void 0 : a.default()) || []);
+    }
+    return () => s();
+  }
+}), ba = { class: "c-duration-button-duration" }, ha = { class: "c-duration-button-unit" }, ya = {
+  __name: "CDurationButton",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    // standard disable
+    disabled: Boolean,
+    duration: Number,
+    large: Boolean,
+    selected: Boolean,
+    unit: String
+  },
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    const n = a, t = () => n("click");
+    return (o, s) => {
+      const c = A("q-btn");
+      return _(), L(c, {
+        class: Y(["c-duration-button", { selected: e.selected, disabled: e.disabled, dark: e.dark }]),
+        "no-ripple": e.disabled,
+        disable: e.disable,
+        unelevated: "",
+        "no-caps": "",
+        outline: "",
+        round: "",
+        onClick: t
+      }, {
+        default: S(() => [
+          x("div", null, [
+            x("span", ba, be(e.duration), 1),
+            s[0] || (s[0] = x("br", null, null, -1)),
+            x("span", ha, be(e.unit), 1)
+          ])
+        ]),
+        _: 1
+      }, 8, ["class", "no-ripple", "disable"]);
+    };
+  }
+}, ka = M({
+  name: "CExpansion",
+  props: {
+    color: {
+      default: "primary",
+      type: String
+    },
+    icon: String,
+    label: String,
+    locked: Boolean,
+    selected: Boolean,
+    group: {
+      default: "category",
+      type: String
+    },
+    modelValue: Boolean,
+    defaultOpened: Boolean
+  },
+  emits: ["click", "update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    u(() => e.locked ? Je : je);
+    const t = u(() => ({
+      "c-expansion": !0,
+      selected: e.selected,
+      primary: e.color === "primary" && !e.locked,
+      negative: e.color === "negative" && !e.locked,
+      positive: e.color === "positive" && !e.locked,
+      locked: e.locked,
+      "non-selectable": !0
+    })), o = u({
+      get: () => e.modelValue,
+      set: (c) => n("update:modelValue", c)
+    });
+    function s() {
+      const c = {
+        modelValue: o.value,
+        "onUpdate:modelValue": (i) => o.value = i,
+        icon: e.icon || Je,
+        class: t.value,
+        caption: e.caption,
+        label: e.label,
+        group: e.group,
+        expandIcon: Lt,
+        defaultOpened: e.defaultOpened,
+        "data-cy": "c-expansion-" + Ce(e.label)
+      };
+      return r(Ke, c, { default: () => {
+        var i;
+        return (i = a.default) == null ? void 0 : i.call(a);
+      } });
+    }
+    return () => s();
+  }
+}), pa = {
+  __name: "CExpansionItem",
+  props: {
+    color: {
+      default: "primary",
+      type: String
+    },
+    label: String,
+    locked: Boolean,
+    selected: Boolean,
+    group: {
+      default: "category",
+      type: String
+    },
+    modelValue: Boolean,
+    defaultOpened: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: a, emit: n }) {
+    a(Ke);
+    const t = e, o = n, s = u(() => t.locked ? Je : je), c = u({
+      get() {
+        return t.modelValue;
+      },
+      set(l) {
+        o("update:modelValue", l);
+      }
+    }), i = u(() => ({
+      selected: t.selected,
+      primary: t.color === "primary" && !t.locked,
+      negative: t.color === "negative" && !t.locked,
+      positive: t.color === "positive" && !t.locked,
+      locked: t.locked
+    }));
+    return (l, d) => (_(), L(Z(Ke), {
+      class: Y(["c-expansion-item", i.value]),
+      label: e.label,
+      group: e.group,
+      "expand-icon": Z(Lt),
+      icon: s.value,
+      modelValue: c.value,
+      "onUpdate:modelValue": d[0] || (d[0] = (m) => c.value = m),
+      "default-opened": e.defaultOpened
+    }, {
+      default: S(() => [
+        I(l.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "label", "group", "expand-icon", "icon", "modelValue", "default-opened"]));
+  }
+}, Wt = M({
+  name: "CResponsiveLayout",
+  props: {
+    show: Boolean,
+    icon: String,
+    backgroundColor: {
+      default: "#0087ff",
+      type: String
+    },
+    color: {
+      default: "#ffffff",
+      type: String
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    const n = u(() => e.icon ? e.icon : zt), t = u(() => ({
+      color: e.color,
+      backgroundColor: e.backgroundColor
+    })), o = () => a("click");
+    function s() {
+      return R(
+        r(
+          hn,
+          {
+            position: "bottom-right",
+            offset: [18, 18],
+            style: "z-index: 12; transform: translate(0, 0)"
+          },
+          () => r(he, {
+            class: "c-fab",
+            onClick: o,
+            fab: !0,
+            icon: n.value,
+            unelevated: !0,
+            round: !0,
+            style: t.value
+          })
+        ),
+        [[O, e.show]]
+      );
+    }
+    return () => s();
+  }
+}), wa = M({
+  name: "CFloatingModal",
+  props: {
+    modelValue: Boolean,
+    "onUpdate:modelValue": [Function, Array],
+    label: { type: String, required: !1 },
+    width: {
+      type: Number,
+      default: 360
+    },
+    topOffset: {
+      type: Number,
+      default: 40
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const t = Ve(), o = lt(), s = y(!1), c = u({
+      get: () => e.modelValue,
+      set: (v) => n("update:modelValue", v)
+    }), i = () => {
+      s.value = !s.value;
+    }, l = y(80), d = (v) => {
+      l.value = v.height - e.topOffset;
+    };
+    J(() => {
+      l.value = t.screen.height - e.topOffset, o.$on("resize", d);
+    }), Me(() => o.$off("resize"));
+    function m() {
+      const v = u(() => ({
+        maxHeight: `${l.value}px`,
+        maxWidth: `${e.width}px`
+      })), h = {
+        class: "c-floating-modal",
+        modelValue: c.value,
+        "onUpdate:modelValue": (B) => c.value = B,
+        style: v.value
+      }, f = {
+        class: "c-floating-modal-toggle",
+        size: "sm",
+        round: !0,
+        icon: u(
+          () => s.value ? "f_chevron_down" : "f_chevron_up"
+        ).value,
+        onClick: i
+      }, w = {
+        class: "c-floating-modal-default"
+      }, p = { class: "c-floating-modal-expanded" };
+      return r(
+        ie,
+        { name: "fade" },
+        {
+          default: () => R(
+            r("div", h, [
+              ...a.expanded ? [r(he, f)] : [],
+              ...a.default ? [r("div", w, a.default())] : [],
+              ...a.expanded ? [
+                r(st, null, {
+                  default: () => R(
+                    r("div", p, a.expanded()),
+                    [[O, s.value]]
+                  )
+                })
+              ] : []
+            ]),
+            [[O, c.value]]
+          )
+        }
+      );
+    }
+    return () => m();
+  }
+}), Ca = {
+  __name: "CHorizontalScroller",
+  props: {
+    fullHeight: Boolean,
+    reset: {
+      type: Boolean,
+      default: !0
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  setup(e) {
+    const { $on: a } = lt(), n = e, t = y(null), o = y(null), s = y(null), c = y(0), i = y(!1), l = y(null), d = y(null), m = y(void 0), v = y(0), h = y(0), k = y(void 0);
+    let f, w;
+    const p = () => {
+      if (!t.value || !o.value) return;
+      const V = Pe.newRectFromElement(t.value), b = Pe.newRectFromElement(o.value);
+      return !t.value || b.width >= V.width ? !1 : {
+        valid: !0,
+        inner: t.value,
+        left: V.left - b.left,
+        width: V.width - b.width
+      };
+    }, B = ({ inner: V, left: b, width: N }, H) => {
+      if (b = b - H, b < -N) {
+        V.style.left = -N + "px";
+        return;
+      }
+      if (b >= 0) {
+        V.style.left = "0px";
+        return;
+      }
+      V.style.left = b + "px";
+    }, $ = () => {
+      !i.value || !t.value || !o.value || (g(), E());
+    }, E = () => {
+      if (!t.value || !o.value) return;
+      const V = Pe.newRectFromElement(t.value), b = Pe.newRectFromElement(o.value);
+      if (c.value = V.left - b.left, V.width === 0 || b.width < V.width) {
+        if (V.left === 0) return;
+        T({
+          left: 0,
+          duration: 300
+        });
+        return;
+      }
+      F();
+      const N = (b.width - V.width) / 2;
+      T({
+        left: N,
+        duration: 300
+      });
+    }, g = () => {
+      n.fullHeight || !t.value || !s.value || s.value && t.value && t.value.children.length > 0 && (s.value.style.height = t.value.children[0].scrollHeight + "px");
+    }, z = (V) => {
+      t.value && (t.value.style.left = V + "px");
+    }, T = ({ left: V = 0, duration: b = 1e3 }) => {
+      if (!t.value) return;
+      F();
+      let N = { left: c.value }, H = { left: V };
+      l.value = new ge.Tween(N).to(H, b).delay(0).easing(ge.Easing.Quadratic.Out).onUpdate(function(U) {
+        const j = parseInt(U.left);
+        z(j);
+      }).onComplete(function(U) {
+        const j = parseInt(U.left);
+        window.cancelAnimationFrame(d.value), d.value = null, z(j);
+      }).start(), G();
+    }, G = (V) => {
+      d.value = window.requestAnimationFrame(G), ge.update(V);
+    }, F = () => {
+      l.value && l.value.stop && (l.value.stop(), l.value = null);
+    }, ee = (V) => {
+      if (V = V.srcEvent || V, !(V && (V.wheelDelta || V.deltaX))) return;
+      const N = V.deltaX, H = V.deltaY, U = 2;
+      if ((H > U || H < -U) && N === 0 || V.ctrlKey)
+        return;
+      V.preventDefault();
+      const j = p();
+      j && B(j, N);
+    }, K = (V) => {
+      const b = p();
+      b && B(b, V);
+    }, ye = () => {
+      m.value = void 0, k.value = void 0, v.value = 0, h.value = 0;
+    }, De = (V) => {
+      const b = V.center.x - m.value.x;
+      b !== 0 && (m.value = V.center, K(-b));
+    }, fe = (V) => {
+      m.value = V.center;
+    }, te = (V) => {
+      const b = Math.abs(V.velocityX);
+      if (b <= 0.02) return;
+      const N = V.distance, H = V.direction === 2 ? -1 : 1, U = p(), j = U.left;
+      c.value = j;
+      const W = -U.width, ne = 0;
+      let ue = j + H * N * b;
+      j === W && V.direction === 2 || j === ne && V.direction === 4 || (ue = ue < W ? W : ue, ue = ue > 0 ? 0 : ue, T({ left: ue }));
+    }, re = (V) => F();
+    ce(() => t.value, (V) => g());
+    const ze = () => {
+      f || (f = new Mt(s.value, {
+        recognizers: [
+          [Hammer.Tap],
+          [Hammer.Pan, { pointers: 0 }],
+          [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }]
+        ]
+      }), w = f.manager, f.on({
+        swipe: te,
+        // swipeleft: onSwipe,
+        // swiperight: onSwipe,
+        panstart: fe,
+        panend: ye,
+        panmove: De,
+        wheel: ee,
+        tap: re,
+        pointerdown: re
+      }), E(), we(() => {
+        const V = { passive: !0 };
+        s.value && (s.value.addEventListener("touchstart", F, V), s.value.addEventListener("mousedown", F, V));
+        try {
+          const b = w.get("tap");
+          b && b.set({
+            enable: !0
+          });
+        } catch {
+        }
+        try {
+          const b = w.get("swipe");
+          b && b.recognizeWith("pan");
+        } catch {
+        }
+        g(), E();
+      }), a("resize", $));
+    };
+    return J(() => {
+      i.value = !0;
+      try {
+        we(() => {
+          ze();
+        });
+      } catch {
+      }
+    }), Me(() => i.value = !1), (V, b) => {
+      const N = A("q-resize-observer");
+      return _(), se("div", {
+        class: Y(["c-horizontal-scroller", { "full-height": e.fullHeight }]),
+        ref_key: "slider",
+        ref: s
+      }, [
+        e.reset ? (_(), L(N, {
+          key: 0,
+          onResize: $,
+          debounce: 10
+        })) : le("", !0),
+        x("div", {
+          class: "c-horizontal-scroller-outer",
+          ref_key: "outer",
+          ref: o
+        }, [
+          x("div", {
+            class: Y(["c-horizontal-scroller-inner", "q-px-" + e.size]),
+            ref_key: "inner",
+            ref: t
+          }, [
+            D(N, { onResize: $ }),
+            I(V.$slots, "default")
+          ], 2)
+        ], 512)
+      ], 2);
+    };
+  }
+}, Ba = (e, a, n) => {
+  const t = e[a];
+  return t ? typeof t == "function" ? t() : Promise.resolve(t) : new Promise((o, s) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      s.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + a + (a.split("/").length !== n ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, X = (e = "../i18n") => {
+  const a = Ve(), n = y({}), t = u(() => a.lang.isoName || "en-US"), o = async () => {
+    try {
+      const s = (await Ba(/* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-DNFPxUoa.js") }), `../i18n/${t.value}/index.js`, 4)).default;
+      s && Object.assign(n.value, s);
+    } catch (s) {
+      console.error(`Error loading i18n for ${t.value}`, s);
+    }
+  };
+  return ce(
+    () => t.value,
+    () => {
+      o();
+    },
+    { immediate: !0 }
+    // Run immediately on initialization
+  ), rn(() => {
+    o();
+  }), { lang: n };
+}, Va = M({
+  name: "CIconButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean,
+    name: { type: String, required: !0 },
+    icon: String,
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "lg"].includes(e)
+    }
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = u(() => {
+      var d;
+      if (e.name && t.value.controls && t.value.controls[e.name])
+        return e.name && ((d = t.value.controls[e.name]) == null ? void 0 : d.iconTitle);
+    }), s = u(() => e.icon || `f_${e.name}`), c = (d) => n("blockAccess", d), i = () => n("click");
+    function l() {
+      const d = {
+        class: `c-button c-icon-button c-${e.name}-button`,
+        hasAccess: e.hasAccess || !0,
+        icon: s.value,
+        label: o.value,
+        selected: e.selected,
+        size: e.size,
+        onClick: i,
+        onBlockAccess: c
+      };
+      return r(We, d, () => []);
+    }
+    return () => l();
+  }
+}), xa = ["innerHTML"], Da = {
+  __name: "CItemHeading",
+  props: {
+    heading: String
+  },
+  setup(e) {
+    return (a, n) => (_(), se("div", {
+      class: "c-item-heading row full-width q-py-sm unselectable",
+      innerHTML: e.heading
+    }, null, 8, xa));
+  }
+}, Qt = M({
+  name: "CMenuButton",
+  emits: ["click"],
+  setup(e, { slots: a, emit: n }) {
+    var i;
+    const { lang: t } = X(), o = y(((i = t.value.controls) == null ? void 0 : i.menu.title) || "MENU"), c = {
+      clas: "c-menu-button darkable q-pl-xs q-pr-sm",
+      onClick: () => n("click"),
+      dense: !0,
+      flat: !0,
+      icon: ct,
+      label: o.value,
+      rounded: !0,
+      style: "background-color: #ffffff;padding-right: 15px;padding-left: 10px"
+    };
+    return J(() => {
+      var l;
+      o.value = ((l = t.value.controls) == null ? void 0 : l.menu.title) || "MENU";
+    }), () => r(he, c);
+  }
+}), Gt = M({
+  name: "CNavigator",
+  props: {
+    dark: Boolean,
+    debug: {
+      type: Boolean,
+      default: !1
+    },
+    height: {
+      type: Number,
+      default: 0
+    },
+    knobSize: {
+      type: Number,
+      default: 70
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    show: {
+      type: Boolean,
+      default: !0
+    },
+    text: {
+      type: String,
+      default: "move"
+    },
+    title: {
+      type: String,
+      default: "Move"
+    },
+    value: {
+      type: Object,
+      default: { x: 0, y: 0 }
+    }
+  },
+  emits: ["input"],
+  setup(e, { slots: a, emit: n }) {
+    let t;
+    const o = y(null), s = y(null), c = y(null), i = y(null), l = y(!1), d = y(0), m = y(0), v = y(null), h = y(null), k = y(0), f = y(0), w = u(() => e.knobSize * 0.8 + "px"), p = u(() => {
+      const b = e.knobSize + "px", N = -e.knobSize / 2 + "px";
+      return {
+        width: b,
+        height: b,
+        lineHeight: "62px",
+        transform: "translateY(" + N + ") translateX(" + N + ")"
+      };
+    }), B = u(() => e.height === 0 || e.width === 0 ? {
+      bottom: 0,
+      right: 0,
+      zIndex: 1e8
+    } : {
+      height: e.height + "px",
+      width: e.width + "px",
+      zIndex: 1e8
+    });
+    ce(
+      () => e.show,
+      (b) => {
+        showKnob.value = b, $();
+      }
+    );
+    function $() {
+      m.value = e.width ? e.width : o.value.offsetWidth, d.value = e.height ? e.height : o.value.offsetHeight, T();
+    }
+    function E() {
+      n("input", { x: k.value, y: f.value });
+    }
+    const g = (b, N) => (b < N ? -1 : 1) * Math.ceil(1), z = (b) => {
+      const N = o.value.getBoundingClientRect();
+      let H = b.x - N.left;
+      const U = e.knobSize / 2 + 1, j = N.width - U + 2;
+      H = H < U ? U : H, H = H > j ? j : H;
+      let W = b.y - N.top;
+      const ne = N.height - U + 2;
+      return W = W < U ? U : W, W = W > ne ? ne : W, {
+        x: H,
+        y: W
+      };
+    };
+    function T() {
+      if (!s.value) return;
+      const b = G();
+      Object.assign(s.value.style, b);
+    }
+    function G() {
+      return {
+        top: d.value / 2 - 0 + "px",
+        left: m.value / 2 - 0 + "px"
+      };
+    }
+    function F() {
+      var H, U;
+      if (!s.value) return;
+      l.value = !0;
+      const b = {
+        top: (H = s.value) == null ? void 0 : H.offsetTop,
+        left: (U = s.value) == null ? void 0 : U.offsetLeft
+      }, N = G();
+      K(), h.value = new ge.Tween(b).to(N, 150).delay(0).easing(ge.Easing.Quadratic.Out).onUpdate(function(j) {
+        Object.assign(s.value.style, {
+          top: j.top + "px",
+          left: j.left + "px"
+        });
+      }).onComplete(function() {
+        l.value = !1, window.cancelAnimationFrame(i.value), k.value = 0, f.value = 0, E();
+      }).start(), ee();
+    }
+    const ee = (b) => {
+      i.value = window.requestAnimationFrame(ee), ge.update(b);
+    };
+    function K() {
+      h.value && h.value.stop && (h.value.stop(), h.value = null);
+    }
+    const ye = (b) => {
+      if (b.srcEvent.stopPropagation(), b.srcEvent.stopImmediatePropagation(), l.value) return;
+      const N = {
+        x: m.value / 2,
+        y: d.value / 2
+      }, H = b.center, U = o.value.getBoundingClientRect(), j = { top: H.y - U.top, left: H.x - U.left }, W = 15;
+      if (j.top < W || j.top > U.height - W || j.left < W || j.left > U.width - W) {
+        F(), clearInterval(v.value), v.value = null;
+        return;
+      }
+      const ne = z(H);
+      s.value.style.left = ne.x - 1 + "px", s.value.style.top = ne.y - 1 + "px", k.value = g(ne.x, N.x), f.value = g(ne.y, N.y);
+    };
+    function De(b) {
+      b.srcEvent.stopPropagation(), b.srcEvent.stopImmediatePropagation(), F(), clearInterval(v.value), v.value = null;
+    }
+    function fe(b) {
+      b.srcEvent.stopPropagation(), b.srcEvent.stopImmediatePropagation(), F(), clearInterval(v.value), v.value = null;
+    }
+    function te(b) {
+      b.srcEvent.stopPropagation(), b.srcEvent.stopImmediatePropagation(), k.value = 0, f.value = 0, v.value && clearInterval(v.value), v.value = setInterval(E, 20);
+    }
+    function re() {
+      t || (t = new Mt(o.value, {
+        recognizers: [[Hammer.Pan, { pointers: 0 }]]
+      }), t.manager, t.on({
+        panstart: te,
+        panend: fe,
+        panmove: ye,
+        touchend: De,
+        touchleave: De
+      }));
+    }
+    J(() => {
+      $();
+      try {
+        we(() => {
+          re(), we(() => {
+            console.log("knobRef", s.value);
+          });
+        });
+      } catch {
+      }
+    });
+    function ze() {
+      const b = [];
+      return e.title && b.push(
+        r("div", { class: "c-navigator-title unselectable" }, e.title)
+      ), b.push(r(Xe, { onResize: $ })), e.debug && (b.push(r("div", { class: "verticalBar" })), b.push(r("div", { class: "horizontalBar" }))), b.push(
+        r(
+          "div",
+          {
+            class: "c-navigator",
+            ref: c,
+            style: B.value
+          },
+          r(
+            "div",
+            {
+              class: "c-navigator-knob noselect",
+              ref: s,
+              style: p.value
+            },
+            r(qe, { name: Dn, size: w.value })
+          )
+        )
+      ), b;
+    }
+    function V() {
+      const N = {
+        class: ["c-navigator-hitarea", e.dark && "dark"],
+        ref: o,
+        style: B.value
+      };
+      return r(
+        ie,
+        { name: "fade" },
+        () => R(r("div", N, ze()), [[O, e.show]])
+      );
+    }
+    return () => V();
+  }
+}), Sa = M({
+  name: "COverlayLoader",
+  props: {
+    progress: { type: Number, default: 0 },
+    // 0–100
+    size: { type: String, default: "100px" },
+    overlayColor: { type: String, default: "rgba(0, 0, 0, 0.4)" },
+    fade: { type: Boolean, default: !0 }
+  },
+  setup(e, { slots: a, emit: n }) {
+    const { progress: t } = un(e), o = u(() => {
+      let w = 1;
+      return e.fade && (t.value <= 10 ? w = t.value / 5 : t.value >= 90 ? w = (100 - t.value) / 10 : w = 1), {
+        opacity: w,
+        transition: "opacity 0.4s ease"
+      };
+    }), s = u(() => {
+      const p = Math.min(100, Math.max(0, t.value)) / 100 * 360;
+      if (p === 0) return "";
+      const B = 50, $ = -90, E = $ + p, g = c(B, B, B, E), z = c(B, B, B, $), T = p > 180 ? 1 : 0;
+      return [
+        `M ${B} ${B}`,
+        // Move to center
+        `L ${z.x} ${z.y}`,
+        // Line to start
+        `A ${B} ${B} 0 ${T} 1 ${g.x} ${g.y}`,
+        // Arc to end
+        "Z"
+        // Close path
+      ].join(" ");
+    });
+    function c(w, p, B, $) {
+      const E = $ * Math.PI / 180;
+      return {
+        x: w + B * Math.cos(E),
+        y: p + B * Math.sin(E)
+      };
+    }
+    const i = u(() => ({ width: e.size, height: e.size })), l = u(() => ({
+      class: "c-overlay-loader",
+      style: i.value
+    })), d = u(() => ({
+      class: "c-overlay-loader-overlay",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "xMidYMid meet",
+      style: o.value
+    })), m = { cx: 50, cy: 50, r: 50, fill: "white" }, v = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      fill: "white"
+    }, h = u(() => ({
+      ...v,
+      fill: e.overlayColor,
+      mask: "url(#pie-mask)"
+    })), k = u(() => ({
+      d: s.value,
+      fill: "black"
+    }));
+    function f() {
+      var w;
+      return r("div", l.value, [
+        r(
+          "div",
+          { class: "c-overlay-loader-content" },
+          ((w = a.default) == null ? void 0 : w.call(a)) || []
+        ),
+        r("svg", d.value, [
+          r("defs", {}, [
+            r("mask", { id: "pie-mask" }, [
+              r("circle", m),
+              r("path", k.value)
+            ])
+          ]),
+          r("rect", h.value)
+        ])
+      ]);
+    }
+    return () => f();
+  }
+}), Aa = {
+  key: 0,
+  class: "c-rect-button-image unselectable"
+}, _a = ["src"], $a = {
+  key: 1,
+  class: "c-rect-button-label unselectable"
+}, qa = {
+  __name: "CRectButton",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    // standard disable
+    disabled: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    image: String,
+    // allow you to still process click event
+    label: String,
+    lock: Boolean,
+    selected: Boolean
+  },
+  emits: ["click", "locked", "blockAccess"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = () => {
+      if (n.hasAccess) {
+        t("click");
+        return;
+      }
+      t("blockAccess", n.access);
+    };
+    return (s, c) => {
+      const i = A("q-btn");
+      return _(), L(i, {
+        class: Y(["c-rect-button", { selected: e.selected, disabled: e.disabled, dark: e.dark, lock: e.lock }]),
+        "no-ripple": e.disabled,
+        disable: e.disable,
+        round: "",
+        outline: "",
+        flat: "",
+        unelevated: "",
+        "no-caps": "",
+        icon: e.icon,
+        onClick: o
+      }, {
+        default: S(() => [
+          e.image ? (_(), se("div", Aa, [
+            x("img", {
+              src: e.image,
+              class: "unselectable"
+            }, null, 8, _a)
+          ])) : le("", !0),
+          e.label ? (_(), se("span", $a, be(e.label), 1)) : le("", !0)
+        ]),
+        _: 1
+      }, 8, ["class", "no-ripple", "disable", "icon"]);
+    };
+  }
+}, Yt = M({
+  name: "CResponsiveLayout",
+  props: {
+    modelValue: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    y(null), y(null);
+    const t = u({
+      get: () => e.modelValue,
+      set: (s) => n("update:modelValue", s)
+    });
+    function o() {
+      const s = [
+        r(
+          "div",
+          { class: "c-right-drawer-container", ref: "containerRef" },
+          r(
+            ie,
+            { name: "fade" },
+            () => {
+              var c;
+              return r(
+                "div",
+                { class: "c-right-drawer-container-default" },
+                ((c = a.default) == null ? void 0 : c.call(a)) || []
+              );
+            }
+          )
+        )
+      ];
+      return r(
+        yn,
+        {
+          class: "c-right-drawer",
+          "full-height": !0,
+          position: "right",
+          dark: !0,
+          seamless: !0,
+          square: !0,
+          modelValue: t.value,
+          "onUpdate:modelValue": (c) => t.value = c,
+          ref: "dialogRef"
+        },
+        () => s
+      );
+    }
+    return () => o();
+  }
+}), Ta = { class: "c-round-button-holder" }, za = { class: "c-round-button-image unselectable" }, Ia = ["src"], La = {
+  key: 0,
+  class: "c-round-button-label unselectable"
+}, Te = {
+  __name: "CRoundButton",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    // standard disable
+    disabled: Boolean,
+    // allow you to still process click event
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    image: String,
+    label: String,
+    selected: Boolean,
+    show: {
+      default: !0,
+      type: Boolean
+    }
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = () => {
+      if (n.hasAccess) {
+        t("click");
+        return;
+      }
+      t("blockAccess", n.access);
+    };
+    return (s, c) => {
+      const i = A("q-btn");
+      return _(), L(ie, { name: "expando" }, {
+        default: S(() => [
+          R(x("div", Ta, [
+            D(i, {
+              class: Y(["c-round-button", { selected: e.selected, disabled: e.disabled, dark: e.dark }]),
+              "no-ripple": e.disabled,
+              disable: e.disable,
+              round: "",
+              outline: "",
+              flat: "",
+              unelevated: "",
+              "no-caps": "",
+              icon: e.icon,
+              onClick: o
+            }, {
+              default: S(() => [
+                x("div", za, [
+                  e.image ? (_(), se("img", {
+                    key: 0,
+                    src: e.image,
+                    class: "unselectable"
+                  }, null, 8, Ia)) : le("", !0)
+                ]),
+                e.label ? (_(), se("span", La, be(e.label), 1)) : le("", !0)
+              ]),
+              _: 1
+            }, 8, ["class", "no-ripple", "disable", "icon"])
+          ], 512), [
+            [O, e.show]
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+function tt(e) {
+  var a = typeof e;
+  return e != null && (a == "object" || a == "function");
+}
+var Ma = typeof global == "object" && global && global.Object === Object && global, Na = typeof self == "object" && self && self.Object === Object && self, Zt = Ma || Na || Function("return this")(), Ze = function() {
+  return Zt.Date.now();
+}, Pa = /\s/;
+function Ra(e) {
+  for (var a = e.length; a-- && Pa.test(e.charAt(a)); )
+    ;
+  return a;
+}
+var Oa = /^\s+/;
+function Ea(e) {
+  return e && e.slice(0, Ra(e) + 1).replace(Oa, "");
+}
+var Fe = Zt.Symbol, Xt = Object.prototype, Ha = Xt.hasOwnProperty, Ua = Xt.toString, Ie = Fe ? Fe.toStringTag : void 0;
+function Fa(e) {
+  var a = Ha.call(e, Ie), n = e[Ie];
+  try {
+    e[Ie] = void 0;
+    var t = !0;
+  } catch {
+  }
+  var o = Ua.call(e);
+  return t && (a ? e[Ie] = n : delete e[Ie]), o;
+}
+var ja = Object.prototype, Wa = ja.toString;
+function Qa(e) {
+  return Wa.call(e);
+}
+var Ga = "[object Null]", Ya = "[object Undefined]", Vt = Fe ? Fe.toStringTag : void 0;
+function Za(e) {
+  return e == null ? e === void 0 ? Ya : Ga : Vt && Vt in Object(e) ? Fa(e) : Qa(e);
+}
+function Xa(e) {
+  return e != null && typeof e == "object";
+}
+var Ka = "[object Symbol]";
+function Ja(e) {
+  return typeof e == "symbol" || Xa(e) && Za(e) == Ka;
+}
+var xt = NaN, eo = /^[-+]0x[0-9a-f]+$/i, to = /^0b[01]+$/i, no = /^0o[0-7]+$/i, ao = parseInt;
+function Dt(e) {
+  if (typeof e == "number")
+    return e;
+  if (Ja(e))
+    return xt;
+  if (tt(e)) {
+    var a = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = tt(a) ? a + "" : a;
+  }
+  if (typeof e != "string")
+    return e === 0 ? e : +e;
+  e = Ea(e);
+  var n = to.test(e);
+  return n || no.test(e) ? ao(e.slice(2), n ? 2 : 8) : eo.test(e) ? xt : +e;
+}
+var oo = "Expected a function", lo = Math.max, so = Math.min;
+function Qe(e, a, n) {
+  var t, o, s, c, i, l, d = 0, m = !1, v = !1, h = !0;
+  if (typeof e != "function")
+    throw new TypeError(oo);
+  a = Dt(a) || 0, tt(n) && (m = !!n.leading, v = "maxWait" in n, s = v ? lo(Dt(n.maxWait) || 0, a) : s, h = "trailing" in n ? !!n.trailing : h);
+  function k(T) {
+    var G = t, F = o;
+    return t = o = void 0, d = T, c = e.apply(F, G), c;
+  }
+  function f(T) {
+    return d = T, i = setTimeout(B, a), m ? k(T) : c;
+  }
+  function w(T) {
+    var G = T - l, F = T - d, ee = a - G;
+    return v ? so(ee, s - F) : ee;
+  }
+  function p(T) {
+    var G = T - l, F = T - d;
+    return l === void 0 || G >= a || G < 0 || v && F >= s;
+  }
+  function B() {
+    var T = Ze();
+    if (p(T))
+      return $(T);
+    i = setTimeout(B, w(T));
+  }
+  function $(T) {
+    return i = void 0, h && t ? k(T) : (t = o = void 0, c);
+  }
+  function E() {
+    i !== void 0 && clearTimeout(i), d = 0, t = l = o = i = void 0;
+  }
+  function g() {
+    return i === void 0 ? c : $(Ze());
+  }
+  function z() {
+    var T = Ze(), G = p(T);
+    if (t = arguments, o = this, l = T, G) {
+      if (i === void 0)
+        return f(l);
+      if (v)
+        return clearTimeout(i), i = setTimeout(B, a), k(l);
+    }
+    return i === void 0 && (i = setTimeout(B, a)), c;
+  }
+  return z.cancel = E, z.flush = g, z;
+}
+const co = ["innerHTML"], io = { style: { margin: "0 10px", position: "relative" } }, ro = {
+  key: 0,
+  class: "c-slider-indicator"
+}, xe = {
+  __name: "CSlider",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    initial: Number,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    icon: String,
+    noIcons: Boolean,
+    title: String,
+    max: {
+      type: Number,
+      default: 100
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    modelValue: {
+      type: Number,
+      required: !0
+    }
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = y(null), s = y(et), c = y(null), i = u({
+      get() {
+        return n.modelValue;
+      },
+      set(h) {
+        t("update:modelValue", h);
+      }
+    }), l = u(() => ({
+      left: (n.initial - n.min) / (n.max - n.min) * 100 + "%"
+    })), d = u(() => typeof n.initial < "u"), m = u(() => n.dark ? {
+      color: "rgba(255, 255, 255, 0.6)"
+    } : {
+      color: "#333333"
+    }), v = Qe(
+      () => {
+        t("blockAccess", n.access);
+      },
+      1e3,
+      { leading: !0, trailing: !0 }
+    );
+    return ce(
+      () => n.modelValue,
+      (h) => {
+        !n.hasAccess && h !== o.value && (setTimeout(() => {
+          v();
+        }, 400), setTimeout(() => {
+          t("update:modelValue", o.value);
+        }, 1e3));
+      }
+    ), J(() => {
+      o.value = n.initial ? n.initial : n.modelValue;
+    }), (h, k) => {
+      const f = A("q-icon"), w = A("q-item-section"), p = A("q-slider"), B = A("q-avatar"), $ = A("q-btn"), E = A("q-item");
+      return _(), L(E, {
+        class: Y(["c-slider", { "no-icons": e.noIcons, dark: e.dark }])
+      }, {
+        default: S(() => [
+          !e.noIcons && e.icon ? (_(), L(w, {
+            key: 0,
+            side: "",
+            class: "c-slider-left-icon"
+          }, {
+            default: S(() => [
+              D(f, {
+                name: e.icon,
+                style: pe(m.value),
+                size: "20px"
+              }, null, 8, ["name", "style"])
+            ]),
+            _: 1
+          })) : le("", !0),
+          D(w, { style: { position: "relative" } }, {
+            default: S(() => [
+              e.title ? (_(), se("div", {
+                key: 0,
+                class: "c-slider-title unselectable",
+                innerHTML: e.title
+              }, null, 8, co)) : le("", !0),
+              x("div", io, [
+                D(p, {
+                  ref_key: "slider",
+                  ref: c,
+                  class: "control-bar-slider",
+                  color: "primary",
+                  max: e.max,
+                  min: e.min,
+                  modelValue: i.value,
+                  "onUpdate:modelValue": k[0] || (k[0] = (g) => i.value = g),
+                  disable: e.disable
+                }, null, 8, ["max", "min", "modelValue", "disable"]),
+                d.value ? (_(), se("div", ro, [
+                  x("div", {
+                    class: "c-slider-indicator-tick",
+                    style: pe(l.value)
+                  }, null, 4)
+                ])) : le("", !0)
+              ])
+            ]),
+            _: 1
+          }),
+          d.value && !e.noIcons ? (_(), L(w, {
+            key: 1,
+            side: "",
+            class: "c-slider-right-icon"
+          }, {
+            default: S(() => [
+              D($, {
+                round: "",
+                size: "xs",
+                onClick: k[1] || (k[1] = (g) => i.value = e.initial),
+                style: pe(m.value),
+                disabled: e.initial === i.value,
+                flat: "",
+                "data-cy": `c-slider-reset-${Z(Ce)(e.title)}`
+              }, {
+                default: S(() => [
+                  D(B, { size: "18px" }, {
+                    default: S(() => [
+                      D(f, {
+                        name: s.value,
+                        style: pe(m.value),
+                        size: "20px"
+                      }, null, 8, ["name", "style"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["style", "disabled", "data-cy"])
+            ]),
+            _: 1
+          })) : le("", !0)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+}, uo = {
+  __name: "CToggle",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    drawer: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    labelOff: String,
+    modelValue: Boolean
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = y(null), s = u(() => n.labelOff ? n.modelValue ? n.label : n.labelOff : n.label), c = u({
+      get() {
+        return n.modelValue;
+      },
+      set(l) {
+        t("update:modelValue", l);
+      }
+    }), i = Qe(
+      () => {
+        t("blockAccess", n.access);
+      },
+      1e3,
+      { leading: !0, trailing: !0 }
+    );
+    return ce(
+      () => n.modelValue,
+      (l) => {
+        !n.hasAccess && l !== o.value && (setTimeout(() => {
+          i();
+        }, 400), setTimeout(() => {
+          t("update:modelValue", o.value);
+        }, 1e3));
+      }
+    ), J(() => {
+      o.value = n.modelValue;
+    }), (l, d) => {
+      const m = A("q-item-label"), v = A("q-item-section"), h = A("q-toggle"), k = A("q-item");
+      return _(), L(k, {
+        class: Y(["c-toggle", { full: !e.drawer, dark: e.dark }]),
+        tag: "label",
+        ripple: "",
+        "data-cy": `c-toggle-${Z(Ce)(e.label)}`
+      }, {
+        default: S(() => [
+          D(v, null, {
+            default: S(() => [
+              D(m, { class: "c-toggle-title unselectable" }, {
+                default: S(() => [
+                  at(be(s.value), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          D(v, { side: "" }, {
+            default: S(() => [
+              D(h, {
+                color: "primary",
+                modelValue: c.value,
+                "onUpdate:modelValue": d[0] || (d[0] = (f) => c.value = f),
+                size: "xs",
+                disable: e.disable
+              }, null, 8, ["modelValue", "disable"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["class", "data-cy"]);
+    };
+  }
+}, Kt = M({
+  name: "CToolHeader",
+  props: {
+    label: { type: String, required: !1 }
+  },
+  setup(e, { slots: a, emit: n }) {
+    function t() {
+      return r("div", {
+        class: "c-tool-header text-center q-pa-md"
+      }, e.label);
+    }
+    return () => t();
+  }
+}), _e = {
+  brightness: {
+    icon: mt,
+    access: "bct",
+    min: 50,
+    max: 150,
+    initial: 100
+  },
+  contrast: {
+    icon: dt,
+    access: "cct",
+    min: 50,
+    max: 150,
+    initial: 100
+  },
+  saturate: {
+    icon: ut,
+    access: "sct",
+    min: 50,
+    max: 150,
+    initial: 100
+  },
+  spin: {
+    icon: rt,
+    min: 0,
+    max: 35
+  },
+  zoom: {
+    icon: it,
+    access: "zom",
+    min: 0,
+    max: 100
+  }
+}, mo = M({
+  name: "CBasicTool",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    locked: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    initial: {
+      type: Number,
+      default: 100
+    },
+    modelValue: Number,
+    noIcons: Boolean,
+    type: {
+      type: String,
+      default: "brightness",
+      validator: (e) => Object.keys(_e).includes(e)
+    }
+  },
+  emits: ["blockAccess", "update:modelValue", "lockClicked"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = (k) => n("blockAccess", k), s = u({
+      get: () => e.modelValue,
+      set: (k) => n("update:modelValue", k)
+    }), c = u(() => _e[e.type].access), i = u(() => _e[e.type].icon), l = u(() => _e[e.type].max), d = u(() => _e[e.type].min), m = u(
+      () => _e[e.type].initial || e.initial
+    ), v = u(
+      () => {
+        var k;
+        return e.noIcons ? null : (k = t.value.controls) == null ? void 0 : k[e.type].title;
+      }
+      //   {
+      //   if (props.noIcons) return
+      //   if (lang.value.controls?.[props.type]) {
+      //     return lang.value.controls?.[props.type].title
+      //   }
+      //   // props.noIcons ? null : lang.value.controls?.[props].title || 'No title',
+      // },
+      // props.noIcons ? null : lang.value.controls?.[props].title || 'No title',
+    );
+    function h() {
+      const k = {
+        class: `c-basic-tool c-${e.type}-tool non-draggable`,
+        modelValue: s.value,
+        "onUpdate:modelValue": (f) => s.value = f,
+        access: c.value,
+        color: "primary",
+        icon: i.value,
+        initial: m.value,
+        max: l.value,
+        min: d.value,
+        title: v.value,
+        dark: e.dark,
+        disable: e.disable,
+        hasAccess: e.hasAccess,
+        onBlockAccess: o,
+        "data-cy": "c-basic-tool-" + e.type
+      };
+      return r(xe, k);
+    }
+    return () => h();
+  }
+}), fo = {
+  __name: "CBrightnessButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.brightness.title;
+      }
+    ), i = () => o("click");
+    return (l, d) => (_(), L(Te, {
+      icon: Z(mt),
+      class: "c-brightness-button",
+      label: c.value,
+      selected: e.selected,
+      onClick: i,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "label", "selected", "has-access"]));
+  }
+}, vo = {
+  __name: "CBrightnessTool",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    modelValue: Number,
+    noIcons: Boolean
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u({
+      get: () => t.modelValue,
+      set: (l) => o("update:modelValue", l)
+    }), i = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.brightness.title;
+      }
+    );
+    return (l, d) => (_(), L(xe, {
+      access: "bct",
+      class: "brightness-tool",
+      color: "primary",
+      icon: Z(mt),
+      initial: 100,
+      max: 150,
+      min: 50,
+      title: i.value,
+      "no-icons": e.noIcons,
+      modelValue: c.value,
+      "onUpdate:modelValue": d[0] || (d[0] = (m) => c.value = m),
+      dark: e.dark,
+      disable: e.disable,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "title", "no-icons", "modelValue", "dark", "disable", "has-access"]));
+  }
+}, go = {
+  __name: "CContrastButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.contrast.title;
+      }
+    ), i = () => o("click");
+    return (l, d) => (_(), L(Te, {
+      icon: Z(dt),
+      class: "c-contrast-button",
+      label: c.value,
+      selected: e.selected,
+      onClick: i,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "label", "selected", "has-access"]));
+  }
+}, bo = {
+  __name: "CContrastTool",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    name: String,
+    noIcons: Boolean,
+    modelValue: Number
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u({
+      get: () => t.modelValue,
+      set: (l) => o("update:modelValue", l)
+    }), i = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.contrast.title;
+      }
+    );
+    return (l, d) => (_(), L(xe, {
+      access: "cct",
+      class: "contrast-item",
+      color: "primary",
+      icon: Z(dt),
+      initial: 100,
+      max: 150,
+      min: 50,
+      title: i.value,
+      "no-icons": e.noIcons,
+      modelValue: c.value,
+      "onUpdate:modelValue": d[0] || (d[0] = (m) => c.value = m),
+      dark: e.dark,
+      disable: e.disable,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "title", "no-icons", "modelValue", "dark", "disable", "has-access"]));
+  }
+}, ho = M({
+  name: "CGridButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean,
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "lg"].includes(e)
+    }
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = u(() => {
+      var l;
+      return (l = t.value.controls) == null ? void 0 : l.grid.title;
+    }), s = (l) => n("blockAccess", l), c = () => n("click");
+    function i() {
+      const l = {
+        class: "c-grid-button",
+        hasAccess: e.hasAccess || !0,
+        icon: "f_grid",
+        label: o.value,
+        size: e.size,
+        onClick: c,
+        onBlockAccess: s
+      };
+      return r(We, l, () => []);
+    }
+    return () => i();
+  }
+});
+function St({
+  viewportAxisLength: e,
+  scaledImageAxisLength: a,
+  imageAxisStartInViewport: n,
+  desiredLineCount: t,
+  offsetFractionOfSpacing: o = 0
+}) {
+  if (!(t > 0) || !(a > 0))
+    return {
+      firstVisiblePosition: null,
+      spacingInScreenPixels: 0,
+      positionsInScreenPixels: []
+    };
+  const s = a / (t + 1);
+  let c = n + s;
+  const i = Math.max(
+    -0.5,
+    Math.min(0.5, o || 0)
+  );
+  c += i * s, c = yo(
+    c,
+    s
+  );
+  const l = [], d = Math.ceil(
+    (0 - c) / s
+  );
+  let m = c + d * s;
+  for (; m < e; )
+    m >= 0 && l.push(m), m += s;
+  return {
+    firstVisiblePosition: l[0] ?? null,
+    spacingInScreenPixels: s,
+    positionsInScreenPixels: l
+  };
+}
+function yo(e, a) {
+  if (!(a > 0)) return e;
+  const n = e % a;
+  return n <= 0 ? n : n - a;
+}
+const ko = M({
+  name: "CGridOverlay",
+  props: {
+    imagePoint: {
+      type: Object,
+      default: () => ({ top: 0, left: 0 })
+    },
+    imageSize: {
+      type: Object,
+      default: () => ({ width: 0, height: 0 })
+    },
+    viewportSize: {
+      type: Object,
+      default: () => ({ width: 0, height: 0 })
+    },
+    lines: {
+      type: Number,
+      default: 100
+    },
+    offsetX: {
+      type: Number,
+      default: 0
+    },
+    offsetY: {
+      type: Number,
+      default: 0
+    },
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    stroke: { type: String, default: "#0087ff" },
+    strokeWidth: { type: Number, default: 1 },
+    // optional: customize transition name
+    transitionName: { type: String, default: "fade" }
+  },
+  setup(e, { slots: a, emit: n }) {
+    const t = u(
+      () => St({
+        viewportAxisLength: e.viewportSize.width,
+        scaledImageAxisLength: e.imageSize.width,
+        imageAxisStartInViewport: e.imagePoint.left,
+        desiredLineCount: e.lines,
+        offsetFractionOfSpacing: e.offsetX
+      }).positionsInScreenPixels
+    ), o = u(
+      () => St({
+        viewportAxisLength: e.viewportSize.height,
+        scaledImageAxisLength: e.imageSize.height,
+        imageAxisStartInViewport: e.imagePoint.top,
+        desiredLineCount: e.lines,
+        offsetFractionOfSpacing: e.offsetY
+      }).positionsInScreenPixels
+    );
+    function s() {
+      const c = [
+        ...t.value.map(
+          (d, m) => r("line", {
+            key: `vx-${m}-${d}`,
+            x1: d,
+            y1: 0,
+            x2: d,
+            y2: e.viewportSize.height,
+            stroke: e.stroke,
+            "stroke-width": e.strokeWidth,
+            "shape-rendering": "crispEdges"
+          })
+        ),
+        ...o.value.map(
+          (d, m) => r("line", {
+            key: `hy-${m}-${d}`,
+            x1: 0,
+            y1: d,
+            x2: e.viewportSize.width,
+            y2: d,
+            stroke: e.stroke,
+            "stroke-width": e.strokeWidth,
+            "shape-rendering": "crispEdges"
+          })
+        )
+      ], i = r(
+        "svg",
+        {
+          "data-cy": "c-grid-overlay",
+          width: e.viewportSize.width,
+          height: e.viewportSize.height,
+          style: "position:absolute; inset:0; pointer-events:none;"
+        },
+        c
+      ), l = R(i, [[O, e.visible]]);
+      return r(
+        ie,
+        { name: e.transitionName },
+        { default: () => l }
+      );
+    }
+    return () => s();
+  }
+}), $e = M({
+  name: "CSlider",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    initial: Number,
+    hasAccess: { type: Boolean, default: !0 },
+    icon: String,
+    noIcons: Boolean,
+    title: String,
+    max: { type: Number, default: 100 },
+    min: { type: Number, default: 0 },
+    modelValue: { type: Number, required: !0 }
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const t = y(null);
+    y(et);
+    const o = u({
+      get() {
+        return e.modelValue;
+      },
+      set(h) {
+        n("update:modelValue", h);
+      }
+    }), s = u(() => ({ left: (e.initial - e.min) / (e.max - e.min) * 100 + "%" }));
+    u(() => typeof e.initial < "u");
+    const c = u(() => ({ color: e.dark ? "rgba(255, 255, 255, 0.6)" : "#333333" })), i = Qe(
+      () => {
+        n("blockAccess", e.access);
+      },
+      1e3,
+      { leading: !0, trailing: !0 }
+    );
+    ce(
+      () => e.modelValue,
+      (h) => {
+        !e.hasAccess && h !== t.value && (setTimeout(() => {
+          i();
+        }, 400), setTimeout(() => {
+          n("update:modelValue", t.value);
+        }, 1e3));
+      }
+    ), J(() => {
+      t.value = e.initial ? e.initial : e.modelValue;
+    });
+    function l() {
+      return e.noIcons || !e.icon ? void 0 : r(
+        Le,
+        {
+          side: !0,
+          class: "c-slider-left-icon"
+        },
+        () => r(qe, {
+          name: e.icon,
+          style: c.value,
+          size: "20px"
+        })
+      );
+    }
+    function d() {
+      const h = [];
+      e.title && h.push(
+        r("div", { class: "c-slider-title unselectable" }, e.title)
+      );
+      const k = {
+        class: "control-bar-slider",
+        color: "primary",
+        max: e.max,
+        min: e.min,
+        modelValue: o.value,
+        "onUpdate:modelValue": (p) => o.value = p,
+        disable: e.disable,
+        onPointerdown: (p) => p.stopPropagation(),
+        onMousedown: (p) => p.stopPropagation()
+      }, f = {
+        class: "c-slider-indicator-tick",
+        style: s.value
+      }, w = r(
+        kn,
+        k,
+        () => e.resetable ? r(
+          "div",
+          { class: "c-slider-indicator" },
+          () => r("div", f, () => [])
+        ) : []
+      );
+      return h.push(
+        r("div", { style: "margin: 0 10px; position: relative" }, w)
+      ), r(Le, { style: "position: relative" }, () => h);
+    }
+    function m() {
+      if (!e.resetable || noIcons) return;
+      const h = [], k = {
+        disabled: initial === o,
+        flat: !0,
+        round: !0,
+        style: c.value,
+        onClick: () => o.value = initial,
+        "data-cy": "c-slider-reset-" + Ce(e.title)
+      };
+      return h.push(
+        r(
+          he,
+          k,
+          () => r(
+            pn,
+            { size: "18px" },
+            () => r(qe, { name: et, style: c.value, size: "20px" })
+          )
+        )
+      ), r(Le, { style: "position: relative" }, () => h);
+    }
+    function v() {
+      const h = {
+        class: [
+          "c-slider",
+          "non-draggable",
+          e.noIcons && "no-icons",
+          e.dark && "dark"
+        ],
+        onPointerdown: (f) => f.stopPropagation(),
+        onMousedown: (f) => f.stopPropagation(),
+        "data-cy": "c-slider-" + Ce(e.title)
+      }, k = [l(), d(), m()];
+      return r(qt, h, () => k);
+    }
+    return () => v();
+  }
+}), Jt = M({
+  name: "CToggle",
+  props: {
+    access: String,
+    dark: Boolean,
+    disable: Boolean,
+    drawer: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    labelOff: String,
+    modelValue: Boolean
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const t = y(null), o = u(() => e.labelOff ? e.modelValue ? e.label : e.labelOff : e.label), s = u({
+      get() {
+        return e.modelValue;
+      },
+      set(l) {
+        n("update:modelValue", l);
+      }
+    }), c = Qe(
+      () => {
+        n("blockAccess", e.access);
+      },
+      1e3,
+      { leading: !0, trailing: !0 }
+    );
+    ce(
+      () => e.modelValue,
+      (l) => {
+        !e.hasAccess && l !== t.value && (setTimeout(() => {
+          c();
+        }, 400), setTimeout(() => {
+          n("update:modelValue", t.value);
+        }, 1e3));
+      }
+    ), J(() => {
+      t.value = e.modelValue;
+    });
+    function i() {
+      const l = {
+        ripple: !0,
+        tab: "label",
+        class: { "c-toggle": !0, full: !e.drawer, dark: e.dark },
+        "data-cy": "c-toggle-" + Ce(e.label)
+      }, d = {
+        color: "primary",
+        modelValue: s.value,
+        "onUpdate:modelValue": (v) => s.value = v,
+        size: "xs",
+        disable: e.disable
+      }, m = { class: "c-toggle-title unselectable" };
+      return r(qt, l, () => [
+        r(
+          Le,
+          {},
+          () => r(wn, m, () => o.value)
+        ),
+        r(Le, { side: !0 }, () => r(Cn, d, () => []))
+      ]);
+    }
+    return () => i();
+  }
+}), po = M({
+  name: "CGridTool",
+  props: {
+    disable: Boolean,
+    dark: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    horizontal: { type: Number, default: 0 },
+    noIcons: Boolean,
+    show: Boolean,
+    name: String,
+    modelValue: Number,
+    vertical: { type: Number, default: 0 }
+  },
+  emits: [
+    "update:horizontal",
+    "update:modelValue",
+    "update:vertical",
+    "update:show",
+    "toggle",
+    "blockAccess"
+  ],
+  setup(e, { slots: a, emit: n }) {
+    const t = Ve(), { lang: o } = X(), s = y(t.platform.is.desktop), c = "M50.7574 28L34.1404 11.383C33.5546 10.7972 33.5546 9.84745 34.1404 9.26167C34.7261 8.67588 35.6759 8.67588 36.2617 9.26167L55 28L36.2617 46.7383C35.6759 47.3241 34.7261 47.3241 34.1403 46.7383C33.5546 46.1525 33.5546 45.2028 34.1403 44.617L50.7574 28zM5.24264 28L21.8596 44.617C22.4454 45.2028 22.4454 46.1525 21.8596 46.7383C21.2739 47.3241 20.3241 47.3241 19.7383 46.7383L0.999999 28L19.7383 9.26167C20.3241 8.67588 21.2739 8.67588 21.8596 9.26167C22.4454 9.84745 22.4454 10.7972 21.8596 11.383L5.24264 28Z|0 0 56 56", i = "M28 5.24264L11.383 21.8596C10.7972 22.4454 9.84746 22.4454 9.26167 21.8596C8.67588 21.2739 8.67588 20.3241 9.26167 19.7383L28 1L46.7383 19.7383C47.3241 20.3241 47.3241 21.2739 46.7383 21.8597C46.1525 22.4454 45.2028 22.4454 44.617 21.8597L28 5.24264zM28 50.7574L44.617 34.1404C45.2028 33.5546 46.1525 33.5546 46.7383 34.1404C47.3241 34.7261 47.3241 35.6759 46.7383 36.2617L28 55L9.26167 36.2617C8.67588 35.6759 8.67588 34.7261 9.26167 34.1404C9.84745 33.5546 10.7972 33.5546 11.383 34.1404L28 50.7574Z|0 0 56 56", l = (g) => n("blockAccess", g), d = u({
+      get: () => e.show,
+      set: (g) => n("update:show", g)
+    }), m = u({
+      get: () => e.horizontal,
+      set: (g) => n("update:horizontal", g)
+    }), v = u({
+      get: () => e.modelValue,
+      set: (g) => n("update:modelValue", g)
+    }), h = u({
+      get: () => e.vertical,
+      set: (g) => n("update:vertical", g)
+    }), k = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.horizontal;
+    }), f = u(() => {
+      var g, z;
+      return o.value.controls ? d.value ? (g = o.value.controls) == null ? void 0 : g.grid.off : (z = o.value.controls) == null ? void 0 : z.grid.on : "";
+    }), w = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.spacing;
+    }), p = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.vertical;
+    });
+    function B() {
+      const g = {
+        access: "grd",
+        drawer: !e.noIcons,
+        modelValue: d.value,
+        "onUpdate:modelValue": (z) => d.value = z,
+        label: f.value,
+        dark: e.dark,
+        disable: e.disable,
+        hasAccess: e.hasAccess,
+        onBlockAccess: l
+      };
+      return r(Jt, g);
+    }
+    function $() {
+      const g = [], z = {
+        color: "primary",
+        noIcons: e.noIcons,
+        dark: e.dark,
+        disable: e.disable
+      }, T = {
+        initial: 0,
+        max: 50,
+        min: -50
+      }, G = {
+        ...z,
+        icon: It,
+        initial: 100,
+        max: 150,
+        min: 50,
+        title: w.value,
+        modelValue: v.value,
+        "onUpdate:modelValue": (K) => v.value = K
+      };
+      g.push(r($e, G));
+      const F = {
+        ...z,
+        ...T,
+        icon: c,
+        title: k.value,
+        modelValue: m.value,
+        "onUpdate:modelValue": (K) => m.value = K
+      };
+      g.push(r($e, F));
+      const ee = {
+        ...z,
+        ...T,
+        icon: i,
+        title: p.value,
+        modelValue: h.value,
+        "onUpdate:modelValue": (K) => h.value = K
+      };
+      return g.push(r($e, ee)), s.value ? r(
+        st,
+        {},
+        () => R(r("div", {}, g), [[O, e.show]])
+      ) : R(r("div", {}, g), [[O, e.show]]);
+    }
+    function E() {
+      return r("div", {
+        class: "c-grid-tool"
+      }, [B(), $()]);
+    }
+    return () => E();
+  }
+}), wo = M({
+  name: "CMoveButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean,
+    show: {
+      default: !0,
+      type: Boolean
+    },
+    size: String
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = (l) => n("blockAccess", l), s = u(
+      () => {
+        var l;
+        return e.noIcons ? null : (l = t.value.controls) == null ? void 0 : l.move.title;
+      }
+    ), c = () => n("click");
+    function i() {
+      const l = {
+        class: "c-move-button",
+        hasAccess: e.hasAccess,
+        icon: e.icon,
+        label: s.value,
+        selected: e.selected,
+        show: e.show,
+        size: e.size,
+        onClick: c,
+        onBlockAccess: o
+      };
+      return r(We, l, () => []);
+    }
+    return () => i();
+  }
+}), Co = M({
+  name: "CMoveTool",
+  props: {
+    dark: Boolean,
+    height: {
+      type: Number
+    },
+    knobSize: {
+      type: Number,
+      default: 70
+    },
+    width: {
+      type: Number
+    },
+    name: String,
+    noIcons: Boolean,
+    modelValue: Object
+  },
+  emits: ["click", "onUpdate:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = u(
+      () => {
+        var i;
+        return e.noIcons ? null : (i = t.value.controls) == null ? void 0 : i.move.title;
+      }
+    ), s = u({
+      get: () => e.modelValue,
+      set: (i) => n("update:modelValue", i)
+    });
+    function c() {
+      const i = {
+        class: "c-move-tool",
+        title: o.value,
+        height: e.height,
+        knobSize: e.knobSize,
+        width: e.width,
+        modelValue: s.value,
+        dark: e.dark
+      };
+      return r(Gt, i);
+    }
+    return () => c();
+  }
+}), Bo = M({
+  name: "CGridTool",
+  props: {
+    disable: Boolean,
+    dark: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    horizontal: { type: Number, default: 0 },
+    noIcons: Boolean,
+    visible: Boolean,
+    name: String,
+    lines: Number,
+    vertical: { type: Number, default: 0 }
+  },
+  emits: [
+    "update:horizontal",
+    "update:vertical",
+    "update:lines",
+    "update:visible",
+    "toggle",
+    "blockAccess"
+  ],
+  setup(e, { slots: a, emit: n }) {
+    const t = Ve(), { lang: o } = X(), s = y(t.platform.is.desktop), c = "M50.7574 28L34.1404 11.383C33.5546 10.7972 33.5546 9.84745 34.1404 9.26167C34.7261 8.67588 35.6759 8.67588 36.2617 9.26167L55 28L36.2617 46.7383C35.6759 47.3241 34.7261 47.3241 34.1403 46.7383C33.5546 46.1525 33.5546 45.2028 34.1403 44.617L50.7574 28zM5.24264 28L21.8596 44.617C22.4454 45.2028 22.4454 46.1525 21.8596 46.7383C21.2739 47.3241 20.3241 47.3241 19.7383 46.7383L0.999999 28L19.7383 9.26167C20.3241 8.67588 21.2739 8.67588 21.8596 9.26167C22.4454 9.84745 22.4454 10.7972 21.8596 11.383L5.24264 28Z|0 0 56 56", i = "M28 5.24264L11.383 21.8596C10.7972 22.4454 9.84746 22.4454 9.26167 21.8596C8.67588 21.2739 8.67588 20.3241 9.26167 19.7383L28 1L46.7383 19.7383C47.3241 20.3241 47.3241 21.2739 46.7383 21.8597C46.1525 22.4454 45.2028 22.4454 44.617 21.8597L28 5.24264zM28 50.7574L44.617 34.1404C45.2028 33.5546 46.1525 33.5546 46.7383 34.1404C47.3241 34.7261 47.3241 35.6759 46.7383 36.2617L28 55L9.26167 36.2617C8.67588 35.6759 8.67588 34.7261 9.26167 34.1404C9.84745 33.5546 10.7972 33.5546 11.383 34.1404L28 50.7574Z|0 0 56 56", l = (g) => n("blockAccess", g), d = u({
+      get: () => e.visible,
+      set: (g) => n("update:visible", g)
+    }), m = u({
+      get: () => e.horizontal,
+      set: (g) => n("update:horizontal", g)
+    }), v = u({
+      get: () => e.lines,
+      set: (g) => n("update:lines", g)
+    }), h = u({
+      get: () => e.vertical,
+      set: (g) => n("update:vertical", g)
+    }), k = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.horizontal;
+    }), f = u(() => {
+      var g, z;
+      return o.value.controls ? d.value ? (g = o.value.controls) == null ? void 0 : g.grid.off : (z = o.value.controls) == null ? void 0 : z.grid.on : "";
+    }), w = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.spacing;
+    }), p = u(() => {
+      var g;
+      return (g = o.value.controls) == null ? void 0 : g.grid.vertical;
+    });
+    function B() {
+      const g = {
+        access: "grd",
+        drawer: !e.noIcons,
+        modelValue: d.value,
+        "onUpdate:modelValue": (z) => d.value = z,
+        label: f.value,
+        dark: e.dark,
+        disable: e.disable,
+        hasAccess: e.hasAccess,
+        onBlockAccess: l
+      };
+      return r(Jt, g);
+    }
+    function $() {
+      const g = [], z = {
+        color: "primary",
+        noIcons: e.noIcons,
+        dark: e.dark,
+        disable: e.disable
+      }, T = {
+        initial: 0,
+        max: 50,
+        min: -50
+      }, G = {
+        ...z,
+        icon: It,
+        initial: 20,
+        max: 50,
+        min: 1,
+        title: w.value,
+        modelValue: v.value,
+        "onUpdate:modelValue": (K) => v.value = K
+      };
+      g.push(r($e, G));
+      const F = {
+        ...z,
+        ...T,
+        icon: c,
+        title: k.value,
+        modelValue: m.value,
+        "onUpdate:modelValue": (K) => m.value = K
+      };
+      g.push(r($e, F));
+      const ee = {
+        ...z,
+        ...T,
+        icon: i,
+        title: p.value,
+        modelValue: h.value,
+        "onUpdate:modelValue": (K) => h.value = K
+      };
+      return g.push(r($e, ee)), s.value ? r(
+        st,
+        {},
+        () => R(r("div", {}, g), [[O, e.visible]])
+      ) : R(r("div", {}, g), [[O, e.visible]]);
+    }
+    function E() {
+      return r("div", {
+        class: "c-grid-tool"
+      }, [B(), $()]);
+    }
+    return () => E();
+  }
+}), Vo = {
+  __name: "CSaturateButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.saturate.title;
+      }
+    ), i = () => o("click");
+    return (l, d) => (_(), L(Te, {
+      icon: Z(ut),
+      class: "c-saturate-button",
+      label: c.value,
+      selected: e.selected,
+      onClick: i,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "label", "selected", "has-access"]));
+  }
+}, xo = {
+  __name: "CSaturateTool",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    dark: Boolean,
+    disable: Boolean,
+    name: String,
+    noIcons: Boolean,
+    modelValue: Number
+  },
+  emits: ["update:modelValue", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u({
+      get() {
+        return t.modelValue;
+      },
+      set(l) {
+        o("update:modelValue", l);
+      }
+    }), i = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.saturate.title;
+      }
+    );
+    return (l, d) => (_(), L(xe, {
+      access: "sct",
+      class: "saturate-item",
+      color: "primary",
+      icon: Z(ut),
+      initial: 100,
+      max: 150,
+      min: 50,
+      "no-icons": e.noIcons,
+      title: i.value,
+      modelValue: c.value,
+      "onUpdate:modelValue": d[0] || (d[0] = (m) => c.value = m),
+      dark: e.dark,
+      disable: e.disable,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "no-icons", "title", "modelValue", "dark", "disable", "has-access"]));
+  }
+}, Do = {
+  __name: "CSpinButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean,
+    show: {
+      default: !0,
+      type: Boolean
+    }
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (l) => o("blockAccess", l), c = u(
+      () => {
+        var l;
+        return t.noIcons ? null : (l = n.value.controls) == null ? void 0 : l.spin.title;
+      }
+    ), i = () => o("click");
+    return (l, d) => (_(), L(Te, {
+      icon: Z(rt),
+      class: "c-spin-button",
+      label: c.value,
+      selected: e.selected,
+      show: e.show,
+      onClick: i,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "label", "selected", "show", "has-access"]));
+  }
+}, So = M({
+  name: "CSpinTool",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    initial: {
+      type: Number
+    },
+    max: {
+      type: Number,
+      value: 35
+    },
+    min: {
+      type: Number,
+      value: 0
+    },
+    noIcons: Boolean,
+    modelValue: {
+      type: Number,
+      required: !0
+    }
+  },
+  emits: ["blockAccess", "onUpdate:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = (l) => n("blockAccess", l), s = u({
+      get() {
+        return e.modelValue;
+      },
+      set(l) {
+        n("update:modelValue", l);
+      }
+    }), c = u(
+      () => {
+        var l;
+        return e.noIcons ? null : (l = t.value.controls) == null ? void 0 : l.spin.title;
+      }
+    );
+    function i() {
+      const l = {
+        class: "c-spin-tool",
+        icon: rt,
+        initial: e.initial,
+        max: e.max,
+        min: e.min,
+        noIcons: e.noIcons,
+        title: c.value,
+        modelValue: s.value,
+        "onUpdate:modelValue": (d) => s.value = d,
+        dark: e.dark,
+        disable: e.disable,
+        hasAccess: e.hasAccess,
+        onBlockAccess: o
+      };
+      return r(xe, l);
+    }
+    return () => i();
+  }
+}), Ao = {
+  __name: "CZoomButton",
+  props: {
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    selected: Boolean
+  },
+  emits: ["click", "blockAccess"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = e, o = a, s = (d) => o("blockAccess", d), c = u(
+      () => {
+        var d;
+        return t.noIcons ? null : (d = n.value.controls) == null ? void 0 : d.zoom.title;
+      }
+    ), i = () => o("click"), l = u(() => t.selected ? Sn : it);
+    return (d, m) => (_(), L(Te, {
+      icon: l.value,
+      class: "c-zoom-button",
+      label: c.value,
+      selected: e.selected,
+      onClick: i,
+      "has-access": e.hasAccess,
+      onBlockAccess: s
+    }, null, 8, ["icon", "label", "selected", "has-access"]));
+  }
+}, _o = M({
+  name: "CZoomTool",
+  props: {
+    dark: Boolean,
+    disable: Boolean,
+    hasAccess: {
+      type: Boolean,
+      default: !0
+    },
+    initial: {
+      type: Number
+    },
+    max: {
+      type: Number,
+      value: 100
+    },
+    min: {
+      type: Number,
+      value: 0
+    },
+    noIcons: Boolean,
+    modelValue: {
+      type: Number,
+      required: !0
+    }
+  },
+  emits: ["blockAccess", "onUpdate:modelValue"],
+  setup(e, { slots: a, emit: n }) {
+    const { lang: t } = X(), o = (l) => n("blockAccess", l), s = u({
+      get() {
+        return e.modelValue;
+      },
+      set(l) {
+        n("update:modelValue", l);
+      }
+    }), c = u(
+      () => {
+        var l;
+        return e.noIcons ? null : (l = t.value.controls) == null ? void 0 : l.zoom.title;
+      }
+    );
+    function i() {
+      const l = {
+        access: "zom",
+        class: "c-zoom-tool non-draggable",
+        icon: it,
+        initial: e.initial,
+        max: e.max,
+        min: e.min,
+        noIcons: e.noIcons,
+        title: c.value,
+        modelValue: s.value,
+        "onUpdate:modelValue": (d) => s.value = d,
+        dark: e.dark,
+        disable: e.disable,
+        hasAccess: e.hasAccess,
+        onBlockAccess: o
+      };
+      return r(xe, l);
+    }
+    return () => i();
+  }
+}), nt = {
+  __name: "CDrawer",
+  props: {
+    modelValue: Boolean,
+    side: {
+      type: String,
+      default: "left"
+    },
+    dark: Boolean,
+    overlayTransparent: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = u({
+      get: () => n.modelValue,
+      set: (c) => t("update:modelValue", c)
+    }), s = u(() => ({
+      "overlay-transparent": n.overlayTransparent,
+      dark: n.dark,
+      "text-white": n.dark
+    }));
+    return (c, i) => {
+      const l = A("q-drawer");
+      return _(), L(l, {
+        class: Y(["c-drawer", s.value]),
+        bordered: "",
+        dark: e.dark,
+        "no-swipe-backdrop": e.overlayTransparent,
+        elevated: "",
+        "show-if-above": !1,
+        side: e.side,
+        modelValue: o.value,
+        "onUpdate:modelValue": i[0] || (i[0] = (d) => o.value = d)
+      }, {
+        default: S(() => [
+          I(c.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "dark", "no-swipe-backdrop", "side", "modelValue"]);
+    };
+  }
+}, en = {
+  __name: "CFab",
+  props: {
+    show: Boolean,
+    icon: String,
+    backgroundColor: {
+      default: Be("primary"),
+      type: String
+    },
+    color: {
+      default: "#ffffff",
+      type: String
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = u(() => n.icon ? n.icon : zt), s = u(() => ({
+      color: n.color,
+      backgroundColor: n.backgroundColor
+    })), c = () => t("click");
+    return (i, l) => {
+      const d = A("q-btn"), m = A("q-page-sticky");
+      return R((_(), L(m, {
+        position: "bottom-right",
+        offset: [18, 18],
+        style: { "z-index": "12", transform: "translate(0, 0)" }
+      }, {
+        default: S(() => [
+          D(d, {
+            class: "c-fab",
+            onClick: c,
+            fab: "",
+            icon: o.value,
+            unelevated: "",
+            round: "",
+            style: pe(s.value)
+          }, null, 8, ["icon", "style"])
+        ]),
+        _: 1
+      }, 512)), [
+        [O, e.show]
+      ]);
+    };
+  }
+}, $o = {
+  __name: "CMenuButton",
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    const { lang: n } = X(), t = a, o = u(() => {
+      var c;
+      return (c = n.value.controls) == null ? void 0 : c.menu.title;
+    }), s = () => t("click");
+    return (c, i) => {
+      const l = A("q-btn");
+      return _(), L(l, {
+        class: "c-menu-button darkable q-pl-xs q-pr-sm",
+        onClick: s,
+        dense: "",
+        flat: "",
+        icon: Z(ct),
+        label: o.value,
+        rounded: ""
+      }, null, 8, ["icon", "label"]);
+    };
+  }
+}, qo = {
+  class: "c-right-drawer-container-default",
+  ref: "drawers"
+}, To = {
+  __name: "CRightDrawer",
+  props: {
+    modelValue: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = y(null), s = y(null), c = u({
+      get: () => n.modelValue,
+      set: (i) => t("update:modelValue", i)
+    });
+    return (i, l) => {
+      const d = A("q-dialog");
+      return _(), L(d, {
+        class: "c-right-drawer",
+        "full-height": "",
+        position: "right",
+        dark: "",
+        seamless: "",
+        square: "",
+        modelValue: c.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (m) => c.value = m),
+        ref_key: "dialogRef",
+        ref: s
+      }, {
+        default: S(() => [
+          x("div", {
+            class: "c-right-drawer-container",
+            ref_key: "bottom",
+            ref: o
+          }, [
+            D(ie, { name: "fade" }, {
+              default: S(() => [
+                x("div", qo, [
+                  I(i.$slots, "default")
+                ], 512)
+              ]),
+              _: 3
+            })
+          ], 512)
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+}, zo = { class: "profile-icon" }, Io = { key: "404" }, Lo = { key: "content" }, Mo = {
+  __name: "CInteractiveLayout",
+  props: {
+    active: {
+      type: Number,
+      default: me
+    },
+    dark: Boolean,
+    fabBackgroundColor: {
+      default: Be("primary"),
+      type: String
+    },
+    fabColor: {
+      default: Be("white"),
+      type: String
+    },
+    fabIcon: {
+      default: null,
+      type: String
+    },
+    hideFab: Boolean,
+    leftDrawer: Boolean,
+    notFound: Boolean,
+    overlayTransparent: Boolean,
+    overlay: Boolean,
+    restricted: Boolean,
+    toolRestricted: Boolean
+  },
+  emits: ["update:active", "update:leftDrawer", "right"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = dn(), s = y(!1), c = ft, i = () => {
+      k.value = !1;
+      const f = s.value ? _t : $t;
+      t("update:active", f);
+    }, l = () => {
+      t("update:active", me), k.value = !0;
+    }, d = (f) => {
+      if (f && f.width >= 800) {
+        s.value = !0;
+        return;
+      }
+      s.value = !1;
+    }, m = u(() => !(o && o.bottom)), v = u(() => m.value ? !1 : !s.value && n.active !== me), h = u(() => k.value ? !1 : m.value ? n.active !== me : s.value && n.active !== me), k = u({
+      get() {
+        return n.leftDrawer;
+      },
+      set(f) {
+        t("update:active", me), t("update:leftDrawer", f);
+      }
+    });
+    return ce(
+      () => k.value,
+      (f) => {
+        t("update:active", me), t("update:leftDrawer", f);
+      }
+    ), (f, w) => {
+      const p = A("q-resize-observer"), B = A("q-page-container"), $ = A("q-icon"), E = A("q-layout");
+      return _(), L(E, {
+        class: "c-interactive-layout",
+        view: "lhr lpr lfr"
+      }, {
+        default: S(() => [
+          D(ie, {
+            "enter-active-class": "animated fadeIn",
+            "leave-active-class": "animated fadeOut"
+          }, {
+            default: S(() => [
+              R(x("div", {
+                class: "c-interactive-layout-overlay",
+                onClick: w[0] || (w[0] = (g) => k.value = !1)
+              }, [
+                I(f.$slots, "toolRestricted"),
+                I(f.$slots, "restricted"),
+                I(f.$slots, "overlay")
+              ], 512), [
+                [O, e.overlay]
+              ])
+            ]),
+            _: 3
+          }),
+          x("div", null, [
+            D(p, { onResize: d }),
+            D($o, {
+              onClick: l,
+              class: "c-menu-button"
+            }),
+            x("div", zo, [
+              I(f.$slots, "profile")
+            ]),
+            D(nt, {
+              side: "left",
+              behavior: "mobile",
+              class: "c-layout-left-drawer",
+              modelValue: k.value,
+              "onUpdate:modelValue": w[1] || (w[1] = (g) => k.value = g),
+              dark: ""
+            }, {
+              default: S(() => [
+                I(f.$slots, "leftDrawer")
+              ]),
+              _: 3
+            }, 8, ["modelValue"]),
+            I(f.$slots, "profile"),
+            D(To, {
+              "overlay-transparent": e.overlayTransparent,
+              modelValue: h.value,
+              "onUpdate:modelValue": w[2] || (w[2] = (g) => h.value = g),
+              dark: ""
+            }, {
+              default: S(() => [
+                I(f.$slots, "rightDrawer")
+              ]),
+              _: 3
+            }, 8, ["overlay-transparent", "modelValue"]),
+            D(Ot, {
+              desktop: s.value,
+              modelValue: v.value,
+              "onUpdate:modelValue": w[3] || (w[3] = (g) => v.value = g)
+            }, {
+              default: S(() => [
+                I(f.$slots, "bottom")
+              ]),
+              _: 3
+            }, 8, ["desktop", "modelValue"]),
+            D(B, null, {
+              default: S(() => [
+                D(ot, { name: "fade" }, {
+                  default: S(() => [
+                    R(x("div", Io, [
+                      I(f.$slots, "not-found")
+                    ], 512), [
+                      [O, e.notFound]
+                    ]),
+                    R(x("div", Lo, [
+                      I(f.$slots, "page")
+                    ], 512), [
+                      [O, !e.notFound]
+                    ])
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            }),
+            D($, {
+              class: "logo-button",
+              name: Z(c)
+            }, null, 8, ["name"]),
+            R(D(en, { onClick: i }, null, 512), [
+              [O, !e.active || !e.notFound || !e.hideFab]
+            ])
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+}, No = { class: "c-layout-overlay" }, Po = { class: "profile-icon" }, Ro = { class: "c-right-drawer" }, Oo = { key: "404" }, Eo = { key: "content" }, Ho = {
+  __name: "CLayout",
+  props: {
+    active: String,
+    dark: Boolean,
+    fabBackgroundColor: {
+      default: Be("primary"),
+      type: String
+    },
+    fabColor: {
+      default: Be("white"),
+      type: String
+    },
+    fabIcon: {
+      default: null,
+      type: String
+    },
+    hideFab: Boolean,
+    notFound: Boolean,
+    overlayTransparent: Boolean,
+    overlay: Boolean,
+    restricted: Boolean,
+    rightDrawer: Boolean,
+    toolRestricted: Boolean
+  },
+  emits: ["rightDrawerClicked"],
+  setup(e, { emit: a }) {
+    const n = e, t = a, o = y(!1), s = y(!1), c = y(!1), i = () => c.value = !c.value, l = u({
+      get: () => n.rightDrawer,
+      set: (m) => t("rightDrawerClicked", m)
+    }), d = (m) => {
+      if (m && m.width >= 800) {
+        o.value = !0;
+        return;
+      }
+      o.value = !1;
+    };
+    return J(() => s.value = !0), (m, v) => {
+      const h = A("q-resize-observer"), k = A("q-btn"), f = A("q-space"), w = A("q-toolbar"), p = A("q-header"), B = A("q-page-container"), $ = A("q-icon"), E = A("q-layout");
+      return _(), L(E, {
+        class: "c-layout",
+        view: "lhr lpR lfr"
+      }, {
+        default: S(() => [
+          D(ie, { name: "fade" }, {
+            default: S(() => [
+              R(x("div", No, [
+                I(m.$slots, "toolRestricted"),
+                I(m.$slots, "restricted"),
+                I(m.$slots, "overlay")
+              ], 512), [
+                [O, e.restricted || e.toolRestricted]
+              ])
+            ]),
+            _: 3
+          }),
+          x("div", Po, [
+            I(m.$slots, "profile")
+          ]),
+          D(h, { onResize: d }),
+          D(p, null, {
+            default: S(() => [
+              D(w, { style: { "margin-top": "auto", "margin-bottom": "auto" } }, {
+                default: S(() => [
+                  D(k, {
+                    class: "q-pl-xs q-pr-sm",
+                    onClick: i,
+                    dense: "",
+                    flat: "",
+                    icon: Z(ct),
+                    label: "Menu",
+                    rounded: "",
+                    color: e.dark ? "white" : "black",
+                    style: { transition: "color 0.3s" }
+                  }, null, 8, ["icon", "color"]),
+                  D(f)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          D(nt, {
+            side: "left",
+            behavior: "mobile",
+            class: "c-layout-left-drawer",
+            modelValue: c.value,
+            "onUpdate:modelValue": v[0] || (v[0] = (g) => c.value = g),
+            dark: ""
+          }, {
+            default: S(() => [
+              I(m.$slots, "leftDrawer")
+            ]),
+            _: 3
+          }, 8, ["modelValue"]),
+          x("div", Ro, [
+            D(nt, {
+              "container-class": "c-right-drawer",
+              behavior: "mobile",
+              "overlay-transparent": e.overlayTransparent,
+              side: "right",
+              modelValue: l.value,
+              "onUpdate:modelValue": v[1] || (v[1] = (g) => l.value = g),
+              dark: ""
+            }, {
+              default: S(() => [
+                I(m.$slots, "rightDrawer")
+              ]),
+              _: 3
+            }, 8, ["overlay-transparent", "modelValue"])
+          ]),
+          D(B, null, {
+            default: S(() => [
+              D(ot, { name: "fade" }, {
+                default: S(() => [
+                  R(x("div", Oo, [
+                    I(m.$slots, "not-found")
+                  ], 512), [
+                    [O, e.notFound]
+                  ]),
+                  R(x("div", Eo, [
+                    I(m.$slots, "page")
+                  ], 512), [
+                    [O, !e.notFound]
+                  ])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }),
+          D($, {
+            class: "logo-button",
+            name: Z(ft),
+            color: e.dark ? "white" : "black"
+          }, null, 8, ["name", "color"]),
+          R(D(en, {
+            unelevated: "",
+            onClick: m.rightDrawerClicked
+          }, null, 8, ["onClick"]), [
+            [O, !e.notFound || e.hideFab]
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+}, Uo = M({
+  name: "CResponsiveLayout",
+  props: {
+    active: {
+      type: Number,
+      default: me
+    },
+    dark: Boolean,
+    fabBackgroundColor: {
+      type: String,
+      default: Be("primary")
+    },
+    fabColor: {
+      type: String,
+      default: Be("white")
+    },
+    fabIcon: {
+      type: String,
+      default: null
+    },
+    hideFab: Boolean,
+    leftDrawer: Boolean,
+    notFound: Boolean,
+    overlayTransparent: Boolean,
+    overlay: {
+      type: Boolean,
+      default: !1
+    },
+    restricted: Boolean,
+    toolRestricted: Boolean
+  },
+  emits: ["update:active", "update:leftDrawer"],
+  setup(e, { slots: a, emit: n }) {
+    const t = Ve(), o = y(t.platform.is.desktop);
+    u(() => a.bottom ? !o.value : !1);
+    const s = u(() => e.active !== me), c = u({
+      get: () => e.leftDrawer,
+      set: (f) => n("update:leftDrawer", f)
+    }), i = u({
+      get: () => e.active,
+      set: (f) => {
+        console.log("active", f), n("update:active", f);
+      }
+    });
+    function l() {
+      c.value = !1, n("update:active", o.value ? _t : $t);
+    }
+    function d() {
+      c.value = !0;
+    }
+    function m() {
+    }
+    ce(
+      () => c.value,
+      (f) => {
+        n("update:active", me);
+      }
+    ), Me(m), At(() => {
+    }), J(() => {
+    });
+    function v() {
+      return r(
+        ie,
+        {
+          "enter-active-class": "animated fadeIn",
+          "leave-active-class": "animated fadeOut"
+        },
+        () => {
+          var f, w, p;
+          return R(
+            r(
+              "div",
+              {
+                class: "c-responsive-layout-overlay",
+                onClick: () => c.value = !1
+              },
+              [
+                ...((f = a.toolRestricted) == null ? void 0 : f.call(a)) || [],
+                ...((w = a.restricted) == null ? void 0 : w.call(a)) || [],
+                ...((p = a.overlay) == null ? void 0 : p.call(a)) || []
+              ]
+            ),
+            [[O, e.overlay]]
+          );
+        }
+      );
+    }
+    function h() {
+      var p;
+      const f = [];
+      if (f.push(
+        r(Qt, { class: "c-menu-button", onClick: d })
+      ), f.push(r("div", { class: "profile-icon" }, ((p = a.profile) == null ? void 0 : p.call(a)) || [])), o.value) {
+        const B = {
+          modelValue: s.value,
+          dark: !0
+        };
+        f.push(
+          r(Yt, B, () => {
+            var $;
+            return (($ = a.rightDrawer) == null ? void 0 : $.call(a)) || [];
+          })
+        ), f.push(
+          R(r(Wt, { onClick: l }), [
+            [O, !e.active || !e.notFound || !e.hideFab]
+          ])
+        );
+      }
+      if (!o.value) {
+        const B = {
+          // desktop: desktop.value,
+          modelValue: i.value,
+          dark: !0,
+          "onUpdate:modelValue": ($) => i.value = $
+        };
+        f.push(
+          r(
+            Ft,
+            B,
+            () => {
+              var $;
+              return (($ = a.bottomDrawer) == null ? void 0 : $.call(a)) || [];
+            }
+          )
+        );
+      }
+      f.push(r(qe, { class: "logo-button", name: ft }));
+      const w = {
+        side: "left",
+        behavior: "mobile",
+        class: "c-layout-left-drawer",
+        modelValue: c.value,
+        "onUpdate:modelValue": (B) => c.value = B,
+        dark: !0
+      };
+      return f.push(r(jt, w, () => {
+        var B;
+        return ((B = a.leftDrawer) == null ? void 0 : B.call(a)) || [];
+      })), f.push(
+        r(Vn, {}, () => [
+          r(ot, { name: "fade" }, () => {
+            var B, $;
+            return [
+              R(
+                r("div", { key: "404" }, ((B = a["not-found"]) == null ? void 0 : B.call(a)) || []),
+                [[O, e.notFound]]
+              ),
+              R(r("div", { key: "content" }, (($ = a.page) == null ? void 0 : $.call(a)) || []), [
+                [O, !e.notFound]
+              ])
+            ];
+          })
+        ])
+      ), f;
+    }
+    function k() {
+      const f = [];
+      return f.push(v()), f.push(h()), r(
+        Bn,
+        {
+          class: "c-responsive-layout",
+          role: "responsiveLayout",
+          view: "lhr lpr lfr"
+        },
+        () => f
+      );
+    }
+    return () => k();
+  }
+}), Fo = { class: "c-tool-layout-left-header-icon" }, jo = { class: "c-tool-layout-center-header-icon" }, Wo = { class: "c-tool-layout-right-header-icon" }, Qo = {
+  __name: "CToolLayout",
+  props: {
+    leftDrawerModel: {
+      type: Boolean,
+      default: !1
+    },
+    leftDrawerModelModifiers: {},
+    rightDrawerModel: {
+      type: Boolean,
+      default: !1
+    },
+    rightDrawerModelModifiers: {}
+  },
+  emits: ["update:leftDrawerModel", "update:rightDrawerModel"],
+  setup(e) {
+    $n();
+    const a = Ue(e, "leftDrawerModel"), n = Ue(e, "rightDrawerModel");
+    return J(() => console.log("CToolLayout Mounted")), (t, o) => {
+      const s = A("q-drawer"), c = A("router-view"), i = A("q-page-container"), l = A("q-layout");
+      return _(), L(l, {
+        class: "c-tool-layout",
+        view: "hHh lpR fFf",
+        "data-id": n.value
+      }, {
+        default: S(() => [
+          x("div", Fo, [
+            I(t.$slots, "leftIcon")
+          ]),
+          x("div", jo, [
+            I(t.$slots, "centerIcon")
+          ]),
+          x("div", Wo, [
+            I(t.$slots, "rightIcon")
+          ]),
+          D(s, {
+            modelValue: a.value,
+            "onUpdate:modelValue": o[0] || (o[0] = (d) => a.value = d),
+            side: "left",
+            overlay: "",
+            bordered: "",
+            behavior: "mobile",
+            class: "c-tool-layout-left-drawer",
+            dark: ""
+          }, {
+            default: S(() => [
+              I(t.$slots, "leftDrawer")
+            ]),
+            _: 3
+          }, 8, ["modelValue"]),
+          D(s, {
+            modelValue: n.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (d) => n.value = d),
+            side: "right",
+            bordered: "",
+            overlay: "",
+            "no-swipe-open": "",
+            width: 360,
+            class: "c-tool-layout-right-drawer"
+          }, {
+            default: S(() => [
+              I(t.$slots, "rightDrawer")
+            ]),
+            _: 3
+          }, 8, ["modelValue"]),
+          D(i, null, {
+            default: S(() => [
+              D(c, null, {
+                default: S(({ Component: d, route: m }) => [
+                  (_(), L(mn(d), {
+                    key: m.params.id
+                  }))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 8, ["data-id"]);
+    };
+  }
+}, Go = M({
+  name: "CToolTopGlass",
+  props: {
+    height: { type: Number, default: 70 },
+    drawerPadding: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { slots: a, emit: n }) {
+    function t() {
+      const o = e.drawerPadding ? e.height + 60 : e.height, c = {
+        class: "c-top-glass glass-background column justify-end",
+        style: u(() => ({
+          paddingTop: o + "px",
+          height: 0,
+          top: 0,
+          left: 0,
+          right: 0,
+          position: "fixed",
+          zIndex: 5,
+          transition: "padding-top 300ms ease-out"
+        })).value
+      };
+      return r("div", c, a.default ? a.default() : []);
+    }
+    return () => t();
+  }
+}), Yo = {
+  __name: "CToolPage",
+  props: /* @__PURE__ */ fn({
+    drawerPadding: {
+      type: Boolean,
+      default: !0
+    },
+    title: {
+      type: String,
+      default: "Tool Page Title"
+    }
+  }, {
+    modelValue: { default: !1, type: Boolean },
+    modelModifiers: {},
+    miniState: { default: !0, type: Boolean },
+    miniStateModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:miniState"],
+  setup(e) {
+    const a = Ve(), n = e, t = Ue(e, "modelValue"), o = Ue(e, "miniState"), s = u(() => ({ paddingTop: (n.drawerPadding ? 130 : 60) + "px", transition: "padding-top 300ms ease-out" })), c = () => {
+      o.value = !o.value;
+    }, i = u(() => o.value ? "f_enter" : "f_exit");
+    return J(() => console.log("CToolPage mounted")), (l, d) => {
+      const m = A("q-btn"), v = A("q-drawer"), h = A("q-page");
+      return _(), L(h, { class: "c-tool-page" }, {
+        default: S(() => [
+          I(l.$slots, "default"),
+          Z(a).platform.is.desktop ? (_(), L(v, {
+            key: 0,
+            modelValue: t.value,
+            "onUpdate:modelValue": d[0] || (d[0] = (k) => t.value = k),
+            "show-if-above": "",
+            side: "right",
+            bordered: "",
+            persistent: "",
+            mini: o.value,
+            width: 360,
+            onClick: yt(c, ["stop"]),
+            style: pe(s.value)
+          }, {
+            default: S(() => [
+              R(x("div", null, [
+                R(D(Z(Go), { "drawer-padding": e.drawerPadding }, {
+                  default: S(() => [
+                    D(Z(Kt), { label: e.title }, null, 8, ["label"])
+                  ]),
+                  _: 1
+                }, 8, ["drawer-padding"]), [
+                  [O, e.title]
+                ]),
+                I(l.$slots, "toolDrawer")
+              ], 512), [
+                [O, !o.value]
+              ]),
+              D(m, {
+                class: "c-tool-page-drawer-button",
+                round: "",
+                unelevated: "",
+                onClick: yt(c, ["stop"]),
+                icon: i.value
+              }, null, 8, ["icon"])
+            ]),
+            _: 3
+          }, 8, ["modelValue", "mini", "style"])) : le("", !0),
+          I(l.$slots, "bottomDrawer")
+        ]),
+        _: 3
+      });
+    };
+  }
+}, ll = {
+  install(e) {
+    e.component("CAnimatedNumber", Nt), e.component("CBaseButton", Pn), e.component("CBaseButtons", Rn), e.component("CBasicTool", mo), e.component("CBottomDrawer", Ot), e.component("CBottomDrawerContainer", Zn), e.component("CBottomDrawerHeader", Et), e.component("CBrightnessButton", fo), e.component("CBrightnessTool", vo), e.component("CButton", We), e.component("CButtonBar", Xn), e.component("CButtonRow", ea), e.component("CButtonToggle", ta), e.component("CCameraDirection", oa), e.component("CColorPicker", ca), e.component("CColorPickerButton", ia), e.component("CColorPickerPopup", Ht), e.component("CContrastButton", go), e.component("CContrastTool", bo), e.component("CDivider", ra), e.component("CDraggableDrawer", ga), e.component("CDraggableDrawers", Ft), e.component("CDrawer", jt), e.component("CDrawerHeader", Rt), e.component("CDurationButton", ya), e.component("CExpansion", ka), e.component("CExpansionItem", pa), e.component("CFab", Wt), e.component("CFloatingModal", wa), e.component("CGridButton", ho), e.component("CGridOverlay", ko), e.component("CGridTool", po), e.component("CHorizontalScroller", Ca), e.component("CIconButton", Va), e.component("CInteractiveLayout", Mo), e.component("CItemHeading", Da), e.component("CLayout", Ho), e.component("CMenuButton", Qt), e.component("CMoveButton", wo), e.component("CMoveTool", Co), e.component("CNavigator", Gt), e.component("CNewGridTool", Bo), e.component("COverlayLoader", Sa), e.component("CRectButton", qa), e.component("CResponsiveLayout", Uo), e.component("CRightDrawer", Yt), e.component("CRoundButton", Te), e.component("CSaturateButton", Vo), e.component("CSaturateTool", xo), e.component("CSlider", xe), e.component("CSpinButton", Do), e.component("CSpinTool", So), e.component("CToggle", uo), e.component("CToolHeader", Kt), e.component("CToolLayout", Qo), e.component("CToolPage", Yo), e.component("CZoomButton", Ao), e.component("CZoomTool", _o);
+  }
+};
+export {
+  Nt as CAnimatedNumber,
+  Pn as CBaseButton,
+  Rn as CBaseButtons,
+  mo as CBasicTool,
+  Ot as CBottomDrawer,
+  Zn as CBottomDrawerContainer,
+  Et as CBottomDrawerHeader,
+  fo as CBrightnessButton,
+  vo as CBrightnessTool,
+  We as CButton,
+  Xn as CButtonBar,
+  ea as CButtonRow,
+  ta as CButtonToggle,
+  oa as CCameraDirection,
+  ca as CColorPicker,
+  ia as CColorPickerButton,
+  Ht as CColorPickerPopup,
+  go as CContrastButton,
+  bo as CContrastTool,
+  ra as CDivider,
+  ga as CDraggableDrawer,
+  Ft as CDraggableDrawers,
+  jt as CDrawer,
+  Rt as CDrawerHeader,
+  ya as CDurationButton,
+  ka as CExpansion,
+  pa as CExpansionItem,
+  Wt as CFab,
+  wa as CFloatingModal,
+  ho as CGridButton,
+  ko as CGridOverlay,
+  po as CGridTool,
+  Ca as CHorizontalScroller,
+  Va as CIconButton,
+  Mo as CInteractiveLayout,
+  Da as CItemHeading,
+  Ho as CLayout,
+  Qt as CMenuButton,
+  wo as CMoveButton,
+  Co as CMoveTool,
+  Gt as CNavigator,
+  Bo as CNewGridTool,
+  Sa as COverlayLoader,
+  qa as CRectButton,
+  Uo as CResponsiveLayout,
+  Yt as CRightDrawer,
+  Te as CRoundButton,
+  Vo as CSaturateButton,
+  xo as CSaturateTool,
+  xe as CSlider,
+  Do as CSpinButton,
+  So as CSpinTool,
+  uo as CToggle,
+  Kt as CToolHeader,
+  Qo as CToolLayout,
+  Yo as CToolPage,
+  Ao as CZoomButton,
+  _o as CZoomTool,
+  ll as default
+};