@figurosity/consumer-three-sixty-tool 0.3.7 → 0.3.8

package/dist/consumer-three-sixty-tool.js

@@ -1,12 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("html,body{-webkit-text-size-adjust:none;touch-action:manipulation}.detector{cursor:default;position:fixed;top:0;left:0;right:0;bottom:0;z-index:8}.detector.moving{cursor:move}.three-sixty-viewer .row .col,.three-sixty-viewer .row div{text-align:center}.loading-bar{position:absolute;bottom:0;z-index:100}.three-sixty-viewer{z-index:2!important}.image-background{position:fixed;bottom:0;top:0;left:0;right:0;z-index:1;overflow:hidden;background-color:#fff;-webkit-transition:background-color .1s linear;-ms-transition:background-color .1s linear;transition:background-color .1s linear}.image-background.negative{background-color:#000}.image-holder{position:absolute;background-color:#fff;filter:none;z-index:3}.image-holder-overlay{position:absolute;z-index:4;top:0;left:0;right:0;bottom:0;background:#fff0;background:linear-gradient(82deg,#fff,#fff 1%,#fff0 8%,#fff0),linear-gradient(287deg,#fff,#fff 1%,#fff0 8%,#fff0)}.image-holder-overlay.negative{position:absolute;z-index:4;top:0;left:0;right:0;bottom:0;background:#0000;background:linear-gradient(82deg,#000,#000 1%,#0000 8%,#0000),linear-gradient(287deg,#000,#000 1%,#0000 8%,#0000)}.pose-image{display:block;width:100%;height:auto}.grid-overlay{position:absolute;top:0;left:0;z-index:5;width:100%;height:100%}.grid-overlay .vertical-center{position:absolute;z-index:20;left:50%;top:0;width:1px;background-color:#9c0000;height:100%}.grid-overlay .horizontal-center{position:absolute;z-index:20;top:50%;left:0;height:1px;background-color:#9c0000;width:100%}.grid-overlay-cell{position:absolute;background-color:#0087ff80}.ts-position-move-holder{overflow:hidden;width:100%;padding-top:150px;height:0;opacity:1;position:relative}.slide-fade-enter-active,.slide-fade-leave-active{transition:all .3s ease}.slide-fade-enter,.slide-fade-leave-to{padding-top:0!important;opacity:0}.frozen-overlay{position:absolute;z-index:2;top:0;left:0;bottom:0;right:0}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { ref as A, computed as d, watch as Z, onBeforeMount as $t, defineComponent as g, h as u, withDirectives as ut, vShow as dt, inject as te, openBlock as Ge, createElementBlock as Ot, normalizeStyle as Rt, createVNode as Ce, unref as re, onMounted as ze, nextTick as Kt, onBeforeUnmount as Xe, useModel as Nt, createBlock as ot, withCtx as Le, createCommentVNode as Lt, mergeModels as Zt } from "vue";
-import { useQuasar as mt, QBtn as Gt, QSeparator as ne, QLinearProgress as qt } from "quasar";
-import { defineStore as he, getActivePinia as Wt, storeToRefs as y } from "pinia";
-import { DEFAULT_SATURATE as Ht, DEFAULT_CONTRAST as Xt, DEFAULT_BRIGHTNESS as Yt, getConfig as Qt, useDynamicImages as Jt, LOADED as Ee, LOADING as ye, FAILED as ae, UNLOADED as rt, QUEUED as es, DEFAULT_VISIBLE as ts, DEFAULT_VERTICAL as ss, DEFAULT_SPACING as ns, DEFAULT_HORIZONTAL as os, Point as G, Size as fe, Rect as qe, DEFAULT as pt, NOTHING as ft, BRIGHTNESS as We, CONTRAST as ht, SATURATE as gt, CAMERA_ANGLE as Y, EFFECTS as Q, GRID as J, RELATED as ee, VIEWS as xe, TOOLBAR as at, MOVE as rs, ZOOM as as, SPIN as is, ADJUSTMENTS as be, SKINS as ke, POSITION as cs, useFilterStyle as Ye, useEventBus as ls, useWakeLock as us } from "@figurosity/toolbox";
+import { ref as A, computed as d, watch as G, onBeforeMount as Ot, defineComponent as g, h as u, withDirectives as ut, vShow as dt, inject as te, openBlock as Ge, createElementBlock as Rt, normalizeStyle as Kt, createVNode as Ce, unref as re, onMounted as ze, nextTick as Nt, onBeforeUnmount as Xe, useModel as Lt, createBlock as ot, withCtx as Le, createCommentVNode as Zt, mergeModels as Gt } from "vue";
+import { useQuasar as mt, QBtn as qt, QSeparator as ne, QLinearProgress as Wt } from "quasar";
+import { defineStore as he, getActivePinia as Ht, storeToRefs as y } from "pinia";
+import { DEFAULT_SATURATE as Xt, DEFAULT_CONTRAST as Yt, DEFAULT_BRIGHTNESS as Qt, getConfig as Jt, useDynamicImages as es, LOADED as Ee, LOADING as ye, FAILED as ae, UNLOADED as rt, QUEUED as ts, DEFAULT_VISIBLE as ss, DEFAULT_VERTICAL as ns, DEFAULT_SPACING as os, DEFAULT_HORIZONTAL as rs, Point as q, Size as fe, Rect as qe, DEFAULT as pt, NOTHING as ft, BRIGHTNESS as We, CONTRAST as ht, SATURATE as gt, CAMERA_ANGLE as Y, EFFECTS as Q, GRID as J, RELATED as ee, VIEWS as xe, TOOLBAR as at, MOVE as as, ZOOM as is, SPIN as cs, ADJUSTMENTS as be, SKINS as ke, POSITION as ls, useFilterStyle as Ye, useEventBus as us, useWakeLock as ds } from "@figurosity/toolbox";
 import Ie from "@tweenjs/tween.js";
-import { CBasicTool as we, CExpansion as de, CBaseButton as q, CBaseButtons as Qe, CNewGridTool as ds, CDraggableDrawer as W, CDraggableDrawers as ms, CGridOverlay as ps, CToolPage as fs } from "@figurosity/consumer-controls";
+import { CBasicTool as we, CExpansion as de, CBaseButton as W, CBaseButtons as Qe, CNewGridTool as ms, CDraggableDrawer as H, CDraggableDrawers as ps, CGridOverlay as fs, CToolPage as hs } from "@figurosity/consumer-controls";
 import { EventManager as it } from "mjolnir.js";
-import { supportsPassiveEvents as hs } from "detect-it";
+import { supportsPassiveEvents as gs } from "detect-it";
 const ie = 26, De = {
   model(e) {
     const t = f();
@@ -137,10 +137,10 @@ const ie = 26, De = {
     ...o
   }
 }), vt = {
-  brightness: Yt,
-  contrast: Xt,
-  saturate: Ht
-}, gs = {
+  brightness: Qt,
+  contrast: Yt,
+  saturate: Xt
+}, vs = {
   changed(e) {
     return this.propertyChanged("brightness") || this.propertyChanged("contrast") || this.propertyChanged("saturate");
   },
@@ -156,18 +156,18 @@ const ie = 26, De = {
 }, U = Fe({
   storeId: "360-adjustments",
   defaultValues: Object.assign({}, vt),
-  getters: gs,
+  getters: vs,
   keyBy: "basePoseId"
 });
-function vs(e, t) {
-  let s = Ss(t, e);
+function Ss(e, t) {
+  let s = ys(t, e);
   return s < 0 && (s = e + s), isNaN(Math.floor(s)) ? 0 : Math.floor(s);
 }
-function Ss(e, t) {
+function ys(e, t) {
   return Math[e > 0 ? "floor" : "ceil"](e % t);
 }
-let oe = null, L = null;
-const ys = {
+let oe = null, Z = null;
+const bs = {
   animating: !1,
   condisabledtrast: !1,
   disabledTimeout: null,
@@ -176,7 +176,7 @@ const ys = {
   renderCount: 36,
   index: 1,
   frame: 1
-}, bs = {}, ks = {
+}, ks = {}, Is = {
   changed() {
     const e = this.model;
     return e && e.frame !== e.index;
@@ -188,7 +188,7 @@ const ys = {
     const e = this.model;
     return e ? e.frame : 0;
   }
-}, Is = {
+}, Ts = {
   initModel({ id: e, index: t = 0, renderCount: s = 36 }) {
     typeof this.models[e] < "u" || (this.models[e] = {
       index: t,
@@ -217,13 +217,13 @@ const ys = {
    * Stop the spin
    */
   stopSpin() {
-    L && L.stop();
+    Z && Z.stop();
   },
   setFrame(e, t) {
     const s = f();
     t = t || s.id;
     const o = { ...t ? this.models[t] : this.model };
-    oe && window.cancelAnimationFrame(oe), L && (L.stop(), L = null);
+    oe && window.cancelAnimationFrame(oe), Z && (Z.stop(), Z = null);
     const r = o.max;
     e > r && (e = 0), e < 0 && (e = r), o.animating = !1, o.frame = e, s.pulseKinetic(), this.$patch({
       models: {
@@ -242,13 +242,13 @@ const ys = {
     const a = this;
     if (e === r)
       return;
-    this.setProperty("start", r), oe && window.cancelAnimationFrame(oe), L && (L.stop(), L = null);
+    this.setProperty("start", r), oe && window.cancelAnimationFrame(oe), Z && (Z.stop(), Z = null);
     function i(c) {
       oe = window.requestAnimationFrame(i), Ie.update(c);
     }
-    this.setPropertyById(n, "animating", !0), L = new Ie.Tween({ value: r }).easing(Ie.Easing.Quartic.Out).to({ value: e }, t).onUpdate(function(c) {
+    this.setPropertyById(n, "animating", !0), Z = new Ie.Tween({ value: r }).easing(Ie.Easing.Quartic.Out).to({ value: e }, t).onUpdate(function(c) {
       let l = parseInt(c.value.toFixed(0));
-      const m = vs(o, l);
+      const m = Ss(o, l);
       m !== r && (a.setPropertyById(n, "frame", m), f().pulseKinetic());
     }).onComplete(function() {
       window.cancelAnimationFrame(oe), oe = null, a.setPropertyById(n, "animationFrame", null), a.setPropertyById(n, "animating", !1);
@@ -256,14 +256,14 @@ const ys = {
   }
 }, ge = Fe({
   storeId: "360-spin",
-  defaultValues: Object.assign({}, ys),
-  state: bs,
-  getters: ks,
-  actions: Is
+  defaultValues: Object.assign({}, bs),
+  state: ks,
+  getters: Is,
+  actions: Ts
 });
-function Pe() {
-  const { freeServer: e, paidServer: t } = Qt();
-  return Jt({ freeServer: e, paidServer: t });
+function Be() {
+  const { freeServer: e, paidServer: t } = Jt();
+  return es({ freeServer: e, paidServer: t });
 }
 function St(e, t) {
   for (const s in t)
@@ -371,7 +371,7 @@ const M = he("360-skins", {
   actions: {
     ...Ae,
     initModel({ id: e, skinId: t, accessKeys: s, censoredSkinIds: n = [], renderCount: o, skins: r, skinIds: a, uuid: i }) {
-      const c = le(), { getPoseLarge: l, getPoseSmall: m } = Pe();
+      const c = le(), { getPoseLarge: l, getPoseSmall: m } = Be();
       this.censoredSkinIds = n, this.accessKeys = s;
       const h = this.appColorsStore;
       j();
@@ -394,31 +394,31 @@ const M = he("360-skins", {
           order: b.order,
           effects: {}
         };
-        Object.keys(Te).forEach((E) => {
-          E = parseInt(E);
-          const $ = Te[E], x = [], H = [], R = E === 3 ? I : k;
-          for (let z = 0; z < o; z++) {
-            const B = {
+        Object.keys(Te).forEach((z) => {
+          z = parseInt(z);
+          const $ = Te[z], E = [], X = [], K = z === 3 ? I : k;
+          for (let x = 0; x < o; x++) {
+            const P = {
               uuid: i,
               skin: b.slug,
               effect: $.slug,
-              color: R,
-              index: z
-            }, X = m(B), V = l(B);
-            x.push(X), H.push(V);
-            const K = {
+              color: K,
+              index: x
+            }, O = m(P), V = l(P);
+            E.push(O), X.push(V);
+            const N = {
               skinId: v,
               failCount: 0,
               effectId: parseInt($.id),
-              backgroundColor: R,
+              backgroundColor: K,
               poseId: e,
               skin: b.slug,
               status: rt
             };
-            w[X] = { ...K, url: X }, w[V] = { ...K, url: V };
+            w[O] = { ...N, url: O }, w[V] = { ...N, url: V };
           }
-          F.effects[E] = {
-            [R]: {
+          F.effects[z] = {
+            [K]: {
               status: rt,
               active: !1,
               percent: 0,
@@ -427,8 +427,8 @@ const M = he("360-skins", {
               started: !1,
               complete: !1,
               images: {
-                large: H,
-                small: x
+                large: X,
+                small: E
               },
               previewLoaded: !1
             }
@@ -574,7 +574,7 @@ const M = he("360-skins", {
     loadImage(e, t = void 0) {
       if (this.models[e].status === ye) return;
       if (typeof Image > "u") return this.setStatus(e, ae);
-      this.setStatus(e, es);
+      this.setStatus(e, ts);
       const o = new Image(), r = this;
       o.onabort = function(a) {
         r.setStatus(this.src, ae), this.onerror = this.onabort = this.onload = null;
@@ -768,11 +768,11 @@ const M = he("360-skins", {
     }
   }
 }), yt = {
-  horizontal: os,
-  spacing: ns,
-  vertical: ss,
-  visible: ts
-}, Ts = {
+  horizontal: rs,
+  spacing: os,
+  vertical: ns,
+  visible: ss
+}, ws = {
   changed() {
     return this.propertyChanged("visible") || !1;
   },
@@ -791,7 +791,7 @@ const M = he("360-skins", {
 }, ue = Fe({
   storeId: "360-grid",
   defaultValues: yt,
-  getters: Ts,
+  getters: ws,
   keyBy: "basePoseId"
 }), se = he("360-pose", {
   state: () => ({
@@ -850,11 +850,11 @@ const M = he("360-skins", {
 }) => {
   const i = {}, c = s / r.shortDimension(), l = (c - 1) * (a / 100) + 1;
   if (l < 1 || l > c) return {};
-  const m = ws({
+  const m = Ds({
     factor: l,
     size: r,
     maxDimension: s
-  }), h = zs({
+  }), h = Es({
     scaleByRatio: o,
     imageSize: e,
     newSize: m,
@@ -862,24 +862,24 @@ const M = he("360-skins", {
     size: r,
     origin: n
   });
-  return i.imagePoint = h, i.imageSize = m, i.size = r, i.zoom = a, Object.assign(i, Cs({ maxDimension: s, newSize: m, size: r }));
-}, ws = ({ factor: e, size: t, maxDimension: s }) => {
+  return i.imagePoint = h, i.imageSize = m, i.size = r, i.zoom = a, Object.assign(i, zs({ maxDimension: s, newSize: m, size: r }));
+}, Ds = ({ factor: e, size: t, maxDimension: s }) => {
   let n = t.shortDimension() * e;
   return n = n > s ? s : n, new fe(n, n);
-}, Ds = ({ imagePoint: e, imageSize: t, newSize: s, size: n, origin: o }) => {
+}, Bs = ({ imagePoint: e, imageSize: t, newSize: s, size: n, origin: o }) => {
   const r = (s.width - t.width) / t.width;
-  let a = new G(
+  let a = new q(
     -(r * o.left) - Math.abs(e.left),
     -(r * o.top) - Math.abs(e.top)
   );
   return s.width < n.width && (a.left = -(r * o.left) + Math.abs(e.left)), s.height < n.height && (a.top = -(r * o.top) + Math.abs(e.top)), a;
-}, Ps = ({ event: e, element: t }) => (e = e.srcEvent ? e.srcEvent : e, G.getPointFromInteractionEvent(e, t)), Bs = ({ origin: e, imageSize: t }) => !(e.left > 0 && e.top > 0 && e.left < t.width && e.top < t.height), Cs = ({ maxDimension: e, newSize: t, size: s }) => {
+}, Ps = ({ event: e, element: t }) => (e = e.srcEvent ? e.srcEvent : e, q.getPointFromInteractionEvent(e, t)), Cs = ({ origin: e, imageSize: t }) => !(e.left > 0 && e.top > 0 && e.left < t.width && e.top < t.height), zs = ({ maxDimension: e, newSize: t, size: s }) => {
   const n = t.width <= s.width, o = t.height <= s.height, r = {};
   return r.immobileHeight = o, r.immobileWidth = n, r.maximized = Math.round(t.width) >= e, r.minimized = n && o, r.movable = !n || !o, r;
 }, He = ({ point: e, size: t, newSize: s }) => {
-  let n = new G(t.width - s.width, t.height - s.height);
+  let n = new q(t.width - s.width, t.height - s.height);
   return s.width >= t.width && (e.left >= 0 && (e.left = 0), e.left < n.left && (e.left = n.left)), s.height >= t.height && (e.top >= 0 && (e.top = 0), e.top < n.top && (e.top = n.top)), s.width < t.width && (e.left = n.left / 2), s.height < t.height && (e.top = n.top / 2), e;
-}, zs = ({
+}, Es = ({
   scaleByRatio: e = !0,
   imagePoint: t,
   imageSize: s,
@@ -888,10 +888,10 @@ const M = he("360-skins", {
   size: r
 }) => {
   if (e) {
-    const i = Es({ imageSize: s, newSize: n, imagePoint: t });
+    const i = xs({ imageSize: s, newSize: n, imagePoint: t });
     return He({ point: i, newSize: n, size: r });
   }
-  const a = Ds({
+  const a = Bs({
     imagePoint: t,
     imageSize: s,
     newSize: n,
@@ -899,17 +899,17 @@ const M = he("360-skins", {
     origin: o
   });
   return He({ point: a, newSize: n, size: r });
-}, Es = ({ imageSize: e, newSize: t, imagePoint: s }) => {
-  let n = new G(
+}, xs = ({ imageSize: e, newSize: t, imagePoint: s }) => {
+  let n = new q(
     (e.width - t.width) / 2,
     (e.height - t.height) / 2
   );
-  return new G(s.left + n.left, s.top + n.top);
+  return new q(s.left + n.left, s.top + n.top);
 }, ce = {
   maxDimension: 2048,
   zoom: 0,
-  imagePoint: new G(0, 0),
-  viewportPoint: new G(0, 0),
+  imagePoint: new q(0, 0),
+  viewportPoint: new q(0, 0),
   size: new fe(0, 0),
   imageSize: new fe(0, 0),
   immobileWidth: !1,
@@ -917,7 +917,7 @@ const M = he("360-skins", {
   maximized: !1,
   minimized: !1,
   animating: !1
-}, xs = {}, As = {
+}, As = {}, Fs = {
   changed() {
     return this.propertyChanged("zoom");
   },
@@ -954,8 +954,8 @@ const M = he("360-skins", {
     return s ? s.size : ce.size;
   }
 };
-let Be = null, Se = null;
-const Fs = {
+let Pe = null, Se = null;
+const Ms = {
   reset() {
     this.setZoom(0);
   },
@@ -970,8 +970,8 @@ const Fs = {
     const s = this.model;
     let n = { zoom: s.zoom }, o = { zoom: e };
     const r = this, a = (i) => {
-      if (Be = window.requestAnimationFrame(a), !s.animating) {
-        window.cancelAnimationFrame(Be);
+      if (Pe = window.requestAnimationFrame(a), !s.animating) {
+        window.cancelAnimationFrame(Pe);
         return;
       }
       Ie.update(i);
@@ -981,7 +981,7 @@ const Fs = {
       c !== s.zoom && r.setZoom(c);
     }).onComplete(function(i) {
       let c = parseInt(i.zoom);
-      window.cancelAnimationFrame(Be), Be = null, r.setZoom(c), r.setProperty("animating", !1);
+      window.cancelAnimationFrame(Pe), Pe = null, r.setZoom(c), r.setProperty("animating", !1);
     }).start(), a();
   },
   /**
@@ -994,7 +994,7 @@ const Fs = {
       n[c] = ce[c];
     });
     const o = qe.newRectFromElement(e), r = new fe(o.width, o.height), a = (r.width - r.shortDimension()) / 2, i = (r.height - r.shortDimension()) / 2;
-    n.id = s, n.imagePoint = new G(a, i), n.imageSize = new fe(r.shortDimension(), r.shortDimension()), n.size = r, n.zoom = 0, this.$patch((c) => {
+    n.id = s, n.imagePoint = new q(a, i), n.imageSize = new fe(r.shortDimension(), r.shortDimension()), n.size = r, n.zoom = 0, this.$patch((c) => {
       c.models[s] = { ...n };
     });
   },
@@ -1041,7 +1041,7 @@ const Fs = {
     if (!n) return;
     const o = n.zoom + s;
     if (o < 0 || o > 100) return;
-    const r = n.imageSize, a = Ps({ event: e, element: t }), i = Bs({
+    const r = n.imageSize, a = Ps({ event: e, element: t }), i = Cs({
       origin: a,
       imageSize: r
     }), c = Ze({
@@ -1081,10 +1081,10 @@ const Fs = {
 }, me = Fe({
   storeId: "360-zoom",
   defaultValues: ce,
-  state: xs,
-  getters: As,
-  actions: Fs
-}), Ms = {
+  state: As,
+  getters: Fs,
+  actions: Ms
+}), _s = {
   ...vt,
   ...yt,
   ...ce
@@ -1119,7 +1119,7 @@ const Fs = {
       return ((t = this.appFreezeStore) == null ? void 0 : t.isFrozen(e.basePoseId)) || !1;
     },
     propertyChangedById() {
-      return (e, t) => this.propertyById(e, t) !== Ms[t];
+      return (e, t) => this.propertyById(e, t) !== _s[t];
     },
     propertyById(e) {
       return (t, s, n = null) => {
@@ -1218,7 +1218,7 @@ const Fs = {
       this._clearKineticTimer(), this.isKinetic = !1;
     }
   }
-}), _s = "tool:switched", Vs = "pose:viewed", js = "skin:changed", lt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-C3l3cs_R.js"), "../i18n/es/index.js": () => import("./index-M-P_KhqK.js") }), P = (e = "../i18n") => {
+}), Vs = "tool:switched", js = "pose:viewed", Us = "skin:changed", lt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-C3l3cs_R.js"), "../i18n/es/index.js": () => import("./index-M-P_KhqK.js") }), B = (e = "../i18n") => {
   const t = mt(), s = A({}), n = d(() => t.lang.isoName || "en-US"), o = async () => {
     const r = `${e}/${n.value}/index.js`;
     if (lt[r])
@@ -1231,24 +1231,24 @@ const Fs = {
     else
       console.error(`Module not found: ${r}`);
   };
-  return Z(
+  return G(
     () => n.value,
     () => {
       o();
     },
     { immediate: !0 }
-  ), $t(() => {
+  ), Ot(() => {
     o();
   }), { lang: s };
 }, _ = ({ tab: e = ft, store: t, options: s = [] }) => {
-  const n = Wt(), o = f(n), r = d({
+  const n = Ht(), o = f(n), r = d({
     get: () => o.isExpanded(s),
     set: (c) => {
       c && o.setActive(e);
     }
   }), a = d(() => t && t.changed);
   return { click: () => o.setActive(e), expanded: r, selected: a };
-}, Us = g({
+}, $s = g({
   name: "TsBrightnessTool",
   props: {
     noIcons: Boolean
@@ -1271,7 +1271,7 @@ const Fs = {
     }
     return () => c();
   }
-}), $s = g({
+}), Os = g({
   name: "TsContrastTool",
   props: {
     noIcons: Boolean
@@ -1295,7 +1295,7 @@ const Fs = {
     }
     return () => c();
   }
-}), Os = g({
+}), Rs = g({
   name: "TsSaturateTool",
   props: {
     noIcons: Boolean
@@ -1323,18 +1323,18 @@ const Fs = {
   name: "TsAdjustmentSection",
   setup(e, { slots: t, emit: s }) {
     function n() {
-      return [u(Us), u($s), u(Os)];
+      return [u($s), u(Os), u(Rs)];
     }
     return () => n();
   }
-}), Rs = g({
+}), Ks = g({
   name: "TsAdjustmentExpansion",
   setup(e, { slots: t, emit: s }) {
     const n = U(), { expanded: o, selected: r } = _({
       store: n,
       tab: We,
       options: [We, ht, gt]
-    }), { lang: a } = P(), i = d(() => {
+    }), { lang: a } = B(), i = d(() => {
       var l;
       return (l = a.value.ts) == null ? void 0 : l.controls.adjustments.title;
     });
@@ -1375,10 +1375,10 @@ const Fs = {
     }
     return () => n();
   }
-}), Ks = g({
+}), Ns = g({
   name: "TsRelatedExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), { expanded: o } = _({
+    const { lang: n } = B(), { expanded: o } = _({
       options: Y,
       tab: Y
     }), r = d(() => {
@@ -1397,7 +1397,7 @@ const Fs = {
     }
     return () => a();
   }
-}), Ns = g({
+}), Ls = g({
   name: "TsEffectsButton",
   props: {
     id: Number,
@@ -1407,7 +1407,7 @@ const Fs = {
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: s }) {
-    const n = f(), o = se(), r = M(), a = le(), i = j(), { getThumbnail: c } = Pe(), { id: l } = y(i), { color: m } = y(n), { skinId: h, slug: k } = y(r), I = d(() => o.property("setUuid"));
+    const n = f(), o = se(), r = M(), a = le(), i = j(), { getThumbnail: c } = Be(), { id: l } = y(i), { color: m } = y(n), { skinId: h, slug: k } = y(r), I = d(() => o.property("setUuid"));
     d(() => r.getPropertyByImageSet(
       {
         id: n.id,
@@ -1445,7 +1445,7 @@ const Fs = {
         type: "radio",
         style: D.value
       };
-      return u(q, b);
+      return u(W, b);
     }
     return () => v();
   }
@@ -1463,7 +1463,7 @@ const Fs = {
       const o = [];
       return o.push(u(Je)), s.value.forEach((a) => {
         o.push(
-          u(Ns, {
+          u(Ls, {
             id: a.id,
             label: a.name,
             slug: a.slug,
@@ -1476,10 +1476,10 @@ const Fs = {
     }
     return () => n();
   }
-}), Ls = g({
+}), Zs = g({
   name: "TsEffectsExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = j(), { selected: r } = y(o), { expanded: a } = _({
+    const { lang: n } = B(), o = j(), { selected: r } = y(o), { expanded: a } = _({
       store: o,
       options: Q,
       tab: Q
@@ -1539,14 +1539,14 @@ const Fs = {
         hasAccess: n.value,
         onBlockAccess: o
       };
-      return u(ds, m, () => []);
+      return u(ms, m, () => []);
     }
     return () => l();
   }
-}), Zs = g({
+}), Gs = g({
   name: "TsGridExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = ue(), { expanded: r, selected: a } = _({
+    const { lang: n } = B(), o = ue(), { expanded: r, selected: a } = _({
       store: o,
       options: J,
       tab: J
@@ -1579,10 +1579,10 @@ const Fs = {
     }
     return () => s();
   }
-}), Gs = g({
+}), qs = g({
   name: "TsRelatedExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), { expanded: o } = _({
+    const { lang: n } = B(), { expanded: o } = _({
       options: ee,
       tab: ee
     }), r = d(() => {
@@ -1612,10 +1612,10 @@ const Fs = {
     }
     return () => s();
   }
-}), qs = g({
+}), Ws = g({
   name: "TsSavedExpansion",
   setup() {
-    const { lang: e } = P(), { expanded: t } = _({
+    const { lang: e } = B(), { expanded: t } = _({
       options: ie,
       tab: ie
     }), s = d(() => {
@@ -1634,7 +1634,7 @@ const Fs = {
     }
     return () => n();
   }
-}), Ws = Symbol.for("activity-tracking"), Hs = g({
+}), Hs = Symbol.for("activity-tracking"), Xs = g({
   name: "TsSkinLoadingButton",
   props: {
     dark: { type: Boolean, default: !0 },
@@ -1645,10 +1645,10 @@ const Fs = {
   },
   emits: [],
   setup(e, { slots: t, emit: s }) {
-    const n = f(), o = se(), r = M(), a = le(), i = j(), c = te(Ws, null), { getThumbnail: l } = Pe(), { slug: m, id: h } = y(i), { color: k } = y(n), { skinId: I } = y(r), D = d(() => o.property("setUuid")), w = (x) => n.block(x), v = (x) => n.hasAccess(r.accessKeys[x]), b = (x) => {
-      r.setProperty("skinId", x), a.loadSkin(), c == null || c.trackEvent(js, { value: e.slug });
-    }, F = (x) => {
-      switch (x) {
+    const n = f(), o = se(), r = M(), a = le(), i = j(), c = te(Hs, null), { getThumbnail: l } = Be(), { slug: m, id: h } = y(i), { color: k } = y(n), { skinId: I } = y(r), D = d(() => o.property("setUuid")), w = (E) => n.block(E), v = (E) => n.hasAccess(r.accessKeys[E]), b = (E) => {
+      r.setProperty("skinId", E), a.loadSkin(), c == null || c.trackEvent(Us, { value: e.slug });
+    }, F = (E) => {
+      switch (E) {
         case "nude":
           return "snd";
         case "muscle":
@@ -1665,7 +1665,7 @@ const Fs = {
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    const E = d(() => ({
+    const z = d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
@@ -1679,12 +1679,12 @@ const Fs = {
       "percent"
     ));
     function $() {
-      const x = {
+      const E = {
         class: `ts-${e.slug}-button ts-skin-button`,
         label: e.name,
         key: e.id,
         access: F(e.slug),
-        style: E.value,
+        style: z.value,
         size: e.size,
         image: l({
           uuid: D.value,
@@ -1699,11 +1699,11 @@ const Fs = {
         onBlockAccess: w,
         type: "radio"
       };
-      return u(q, x);
+      return u(W, E);
     }
     return () => $();
   }
-}), Pt = g({
+}), Bt = g({
   name: "TsSkinSection",
   props: { noWrap: Boolean, size: { type: String, default: "sm" } },
   setup(e, {}) {
@@ -1718,15 +1718,15 @@ const Fs = {
           type: "radio",
           label: r.name
         };
-        o.push(u(Hs, a));
+        o.push(u(Xs, a));
       }), u(Qe, {}, () => o);
     }
     return () => n();
   }
-}), Xs = g({
+}), Ys = g({
   name: "TsSkinsExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = M(), { selected: r } = y(o), { expanded: a } = _({
+    const { lang: n } = B(), o = M(), { selected: r } = y(o), { expanded: a } = _({
       store: o,
       options: xe,
       tab: xe
@@ -1746,12 +1746,12 @@ const Fs = {
       return u(
         de,
         l,
-        () => u(Pt, { noWrap: !1, size: "lg", class: "q-py-sm" })
+        () => u(Bt, { noWrap: !1, size: "lg", class: "q-py-sm" })
       );
     }
     return () => c();
   }
-}), Bt = g({
+}), Pt = g({
   name: "TsPoseButtonsSection",
   setup() {
     const e = Symbol.for("PoseButtonsSection"), t = te(e), s = f();
@@ -1761,35 +1761,39 @@ const Fs = {
     }
     return () => n();
   }
-}), Ys = g({
+}), Ct = g({
   name: "TsButtons",
   props: {
     bottom: {
       type: Boolean,
       default: !1
+    },
+    fixed: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = f(), r = U(), a = j(), i = ue(), c = M(), l = ge(), m = me(), { active: h } = y(o), { changed: k } = y(r), { changed: I } = y(i), { changed: D } = y(c), { changed: w } = y(l), { changed: v } = y(m), { changed: b } = y(a);
+    const { lang: n } = B(), o = f(), r = U(), a = j(), i = ue(), c = M(), l = ge(), m = me(), { active: h } = y(o), { changed: k } = y(r), { changed: I } = y(i), { changed: D } = y(c), { changed: w } = y(l), { changed: v } = y(m), { changed: b } = y(a);
     d(() => {
-      var z;
-      return (z = n.value.ts) == null ? void 0 : z.buttons.done;
+      var x;
+      return (x = n.value.ts) == null ? void 0 : x.buttons.done;
     });
     const F = d(
       () => {
-        var z, B;
-        return !e.bottom || h.value === at ? (z = n.value.ts) == null ? void 0 : z.buttons.resetAll : (B = n.value.ts) == null ? void 0 : B.buttons.reset;
+        var x, P;
+        return !e.bottom || h.value === at ? (x = n.value.ts) == null ? void 0 : x.buttons.resetAll : (P = n.value.ts) == null ? void 0 : P.buttons.reset;
       }
     );
     d(
-      () => h.value === rs || h.value === ee || !E.value
+      () => h.value === as || h.value === ee || !z.value
     );
-    const E = d(
+    const z = d(
       () => k.value || I.value || D.value || b.value || w.value || v.value
     ), $ = () => {
       if (!e.bottom || h.value === at)
-        return x();
+        return E();
       switch (h.value) {
         case We:
           r.resetProperty("brightness");
@@ -1803,7 +1807,7 @@ const Fs = {
         case gt:
           r.resetProperty("saturate");
           break;
-        case is:
+        case cs:
           l.reset();
           break;
         case xe:
@@ -1812,29 +1816,29 @@ const Fs = {
         case Q:
           a.reset();
           break;
-        case as:
+        case is:
           m.reset();
           break;
       }
-    }, x = () => {
+    }, E = () => {
       r.reset(), i.reset(), c.reset(), l.reset(), m.reset(), a.reset();
-    }, H = (z) => z.preventDefault();
-    function R() {
-      const z = {
-        style: "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)",
-        class: "row justify-center items-center q-pa-md glass-background"
-      }, B = {
+    }, X = (x) => x.preventDefault();
+    function K() {
+      const P = {
+        style: e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : "",
+        class: e.fixed ? "row justify-center items-center q-pa-md glass-background" : "row justify-center items-center q-pa-md"
+      }, O = {
         class: "ts-reset-button",
         label: F.value,
         onClick: $,
-        onKeyup: H,
+        onKeyup: X,
         rounded: !0,
         unelevated: !0,
         outline: !0
       };
-      return u("div", z, [u(Gt, B)]);
+      return u("div", P, [u(qt, O)]);
     }
-    return () => R();
+    return () => K();
   }
 }), Qs = g({
   name: "TsExpansions",
@@ -1845,22 +1849,22 @@ const Fs = {
         onClick: (r) => r.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
-        u(Bt),
-        u(ne),
-        u(Xs),
+        u(Pt),
         u(ne),
-        u(Ls),
-        u(ne),
-        u(Ks),
+        u(Ys),
         u(ne),
         u(Zs),
         u(ne),
-        u(Rs),
+        u(Ns),
         u(ne),
         u(Gs),
         u(ne),
+        u(Ks),
+        u(ne),
         u(qs),
-        u(Ys)
+        u(ne),
+        u(Ws),
+        u(Ct)
       ]);
     }
     return () => n();
@@ -1868,7 +1872,7 @@ const Fs = {
 }), Js = g({
   name: "TsAdjustmentDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.adjustments.title;
     });
@@ -1878,14 +1882,14 @@ const Fs = {
         name: be,
         label: o.value
       };
-      return u(W, a, () => u(bt));
+      return u(H, a, () => u(bt));
     }
     return () => r();
   }
 }), en = g({
   name: "TsCameraDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.camera.title;
     });
@@ -1895,7 +1899,7 @@ const Fs = {
         name: Y,
         label: o.value
       };
-      return u(W, a, () => u(kt));
+      return u(H, a, () => u(kt));
     }
     return () => r();
   }
@@ -1903,7 +1907,7 @@ const Fs = {
   name: "TsSkinButton",
   emits: ["click"],
   setup() {
-    const e = M(), t = se(), { lang: s } = P(), { getPoseThumbnail: n } = Pe(), { click: o, selected: r } = _({
+    const e = M(), t = se(), { lang: s } = B(), { getPoseThumbnail: n } = Be(), { click: o, selected: r } = _({
       store: e,
       options: ke,
       tab: ke
@@ -1925,7 +1929,7 @@ const Fs = {
         onClick: o,
         type: "none"
       };
-      return u(q, h, () => []);
+      return u(W, h, () => []);
     }
     return () => m();
   }
@@ -1933,7 +1937,7 @@ const Fs = {
   name: "TsGridButton",
   props: { size: String },
   setup(e, {}) {
-    const t = ue(), s = f(), n = d(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: o } = P(), r = d(() => {
+    const t = ue(), s = f(), n = d(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: o } = B(), r = d(() => {
       var m;
       return (m = o.value.ts) == null ? void 0 : m.controls.grid.iconTitle;
     }), { click: a, selected: i } = _({
@@ -1957,7 +1961,7 @@ const Fs = {
         icon: "f_grid",
         label: r.value
       };
-      return u(q, m, () => []);
+      return u(W, m, () => []);
     }
     return () => l();
   }
@@ -1965,7 +1969,7 @@ const Fs = {
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = U(), s = f(), { lang: n } = P(), o = d(() => {
+    const t = U(), s = f(), { lang: n } = B(), o = d(() => {
       var m;
       return (m = n.value.ts) == null ? void 0 : m.controls.adjustments.iconTitle;
     }), r = d(() => (s == null ? void 0 : s.hasAccess("bct")) || !1), { click: a, selected: i } = _({
@@ -1989,7 +1993,7 @@ const Fs = {
         label: o.value,
         type: "none"
       };
-      return u(q, m, () => []);
+      return u(W, m, () => []);
     }
     return () => l();
   }
@@ -1999,7 +2003,7 @@ const Fs = {
   setup(e, {}) {
     const t = f();
     d(() => (t == null ? void 0 : t.hasAccess("cau")) || !1);
-    const { lang: s } = P(), n = d(() => {
+    const { lang: s } = B(), n = d(() => {
       var i;
       return (i = s.value.ts) == null ? void 0 : i.controls.camera.iconTitle;
     }), { click: o, selected: r } = _({
@@ -2019,7 +2023,7 @@ const Fs = {
         type: "none",
         label: n.value
       };
-      return u(q, i, () => []);
+      return u(W, i, () => []);
     }
     return () => a();
   }
@@ -2027,7 +2031,7 @@ const Fs = {
   name: "TsRelatedButton",
   props: { size: String },
   setup(e) {
-    const t = f(), { lang: s } = P(), n = d(
+    const t = f(), { lang: s } = B(), n = d(
       () => {
         var c, l;
         return ((l = (c = s.value.ts) == null ? void 0 : c.controls.related) == null ? void 0 : l.iconTitle) || "Related";
@@ -2052,7 +2056,7 @@ const Fs = {
         type: "none",
         label: n.value
       };
-      return u(q, c, () => []);
+      return u(W, c, () => []);
     }
     return () => i();
   }
@@ -2060,7 +2064,7 @@ const Fs = {
   name: "TsSavedButton",
   props: { size: String },
   setup(e) {
-    const t = f(), { lang: s } = P(), n = d(
+    const t = f(), { lang: s } = B(), n = d(
       () => {
         var c, l;
         return ((l = (c = s.value.ts) == null ? void 0 : c.controls.saved) == null ? void 0 : l.iconTitle) || "Saved";
@@ -2085,7 +2089,7 @@ const Fs = {
         type: "none",
         label: n.value
       };
-      return u(q, c, () => []);
+      return u(W, c, () => []);
     }
     return () => i();
   }
@@ -2182,17 +2186,17 @@ const Fs = {
 g({
   name: "TsPositionDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.positionPose.title;
     });
     function r() {
       const a = {
         class: "ts-position-drawer",
-        name: cs,
+        name: ls,
         label: o.value
       };
-      return u(W, a, () => u(un));
+      return u(H, a, () => u(un));
     }
     return () => r();
   }
@@ -2201,7 +2205,7 @@ const dn = g({
   name: "TsSkinButton",
   emits: ["click"],
   setup(e, { slots: t, emit: s }) {
-    const n = f(), o = M(), r = j(), a = se(), { lang: i } = P(), { getPoseThumbnail: c } = Pe(), { click: l, selected: m } = _({
+    const n = f(), o = M(), r = j(), a = se(), { lang: i } = B(), { getPoseThumbnail: c } = Be(), { click: l, selected: m } = _({
       store: r,
       options: Q,
       tab: Q
@@ -2230,7 +2234,7 @@ const dn = g({
         "data-id": Q,
         onClick: l
       };
-      return u(q, v, () => []);
+      return u(W, v, () => []);
     }
     return () => w();
   }
@@ -2243,12 +2247,12 @@ const dn = g({
     function s(n) {
       return {
         class: t,
-        size: "sm",
+        size: "xs",
         onClick: () => e.setActive(n)
       };
     }
     return () => u(
-      W,
+      H,
       { name: pt },
       {
         default: () => u(Qe, {}, () => [
@@ -2262,14 +2266,14 @@ const dn = g({
           u(an, s(ie))
           // h(TsSettingsButton, getButtonData(SETTINGS)),
         ]),
-        secondary: () => u(Bt, {})
+        secondary: () => [u(Pt, {}), u(Ct, { fixed: !1 })]
       }
     );
   }
 }), pn = g({
   name: "TsGridDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.grid.title;
     });
@@ -2279,14 +2283,14 @@ const dn = g({
         name: J,
         label: o.value
       };
-      return u(W, a, () => u(Tt));
+      return u(H, a, () => u(Tt));
     }
     return () => r();
   }
 }), fn = g({
   name: "TsRelatedDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.related.title;
     });
@@ -2296,14 +2300,14 @@ const dn = g({
         name: ee,
         label: o.value
       };
-      return u(W, a, () => u(wt));
+      return u(H, a, () => u(wt));
     }
     return () => r();
   }
 }), hn = g({
   name: "TsSavedDrawer",
   setup() {
-    const { lang: e } = P(), t = d(() => {
+    const { lang: e } = B(), t = d(() => {
       var n, o;
       return ((o = (n = e.value.ts) == null ? void 0 : n.controls.saved) == null ? void 0 : o.title) || "Saved";
     });
@@ -2313,14 +2317,14 @@ const dn = g({
         name: ie,
         label: t.value
       };
-      return u(W, n, () => u(Dt));
+      return u(H, n, () => u(Dt));
     }
     return () => s();
   }
 }), gn = g({
   name: "TsSkinDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.skins.title;
     });
@@ -2330,14 +2334,14 @@ const dn = g({
         name: ke,
         label: o.value
       };
-      return u(W, a, () => u(Pt));
+      return u(H, a, () => u(Bt));
     }
     return () => r();
   }
 }), vn = g({
   name: "TsEffectsDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: n } = P(), o = d(() => {
+    const { lang: n } = B(), o = d(() => {
       var a;
       return (a = n.value.ts) == null ? void 0 : a.controls.effects.title;
     });
@@ -2347,7 +2351,7 @@ const dn = g({
         name: Q,
         label: o.value
       };
-      return u(W, a, () => u(It, { size: "sm" }));
+      return u(H, a, () => u(It, { size: "sm" }));
     }
     return () => r();
   }
@@ -2360,7 +2364,7 @@ const dn = g({
         modelValue: t.value,
         "onUpdate:modelValue": (o) => t.value = o
       };
-      return u(ms, n, () => [
+      return u(ps, n, () => [
         u(mn),
         u(gn),
         u(vn),
@@ -2377,10 +2381,10 @@ const dn = g({
   name: "PoseImage",
   setup() {
     const e = U(), t = le(), s = se(), n = me(), { brightness: o, contrast: r, saturate: a } = y(e), { filterStyle: i } = Ye({ brightness: o, contrast: r, saturate: a }), c = d(() => t.image), l = d(() => t.largeImage), m = d(() => s.flipped), h = d(() => n.property("imageSize")), k = A(null), I = d(() => {
-      const v = c.value, b = l.value, F = f(), { isKinetic: E } = y(F);
-      return !v || !v.url ? process.env.CLEAR_IMAGE : h.value.width <= 900 || E.value ? v.url : b.status === Ee ? b.url : (b.status !== ye && b.failCount < 4 && t.loadImage(b.url), v.url);
+      const v = c.value, b = l.value, F = f(), { isKinetic: z } = y(F);
+      return !v || !v.url ? process.env.CLEAR_IMAGE : h.value.width <= 900 || z.value ? v.url : b.status === Ee ? b.url : (b.status !== ye && b.failCount < 4 && t.loadImage(b.url), v.url);
     });
-    Z(
+    G(
       () => i.value,
       (v) => {
         k.value && (k.value.style = v);
@@ -2412,15 +2416,15 @@ const dn = g({
     }));
     A(null);
     const D = A(null);
-    Z([() => m.value, () => h.value, () => k.value], () => {
+    G([() => m.value, () => h.value, () => k.value], () => {
       w();
     });
     const w = () => {
       l.value && s.setProperty("animate", !1);
     };
-    return (v, b) => (Ge(), Ot("div", {
+    return (v, b) => (Ge(), Rt("div", {
       class: "image-holder unselectable",
-      style: Rt(I.value),
+      style: Kt(I.value),
       id: "image-holder",
       ref_key: "imageholder",
       ref: D
@@ -2431,40 +2435,40 @@ const dn = g({
 }, kn = g({
   name: "TsViewer",
   setup() {
-    const e = U(), t = f(), s = j(), n = ue(), o = le(), r = se(), a = M(), i = me(), c = ls(), { brightness: l, contrast: m, saturate: h } = y(e), { id: k } = y(t), { ready: I } = y(r), { accessibleSkins: D, percentage: w } = y(a), { slug: v } = y(s), { filterStyle: b } = Ye({ brightness: l, contrast: m, saturate: h }), F = te("authenticated"), { imagePoint: E, imageSize: $, viewportSize: x } = y(i), { spacing: H, horizontal: R, vertical: z, visible: B } = y(n), X = A(null), V = A(null), K = (O) => {
-      i.setZoomFromResize(O), console.log("resizeViewport", O);
+    const e = U(), t = f(), s = j(), n = ue(), o = le(), r = se(), a = M(), i = me(), c = us(), { brightness: l, contrast: m, saturate: h } = y(e), { id: k } = y(t), { ready: I } = y(r), { accessibleSkins: D, percentage: w } = y(a), { slug: v } = y(s), { filterStyle: b } = Ye({ brightness: l, contrast: m, saturate: h }), F = te("authenticated"), { imagePoint: z, imageSize: $, viewportSize: E } = y(i), { spacing: X, horizontal: K, vertical: x, visible: P } = y(n), O = A(null), V = A(null), N = (R) => {
+      i.setZoomFromResize(R), console.log("resizeViewport", R);
     }, pe = () => {
-      I.value && k.value !== 0 && i.initZoomFromElement(X.value);
+      I.value && k.value !== 0 && i.initZoomFromElement(O.value);
     };
-    Z(
+    G(
       () => F.value,
-      (O) => {
-        if (O) {
+      (R) => {
+        if (R) {
           o.loadSkin();
           return;
         }
         a.setProperty("id", 1);
       }
-    ), Z(
+    ), G(
       () => D.value,
-      (O, Oe) => {
-        O.length > Oe.length && o.loadSkin();
+      (R, Oe) => {
+        R.length > Oe.length && o.loadSkin();
       }
-    ), Z(
+    ), G(
       () => [k.value, I.value],
       () => {
         pe();
       }
-    ), us(), ze(() => {
-      Kt(() => c.$on("resize", K)), pe(), o.loadSkin();
+    ), ds(), ze(() => {
+      Nt(() => c.$on("resize", N)), pe(), o.loadSkin();
     }), Xe(() => {
-      c.$off("resize", K);
+      c.$off("resize", N);
     });
     const Me = d(
       () => "three-sixty-viewer flex-center unselectable image-background " + v.value
     ), _e = d(() => "image-background " + v.value), Ve = {
       class: Me.value,
-      ref: X
+      ref: O
     }, je = d(() => ({
       value: w / 100,
       color: "primary",
@@ -2475,19 +2479,19 @@ const dn = g({
       class: _e.value
     }));
     function $e() {
-      const O = {
-        imagePoint: E.value,
+      const R = {
+        imagePoint: z.value,
         imageSize: $.value,
-        viewportSize: x.value,
-        lines: H.value,
-        offsetX: R.value / 100,
-        offsetY: z.value / 100,
-        visible: B.value,
+        viewportSize: E.value,
+        lines: X.value,
+        offsetX: K.value / 100,
+        offsetY: x.value / 100,
+        visible: P.value,
         style: "z-index: 4"
       };
       return u("div", Ve, [
-        ut(u(qt, je.value), [[dt, w.value !== 100]]),
-        u(ps, O),
+        ut(u(Wt, je.value), [[dt, w.value !== 100]]),
+        u(fs, R),
         u(bn),
         u("div", Ue.value)
       ]);
@@ -2497,23 +2501,23 @@ const dn = g({
 }), In = g({
   name: "TsInteractionDetector",
   setup() {
-    const e = Symbol.for("user-auth"), t = te(e), s = f(), n = se(), o = ge(), r = me(), { authenticating: a } = y(t), { isFrozen: i } = y(s), c = d(() => a.value || i.value), l = A(!1), m = A(null), h = A(void 0), k = A(0), I = A(0), D = A(0), w = A(0), v = A(void 0), b = A(void 0), F = A(1), E = d(() => r.property("imagePoint")), $ = d(() => r.property("immobileHeight")), x = d(() => r.property("immobileWidth")), H = d(() => r.property("minimized")), { flipped: R } = y(n), z = d(() => R.value ? -1 : 1);
-    function B() {
+    const e = Symbol.for("user-auth"), t = te(e), s = f(), n = se(), o = ge(), r = me(), { authenticating: a } = y(t), { isFrozen: i } = y(s), c = d(() => a.value || i.value), l = A(!1), m = A(null), h = A(void 0), k = A(0), I = A(0), D = A(0), w = A(0), v = A(void 0), b = A(void 0), F = A(1), z = d(() => r.property("imagePoint")), $ = d(() => r.property("immobileHeight")), E = d(() => r.property("immobileWidth")), X = d(() => r.property("minimized")), { flipped: K } = y(n), x = d(() => K.value ? -1 : 1);
+    function P() {
       i.value && s.pokeFreeze();
     }
-    Z(i, (p) => {
+    G(i, (p) => {
       p && o.stopSpin();
-    }), Z(
-      () => z.value,
+    }), G(
+      () => x.value,
       (p) => console.log("reverseSpin", p)
     );
-    const X = d(() => r.property("size")), V = d({
+    const O = d(() => r.property("size")), V = d({
       get: () => o.property("frame"),
       set: (p) => {
         c.value || o.setFrame(p);
       }
-    }), K = d(() => Math.ceil(X.value.width / (pe.value / 1.7))), pe = d(() => o.property("renderCount")), Me = d(() => r.property("zoom")), _e = () => {
-      if (B(), !c.value) {
+    }), N = d(() => Math.ceil(O.value.width / (pe.value / 1.7))), pe = d(() => o.property("renderCount")), Me = d(() => r.property("zoom")), _e = () => {
+      if (P(), !c.value) {
         if (Me.value > 1) {
           r.animateToZoom(0);
           return;
@@ -2522,14 +2526,14 @@ const dn = g({
       }
     }, Ve = (p) => {
       const S = p.srcEvent.keyCode;
-      if (B(), c.value || (S === 16 && (l.value = !0), S !== 37 && // left
+      if (P(), c.value || (S === 16 && (l.value = !0), S !== 37 && // left
       S !== 38 && // up
       S !== 39 && // right
       S !== 40))
         return;
       let T = 0, C = 0;
-      const N = p.srcEvent.shiftKey ? 10 : 1;
-      T += S === 37 ? -3 : 0, T += S === 39 ? 3 : 0, C += S === 38 ? -3 : 0, C += S === 40 ? 3 : 0, T = T * N, C = C * N, tt({ x: T, y: C });
+      const L = p.srcEvent.shiftKey ? 10 : 1;
+      T += S === 37 ? -3 : 0, T += S === 39 ? 3 : 0, C += S === 38 ? -3 : 0, C += S === 40 ? 3 : 0, T = T * L, C = C * L, tt({ x: T, y: C });
     }, je = (p) => {
       if (p.key === "Shift") {
         l.value = !1;
@@ -2538,66 +2542,66 @@ const dn = g({
     }, Ue = () => {
       h.value = void 0, v.value = void 0, k.value = 0, I.value = 0;
     }, $e = (p) => {
-      if (B(), c.value) return;
+      if (P(), c.value) return;
       const S = p.pointers.length;
-      (S === 2 || S === 1 && l.value) && st(p), S === 1 && Mt(p);
-    }, O = (p) => {
+      (S === 2 || S === 1 && l.value) && st(p), S === 1 && _t(p);
+    }, R = (p) => {
       b.value = Date.now(), h.value = p.center, v.value = V.value;
     }, Oe = (p) => {
-      if (B(), c.value || (st(p), Math.abs(p.scale - F.value) < 0.02)) return;
+      if (P(), c.value || (st(p), Math.abs(p.scale - F.value) < 0.02)) return;
       const S = p.scale < w.value ? -1 : 1;
       w.value = p.scale, r.setZoomFromPointer({
         event: p,
         element: Re,
         increment: S
       }), F.value = p.scale;
-    }, Ct = (p) => {
-      h.value = p.center;
     }, zt = (p) => {
-      if (Date.now() - b.value > 1e3 || (B(), c.value) || Math.abs(p.velocityX) <= 0.02) return;
+      h.value = p.center;
+    }, Et = (p) => {
+      if (Date.now() - b.value > 1e3 || (P(), c.value) || Math.abs(p.velocityX) <= 0.02) return;
       const T = p.velocityX, C = p.deltaX;
       o.spinToFrame({
-        value: Ft({ distance: C, velocity: T }),
-        duration: At({ distance: C, velocity: T })
+        value: Mt({ distance: C, velocity: T }),
+        duration: Ft({ distance: C, velocity: T })
       });
-    }, Et = () => {
-      B(), !c.value && o.stopSpin();
-    }, xt = (p) => {
-      if (B(), c.value) return;
+    }, xt = () => {
+      P(), !c.value && o.stopSpin();
+    }, At = (p) => {
+      if (P(), c.value) return;
       p = p.srcEvent || p, p.preventDefault(), p.stopPropagation();
-      const S = p.deltaX, T = p.deltaY, C = 2, N = Math.abs(T) > Math.abs(S) ? 1 : -1;
-      (N === 1 && (T > C || T < -C) || p.ctrlKey) && Vt(p), N === -1 && (S > C || S < -C) && _t(p);
-    }, At = ({ velocity: p, distance: S }) => {
+      const S = p.deltaX, T = p.deltaY, C = 2, L = Math.abs(T) > Math.abs(S) ? 1 : -1;
+      (L === 1 && (T > C || T < -C) || p.ctrlKey) && jt(p), L === -1 && (S > C || S < -C) && Vt(p);
+    }, Ft = ({ velocity: p, distance: S }) => {
       const T = qe.newRectFromElement(m.value), C = 1 + Math.abs(S) / T.width;
       return Math.floor(Math.abs(p) * C * 500);
-    }, Ft = ({ velocity: p, distance: S }) => {
-      const T = qe.newRectFromElement(m.value), C = pe.value, N = Math.abs(S) / p / 1e3, Ut = Math.abs(S) / T.width * N, ve = Math.floor(Ut * C), nt = (S < 0 ? -1 : 1) * z.value;
+    }, Mt = ({ velocity: p, distance: S }) => {
+      const T = qe.newRectFromElement(m.value), C = pe.value, L = Math.abs(S) / p / 1e3, $t = Math.abs(S) / T.width * L, ve = Math.floor($t * C), nt = (S < 0 ? -1 : 1) * x.value;
       return nt > 0 && ve < V.value ? ve + C : nt < 0 && ve > V.value ? ve - C : ve;
     }, et = (p, S) => {
-      const T = Math.floor(p / K.value) * S * z.value;
+      const T = Math.floor(p / N.value) * S * x.value;
       return (v.value + T) % pe.value;
     }, tt = ({ x: p, y: S }) => {
-      if (B(), c.value) return;
-      const T = x.value || p === 0 ? E.value.left : E.value.left + p, C = $.value || S === 0 ? E.value.top : E.value.top + S, N = new G(T, C);
-      r.setImagePoint(N);
+      if (P(), c.value) return;
+      const T = E.value || p === 0 ? z.value.left : z.value.left + p, C = $.value || S === 0 ? z.value.top : z.value.top + S, L = new q(T, C);
+      r.setImagePoint(L);
     }, st = (p) => {
-      if (B(), c.value || H.value)
+      if (P(), c.value || X.value)
         return;
       const S = p.deltaX - k.value;
       k.value = p.deltaX;
       const T = p.deltaY - I.value;
       I.value = p.deltaY, tt({ x: S, y: T });
-    }, Mt = (p) => {
+    }, _t = (p) => {
       const S = p.center.x - h.value.x;
-      if (Math.abs(S) < K.value || l.value) return;
+      if (Math.abs(S) < N.value || l.value) return;
       const T = p.center.x < h.value.x ? -1 : 1;
       h.value = p.center, V.value = et(Math.abs(S), T), v.value = V.value;
-    }, _t = (p) => {
-      if (B(), c.value) return;
-      const S = p.deltaX - D.value, T = p.deltaX < 0 ? -1 : 1;
-      Math.abs(S) < K.value || (D.value = p.deltaX, V.value = et(Math.abs(S), T), v.value = V.value);
     }, Vt = (p) => {
-      if (B(), c.value) return;
+      if (P(), c.value) return;
+      const S = p.deltaX - D.value, T = p.deltaX < 0 ? -1 : 1;
+      Math.abs(S) < N.value || (D.value = p.deltaX, V.value = et(Math.abs(S), T), v.value = V.value);
+    }, jt = (p) => {
+      if (P(), c.value) return;
       const S = p.deltaY < 0 ? 2 : -2;
       r.setZoomFromPointer({
         event: p,
@@ -2608,17 +2612,17 @@ const dn = g({
     let Re;
     const Ke = new it(), Ne = new it();
     Ke.on({
-      swipe: zt,
-      wheel: xt,
+      swipe: Et,
+      wheel: At,
       keyup: je,
       keydown: Ve,
-      pointerdown: Et
+      pointerdown: xt
     }), Ne.on({
-      panstart: O,
+      panstart: R,
       panend: Ue,
       panmove: $e,
       pinch: Oe,
-      pinchstart: Ct,
+      pinchstart: zt,
       doubletap: _e
     }), ze(() => {
       Re = document.getElementById("image-holder"), Ke.setElement(m.value), Ne.setElement(m.value), document.addEventListener(
@@ -2626,19 +2630,19 @@ const dn = g({
         function(p) {
           p.scale;
         },
-        hs ? { passive: !1 } : !1
+        gs ? { passive: !1 } : !1
       );
     }), Xe(() => {
       Ke.destroy(), Ne.destroy();
     });
-    function jt() {
+    function Ut() {
       return u("div", {
         class: "detector",
         id: "detector",
         ref: m
       }, []);
     }
-    return () => jt();
+    return () => Ut();
   }
 }), An = /* @__PURE__ */ Object.assign({
   name: "TsPage",
@@ -2646,7 +2650,7 @@ const dn = g({
   inheritAttrs: !1
 }, {
   __name: "TsPage",
-  props: /* @__PURE__ */ Zt({
+  props: /* @__PURE__ */ Gt({
     drawerPadding: {
       type: Boolean,
       default: !0
@@ -2657,26 +2661,26 @@ const dn = g({
   }),
   emits: ["update:miniState"],
   setup(e) {
-    const t = mt(), s = Nt(e, "miniState"), n = Symbol.for("activity-tracking"), o = f(), r = te(n, null);
+    const t = mt(), s = Lt(e, "miniState"), n = Symbol.for("activity-tracking"), o = f(), r = te(n, null);
     ze(() => {
       o.active !== Y && (o.active = t.platform.is.mobile ? ft : xe);
     });
     const a = (i) => {
-      i && (r == null || r.trackEvent(Vs, {
+      i && (r == null || r.trackEvent(js, {
         pose_id: o.id || null,
         base_pose_id: i
       }));
     };
     return ze(async () => {
-      r && (await r.beginExplore(), r.trackEvent(_s, { from: null, to: "360" }), o.basePoseId && (r.beginSegment(String(o.basePoseId)), a(o.basePoseId)));
-    }), Z(
+      r && (await r.beginExplore(), r.trackEvent(Vs, { from: null, to: "360" }), o.basePoseId && (r.beginSegment(String(o.basePoseId)), a(o.basePoseId)));
+    }), G(
       () => o.basePoseId,
       (i, c) => {
         !i || i === c || (r == null || r.beginSegment(String(i)), a(i));
       }
     ), Xe(() => {
       r == null || r.end();
-    }), (i, c) => (Ge(), ot(re(fs), {
+    }), (i, c) => (Ge(), ot(re(hs), {
       miniState: s.value,
       "onUpdate:miniState": c[0] || (c[0] = (l) => s.value = l),
       "drawer-padding": e.drawerPadding,
@@ -2686,7 +2690,7 @@ const dn = g({
         Ce(re(Qs))
       ]),
       bottomDrawer: Le(() => [
-        re(t).platform.is.mobile ? (Ge(), ot(re(Sn), { key: 0 })) : Lt("", !0)
+        re(t).platform.is.mobile ? (Ge(), ot(re(Sn), { key: 0 })) : Zt("", !0)
       ]),
       default: Le(() => [
         Ce(re(In)),