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

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

@@ -1,16 +1,13 @@
-(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}.locked-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 E, computed as m, watch as X, onBeforeMount as Kt, defineComponent as v, h as u, withDirectives as tt, vShow as ht, inject as ee, openBlock as _e, createElementBlock as Rt, normalizeStyle as qt, createVNode as L, unref as ae, resolveComponent as ye, resolveDirective as Zt, createBlock as Ye, withCtx as H, createElementVNode as Ee, createTextVNode as lt, onMounted as Me, nextTick as Gt, onBeforeUnmount as st, useModel as Wt, createCommentVNode as Ht, mergeModels as Xt } from "vue";
-import { defineStore as he, getActivePinia as Yt, storeToRefs as b } from "pinia";
-import { useQuasar as gt, QBtn as Qt, QSeparator as pe, QLinearProgress as Jt } from "quasar";
-import { DEFAULT_SATURATE as es, DEFAULT_CONTRAST as ts, DEFAULT_BRIGHTNESS as ss, getConfig as os, useDynamicImages as ns, LOADED as Fe, LOADING as be, FAILED as ie, UNLOADED as ut, QUEUED as rs, DEFAULT_VISIBLE as as, DEFAULT_VERTICAL as is, DEFAULT_SPACING as cs, DEFAULT_HORIZONTAL as ls, Point as Z, Size as fe, Rect as Qe, DEFAULT as vt, NOTHING as St, BRIGHTNESS as Je, CONTRAST as yt, SATURATE as kt, CAMERA_ANGLE as Y, EFFECTS as Q, GRID as J, RELATED as ce, VIEWS as Ve, TOOLBAR as dt, MOVE as us, ZOOM as ds, SPIN as ms, ADJUSTMENTS as Ie, SKINS as Te, POSITION as Ae, SETTINGS as He, useFilterStyle as ot, useEventBus as ps, useWakeLock as fs } from "@figurosity/toolbox";
-import we from "@tweenjs/tween.js";
-import "tiny-emitter/instance";
-import { useRoute as hs } from "vue-router";
-import { CBasicTool as De, CExpansion as ge, CBaseButton as te, CBaseButtons as nt, CNewGridTool as gs, CDraggableDrawer as se, CIconButton as bt, CDraggableDrawers as vs, CGridOverlay as Ss, CToolPage as ys } from "@figurosity/consumer-controls";
-import "@figurosity/icons";
-import { EventManager as mt } from "mjolnir.js";
-import { supportsPassiveEvents as ks } from "detect-it";
-const Pe = {
+(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 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 { EventManager as it } from "mjolnir.js";
+import { supportsPassiveEvents as hs } from "detect-it";
+const ie = 26, De = {
   model(e) {
     const t = f();
     return e.models[t.id];
@@ -20,31 +17,31 @@ const Pe = {
     return typeof e.models[t.id] < "u";
   },
   propertyById(e) {
-    return (t, o, s = null) => e.models[t] && o in e.models[t] ? e.models[t][o] : s;
+    return (t, s, n = null) => e.models[t] && s in e.models[t] ? e.models[t][s] : n;
   },
   property() {
     const e = f();
-    return (t, o = null) => this.propertyById(e.id, t, o);
+    return (t, s = null) => this.propertyById(e.id, t, s);
   }
-}, je = {
-  setPropertyById(e, t, o) {
+}, Ae = {
+  setPropertyById(e, t, s) {
     this.models[e] || this.initModel(e), this.$patch({
       models: {
         [e]: {
           ...this.models[e],
           // Spread existing properties
-          [t]: o
+          [t]: s
           // Update the specific property
         }
       }
     });
   },
   setProperty(e, t) {
-    const o = f(), s = o.id;
-    o.id && this.$patch({
+    const s = f(), n = s.id;
+    s.id && this.$patch({
       models: {
-        [s]: {
-          ...this.models[s],
+        [n]: {
+          ...this.models[n],
           // Spread existing properties
           [e]: t
           // Update the specific property
@@ -52,98 +49,98 @@ const Pe = {
       }
     });
   }
-}, Ue = ({
+}, Fe = ({
   storeId: e,
   defaultValues: t = [],
-  state: o = {},
-  getters: s = {},
-  actions: n = {},
+  state: s = {},
+  getters: n = {},
+  actions: o = {},
   keyBy: r = "id"
 }) => he(e, {
   state: () => ({
     loading: !1,
     models: {},
-    ...o
+    ...s
   }),
   getters: {
-    ...Pe,
+    ...De,
     // Override base getters that read s.id directly so they honor keyBy.
-    model(i) {
-      const a = f();
-      return i.models[a[r]];
+    model(a) {
+      const i = f();
+      return a.models[i[r]];
     },
-    exists(i) {
-      const a = f();
-      return typeof i.models[a[r]] < "u";
+    exists(a) {
+      const i = f();
+      return typeof a.models[i[r]] < "u";
     },
     propertyChangedById() {
-      return (i, a) => this.propertyById(i, a) !== t[a];
+      return (a, i) => this.propertyById(a, i) !== t[i];
     },
-    propertyChanged(i) {
-      const a = f();
-      return (c) => i.models[a[r]] ? this.propertyById(a[r], c) !== t[c] : !1;
+    propertyChanged(a) {
+      const i = f();
+      return (c) => a.models[i[r]] ? this.propertyById(i[r], c) !== t[c] : !1;
     },
     property() {
-      const i = f();
-      return (a) => this.propertyById(i[r], a, t[a]);
+      const a = f();
+      return (i) => this.propertyById(a[r], i, t[i]);
     },
-    ...s
+    ...n
   },
   actions: {
-    ...je,
+    ...Ae,
     // Override base setProperty (which reads s.id) so writes from
     // useViewerUrlSync land on the keyBy-selected bucket.
-    setProperty(i, a) {
+    setProperty(a, i) {
       const l = f()[r];
       l && (this.models[l] || this.initModel(l), this.$patch({
         models: {
           [l]: {
             ...this.models[l],
-            [i]: a
+            [a]: i
           }
         }
       }));
     },
     reset() {
-      const a = f()[r], c = { ...t };
+      const i = f()[r], c = { ...t };
       this.$patch((l) => {
-        if (!l.models[a]) return console.log("Early return no models " + this.$id);
-        l.models[a] = {
-          ...l.models[a],
+        if (!l.models[i]) return console.log("Early return no models " + this.$id);
+        l.models[i] = {
+          ...l.models[i],
           // Preserve other properties in the model
           ...c
           // Apply the default values
         };
       });
     },
-    resetProperty(i) {
+    resetProperty(a) {
       const c = f()[r];
       this.$patch({
         models: {
           [c]: {
             ...this.models[c],
             // Spread existing properties
-            [i]: t[i]
+            [a]: t[a]
             // Update the specific property
           }
         }
       });
     },
-    initModel(i) {
-      typeof this.models[i] < "u" || this.$patch((a) => {
-        a.models[i] = {
+    initModel(a) {
+      typeof this.models[a] < "u" || this.$patch((i) => {
+        i.models[a] = {
           ...t
           // Spread default values into the new model
         };
       });
     },
-    ...n
+    ...o
   }
-}), It = {
-  brightness: ss,
-  contrast: ts,
-  saturate: es
-}, bs = {
+}), vt = {
+  brightness: Yt,
+  contrast: Xt,
+  saturate: Ht
+}, gs = {
   changed(e) {
     return this.propertyChanged("brightness") || this.propertyChanged("contrast") || this.propertyChanged("saturate");
   },
@@ -156,21 +153,21 @@ const Pe = {
   saturate() {
     return this.property("saturate");
   }
-}, $ = Ue({
+}, U = Fe({
   storeId: "360-adjustments",
-  defaultValues: Object.assign({}, It),
-  getters: bs,
+  defaultValues: Object.assign({}, vt),
+  getters: gs,
   keyBy: "basePoseId"
 });
-function Is(e, t) {
-  let o = Ts(t, e);
-  return o < 0 && (o = e + o), isNaN(Math.floor(o)) ? 0 : Math.floor(o);
+function vs(e, t) {
+  let s = Ss(t, e);
+  return s < 0 && (s = e + s), isNaN(Math.floor(s)) ? 0 : Math.floor(s);
 }
-function Ts(e, t) {
+function Ss(e, t) {
   return Math[e > 0 ? "floor" : "ceil"](e % t);
 }
-let re = null, q = null;
-const ws = {
+let oe = null, L = null;
+const ys = {
   animating: !1,
   condisabledtrast: !1,
   disabledTimeout: null,
@@ -179,7 +176,7 @@ const ws = {
   renderCount: 36,
   index: 1,
   frame: 1
-}, Cs = {}, Ds = {
+}, bs = {}, ks = {
   changed() {
     const e = this.model;
     return e && e.frame !== e.index;
@@ -191,25 +188,25 @@ const ws = {
     const e = this.model;
     return e ? e.frame : 0;
   }
-}, Ps = {
-  initModel({ id: e, index: t = 0, renderCount: o = 36 }) {
+}, Is = {
+  initModel({ id: e, index: t = 0, renderCount: s = 36 }) {
     typeof this.models[e] < "u" || (this.models[e] = {
       index: t,
-      renderCount: o,
+      renderCount: s,
       animating: !1,
       condisabledtrast: !1,
       disabledTimeout: null,
       start: t,
-      max: o - 1,
+      max: s - 1,
       frame: t
     });
   },
   reset() {
     const e = this.model;
     if (!e) return;
-    const t = e.index, o = e.frame;
-    if (!(t === void 0 || o === void 0 || t === o)) {
-      if (Math.abs(t - o) > 1) {
+    const t = e.index, s = e.frame;
+    if (!(t === void 0 || s === void 0 || t === s)) {
+      if (Math.abs(t - s) > 1) {
         this.spinToFrame({ value: t });
         return;
       }
@@ -220,57 +217,57 @@ const ws = {
    * Stop the spin
    */
   stopSpin() {
-    q && q.stop();
+    L && L.stop();
   },
   setFrame(e, t) {
-    const o = f();
-    t = t || o.id;
-    const n = { ...t ? this.models[t] : this.model };
-    re && window.cancelAnimationFrame(re), q && (q.stop(), q = null);
-    const r = n.max;
-    e > r && (e = 0), e < 0 && (e = r), n.animating = !1, n.frame = e, o.pulseKinetic(), this.$patch({
+    const s = f();
+    t = t || s.id;
+    const o = { ...t ? this.models[t] : this.model };
+    oe && window.cancelAnimationFrame(oe), L && (L.stop(), L = null);
+    const r = o.max;
+    e > r && (e = 0), e < 0 && (e = r), o.animating = !1, o.frame = e, s.pulseKinetic(), this.$patch({
       models: {
         [t]: {
           ...this.models[t],
           // Spread existing properties
-          ...n
+          ...o
           // Update the specific property
         }
       }
     });
   },
   spinToFrame({ value: e, duration: t = 450 }) {
-    const s = f().id, n = this.property("renderCount"), r = this.property("frame");
+    const n = f().id, o = this.property("renderCount"), r = this.property("frame");
     e = parseInt(e);
-    const i = this;
+    const a = this;
     if (e === r)
       return;
-    this.setProperty("start", r), re && window.cancelAnimationFrame(re), q && (q.stop(), q = null);
-    function a(c) {
-      re = window.requestAnimationFrame(a), we.update(c);
+    this.setProperty("start", r), oe && window.cancelAnimationFrame(oe), L && (L.stop(), L = null);
+    function i(c) {
+      oe = window.requestAnimationFrame(i), Ie.update(c);
     }
-    this.setPropertyById(s, "animating", !0), q = new we.Tween({ value: r }).easing(we.Easing.Quartic.Out).to({ value: e }, t).onUpdate(function(c) {
+    this.setPropertyById(n, "animating", !0), L = 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 d = Is(n, l);
-      d !== r && (i.setPropertyById(s, "frame", d), f().pulseKinetic());
+      const m = vs(o, l);
+      m !== r && (a.setPropertyById(n, "frame", m), f().pulseKinetic());
     }).onComplete(function() {
-      window.cancelAnimationFrame(re), re = null, i.setPropertyById(s, "animationFrame", null), i.setPropertyById(s, "animating", !1);
-    }).start(), a();
+      window.cancelAnimationFrame(oe), oe = null, a.setPropertyById(n, "animationFrame", null), a.setPropertyById(n, "animating", !1);
+    }).start(), i();
   }
-}, ve = Ue({
+}, ge = Fe({
   storeId: "360-spin",
-  defaultValues: Object.assign({}, ws),
-  state: Cs,
-  getters: Ds,
-  actions: Ps
+  defaultValues: Object.assign({}, ys),
+  state: bs,
+  getters: ks,
+  actions: Is
 });
-function Be() {
-  const { freeServer: e, paidServer: t } = os();
-  return ns({ freeServer: e, paidServer: t });
+function Pe() {
+  const { freeServer: e, paidServer: t } = Qt();
+  return Jt({ freeServer: e, paidServer: t });
 }
-function Tt(e, t) {
-  for (const o in t)
-    t[o] && typeof t[o] == "object" && !Array.isArray(t[o]) ? (e[o] || (e[o] = {}), Tt(e[o], t[o])) : e[o] = t[o];
+function St(e, t) {
+  for (const s in t)
+    t[s] && typeof t[s] == "object" && !Array.isArray(t[s]) ? (e[s] || (e[s] = {}), St(e[s], t[s])) : e[s] = t[s];
 }
 const M = he("360-skins", {
   state: () => ({
@@ -280,14 +277,14 @@ const M = he("360-skins", {
     censoredSkinIds: []
   }),
   getters: {
-    ...Pe,
+    ...De,
     accessKeyById(e) {
       return (t) => e.accessKeys[t];
     },
     accessibleSkinIdsById(e) {
       return (t) => {
-        const o = this.propertyById(t, "skinIds", []), s = this.blockedSkinIds || [];
-        return o.filter((n) => s.indexOf(parseInt(n)) === -1);
+        const s = this.propertyById(t, "skinIds", []), n = this.blockedSkinIds || [];
+        return s.filter((o) => n.indexOf(parseInt(o)) === -1);
       };
     },
     inaccessibleSkinIds(e) {
@@ -298,11 +295,11 @@ const M = he("360-skins", {
       return [.../* @__PURE__ */ new Set([...e.censoredSkinIds, ...this.inaccessibleSkinIds])];
     },
     accessibleSkinsById(e) {
-      return (t) => this.accessibleSkinIdsById(t).map((o) => e.models[t][o]);
+      return (t) => this.accessibleSkinIdsById(t).map((s) => e.models[t][s]);
     },
     accessibleSkins(e) {
-      const o = f().id;
-      return this.accessibleSkinIdsById(o).map((s) => e.models[o][s]);
+      const s = f().id;
+      return this.accessibleSkinIdsById(s).map((n) => e.models[s][n]);
     },
     changed(e) {
       return this.skinId !== 1;
@@ -312,24 +309,24 @@ const M = he("360-skins", {
       return ((t = this.appSkinsStore) == null ? void 0 : t.slugs) || {};
     },
     currentSkin(e) {
-      const t = f(), o = e.models[t.id];
-      if (this.skinId && o && o[this.skinId])
-        return o[this.skinId];
+      const t = f(), s = e.models[t.id];
+      if (this.skinId && s && s[this.skinId])
+        return s[this.skinId];
     },
     currentSkinById(e) {
       return (t) => {
-        const o = e.models[t], s = this.accessibleSkinIdsById(t), n = s && s.length > 0 ? s[0] : void 0;
-        if (n && o && o[n])
-          return o[n];
+        const s = e.models[t], n = this.accessibleSkinIdsById(t), o = n && n.length > 0 ? n[0] : void 0;
+        if (o && s && s[o])
+          return s[o];
       };
     },
     skins(e) {
-      const o = f().id;
-      return e.models[o] ? e.models[o].skinIds.map((s) => Object.assign({}, e.models[o][s])).sort((s, n) => s.order > n.order ? 1 : -1) : [];
+      const s = f().id;
+      return e.models[s] ? e.models[s].skinIds.map((n) => Object.assign({}, e.models[s][n])).sort((n, o) => n.order > o.order ? 1 : -1) : [];
     },
     skin(e) {
-      const o = f().id, s = e.models[o];
-      return s ? s[s.skinId] : null;
+      const s = f().id, n = e.models[s];
+      return n ? n[n.skinId] : null;
     },
     /**
      * @deprecated
@@ -346,8 +343,8 @@ const M = he("360-skins", {
       return this.skinId;
     },
     skinId(e) {
-      const o = f().id, s = e.models[o];
-      return s ? s.skinId : 1;
+      const s = f().id, n = e.models[s];
+      return n ? n.skinId : 1;
     },
     selected(e) {
       return this.skinId !== 1;
@@ -358,13 +355,13 @@ const M = he("360-skins", {
     // TODO rewire for new data structure
     percentage(e) {
       const t = this.getCurrentImageSet();
-      let o = (t == null ? void 0 : t.percent) || 0;
-      return Math.floor(o);
+      let s = (t == null ? void 0 : t.percent) || 0;
+      return Math.floor(s);
     },
     propertyByIdAndSkinId(e) {
-      return (t, o, s) => {
-        const n = e.models[t];
-        return n && n[o] && n[o][s] ? n[o][s] : null;
+      return (t, s, n) => {
+        const o = e.models[t];
+        return o && o[s] && o[s][n] ? o[s][n] : null;
       };
     },
     slugsById(e) {
@@ -372,57 +369,57 @@ const M = he("360-skins", {
     }
   },
   actions: {
-    ...je,
-    initModel({ id: e, skinId: t, accessKeys: o, censoredSkinIds: s = [], renderCount: n, skins: r, skinIds: i, uuid: a }) {
-      const c = ue(), { getPoseLarge: l, getPoseSmall: d } = Be();
-      this.censoredSkinIds = s, this.accessKeys = o;
+    ...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();
+      this.censoredSkinIds = n, this.accessKeys = s;
       const h = this.appColorsStore;
       j();
-      const g = (h == null ? void 0 : h.backgroundColor) || "ffffff", k = (h == null ? void 0 : h.color) || "000000", I = {
+      const k = (h == null ? void 0 : h.backgroundColor) || "ffffff", I = (h == null ? void 0 : h.color) || "000000", D = {
         [e]: {
           id: e,
           skinId: t,
-          skinIds: i
+          skinIds: a
         }
       }, w = {};
-      Object.keys(r).forEach((S) => {
-        S = parseInt(S);
-        const T = r[S], _ = {
+      Object.keys(r).forEach((v) => {
+        v = parseInt(v);
+        const b = r[v], F = {
           poseId: e,
-          id: S,
-          skinId: S,
-          uuid: a,
-          name: T.name,
-          slug: T.slug,
-          order: T.order,
+          id: v,
+          skinId: v,
+          uuid: i,
+          name: b.name,
+          slug: b.slug,
+          order: b.order,
           effects: {}
         };
-        Object.keys(Ce).forEach((z) => {
-          z = parseInt(z);
-          const O = Ce[z], A = [], G = [], N = z === 3 ? k : g;
-          for (let x = 0; x < n; x++) {
-            const D = {
-              uuid: a,
-              skin: T.slug,
-              effect: O.slug,
-              color: N,
-              index: x
-            }, W = d(D), V = l(D);
-            A.push(W), G.push(V);
+        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 = {
+              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 = {
-              skinId: S,
+              skinId: v,
               failCount: 0,
-              effectId: parseInt(O.id),
-              backgroundColor: N,
+              effectId: parseInt($.id),
+              backgroundColor: R,
               poseId: e,
-              skin: T.slug,
-              status: ut
+              skin: b.slug,
+              status: rt
             };
-            w[W] = { ...K, url: W }, w[V] = { ...K, url: V };
+            w[X] = { ...K, url: X }, w[V] = { ...K, url: V };
           }
-          _.effects[z] = {
-            [N]: {
-              status: ut,
+          F.effects[E] = {
+            [R]: {
+              status: rt,
               active: !1,
               percent: 0,
               loadedCount: 0,
@@ -430,61 +427,61 @@ const M = he("360-skins", {
               started: !1,
               complete: !1,
               images: {
-                large: G,
-                small: A
+                large: H,
+                small: x
               },
               previewLoaded: !1
             }
           };
-        }), I[e][S] = _;
-      }), this.$patch((S) => {
-        Tt(S.models, I);
+        }), D[e][v] = F;
+      }), this.$patch((v) => {
+        St(v.models, D);
       }), c.initModels(w);
     },
     /**
      * Retrieves a set of large and small images for each skin, effect & color combination
      * @param {*} param0
      */
-    getImageSet({ id: e, skinId: t, effectId: o, color: s }) {
-      var n, r, i, a, c;
-      return (c = (a = (i = (r = (n = this.models) == null ? void 0 : n[e]) == null ? void 0 : r[t]) == null ? void 0 : i.effects) == null ? void 0 : a[o]) == null ? void 0 : c[s];
+    getImageSet({ id: e, skinId: t, effectId: s, color: n }) {
+      var o, r, a, i, c;
+      return (c = (i = (a = (r = (o = this.models) == null ? void 0 : o[e]) == null ? void 0 : r[t]) == null ? void 0 : a.effects) == null ? void 0 : i[s]) == null ? void 0 : c[n];
     },
     getCurrentImageSet() {
-      const t = f().id, o = this.skinId, s = j(), n = s.id, r = s.id === 3 ? this.appColorsStore.color : this.appColorsStore.backgroundColor;
-      return this.getImageSet({ id: t, skinId: o, effectId: n, color: r });
+      const t = f().id, s = this.skinId, n = j(), o = n.id, r = n.id === 3 ? this.appColorsStore.color : this.appColorsStore.backgroundColor;
+      return this.getImageSet({ id: t, skinId: s, effectId: o, color: r });
     },
     reset() {
       this.setProperty("skinId", 1);
     },
     // TODO Replace setPropertyByIdAndSkinId with setPropertyByImageSet
-    setStatus({ id: e, skinId: t, effectId: o, color: s }, n) {
-      this.setPropertyByImageSet({ id: e, skinId: t, effectId: o, color: s }, "status", n);
+    setStatus({ id: e, skinId: t, effectId: s, color: n }, o) {
+      this.setPropertyByImageSet({ id: e, skinId: t, effectId: s, color: n }, "status", o);
     },
-    setPropertyByIdAndSkinId(e, t, o, s) {
-      this.$patch((n) => {
-        !n.models[e] || !n.models[e][t] || (n.models[e] = {
-          ...n.models[e],
+    setPropertyByIdAndSkinId(e, t, s, n) {
+      this.$patch((o) => {
+        !o.models[e] || !o.models[e][t] || (o.models[e] = {
+          ...o.models[e],
           [t]: {
-            ...n.models[e][t],
-            [o]: s
+            ...o.models[e][t],
+            [s]: n
           }
         });
       });
     },
-    setPropertyByImageSet({ id: e, skinId: t, effectId: o, color: s }, n, r) {
-      const i = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
-      this.$patch((a) => {
-        i && (a.models[e] = {
-          ...a.models[e],
+    setPropertyByImageSet({ id: e, skinId: t, effectId: s, color: n }, o, r) {
+      const a = this.getImageSet({ id: e, skinId: t, effectId: s, color: n });
+      this.$patch((i) => {
+        a && (i.models[e] = {
+          ...i.models[e],
           [t]: {
-            ...a.models[e][t],
+            ...i.models[e][t],
             effects: {
-              ...a.models[e][t].effects,
-              [o]: {
-                ...a.models[e][t].effects[o],
-                [s]: {
-                  ...a.models[e][t].effects[o][s],
-                  [n]: r
+              ...i.models[e][t].effects,
+              [s]: {
+                ...i.models[e][t].effects[s],
+                [n]: {
+                  ...i.models[e][t].effects[s][n],
+                  [o]: r
                 }
               }
             }
@@ -492,78 +489,78 @@ const M = he("360-skins", {
         });
       });
     },
-    getPropertyByImageSet({ id: e, skinId: t, effectId: o, color: s }, n) {
-      const r = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
+    getPropertyByImageSet({ id: e, skinId: t, effectId: s, color: n }, o) {
+      const r = this.getImageSet({ id: e, skinId: t, effectId: s, color: n });
       if (r)
-        return r[n];
+        return r[o];
     },
-    setPropertyBySkinId(e, t, o) {
-      const s = this.model;
-      this.$patch((n) => {
-        !n.models[s.id] || !n.models[s.id][e] || (n.models[s.id] = {
-          ...n.models[s.id],
+    setPropertyBySkinId(e, t, s) {
+      const n = this.model;
+      this.$patch((o) => {
+        !o.models[n.id] || !o.models[n.id][e] || (o.models[n.id] = {
+          ...o.models[n.id],
           [e]: {
-            ...n.models[s.id][e],
-            [t]: o
+            ...o.models[n.id][e],
+            [t]: s
           }
         });
       });
     },
-    updatePercentComplete({ id: e, skinId: t, effectId: o, color: s }) {
-      const n = ue(), r = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
+    updatePercentComplete({ id: e, skinId: t, effectId: s, color: n }) {
+      const o = le(), r = this.getImageSet({ id: e, skinId: t, effectId: s, color: n });
       if (!r) return;
-      const i = r.images.small;
-      let a = 0, c = 0, l = 0;
-      const d = i.length;
-      i.forEach((I) => {
-        switch (n.models[I].status) {
-          case ie:
-            a++;
+      const a = r.images.small;
+      let i = 0, c = 0, l = 0;
+      const m = a.length;
+      a.forEach((D) => {
+        switch (o.models[D].status) {
+          case ae:
+            i++;
             break;
-          case Fe:
+          case Ee:
             c++;
             break;
-          case be:
+          case ye:
             l++;
             break;
         }
       });
-      const h = { id: e, skinId: t, effectId: o, color: s };
-      if (d === 0)
+      const h = { id: e, skinId: t, effectId: s, color: n };
+      if (m === 0)
         return this.setPropertyByImageSet(h, "percent", 0), 0;
-      const g = l * 0.25 + (c + a), k = Math.floor(g / d * 100);
-      return this.setPropertyByImageSet(h, "percent", k), this.setPropertyByImageSet(h, "status", Fe), this.setPropertyByImageSet(h, "failedCount", a), this.setPropertyByImageSet(h, "loadedCount", c), k;
+      const k = l * 0.25 + (c + i), I = Math.floor(k / m * 100);
+      return this.setPropertyByImageSet(h, "percent", I), this.setPropertyByImageSet(h, "status", Ee), this.setPropertyByImageSet(h, "failedCount", i), this.setPropertyByImageSet(h, "loadedCount", c), I;
     },
     setSelectedBySlug(e, t) {
-      var i, a;
-      const o = f();
-      if (t = t || o.id, !this.models[t]) return;
-      const s = this.models[t].skinIds;
-      (!((i = this.appSkinsStore) == null ? void 0 : i.hasAccess(e)) || !((a = this.slugs) != null && a[e])) && (e = "normal");
+      var a, i;
+      const s = f();
+      if (t = t || s.id, !this.models[t]) return;
+      const n = this.models[t].skinIds;
+      (!((a = this.appSkinsStore) == null ? void 0 : a.hasAccess(e)) || !((i = this.slugs) != null && i[e])) && (e = "normal");
       let r = this.slugs[e] ?? 1;
-      r = parseInt(r), r = s.includes(r) ? r : 1, this.models[t].skinId = parseInt(r);
+      r = parseInt(r), r = n.includes(r) ? r : 1, this.models[t].skinId = parseInt(r);
     }
   }
-}), pt = (e, t = "sm") => {
-  var i, a;
-  const o = ve(), n = M().getCurrentImageSet(), r = o.property("frame");
-  if (((a = (i = n == null ? void 0 : n.images) == null ? void 0 : i.small) == null ? void 0 : a.length) > 0) {
-    const c = t === "sm" ? n.images.small[r] : n.images.large[r];
+}), ct = (e, t = "sm") => {
+  var a, i;
+  const s = ge(), o = M().getCurrentImageSet(), r = s.property("frame");
+  if (((i = (a = o == null ? void 0 : o.images) == null ? void 0 : a.small) == null ? void 0 : i.length) > 0) {
+    const c = t === "sm" ? o.images.small[r] : o.images.large[r];
     return e.models[c];
   }
   return null;
-}, ue = he("360-images", {
+}, le = he("360-images", {
   state: () => ({
     models: {}
   }),
   getters: {
     image(e) {
-      return pt(e);
+      return ct(e);
     },
     largeImage(e) {
-      return pt(e, "lg");
+      return ct(e, "lg");
     },
-    ...Pe
+    ...De
   },
   actions: {
     initModels(e) {
@@ -575,17 +572,17 @@ const M = he("360-skins", {
      * @param { Function } success On load callback
      */
     loadImage(e, t = void 0) {
-      if (this.models[e].status === be) return;
-      if (typeof Image > "u") return this.setStatus(e, ie);
-      this.setStatus(e, rs);
-      const n = new Image(), r = this;
-      n.onabort = function(i) {
-        r.setStatus(this.src, ie), this.onerror = this.onabort = this.onload = null;
-      }, n.onerror = function(i) {
-        r.setStatus(this.src, ie), this.onerror = this.onabort = this.onload = null;
-      }, n.onload = function(i) {
-        r.setStatus(this.src, Fe), t && typeof t == "function" && t(this.src);
-      }, n.src = e, this.setStatus(e, be);
+      if (this.models[e].status === ye) return;
+      if (typeof Image > "u") return this.setStatus(e, ae);
+      this.setStatus(e, es);
+      const o = new Image(), r = this;
+      o.onabort = function(a) {
+        r.setStatus(this.src, ae), this.onerror = this.onabort = this.onload = null;
+      }, o.onerror = function(a) {
+        r.setStatus(this.src, ae), this.onerror = this.onabort = this.onload = null;
+      }, o.onload = function(a) {
+        r.setStatus(this.src, Ee), t && typeof t == "function" && t(this.src);
+      }, o.src = e, this.setStatus(e, ye);
     },
     /**
      * Loads the images for the pose
@@ -598,12 +595,12 @@ const M = he("360-skins", {
      * Load all of the images for all of the skins/views
      */
     loadPreview() {
-      var c, l, d;
-      const e = ve(), t = M(), o = j();
+      var c, l, m;
+      const e = ge(), t = M(), s = j();
       this.appColorsStore;
-      const s = f(), n = t.currentSkin, r = e.indexById(s.id), i = o.id === 3 ? "000000" : "ffffff", a = (d = (l = (c = n == null ? void 0 : n.effects) == null ? void 0 : c[o.id]) == null ? void 0 : l[i]) == null ? void 0 : d.images.small;
-      if ((a == null ? void 0 : a.length) > 0 && r >= 0) {
-        const h = a[r];
+      const n = f(), o = t.currentSkin, r = e.indexById(n.id), a = s.id === 3 ? "000000" : "ffffff", i = (m = (l = (c = o == null ? void 0 : o.effects) == null ? void 0 : c[s.id]) == null ? void 0 : l[a]) == null ? void 0 : m.images.small;
+      if ((i == null ? void 0 : i.length) > 0 && r >= 0) {
+        const h = i[r];
         this.loadImage(h, this.loadSkin);
         return;
       }
@@ -618,12 +615,12 @@ const M = he("360-skins", {
      * @param url
      */
     loadViewCallback(e) {
-      const t = M(), o = this.models[e], s = o.skinId, n = o.poseId, r = o.effectId, i = o.backgroundColor;
+      const t = M(), s = this.models[e], n = s.skinId, o = s.poseId, r = s.effectId, a = s.backgroundColor;
       t.updatePercentComplete({
-        id: n,
-        skinId: s,
+        id: o,
+        skinId: n,
         effectId: r,
-        color: i
+        color: a
       });
     },
     /**
@@ -632,28 +629,28 @@ const M = he("360-skins", {
      * @returns
      */
     loadSkin() {
-      var s;
+      var n;
       const t = M().getCurrentImageSet();
       if (!t || t.percent === 100) return;
-      const o = (s = t == null ? void 0 : t.images) == null ? void 0 : s.small;
-      o && o.forEach((n) => {
-        this.models[n], t.status = be, setTimeout(() => {
-          this.loadImage(n, this.loadViewCallback);
+      const s = (n = t == null ? void 0 : t.images) == null ? void 0 : n.small;
+      s && s.forEach((o) => {
+        this.models[o], t.status = ye, setTimeout(() => {
+          this.loadImage(o, this.loadViewCallback);
         }, 15);
       });
     },
     setStatus(e, t) {
-      const o = this.models[e];
-      if (!o) return;
-      if (t === ie) {
-        this.updateFailCount(e), o.status = t;
+      const s = this.models[e];
+      if (!s) return;
+      if (t === ae) {
+        this.updateFailCount(e), s.status = t;
         return;
       }
-      o.status = t, M().updatePercentComplete({
-        skinId: o.skinId,
-        effectId: o.effectId,
-        color: o.backgroundColor,
-        id: o.poseId
+      s.status = t, M().updatePercentComplete({
+        skinId: s.skinId,
+        effectId: s.effectId,
+        color: s.backgroundColor,
+        id: s.poseId
       });
     },
     /**
@@ -666,8 +663,8 @@ const M = he("360-skins", {
      * @param id
      */
     updateFailCount(e) {
-      this.$patch((n) => {
-        const r = n.models[e];
+      this.$patch((o) => {
+        const r = o.models[e];
         r && (r.failCount = (r.failCount ?? 0) + 1);
       });
       const t = this.models[e];
@@ -678,16 +675,16 @@ const M = he("360-skins", {
         }, 250);
         return;
       }
-      const o = M(), s = {
+      const s = M(), n = {
         skinId: t.skinId,
         effectId: t.effectId,
         color: t.backgroundColor,
         id: t.poseId
       };
-      t.status = ie, o.setStatus(s, ie);
+      t.status = ae, s.setStatus(n, ae);
     }
   }
-}), Ce = {
+}), Te = {
   1: {
     id: 1,
     name: "None",
@@ -709,14 +706,14 @@ const M = he("360-skins", {
     models: {}
   }),
   getters: {
-    ...Pe,
+    ...De,
     effects(e) {
-      return Object.keys(Ce).map((t) => Ce[t]);
+      return Object.keys(Te).map((t) => Te[t]);
     },
     current(e) {
       const t = f();
       if (t.id !== 0)
-        return Ce[e.models[t.id].effectId];
+        return Te[e.models[t.id].effectId];
     },
     name(e) {
       var t;
@@ -727,9 +724,9 @@ const M = he("360-skins", {
       return ((t = this.current) == null ? void 0 : t.slug) || "none";
     },
     id(e) {
-      var o, s;
+      var s, n;
       const t = f();
-      return ((s = (o = this.models) == null ? void 0 : o[t.id]) == null ? void 0 : s.effectId) || 1;
+      return ((n = (s = this.models) == null ? void 0 : s[t.id]) == null ? void 0 : n.effectId) || 1;
     },
     selected() {
       return this.id !== 1;
@@ -739,18 +736,18 @@ const M = he("360-skins", {
     }
   },
   actions: {
-    ...je,
+    ...Ae,
     initModel(e) {
       this.models[e] = {
         effectId: 1
       };
     },
     setEffectId(e, t) {
-      const o = f();
-      t = t || o.id, this.$patch((s) => {
-        if (!s.models[t]) return console.log("No effect");
-        s.models[t] = {
-          ...s.models[t],
+      const s = f();
+      t = t || s.id, this.$patch((n) => {
+        if (!n.models[t]) return console.log("No effect");
+        n.models[t] = {
+          ...n.models[t],
           effectId: e
         };
       });
@@ -759,23 +756,23 @@ const M = he("360-skins", {
       this.setEffectId(1);
     },
     setSelectedBySlug(e, t) {
-      const o = f();
-      t = t || o.id;
-      const s = this.effects.find((r) => r.slug === e), n = s ? s.id : 1;
+      const s = f();
+      t = t || s.id;
+      const n = this.effects.find((r) => r.slug === e), o = n ? n.id : 1;
       this.$patch((r) => {
         r.models[t] && (r.models[t] = {
           ...r.models[t],
-          effectId: n
+          effectId: o
         });
       });
     }
   }
-}), wt = {
-  horizontal: ls,
-  spacing: cs,
-  vertical: is,
-  visible: as
-}, Bs = {
+}), yt = {
+  horizontal: os,
+  spacing: ns,
+  vertical: ss,
+  visible: ts
+}, Ts = {
   changed() {
     return this.propertyChanged("visible") || !1;
   },
@@ -791,18 +788,18 @@ const M = he("360-skins", {
   visible() {
     return this.property("visible");
   }
-}, de = Ue({
+}, ue = Fe({
   storeId: "360-grid",
-  defaultValues: wt,
-  getters: Bs,
+  defaultValues: yt,
+  getters: Ts,
   keyBy: "basePoseId"
-}), oe = he("360-pose", {
+}), se = he("360-pose", {
   state: () => ({
     loading: !1,
     models: {}
   }),
   getters: {
-    ...Pe,
+    ...De,
     skinId() {
       const e = f();
       return this.propertyById(e.id, "skinId");
@@ -830,89 +827,89 @@ const M = he("360-skins", {
       const t = f();
       console.log("setting flipped from 360", e), this.appFlippedStore && this.appFlippedStore.toggle(t.id, e);
     },
-    initModel({ id: e, cameraIds: t, uuid: o, setIds: s, setUuid: n }) {
+    initModel({ id: e, cameraIds: t, uuid: s, setIds: n, setUuid: o }) {
       typeof this.models[e] < "u" || (this.models[e] = {
         cameraIds: t,
         previewsLoaded: !1,
         ready: !1,
-        setIds: s,
-        setUuid: n,
-        uuid: o
+        setIds: n,
+        setUuid: o,
+        uuid: s
       });
     },
-    ...je
+    ...Ae
   }
-}), Xe = ({
+}), Ze = ({
   imageSize: e,
   imagePoint: t,
-  maxDimension: o,
-  origin: s,
-  scaleByRatio: n,
+  maxDimension: s,
+  origin: n,
+  scaleByRatio: o,
   size: r,
-  zoom: i
+  zoom: a
 }) => {
-  const a = {}, c = o / r.shortDimension(), l = (c - 1) * (i / 100) + 1;
+  const i = {}, c = s / r.shortDimension(), l = (c - 1) * (a / 100) + 1;
   if (l < 1 || l > c) return {};
-  const d = xs({
+  const m = ws({
     factor: l,
     size: r,
-    maxDimension: o
-  }), h = Ms({
-    scaleByRatio: n,
+    maxDimension: s
+  }), h = zs({
+    scaleByRatio: o,
     imageSize: e,
-    newSize: d,
+    newSize: m,
     imagePoint: t,
     size: r,
-    origin: s
+    origin: n
   });
-  return a.imagePoint = h, a.imageSize = d, a.size = r, a.zoom = i, Object.assign(a, _s({ maxDimension: o, newSize: d, size: r }));
-}, xs = ({ factor: e, size: t, maxDimension: o }) => {
-  let s = t.shortDimension() * e;
-  return s = s > o ? o : s, new fe(s, s);
-}, Es = ({ imagePoint: e, imageSize: t, newSize: o, size: s, origin: n }) => {
-  const r = (o.width - t.width) / t.width;
-  let i = new Z(
-    -(r * n.left) - Math.abs(e.left),
-    -(r * n.top) - Math.abs(e.top)
+  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 }) => {
+  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 }) => {
+  const r = (s.width - t.width) / t.width;
+  let a = new G(
+    -(r * o.left) - Math.abs(e.left),
+    -(r * o.top) - Math.abs(e.top)
   );
-  return o.width < s.width && (i.left = -(r * n.left) + Math.abs(e.left)), o.height < s.height && (i.top = -(r * n.top) + Math.abs(e.top)), i;
-}, zs = ({ event: e, element: t }) => (e = e.srcEvent ? e.srcEvent : e, Z.getPointFromInteractionEvent(e, t)), As = ({ origin: e, imageSize: t }) => !(e.left > 0 && e.top > 0 && e.left < t.width && e.top < t.height), _s = ({ maxDimension: e, newSize: t, size: o }) => {
-  const s = t.width <= o.width, n = t.height <= o.height, r = {};
-  return r.immobileHeight = n, r.immobileWidth = s, r.maximized = Math.round(t.width) >= e, r.minimized = s && n, r.movable = !s || !n, r;
-}, et = ({ point: e, size: t, newSize: o }) => {
-  let s = new Z(t.width - o.width, t.height - o.height);
-  return o.width >= t.width && (e.left >= 0 && (e.left = 0), e.left < s.left && (e.left = s.left)), o.height >= t.height && (e.top >= 0 && (e.top = 0), e.top < s.top && (e.top = s.top)), o.width < t.width && (e.left = s.left / 2), o.height < t.height && (e.top = s.top / 2), e;
-}, Ms = ({
+  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 }) => {
+  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);
+  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 = ({
   scaleByRatio: e = !0,
   imagePoint: t,
-  imageSize: o,
-  newSize: s,
-  origin: n,
+  imageSize: s,
+  newSize: n,
+  origin: o,
   size: r
 }) => {
   if (e) {
-    const a = Fs({ imageSize: o, newSize: s, imagePoint: t });
-    return et({ point: a, newSize: s, size: r });
+    const i = Es({ imageSize: s, newSize: n, imagePoint: t });
+    return He({ point: i, newSize: n, size: r });
   }
-  const i = Es({
+  const a = Ds({
     imagePoint: t,
-    imageSize: o,
-    newSize: s,
+    imageSize: s,
+    newSize: n,
     size: r,
-    origin: n
+    origin: o
   });
-  return et({ point: i, newSize: s, size: r });
-}, Fs = ({ imageSize: e, newSize: t, imagePoint: o }) => {
-  let s = new Z(
+  return He({ point: a, newSize: n, size: r });
+}, Es = ({ imageSize: e, newSize: t, imagePoint: s }) => {
+  let n = new G(
     (e.width - t.width) / 2,
     (e.height - t.height) / 2
   );
-  return new Z(o.left + s.left, o.top + s.top);
-}, le = {
+  return new G(s.left + n.left, s.top + n.top);
+}, ce = {
   maxDimension: 2048,
   zoom: 0,
-  imagePoint: new Z(0, 0),
-  viewportPoint: new Z(0, 0),
+  imagePoint: new G(0, 0),
+  viewportPoint: new G(0, 0),
   size: new fe(0, 0),
   imageSize: new fe(0, 0),
   immobileWidth: !1,
@@ -920,7 +917,7 @@ const M = he("360-skins", {
   maximized: !1,
   minimized: !1,
   animating: !1
-}, Vs = {}, js = {
+}, xs = {}, As = {
   changed() {
     return this.propertyChanged("zoom");
   },
@@ -945,20 +942,20 @@ const M = he("360-skins", {
     return this.propertyById(t.id, "zoom") > 0;
   },
   imagePoint(e) {
-    const t = f(), o = e.models[t.id];
-    return o ? o.imagePoint : le.imagePoint;
+    const t = f(), s = e.models[t.id];
+    return s ? s.imagePoint : ce.imagePoint;
   },
   imageSize(e) {
-    const t = f(), o = e.models[t.id];
-    return o ? o.imageSize : le.imageSize;
+    const t = f(), s = e.models[t.id];
+    return s ? s.imageSize : ce.imageSize;
   },
   viewportSize(e) {
-    const t = f(), o = e.models[t.id];
-    return o ? o.size : le.size;
+    const t = f(), s = e.models[t.id];
+    return s ? s.size : ce.size;
   }
 };
-let ze = null, ke = null;
-const Us = {
+let Be = null, Se = null;
+const Fs = {
   reset() {
     this.setZoom(0);
   },
@@ -970,35 +967,35 @@ const Us = {
    * @param speed
    */
   animateToZoom(e, t = 500) {
-    const o = this.model;
-    let s = { zoom: o.zoom }, n = { zoom: e };
-    const r = this, i = (a) => {
-      if (ze = window.requestAnimationFrame(i), !o.animating) {
-        window.cancelAnimationFrame(ze);
+    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);
         return;
       }
-      we.update(a);
+      Ie.update(i);
     };
-    ke && ke.stop && (ke.stop(), ke = null), r.setProperty("animating", !0), ke = new we.Tween(s).to(n, t).delay(0).onUpdate(function(a) {
-      let c = parseInt(a.zoom);
-      c !== o.zoom && r.setZoom(c);
-    }).onComplete(function(a) {
-      let c = parseInt(a.zoom);
-      window.cancelAnimationFrame(ze), ze = null, r.setZoom(c), r.setProperty("animating", !1);
-    }).start(), i();
+    Se && Se.stop && (Se.stop(), Se = null), r.setProperty("animating", !0), Se = new Ie.Tween(n).to(o, t).delay(0).onUpdate(function(i) {
+      let c = parseInt(i.zoom);
+      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);
+    }).start(), a();
   },
   /**
    * Initializes the zoom when a new image is loaded
    * @param {HTMLElement} data.el The viewport
    */
   initZoomFromElement(e) {
-    const o = f().id, s = {};
-    Object.keys(le).forEach((c) => {
-      s[c] = le[c];
+    const s = f().id, n = {};
+    Object.keys(ce).forEach((c) => {
+      n[c] = ce[c];
     });
-    const n = Qe.newRectFromElement(e), r = new fe(n.width, n.height), i = (r.width - r.shortDimension()) / 2, a = (r.height - r.shortDimension()) / 2;
-    s.id = o, s.imagePoint = new Z(i, a), s.imageSize = new fe(r.shortDimension(), r.shortDimension()), s.size = r, s.zoom = 0, this.$patch((c) => {
-      c.models[o] = { ...s };
+    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) => {
+      c.models[s] = { ...n };
     });
   },
   /**
@@ -1010,12 +1007,12 @@ const Us = {
     const t = this.model;
     if (!t) return;
     t.id;
-    const o = this.property("size"), s = this.property("imageSize"), n = et({
+    const s = this.property("size"), n = this.property("imageSize"), o = He({
       point: e,
-      size: o,
-      newSize: s
+      size: s,
+      newSize: n
     });
-    this.setProperty("imagePoint", n);
+    this.setProperty("imagePoint", o);
   },
   /**
    * Sets the zoom on a percentage scale from minimum zoom = 1
@@ -1023,7 +1020,7 @@ const Us = {
    */
   setZoom(e) {
     if (e < 0 || e > 100 || !this.model) return;
-    const t = { ...this.model }, o = Xe({
+    const t = { ...this.model }, s = Ze({
       imagePoint: t.imagePoint,
       imageSize: t.imageSize,
       maxDimension: t.maxDimension,
@@ -1032,32 +1029,32 @@ const Us = {
       size: t.size,
       zoom: e
     });
-    this.$patch((s) => {
-      s.models[t.id] = { ...t, ...o };
+    this.$patch((n) => {
+      n.models[t.id] = { ...t, ...s };
     });
   },
   /**
    * set the zoom from the wheel event or pinch
    */
-  setZoomFromPointer({ event: e, element: t, increment: o }) {
-    const s = this.model;
-    if (!s) return;
-    const n = s.zoom + o;
-    if (n < 0 || n > 100) return;
-    const r = s.imageSize, i = zs({ event: e, element: t }), a = As({
-      origin: i,
+  setZoomFromPointer({ event: e, element: t, increment: s }) {
+    const n = this.model;
+    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({
+      origin: a,
       imageSize: r
-    }), c = Xe({
-      imagePoint: s.imagePoint,
+    }), c = Ze({
+      imagePoint: n.imagePoint,
       imageSize: r,
-      maxDimension: s.maxDimension,
-      origin: i,
-      scaleByRatio: a,
-      size: s.size,
-      zoom: n
+      maxDimension: n.maxDimension,
+      origin: a,
+      scaleByRatio: i,
+      size: n.size,
+      zoom: o
     });
     this.$patch((l) => {
-      l.models[s.id] = { ...s, ...c };
+      l.models[n.id] = { ...n, ...c };
     });
   },
   /**
@@ -1069,28 +1066,28 @@ const Us = {
   //
   setZoomFromResize(e) {
     if (!this.model) return;
-    const t = { ...this.model }, o = new fe(e.width, e.height), s = Xe({
+    const t = { ...this.model }, s = new fe(e.width, e.height), n = Ze({
       imagePoint: t.imagePoint,
       imageSize: t.imageSize,
       maxDimension: t.maxDimension,
       scaleByRatio: !0,
-      size: o,
+      size: s,
       zoom: t.zoom
     });
-    this.$patch((n) => {
-      n.models[t.id] = { ...t, ...s };
+    this.$patch((o) => {
+      o.models[t.id] = { ...t, ...n };
     });
   }
-}, ne = Ue({
+}, me = Fe({
   storeId: "360-zoom",
-  defaultValues: le,
-  state: Vs,
-  getters: js,
-  actions: Us
-}), Ls = {
-  ...It,
-  ...wt,
-  ...le
+  defaultValues: ce,
+  state: xs,
+  getters: As,
+  actions: Fs
+}), Ms = {
+  ...vt,
+  ...yt,
+  ...ce
 }, f = he("360", {
   state: () => ({
     id: 0,
@@ -1099,12 +1096,10 @@ const Us = {
     // fire on camera change. Set by init360Viewer from the loaded
     // pose entity.
     basePoseId: 0,
-    active: vt,
+    active: pt,
     animate: !1,
     width: 0,
     models: {},
-    _lockedTimer: null,
-    lockedModal: !1,
     isKinetic: !1,
     _kineticTimer: null
   }),
@@ -1112,26 +1107,24 @@ const Us = {
     hydrating() {
       return this.appPosesStore.loading;
     },
-    changed(e) {
-      const t = $(), o = de();
-      return t.changed || o.changed;
+    changed() {
+      const e = U(), t = ue();
+      return e.changed || t.changed;
     },
     isLoaded() {
       return !1;
     },
-    isLocked(e) {
-      return this.appLockedStore.isLocked(e.id);
-    },
-    lockedModel(e) {
-      return this.appLockedStore.getModel(e.id) || {};
+    isFrozen(e) {
+      var t;
+      return ((t = this.appFreezeStore) == null ? void 0 : t.isFrozen(e.basePoseId)) || !1;
     },
     propertyChangedById() {
-      return (e, t) => this.propertyById(e, t) !== Ls[t];
+      return (e, t) => this.propertyById(e, t) !== Ms[t];
     },
     propertyById(e) {
-      return (t, o, s = null) => {
-        const n = e.models[t];
-        return n && o in n ? n[o] : s;
+      return (t, s, n = null) => {
+        const o = e.models[t];
+        return o && s in o ? o[s] : n;
       };
     },
     color() {
@@ -1142,19 +1135,15 @@ const Us = {
     }
   },
   actions: {
-    setLockedModal(e = !0, t = 2e3) {
-      this.lockedModal = e, this._clearLockedTimer(), e && (this._lockedTimer = setTimeout(() => {
-        this.lockedModal = !1, this._clearLockedTimer();
-      }, t));
-    },
-    unlock(e) {
-      e = e || this.id, this.appLockedStore.unlock({ poseId: e });
+    pokeFreeze() {
+      var e;
+      (e = this.appFreezeStore) == null || e.poke(this.basePoseId);
     },
     subscribe(e) {
       console.log("[360-store] subscribe called, bus:", e == null ? void 0 : e.__bus_id);
       const t = this;
-      e.$on("pose:loaded", (o) => {
-        console.log("[360-store] pose:loaded fired"), t.init360Viewer({ response: o });
+      e.$on("pose:loaded", (s) => {
+        console.log("[360-store] pose:loaded fired"), t.init360Viewer({ response: s });
       });
     },
     setActive(e) {
@@ -1172,34 +1161,34 @@ const Us = {
       return e = Array.isArray(e) ? e : [e], e.includes(this.active);
     },
     init360Viewer({ response: e }) {
-      const t = e.entities, o = e.result, s = parseInt(o.poses[0]), n = t.poses[s], r = this.appSkinsStore.inaccessibleSkinIds, i = [], a = this.appSkinsStore.accessKeys, c = this.appSkinsStore.models, l = $(), d = j(), h = de(), g = ue(), k = oe(), I = M(), w = ve(), S = ne(), T = (n == null ? void 0 : n.basePoseId) ?? s;
-      if (this.basePoseId = T, l.initModel(T), d.initModel(s), h.initModel(T), k.initModel({
-        id: s,
-        cameraIds: n.cameraIds,
-        uuid: n.uuid,
-        setIds: n.setIds,
-        setUuid: t.sets[t.poses[o.poses[0]].setIds[0]].uuid
-      }), I.initModel({
-        id: s,
-        skinId: parseInt(o.skins[0]),
-        censoredSkinIds: i,
+      const t = e.entities, s = e.result, n = parseInt(s.poses[0]), o = t.poses[n], r = this.appSkinsStore.inaccessibleSkinIds, a = [], i = this.appSkinsStore.accessKeys, c = this.appSkinsStore.models, l = U(), m = j(), h = ue(), k = le(), I = se(), D = M(), w = ge(), v = me(), b = (o == null ? void 0 : o.basePoseId) ?? n;
+      if (this.basePoseId = b, l.initModel(b), m.initModel(n), h.initModel(b), I.initModel({
+        id: n,
+        cameraIds: o.cameraIds,
+        uuid: o.uuid,
+        setIds: o.setIds,
+        setUuid: t.sets[t.poses[s.poses[0]].setIds[0]].uuid
+      }), D.initModel({
+        id: n,
+        skinId: parseInt(s.skins[0]),
+        censoredSkinIds: a,
         inaccessibleSkinIds: r,
-        renderCount: n.renderCount,
+        renderCount: o.renderCount,
         skins: c,
-        skinIds: n.skinIds,
-        uuid: n.uuid,
-        accessKeys: a
+        skinIds: o.skinIds,
+        uuid: o.uuid,
+        accessKeys: i
       }), w.initModel({
-        id: s,
-        censoredSkinIds: i,
+        id: n,
+        censoredSkinIds: a,
         inaccessibleSkinIds: r,
-        index: n.index,
-        renderCount: n.renderCount
-      }), S.initModel(s), this.id = s, e.canonical) {
-        const _ = e.canonical;
-        w.setFrame(_.index, s), d.setSelectedBySlug(_.effect, s), I.setSelectedBySlug(_.skin, s);
+        index: o.index,
+        renderCount: o.renderCount
+      }), v.initModel(n), this.id = n, e.canonical) {
+        const F = e.canonical;
+        w.setFrame(F.index, n), m.setSelectedBySlug(F.effect, n), D.setSelectedBySlug(F.skin, n);
       }
-      k.setPropertyById(s, "ready", !0), g.loadPreview();
+      I.setPropertyById(n, "ready", !0), k.loadPreview();
     },
     set360FromResponse(e) {
       this.models = { ...this.models, ...e };
@@ -1207,17 +1196,14 @@ const Us = {
     isSelectedById(e, t) {
       switch (t) {
         case "adjustments":
-          return propertyChangedById(e, "brightness") || propertyChangedById(e, "contrast") || propertyChangedById(e, "saturate");
+          return this.propertyChangedById(e, "brightness") || this.propertyChangedById(e, "contrast") || this.propertyChangedById(e, "saturate");
         default:
-          return propertyChangedById(e, t);
+          return this.propertyChangedById(e, t);
       }
     },
     _clearKineticTimer() {
       this._kineticTimer && (clearTimeout(this._kineticTimer), this._kineticTimer = null);
     },
-    _clearLockedTimer() {
-      this._lockedTimer && (clearTimeout(this._lockedTimer), this._lockedTimer = null);
-    },
     // Main API: call whenever there’s user-driven motion.
     pulseKinetic(e = 100) {
       this.isKinetic = !0, this._clearKineticTimer(), this._kineticTimer = setTimeout(() => {
@@ -1229,193 +1215,189 @@ const Us = {
       e ? this.pulseKinetic(t) : (this._clearKineticTimer(), this.isKinetic = !1);
     },
     $reset() {
-      this._clearKineticTimer(), this._clearLockedTimer(), this.isKinetic = !1;
+      this._clearKineticTimer(), this.isKinetic = !1;
     }
   }
-}), $s = "tool:switched", Os = "pose:viewed", Ns = "skin:changed", ft = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-KyHJpw0b.js"), "../i18n/es/index.js": () => import("./index-M-P_KhqK.js") }), B = (e = "../i18n") => {
-  const t = gt(), o = E({}), s = m(() => t.lang.isoName || "en-US"), n = async () => {
-    const r = `${e}/${s.value}/index.js`;
-    if (ft[r])
+}), _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") => {
+  const t = mt(), s = A({}), n = d(() => t.lang.isoName || "en-US"), o = async () => {
+    const r = `${e}/${n.value}/index.js`;
+    if (lt[r])
       try {
-        const i = await ft[r]();
-        i.default && Object.assign(o.value, i.default);
-      } catch (i) {
-        console.error(`Error loading i18n for ${s.value}`, i);
+        const a = await lt[r]();
+        a.default && Object.assign(s.value, a.default);
+      } catch (a) {
+        console.error(`Error loading i18n for ${n.value}`, a);
       }
     else
       console.error(`Module not found: ${r}`);
   };
-  return X(
-    () => s.value,
+  return Z(
+    () => n.value,
     () => {
-      n();
+      o();
     },
     { immediate: !0 }
-  ), Kt(() => {
-    n();
-  }), { lang: o };
-}, F = ({ tab: e = St, store: t, options: o = [] }) => {
-  const s = Yt(), n = f(s), r = m({
-    get: () => n.isExpanded(o),
+  ), $t(() => {
+    o();
+  }), { lang: s };
+}, _ = ({ tab: e = ft, store: t, options: s = [] }) => {
+  const n = Wt(), o = f(n), r = d({
+    get: () => o.isExpanded(s),
     set: (c) => {
-      c && n.setActive(e);
+      c && o.setActive(e);
     }
-  }), i = m(() => t && t.changed);
-  return { click: () => n.setActive(e), expanded: r, selected: i };
-}, Ks = v({
+  }), a = d(() => t && t.changed);
+  return { click: () => o.setActive(e), expanded: r, selected: a };
+}, Us = g({
   name: "TsBrightnessTool",
   props: {
     noIcons: Boolean
   },
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = m(() => s.hasAccess("bct")), r = (l) => s.block(l), i = $(), a = m({
-      get: () => i.property("brightness"),
-      set: (l) => i.setProperty("brightness", l)
+  setup(e, { slots: t, emit: s }) {
+    const n = f(), o = d(() => n.hasAccess("bct")), r = (l) => n.block(l), a = U(), i = d({
+      get: () => a.property("brightness"),
+      set: (l) => a.setProperty("brightness", l)
     });
     function c() {
       const l = {
         class: "ts-brightness-tool",
-        modelValue: a.value,
-        "onUpdate:modelValue": (d) => a.value = d,
+        modelValue: i.value,
+        "onUpdate:modelValue": (m) => i.value = m,
         noicons: e.noIcons,
-        hasAccess: n.value,
+        hasAccess: o.value,
         onBlockAccess: r
       };
-      return u(De, l);
+      return u(we, l);
     }
     return () => c();
   }
-}), Rs = v({
+}), $s = g({
   name: "TsContrastTool",
   props: {
     noIcons: Boolean
   },
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = m(() => s.hasAccess("cct")), r = (l) => s.block(l), i = $(), a = m({
-      get: () => i.property("contrast"),
-      set: (l) => i.setProperty("contrast", l)
+  setup(e, { slots: t, emit: s }) {
+    const n = f(), o = d(() => n.hasAccess("cct")), r = (l) => n.block(l), a = U(), i = d({
+      get: () => a.property("contrast"),
+      set: (l) => a.setProperty("contrast", l)
     });
     function c() {
       const l = {
         class: "ts-contrast-tool",
-        modelValue: a.value,
-        "onUpdate:modelValue": (d) => a.value = d,
+        modelValue: i.value,
+        "onUpdate:modelValue": (m) => i.value = m,
         noicons: e.noIcons,
-        hasAccess: n.value,
+        hasAccess: o.value,
         onBlockAccess: r,
         type: "contrast"
       };
-      return u(De, l);
+      return u(we, l);
     }
     return () => c();
   }
-}), qs = v({
+}), Os = g({
   name: "TsSaturateTool",
   props: {
     noIcons: Boolean
   },
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = m(() => s.hasAccess("sct")), r = (l) => s.block(l), i = $(), a = m({
-      get: () => i.property("saturate"),
-      set: (l) => i.setProperty("saturate", l)
+  setup(e, { slots: t, emit: s }) {
+    const n = f(), o = d(() => n.hasAccess("sct")), r = (l) => n.block(l), a = U(), i = d({
+      get: () => a.property("saturate"),
+      set: (l) => a.setProperty("saturate", l)
     });
     function c() {
       const l = {
         class: "ts-saturate-tool",
-        modelValue: a.value,
-        "onUpdate:modelValue": (d) => a.value = d,
+        modelValue: i.value,
+        "onUpdate:modelValue": (m) => i.value = m,
         noicons: e.noIcons,
-        hasAccess: n.value,
+        hasAccess: o.value,
         onBlockAccess: r,
         type: "saturate"
       };
-      return u(De, l);
+      return u(we, l);
     }
     return () => c();
   }
-}), Ct = v({
+}), bt = g({
   name: "TsAdjustmentSection",
-  setup(e, { slots: t, emit: o }) {
-    function s() {
-      return [u(Ks), u(Rs), u(qs)];
+  setup(e, { slots: t, emit: s }) {
+    function n() {
+      return [u(Us), u($s), u(Os)];
     }
-    return () => s();
+    return () => n();
   }
-}), Zs = v({
+}), Rs = g({
   name: "TsAdjustmentExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const s = $(), { expanded: n, selected: r } = F({
-      store: s,
-      tab: Je,
-      options: [Je, yt, kt]
-    }), { lang: i } = B(), a = m(() => {
+  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(() => {
       var l;
-      return (l = i.value.ts) == null ? void 0 : l.controls.adjustments.title;
+      return (l = a.value.ts) == null ? void 0 : l.controls.adjustments.title;
     });
     function c() {
       const l = {
         class: "ts-adjustment-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (d) => n.value = d,
-        label: a.value,
+        modelValue: o.value,
+        "onUpdate:modelValue": (m) => o.value = m,
+        label: i.value,
         selected: r.value,
         icon: "f_brightness"
       };
-      return u(ge, l, () => u(Ct));
+      return u(de, l, () => u(bt));
     }
     return () => c();
   }
-}), Le = v({
-  name: "LockedOverlay",
-  props: {
-    label: { type: String, required: !1 }
-  },
-  emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), { isLocked: n, lockedModal: r } = b(s);
-    function i() {
-      return tt(u("div", {
-        class: "locked-overlay",
-        onClick: () => r.value = !0
-      }, []), [[ht, n.value]]);
+}), Je = g({
+  name: "FrozenOverlay",
+  setup() {
+    const e = f(), { isFrozen: t } = y(e);
+    function s() {
+      return ut(u("div", {
+        class: "frozen-overlay",
+        onClick: () => e.pokeFreeze()
+      }, []), [[dt, t.value]]);
     }
-    return () => i();
+    return () => s();
   }
-}), Dt = v({
+}), kt = g({
   name: "TsCameraSection",
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = Symbol.for("CameraSection"), r = ee(n);
-    function i() {
-      const a = {
+  setup() {
+    const e = f(), t = Symbol.for("CameraSection"), s = te(t);
+    function n() {
+      const o = {
         class: "ts-camera-section"
-      }, c = [];
-      return c.push(u(Le)), r && c.push(u(r, { id: s.id })), u("div", a, c);
+      }, r = [];
+      return r.push(u(Je)), s && r.push(u(s, { id: e.id })), u("div", o, r);
     }
-    return () => i();
+    return () => n();
   }
-}), Gs = v({
+}), Ks = g({
   name: "TsRelatedExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), { expanded: n } = F({
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), { expanded: o } = _({
       options: Y,
       tab: Y
-    }), r = m(() => {
-      var a;
-      return (a = s.value.ts) == null ? void 0 : a.controls.camera.title;
+    }), r = d(() => {
+      var i;
+      return (i = n.value.ts) == null ? void 0 : i.controls.camera.title;
     });
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         class: "ts-camera-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (c) => n.value = c,
+        modelValue: o.value,
+        "onUpdate:modelValue": (c) => o.value = c,
         label: r.value,
         icon: "f_camera_angle"
       };
-      return u(ge, a, () => u(Dt));
+      return u(de, i, () => u(kt));
     }
-    return () => i();
+    return () => a();
   }
-}), Ws = v({
+}), Ns = g({
   name: "TsEffectsButton",
   props: {
     id: Number,
@@ -1424,50 +1406,50 @@ const Us = {
     size: { type: String, default: "sm" }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = oe(), r = M(), i = ue(), a = j(), { getThumbnail: c } = Be(), { id: l } = b(a), { color: d } = b(s), { skinId: h, slug: g } = b(r), k = m(() => n.property("setUuid"));
-    m(() => r.getPropertyByImageSet(
+  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"));
+    d(() => r.getPropertyByImageSet(
       {
-        id: s.id,
+        id: n.id,
         skinId: h.value,
         effectId: e.id,
-        color: d.value
+        color: m.value
       },
       "percent"
-    )), m(() => e.size === "sm" ? "64px" : "94px"), m(() => ({
+    )), d(() => e.size === "sm" ? "64px" : "94px"), d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    const I = m(() => ({
+    const D = d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
-    })), w = (T) => {
-      a.setEffectId(T), i.loadSkin();
+    })), w = (b) => {
+      i.setEffectId(b), a.loadSkin();
     };
-    function S() {
-      const T = {
+    function v() {
+      const b = {
         class: "ts-effects-button",
         label: e.label,
         key: e.id,
         size: e.size,
         image: c({
-          uuid: k.value,
-          image: g.value,
+          uuid: I.value,
+          image: k.value,
           effect: e.slug,
-          color: d.value
+          color: m.value
         }),
         onClick: () => w(e.id),
         selected: l.value === e.id,
         dark: !0,
         noWrap: !0,
         type: "radio",
-        style: I.value
+        style: D.value
       };
-      return u(te, T);
+      return u(q, b);
     }
-    return () => S();
+    return () => v();
   }
-}), Pt = v({
+}), It = g({
   name: "TsEffectsSection",
   props: {
     noWrap: Boolean,
@@ -1475,152 +1457,184 @@ const Us = {
     size: { type: String, default: "sm" }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = j(), { effects: n } = b(s);
-    function r() {
-      const i = [];
-      return i.push(u(Le)), n.value.forEach((c) => {
-        i.push(
-          u(Ws, {
-            id: c.id,
-            label: c.name,
-            slug: c.slug,
+  setup(e) {
+    const t = j(), { effects: s } = y(t);
+    function n() {
+      const o = [];
+      return o.push(u(Je)), s.value.forEach((a) => {
+        o.push(
+          u(Ns, {
+            id: a.id,
+            label: a.name,
+            slug: a.slug,
             noWrap: !0,
             size: e.size,
-            type: "radio",
-            label: c.name
+            type: "radio"
           })
         );
-      }), u(nt, {}, () => i);
+      }), u(Qe, {}, () => o);
     }
-    return () => r();
+    return () => n();
   }
-}), Hs = v({
+}), Ls = g({
   name: "TsEffectsExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = j(), { selected: r } = b(n), { expanded: i } = F({
-      store: n,
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = j(), { selected: r } = y(o), { expanded: a } = _({
+      store: o,
       options: Q,
       tab: Q
-    }), a = m(() => {
+    }), i = d(() => {
       var l;
-      return (l = s.value.ts) == null ? void 0 : l.controls.effects.title;
+      return (l = n.value.ts) == null ? void 0 : l.controls.effects.title;
     });
     function c() {
       const l = {
         class: "ts-effects-expansion",
-        modelValue: i.value,
-        "onUpdate:modelValue": (d) => i.value = d,
-        label: a.value,
+        modelValue: a.value,
+        "onUpdate:modelValue": (m) => a.value = m,
+        label: i.value,
         selected: r.value,
         icon: "f_contrast"
       };
       return u(
-        ge,
+        de,
         l,
-        () => u(Pt, { noWrap: !1, size: "sm", class: "q-py-sm" })
+        () => u(It, { noWrap: !1, size: "sm", class: "q-py-sm" })
       );
     }
     return () => c();
   }
-}), Bt = v({
+}), Tt = g({
   name: "TsGridTool",
   props: {
     noIcons: Boolean
   },
   emits: ["input"],
-  setup(e, { slots: t, emit: o }) {
-    const s = de(), n = f(), r = m(() => n.hasAccess("grd")), i = (g) => n.block(g), a = m({
-      get: () => s.property("spacing"),
-      set: (g) => s.setProperty("spacing", g)
-    }), c = m({
-      get: () => s.property("vertical"),
-      set: (g) => s.setProperty("vertical", g)
-    }), l = m({
-      get: () => s.property("horizontal"),
-      set: (g) => s.setProperty("horizontal", g)
-    }), d = m({
-      get: () => s.property("visible"),
-      set: (g) => s.setProperty("visible", g)
+  setup(e) {
+    const t = ue(), s = f(), n = d(() => s.hasAccess("grd")), o = (m) => s.block(m), r = d({
+      get: () => t.property("spacing"),
+      set: (m) => t.setProperty("spacing", m)
+    }), a = d({
+      get: () => t.property("vertical"),
+      set: (m) => t.setProperty("vertical", m)
+    }), i = d({
+      get: () => t.property("horizontal"),
+      set: (m) => t.setProperty("horizontal", m)
+    }), c = d({
+      get: () => t.property("visible"),
+      set: (m) => t.setProperty("visible", m)
     });
-    function h() {
-      const g = {
+    function l() {
+      const m = {
         class: "ts-grid-tool",
-        visible: d.value,
-        "onUpdate:visible": (k) => d.value = k,
-        lines: a.value,
-        "onUpdate:lines": (k) => a.value = k,
-        vertical: c.value,
-        "onUpdate:vertical": (k) => c.value = k,
-        horizontal: l.value,
-        "onUpdate:horizontal": (k) => l.value = k,
+        visible: c.value,
+        "onUpdate:visible": (h) => c.value = h,
+        lines: r.value,
+        "onUpdate:lines": (h) => r.value = h,
+        vertical: a.value,
+        "onUpdate:vertical": (h) => a.value = h,
+        horizontal: i.value,
+        "onUpdate:horizontal": (h) => i.value = h,
         noIcons: e.noIcons,
-        hasAccess: r.value,
-        onBlockAccess: i
+        hasAccess: n.value,
+        onBlockAccess: o
       };
-      return u(gs, g, () => []);
+      return u(ds, m, () => []);
     }
-    return () => h();
+    return () => l();
   }
-}), Xs = v({
+}), Zs = g({
   name: "TsGridExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = de(), { expanded: r, selected: i } = F({
-      store: n,
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = ue(), { expanded: r, selected: a } = _({
+      store: o,
       options: J,
       tab: J
-    }), a = m(() => {
+    }), i = d(() => {
       var l;
-      return (l = s.value.ts) == null ? void 0 : l.controls.grid.title;
+      return (l = n.value.ts) == null ? void 0 : l.controls.grid.title;
     });
     function c() {
       const l = {
         class: "ts-grid-expansion",
         modelValue: r.value,
-        "onUpdate:modelValue": (d) => r.value = d,
-        label: a.value,
-        selected: i.value,
+        "onUpdate:modelValue": (m) => r.value = m,
+        label: i.value,
+        selected: a.value,
         icon: "f_grid"
       };
-      return u(ge, l, () => u(Bt));
+      return u(de, l, () => u(Tt));
     }
     return () => c();
   }
-}), xt = v({
+}), wt = g({
   name: "TsRelatedSection",
   setup() {
-    const e = Symbol.for("RelatedSection"), t = ee(e);
-    function o() {
-      const s = {
+    const e = Symbol.for("RelatedSection"), t = te(e);
+    function s() {
+      const n = {
         class: "ts-related-section q-mx-lg q-my-sm"
-      }, n = [];
-      return t && n.push(u(t)), u("div", s, n);
+      }, o = [];
+      return t && o.push(u(t)), u("div", n, o);
     }
-    return () => o();
+    return () => s();
   }
-}), Ys = v({
+}), Gs = g({
   name: "TsRelatedExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), { expanded: n } = F({
-      options: ce,
-      tab: ce
-    }), r = m(() => {
-      var a;
-      return (a = s.value.ts) == null ? void 0 : a.controls.related.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), { expanded: o } = _({
+      options: ee,
+      tab: ee
+    }), r = d(() => {
+      var i;
+      return (i = n.value.ts) == null ? void 0 : i.controls.related.title;
     });
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         class: "ts-related-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (c) => n.value = c,
+        modelValue: o.value,
+        "onUpdate:modelValue": (c) => o.value = c,
         label: r.value,
         icon: "f_related"
       };
-      return u(ge, a, () => u(xt));
+      return u(de, i, () => u(wt));
     }
-    return () => i();
+    return () => a();
   }
-}), Qs = Symbol.for("activity-tracking"), Js = v({
+}), Dt = g({
+  name: "TsSavedSection",
+  setup() {
+    const e = Symbol.for("SavedSection"), t = te(e);
+    function s() {
+      return t ? u("div", {
+        class: "ts-saved-section q-mx-lg q-my-sm"
+      }, [u(t)]) : null;
+    }
+    return () => s();
+  }
+}), qs = g({
+  name: "TsSavedExpansion",
+  setup() {
+    const { lang: e } = P(), { expanded: t } = _({
+      options: ie,
+      tab: ie
+    }), s = d(() => {
+      var o, r;
+      return ((r = (o = e.value.ts) == null ? void 0 : o.controls.saved) == null ? void 0 : r.title) || "Saved";
+    });
+    function n() {
+      const o = {
+        class: "ts-saved-expansion",
+        modelValue: t.value,
+        "onUpdate:modelValue": (r) => t.value = r,
+        label: s.value,
+        icon: "f_save"
+      };
+      return u(de, o, () => u(Dt));
+    }
+    return () => n();
+  }
+}), Ws = Symbol.for("activity-tracking"), Hs = g({
   name: "TsSkinLoadingButton",
   props: {
     dark: { type: Boolean, default: !0 },
@@ -1630,11 +1644,11 @@ const Us = {
     slug: String
   },
   emits: [],
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = oe(), r = M(), i = ue(), a = j(), c = ee(Qs, null), { getThumbnail: l } = Be(), { slug: d, id: h } = b(a), { color: g } = b(s), { skinId: k } = b(r), I = m(() => n.property("setUuid")), w = (A) => s.block(A), S = (A) => s.hasAccess(r.accessKeys[A]), T = (A) => {
-      r.setProperty("skinId", A), i.loadSkin(), c == null || c.trackEvent(Ns, { value: e.slug });
-    }, _ = (A) => {
-      switch (A) {
+  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) {
         case "nude":
           return "snd";
         case "muscle":
@@ -1647,107 +1661,107 @@ const Us = {
           return "snl";
       }
     };
-    m(() => e.size === "sm" ? "64px" : "94px"), m(() => ({
+    d(() => e.size === "sm" ? "64px" : "94px"), d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    const z = m(() => ({
+    const E = d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    m(() => r.getPropertyByImageSet(
+    d(() => r.getPropertyByImageSet(
       {
-        id: s.id,
+        id: n.id,
         skinId: e.id,
         effectId: h.value,
-        color: g.value
+        color: k.value
       },
       "percent"
     ));
-    function O() {
-      const A = {
+    function $() {
+      const x = {
         class: `ts-${e.slug}-button ts-skin-button`,
         label: e.name,
         key: e.id,
-        access: _(e.slug),
-        style: z.value,
+        access: F(e.slug),
+        style: E.value,
         size: e.size,
         image: l({
-          uuid: I.value,
+          uuid: D.value,
           image: e.slug,
-          effect: d.value,
-          color: g.value
+          effect: m.value,
+          color: k.value
         }),
-        onClick: () => T(e.id),
-        selected: k.value === e.id,
+        onClick: () => b(e.id),
+        selected: I.value === e.id,
         dark: !0,
-        hasAccess: S(e.id),
+        hasAccess: v(e.id),
         onBlockAccess: w,
         type: "radio"
       };
-      return u(te, A);
+      return u(q, x);
     }
-    return () => O();
+    return () => $();
   }
-}), Et = v({
+}), Pt = g({
   name: "TsSkinSection",
   props: { noWrap: Boolean, size: { type: String, default: "sm" } },
   setup(e, {}) {
-    const t = M(), { skins: o } = b(t);
-    function s() {
-      const n = [];
-      return n.push(u(Le)), o.value.forEach((r) => {
-        const i = {
+    const t = M(), { skins: s } = y(t);
+    function n() {
+      const o = [];
+      return o.push(u(Je)), s.value.forEach((r) => {
+        const a = {
           id: r.id,
           name: r.name,
           slug: r.slug,
           type: "radio",
           label: r.name
         };
-        n.push(u(Js, i));
-      }), u(nt, {}, () => n);
+        o.push(u(Hs, a));
+      }), u(Qe, {}, () => o);
     }
-    return () => s();
+    return () => n();
   }
-}), eo = v({
+}), Xs = g({
   name: "TsSkinsExpansion",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = M(), { selected: r } = b(n), { expanded: i } = F({
-      store: n,
-      options: Ve,
-      tab: Ve
-    }), a = m(() => {
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = M(), { selected: r } = y(o), { expanded: a } = _({
+      store: o,
+      options: xe,
+      tab: xe
+    }), i = d(() => {
       var l;
-      return (l = s.value.ts) == null ? void 0 : l.controls.views.title;
+      return (l = n.value.ts) == null ? void 0 : l.controls.views.title;
     });
     function c() {
       const l = {
         class: "ts-skins-expansion",
-        modelValue: i.value,
-        "onUpdate:modelValue": (d) => i.value = d,
-        label: a.value,
+        modelValue: a.value,
+        "onUpdate:modelValue": (m) => a.value = m,
+        label: i.value,
         selected: r.value,
         icon: "f_shirt"
       };
       return u(
-        ge,
+        de,
         l,
-        () => u(Et, { noWrap: !1, size: "lg", class: "q-py-sm" })
+        () => u(Pt, { noWrap: !1, size: "lg", class: "q-py-sm" })
       );
     }
     return () => c();
   }
-}), zt = v({
+}), Bt = g({
   name: "TsPoseButtonsSection",
-  setup(e, { slots: t, emit: o }) {
-    const s = Symbol.for("PoseButtonsSection"), n = ee(s), r = f();
-    function i() {
-      const a = [];
-      return n && a.push(u(n, { id: r.id })), a;
+  setup() {
+    const e = Symbol.for("PoseButtonsSection"), t = te(e), s = f();
+    function n() {
+      const o = [];
+      return t && o.push(u(t, { id: s.id, class: "ts-pose-buttons-section" })), o;
     }
-    return () => i();
+    return () => n();
   }
-}), to = v({
+}), Ys = g({
   name: "TsButtons",
   props: {
     bottom: {
@@ -1756,183 +1770,185 @@ const Us = {
     }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = f(), r = $(), i = j(), a = de(), c = M(), l = ve(), d = ne(), { active: h } = b(n), { changed: g } = b(r), { changed: k } = b(a), { changed: I } = b(c), { changed: w } = b(l), { changed: S } = b(d), { changed: T } = b(i);
-    m(() => {
-      var x;
-      return (x = s.value.ts) == null ? void 0 : x.buttons.done;
+  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);
+    d(() => {
+      var z;
+      return (z = n.value.ts) == null ? void 0 : z.buttons.done;
     });
-    const _ = m(
+    const F = d(
       () => {
-        var x, D;
-        return !e.bottom || h.value === dt ? (x = s.value.ts) == null ? void 0 : x.buttons.resetAll : (D = s.value.ts) == null ? void 0 : D.buttons.reset;
+        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;
       }
     );
-    m(
-      () => h.value === us || h.value === ce || !z.value
+    d(
+      () => h.value === rs || h.value === ee || !E.value
     );
-    const z = m(
-      () => g.value || k.value || I.value || T.value || w.value || S.value
-    ), O = () => {
-      if (!e.bottom || h.value === dt)
-        return A();
+    const E = d(
+      () => k.value || I.value || D.value || b.value || w.value || v.value
+    ), $ = () => {
+      if (!e.bottom || h.value === at)
+        return x();
       switch (h.value) {
-        case Je:
+        case We:
           r.resetProperty("brightness");
           break;
-        case yt:
+        case ht:
           r.resetProperty("contrast");
           break;
         case J:
-          a.reset();
+          i.reset();
           break;
-        case kt:
+        case gt:
           r.resetProperty("saturate");
           break;
-        case ms:
+        case is:
           l.reset();
           break;
-        case Ve:
+        case xe:
           c.reset();
           break;
         case Q:
-          i.reset();
+          a.reset();
           break;
-        case ds:
-          d.reset();
+        case as:
+          m.reset();
           break;
       }
-    }, A = () => {
-      r.reset(), a.reset(), c.reset(), l.reset(), d.reset(), i.reset();
-    }, G = (x) => x.preventDefault();
-    function N() {
-      const x = {
+    }, x = () => {
+      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"
-      }, D = {
+      }, B = {
         class: "ts-reset-button",
-        label: _.value,
-        onClick: O,
-        onKeyup: G,
+        label: F.value,
+        onClick: $,
+        onKeyup: H,
         rounded: !0,
         unelevated: !0,
         outline: !0
       };
-      return u("div", x, [u(Qt, D)]);
+      return u("div", z, [u(Gt, B)]);
     }
-    return () => N();
+    return () => R();
   }
-}), so = v({
+}), Qs = g({
   name: "TsExpansions",
-  setup(e, { slots: t, emit: o }) {
-    function s() {
+  setup(e, { slots: t, emit: s }) {
+    function n() {
       return u("div", {
         class: "ts-expansions q-pt-lg",
         onClick: (r) => r.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
-        u(zt),
-        u(pe),
-        u(eo),
-        u(pe),
-        u(Hs),
-        u(pe),
-        u(Gs),
-        u(pe),
+        u(Bt),
+        u(ne),
         u(Xs),
-        u(pe),
+        u(ne),
+        u(Ls),
+        u(ne),
+        u(Ks),
+        u(ne),
         u(Zs),
-        u(pe),
-        u(Ys),
-        u(to)
+        u(ne),
+        u(Rs),
+        u(ne),
+        u(Gs),
+        u(ne),
+        u(qs),
+        u(Ys)
       ]);
     }
-    return () => s();
+    return () => n();
   }
-}), oo = v({
+}), Js = g({
   name: "TsAdjustmentDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.adjustments.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.adjustments.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-adjustment-drawer",
-        name: Ie,
-        label: n.value
+        name: be,
+        label: o.value
       };
-      return u(se, i, () => u(Ct));
+      return u(W, a, () => u(bt));
     }
     return () => r();
   }
-}), no = v({
+}), en = g({
   name: "TsCameraDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.camera.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.camera.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-camera-drawer",
         name: Y,
-        label: n.value
+        label: o.value
       };
-      return u(se, i, () => u(Dt));
+      return u(W, a, () => u(kt));
     }
     return () => r();
   }
-}), ro = v({
+}), tn = g({
   name: "TsSkinButton",
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    const s = M(), n = oe(), { lang: r } = B(), { getPoseThumbnail: i } = Be(), { click: a, selected: c } = F({
-      store: s,
-      options: Te,
-      tab: Te
-    }), l = m(() => n.property("uuid")), d = m(() => s.property("currentSlug")), h = m(() => {
-      if (l.value)
-        return i({ uuid: l.value, image: d.value });
-    }), g = m(() => {
-      var I;
-      return (I = r.value.ts) == null ? void 0 : I.controls.skins.iconTitle;
+  setup() {
+    const e = M(), t = se(), { lang: s } = P(), { getPoseThumbnail: n } = Pe(), { click: o, selected: r } = _({
+      store: e,
+      options: ke,
+      tab: ke
+    }), a = d(() => t.property("uuid")), i = d(() => e.property("currentSlug")), c = d(() => {
+      if (a.value)
+        return n({ uuid: a.value, image: i.value });
+    }), l = d(() => {
+      var h;
+      return (h = s.value.ts) == null ? void 0 : h.controls.skins.iconTitle;
     });
-    function k() {
-      const I = {
+    function m() {
+      const h = {
         class: "ts-skin-button",
-        image: h.value,
-        key: g.value,
-        label: g.value,
-        selected: c.value,
-        "data-id": Te,
-        onClick: a,
+        image: c.value,
+        key: l.value,
+        label: l.value,
+        selected: r.value,
+        "data-id": ke,
+        onClick: o,
         type: "none"
       };
-      return u(te, I, () => []);
+      return u(q, h, () => []);
     }
-    return () => k();
+    return () => m();
   }
-}), ao = v({
+}), sn = g({
   name: "TsGridButton",
   props: { size: String },
   setup(e, {}) {
-    const t = de(), o = f(), s = m(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = B(), r = m(() => {
-      var d;
-      return (d = n.value.ts) == null ? void 0 : d.controls.grid.iconTitle;
-    }), { click: i, selected: a } = F({
+    const t = ue(), s = f(), n = d(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: o } = P(), r = d(() => {
+      var m;
+      return (m = o.value.ts) == null ? void 0 : m.controls.grid.iconTitle;
+    }), { click: a, selected: i } = _({
       store: t,
       options: J,
       tab: J
     });
-    function c(d) {
-      return o.block(d);
+    function c(m) {
+      return s.block(m);
     }
     function l() {
-      const d = {
-        hasAccess: s.value,
-        selected: a.value,
-        onClick: i,
+      const m = {
+        hasAccess: n.value,
+        selected: i.value,
+        onClick: a,
         onBlockAccess: c,
         size: e.size,
         "data-id": J,
@@ -1941,219 +1957,199 @@ const Us = {
         icon: "f_grid",
         label: r.value
       };
-      return u(te, d, () => []);
+      return u(q, m, () => []);
     }
     return () => l();
   }
-});
-v({
-  name: "TsPositionButton",
-  props: {
-    size: String
-  },
-  setup(e, { slots: t, emit: o }) {
-    const s = ne(), { click: n, selected: r } = F({
-      store: s,
-      options: Ae,
-      tab: Ae
-    }), i = m(() => s.property("movable"));
-    function a() {
-      const c = {
-        name: "position",
-        icon: "f_spin",
-        selected: r.value,
-        show: i.value,
-        size: e.size,
-        "data-id": Ae,
-        onClick: n
-      };
-      return u(bt, c, () => []);
-    }
-    return () => a();
-  }
-});
-const io = v({
+}), nn = g({
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = $(), o = f(), { lang: s } = B(), n = m(() => {
-      var d;
-      return (d = s.value.ts) == null ? void 0 : d.controls.adjustments.iconTitle;
-    }), r = m(() => (o == null ? void 0 : o.hasAccess("bct")) || !1), { click: i, selected: a } = F({
+    const t = U(), s = f(), { lang: n } = P(), 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 } = _({
       store: t,
-      options: Ie,
-      tab: Ie
+      options: be,
+      tab: be
     });
-    function c(d) {
-      return o.block(d);
+    function c(m) {
+      return s.block(m);
     }
     function l() {
-      const d = {
+      const m = {
         hasAccess: r.value,
-        selected: a.value,
-        onClick: i,
+        selected: i.value,
+        onClick: a,
         onBlockAccess: c,
         size: e.size,
-        "data-id": Ie,
+        "data-id": be,
         name: "imageAdjustment",
         icon: "f_brightness",
-        label: n.value,
+        label: o.value,
         type: "none"
       };
-      return u(te, d, () => []);
+      return u(q, m, () => []);
     }
     return () => l();
   }
-}), co = v({
+}), on = g({
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
     const t = f();
-    m(() => (t == null ? void 0 : t.hasAccess("cau")) || !1);
-    const { lang: o } = B(), s = m(() => {
-      var a;
-      return (a = o.value.ts) == null ? void 0 : a.controls.camera.iconTitle;
-    }), { click: n, selected: r } = F({
+    d(() => (t == null ? void 0 : t.hasAccess("cau")) || !1);
+    const { lang: s } = P(), n = d(() => {
+      var i;
+      return (i = s.value.ts) == null ? void 0 : i.controls.camera.iconTitle;
+    }), { click: o, selected: r } = _({
       options: Y,
       tab: Y
     });
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         // hasAccess: hasAccess.value,
         selected: r.value,
-        onClick: n,
+        onClick: o,
         // onBlockAccess: block,
         size: e.size,
         name: "cameraAngle",
         "data-id": Y,
         icon: "f_camera_angle",
         type: "none",
-        label: s.value
+        label: n.value
       };
-      return u(te, a, () => []);
+      return u(q, i, () => []);
     }
-    return () => i();
+    return () => a();
   }
-});
-v({
-  name: "TsAdjustmentsButton",
+}), rn = g({
+  name: "TsRelatedButton",
   props: { size: String },
-  setup(e, {}) {
-    const t = f(), { lang: o } = B(), s = m(() => {
-      var l;
-      return (l = o.value.ts) == null ? void 0 : l.controls.related.title;
-    }), n = !0, { click: r, selected: i } = F({
-      options: ce,
-      tab: ce
+  setup(e) {
+    const t = f(), { lang: s } = P(), n = d(
+      () => {
+        var c, l;
+        return ((l = (c = s.value.ts) == null ? void 0 : c.controls.related) == null ? void 0 : l.iconTitle) || "Related";
+      }
+    ), { click: o, selected: r } = _({
+      options: ee,
+      tab: ee
     });
-    function a(l) {
-      return t.block(l);
+    function a(c) {
+      return t.block(c);
     }
-    function c() {
-      const l = {
-        hasAccess: n.value,
-        selected: i.value,
-        onClick: r,
+    function i() {
+      const c = {
+        hasAccess: !0,
+        selected: r.value,
+        onClick: o,
         onBlockAccess: a,
-        "data-id": ce,
+        "data-id": ee,
         size: e.size,
         name: "related",
-        type: "borderless",
-        lalbel: s.value
+        icon: "f_related",
+        type: "none",
+        label: n.value
       };
-      return u(te, l, () => []);
+      return u(q, c, () => []);
     }
-    return () => c();
+    return () => i();
   }
-});
-v({
-  name: "TsSettingsButton",
+}), an = g({
+  name: "TsSavedButton",
   props: { size: String },
-  setup(e, {}) {
-    const t = f(), o = !0, { click: s, selected: n } = F({
-      options: He,
-      tab: He
+  setup(e) {
+    const t = f(), { lang: s } = P(), n = d(
+      () => {
+        var c, l;
+        return ((l = (c = s.value.ts) == null ? void 0 : c.controls.saved) == null ? void 0 : l.iconTitle) || "Saved";
+      }
+    ), { click: o, selected: r } = _({
+      options: ie,
+      tab: ie
     });
-    function r(a) {
-      return t.block(a);
+    function a(c) {
+      return t.block(c);
     }
     function i() {
-      const a = {
-        hasAccess: o.value,
-        selected: n.value,
-        onClick: s,
-        onBlockAccess: r,
+      const c = {
+        hasAccess: !0,
+        selected: r.value,
+        onClick: o,
+        onBlockAccess: a,
+        "data-id": ie,
         size: e.size,
-        "data-id": He,
-        name: "settings",
-        icon: "f_settings"
+        name: "saved",
+        icon: "f_save",
+        type: "none",
+        label: n.value
       };
-      return u(bt, a, () => []);
+      return u(q, c, () => []);
     }
     return () => i();
   }
-});
-const lo = v({
+}), cn = g({
   name: "TsSpinTool",
   props: {
     noIcons: Boolean
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = ve(), n = E(-1), r = m(() => s.property("animating", !1)), i = m(() => s.property("index"));
-    m(() => s.property("max"));
-    const a = m({
-      get: () => r.value ? n.value : s.property("frame"),
+  setup(e, { slots: t, emit: s }) {
+    const n = ge(), o = A(-1), r = d(() => n.property("animating", !1)), a = d(() => n.property("index"));
+    d(() => n.property("max"));
+    const i = d({
+      get: () => r.value ? o.value : n.property("frame"),
       set: (l) => {
-        const d = Math.abs(n.value - l);
-        if (d !== 0) {
-          if (d > 1) {
-            s.spinToFrame({
+        const m = Math.abs(o.value - l);
+        if (m !== 0) {
+          if (m > 1) {
+            n.spinToFrame({
               value: l,
               duration: 250
-            }), n.value = l;
+            }), o.value = l;
             return;
           }
-          s.setFrame(l), n.value = l;
+          n.setFrame(l), o.value = l;
         }
       }
     });
     function c() {
       const l = {
         class: "ts-spin-tool",
-        modelValue: a.value,
-        "onUpdate:modelValue": (d) => a.value = d,
-        initial: i.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (m) => i.value = m,
+        initial: a.value,
         type: "spin",
         noIcons: e.noIcons
       };
-      return u(De, l);
+      return u(we, l);
     }
     return () => c();
   }
-}), uo = v({
+}), ln = g({
   name: "TsZoomTool",
   props: {
     noIcons: Boolean
   },
   emits: ["click", "onUpdate:modelValue"],
-  setup(e, { slots: t, emit: o }) {
-    const s = ne(), n = E(-1), r = m({
-      get: () => s.property("zoom") || 1,
-      set: (a) => {
-        const c = Math.abs(n.value - a);
+  setup(e, { slots: t, emit: s }) {
+    const n = me(), o = A(-1), r = d({
+      get: () => n.property("zoom") || 1,
+      set: (i) => {
+        const c = Math.abs(o.value - i);
         if (c !== 0) {
           if (c > 1) {
             const l = c * 4;
-            s.setZoom(a, l), n.value = a;
+            n.setZoom(i, l), o.value = i;
             return;
           }
-          s.setZoom(a), n.value = a;
+          n.setZoom(i), o.value = i;
         }
       }
     });
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         class: "ts-zoom-tool",
         modelValue: r.value,
         "onUpdate:modelValue": (c) => r.value = c,
@@ -2161,18 +2157,17 @@ const lo = v({
         type: "zoom",
         noIcons: e.noIcons
       };
-      return u(De, a);
+      return u(we, i);
     }
-    return () => i();
+    return () => a();
   }
-}), mo = v({
+}), un = g({
   name: "TsPositionTool",
-  setup(e, { slots: t, emit: o }) {
-    function s() {
+  setup(e, { slots: t, emit: s }) {
+    function n() {
       return [
-        u(Le),
-        u(uo),
-        u(lo)
+        u(ln),
+        u(cn)
         // h(Transition, { name: 'slide-fade' }, () => [
         //   withDirectives(
         //     h('div', { class: 'ts-position-move-holder' }, h(TsMoveTool)),
@@ -2181,550 +2176,477 @@ const lo = v({
         // ]),
       ];
     }
-    return () => s();
+    return () => n();
   }
 });
-v({
+g({
   name: "TsPositionDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.positionPose.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.positionPose.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-position-drawer",
-        name: Ae,
-        label: n.value
+        name: cs,
+        label: o.value
       };
-      return u(se, i, () => u(mo));
+      return u(W, a, () => u(un));
     }
     return () => r();
   }
 });
-const po = v({
+const dn = g({
   name: "TsSkinButton",
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = M(), r = j(), i = oe(), { lang: a } = B(), { getPoseThumbnail: c } = Be(), { click: l, selected: d } = F({
+  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 } = _({
       store: r,
       options: Q,
       tab: Q
-    }), h = m(() => {
-      var S;
-      return (S = a.value.ts) == null ? void 0 : S.controls.effects.iconTitle;
-    }), g = m(() => i.property("uuid")), k = m(() => n.property("currentSlug"));
-    m(() => r.id === 3 ? "negative" : "silhouette"), m(() => r.id === 3 ? s.color : s.backgroundColor);
-    const I = m(() => {
-      if (g.value)
+    }), h = d(() => {
+      var v;
+      return (v = i.value.ts) == null ? void 0 : v.controls.effects.iconTitle;
+    }), k = d(() => a.property("uuid")), I = d(() => o.property("currentSlug"));
+    d(() => r.id === 3 ? "negative" : "silhouette"), d(() => r.id === 3 ? n.color : n.backgroundColor);
+    const D = d(() => {
+      if (k.value)
         return c({
-          uuid: g.value,
-          image: k.value,
+          uuid: k.value,
+          image: I.value,
           effect: "negative",
           color: "000000"
         });
     });
     function w() {
-      const S = {
+      const v = {
         class: "ts-effects-button",
-        image: I.value,
+        image: D.value,
         key: h.value,
         label: h.value,
         type: "none",
-        selected: d.value,
+        selected: m.value,
         "data-id": Q,
         onClick: l
       };
-      return u(te, S, () => []);
+      return u(q, v, () => []);
     }
     return () => w();
   }
-}), fo = v({
+}), mn = g({
   name: "TsDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), n = "q-ma-xs";
-    function r(i) {
+  setup() {
+    const e = f(), t = "q-ma-xs";
+    function s(n) {
       return {
-        class: n,
+        class: t,
         size: "sm",
-        onClick: () => s.setActive(i)
+        onClick: () => e.setActive(n)
       };
     }
     return () => u(
-      se,
-      { name: vt },
+      W,
+      { name: pt },
       {
-        default: () => u(nt, {}, () => [
-          u(ro, r(Te)),
-          u(po, r(Q)),
-          u(co, r(Y)),
-          u(ao, r(J)),
+        default: () => u(Qe, {}, () => [
+          u(tn, s(ke)),
+          u(dn, s(Q)),
+          u(on, s(Y)),
+          u(sn, s(J)),
           // h(TsPositionButton, getButtonData(POSITION)),
-          u(io, r(Ie))
-          // h(TsRelatedButton, getButtonData(RELATED)),
+          u(nn, s(be)),
+          u(rn, s(ee)),
+          u(an, s(ie))
           // h(TsSettingsButton, getButtonData(SETTINGS)),
         ]),
-        secondary: () => u(zt, {})
+        secondary: () => u(Bt, {})
       }
     );
   }
-}), ho = v({
+}), pn = g({
   name: "TsGridDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.grid.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.grid.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-grid-drawer",
         name: J,
-        label: n.value
+        label: o.value
       };
-      return u(se, i, () => u(Bt));
+      return u(W, a, () => u(Tt));
     }
     return () => r();
   }
-}), go = v({
+}), fn = g({
   name: "TsRelatedDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.related.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.related.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-related-drawer",
-        name: ce,
-        label: n.value
+        name: ee,
+        label: o.value
       };
-      return u(se, i, () => u(xt));
+      return u(W, a, () => u(wt));
     }
     return () => r();
   }
-}), vo = v({
+}), hn = g({
+  name: "TsSavedDrawer",
+  setup() {
+    const { lang: e } = P(), t = d(() => {
+      var n, o;
+      return ((o = (n = e.value.ts) == null ? void 0 : n.controls.saved) == null ? void 0 : o.title) || "Saved";
+    });
+    function s() {
+      const n = {
+        class: "ts-saved-drawer",
+        name: ie,
+        label: t.value
+      };
+      return u(W, n, () => u(Dt));
+    }
+    return () => s();
+  }
+}), gn = g({
   name: "TsSkinDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.skins.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.skins.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-skin-drawer",
-        name: Te,
-        label: n.value
+        name: ke,
+        label: o.value
       };
-      return u(se, i, () => u(Et));
+      return u(W, a, () => u(Pt));
     }
     return () => r();
   }
-}), So = v({
+}), vn = g({
   name: "TsEffectsDrawer",
-  setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = m(() => {
-      var i;
-      return (i = s.value.ts) == null ? void 0 : i.controls.effects.title;
+  setup(e, { slots: t, emit: s }) {
+    const { lang: n } = P(), o = d(() => {
+      var a;
+      return (a = n.value.ts) == null ? void 0 : a.controls.effects.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-effects-drawer",
         name: Q,
-        label: n.value
+        label: o.value
       };
-      return u(se, i, () => u(Pt, { size: "sm" }));
+      return u(W, a, () => u(It, { size: "sm" }));
     }
     return () => r();
   }
-}), yo = v({
+}), Sn = g({
   name: "TsDrawers",
-  setup(e, { slots: t, emit: o }) {
-    const s = f(), { active: n } = b(s);
-    function r() {
-      const i = {
-        modelValue: n.value,
-        "onUpdate:modelValue": (a) => n.value = a
+  setup() {
+    const e = f(), { active: t } = y(e);
+    function s() {
+      const n = {
+        modelValue: t.value,
+        "onUpdate:modelValue": (o) => t.value = o
       };
-      return u(vs, i, () => [
-        u(fo),
-        u(vo),
-        u(So),
-        u(no),
-        u(oo),
-        u(ho),
-        u(go)
+      return u(ms, n, () => [
+        u(mn),
+        u(gn),
+        u(vn),
+        u(en),
+        u(Js),
+        u(pn),
+        u(fn),
+        u(hn)
       ]);
     }
-    return () => r();
+    return () => s();
   }
-}), ko = v({
+}), yn = g({
   name: "PoseImage",
   setup() {
-    const e = $(), t = ue(), o = oe(), s = ne(), { brightness: n, contrast: r, saturate: i } = b(e), { filterStyle: a } = ot({ brightness: n, contrast: r, saturate: i }), c = m(() => t.image), l = m(() => t.largeImage), d = m(() => o.flipped), h = m(() => s.property("imageSize")), g = E(null), k = m(() => {
-      const S = c.value, T = l.value, _ = f(), { isKinetic: z } = b(_);
-      return !S || !S.url ? process.env.CLEAR_IMAGE : h.value.width <= 900 || z.value ? S.url : T.status === Fe ? T.url : (T.status !== be && T.failCount < 4 && t.loadImage(T.url), S.url);
+    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);
     });
-    X(
-      () => a.value,
-      (S) => {
-        g.value && (g.value.style = S);
+    Z(
+      () => i.value,
+      (v) => {
+        k.value && (k.value.style = v);
       }
     );
-    const I = m(() => ({
+    const D = d(() => ({
       unselectable: !0,
       "pose-image": !0,
-      "flip-horizontal": d.value
+      "flip-horizontal": m.value
     }));
     function w() {
-      const S = {
-        class: I.value,
-        src: k.value,
-        ref: g
+      const v = {
+        class: D.value,
+        src: I.value,
+        ref: k
       };
-      return u("img", S, []);
+      return u("img", v, []);
     }
     return () => w();
   }
-}), bo = {
+}), bn = {
   __name: "ImageHolder",
   setup(e) {
-    const t = $(), o = ne(), s = j(), { brightness: n, contrast: r, saturate: i } = b(t), { filterStyle: a } = ot({ brightness: n, contrast: r, saturate: i }), { slug: c } = b(s), l = m(() => o.property("animate")), d = m(() => o.property("imagePoint")), h = m(() => o.property("imageSize")), g = m(() => o.property("size")), k = m(() => Object.assign({}, a.value, {
-      left: d.value.left + "px",
-      top: d.value.top + "px",
+    const t = U(), s = me(), n = j(), { brightness: o, contrast: r, saturate: a } = y(t), { filterStyle: i } = Ye({ brightness: o, contrast: r, saturate: a }), { slug: c } = y(n), l = d(() => s.property("animate")), m = d(() => s.property("imagePoint")), h = d(() => s.property("imageSize")), k = d(() => s.property("size")), I = d(() => Object.assign({}, i.value, {
+      left: m.value.left + "px",
+      top: m.value.top + "px",
       width: h.value.width + "px",
       height: h.value.height + "px"
     }));
-    E(null);
-    const I = E(null);
-    X([() => d.value, () => h.value, () => g.value], () => {
+    A(null);
+    const D = A(null);
+    Z([() => m.value, () => h.value, () => k.value], () => {
       w();
     });
     const w = () => {
-      l.value && o.setProperty("animate", !1);
+      l.value && s.setProperty("animate", !1);
     };
-    return (S, T) => (_e(), Rt("div", {
+    return (v, b) => (Ge(), Ot("div", {
       class: "image-holder unselectable",
-      style: qt(k.value),
+      style: Rt(I.value),
       id: "image-holder",
       ref_key: "imageholder",
-      ref: I
+      ref: D
     }, [
-      L(ae(ko))
+      Ce(re(yn))
     ], 4));
   }
-}, Io = {
-  __name: "UnlockModal",
-  setup(e) {
-    const t = f(), { lockedModal: o } = b(t), s = m({
-      get: () => o.value,
-      set: (a) => t.setLockedModal(a)
-    }), n = E(!0), r = m(() => n.value ? "f_lock" : "f_unlock"), i = () => {
-      n.value = !1, setTimeout(() => {
-        s.value = !1, n.value = !0, t.unlock();
-      }, 400);
-    };
-    return (a, c) => {
-      const l = ye("q-card-section"), d = ye("q-btn"), h = ye("q-card-actions"), g = ye("q-card"), k = ye("q-dialog"), I = Zt("close-popup");
-      return _e(), Ye(k, {
-        modelValue: s.value,
-        "onUpdate:modelValue": c[0] || (c[0] = (w) => s.value = w),
-        class: "unlock-modal"
-      }, {
-        default: H(() => [
-          L(g, {
-            style: { width: "290px" },
-            class: "text-center"
-          }, {
-            default: H(() => [
-              L(l, null, {
-                default: H(() => [...c[1] || (c[1] = [
-                  Ee("div", { class: "text-h6 text-uppercase text-primary" }, "Locked Pose", -1),
-                  Ee("div", null, [
-                    lt(" You have locked your pose."),
-                    Ee("br"),
-                    lt(" Interaction is disabled ")
-                  ], -1)
-                ])]),
-                _: 1
-              }),
-              L(l, {
-                class: "q-pt-none",
-                color: "primary"
-              }, {
-                default: H(() => [
-                  L(d, {
-                    size: "50px",
-                    round: "",
-                    outline: "",
-                    unelevated: "",
-                    color: "primary",
-                    icon: r.value,
-                    onClick: i
-                  }, null, 8, ["icon"])
-                ]),
-                _: 1
-              }),
-              c[2] || (c[2] = Ee("div", { style: { height: "25px" } }, null, -1)),
-              L(h, {
-                align: "center",
-                class: "bg-white text-primary"
-              }, {
-                default: H(() => [
-                  tt(L(d, {
-                    unelevated: "",
-                    outline: "",
-                    label: "Cancel",
-                    "data-cy": "ts-button-unlock-cancel"
-                  }, null, 512), [
-                    [I]
-                  ]),
-                  L(d, {
-                    unelevated: "",
-                    color: "primary",
-                    label: "Unlock",
-                    onClick: i,
-                    "data-cy": "ts-button-unlock"
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["modelValue"]);
-    };
-  }
-}, To = v({
+}, kn = g({
   name: "TsViewer",
   setup() {
-    const e = $(), t = f(), o = j(), s = de(), n = ue(), r = oe(), i = M(), a = ne(), c = ps(), { brightness: l, contrast: d, saturate: h } = b(e), { id: g } = b(t), { ready: k } = b(r), { accessibleSkins: I, percentage: w } = b(i), { slug: S } = b(o), { filterStyle: T } = ot({ brightness: l, contrast: d, saturate: h }), _ = ee("authenticated"), { imagePoint: z, imageSize: O, viewportSize: A } = b(a), { spacing: G, horizontal: N, vertical: x, visible: D } = b(s), W = E(null), V = E(null), K = (U) => {
-      a.setZoomFromResize(U), console.log("resizeViewport", U);
-    }, me = () => {
-      k.value && g.value !== 0 && a.initZoomFromElement(W.value);
+    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);
+    }, pe = () => {
+      I.value && k.value !== 0 && i.initZoomFromElement(X.value);
     };
-    X(
-      () => _.value,
-      (U) => {
-        if (U) {
-          n.loadSkin();
+    Z(
+      () => F.value,
+      (O) => {
+        if (O) {
+          o.loadSkin();
           return;
         }
-        i.setProperty("id", 1);
+        a.setProperty("id", 1);
       }
-    ), X(
-      () => I.value,
-      (U, xe) => {
-        U.length > xe.length && n.loadSkin();
+    ), Z(
+      () => D.value,
+      (O, Oe) => {
+        O.length > Oe.length && o.loadSkin();
       }
-    ), X(
-      () => [g.value, k.value],
-      ([U, xe]) => {
-        me();
+    ), Z(
+      () => [k.value, I.value],
+      () => {
+        pe();
       }
-    ), fs(), Me(() => {
-      Gt(() => c.$on("resize", K)), me(), n.loadSkin();
-    }), st(() => {
+    ), us(), ze(() => {
+      Kt(() => c.$on("resize", K)), pe(), o.loadSkin();
+    }), Xe(() => {
       c.$off("resize", K);
     });
-    const $e = m(
-      () => "three-sixty-viewer flex-center unselectable image-background " + S.value
-    ), Oe = m(() => "image-background " + S.value), Ne = {
-      class: $e.value,
-      ref: W
-    }, Ke = m(() => ({
+    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
+    }, je = d(() => ({
       value: w / 100,
       color: "primary",
       class: "loading-bar q-mt-sm"
-    })), Re = m(() => ({
-      style: T.value,
+    })), Ue = d(() => ({
+      style: b.value,
       ref: V,
-      class: Oe.value
+      class: _e.value
     }));
-    function qe() {
-      const U = {
-        imagePoint: z.value,
-        imageSize: O.value,
-        viewportSize: A.value,
-        lines: G.value,
-        offsetX: N.value / 100,
-        offsetY: x.value / 100,
-        visible: D.value,
+    function $e() {
+      const O = {
+        imagePoint: E.value,
+        imageSize: $.value,
+        viewportSize: x.value,
+        lines: H.value,
+        offsetX: R.value / 100,
+        offsetY: z.value / 100,
+        visible: B.value,
         style: "z-index: 4"
       };
-      return u("div", Ne, [
-        tt(u(Jt, Ke.value), [[ht, w.value !== 100]]),
-        u(Io),
-        u(Ss, U),
-        u(bo),
-        u("div", Re.value)
+      return u("div", Ve, [
+        ut(u(qt, je.value), [[dt, w.value !== 100]]),
+        u(ps, O),
+        u(bn),
+        u("div", Ue.value)
       ]);
     }
-    return () => qe();
+    return () => $e();
   }
-}), wo = v({
+}), In = g({
   name: "TsInteractionDetector",
   setup() {
-    const e = Symbol.for("user-auth"), t = ee(e), o = f(), s = oe(), n = ve(), r = ne(), { authenticating: i } = b(t), { isLocked: a } = b(o), c = m(() => i.value || a.value), l = E(!1), d = E(null), h = E(void 0), g = E(0), k = E(0), I = E(0), w = E(0), S = E(void 0), T = E(void 0), _ = E(1), z = m(() => r.property("imagePoint")), O = m(() => r.property("immobileHeight")), A = m(() => r.property("immobileWidth"));
-    m(() => r.property("maximized"));
-    const G = m(() => r.property("minimized")), { flipped: N } = b(s), x = m(() => N.value ? -1 : 1);
-    function D() {
-      o.setLockedModal();
-    }
-    X(
-      () => x.value,
+    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() {
+      i.value && s.pokeFreeze();
+    }
+    Z(i, (p) => {
+      p && o.stopSpin();
+    }), Z(
+      () => z.value,
       (p) => console.log("reverseSpin", p)
     );
-    const W = m(() => r.property("size")), V = m({
-      get: () => n.property("frame"),
+    const X = d(() => r.property("size")), V = d({
+      get: () => o.property("frame"),
       set: (p) => {
-        c.value || n.setFrame(p);
+        c.value || o.setFrame(p);
       }
-    }), K = m(() => Math.ceil(W.value.width / (me.value / 1.7))), me = m(() => n.property("renderCount")), $e = m(() => r.property("zoom")), Oe = (p) => {
-      if (a.value && D(), !c.value) {
-        if ($e.value > 1) {
+    }), 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) {
+        if (Me.value > 1) {
           r.animateToZoom(0);
           return;
         }
         r.animateToZoom(100);
       }
-    }, Ne = (p) => {
-      const y = p.srcEvent.keyCode;
-      if (a.value && D(), c.value || (y === 16 && (l.value = !0), y !== 37 && // left
-      y !== 38 && // up
-      y !== 39 && // right
-      y !== 40))
+    }, Ve = (p) => {
+      const S = p.srcEvent.keyCode;
+      if (B(), c.value || (S === 16 && (l.value = !0), S !== 37 && // left
+      S !== 38 && // up
+      S !== 39 && // right
+      S !== 40))
         return;
-      let C = 0, P = 0;
-      const R = p.srcEvent.shiftKey ? 10 : 1;
-      C += y === 37 ? -3 : 0, C += y === 39 ? 3 : 0, P += y === 38 ? -3 : 0, P += y === 40 ? 3 : 0, C = C * R, P = P * R, at({ x: C, y: P });
-    }, Ke = (p) => {
+      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 });
+    }, je = (p) => {
       if (p.key === "Shift") {
         l.value = !1;
         return;
       }
-    }, Re = (p) => {
-      h.value = void 0, S.value = void 0, g.value = 0, k.value = 0;
-    }, qe = (p) => {
-      if (a.value && D(), c.value) return;
-      const y = p.pointers.length;
-      (y === 2 || y === 1 && l.value) && it(p), y === 1 && Ut(p);
-    }, U = (p) => {
-      T.value = Date.now(), h.value = p.center, S.value = V.value;
-    }, xe = (p) => {
-      if (a.value && D(), c.value || (it(p), Math.abs(p.scale - _.value) < 0.02)) return;
-      const y = p.scale < w.value ? -1 : 1;
+    }, Ue = () => {
+      h.value = void 0, v.value = void 0, k.value = 0, I.value = 0;
+    }, $e = (p) => {
+      if (B(), c.value) return;
+      const S = p.pointers.length;
+      (S === 2 || S === 1 && l.value) && st(p), S === 1 && Mt(p);
+    }, O = (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;
+      const S = p.scale < w.value ? -1 : 1;
       w.value = p.scale, r.setZoomFromPointer({
         event: p,
-        element: Ze,
-        increment: y
-      }), _.value = p.scale;
-    }, At = (p) => {
+        element: Re,
+        increment: S
+      }), F.value = p.scale;
+    }, Ct = (p) => {
       h.value = p.center;
-    }, _t = (p) => {
-      if (Date.now() - T.value > 1e3 || (a.value && D(), c.value) || Math.abs(p.velocityX) <= 0.02) return;
-      const C = p.velocityX, P = p.deltaX;
-      n.spinToFrame({
-        value: jt({ distance: P, velocity: C }),
-        duration: Vt({ distance: P, velocity: C })
+    }, zt = (p) => {
+      if (Date.now() - b.value > 1e3 || (B(), 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 })
       });
-    }, Mt = (p) => {
-      a.value && D(), !c.value && n.stopSpin();
-    }, Ft = (p) => {
-      if (a.value && D(), c.value) return;
+    }, Et = () => {
+      B(), !c.value && o.stopSpin();
+    }, xt = (p) => {
+      if (B(), c.value) return;
       p = p.srcEvent || p, p.preventDefault(), p.stopPropagation();
-      const y = p.deltaX, C = p.deltaY, P = 2, R = Math.abs(C) > Math.abs(y) ? 1 : -1;
-      (R === 1 && (C > P || C < -P) || p.ctrlKey) && $t(p), R === -1 && (y > P || y < -P) && Lt(p);
-    }, Vt = ({ velocity: p, distance: y }) => {
-      const C = Qe.newRectFromElement(d.value), P = 1 + Math.abs(y) / C.width;
-      return Math.floor(Math.abs(p) * P * 500);
-    }, jt = ({ velocity: p, distance: y }) => {
-      const C = Qe.newRectFromElement(d.value), P = me.value, R = Math.abs(y) / p / 1e3, Nt = Math.abs(y) / C.width * R, Se = Math.floor(Nt * P), ct = (y < 0 ? -1 : 1) * x.value;
-      return ct > 0 && Se < V.value ? Se + P : ct < 0 && Se > V.value ? Se - P : Se;
-    }, rt = (p, y) => {
-      const C = Math.floor(p / K.value) * y * x.value;
-      return (S.value + C) % me.value;
-    }, at = ({ x: p, y }) => {
-      if (a.value && D(), c.value) return;
-      const C = A.value || p === 0 ? z.value.left : z.value.left + p, P = O.value || y === 0 ? z.value.top : z.value.top + y, R = new Z(C, P);
-      r.setImagePoint(R);
-    }, it = (p) => {
-      if (a.value && D(), c.value || G.value)
+      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 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;
+      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;
+      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);
+    }, st = (p) => {
+      if (B(), c.value || H.value)
         return;
-      const y = p.deltaX - g.value;
-      g.value = p.deltaX;
-      const C = p.deltaY - k.value;
-      k.value = p.deltaY, at({ x: y, y: C });
-    }, Ut = (p) => {
-      const y = p.center.x - h.value.x;
-      if (Math.abs(y) < K.value || l.value) return;
-      const C = p.center.x < h.value.x ? -1 : 1;
-      h.value = p.center, V.value = rt(Math.abs(y), C), S.value = V.value;
-    }, Lt = (p) => {
-      if (a.value && D(), c.value) return;
-      const y = p.deltaX - I.value, C = p.deltaX < 0 ? -1 : 1;
-      Math.abs(y) < K.value || (I.value = p.deltaX, V.value = rt(Math.abs(y), C), S.value = V.value);
-    }, $t = (p) => {
-      if (a.value && D(), c.value) return;
-      const y = p.deltaY < 0 ? 2 : -2;
+      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) => {
+      const S = p.center.x - h.value.x;
+      if (Math.abs(S) < K.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;
+      const S = p.deltaY < 0 ? 2 : -2;
       r.setZoomFromPointer({
         event: p,
-        element: Ze,
-        increment: y
+        element: Re,
+        increment: S
       });
     };
-    let Ze;
-    const Ge = new mt(), We = new mt();
-    Ge.on({
-      swipe: _t,
-      wheel: Ft,
-      keyup: Ke,
-      keydown: Ne,
-      pointerdown: Mt
-    }), We.on({
-      panstart: U,
-      panend: Re,
-      panmove: qe,
-      pinch: xe,
-      pinchstart: At,
-      doubletap: Oe
-    }), Me(() => {
-      Ze = document.getElementById("image-holder"), Ge.setElement(d.value), We.setElement(d.value), document.addEventListener(
+    let Re;
+    const Ke = new it(), Ne = new it();
+    Ke.on({
+      swipe: zt,
+      wheel: xt,
+      keyup: je,
+      keydown: Ve,
+      pointerdown: Et
+    }), Ne.on({
+      panstart: O,
+      panend: Ue,
+      panmove: $e,
+      pinch: Oe,
+      pinchstart: Ct,
+      doubletap: _e
+    }), ze(() => {
+      Re = document.getElementById("image-holder"), Ke.setElement(m.value), Ne.setElement(m.value), document.addEventListener(
         "touchmove",
         function(p) {
           p.scale;
         },
-        ks ? { passive: !1 } : !1
+        hs ? { passive: !1 } : !1
       );
-    }), st(() => {
-      Ge.destroy(), We.destroy();
+    }), Xe(() => {
+      Ke.destroy(), Ne.destroy();
     });
-    function Ot() {
+    function jt() {
       return u("div", {
         class: "detector",
         id: "detector",
-        ref: d
+        ref: m
       }, []);
     }
-    return () => Ot();
+    return () => jt();
   }
-}), jo = /* @__PURE__ */ Object.assign({
+}), An = /* @__PURE__ */ Object.assign({
   name: "TsPage",
   slug: "ts-page",
   inheritAttrs: !1
 }, {
   __name: "TsPage",
-  props: /* @__PURE__ */ Xt({
-    routeKey: {
-      type: String,
-      required: !0
-    },
-    // Forwarded to CToolPage's `drawerPadding` (130px when true, 60px when
-    // false). Hosts pass `false` when no top toolbar is present so the right
-    // tool drawer's chrome doesn't sit under empty space.
+  props: /* @__PURE__ */ Zt({
     drawerPadding: {
       type: Boolean,
       default: !0
@@ -2735,47 +2657,46 @@ const po = v({
   }),
   emits: ["update:miniState"],
   setup(e) {
-    hs();
-    const t = gt(), o = Wt(e, "miniState"), s = Symbol.for("ux"), n = Symbol.for("activity-tracking"), r = f(), i = ee(s), a = ee(n, null), { toolDrawer: c } = b(i);
-    Me(() => {
-      r.active !== Y && (r.active = t.platform.is.mobile ? St : Ve);
+    const t = mt(), s = Nt(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 l = (d) => {
-      d && (a == null || a.trackEvent(Os, {
-        pose_id: r.id || null,
-        base_pose_id: d
+    const a = (i) => {
+      i && (r == null || r.trackEvent(Vs, {
+        pose_id: o.id || null,
+        base_pose_id: i
       }));
     };
-    return Me(async () => {
-      a && (await a.beginExplore(), a.trackEvent($s, { from: null, to: "360" }), r.basePoseId && (a.beginSegment(String(r.basePoseId)), l(r.basePoseId)));
-    }), X(
-      () => r.basePoseId,
-      (d, h) => {
-        !d || d === h || (a == null || a.beginSegment(String(d)), l(d));
+    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(
+      () => o.basePoseId,
+      (i, c) => {
+        !i || i === c || (r == null || r.beginSegment(String(i)), a(i));
       }
-    ), st(() => {
-      a == null || a.end();
-    }), (d, h) => (_e(), Ye(ae(ys), {
-      miniState: o.value,
-      "onUpdate:miniState": h[0] || (h[0] = (g) => o.value = g),
+    ), Xe(() => {
+      r == null || r.end();
+    }), (i, c) => (Ge(), ot(re(fs), {
+      miniState: s.value,
+      "onUpdate:miniState": c[0] || (c[0] = (l) => s.value = l),
       "drawer-padding": e.drawerPadding,
       title: "360° Viewer"
     }, {
-      toolDrawer: H(() => [
-        L(ae(so))
+      toolDrawer: Le(() => [
+        Ce(re(Qs))
       ]),
-      bottomDrawer: H(() => [
-        ae(t).platform.is.mobile ? (_e(), Ye(ae(yo), { key: 0 })) : Ht("", !0)
+      bottomDrawer: Le(() => [
+        re(t).platform.is.mobile ? (Ge(), ot(re(Sn), { key: 0 })) : Lt("", !0)
       ]),
-      default: H(() => [
-        L(ae(wo)),
-        L(ae(To))
+      default: Le(() => [
+        Ce(re(In)),
+        Ce(re(kn))
       ]),
       _: 1
     }, 8, ["miniState", "drawer-padding"]));
   }
 });
 export {
-  jo as TsPage,
+  An as TsPage,
   f as use360Store
 };