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

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

@@ -1,16 +1,16 @@
-(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";
+(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,.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 P, computed as d, watch as Z, onBeforeMount as Gt, defineComponent as v, h as u, withDirectives as Le, vShow as ot, inject as G, openBlock as Fe, createElementBlock as Wt, normalizeStyle as Ht, createVNode as O, unref as ce, resolveComponent as be, resolveDirective as Xt, createBlock as Je, withCtx as Q, createElementVNode as Ae, createTextVNode as mt, onMounted as Ve, nextTick as Yt, onBeforeUnmount as nt, useModel as Qt, createCommentVNode as Jt, mergeModels as es } from "vue";
+import { defineStore as ve, getActivePinia as ts, storeToRefs as b } from "pinia";
+import { useQuasar as St, QBtn as ss, QSeparator as ae, QLinearProgress as os } from "quasar";
+import { DEFAULT_SATURATE as ns, DEFAULT_CONTRAST as rs, DEFAULT_BRIGHTNESS as as, getConfig as is, useDynamicImages as cs, LOADED as je, LOADING as Te, FAILED as le, UNLOADED as pt, QUEUED as ls, DEFAULT_VISIBLE as us, DEFAULT_VERTICAL as ds, DEFAULT_SPACING as ms, DEFAULT_HORIZONTAL as ps, Point as W, Size as ge, Rect as et, DEFAULT as yt, NOTHING as kt, BRIGHTNESS as tt, CONTRAST as bt, SATURATE as It, CAMERA_ANGLE as J, EFFECTS as ee, GRID as te, RELATED as se, VIEWS as Ue, TOOLBAR as ft, MOVE as fs, ZOOM as hs, SPIN as gs, ADJUSTMENTS as we, SKINS as De, POSITION as Me, SETTINGS as Ye, useFilterStyle as rt, useEventBus as vs, useWakeLock as Ss } from "@figurosity/toolbox";
+import Be 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 { useRoute as ys } from "vue-router";
+import { CBasicTool as Pe, CExpansion as fe, CBaseButton as H, CBaseButtons as at, CNewGridTool as ks, CDraggableDrawer as X, CIconButton as Tt, CDraggableDrawers as bs, CGridOverlay as Is, CToolPage as Ts } from "@figurosity/consumer-controls";
 import "@figurosity/icons";
-import { EventManager as mt } from "mjolnir.js";
-import { supportsPassiveEvents as ks } from "detect-it";
-const Pe = {
+import { EventManager as ht } from "mjolnir.js";
+import { supportsPassiveEvents as ws } from "detect-it";
+const ue = 26, ze = {
   model(e) {
     const t = f();
     return e.models[t.id];
@@ -26,7 +26,7 @@ const Pe = {
     const e = f();
     return (t, o = null) => this.propertyById(e.id, t, o);
   }
-}, je = {
+}, $e = {
   setPropertyById(e, t, o) {
     this.models[e] || this.initModel(e), this.$patch({
       models: {
@@ -52,86 +52,86 @@ const Pe = {
       }
     });
   }
-}, Ue = ({
+}, Oe = ({
   storeId: e,
   defaultValues: t = [],
   state: o = {},
   getters: s = {},
   actions: n = {},
   keyBy: r = "id"
-}) => he(e, {
+}) => ve(e, {
   state: () => ({
     loading: !1,
     models: {},
     ...o
   }),
   getters: {
-    ...Pe,
+    ...ze,
     // 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
   },
   actions: {
-    ...je,
+    ...$e,
     // 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
         };
@@ -139,11 +139,11 @@ const Pe = {
     },
     ...n
   }
-}), It = {
-  brightness: ss,
-  contrast: ts,
-  saturate: es
-}, bs = {
+}), wt = {
+  brightness: as,
+  contrast: rs,
+  saturate: ns
+}, Ds = {
   changed(e) {
     return this.propertyChanged("brightness") || this.propertyChanged("contrast") || this.propertyChanged("saturate");
   },
@@ -156,21 +156,21 @@ const Pe = {
   saturate() {
     return this.property("saturate");
   }
-}, $ = Ue({
+}, R = Oe({
   storeId: "360-adjustments",
-  defaultValues: Object.assign({}, It),
-  getters: bs,
+  defaultValues: Object.assign({}, wt),
+  getters: Ds,
   keyBy: "basePoseId"
 });
-function Is(e, t) {
-  let o = Ts(t, e);
+function Bs(e, t) {
+  let o = Cs(t, e);
   return o < 0 && (o = e + o), isNaN(Math.floor(o)) ? 0 : Math.floor(o);
 }
-function Ts(e, t) {
+function Cs(e, t) {
   return Math[e > 0 ? "floor" : "ceil"](e % t);
 }
-let re = null, q = null;
-const ws = {
+let ie = null, q = null;
+const Ps = {
   animating: !1,
   condisabledtrast: !1,
   disabledTimeout: null,
@@ -179,7 +179,7 @@ const ws = {
   renderCount: 36,
   index: 1,
   frame: 1
-}, Cs = {}, Ds = {
+}, zs = {}, xs = {
   changed() {
     const e = this.model;
     return e && e.frame !== e.index;
@@ -191,7 +191,7 @@ const ws = {
     const e = this.model;
     return e ? e.frame : 0;
   }
-}, Ps = {
+}, Es = {
   initModel({ id: e, index: t = 0, renderCount: o = 36 }) {
     typeof this.models[e] < "u" || (this.models[e] = {
       index: t,
@@ -226,7 +226,7 @@ const ws = {
     const o = f();
     t = t || o.id;
     const n = { ...t ? this.models[t] : this.model };
-    re && window.cancelAnimationFrame(re), q && (q.stop(), q = null);
+    ie && window.cancelAnimationFrame(ie), 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({
       models: {
@@ -242,37 +242,37 @@ const ws = {
   spinToFrame({ value: e, duration: t = 450 }) {
     const s = f().id, n = 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), ie && window.cancelAnimationFrame(ie), q && (q.stop(), q = null);
+    function i(c) {
+      ie = window.requestAnimationFrame(i), Be.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(s, "animating", !0), q = new Be.Tween({ value: r }).easing(Be.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 = Bs(n, l);
+      m !== r && (a.setPropertyById(s, "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(ie), ie = null, a.setPropertyById(s, "animationFrame", null), a.setPropertyById(s, "animating", !1);
+    }).start(), i();
   }
-}, ve = Ue({
+}, Se = Oe({
   storeId: "360-spin",
-  defaultValues: Object.assign({}, ws),
-  state: Cs,
-  getters: Ds,
-  actions: Ps
+  defaultValues: Object.assign({}, Ps),
+  state: zs,
+  getters: xs,
+  actions: Es
 });
-function Be() {
-  const { freeServer: e, paidServer: t } = os();
-  return ns({ freeServer: e, paidServer: t });
+function xe() {
+  const { freeServer: e, paidServer: t } = is();
+  return cs({ freeServer: e, paidServer: t });
 }
-function Tt(e, t) {
+function Dt(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];
+    t[o] && typeof t[o] == "object" && !Array.isArray(t[o]) ? (e[o] || (e[o] = {}), Dt(e[o], t[o])) : e[o] = t[o];
 }
-const M = he("360-skins", {
+const F = ve("360-skins", {
   state: () => ({
     loading: !1,
     models: {},
@@ -280,7 +280,7 @@ const M = he("360-skins", {
     censoredSkinIds: []
   }),
   getters: {
-    ...Pe,
+    ...ze,
     accessKeyById(e) {
       return (t) => e.accessKeys[t];
     },
@@ -372,57 +372,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();
+    ...$e,
+    initModel({ id: e, skinId: t, accessKeys: o, censoredSkinIds: s = [], renderCount: n, skins: r, skinIds: a, uuid: i }) {
+      const c = me(), { getPoseLarge: l, getPoseSmall: m } = xe();
       this.censoredSkinIds = s, this.accessKeys = o;
       const h = this.appColorsStore;
-      j();
-      const g = (h == null ? void 0 : h.backgroundColor) || "ffffff", k = (h == null ? void 0 : h.color) || "000000", I = {
+      L();
+      const g = (h == null ? void 0 : h.backgroundColor) || "ffffff", y = (h == null ? void 0 : h.color) || "000000", I = {
         [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((k) => {
+        k = parseInt(k);
+        const T = r[k], E = {
           poseId: e,
-          id: S,
-          skinId: S,
-          uuid: a,
+          id: k,
+          skinId: k,
+          uuid: i,
           name: T.name,
           slug: T.slug,
           order: T.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,
+        Object.keys(Ce).forEach((_) => {
+          _ = parseInt(_);
+          const V = Ce[_], z = [], Y = [], K = _ === 3 ? y : g;
+          for (let A = 0; A < n; A++) {
+            const j = {
+              uuid: i,
               skin: T.slug,
-              effect: O.slug,
-              color: N,
-              index: x
-            }, W = d(D), V = l(D);
-            A.push(W), G.push(V);
-            const K = {
-              skinId: S,
+              effect: V.slug,
+              color: K,
+              index: A
+            }, x = m(j), re = l(j);
+            z.push(x), Y.push(re);
+            const U = {
+              skinId: k,
               failCount: 0,
-              effectId: parseInt(O.id),
-              backgroundColor: N,
+              effectId: parseInt(V.id),
+              backgroundColor: K,
               poseId: e,
               skin: T.slug,
-              status: ut
+              status: pt
             };
-            w[W] = { ...K, url: W }, w[V] = { ...K, url: V };
+            w[x] = { ...U, url: x }, w[re] = { ...U, url: re };
           }
-          _.effects[z] = {
-            [N]: {
-              status: ut,
+          E.effects[_] = {
+            [K]: {
+              status: pt,
               active: !1,
               percent: 0,
               loadedCount: 0,
@@ -430,15 +430,15 @@ const M = he("360-skins", {
               started: !1,
               complete: !1,
               images: {
-                large: G,
-                small: A
+                large: Y,
+                small: z
               },
               previewLoaded: !1
             }
           };
-        }), I[e][S] = _;
-      }), this.$patch((S) => {
-        Tt(S.models, I);
+        }), I[e][k] = E;
+      }), this.$patch((k) => {
+        Dt(k.models, I);
       }), c.initModels(w);
     },
     /**
@@ -446,11 +446,11 @@ const M = he("360-skins", {
      * @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];
+      var n, r, a, i, c;
+      return (c = (i = (a = (r = (n = this.models) == null ? void 0 : n[e]) == null ? void 0 : r[t]) == null ? void 0 : a.effects) == null ? void 0 : i[o]) == null ? void 0 : c[s];
     },
     getCurrentImageSet() {
-      const t = f().id, o = this.skinId, s = j(), n = s.id, r = s.id === 3 ? this.appColorsStore.color : this.appColorsStore.backgroundColor;
+      const t = f().id, o = this.skinId, s = L(), n = s.id, r = s.id === 3 ? this.appColorsStore.color : this.appColorsStore.backgroundColor;
       return this.getImageSet({ id: t, skinId: o, effectId: n, color: r });
     },
     reset() {
@@ -472,18 +472,18 @@ const M = he("360-skins", {
       });
     },
     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],
+      const a = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
+      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,
+              ...i.models[e][t].effects,
               [o]: {
-                ...a.models[e][t].effects[o],
+                ...i.models[e][t].effects[o],
                 [s]: {
-                  ...a.models[e][t].effects[o][s],
+                  ...i.models[e][t].effects[o][s],
                   [n]: r
                 }
               }
@@ -510,60 +510,60 @@ const M = he("360-skins", {
       });
     },
     updatePercentComplete({ id: e, skinId: t, effectId: o, color: s }) {
-      const n = ue(), r = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
+      const n = me(), r = this.getImageSet({ id: e, skinId: t, effectId: o, color: s });
       if (!r) return;
-      const i = r.images.small;
-      let a = 0, c = 0, l = 0;
-      const d = i.length;
-      i.forEach((I) => {
+      const a = r.images.small;
+      let i = 0, c = 0, l = 0;
+      const m = a.length;
+      a.forEach((I) => {
         switch (n.models[I].status) {
-          case ie:
-            a++;
+          case le:
+            i++;
             break;
-          case Fe:
+          case je:
             c++;
             break;
-          case be:
+          case Te:
             l++;
             break;
         }
       });
       const h = { id: e, skinId: t, effectId: o, color: s };
-      if (d === 0)
+      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 g = l * 0.25 + (c + i), y = Math.floor(g / m * 100);
+      return this.setPropertyByImageSet(h, "percent", y), this.setPropertyByImageSet(h, "status", je), this.setPropertyByImageSet(h, "failedCount", i), this.setPropertyByImageSet(h, "loadedCount", c), y;
     },
     setSelectedBySlug(e, t) {
-      var i, a;
+      var a, i;
       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");
+      (!((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);
     }
   }
-}), 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) {
+}), gt = (e, t = "sm") => {
+  var a, i;
+  const o = Se(), n = F().getCurrentImageSet(), r = o.property("frame");
+  if (((i = (a = n == null ? void 0 : n.images) == null ? void 0 : a.small) == null ? void 0 : i.length) > 0) {
     const c = t === "sm" ? n.images.small[r] : n.images.large[r];
     return e.models[c];
   }
   return null;
-}, ue = he("360-images", {
+}, me = ve("360-images", {
   state: () => ({
     models: {}
   }),
   getters: {
     image(e) {
-      return pt(e);
+      return gt(e);
     },
     largeImage(e) {
-      return pt(e, "lg");
+      return gt(e, "lg");
     },
-    ...Pe
+    ...ze
   },
   actions: {
     initModels(e) {
@@ -575,17 +575,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);
+      if (this.models[e].status === Te) return;
+      if (typeof Image > "u") return this.setStatus(e, le);
+      this.setStatus(e, ls);
       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);
+      n.onabort = function(a) {
+        r.setStatus(this.src, le), this.onerror = this.onabort = this.onload = null;
+      }, n.onerror = function(a) {
+        r.setStatus(this.src, le), this.onerror = this.onabort = this.onload = null;
+      }, n.onload = function(a) {
+        r.setStatus(this.src, je), t && typeof t == "function" && t(this.src);
+      }, n.src = e, this.setStatus(e, Te);
     },
     /**
      * Loads the images for the pose
@@ -598,12 +598,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 = Se(), t = F(), o = L();
       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 s = f(), n = t.currentSkin, r = e.indexById(s.id), a = o.id === 3 ? "000000" : "ffffff", i = (m = (l = (c = n == null ? void 0 : n.effects) == null ? void 0 : c[o.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 +618,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 = F(), o = this.models[e], s = o.skinId, n = o.poseId, r = o.effectId, a = o.backgroundColor;
       t.updatePercentComplete({
         id: n,
         skinId: s,
         effectId: r,
-        color: i
+        color: a
       });
     },
     /**
@@ -633,11 +633,11 @@ const M = he("360-skins", {
      */
     loadSkin() {
       var s;
-      const t = M().getCurrentImageSet();
+      const t = F().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.models[n], t.status = Te, setTimeout(() => {
           this.loadImage(n, this.loadViewCallback);
         }, 15);
       });
@@ -645,11 +645,11 @@ const M = he("360-skins", {
     setStatus(e, t) {
       const o = this.models[e];
       if (!o) return;
-      if (t === ie) {
+      if (t === le) {
         this.updateFailCount(e), o.status = t;
         return;
       }
-      o.status = t, M().updatePercentComplete({
+      o.status = t, F().updatePercentComplete({
         skinId: o.skinId,
         effectId: o.effectId,
         color: o.backgroundColor,
@@ -678,13 +678,13 @@ const M = he("360-skins", {
         }, 250);
         return;
       }
-      const o = M(), s = {
+      const o = F(), s = {
         skinId: t.skinId,
         effectId: t.effectId,
         color: t.backgroundColor,
         id: t.poseId
       };
-      t.status = ie, o.setStatus(s, ie);
+      t.status = le, o.setStatus(s, le);
     }
   }
 }), Ce = {
@@ -703,13 +703,13 @@ const M = he("360-skins", {
     name: "Negative",
     slug: "negative"
   }
-}, j = he("360-effects", {
+}, L = ve("360-effects", {
   state: () => ({
     loading: !1,
     models: {}
   }),
   getters: {
-    ...Pe,
+    ...ze,
     effects(e) {
       return Object.keys(Ce).map((t) => Ce[t]);
     },
@@ -739,7 +739,7 @@ const M = he("360-skins", {
     }
   },
   actions: {
-    ...je,
+    ...$e,
     initModel(e) {
       this.models[e] = {
         effectId: 1
@@ -770,12 +770,12 @@ const M = he("360-skins", {
       });
     }
   }
-}), wt = {
-  horizontal: ls,
-  spacing: cs,
-  vertical: is,
-  visible: as
-}, Bs = {
+}), Bt = {
+  horizontal: ps,
+  spacing: ms,
+  vertical: ds,
+  visible: us
+}, As = {
   changed() {
     return this.propertyChanged("visible") || !1;
   },
@@ -791,18 +791,18 @@ const M = he("360-skins", {
   visible() {
     return this.property("visible");
   }
-}, de = Ue({
+}, pe = Oe({
   storeId: "360-grid",
-  defaultValues: wt,
-  getters: Bs,
+  defaultValues: Bt,
+  getters: As,
   keyBy: "basePoseId"
-}), oe = he("360-pose", {
+}), oe = ve("360-pose", {
   state: () => ({
     loading: !1,
     models: {}
   }),
   getters: {
-    ...Pe,
+    ...ze,
     skinId() {
       const e = f();
       return this.propertyById(e.id, "skinId");
@@ -840,49 +840,49 @@ const M = he("360-skins", {
         uuid: o
       });
     },
-    ...je
+    ...$e
   }
-}), Xe = ({
+}), Qe = ({
   imageSize: e,
   imagePoint: t,
   maxDimension: o,
   origin: s,
   scaleByRatio: n,
   size: r,
-  zoom: i
+  zoom: a
 }) => {
-  const a = {}, c = o / r.shortDimension(), l = (c - 1) * (i / 100) + 1;
+  const i = {}, c = o / r.shortDimension(), l = (c - 1) * (a / 100) + 1;
   if (l < 1 || l > c) return {};
-  const d = xs({
+  const m = _s({
     factor: l,
     size: r,
     maxDimension: o
-  }), h = Ms({
+  }), h = Us({
     scaleByRatio: n,
     imageSize: e,
-    newSize: d,
+    newSize: m,
     imagePoint: t,
     size: r,
     origin: s
   });
-  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 }) => {
+  return i.imagePoint = h, i.imageSize = m, i.size = r, i.zoom = a, Object.assign(i, js({ maxDimension: o, newSize: m, size: r }));
+}, _s = ({ 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 }) => {
+  return s = s > o ? o : s, new ge(s, s);
+}, Ms = ({ imagePoint: e, imageSize: t, newSize: o, size: s, origin: n }) => {
   const r = (o.width - t.width) / t.width;
-  let i = new Z(
+  let a = new W(
     -(r * n.left) - Math.abs(e.left),
     -(r * n.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 }) => {
+  return o.width < s.width && (a.left = -(r * n.left) + Math.abs(e.left)), o.height < s.height && (a.top = -(r * n.top) + Math.abs(e.top)), a;
+}, Fs = ({ event: e, element: t }) => (e = e.srcEvent ? e.srcEvent : e, W.getPointFromInteractionEvent(e, t)), Vs = ({ origin: e, imageSize: t }) => !(e.left > 0 && e.top > 0 && e.left < t.width && e.top < t.height), js = ({ 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);
+}, st = ({ point: e, size: t, newSize: o }) => {
+  let s = new W(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 = ({
+}, Us = ({
   scaleByRatio: e = !0,
   imagePoint: t,
   imageSize: o,
@@ -891,36 +891,36 @@ const M = he("360-skins", {
   size: r
 }) => {
   if (e) {
-    const a = Fs({ imageSize: o, newSize: s, imagePoint: t });
-    return et({ point: a, newSize: s, size: r });
+    const i = Ls({ imageSize: o, newSize: s, imagePoint: t });
+    return st({ point: i, newSize: s, size: r });
   }
-  const i = Es({
+  const a = Ms({
     imagePoint: t,
     imageSize: o,
     newSize: s,
     size: r,
     origin: n
   });
-  return et({ point: i, newSize: s, size: r });
-}, Fs = ({ imageSize: e, newSize: t, imagePoint: o }) => {
-  let s = new Z(
+  return st({ point: a, newSize: s, size: r });
+}, Ls = ({ imageSize: e, newSize: t, imagePoint: o }) => {
+  let s = new W(
     (e.width - t.width) / 2,
     (e.height - t.height) / 2
   );
-  return new Z(o.left + s.left, o.top + s.top);
-}, le = {
+  return new W(o.left + s.left, o.top + s.top);
+}, de = {
   maxDimension: 2048,
   zoom: 0,
-  imagePoint: new Z(0, 0),
-  viewportPoint: new Z(0, 0),
-  size: new fe(0, 0),
-  imageSize: new fe(0, 0),
+  imagePoint: new W(0, 0),
+  viewportPoint: new W(0, 0),
+  size: new ge(0, 0),
+  imageSize: new ge(0, 0),
   immobileWidth: !1,
   immobileHeight: !1,
   maximized: !1,
   minimized: !1,
   animating: !1
-}, Vs = {}, js = {
+}, $s = {}, Os = {
   changed() {
     return this.propertyChanged("zoom");
   },
@@ -946,19 +946,19 @@ const M = he("360-skins", {
   },
   imagePoint(e) {
     const t = f(), o = e.models[t.id];
-    return o ? o.imagePoint : le.imagePoint;
+    return o ? o.imagePoint : de.imagePoint;
   },
   imageSize(e) {
     const t = f(), o = e.models[t.id];
-    return o ? o.imageSize : le.imageSize;
+    return o ? o.imageSize : de.imageSize;
   },
   viewportSize(e) {
     const t = f(), o = e.models[t.id];
-    return o ? o.size : le.size;
+    return o ? o.size : de.size;
   }
 };
-let ze = null, ke = null;
-const Us = {
+let _e = null, Ie = null;
+const Rs = {
   reset() {
     this.setZoom(0);
   },
@@ -972,20 +972,20 @@ const Us = {
   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 r = this, a = (i) => {
+      if (_e = window.requestAnimationFrame(a), !o.animating) {
+        window.cancelAnimationFrame(_e);
         return;
       }
-      we.update(a);
+      Be.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);
+    Ie && Ie.stop && (Ie.stop(), Ie = null), r.setProperty("animating", !0), Ie = new Be.Tween(s).to(n, t).delay(0).onUpdate(function(i) {
+      let c = parseInt(i.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();
+    }).onComplete(function(i) {
+      let c = parseInt(i.zoom);
+      window.cancelAnimationFrame(_e), _e = null, r.setZoom(c), r.setProperty("animating", !1);
+    }).start(), a();
   },
   /**
    * Initializes the zoom when a new image is loaded
@@ -993,11 +993,11 @@ const Us = {
    */
   initZoomFromElement(e) {
     const o = f().id, s = {};
-    Object.keys(le).forEach((c) => {
-      s[c] = le[c];
+    Object.keys(de).forEach((c) => {
+      s[c] = de[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) => {
+    const n = et.newRectFromElement(e), r = new ge(n.width, n.height), a = (r.width - r.shortDimension()) / 2, i = (r.height - r.shortDimension()) / 2;
+    s.id = o, s.imagePoint = new W(a, i), s.imageSize = new ge(r.shortDimension(), r.shortDimension()), s.size = r, s.zoom = 0, this.$patch((c) => {
       c.models[o] = { ...s };
     });
   },
@@ -1010,7 +1010,7 @@ const Us = {
     const t = this.model;
     if (!t) return;
     t.id;
-    const o = this.property("size"), s = this.property("imageSize"), n = et({
+    const o = this.property("size"), s = this.property("imageSize"), n = st({
       point: e,
       size: o,
       newSize: s
@@ -1023,7 +1023,7 @@ const Us = {
    */
   setZoom(e) {
     if (e < 0 || e > 100 || !this.model) return;
-    const t = { ...this.model }, o = Xe({
+    const t = { ...this.model }, o = Qe({
       imagePoint: t.imagePoint,
       imageSize: t.imageSize,
       maxDimension: t.maxDimension,
@@ -1044,15 +1044,15 @@ const Us = {
     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,
+    const r = s.imageSize, a = Fs({ event: e, element: t }), i = Vs({
+      origin: a,
       imageSize: r
-    }), c = Xe({
+    }), c = Qe({
       imagePoint: s.imagePoint,
       imageSize: r,
       maxDimension: s.maxDimension,
-      origin: i,
-      scaleByRatio: a,
+      origin: a,
+      scaleByRatio: i,
       size: s.size,
       zoom: n
     });
@@ -1069,7 +1069,7 @@ 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 }, o = new ge(e.width, e.height), s = Qe({
       imagePoint: t.imagePoint,
       imageSize: t.imageSize,
       maxDimension: t.maxDimension,
@@ -1081,17 +1081,17 @@ const Us = {
       n.models[t.id] = { ...t, ...s };
     });
   }
-}, ne = Ue({
+}, ne = Oe({
   storeId: "360-zoom",
-  defaultValues: le,
-  state: Vs,
-  getters: js,
-  actions: Us
-}), Ls = {
-  ...It,
+  defaultValues: de,
+  state: $s,
+  getters: Os,
+  actions: Rs
+}), Ks = {
   ...wt,
-  ...le
-}, f = he("360", {
+  ...Bt,
+  ...de
+}, f = ve("360", {
   state: () => ({
     id: 0,
     // Identifies the per-session bucket for stores keyed by basePoseId
@@ -1099,7 +1099,7 @@ const Us = {
     // fire on camera change. Set by init360Viewer from the loaded
     // pose entity.
     basePoseId: 0,
-    active: vt,
+    active: yt,
     animate: !1,
     width: 0,
     models: {},
@@ -1113,7 +1113,7 @@ const Us = {
       return this.appPosesStore.loading;
     },
     changed(e) {
-      const t = $(), o = de();
+      const t = R(), o = pe();
       return t.changed || o.changed;
     },
     isLoaded() {
@@ -1125,8 +1125,12 @@ const Us = {
     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) !== Ks[t];
     },
     propertyById(e) {
       return (t, o, s = null) => {
@@ -1150,6 +1154,10 @@ const Us = {
     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;
@@ -1172,8 +1180,8 @@ 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({
+      const t = e.entities, o = e.result, s = parseInt(o.poses[0]), n = t.poses[s], r = this.appSkinsStore.inaccessibleSkinIds, a = [], i = this.appSkinsStore.accessKeys, c = this.appSkinsStore.models, l = R(), m = L(), h = pe(), g = me(), y = oe(), I = F(), w = Se(), k = ne(), T = (n == null ? void 0 : n.basePoseId) ?? s;
+      if (this.basePoseId = T, l.initModel(T), m.initModel(s), h.initModel(T), y.initModel({
         id: s,
         cameraIds: n.cameraIds,
         uuid: n.uuid,
@@ -1182,24 +1190,24 @@ const Us = {
       }), I.initModel({
         id: s,
         skinId: parseInt(o.skins[0]),
-        censoredSkinIds: i,
+        censoredSkinIds: a,
         inaccessibleSkinIds: r,
         renderCount: n.renderCount,
         skins: c,
         skinIds: n.skinIds,
         uuid: n.uuid,
-        accessKeys: a
+        accessKeys: i
       }), w.initModel({
         id: s,
-        censoredSkinIds: i,
+        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);
+      }), k.initModel(s), this.id = s, e.canonical) {
+        const E = e.canonical;
+        w.setFrame(E.index, s), m.setSelectedBySlug(E.effect, s), I.setSelectedBySlug(E.skin, s);
       }
-      k.setPropertyById(s, "ready", !0), g.loadPreview();
+      y.setPropertyById(s, "ready", !0), g.loadPreview();
     },
     set360FromResponse(e) {
       this.models = { ...this.models, ...e };
@@ -1232,104 +1240,104 @@ const Us = {
       this._clearKineticTimer(), this._clearLockedTimer(), 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 () => {
+}), Ns = "tool:switched", qs = "pose:viewed", Zs = "skin:changed", vt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-DAAPXO2C.js"), "../i18n/es/index.js": () => import("./index-M-P_KhqK.js") }), B = (e = "../i18n") => {
+  const t = St(), o = P({}), s = d(() => t.lang.isoName || "en-US"), n = async () => {
     const r = `${e}/${s.value}/index.js`;
-    if (ft[r])
+    if (vt[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 vt[r]();
+        a.default && Object.assign(o.value, a.default);
+      } catch (a) {
+        console.error(`Error loading i18n for ${s.value}`, a);
       }
     else
       console.error(`Module not found: ${r}`);
   };
-  return X(
+  return Z(
     () => s.value,
     () => {
       n();
     },
     { immediate: !0 }
-  ), Kt(() => {
+  ), Gt(() => {
     n();
   }), { lang: o };
-}, F = ({ tab: e = St, store: t, options: o = [] }) => {
-  const s = Yt(), n = f(s), r = m({
+}, M = ({ tab: e = kt, store: t, options: o = [] }) => {
+  const s = ts(), n = f(s), r = d({
     get: () => n.isExpanded(o),
     set: (c) => {
       c && n.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: () => n.setActive(e), expanded: r, selected: a };
+}, Gs = v({
   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)
+    const s = f(), n = d(() => s.hasAccess("bct")), r = (l) => s.block(l), a = R(), 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,
         onBlockAccess: r
       };
-      return u(De, l);
+      return u(Pe, l);
     }
     return () => c();
   }
-}), Rs = v({
+}), Ws = v({
   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)
+    const s = f(), n = d(() => s.hasAccess("cct")), r = (l) => s.block(l), a = R(), 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,
         onBlockAccess: r,
         type: "contrast"
       };
-      return u(De, l);
+      return u(Pe, l);
     }
     return () => c();
   }
-}), qs = v({
+}), Hs = v({
   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)
+    const s = f(), n = d(() => s.hasAccess("sct")), r = (l) => s.block(l), a = R(), 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,
         onBlockAccess: r,
         type: "saturate"
       };
-      return u(De, l);
+      return u(Pe, l);
     }
     return () => c();
   }
@@ -1337,35 +1345,35 @@ const Us = {
   name: "TsAdjustmentSection",
   setup(e, { slots: t, emit: o }) {
     function s() {
-      return [u(Ks), u(Rs), u(qs)];
+      return [u(Gs), u(Ws), u(Hs)];
     }
     return () => s();
   }
-}), Zs = v({
+}), Xs = v({
   name: "TsAdjustmentExpansion",
   setup(e, { slots: t, emit: o }) {
-    const s = $(), { expanded: n, selected: r } = F({
+    const s = R(), { expanded: n, selected: r } = M({
       store: s,
-      tab: Je,
-      options: [Je, yt, kt]
-    }), { lang: i } = B(), a = m(() => {
+      tab: tt,
+      options: [tt, bt, It]
+    }), { lang: a } = B(), 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,
+        "onUpdate:modelValue": (m) => n.value = m,
+        label: i.value,
         selected: r.value,
         icon: "f_brightness"
       };
-      return u(ge, l, () => u(Ct));
+      return u(fe, l, () => u(Ct));
     }
     return () => c();
   }
-}), Le = v({
+}), Re = v({
   name: "LockedOverlay",
   props: {
     label: { type: String, required: !1 }
@@ -1373,49 +1381,61 @@ const Us = {
   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", {
+    function a() {
+      return Le(u("div", {
         class: "locked-overlay",
         onClick: () => r.value = !0
-      }, []), [[ht, n.value]]);
+      }, []), [[ot, n.value]]);
     }
-    return () => i();
+    return () => a();
+  }
+}), it = v({
+  name: "FrozenOverlay",
+  setup() {
+    const e = f(), { isFrozen: t } = b(e);
+    function o() {
+      return Le(u("div", {
+        class: "frozen-overlay",
+        onClick: () => e.pokeFreeze()
+      }, []), [[ot, t.value]]);
+    }
+    return () => o();
   }
-}), Dt = v({
+}), Pt = v({
   name: "TsCameraSection",
   setup(e, { slots: t, emit: o }) {
-    const s = f(), n = Symbol.for("CameraSection"), r = ee(n);
-    function i() {
-      const a = {
+    const s = f(), n = Symbol.for("CameraSection"), r = G(n);
+    function a() {
+      const i = {
         class: "ts-camera-section"
       }, c = [];
-      return c.push(u(Le)), r && c.push(u(r, { id: s.id })), u("div", a, c);
+      return c.push(u(Re)), c.push(u(it)), r && c.push(u(r, { id: s.id })), u("div", i, c);
     }
-    return () => i();
+    return () => a();
   }
-}), Gs = v({
+}), Ys = v({
   name: "TsRelatedExpansion",
   setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), { expanded: n } = F({
-      options: Y,
-      tab: Y
-    }), r = m(() => {
-      var a;
-      return (a = s.value.ts) == null ? void 0 : a.controls.camera.title;
+    const { lang: s } = B(), { expanded: n } = M({
+      options: J,
+      tab: J
+    }), r = d(() => {
+      var i;
+      return (i = s.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,
         label: r.value,
         icon: "f_camera_angle"
       };
-      return u(ge, a, () => u(Dt));
+      return u(fe, i, () => u(Pt));
     }
-    return () => i();
+    return () => a();
   }
-}), Ws = v({
+}), Qs = v({
   name: "TsEffectsButton",
   props: {
     id: Number,
@@ -1425,36 +1445,36 @@ const Us = {
   },
   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(
+    const s = f(), n = oe(), r = F(), a = me(), i = L(), { getThumbnail: c } = xe(), { id: l } = b(i), { color: m } = b(s), { skinId: h, slug: g } = b(r), y = d(() => n.property("setUuid"));
+    d(() => r.getPropertyByImageSet(
       {
         id: s.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 I = d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     })), w = (T) => {
-      a.setEffectId(T), i.loadSkin();
+      i.setEffectId(T), a.loadSkin();
     };
-    function S() {
+    function k() {
       const T = {
         class: "ts-effects-button",
         label: e.label,
         key: e.id,
         size: e.size,
         image: c({
-          uuid: k.value,
+          uuid: y.value,
           image: g.value,
           effect: e.slug,
-          color: d.value
+          color: m.value
         }),
         onClick: () => w(e.id),
         selected: l.value === e.id,
@@ -1463,11 +1483,11 @@ const Us = {
         type: "radio",
         style: I.value
       };
-      return u(te, T);
+      return u(H, T);
     }
-    return () => S();
+    return () => k();
   }
-}), Pt = v({
+}), zt = v({
   name: "TsEffectsSection",
   props: {
     noWrap: Boolean,
@@ -1476,12 +1496,12 @@ const Us = {
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: o }) {
-    const s = j(), { effects: n } = b(s);
+    const s = L(), { effects: n } = b(s);
     function r() {
-      const i = [];
-      return i.push(u(Le)), n.value.forEach((c) => {
-        i.push(
-          u(Ws, {
+      const a = [];
+      return a.push(u(Re)), a.push(u(it)), n.value.forEach((c) => {
+        a.push(
+          u(Qs, {
             id: c.id,
             label: c.name,
             slug: c.slug,
@@ -1491,85 +1511,85 @@ const Us = {
             label: c.name
           })
         );
-      }), u(nt, {}, () => i);
+      }), u(at, {}, () => a);
     }
     return () => r();
   }
-}), Hs = v({
+}), Js = v({
   name: "TsEffectsExpansion",
   setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = j(), { selected: r } = b(n), { expanded: i } = F({
+    const { lang: s } = B(), n = L(), { selected: r } = b(n), { expanded: a } = M({
       store: n,
-      options: Q,
-      tab: Q
-    }), a = m(() => {
+      options: ee,
+      tab: ee
+    }), i = d(() => {
       var l;
       return (l = s.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,
+        fe,
         l,
-        () => u(Pt, { noWrap: !1, size: "sm", class: "q-py-sm" })
+        () => u(zt, { noWrap: !1, size: "sm", class: "q-py-sm" })
       );
     }
     return () => c();
   }
-}), Bt = v({
+}), xt = v({
   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({
+    const s = pe(), n = f(), r = d(() => n.hasAccess("grd")), a = (g) => n.block(g), i = d({
       get: () => s.property("spacing"),
       set: (g) => s.setProperty("spacing", g)
-    }), c = m({
+    }), c = d({
       get: () => s.property("vertical"),
       set: (g) => s.setProperty("vertical", g)
-    }), l = m({
+    }), l = d({
       get: () => s.property("horizontal"),
       set: (g) => s.setProperty("horizontal", g)
-    }), d = m({
+    }), m = d({
       get: () => s.property("visible"),
       set: (g) => s.setProperty("visible", g)
     });
     function h() {
       const g = {
         class: "ts-grid-tool",
-        visible: d.value,
-        "onUpdate:visible": (k) => d.value = k,
-        lines: a.value,
-        "onUpdate:lines": (k) => a.value = k,
+        visible: m.value,
+        "onUpdate:visible": (y) => m.value = y,
+        lines: i.value,
+        "onUpdate:lines": (y) => i.value = y,
         vertical: c.value,
-        "onUpdate:vertical": (k) => c.value = k,
+        "onUpdate:vertical": (y) => c.value = y,
         horizontal: l.value,
-        "onUpdate:horizontal": (k) => l.value = k,
+        "onUpdate:horizontal": (y) => l.value = y,
         noIcons: e.noIcons,
         hasAccess: r.value,
-        onBlockAccess: i
+        onBlockAccess: a
       };
-      return u(gs, g, () => []);
+      return u(ks, g, () => []);
     }
     return () => h();
   }
-}), Xs = v({
+}), eo = v({
   name: "TsGridExpansion",
   setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = de(), { expanded: r, selected: i } = F({
+    const { lang: s } = B(), n = pe(), { expanded: r, selected: a } = M({
       store: n,
-      options: J,
-      tab: J
-    }), a = m(() => {
+      options: te,
+      tab: te
+    }), i = d(() => {
       var l;
       return (l = s.value.ts) == null ? void 0 : l.controls.grid.title;
     });
@@ -1577,19 +1597,19 @@ const Us = {
       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(fe, l, () => u(xt));
     }
     return () => c();
   }
-}), xt = v({
+}), Et = v({
   name: "TsRelatedSection",
   setup() {
-    const e = Symbol.for("RelatedSection"), t = ee(e);
+    const e = Symbol.for("RelatedSection"), t = G(e);
     function o() {
       const s = {
         class: "ts-related-section q-mx-lg q-my-sm"
@@ -1598,29 +1618,62 @@ const Us = {
     }
     return () => o();
   }
-}), Ys = v({
+}), to = v({
   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;
+    const { lang: s } = B(), { expanded: n } = M({
+      options: se,
+      tab: se
+    }), r = d(() => {
+      var i;
+      return (i = s.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,
         label: r.value,
         icon: "f_related"
       };
-      return u(ge, a, () => u(xt));
+      return u(fe, i, () => u(Et));
     }
-    return () => i();
+    return () => a();
   }
-}), Qs = Symbol.for("activity-tracking"), Js = v({
+}), At = v({
+  name: "TsSavedSection",
+  setup() {
+    const e = Symbol.for("SavedSection"), t = G(e);
+    function o() {
+      return t ? u("div", {
+        class: "ts-saved-section q-mx-lg q-my-sm"
+      }, [u(t)]) : null;
+    }
+    return () => o();
+  }
+}), so = v({
+  name: "TsSavedExpansion",
+  setup() {
+    const { lang: e } = B(), { expanded: t } = M({
+      options: ue,
+      tab: ue
+    }), o = d(() => {
+      var n, r;
+      return ((r = (n = e.value.ts) == null ? void 0 : n.controls.saved) == null ? void 0 : r.title) || "Saved";
+    });
+    function s() {
+      const n = {
+        class: "ts-saved-expansion",
+        modelValue: t.value,
+        "onUpdate:modelValue": (r) => t.value = r,
+        label: o.value,
+        icon: "f_save"
+      };
+      return u(fe, n, () => u(At));
+    }
+    return () => s();
+  }
+}), oo = Symbol.for("activity-tracking"), no = v({
   name: "TsSkinLoadingButton",
   props: {
     dark: { type: Boolean, default: !0 },
@@ -1631,10 +1684,10 @@ const Us = {
   },
   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) {
+    const s = f(), n = oe(), r = F(), a = me(), i = L(), c = G(oo, null), { getThumbnail: l } = xe(), { slug: m, id: h } = b(i), { color: g } = b(s), { skinId: y } = b(r), I = d(() => n.property("setUuid")), w = (z) => s.block(z), k = (z) => s.hasAccess(r.accessKeys[z]), T = (z) => {
+      r.setProperty("skinId", z), a.loadSkin(), c == null || c.trackEvent(Zs, { value: e.slug });
+    }, E = (z) => {
+      switch (z) {
         case "nude":
           return "snd";
         case "muscle":
@@ -1647,15 +1700,15 @@ 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 _ = d(() => ({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    m(() => r.getPropertyByImageSet(
+    d(() => r.getPropertyByImageSet(
       {
         id: s.id,
         skinId: e.id,
@@ -1664,90 +1717,90 @@ const Us = {
       },
       "percent"
     ));
-    function O() {
-      const A = {
+    function V() {
+      const z = {
         class: `ts-${e.slug}-button ts-skin-button`,
         label: e.name,
         key: e.id,
-        access: _(e.slug),
-        style: z.value,
+        access: E(e.slug),
+        style: _.value,
         size: e.size,
         image: l({
           uuid: I.value,
           image: e.slug,
-          effect: d.value,
+          effect: m.value,
           color: g.value
         }),
         onClick: () => T(e.id),
-        selected: k.value === e.id,
+        selected: y.value === e.id,
         dark: !0,
-        hasAccess: S(e.id),
+        hasAccess: k(e.id),
         onBlockAccess: w,
         type: "radio"
       };
-      return u(te, A);
+      return u(H, z);
     }
-    return () => O();
+    return () => V();
   }
-}), Et = v({
+}), _t = v({
   name: "TsSkinSection",
   props: { noWrap: Boolean, size: { type: String, default: "sm" } },
   setup(e, {}) {
-    const t = M(), { skins: o } = b(t);
+    const t = F(), { skins: o } = b(t);
     function s() {
       const n = [];
-      return n.push(u(Le)), o.value.forEach((r) => {
-        const i = {
+      return n.push(u(Re)), n.push(u(it)), o.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);
+        n.push(u(no, a));
+      }), u(at, {}, () => n);
     }
     return () => s();
   }
-}), eo = v({
+}), ro = v({
   name: "TsSkinsExpansion",
   setup(e, { slots: t, emit: o }) {
-    const { lang: s } = B(), n = M(), { selected: r } = b(n), { expanded: i } = F({
+    const { lang: s } = B(), n = F(), { selected: r } = b(n), { expanded: a } = M({
       store: n,
-      options: Ve,
-      tab: Ve
-    }), a = m(() => {
+      options: Ue,
+      tab: Ue
+    }), i = d(() => {
       var l;
       return (l = s.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,
+        fe,
         l,
-        () => u(Et, { noWrap: !1, size: "lg", class: "q-py-sm" })
+        () => u(_t, { noWrap: !1, size: "lg", class: "q-py-sm" })
       );
     }
     return () => c();
   }
-}), zt = v({
+}), Mt = v({
   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;
+    const s = Symbol.for("PoseButtonsSection"), n = G(s), r = f();
+    function a() {
+      const i = [];
+      return n && i.push(u(n, { id: r.id })), i;
     }
-    return () => i();
+    return () => a();
   }
-}), to = v({
+}), ao = v({
   name: "TsButtons",
   props: {
     bottom: {
@@ -1757,72 +1810,72 @@ 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;
+    const { lang: s } = B(), n = f(), r = R(), a = L(), i = pe(), c = F(), l = Se(), m = ne(), { active: h } = b(n), { changed: g } = b(r), { changed: y } = b(i), { changed: I } = b(c), { changed: w } = b(l), { changed: k } = b(m), { changed: T } = b(a);
+    d(() => {
+      var A;
+      return (A = s.value.ts) == null ? void 0 : A.buttons.done;
     });
-    const _ = m(
+    const E = 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 A, j;
+        return !e.bottom || h.value === ft ? (A = s.value.ts) == null ? void 0 : A.buttons.resetAll : (j = s.value.ts) == null ? void 0 : j.buttons.reset;
       }
     );
-    m(
-      () => h.value === us || h.value === ce || !z.value
+    d(
+      () => h.value === fs || h.value === se || !_.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 _ = d(
+      () => g.value || y.value || I.value || T.value || w.value || k.value
+    ), V = () => {
+      if (!e.bottom || h.value === ft)
+        return z();
       switch (h.value) {
-        case Je:
+        case tt:
           r.resetProperty("brightness");
           break;
-        case yt:
+        case bt:
           r.resetProperty("contrast");
           break;
-        case J:
-          a.reset();
+        case te:
+          i.reset();
           break;
-        case kt:
+        case It:
           r.resetProperty("saturate");
           break;
-        case ms:
+        case gs:
           l.reset();
           break;
-        case Ve:
+        case Ue:
           c.reset();
           break;
-        case Q:
-          i.reset();
+        case ee:
+          a.reset();
           break;
-        case ds:
-          d.reset();
+        case hs:
+          m.reset();
           break;
       }
-    }, A = () => {
-      r.reset(), a.reset(), c.reset(), l.reset(), d.reset(), i.reset();
-    }, G = (x) => x.preventDefault();
-    function N() {
-      const x = {
+    }, z = () => {
+      r.reset(), i.reset(), c.reset(), l.reset(), m.reset(), a.reset();
+    }, Y = (A) => A.preventDefault();
+    function K() {
+      const A = {
         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 = {
+      }, j = {
         class: "ts-reset-button",
-        label: _.value,
-        onClick: O,
-        onKeyup: G,
+        label: E.value,
+        onClick: V,
+        onKeyup: Y,
         rounded: !0,
         unelevated: !0,
         outline: !0
       };
-      return u("div", x, [u(Qt, D)]);
+      return u("div", A, [u(ss, j)]);
     }
-    return () => N();
+    return () => K();
   }
-}), so = v({
+}), io = v({
   name: "TsExpansions",
   setup(e, { slots: t, emit: o }) {
     function s() {
@@ -1831,117 +1884,119 @@ const Us = {
         onClick: (r) => r.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
-        u(zt),
-        u(pe),
+        u(Mt),
+        u(ae),
+        u(ro),
+        u(ae),
+        u(Js),
+        u(ae),
+        u(Ys),
+        u(ae),
         u(eo),
-        u(pe),
-        u(Hs),
-        u(pe),
-        u(Gs),
-        u(pe),
+        u(ae),
         u(Xs),
-        u(pe),
-        u(Zs),
-        u(pe),
-        u(Ys),
-        u(to)
+        u(ae),
+        u(to),
+        u(ae),
+        u(so),
+        u(ao)
       ]);
     }
     return () => s();
   }
-}), oo = v({
+}), co = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.adjustments.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-adjustment-drawer",
-        name: Ie,
+        name: we,
         label: n.value
       };
-      return u(se, i, () => u(Ct));
+      return u(X, a, () => u(Ct));
     }
     return () => r();
   }
-}), no = v({
+}), lo = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.camera.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-camera-drawer",
-        name: Y,
+        name: J,
         label: n.value
       };
-      return u(se, i, () => u(Dt));
+      return u(X, a, () => u(Pt));
     }
     return () => r();
   }
-}), ro = v({
+}), uo = v({
   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({
+    const s = F(), n = oe(), { lang: r } = B(), { getPoseThumbnail: a } = xe(), { click: i, selected: c } = M({
       store: s,
-      options: Te,
-      tab: Te
-    }), l = m(() => n.property("uuid")), d = m(() => s.property("currentSlug")), h = m(() => {
+      options: De,
+      tab: De
+    }), l = d(() => n.property("uuid")), m = d(() => s.property("currentSlug")), h = d(() => {
       if (l.value)
-        return i({ uuid: l.value, image: d.value });
-    }), g = m(() => {
+        return a({ uuid: l.value, image: m.value });
+    }), g = d(() => {
       var I;
       return (I = r.value.ts) == null ? void 0 : I.controls.skins.iconTitle;
     });
-    function k() {
+    function y() {
       const I = {
         class: "ts-skin-button",
         image: h.value,
         key: g.value,
         label: g.value,
         selected: c.value,
-        "data-id": Te,
-        onClick: a,
+        "data-id": De,
+        onClick: i,
         type: "none"
       };
-      return u(te, I, () => []);
+      return u(H, I, () => []);
     }
-    return () => k();
+    return () => y();
   }
-}), ao = v({
+}), mo = v({
   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 = pe(), o = f(), s = d(() => (o == null ? void 0 : o.hasAccess("grd")) || !1), { lang: n } = B(), r = d(() => {
+      var m;
+      return (m = n.value.ts) == null ? void 0 : m.controls.grid.iconTitle;
+    }), { click: a, selected: i } = M({
       store: t,
-      options: J,
-      tab: J
+      options: te,
+      tab: te
     });
-    function c(d) {
-      return o.block(d);
+    function c(m) {
+      return o.block(m);
     }
     function l() {
-      const d = {
+      const m = {
         hasAccess: s.value,
-        selected: a.value,
-        onClick: i,
+        selected: i.value,
+        onClick: a,
         onBlockAccess: c,
         size: e.size,
-        "data-id": J,
+        "data-id": te,
         name: "grid",
         type: "none",
         icon: "f_grid",
         label: r.value
       };
-      return u(te, d, () => []);
+      return u(H, m, () => []);
     }
     return () => l();
   }
@@ -1952,162 +2007,197 @@ v({
     size: String
   },
   setup(e, { slots: t, emit: o }) {
-    const s = ne(), { click: n, selected: r } = F({
+    const s = ne(), { click: n, selected: r } = M({
       store: s,
-      options: Ae,
-      tab: Ae
-    }), i = m(() => s.property("movable"));
-    function a() {
+      options: Me,
+      tab: Me
+    }), a = d(() => s.property("movable"));
+    function i() {
       const c = {
         name: "position",
         icon: "f_spin",
         selected: r.value,
-        show: i.value,
+        show: a.value,
         size: e.size,
-        "data-id": Ae,
+        "data-id": Me,
         onClick: n
       };
-      return u(bt, c, () => []);
+      return u(Tt, c, () => []);
     }
-    return () => a();
+    return () => i();
   }
 });
-const io = v({
+const po = v({
   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 = R(), o = f(), { lang: s } = B(), n = d(() => {
+      var m;
+      return (m = s.value.ts) == null ? void 0 : m.controls.adjustments.iconTitle;
+    }), r = d(() => (o == null ? void 0 : o.hasAccess("bct")) || !1), { click: a, selected: i } = M({
       store: t,
-      options: Ie,
-      tab: Ie
+      options: we,
+      tab: we
     });
-    function c(d) {
-      return o.block(d);
+    function c(m) {
+      return o.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": we,
         name: "imageAdjustment",
         icon: "f_brightness",
         label: n.value,
         type: "none"
       };
-      return u(te, d, () => []);
+      return u(H, m, () => []);
     }
     return () => l();
   }
-}), co = v({
+}), fo = v({
   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({
-      options: Y,
-      tab: Y
+    d(() => (t == null ? void 0 : t.hasAccess("cau")) || !1);
+    const { lang: o } = B(), s = d(() => {
+      var i;
+      return (i = o.value.ts) == null ? void 0 : i.controls.camera.iconTitle;
+    }), { click: n, selected: r } = M({
+      options: J,
+      tab: J
     });
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         // hasAccess: hasAccess.value,
         selected: r.value,
         onClick: n,
         // onBlockAccess: block,
         size: e.size,
         name: "cameraAngle",
-        "data-id": Y,
+        "data-id": J,
         icon: "f_camera_angle",
         type: "none",
         label: s.value
       };
-      return u(te, a, () => []);
+      return u(H, i, () => []);
     }
-    return () => i();
+    return () => a();
   }
-});
-v({
-  name: "TsAdjustmentsButton",
+}), ho = v({
+  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: o } = B(), s = d(
+      () => {
+        var c, l;
+        return ((l = (c = o.value.ts) == null ? void 0 : c.controls.related) == null ? void 0 : l.iconTitle) || "Related";
+      }
+    ), { click: n, selected: r } = M({
+      options: se,
+      tab: se
     });
-    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: n,
         onBlockAccess: a,
-        "data-id": ce,
+        "data-id": se,
         size: e.size,
         name: "related",
-        type: "borderless",
-        lalbel: s.value
+        icon: "f_related",
+        type: "none",
+        label: s.value
       };
-      return u(te, l, () => []);
+      return u(H, c, () => []);
     }
-    return () => c();
+    return () => i();
   }
 });
 v({
   name: "TsSettingsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = f(), o = !0, { click: s, selected: n } = F({
-      options: He,
-      tab: He
+    const t = f(), o = !0, { click: s, selected: n } = M({
+      options: Ye,
+      tab: Ye
     });
-    function r(a) {
-      return t.block(a);
+    function r(i) {
+      return t.block(i);
     }
-    function i() {
-      const a = {
+    function a() {
+      const i = {
         hasAccess: o.value,
         selected: n.value,
         onClick: s,
         onBlockAccess: r,
         size: e.size,
-        "data-id": He,
+        "data-id": Ye,
         name: "settings",
         icon: "f_settings"
       };
-      return u(bt, a, () => []);
+      return u(Tt, i, () => []);
     }
-    return () => i();
+    return () => a();
   }
 });
-const lo = v({
+const go = v({
+  name: "TsSavedButton",
+  props: { size: String },
+  setup(e) {
+    const t = f(), { lang: o } = B(), s = d(
+      () => {
+        var c, l;
+        return ((l = (c = o.value.ts) == null ? void 0 : c.controls.saved) == null ? void 0 : l.iconTitle) || "Saved";
+      }
+    ), { click: n, selected: r } = M({
+      options: ue,
+      tab: ue
+    });
+    function a(c) {
+      return t.block(c);
+    }
+    function i() {
+      const c = {
+        hasAccess: !0,
+        selected: r.value,
+        onClick: n,
+        onBlockAccess: a,
+        "data-id": ue,
+        size: e.size,
+        name: "saved",
+        icon: "f_save",
+        type: "none",
+        label: s.value
+      };
+      return u(H, c, () => []);
+    }
+    return () => i();
+  }
+}), vo = v({
   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({
+    const s = Se(), n = P(-1), r = d(() => s.property("animating", !1)), a = d(() => s.property("index"));
+    d(() => s.property("max"));
+    const i = d({
       get: () => r.value ? n.value : s.property("frame"),
       set: (l) => {
-        const d = Math.abs(n.value - l);
-        if (d !== 0) {
-          if (d > 1) {
+        const m = Math.abs(n.value - l);
+        if (m !== 0) {
+          if (m > 1) {
             s.spinToFrame({
               value: l,
               duration: 250
@@ -2121,39 +2211,39 @@ const lo = v({
     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(Pe, l);
     }
     return () => c();
   }
-}), uo = v({
+}), So = v({
   name: "TsZoomTool",
   props: {
     noIcons: Boolean
   },
   emits: ["click", "onUpdate:modelValue"],
   setup(e, { slots: t, emit: o }) {
-    const s = ne(), n = E(-1), r = m({
+    const s = ne(), n = P(-1), r = d({
       get: () => s.property("zoom") || 1,
-      set: (a) => {
-        const c = Math.abs(n.value - a);
+      set: (i) => {
+        const c = Math.abs(n.value - i);
         if (c !== 0) {
           if (c > 1) {
             const l = c * 4;
-            s.setZoom(a, l), n.value = a;
+            s.setZoom(i, l), n.value = i;
             return;
           }
-          s.setZoom(a), n.value = a;
+          s.setZoom(i), n.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 +2251,18 @@ const lo = v({
         type: "zoom",
         noIcons: e.noIcons
       };
-      return u(De, a);
+      return u(Pe, i);
     }
-    return () => i();
+    return () => a();
   }
-}), mo = v({
+}), yo = v({
   name: "TsPositionTool",
   setup(e, { slots: t, emit: o }) {
     function s() {
       return [
-        u(Le),
-        u(uo),
-        u(lo)
+        u(Re),
+        u(So),
+        u(vo)
         // h(Transition, { name: 'slide-fade' }, () => [
         //   withDirectives(
         //     h('div', { class: 'ts-position-move-holder' }, h(TsMoveTool)),
@@ -2187,292 +2277,311 @@ const lo = v({
 v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.positionPose.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-position-drawer",
-        name: Ae,
+        name: Me,
         label: n.value
       };
-      return u(se, i, () => u(mo));
+      return u(X, a, () => u(yo));
     }
     return () => r();
   }
 });
-const po = v({
+const ko = v({
   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({
+    const s = f(), n = F(), r = L(), a = oe(), { lang: i } = B(), { getPoseThumbnail: c } = xe(), { click: l, selected: m } = 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(() => {
+      options: ee,
+      tab: ee
+    }), h = d(() => {
+      var k;
+      return (k = i.value.ts) == null ? void 0 : k.controls.effects.iconTitle;
+    }), g = d(() => a.property("uuid")), y = d(() => n.property("currentSlug"));
+    d(() => r.id === 3 ? "negative" : "silhouette"), d(() => r.id === 3 ? s.color : s.backgroundColor);
+    const I = d(() => {
       if (g.value)
         return c({
           uuid: g.value,
-          image: k.value,
+          image: y.value,
           effect: "negative",
           color: "000000"
         });
     });
     function w() {
-      const S = {
+      const k = {
         class: "ts-effects-button",
         image: I.value,
         key: h.value,
         label: h.value,
         type: "none",
-        selected: d.value,
-        "data-id": Q,
+        selected: m.value,
+        "data-id": ee,
         onClick: l
       };
-      return u(te, S, () => []);
+      return u(H, k, () => []);
     }
     return () => w();
   }
-}), fo = v({
+}), bo = v({
   name: "TsDefaultDrawer",
   props: {},
   emits: ["click"],
   setup(e, { slots: t, emit: o }) {
     const s = f(), n = "q-ma-xs";
-    function r(i) {
+    function r(a) {
       return {
         class: n,
         size: "sm",
-        onClick: () => s.setActive(i)
+        onClick: () => s.setActive(a)
       };
     }
     return () => u(
-      se,
-      { name: vt },
+      X,
+      { name: yt },
       {
-        default: () => u(nt, {}, () => [
-          u(ro, r(Te)),
-          u(po, r(Q)),
-          u(co, r(Y)),
-          u(ao, r(J)),
+        default: () => u(at, {}, () => [
+          u(uo, r(De)),
+          u(ko, r(ee)),
+          u(fo, r(J)),
+          u(mo, r(te)),
           // h(TsPositionButton, getButtonData(POSITION)),
-          u(io, r(Ie))
-          // h(TsRelatedButton, getButtonData(RELATED)),
+          u(po, r(we)),
+          u(ho, r(se)),
+          u(go, r(ue))
           // h(TsSettingsButton, getButtonData(SETTINGS)),
         ]),
-        secondary: () => u(zt, {})
+        secondary: () => u(Mt, {})
       }
     );
   }
-}), ho = v({
+}), Io = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.grid.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-grid-drawer",
-        name: J,
+        name: te,
         label: n.value
       };
-      return u(se, i, () => u(Bt));
+      return u(X, a, () => u(xt));
     }
     return () => r();
   }
-}), go = v({
+}), To = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.related.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-related-drawer",
-        name: ce,
+        name: se,
         label: n.value
       };
-      return u(se, i, () => u(xt));
+      return u(X, a, () => u(Et));
     }
     return () => r();
   }
-}), vo = v({
+}), wo = v({
+  name: "TsSavedDrawer",
+  setup() {
+    const { lang: e } = B(), t = d(() => {
+      var s, n;
+      return ((n = (s = e.value.ts) == null ? void 0 : s.controls.saved) == null ? void 0 : n.title) || "Saved";
+    });
+    function o() {
+      const s = {
+        class: "ts-saved-drawer",
+        name: ue,
+        label: t.value
+      };
+      return u(X, s, () => u(At));
+    }
+    return () => o();
+  }
+}), Do = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.skins.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-skin-drawer",
-        name: Te,
+        name: De,
         label: n.value
       };
-      return u(se, i, () => u(Et));
+      return u(X, a, () => u(_t));
     }
     return () => r();
   }
-}), So = v({
+}), Bo = v({
   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;
+    const { lang: s } = B(), n = d(() => {
+      var a;
+      return (a = s.value.ts) == null ? void 0 : a.controls.effects.title;
     });
     function r() {
-      const i = {
+      const a = {
         class: "ts-effects-drawer",
-        name: Q,
+        name: ee,
         label: n.value
       };
-      return u(se, i, () => u(Pt, { size: "sm" }));
+      return u(X, a, () => u(zt, { size: "sm" }));
     }
     return () => r();
   }
-}), yo = v({
+}), Co = v({
   name: "TsDrawers",
   setup(e, { slots: t, emit: o }) {
     const s = f(), { active: n } = b(s);
     function r() {
-      const i = {
+      const a = {
         modelValue: n.value,
-        "onUpdate:modelValue": (a) => n.value = a
+        "onUpdate:modelValue": (i) => n.value = i
       };
-      return u(vs, i, () => [
-        u(fo),
-        u(vo),
-        u(So),
-        u(no),
-        u(oo),
-        u(ho),
-        u(go)
+      return u(bs, a, () => [
+        u(bo),
+        u(Do),
+        u(Bo),
+        u(lo),
+        u(co),
+        u(Io),
+        u(To),
+        u(wo)
       ]);
     }
     return () => r();
   }
-}), ko = v({
+}), Po = v({
   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 = R(), t = me(), o = oe(), s = ne(), { brightness: n, contrast: r, saturate: a } = b(e), { filterStyle: i } = rt({ brightness: n, contrast: r, saturate: a }), c = d(() => t.image), l = d(() => t.largeImage), m = d(() => o.flipped), h = d(() => s.property("imageSize")), g = P(null), y = d(() => {
+      const k = c.value, T = l.value, E = f(), { isKinetic: _ } = b(E);
+      return !k || !k.url ? process.env.CLEAR_IMAGE : h.value.width <= 900 || _.value ? k.url : T.status === je ? T.url : (T.status !== Te && T.failCount < 4 && t.loadImage(T.url), k.url);
     });
-    X(
-      () => a.value,
-      (S) => {
-        g.value && (g.value.style = S);
+    Z(
+      () => i.value,
+      (k) => {
+        g.value && (g.value.style = k);
       }
     );
-    const I = m(() => ({
+    const I = d(() => ({
       unselectable: !0,
       "pose-image": !0,
-      "flip-horizontal": d.value
+      "flip-horizontal": m.value
     }));
     function w() {
-      const S = {
+      const k = {
         class: I.value,
-        src: k.value,
+        src: y.value,
         ref: g
       };
-      return u("img", S, []);
+      return u("img", k, []);
     }
     return () => w();
   }
-}), bo = {
+}), zo = {
   __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 = R(), o = ne(), s = L(), { brightness: n, contrast: r, saturate: a } = b(t), { filterStyle: i } = rt({ brightness: n, contrast: r, saturate: a }), { slug: c } = b(s), l = d(() => o.property("animate")), m = d(() => o.property("imagePoint")), h = d(() => o.property("imageSize")), g = d(() => o.property("size")), y = 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], () => {
+    P(null);
+    const I = P(null);
+    Z([() => m.value, () => h.value, () => g.value], () => {
       w();
     });
     const w = () => {
       l.value && o.setProperty("animate", !1);
     };
-    return (S, T) => (_e(), Rt("div", {
+    return (k, T) => (Fe(), Wt("div", {
       class: "image-holder unselectable",
-      style: qt(k.value),
+      style: Ht(y.value),
       id: "image-holder",
       ref_key: "imageholder",
       ref: I
     }, [
-      L(ae(ko))
+      O(ce(Po))
     ], 4));
   }
-}, Io = {
+}, xo = {
   __name: "UnlockModal",
   setup(e) {
-    const t = f(), { lockedModal: o } = b(t), s = m({
+    const t = f(), { lockedModal: o } = b(t), s = d({
       get: () => o.value,
-      set: (a) => t.setLockedModal(a)
-    }), n = E(!0), r = m(() => n.value ? "f_lock" : "f_unlock"), i = () => {
+      set: (i) => t.setLockedModal(i)
+    }), n = P(!0), r = d(() => n.value ? "f_lock" : "f_unlock"), a = () => {
       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, {
+    return (i, c) => {
+      const l = be("q-card-section"), m = be("q-btn"), h = be("q-card-actions"), g = be("q-card"), y = be("q-dialog"), I = Xt("close-popup");
+      return Fe(), Je(y, {
         modelValue: s.value,
         "onUpdate:modelValue": c[0] || (c[0] = (w) => s.value = w),
         class: "unlock-modal"
       }, {
-        default: H(() => [
-          L(g, {
+        default: Q(() => [
+          O(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 ")
+            default: Q(() => [
+              O(l, null, {
+                default: Q(() => [...c[1] || (c[1] = [
+                  Ae("div", { class: "text-h6 text-uppercase text-primary" }, "Locked Pose", -1),
+                  Ae("div", null, [
+                    mt(" You have locked your pose."),
+                    Ae("br"),
+                    mt(" Interaction is disabled ")
                   ], -1)
                 ])]),
                 _: 1
               }),
-              L(l, {
+              O(l, {
                 class: "q-pt-none",
                 color: "primary"
               }, {
-                default: H(() => [
-                  L(d, {
+                default: Q(() => [
+                  O(m, {
                     size: "50px",
                     round: "",
                     outline: "",
                     unelevated: "",
                     color: "primary",
                     icon: r.value,
-                    onClick: i
+                    onClick: a
                   }, null, 8, ["icon"])
                 ]),
                 _: 1
               }),
-              c[2] || (c[2] = Ee("div", { style: { height: "25px" } }, null, -1)),
-              L(h, {
+              c[2] || (c[2] = Ae("div", { style: { height: "25px" } }, null, -1)),
+              O(h, {
                 align: "center",
                 class: "bg-white text-primary"
               }, {
-                default: H(() => [
-                  tt(L(d, {
+                default: Q(() => [
+                  Le(O(m, {
                     unelevated: "",
                     outline: "",
                     label: "Cancel",
@@ -2480,11 +2589,11 @@ const po = v({
                   }, null, 512), [
                     [I]
                   ]),
-                  L(d, {
+                  O(m, {
                     unelevated: "",
                     color: "primary",
                     label: "Unlock",
-                    onClick: i,
+                    onClick: a,
                     "data-cy": "ts-button-unlock"
                   })
                 ]),
@@ -2498,226 +2607,230 @@ const po = v({
       }, 8, ["modelValue"]);
     };
   }
-}, To = v({
+}, Eo = v({
   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 = R(), t = f(), o = L(), s = pe(), n = me(), r = oe(), a = F(), i = ne(), c = vs(), { brightness: l, contrast: m, saturate: h } = b(e), { id: g } = b(t), { ready: y } = b(r), { accessibleSkins: I, percentage: w } = b(a), { slug: k } = b(o), { filterStyle: T } = rt({ brightness: l, contrast: m, saturate: h }), E = G("authenticated"), { imagePoint: _, imageSize: V, viewportSize: z } = b(i), { spacing: Y, horizontal: K, vertical: A, visible: j } = b(s), x = P(null), re = P(null), U = ($) => {
+      i.setZoomFromResize($), console.log("resizeViewport", $);
+    }, he = () => {
+      y.value && g.value !== 0 && i.initZoomFromElement(x.value);
     };
-    X(
-      () => _.value,
-      (U) => {
-        if (U) {
+    Z(
+      () => E.value,
+      ($) => {
+        if ($) {
           n.loadSkin();
           return;
         }
-        i.setProperty("id", 1);
+        a.setProperty("id", 1);
       }
-    ), X(
+    ), Z(
       () => I.value,
-      (U, xe) => {
-        U.length > xe.length && n.loadSkin();
+      ($, Ee) => {
+        $.length > Ee.length && n.loadSkin();
       }
-    ), X(
-      () => [g.value, k.value],
-      ([U, xe]) => {
-        me();
+    ), Z(
+      () => [g.value, y.value],
+      ([$, Ee]) => {
+        he();
       }
-    ), fs(), Me(() => {
-      Gt(() => c.$on("resize", K)), me(), n.loadSkin();
-    }), st(() => {
-      c.$off("resize", K);
+    ), Ss(), Ve(() => {
+      Yt(() => c.$on("resize", U)), he(), n.loadSkin();
+    }), nt(() => {
+      c.$off("resize", U);
     });
-    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 ye = d(
+      () => "three-sixty-viewer flex-center unselectable image-background " + k.value
+    ), Ke = d(() => "image-background " + k.value), Ne = {
+      class: ye.value,
+      ref: x
+    }, qe = d(() => ({
       value: w / 100,
       color: "primary",
       class: "loading-bar q-mt-sm"
-    })), Re = m(() => ({
+    })), Ze = d(() => ({
       style: T.value,
-      ref: V,
-      class: Oe.value
+      ref: re,
+      class: Ke.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 Ge() {
+      const $ = {
+        imagePoint: _.value,
+        imageSize: V.value,
+        viewportSize: z.value,
+        lines: Y.value,
+        offsetX: K.value / 100,
+        offsetY: A.value / 100,
+        visible: j.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)
+        Le(u(os, qe.value), [[ot, w.value !== 100]]),
+        u(xo),
+        u(Is, $),
+        u(zo),
+        u("div", Ze.value)
       ]);
     }
-    return () => qe();
+    return () => Ge();
   }
-}), wo = v({
+}), Ao = v({
   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 = G(e), o = f(), s = oe(), n = Se(), r = ne(), { authenticating: a } = b(t), { isLocked: i, isFrozen: c } = b(o), l = d(
+      () => a.value || i.value || c.value
+    ), m = P(!1), h = P(null), g = P(void 0), y = P(0), I = P(0), w = P(0), k = P(0), T = P(void 0), E = P(void 0), _ = P(1), V = d(() => r.property("imagePoint")), z = d(() => r.property("immobileHeight")), Y = d(() => r.property("immobileWidth"));
+    d(() => r.property("maximized"));
+    const K = d(() => r.property("minimized")), { flipped: A } = b(s), j = d(() => A.value ? -1 : 1);
+    function x() {
+      i.value && o.setLockedModal(), c.value && o.pokeFreeze();
+    }
+    Z(c, (p) => {
+      p && n.stopSpin();
+    }), Z(
+      () => j.value,
       (p) => console.log("reverseSpin", p)
     );
-    const W = m(() => r.property("size")), V = m({
+    const re = d(() => r.property("size")), U = d({
       get: () => n.property("frame"),
       set: (p) => {
-        c.value || n.setFrame(p);
+        l.value || n.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) {
+    }), he = d(() => Math.ceil(re.value.width / (ye.value / 1.7))), ye = d(() => n.property("renderCount")), Ke = d(() => r.property("zoom")), Ne = (p) => {
+      if (x(), !l.value) {
+        if (Ke.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))
+    }, qe = (p) => {
+      const S = p.srcEvent.keyCode;
+      if (x(), l.value || (S === 16 && (m.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 D = 0, C = 0;
+      const N = p.srcEvent.shiftKey ? 10 : 1;
+      D += S === 37 ? -3 : 0, D += S === 39 ? 3 : 0, C += S === 38 ? -3 : 0, C += S === 40 ? 3 : 0, D = D * N, C = C * N, lt({ x: D, y: C });
+    }, Ze = (p) => {
       if (p.key === "Shift") {
-        l.value = !1;
+        m.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;
-      w.value = p.scale, r.setZoomFromPointer({
+    }, Ge = (p) => {
+      g.value = void 0, T.value = void 0, y.value = 0, I.value = 0;
+    }, $ = (p) => {
+      if (x(), l.value) return;
+      const S = p.pointers.length;
+      (S === 2 || S === 1 && m.value) && ut(p), S === 1 && Rt(p);
+    }, Ee = (p) => {
+      E.value = Date.now(), g.value = p.center, T.value = U.value;
+    }, Ft = (p) => {
+      if (x(), l.value || (ut(p), Math.abs(p.scale - _.value) < 0.02)) return;
+      const S = p.scale < k.value ? -1 : 1;
+      k.value = p.scale, r.setZoomFromPointer({
         event: p,
-        element: Ze,
-        increment: y
+        element: We,
+        increment: S
       }), _.value = p.scale;
-    }, At = (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;
+    }, Vt = (p) => {
+      g.value = p.center;
+    }, jt = (p) => {
+      if (Date.now() - E.value > 1e3 || (x(), l.value) || Math.abs(p.velocityX) <= 0.02) return;
+      const D = p.velocityX, C = p.deltaX;
       n.spinToFrame({
-        value: jt({ distance: P, velocity: C }),
-        duration: Vt({ distance: P, velocity: C })
+        value: Ot({ distance: C, velocity: D }),
+        duration: $t({ distance: C, velocity: D })
       });
-    }, Mt = (p) => {
-      a.value && D(), !c.value && n.stopSpin();
-    }, Ft = (p) => {
-      if (a.value && D(), 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)
-        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;
+      x(), !l.value && n.stopSpin();
     }, 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;
+      if (x(), l.value) return;
+      p = p.srcEvent || p, p.preventDefault(), p.stopPropagation();
+      const S = p.deltaX, D = p.deltaY, C = 2, N = Math.abs(D) > Math.abs(S) ? 1 : -1;
+      (N === 1 && (D > C || D < -C) || p.ctrlKey) && Nt(p), N === -1 && (S > C || S < -C) && Kt(p);
+    }, $t = ({ velocity: p, distance: S }) => {
+      const D = et.newRectFromElement(h.value), C = 1 + Math.abs(S) / D.width;
+      return Math.floor(Math.abs(p) * C * 500);
+    }, Ot = ({ velocity: p, distance: S }) => {
+      const D = et.newRectFromElement(h.value), C = ye.value, N = Math.abs(S) / p / 1e3, Zt = Math.abs(S) / D.width * N, ke = Math.floor(Zt * C), dt = (S < 0 ? -1 : 1) * j.value;
+      return dt > 0 && ke < U.value ? ke + C : dt < 0 && ke > U.value ? ke - C : ke;
+    }, ct = (p, S) => {
+      const D = Math.floor(p / he.value) * S * j.value;
+      return (T.value + D) % ye.value;
+    }, lt = ({ x: p, y: S }) => {
+      if (x(), l.value) return;
+      const D = Y.value || p === 0 ? V.value.left : V.value.left + p, C = z.value || S === 0 ? V.value.top : V.value.top + S, N = new W(D, C);
+      r.setImagePoint(N);
+    }, ut = (p) => {
+      if (x(), l.value || K.value)
+        return;
+      const S = p.deltaX - y.value;
+      y.value = p.deltaX;
+      const D = p.deltaY - I.value;
+      I.value = p.deltaY, lt({ x: S, y: D });
+    }, Rt = (p) => {
+      const S = p.center.x - g.value.x;
+      if (Math.abs(S) < he.value || m.value) return;
+      const D = p.center.x < g.value.x ? -1 : 1;
+      g.value = p.center, U.value = ct(Math.abs(S), D), T.value = U.value;
+    }, Kt = (p) => {
+      if (x(), l.value) return;
+      const S = p.deltaX - w.value, D = p.deltaX < 0 ? -1 : 1;
+      Math.abs(S) < he.value || (w.value = p.deltaX, U.value = ct(Math.abs(S), D), T.value = U.value);
+    }, Nt = (p) => {
+      if (x(), l.value) return;
+      const S = p.deltaY < 0 ? 2 : -2;
       r.setZoomFromPointer({
         event: p,
-        element: Ze,
-        increment: y
+        element: We,
+        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 We;
+    const He = new ht(), Xe = new ht();
+    He.on({
+      swipe: jt,
+      wheel: Lt,
+      keyup: Ze,
+      keydown: qe,
+      pointerdown: Ut
+    }), Xe.on({
+      panstart: Ee,
+      panend: Ge,
+      panmove: $,
+      pinch: Ft,
+      pinchstart: Vt,
+      doubletap: Ne
+    }), Ve(() => {
+      We = document.getElementById("image-holder"), He.setElement(h.value), Xe.setElement(h.value), document.addEventListener(
         "touchmove",
         function(p) {
           p.scale;
         },
-        ks ? { passive: !1 } : !1
+        ws ? { passive: !1 } : !1
       );
-    }), st(() => {
-      Ge.destroy(), We.destroy();
+    }), nt(() => {
+      He.destroy(), Xe.destroy();
     });
-    function Ot() {
+    function qt() {
       return u("div", {
         class: "detector",
         id: "detector",
-        ref: d
+        ref: h
       }, []);
     }
-    return () => Ot();
+    return () => qt();
   }
-}), jo = /* @__PURE__ */ Object.assign({
+}), qo = /* @__PURE__ */ Object.assign({
   name: "TsPage",
   slug: "ts-page",
   inheritAttrs: !1
 }, {
   __name: "TsPage",
-  props: /* @__PURE__ */ Xt({
+  props: /* @__PURE__ */ es({
     routeKey: {
       type: String,
       required: !0
@@ -2735,47 +2848,47 @@ 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);
+    ys();
+    const t = St(), o = Qt(e, "miniState"), s = Symbol.for("ux"), n = Symbol.for("activity-tracking"), r = f(), a = G(s), i = G(n, null), { toolDrawer: c } = b(a);
+    Ve(() => {
+      r.active !== J && (r.active = t.platform.is.mobile ? kt : Ue);
     });
-    const l = (d) => {
-      d && (a == null || a.trackEvent(Os, {
+    const l = (m) => {
+      m && (i == null || i.trackEvent(qs, {
         pose_id: r.id || null,
-        base_pose_id: d
+        base_pose_id: m
       }));
     };
-    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(
+    return Ve(async () => {
+      i && (await i.beginExplore(), i.trackEvent(Ns, { from: null, to: "360" }), r.basePoseId && (i.beginSegment(String(r.basePoseId)), l(r.basePoseId)));
+    }), Z(
       () => r.basePoseId,
-      (d, h) => {
-        !d || d === h || (a == null || a.beginSegment(String(d)), l(d));
+      (m, h) => {
+        !m || m === h || (i == null || i.beginSegment(String(m)), l(m));
       }
-    ), st(() => {
-      a == null || a.end();
-    }), (d, h) => (_e(), Ye(ae(ys), {
+    ), nt(() => {
+      i == null || i.end();
+    }), (m, h) => (Fe(), Je(ce(Ts), {
       miniState: o.value,
       "onUpdate:miniState": h[0] || (h[0] = (g) => o.value = g),
       "drawer-padding": e.drawerPadding,
       title: "360° Viewer"
     }, {
-      toolDrawer: H(() => [
-        L(ae(so))
+      toolDrawer: Q(() => [
+        O(ce(io))
       ]),
-      bottomDrawer: H(() => [
-        ae(t).platform.is.mobile ? (_e(), Ye(ae(yo), { key: 0 })) : Ht("", !0)
+      bottomDrawer: Q(() => [
+        ce(t).platform.is.mobile ? (Fe(), Je(ce(Co), { key: 0 })) : Jt("", !0)
       ]),
-      default: H(() => [
-        L(ae(wo)),
-        L(ae(To))
+      default: Q(() => [
+        O(ce(Ao)),
+        O(ce(Eo))
       ]),
       _: 1
     }, 8, ["miniState", "drawer-padding"]));
   }
 });
 export {
-  jo as TsPage,
+  qo as TsPage,
   f as use360Store
 };