@figurosity/consumer-three-dimension-tool 0.5.0 → 0.8.1

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

@@ -1,46 +1,46 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".tool-reset-button .qbtn{color:#333;font-weight:700}.debug-color{max-width:100px}.debug-color .swatch{height:20px;width:20px;border-radius:10px;border:1px solid #333}.debug-color .label{font-weight:700}.debug-value span{margin-top:2px;min-width:60px;font-size:11px}.debug-vector{min-width:130px}.debug-vector>div{font-size:10px}.debug-vector>div>span{min-width:20px;font-weight:700}.debug-boolean .indicator{margin-top:6px;margin-right:4px;height:10px;width:10px;border-radius:10px;border:1px solid #333;display:inline-block;background:red}.debug-boolean .indicator.on{background:#adff2f}.debug3D{position:absolute;z-index:14400;top:20px;left:40px;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#ffffffb3}.debug3D .color-square{display:inline-block;height:15px;width:15px;margin-bottom:-3px;border:1px dotted black}.three-dimension-tool{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}.three-dimension-tool .tres{width:100%;height:100vh}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { watch as O, ref as pe, nextTick as ns, onUnmounted as _t, computed as C, onMounted as jt, openBlock as nt, createElementBlock as rs, createCommentVNode as vt, createElementVNode as is, onBeforeMount as as, defineComponent as R, h as d, inject as xt, useModel as ls, onBeforeUnmount as cs, createBlock as mt, unref as ft, withCtx as ht, createVNode as us, mergeModels as ds } from "vue";
-import { useQuasar as ps, QBtn as Ut, QSeparator as Ie, Platform as ms } from "quasar";
-import { CBaseButton as Ce, CColorPickerPopup as fs, CExpansion as We, CToggle as Ot, CSlider as Ke, CBaseButtons as $t, CDraggableDrawer as Pe, CDraggableDrawers as hs, CToolPage as gs } from "@figurosity/consumer-controls";
-import { defineStore as Xe, storeToRefs as $, getActivePinia as bs } from "pinia";
-import * as I from "three";
-import Ze from "lodash.isequal";
-import { SKINS as ye, COLORS as se, GRID as Se, LIGHTS as de, RELATED as xe, getConfig as vs, useDynamicImages as ys, DEFAULT as Nt } from "@figurosity/toolbox";
-import { OrbitControls as Ss } from "three/examples/jsm/controls/OrbitControls.js";
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".tool-reset-button .qbtn{color:#333;font-weight:700}:has(>.frozen-overlay){position:relative}.frozen-overlay{position:absolute;z-index:10;top:0;left:0;bottom:0;right:0}.debug-color{max-width:100px}.debug-color .swatch{height:20px;width:20px;border-radius:10px;border:1px solid #333}.debug-color .label{font-weight:700}.debug-value span{margin-top:2px;min-width:60px;font-size:11px}.debug-vector{min-width:130px}.debug-vector>div{font-size:10px}.debug-vector>div>span{min-width:20px;font-weight:700}.debug-boolean .indicator{margin-top:6px;margin-right:4px;height:10px;width:10px;border-radius:10px;border:1px solid #333;display:inline-block;background:red}.debug-boolean .indicator.on{background:#adff2f}.debug3D{position:absolute;z-index:14400;top:20px;left:40px;padding:20px;border:1px solid #ccc;border-radius:10px;background-color:#ffffffb3}.debug3D .color-square{display:inline-block;height:15px;width:15px;margin-bottom:-3px;border:1px dotted black}.three-dimension-tool{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}.three-dimension-tool .tres{width:100%;height:100vh}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { watch as G, ref as he, nextTick as cs, onUnmounted as Ut, computed as C, onMounted as $t, openBlock as at, createElementBlock as us, createCommentVNode as wt, createElementVNode as ds, onBeforeMount as ps, defineComponent as V, h as d, withDirectives as ms, vShow as fs, inject as Ze, useModel as hs, onBeforeUnmount as gs, createBlock as vt, unref as bt, withCtx as yt, createVNode as vs, mergeModels as bs } from "vue";
+import { Platform as Ct, useQuasar as ys, QBtn as qt, QSeparator as ye } from "quasar";
+import { CBaseButton as ie, CColorPickerPopup as Ss, CExpansion as Ve, CToggle as Ht, CSlider as We, CBaseButtons as Jt, CDraggableDrawer as Te, CDraggableDrawers as xs, CToolPage as ws } from "@figurosity/consumer-controls";
+import { defineStore as Ye, storeToRefs as O, getActivePinia as Cs } from "pinia";
+import * as k from "three";
+import Qe from "lodash.isequal";
+import { DEFAULT as lt, SKINS as ee, COLORS as ne, GRID as Ce, LIGHTS as fe, RELATED as Ee, getConfig as Es, useDynamicImages as ks } from "@figurosity/toolbox";
 import "three/examples/jsm/loaders/RGBELoader.js";
-import { RoomEnvironment as xs } from "three/examples/jsm/environments/RoomEnvironment.js";
-import { mergeVertices as Bt, mergeGeometries as Cs } from "three/examples/jsm/utils/BufferGeometryUtils.js";
-import { RoundedBoxGeometry as ws } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
-import { GLTFLoader as Es } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { DRACOLoader as Is } from "three/examples/jsm/loaders/DRACOLoader.js";
-const Ms = "tool:switched", Ds = "pose:viewed", Ts = "skin:changed", gt = new I.Vector3(), zt = (e) => {
-  const t = new I.Box3().setFromObject(e);
+import { RoomEnvironment as Is } from "three/examples/jsm/environments/RoomEnvironment.js";
+import { OrbitControls as Ts } from "three/examples/jsm/controls/OrbitControls.js";
+import { mergeVertices as Rt, mergeGeometries as Ds } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RoundedBoxGeometry as Ms } from "three/examples/jsm/geometries/RoundedBoxGeometry.js";
+import { GLTFLoader as Bs } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader as As } from "three/examples/jsm/loaders/DRACOLoader.js";
+const zs = "tool:switched", Ps = "pose:viewed", Ls = "skin:changed", St = new k.Vector3(), Vt = (e) => {
+  const t = new k.Box3().setFromObject(e);
   console.log("box", t);
-  const s = t.getSize(new I.Vector3()), i = new I.Vector3(
+  const s = t.getSize(new k.Vector3()), o = new k.Vector3(
     (t.min.x + t.max.x) / 2,
     (t.min.y + t.max.y) / 2,
     (t.min.z + t.max.z) / 2
   );
-  console.log("center", i);
-  let r = t.min.y;
-  return console.log("bottom", r), Math.abs(r) < -0.01 && (r = ks(e)), console.log("bottom", r), {
+  console.log("center", o);
+  let n = t.min.y;
+  return console.log("bottom", n), Math.abs(n) < -0.01 && (n = Rs(e)), console.log("bottom", n), {
     box: t,
     size: s,
-    center: i,
-    bottom: r,
+    center: o,
+    bottom: n,
     top: t.max.y
   };
-}, ks = (e) => {
+}, Rs = (e) => {
   let t = 1 / 0;
   return e.updateMatrixWorld(!0), e.traverse((s) => {
-    var r, n;
+    var n, i;
     if (!s.isMesh) return;
-    const i = (n = (r = s.geometry) == null ? void 0 : r.attributes) == null ? void 0 : n.position;
-    if (i)
-      for (let o = 0; o < i.count; o++)
-        gt.fromBufferAttribute(i, o), gt.applyMatrix4(s.matrixWorld), t = Math.min(t, gt.y);
+    const o = (i = (n = s.geometry) == null ? void 0 : n.attributes) == null ? void 0 : i.position;
+    if (o)
+      for (let r = 0; r < o.count; r++)
+        St.fromBufferAttribute(o, r), St.applyMatrix4(s.matrixWorld), t = Math.min(t, St.y);
   }), t;
-}, Ht = (e) => ({
+}, Kt = (e) => ({
   box: {
     min: {
       x: e.box.min.x,
@@ -65,7 +65,7 @@ const Ms = "tool:switched", Ds = "pose:viewed", Ts = "skin:changed", gt = new I.
   },
   bottom: e.bottom,
   top: e.top
-}), qt = "smooth", As = (e) => ({
+}), Wt = "smooth", Vs = (e) => ({
   id: e.id,
   uuid: e.uuid ?? null,
   basePoseId: e.basePoseId ?? null,
@@ -77,21 +77,21 @@ const Ms = "tool:switched", Ds = "pose:viewed", Ts = "skin:changed", gt = new I.
   poseId: e.poseId ?? null,
   url: e.glbPathWebp || e.glbPath || null,
   bounds: e.bounds ?? null
-}), me = Xe("3d-glbs", {
+}), ae = Ye("3d-glbs", {
   state: () => ({
     models: {}
   }),
   getters: {
     selectedId() {
-      return A().selected;
+      return T().selected;
     },
     poseId(e) {
-      var s, i;
-      const t = A().selected;
-      return (i = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : i.poseId;
+      var s, o;
+      const t = T().selected;
+      return (o = (s = e.models) == null ? void 0 : s[t]) == null ? void 0 : o.poseId;
     },
     model(e) {
-      const t = A().selected;
+      const t = T().selected;
       return t && e.models[t] ? e.models[t] : null;
     },
     url() {
@@ -105,145 +105,175 @@ const Ms = "tool:switched", Ds = "pose:viewed", Ts = "skin:changed", gt = new I.
   },
   actions: {
     setBounds(e) {
-      const t = A().selected;
-      this.models[t] && (this.models[t].bounds = Ht(e));
+      const t = T().selected;
+      this.models[t] && (this.models[t].bounds = Kt(e));
     },
     setSubjectsFromResponse(e) {
-      var i;
-      const t = ((i = e == null ? void 0 : e.entities) == null ? void 0 : i.glb) || {}, s = {};
-      return Object.keys(t).forEach((r) => {
-        s[r] = As(t[r]);
+      var o;
+      const t = ((o = e == null ? void 0 : e.entities) == null ? void 0 : o.glb) || {}, s = {};
+      return Object.keys(t).forEach((n) => {
+        s[n] = Vs(t[n]);
       }), this.models = { ...this.models, ...s }, this.selectDefaultGlbId(e);
     },
     // Picks the GLB id whose skin slug matches DEFAULT_SKIN_SLUG, falls
     // back to result.glb[0], or null when no GLBs are available.
     selectDefaultGlbId(e) {
-      var o, l, a;
-      const t = Array.isArray((o = e == null ? void 0 : e.result) == null ? void 0 : o.glb) ? e.result.glb : [];
+      var r, c, a;
+      const t = Array.isArray((r = e == null ? void 0 : e.result) == null ? void 0 : r.glb) ? e.result.glb : [];
       if (t.length === 0) return null;
-      const s = ((l = e == null ? void 0 : e.entities) == null ? void 0 : l.skins) || {}, i = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.glb) || {}, n = t.find((u) => {
-        var D, w;
-        const p = (D = i[u]) == null ? void 0 : D.skinId;
-        return p != null && ((w = s[p]) == null ? void 0 : w.slug) === qt;
+      const s = ((c = e == null ? void 0 : e.entities) == null ? void 0 : c.skins) || {}, o = ((a = e == null ? void 0 : e.entities) == null ? void 0 : a.glb) || {}, i = t.find((u) => {
+        var P, w;
+        const p = (P = o[u]) == null ? void 0 : P.skinId;
+        return p != null && ((w = s[p]) == null ? void 0 : w.slug) === Wt;
       }) ?? t[0];
-      return typeof n == "string" ? parseInt(n, 10) : n;
+      return typeof i == "string" ? parseInt(i, 10) : i;
     }
   }
 });
-function Ye(e) {
+function et(e) {
   const t = e.startsWith("#") ? e.slice(1) : e;
   return parseInt(t, 16);
 }
-function ue(e) {
+function me(e) {
   return `#${e.toString(16).padStart(6, "0")}`;
 }
-const Qe = ({
+const tt = ({
   storeId: e,
   defaultValues: t = {},
   state: s = {},
-  getters: i = {},
-  actions: r = {},
-  keyBy: n = "selected"
-}) => Xe(e, {
+  getters: o = {},
+  actions: n = {},
+  keyBy: i = "selected"
+}) => Ye(e, {
   state: () => ({
     loading: !1,
     models: {},
+    // Bumped by `restore()` so callers outside the lib (the
+    // consumer-app's `useViewerUrlSync` ?v= apply path) can trigger
+    // a re-apply into three.js. Stores whose state already flows
+    // through reactive watchers (grid/scene/ground) ignore this; the
+    // ones that don't (controls, lights orbit) use it as the only
+    // signal that the host did a `restore()` and the three.js camera
+    // needs to be re-driven from the store. See ThreeDimensionTool
+    // for the watcher and the rationale.
+    applyRevision: 0,
     ...s
   }),
   getters: {
     keyId() {
-      return A()[n];
+      return T()[i];
     },
-    model(o) {
-      return o.models[A()[n]];
+    model(r) {
+      return r.models[T()[i]];
     },
-    exists(o) {
-      return typeof o.models[A()[n]] < "u";
+    exists(r) {
+      return typeof r.models[T()[i]] < "u";
     },
-    selectedModel(o) {
-      return o.models[A()[n]] ?? null;
+    selectedModel(r) {
+      return r.models[T()[i]] ?? null;
     },
     mergedModel() {
       return { ...t, ...this.selectedModel ?? {} };
     },
-    propertyById(o) {
-      return (l, a, u = null) => o.models[l] && a in o.models[l] ? o.models[l][a] : u;
+    propertyById(r) {
+      return (c, a, u = null) => r.models[c] && a in r.models[c] ? r.models[c][a] : u;
     },
     propertyChangedById() {
-      return (o, l) => this.propertyById(o, l) !== t[l];
+      return (r, c) => this.propertyById(r, c) !== t[c];
     },
-    propertyChanged(o) {
-      const l = A()[n];
-      return (a) => o.models[l] ? this.propertyById(l, a) !== t[a] : !1;
+    propertyChanged(r) {
+      const c = T()[i];
+      return (a) => r.models[c] ? this.propertyById(c, a) !== t[a] : !1;
     },
     property() {
-      const o = A()[n];
-      return (l, a = t[l]) => this.propertyById(o, l, a);
+      const r = T()[i];
+      return (c, a = t[c]) => this.propertyById(r, c, a);
     },
-    ...i
+    ...o
   },
   actions: {
-    initModel(o) {
-      o != null && (typeof this.models[o] < "u" || this.$patch((l) => {
-        l.models[o] = { ...t };
+    initModel(r) {
+      r != null && (typeof this.models[r] < "u" || this.$patch((c) => {
+        c.models[r] = { ...t };
       }));
     },
     ensureSelectedModel() {
-      const o = A()[n];
-      return o == null ? null : (this.models[o] || (this.models[o] = { ...t }), this.models[o]);
+      const r = T()[i];
+      return r == null ? null : (this.models[r] || (this.models[r] = { ...t }), this.models[r]);
     },
-    setPropertyById(o, l, a) {
-      o != null && (this.models[o] || this.initModel(o), this.$patch({
+    setPropertyById(r, c, a) {
+      r != null && (this.models[r] || this.initModel(r), this.$patch({
         models: {
-          [o]: { ...this.models[o], [l]: a }
+          [r]: { ...this.models[r], [c]: a }
         }
       }));
     },
-    setProperty(o, l) {
-      const a = A()[n];
+    setProperty(r, c) {
+      const a = T()[i];
       a != null && (this.models[a] || this.initModel(a), this.$patch({
         models: {
-          [a]: { ...this.models[a], [o]: l }
+          [a]: { ...this.models[a], [r]: c }
         }
       }));
     },
-    patchSelected(o) {
-      const l = this.ensureSelectedModel();
-      l && Object.assign(l, o);
+    patchSelected(r) {
+      const c = this.ensureSelectedModel();
+      c && Object.assign(c, r);
     },
     reset() {
-      const o = A()[n];
-      o != null && this.$patch((l) => {
-        l.models[o] = { ...t };
+      const r = T()[i];
+      r != null && this.$patch((c) => {
+        c.models[r] = { ...t };
       });
     },
-    resetProperty(o) {
-      const l = A()[n];
-      l != null && this.models[l] && this.$patch({
+    resetProperty(r) {
+      const c = T()[i];
+      c != null && this.models[c] && this.$patch({
         models: {
-          [l]: {
-            ...this.models[l],
-            [o]: t[o]
+          [c]: {
+            ...this.models[c],
+            [r]: t[r]
           }
         }
       });
     },
-    ...r
+    // Capture the active model's tunable state as a plain object. Used
+    // by the save+freeze flow (consumer-app `composeViewState`) and the
+    // URL `?v=` writer in `useViewerUrlSync` to encode the current view.
+    // Returns null when there's no active bucket so the caller can omit
+    // the slot from the payload rather than encode a stale snapshot.
+    snapshot() {
+      const r = T()[i];
+      return r == null || !this.models[r] ? null : JSON.parse(JSON.stringify(this.models[r]));
+    },
+    // Apply a snapshot from the save+freeze payload back onto the
+    // active bucket. Missing keys fall through to defaultValues; the
+    // caller passes the same shape `snapshot()` produced.
+    restore(r) {
+      if (r == null || typeof r != "object") return;
+      const c = T()[i];
+      if (c == null) return;
+      const a = JSON.parse(JSON.stringify(r));
+      this.$patch((u) => {
+        u.models[c] = { ...t, ...a }, u.framed && (u.framed[c] = !0), u.applyRevision = (u.applyRevision || 0) + 1;
+      });
+    },
+    ...n
   }
-}), Kt = {
+}), Xt = {
   visible: !0,
   opacity: 1,
   color: 16711422,
   texture: "none"
-}, Bs = {
+}, Fs = {
   changed() {
-    return this.exists ? !Ze(this.mergedModel, Kt) : !1;
+    return this.exists ? !Qe(this.mergedModel, Xt) : !1;
   },
   color() {
     return this.property("color");
   },
   colorHex() {
-    return ue(this.property("color"));
+    return me(this.property("color"));
   },
   opacity() {
     return this.property("opacity");
@@ -254,7 +284,7 @@ const Qe = ({
   visible() {
     return this.property("visible");
   }
-}, zs = {
+}, _s = {
   init() {
     this.initModel(this.keyId);
   },
@@ -262,7 +292,7 @@ const Qe = ({
     this.setProperty("color", e);
   },
   setColorHex(e) {
-    this.setProperty("color", Ye(e));
+    this.setProperty("color", et(e));
   },
   setTexture(e) {
     this.setProperty("texture", e);
@@ -270,33 +300,33 @@ const Qe = ({
   setVisible(e) {
     this.setProperty("visible", e);
   }
-}, Ve = Qe({
+}, Fe = tt({
   storeId: "3d-ground",
-  defaultValues: Kt,
+  defaultValues: Xt,
   state: { offset: -0.75 },
-  getters: Bs,
-  actions: zs,
+  getters: Fs,
+  actions: _s,
   keyBy: "basePoseId"
-}), Ls = {
+}), js = {
   color: 16777215,
   visible: !0,
   debug: !1,
   shadow: !0,
   visualization: !0
-}, Be = 0, te = 1, yt = 1.25, St = 3, et = (e, t, s) => Math.max(t, Math.min(s, e)), Ps = 1.25, ze = (e = {}) => ({ ...Ls, ...e }), Ae = {
+}, Pe = 0, oe = 1, Et = 1.25, kt = 3, ot = (e, t, s) => Math.max(t, Math.min(s, e)), Gs = 1.25, Le = (e = {}) => ({ ...js, ...e }), ze = {
   advanced: !1,
   move: !1,
   position: { x: 0, y: 0, z: 1.5 },
   quaternion: { x: 0, y: 0, z: 0, w: 1 },
   target: { x: 0, y: 0, z: 0 }
-}, Lt = ["advanced", "move"], tt = (e = {}) => ({ ...Ae, ...e }), Vs = {
-  ambientScale: te,
-  userScale: te
-}, st = (e = {}) => ({ ...Vs, ...e }), bt = () => ({
-  key: ze(),
-  fill: ze({ shadow: !0 }),
-  back: ze({ shadow: !0 })
-}), fe = Xe("3d-lights", {
+}, Ft = ["advanced", "move"], nt = (e = {}) => ({ ...ze, ...e }), Os = {
+  ambientScale: oe,
+  userScale: oe
+}, rt = (e = {}) => ({ ...Os, ...e }), xt = () => ({
+  key: Le(),
+  fill: Le({ shadow: !0 }),
+  back: Le({ shadow: !0 })
+}), ge = Ye("3d-lights", {
   state: () => ({
     lights: {},
     options: {},
@@ -308,14 +338,23 @@ const Qe = ({
     // doesn't depend on whether option fields happen to look default.
     framed: {},
     collection: ["key", "fill", "back"],
-    debug: !1
+    debug: !1,
+    // Bumped by `restore()` so ThreeDimensionTool can detect that the
+    // host (consumer-app's tier-3 ?v= save-load) pushed new state in,
+    // and re-activate lights/camera modes to drive the OrbitControls
+    // rig from the just-restored options/lights/scales slots. The
+    // intensity sliders and per-spot color watchers fire on slot
+    // mutations directly, but the rig position (in options.position/
+    // quaternion/target/radius) only flows through `applyFromStore`
+    // and needs the explicit re-activation signal.
+    applyRevision: 0
   }),
   getters: {
     bpId() {
-      return A().basePoseId;
+      return T().basePoseId;
     },
     skinId() {
-      return A().selected;
+      return T().selected;
     },
     // The reset button reflects "user has tweaked something on the
     // active skin." Toggles + rig are per-basePose; sliders are
@@ -325,10 +364,10 @@ const Qe = ({
     // toggles + the active skin's slider values count.
     changed(e) {
       const t = e.options[this.bpId];
-      if (t && Lt.some((i) => !Ze(t[i], Ae[i])))
+      if (t && Ft.some((o) => !Qe(t[o], ze[o])))
         return !0;
       const s = e.scales[this.skinId];
-      return !!(s && (s.ambientScale !== te || s.userScale !== te));
+      return !!(s && (s.ambientScale !== oe || s.userScale !== oe));
     },
     // Has frameToBounds + syncToStore landed on this basePose's
     // lights rig? Set by markFramed() from the bounds watcher in
@@ -351,40 +390,40 @@ const Qe = ({
     // above the new AMBIENT_SCALE_MAX / USER_SCALE_MAX.
     ambientScale(e) {
       var s;
-      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.ambientScale) ?? te;
-      return et(t, Be, yt);
+      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.ambientScale) ?? oe;
+      return ot(t, Pe, Et);
     },
     userScale(e) {
       var s;
-      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.userScale) ?? te;
-      return et(t, Be, St);
+      const t = ((s = e.scales[this.skinId]) == null ? void 0 : s.userScale) ?? oe;
+      return ot(t, Pe, kt);
     },
     position(e) {
       var t;
-      return ((t = e.options[this.bpId]) == null ? void 0 : t.position) || Ae.position;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.position) || ze.position;
     },
     quaternion(e) {
       var t;
-      return ((t = e.options[this.bpId]) == null ? void 0 : t.quaternion) || Ae.quaternion;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.quaternion) || ze.quaternion;
     },
     target(e) {
       var t;
-      return ((t = e.options[this.bpId]) == null ? void 0 : t.target) || Ae.target;
+      return ((t = e.options[this.bpId]) == null ? void 0 : t.target) || ze.target;
     },
     radius(e) {
       var t;
       return (t = e.options[this.bpId]) == null ? void 0 : t.radius;
     },
     property(e) {
-      return (t, s = null, i = null) => {
-        const r = e.lights[this.bpId];
-        return !r || !r[t] || !(s in r[t]) ? i : r[t][s];
+      return (t, s = null, o = null) => {
+        const n = e.lights[this.bpId];
+        return !n || !n[t] || !(s in n[t]) ? o : n[t][s];
       };
     },
     colorHex(e) {
       return (t) => {
         const s = e.lights[this.bpId];
-        return !s || !s[t] ? "#ffffff" : ue(s[t].color);
+        return !s || !s[t] ? "#ffffff" : me(s[t].color);
       };
     },
     lightKeys(e) {
@@ -398,13 +437,13 @@ const Qe = ({
     reset() {
       const e = this.bpId, t = this.skinId;
       if (e == null) return;
-      this.options[e] || (this.options[e] = tt()), Lt.forEach((i) => this.options[e][i] = Ae[i]), t != null && (this.scales[t] || (this.scales[t] = st()), this.scales[t].ambientScale = te, this.scales[t].userScale = te);
+      this.options[e] || (this.options[e] = nt()), Ft.forEach((o) => this.options[e][o] = ze[o]), t != null && (this.scales[t] || (this.scales[t] = rt()), this.scales[t].ambientScale = oe, this.scales[t].userScale = oe);
       const s = this.seeds[t];
       s ? this.lights[e] = {
         key: { ...s.key },
         fill: { ...s.fill },
         back: { ...s.back }
-      } : this.lights[e] = bt();
+      } : this.lights[e] = xt();
     },
     // Seed per-skin lights from the recipe and warm the per-basePose
     // user-state buckets if absent. The recipe is always rewritten
@@ -414,24 +453,24 @@ const Qe = ({
     // survives subsequent skin swaps within the same basePose.
     // scales[skinId] is per-skin and warmed once per skin.
     seedFromRecipe(e, t) {
-      const s = ((t == null ? void 0 : t.spotIntensity) ?? 1) * Ps, i = (t == null ? void 0 : t.ambientIntensity) ?? 0, r = (t == null ? void 0 : t.envIntensity) ?? 1;
+      const s = ((t == null ? void 0 : t.spotIntensity) ?? 1) * Gs, o = (t == null ? void 0 : t.ambientIntensity) ?? 0, n = (t == null ? void 0 : t.envIntensity) ?? 1;
       this.seeds[e] = {
-        key: ze({ intensity: s }),
-        fill: ze({ intensity: s, shadow: !0 }),
-        back: ze({ intensity: s, shadow: !0 }),
-        ambient: { intensity: i },
-        env: { intensity: r }
-      }, e != null && !this.scales[e] && (this.scales[e] = st());
-      const n = this.bpId;
-      n != null && (this.lights[n] || (this.lights[n] = bt()), this.options[n] || (this.options[n] = tt()));
+        key: Le({ intensity: s }),
+        fill: Le({ intensity: s, shadow: !0 }),
+        back: Le({ intensity: s, shadow: !0 }),
+        ambient: { intensity: o },
+        env: { intensity: n }
+      }, e != null && !this.scales[e] && (this.scales[e] = rt());
+      const i = this.bpId;
+      i != null && (this.lights[i] || (this.lights[i] = xt()), this.options[i] || (this.options[i] = nt()));
     },
     ensureSelectedOptions() {
       const e = this.bpId;
-      return e == null ? null : (this.options[e] || (this.options[e] = tt()), this.options[e]);
+      return e == null ? null : (this.options[e] || (this.options[e] = nt()), this.options[e]);
     },
     ensureSelectedScales() {
       const e = this.skinId;
-      return e == null ? null : (this.scales[e] || (this.scales[e] = st()), this.scales[e]);
+      return e == null ? null : (this.scales[e] || (this.scales[e] = rt()), this.scales[e]);
     },
     setControlProperty(e, t) {
       const s = this.ensureSelectedOptions();
@@ -464,63 +503,85 @@ const Qe = ({
         return;
       }
       s.advanced = !1;
-      const i = this.lights[t];
-      if (!i) return;
-      const r = i.key;
-      this.collection.forEach((n) => {
-        n !== "key" && (i[n].color = r.color);
+      const o = this.lights[t];
+      if (!o) return;
+      const n = o.key;
+      this.collection.forEach((i) => {
+        i !== "key" && (o[i].color = n.color);
       });
     },
     setColorHex(e, t) {
-      var n;
+      var i;
       this.initLights();
       const s = this.bpId;
       if (s == null) return;
-      const i = this.lights[s];
-      if (!i) return;
-      const r = Ye(t);
-      if (((n = this.options[s]) == null ? void 0 : n.advanced) === !0) {
-        i[e].color = r;
+      const o = this.lights[s];
+      if (!o) return;
+      const n = et(t);
+      if (((i = this.options[s]) == null ? void 0 : i.advanced) === !0) {
+        o[e].color = n;
         return;
       }
-      this.collection.forEach((o) => {
-        i[o].color = r;
+      this.collection.forEach((r) => {
+        o[r].color = n;
       });
     },
     setProperty(e, t, s) {
       this.initLights();
-      const i = this.bpId;
-      if (i == null) return;
-      const r = this.lights[i];
-      r && (r[e][t] = s);
+      const o = this.bpId;
+      if (o == null) return;
+      const n = this.lights[o];
+      n && (n[e][t] = s);
     },
     setAmbientScale(e) {
       this.initLights();
       const t = this.ensureSelectedScales();
-      t && (t.ambientScale = et(e, Be, yt));
+      t && (t.ambientScale = ot(e, Pe, Et));
     },
     setUserScale(e) {
       this.initLights();
       const t = this.ensureSelectedScales();
-      t && (t.userScale = et(e, Be, St));
+      t && (t.userScale = ot(e, Pe, kt));
     },
     initLights() {
       const e = this.bpId, t = this.skinId;
-      t != null && !this.scales[t] && (this.scales[t] = st()), e != null && (this.lights[e] || (this.lights[e] = bt()), this.options[e] || (this.options[e] = tt()));
+      t != null && !this.scales[t] && (this.scales[t] = rt()), e != null && (this.lights[e] || (this.lights[e] = xt()), this.options[e] || (this.options[e] = nt()));
     },
     markFramed() {
       const e = this.bpId;
       e != null && (this.framed[e] = !0);
+    },
+    // Capture the active basePose + skin's tunable lighting state for
+    // the save+freeze flow. Skips `seeds` (per-skin recipe baselines —
+    // rewritten on every GLB load, not user state) and `framed` (a
+    // session flag, not view-state). The three returned slots match
+    // exactly what `restore()` writes back.
+    //
+    //   lights  — per-spot color/visible/shadow for the active basePose
+    //   options — rig position/quaternion/target/radius + toggles
+    //   scales  — ambient/user intensity sliders for the active skin
+    //             only (per "skip per-skin transfer" rule — saves don't
+    //             carry maps across skins).
+    snapshot() {
+      const e = this.bpId, t = this.skinId;
+      if (e == null) return null;
+      const s = this.lights[e] ? JSON.parse(JSON.stringify(this.lights[e])) : null, o = this.options[e] ? JSON.parse(JSON.stringify(this.options[e])) : null, n = t != null && this.scales[t] ? JSON.parse(JSON.stringify(this.scales[t])) : null;
+      return !s && !o && !n ? null : { lights: s, options: o, scales: n };
+    },
+    restore(e) {
+      if (e == null || typeof e != "object") return;
+      const t = this.bpId, s = this.skinId;
+      t != null && (e.lights && (this.lights = { ...this.lights, [t]: JSON.parse(JSON.stringify(e.lights)) }), e.options && (this.options = { ...this.options, [t]: JSON.parse(JSON.stringify(e.options)) }), e.scales && s != null && (this.scales = { ...this.scales, [s]: JSON.parse(JSON.stringify(e.scales)) }), this.framed[t] = !0, this.applyRevision = (this.applyRevision || 0) + 1);
     }
   }
-}), Wt = {
+}), Zt = {
   position: { x: 0, y: 0.39999999999999986, z: 1.5 },
   quaternion: { x: -0.12993279108591813, y: 0, z: 0, w: 0.9915228034698058 },
   target: { x: 0, y: 0, z: 0 },
   radius: 1.5
-}, Rs = {
+}, Ns = {
   changed() {
-    return this.exists ? !Ze(this.mergedModel, Wt) : !1;
+    return this.exists ? !Qe(this.mergedModel, Zt) : !1;
   },
   // Has frameToBounds + syncToStore landed on this basePose's
   // bucket? An explicit per-basePose flag, set by markFramed() from
@@ -546,7 +607,7 @@ const Qe = ({
   radius() {
     return this.mergedModel.radius;
   }
-}, Gs = {
+}, Us = {
   initControls() {
     this.initModel(this.keyId);
   },
@@ -566,36 +627,36 @@ const Qe = ({
   setRadius(e) {
     this.setProperty("radius", e);
   }
-}, ct = Qe({
+}, pt = tt({
   storeId: "3d-controls",
-  defaultValues: Wt,
+  defaultValues: Zt,
   state: { framed: {} },
-  getters: Rs,
-  actions: Gs,
+  getters: Ns,
+  actions: Us,
   keyBy: "basePoseId"
-}), Fs = {
+}), $s = {
   color: 16711422
-}, _s = {
+}, qs = {
   changed() {
     return this.propertyChanged("color");
   },
   colorHex() {
-    return ue(this.property("color"));
+    return me(this.property("color"));
   }
-}, js = {
+}, Hs = {
   init() {
     this.initModel(this.keyId);
   },
   setColorHex(e) {
-    this.setProperty("color", Ye(e));
+    this.setProperty("color", et(e));
   }
-}, ut = Qe({
+}, mt = tt({
   storeId: "3d-scene",
-  defaultValues: Fs,
-  getters: _s,
-  actions: js,
+  defaultValues: $s,
+  getters: qs,
+  actions: Hs,
   keyBy: "basePoseId"
-}), Xt = {
+}), Yt = {
   show: !1,
   front: !1,
   back: !1,
@@ -606,9 +667,9 @@ const Qe = ({
   divisions: 6,
   opacity: 0.5,
   size: 2
-}, Us = {
+}, Js = {
   changed() {
-    return !Ze(this.mergedModel, Xt);
+    return !Qe(this.mergedModel, Yt);
   },
   show() {
     return this.property("show");
@@ -622,17 +683,17 @@ const Qe = ({
   divisions() {
     return this.property("divisions");
   }
-}, Os = {
+}, Ks = {
   init() {
     this.initModel(this.keyId);
   }
-}, Ee = Qe({
+}, ve = tt({
   storeId: "3d-grid",
-  defaultValues: Xt,
-  getters: Us,
-  actions: Os,
+  defaultValues: Yt,
+  getters: Js,
+  actions: Ks,
   keyBy: "basePoseId"
-}), $s = [
+}), Ws = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -673,47 +734,154 @@ const Qe = ({
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], Ct = "background", wt = "subject", Et = "ground", Zt = {
-  [wt]: 16711422,
-  [Ct]: 16777215,
-  [Et]: 12961221
-}, Ns = {
+], It = "background", Tt = "subject", Dt = "ground", Qt = {
+  [Tt]: 16711422,
+  [It]: 16777215,
+  [Dt]: 12961221
+}, Xs = {
   changed() {
-    return this.exists ? !Ze(this.mergedModel, Zt) : !1;
+    return this.exists ? !Qe(this.mergedModel, Qt) : !1;
   },
   subjectHex() {
-    return ue(this.property(wt));
+    return me(this.property(Tt));
   },
   groundHex() {
-    return ue(this.property(Et));
+    return me(this.property(Dt));
   },
   backgroundHex() {
-    return ue(this.property(Ct));
+    return me(this.property(It));
   },
   getHexColor() {
-    return (e) => ue(this.property(e, "#F0F0F0"));
+    return (e) => me(this.property(e, "#F0F0F0"));
   }
-}, Hs = {
+}, Zs = {
   setHexColor(e, t) {
-    this.setProperty(e, Ye(t));
+    this.setProperty(e, et(t));
   },
   setSubjectHex(e) {
-    this.setHexColor(wt, e);
+    this.setHexColor(Tt, e);
   },
   setGroundHex(e) {
-    this.setHexColor(Et, e);
+    this.setHexColor(Dt, e);
   },
   setBackgroundHex(e) {
-    this.setHexColor(Ct, e);
+    this.setHexColor(It, e);
   }
-}, It = Qe({
+}, Mt = tt({
   storeId: "3d-colors",
-  defaultValues: Zt,
-  state: { palette: $s },
-  getters: Ns,
-  actions: Hs,
+  defaultValues: Qt,
+  state: { palette: Ws },
+  getters: Xs,
+  actions: Zs,
   keyBy: "basePoseId"
-}), A = Xe("3d", {
+});
+let te = null, je = null;
+const Re = () => {
+  const e = T(), { aspect: t, width: s, height: o } = O(e), n = (c = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), te ? (console.debug("view camera already inited"), te) : (te = new k.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, te)), i = () => {
+    if (te)
+      return te;
+  };
+  return je = G(
+    () => t.value,
+    (c) => {
+      if (!te) {
+        n();
+        return;
+      }
+      te.aspect = c, te.updateProjectionMatrix();
+    }
+  ), {
+    init: n,
+    getCamera: i,
+    dispose: () => {
+      je == null || je(), je = null, te = null;
+    }
+  };
+};
+let W = null, Se = null, xe = null, Ge = null;
+const Ie = () => {
+  const e = mt(), t = T(), { colorHex: s } = O(e), o = () => (console.debug("useScene init"), W ? (console.debug("scene already inited"), W) : (W = new k.Scene(), i(s.value), t.loaded.scene = !0, W)), n = () => {
+    if (W)
+      return W;
+  }, i = (a) => {
+    if (!W) throw new Error("Scene has not been initialized");
+    W.background = new k.Color(a);
+  }, r = (a) => {
+    if (!W) throw new Error("Scene has not been initialized");
+    if (!a) throw new Error("Renderer required to build environment");
+    Se || (xe = new k.PMREMGenerator(a), xe.compileEquirectangularShader(), Se = xe.fromScene(new Is(), 0.04).texture, W.environment = Se);
+  };
+  return Ge = G(
+    () => s.value,
+    (a) => i(a)
+  ), {
+    init: o,
+    get: n,
+    dispose: () => {
+      t.loaded.scene = !1, Ge == null || Ge(), Ge = null, W && (W.traverse((a) => {
+        var u, p;
+        a.isMesh && ((u = a.geometry) == null || u.dispose(), Array.isArray(a.material) ? a.material.forEach((P) => P == null ? void 0 : P.dispose()) : (p = a.material) == null || p.dispose());
+      }), W.clear(), W = null, Se == null || Se.dispose(), xe == null || xe.dispose(), Se = null, xe = null);
+    },
+    setBackgroundColor: i,
+    setEnvironment: r
+  };
+};
+let R = null, Oe = null, Ne = null;
+const Xe = () => {
+  const e = T(), { get: t } = Ie(), { getCamera: s } = Re(), { width: o, height: n, subjectLoaded: i } = O(e);
+  function r(w) {
+    return console.debug("useRenderer init"), R ? (console.debug("renderer already inited"), R) : (R = new k.WebGLRenderer({ antialias: !0, alpha: !0, preserveDrawingBuffer: !0 }), R.setSize(o.value, n.value), R.toneMapping = k.ACESFilmicToneMapping, R.toneMappingExposure = 0.8, R.shadowMap.enabled = !0, R.shadowMap.type = k.PCFSoftShadowMap, R.outputColorSpace = k.SRGBColorSpace, w && w.appendChild(R.domElement), e.loaded.renderer = !0, R);
+  }
+  const c = () => {
+    if (!R) throw new Error("Renderer has not been initialized");
+    return R;
+  }, a = (w) => {
+    R && (R.toneMappingExposure = w);
+  }, u = () => {
+    const w = t(), m = s();
+    !w || !m || R.render(w, m);
+  };
+  async function p({ size: w = 1024, format: m = "jpeg", quality: g = 0.85 } = {}) {
+    if (!R) throw new Error("Renderer has not been initialized");
+    const y = t(), x = s();
+    if (!y || !x) throw new Error("Scene or camera not ready");
+    const b = R.getSize(new k.Vector2()), D = R.getPixelRatio(), L = x.aspect;
+    try {
+      R.setPixelRatio(1), R.setSize(w, w, !1), x.aspect = 1, x.updateProjectionMatrix(), R.render(y, x);
+      const F = m === "png" ? "image/png" : "image/jpeg";
+      return await new Promise((N, K) => {
+        R.domElement.toBlob(
+          (v) => v ? N(v) : K(new Error("toBlob returned null")),
+          F,
+          m === "jpeg" ? g : void 0
+        );
+      });
+    } finally {
+      R.setPixelRatio(D), R.setSize(b.x, b.y, !1), x.aspect = L, x.updateProjectionMatrix(), R.render(y, x);
+    }
+  }
+  Oe = G(
+    () => [o.value, n.value],
+    ([w, m]) => {
+      !w || !m || !R || R.setSize(w, m);
+    }
+  ), Ne = G(
+    () => i.value,
+    () => u()
+  );
+  function P() {
+    console.debug("renderer disposed"), e.loaded.renderer = !1, Oe == null || Oe(), Ne == null || Ne(), Oe = null, Ne = null, R && (R.domElement.parentElement && R.domElement.parentElement.removeChild(R.domElement), R.dispose(), R = null);
+  }
+  return {
+    init: r,
+    get: c,
+    dispose: P,
+    render: u,
+    setExposure: a,
+    captureSnapshot: p
+  };
+}, T = Ye("3d", {
   state: () => ({
     // models: {},
     selected: null,
@@ -745,11 +913,16 @@ const Qe = ({
   }),
   getters: {
     active(e) {
-      var t, s;
-      return ((s = (t = this.models) == null ? void 0 : t[e.selected]) == null ? void 0 : s.active) || ye;
+      var s, o;
+      const t = Ct.is.mobile ? lt : ee;
+      return ((o = (s = this.models) == null ? void 0 : s[e.selected]) == null ? void 0 : o.active) || t;
     },
     aspect(e) {
       return e.height > 0 ? e.width / e.height : 0;
+    },
+    isFrozen(e) {
+      var t;
+      return ((t = this.appFreezeStore) == null ? void 0 : t.isFrozen(e.basePoseId)) || !1;
     }
   },
   actions: {
@@ -761,6 +934,13 @@ const Qe = ({
       var t;
       return ((t = this.appPaywallStore) == null ? void 0 : t.block(e)) || !0;
     },
+    pokeFreeze() {
+      var e;
+      (e = this.appFreezeStore) == null || e.poke(this.basePoseId);
+    },
+    captureSnapshot(e) {
+      return Xe().captureSnapshot(e);
+    },
     isExpanded(e = []) {
       return e = Array.isArray(e) ? e : [e], e.includes(this.active);
     },
@@ -774,116 +954,93 @@ const Qe = ({
       });
     },
     setFromResponse(e) {
-      var u, p, D;
-      const t = It(), s = ct(), i = Ee(), r = Ve(), n = fe(), o = ut(), a = me().setSubjectsFromResponse(e);
+      var u, p, P;
+      const t = Mt(), s = pt(), o = ve(), n = Fe(), i = ge(), r = mt(), a = ae().setSubjectsFromResponse(e);
       if (this.setUuid = ((u = e == null ? void 0 : e.result) == null ? void 0 : u.setUuid) ?? null, this.basePoseId = ((p = e == null ? void 0 : e.result) == null ? void 0 : p.basePoseId) ?? null, a == null) {
         this.selected = null;
         return;
       }
-      this.selected = a, t.initModel(this.basePoseId), n.initLights(), r.init(), s.initControls(), i.init(), o.init(), this.models[a] || (this.models[a] = {}), (D = this.models[a]) != null && D.active || (this.models[a].active = ye);
+      this.selected = a, t.initModel(this.basePoseId), i.initLights(), n.init(), s.initControls(), o.init(), r.init(), this.models[a] || (this.models[a] = {}), (P = this.models[a]) != null && P.active || (this.models[a].active = Ct.is.mobile ? lt : ee);
     }
   }
 });
-let J = null, Ge = null;
-const Le = () => {
-  const e = A(), { aspect: t, width: s, height: i } = $(e), r = (l = { x: 0, y: 0.8, z: 1.5 }) => (console.debug("useCamera init"), J ? (console.debug("view camera already inited"), J) : (J = new I.PerspectiveCamera(75, t.value, 0.1, 100), e.loaded.camera = !0, J)), n = () => {
-    if (J)
-      return J;
-  };
-  return Ge = O(
-    () => t.value,
-    (l) => {
-      if (!J) {
-        r();
-        return;
-      }
-      J.aspect = l, J.updateProjectionMatrix();
-    }
-  ), {
-    init: r,
-    getCamera: n,
-    dispose: () => {
-      Ge == null || Ge(), Ge = null, J = null;
-    }
-  };
-};
 let Q = null;
-const rt = () => {
-  const e = pe(!1), t = pe({
+const ct = () => {
+  const e = he(!1), t = he({
     mode: null,
     camera: null,
     // camera (or your lights-camera)
     store: null
     // pinia store with position/quaternion/target
-  }), s = (h, f = {}) => {
+  }), s = (m, g = {}) => {
     if (console.debug("useOrbitControlsBase init"), Q)
       return console.debug("controls already inited"), Q;
-    const S = new I.Object3D();
-    return Q = new Ss(S, h.domElement), r(f), Q;
-  }, i = () => {
+    const y = new k.Object3D();
+    return Q = new Ts(y, m.domElement), n(g), Q;
+  }, o = () => {
     if (!Q) throw new Error("OrbitControls not initialized");
     return Q;
-  }, r = (h = {}) => {
-    const f = i();
-    f.enableDamping = h.enableDamping ?? !0, f.dampingFactor = h.dampingFactor ?? 0.5, f.rotateSpeed = h.rotateSpeed ?? 0.2, f.enableZoom = h.enableZoom ?? !0, f.minDistance = h.minDistance ?? 0.5, f.maxDistance = h.maxDistance ?? 6, f.panSpeed = h.panSpeed ?? 1;
-  }, n = ({ mode: h, camera: f, store: S, options: E }) => {
-    const y = i();
-    if (!f) throw new Error(`setMode(${h}): camera is required`);
-    if (!S) throw new Error(`setMode(${h}): store is required`);
-    y.object = f, r(E), t.value = { mode: h, camera: f, store: S }, a(), y.update();
-  }, o = () => {
+  }, n = (m = {}) => {
+    const g = o();
+    g.enableDamping = m.enableDamping ?? !0, g.dampingFactor = m.dampingFactor ?? 0.5, g.rotateSpeed = m.rotateSpeed ?? 0.2, g.enableZoom = m.enableZoom ?? !0, g.minDistance = m.minDistance ?? 0.5, g.maxDistance = m.maxDistance ?? 6, g.panSpeed = m.panSpeed ?? 1;
+  }, i = ({ mode: m, camera: g, store: y, options: x }) => {
+    const b = o();
+    if (!g) throw new Error(`setMode(${m}): camera is required`);
+    if (!y) throw new Error(`setMode(${m}): store is required`);
+    b.object = g, n(x), t.value = { mode: m, camera: g, store: y }, a(), b.update();
+  }, r = () => {
     Q && Q.update();
-  }, l = () => {
-    const h = i(), { camera: f, store: S } = t.value;
-    !f || !S || e.value || (S.setPosition({ ...f.position }), S.setQuaternion({ ...f.quaternion }), S.setTarget({ ...h.target }), S.setRadius(f.position.distanceTo(h.target)));
+  }, c = () => {
+    const m = o(), { camera: g, store: y } = t.value;
+    !g || !y || e.value || (y.setPosition({ ...g.position }), y.setQuaternion({ ...g.quaternion }), y.setTarget({ ...m.target }), y.setRadius(g.position.distanceTo(m.target)));
   }, a = () => {
-    const h = i(), { camera: f, store: S } = t.value;
-    if (!f || !S) return;
+    const m = o(), { camera: g, store: y } = t.value;
+    if (!g || !y) return;
     e.value = !0;
-    const { position: E, quaternion: y, target: T, radius: P } = S;
-    h.target.set(T.x, T.y, T.z);
-    const G = new I.Vector3(
-      E.x - T.x,
-      E.y - T.y,
-      E.z - T.z
+    const { position: x, quaternion: b, target: D, radius: L } = y;
+    m.target.set(D.x, D.y, D.z);
+    const F = new k.Vector3(
+      x.x - D.x,
+      x.y - D.y,
+      x.z - D.z
     ).normalize();
-    f.position.copy(h.target).add(G.multiplyScalar(P)), f.quaternion.set(
-      y.x,
-      y.y,
-      y.z,
-      y.w
-    ), h.update(), e.value = !1;
+    g.position.copy(m.target).add(F.multiplyScalar(L)), g.quaternion.set(
+      b.x,
+      b.y,
+      b.z,
+      b.w
+    ), m.update(), e.value = !1;
   }, u = 0, p = 0.1;
   return {
     init: s,
-    get: i,
-    setMode: n,
-    update: o,
-    syncToStore: l,
+    get: o,
+    setMode: i,
+    update: r,
+    syncToStore: c,
     applyFromStore: a,
-    frameToBounds: (h, f = 1.75) => {
-      const S = i(), { camera: E } = t.value;
-      if (!E || !h) return;
-      const y = new I.Vector3(
-        h.center.x,
-        h.center.y + h.size.y * u,
-        h.center.z
+    frameToBounds: (m, g = 1.75) => {
+      const y = o(), { camera: x } = t.value;
+      if (!x || !m) return;
+      const b = new k.Vector3(
+        m.center.x,
+        m.center.y + m.size.y * u,
+        m.center.z
       );
-      console.log("bounds", h);
-      const T = Math.max(h.size.x, h.size.y, h.size.z), P = I.MathUtils.degToRad(E.fov);
-      let G = T / 2 / Math.tan(P / 2) * f;
-      S.target.copy(y), E.position.set(
-        y.x,
-        y.y + h.size.y * p,
-        y.z + G
-      ), E.near = G / 100, E.far = G * 100, E.updateProjectionMatrix(), S.update();
+      console.log("bounds", m);
+      const D = Math.max(m.size.x, m.size.y, m.size.z), L = k.MathUtils.degToRad(x.fov);
+      let F = D / 2 / Math.tan(L / 2) * g;
+      y.target.copy(b), x.position.set(
+        b.x,
+        b.y + m.size.y * p,
+        b.z + F
+      ), x.near = F / 100, x.far = F * 100, x.updateProjectionMatrix(), y.update();
     },
     dispose: () => {
       console.debug("controls disposed"), Q && (Q.dispose(), Q = null, t.value = { mode: null, camera: null, store: null });
     }
   };
-}, Mt = () => {
-  const { getCamera: e } = Le(), t = ct(), s = rt();
+}, Bt = () => {
+  const { getCamera: e } = Re(), t = pt(), s = ct();
   return {
     activate: () => {
       s.setMode({
@@ -901,36 +1058,7 @@ const rt = () => {
     syncToStore: s.syncToStore,
     applyFromStore: s.applyFromStore
   };
-};
-let X = null, ge = null, be = null, Fe = null;
-const we = () => {
-  const e = ut(), t = A(), { colorHex: s } = $(e), i = () => (console.debug("useScene init"), X ? (console.debug("scene already inited"), X) : (X = new I.Scene(), n(s.value), t.loaded.scene = !0, X)), r = () => {
-    if (X)
-      return X;
-  }, n = (a) => {
-    if (!X) throw new Error("Scene has not been initialized");
-    X.background = new I.Color(a);
-  }, o = (a) => {
-    if (!X) throw new Error("Scene has not been initialized");
-    if (!a) throw new Error("Renderer required to build environment");
-    ge || (be = new I.PMREMGenerator(a), be.compileEquirectangularShader(), ge = be.fromScene(new xs(), 0.04).texture, X.environment = ge);
-  };
-  return Fe = O(
-    () => s.value,
-    (a) => n(a)
-  ), {
-    init: i,
-    get: r,
-    dispose: () => {
-      t.loaded.scene = !1, Fe == null || Fe(), Fe = null, X && (X.traverse((a) => {
-        var u, p;
-        a.isMesh && ((u = a.geometry) == null || u.dispose(), Array.isArray(a.material) ? a.material.forEach((D) => D == null ? void 0 : D.dispose()) : (p = a.material) == null || p.dispose());
-      }), X.clear(), X = null, ge == null || ge.dispose(), be == null || be.dispose(), ge = null, be = null);
-    },
-    setBackgroundColor: n,
-    setEnvironment: o
-  };
-}, qs = {
+}, Ys = {
   asphalt: {
     ao: "ao.jpg",
     color: "color.jpg",
@@ -966,280 +1094,280 @@ const we = () => {
     repeat: 100
   }
 };
-let k = null, _e = null, je = null, Ue = null;
-const Pt = () => {
-  const e = Ve(), { get: t } = we(), { getCamera: s } = Le(), {
-    visible: i,
-    color: r,
-    texture: n,
-    offset: o
-  } = $(e), l = () => {
-    if (console.debug("useGround init"), k)
-      return console.debug("ground already inited"), k;
-    const f = t(), S = new I.PlaneGeometry(100, 100), E = new I.Color(r.value || 16777215), y = new I.MeshStandardMaterial({
-      color: E,
+let B = null, Ue = null, $e = null, qe = null;
+const _t = () => {
+  const e = Fe(), { get: t } = Ie(), { getCamera: s } = Re(), {
+    visible: o,
+    color: n,
+    texture: i,
+    offset: r
+  } = O(e), c = () => {
+    if (console.debug("useGround init"), B)
+      return console.debug("ground already inited"), B;
+    const g = t(), y = new k.PlaneGeometry(100, 100), x = new k.Color(n.value || 16777215), b = new k.MeshStandardMaterial({
+      color: x,
       // Default to white
-      side: I.DoubleSide,
+      side: k.DoubleSide,
       roughness: 0.4,
       metalness: 0.3,
-      emissive: E,
+      emissive: x,
       emissiveIntensity: 0.05
       // tweak 0.1–0.6
     });
-    return k = new I.Mesh(S, y), k.rotation.x = -Math.PI / 2, k.receiveShadow = !0, k.visible = i.value, f.add(k), _e = O(
-      () => i.value,
+    return B = new k.Mesh(y, b), B.rotation.x = -Math.PI / 2, B.receiveShadow = !0, B.visible = o.value, g.add(B), Ue = G(
+      () => o.value,
       () => a()
-    ), je = O(
-      () => r.value,
-      (T) => w(T)
-    ), Ue = O(
+    ), $e = G(
       () => n.value,
-      (T) => p(T)
-    ), k;
+      (D) => w(D)
+    ), qe = G(
+      () => i.value,
+      (D) => p(D)
+    ), B;
   };
   function a() {
-    if (s().position.y < k.position.y) {
-      k.visible = !1;
+    if (s().position.y < B.position.y) {
+      B.visible = !1;
       return;
     }
-    k.visible = i.value;
+    B.visible = o.value;
   }
-  function u(f, S = 1, E = 1) {
-    return new I.TextureLoader().load(f, (P) => {
-      P.wrapS = I.RepeatWrapping, P.wrapT = I.RepeatWrapping, P.repeat.set(S, E), P.needsUpdate = !0;
+  function u(g, y = 1, x = 1) {
+    return new k.TextureLoader().load(g, (L) => {
+      L.wrapS = k.RepeatWrapping, L.wrapT = k.RepeatWrapping, L.repeat.set(y, x), L.needsUpdate = !0;
     });
   }
-  const p = (f) => {
-    if (!k) throw new Error("Ground has not been initialized");
-    const S = qs[f];
-    if (!S)
-      k.material.map = null, k.material.normalMap = null, k.material.displacementMap = null, k.material.roughnessMap = null, k.material.aoMap = null, k.material.metalnessMap = null, k.material.needsUpdate = !0;
+  const p = (g) => {
+    if (!B) throw new Error("Ground has not been initialized");
+    const y = Ys[g];
+    if (!y)
+      B.material.map = null, B.material.normalMap = null, B.material.displacementMap = null, B.material.roughnessMap = null, B.material.aoMap = null, B.material.metalnessMap = null, B.material.needsUpdate = !0;
     else {
-      const E = `https://static.figurosity.com/3d/textures/${f}/`, y = S.repeat;
-      k.material.map = u(
-        `${E}${S.color}`,
-        y,
-        y
-      ), k.material.normalMap = u(
-        `${E}${S.normal}`,
-        y,
-        y
-      ), k.material.displacementMap = u(
-        `${E}${S.displacement}`,
-        y,
-        y
-      ), k.material.roughnessMap = u(
-        `${E}${S.roughness}`,
-        y,
-        y
-      ), k.material.aoMap = u(
-        `${E}${S.ao}`,
-        y,
-        y
-      ), S.metalness && (k.material.metalnessMap = u(
-        `${E}${S.metalness}`,
-        y,
-        y
-      )), k.material.displacementScale = 0.1, k.material.displacementBias = -0.05, k.material.needsUpdate = !0;
-    }
-    k.position.y = o.value, k.geometry.computeBoundingBox(), k.geometry.computeVertexNormals();
-  }, D = () => {
-    if (!k) throw new Error("Ground has not been initialized");
-    return k;
-  }, w = (f) => {
-    if (!k) throw new Error("Ground has not been initialized");
-    k.material.color.set(f);
+      const x = `https://static.figurosity.com/3d/textures/${g}/`, b = y.repeat;
+      B.material.map = u(
+        `${x}${y.color}`,
+        b,
+        b
+      ), B.material.normalMap = u(
+        `${x}${y.normal}`,
+        b,
+        b
+      ), B.material.displacementMap = u(
+        `${x}${y.displacement}`,
+        b,
+        b
+      ), B.material.roughnessMap = u(
+        `${x}${y.roughness}`,
+        b,
+        b
+      ), B.material.aoMap = u(
+        `${x}${y.ao}`,
+        b,
+        b
+      ), y.metalness && (B.material.metalnessMap = u(
+        `${x}${y.metalness}`,
+        b,
+        b
+      )), B.material.displacementScale = 0.1, B.material.displacementBias = -0.05, B.material.needsUpdate = !0;
+    }
+    B.position.y = r.value, B.geometry.computeBoundingBox(), B.geometry.computeVertexNormals();
+  }, P = () => {
+    if (!B) throw new Error("Ground has not been initialized");
+    return B;
+  }, w = (g) => {
+    if (!B) throw new Error("Ground has not been initialized");
+    B.material.color.set(g);
   };
-  return { init: l, get: D, setColor: w, updateVisibility: a, dispose: () => {
-    var S, E;
-    if (_e == null || _e(), je == null || je(), Ue == null || Ue(), _e = null, je = null, Ue = null, !k) return;
-    const f = t();
-    f == null || f.remove(k), (S = k.geometry) == null || S.dispose(), Array.isArray(k.material) ? k.material.forEach((y) => y == null ? void 0 : y.dispose()) : (E = k.material) == null || E.dispose(), k = null;
+  return { init: c, get: P, setColor: w, updateVisibility: a, dispose: () => {
+    var y, x;
+    if (Ue == null || Ue(), $e == null || $e(), qe == null || qe(), Ue = null, $e = null, qe = null, !B) return;
+    const g = t();
+    g == null || g.remove(B), (y = B.geometry) == null || y.dispose(), Array.isArray(B.material) ? B.material.forEach((b) => b == null ? void 0 : b.dispose()) : (x = B.material) == null || x.dispose(), B = null;
   } };
-}, Ks = (e, t = 16711422) => {
-  const s = new ws(0.1, 0.1, 0.1, 6, 0.01), i = 0.1, r = 0.05, n = new I.ConeGeometry(r, i, 32);
+}, Qs = (e, t = 16711422) => {
+  const s = new Ms(0.1, 0.1, 0.1, 6, 0.01), o = 0.1, n = 0.05, i = new k.ConeGeometry(n, o, 32);
   s.index || s.setIndex(
     Array.from(
       { length: s.attributes.position.count },
       (u, p) => p
     )
-  ), n.index || n.setIndex(
+  ), i.index || i.setIndex(
     Array.from(
-      { length: n.attributes.position.count },
+      { length: i.attributes.position.count },
       (u, p) => p
     )
-  ), n.rotateX(-Math.PI / 2), n.translate(0, 0, i / 2), Bt(s), Bt(n);
-  const o = Cs([s, n]), l = new I.MeshBasicMaterial({
+  ), i.rotateX(-Math.PI / 2), i.translate(0, 0, o / 2), Rt(s), Rt(i);
+  const r = Ds([s, i]), c = new k.MeshBasicMaterial({
     color: t,
     transparent: !0,
     opacity: 0.8
-  }), a = new I.Mesh(o, l);
+  }), a = new k.Mesh(r, c);
   if (a.position.set(0, 0, 0), a.rotateX(Math.PI), e && e.target) {
-    const u = new I.Vector3();
+    const u = new k.Vector3();
     e.target.getWorldPosition(u), a.lookAt(u);
   }
   return a.position.copy(e.position), a;
 };
-let ot = {}, ne = {}, N = {}, ie = {}, Me = null, ae = null, De = [], Te = /* @__PURE__ */ new Map();
-const it = () => {
-  const e = A(), t = fe(), s = me();
-  pe(!1);
-  const { subjectLoaded: i, width: r, height: n, selected: o, basePoseId: l } = $(e), { debug: a, collection: u, advancedMode: p, move: D } = $(t), { get: w } = we(), h = t.property, f = () => {
-    if (ae)
-      return console.warn("lights camera already inited"), ae;
-    const g = w();
-    return Me = y(), ae = T(), u.value.forEach((c) => {
-      const v = c === "key" ? ae : g, { group: L, light: M, visualization: x } = P(c, v);
-      N[c] = M, ot[c] = L, ie[c] = x, N[c].castShadow = !0, N[c].angle = Math.PI / 4, N[c].penumbra = 0.5, N[c].shadow.camera.near = 0.5, N[c].shadow.camera.far = 12, N[c].shadow.focus = 0.9, N[c].shadow.mapSize.set(4096, 4096), N[c].shadow.bias = -2e-4, N[c].shadow.normalBias = 0.02, N[c].shadow.radius = 2, N[c].shadow.camera.updateProjectionMatrix();
-    }), F(), Y(), ae;
-  }, S = () => {
-    if (!ae)
+let it = {}, re = {}, H = {}, ce = {}, De = null, ue = null, Me = [], Be = /* @__PURE__ */ new Map();
+const ut = () => {
+  const e = T(), t = ge(), s = ae();
+  he(!1);
+  const { subjectLoaded: o, width: n, height: i, selected: r, basePoseId: c } = O(e), { debug: a, collection: u, advancedMode: p, move: P } = O(t), { get: w } = Ie(), m = t.property, g = () => {
+    if (ue)
+      return console.warn("lights camera already inited"), ue;
+    const S = w();
+    return De = b(), ue = D(), u.value.forEach((l) => {
+      const f = l === "key" ? ue : S, { group: M, light: I, visualization: E } = L(l, f);
+      H[l] = I, it[l] = M, ce[l] = E, H[l].castShadow = !0, H[l].angle = Math.PI / 4, H[l].penumbra = 0.5, H[l].shadow.camera.near = 0.5, H[l].shadow.camera.far = 12, H[l].shadow.focus = 0.9, H[l].shadow.mapSize.set(4096, 4096), H[l].shadow.bias = -2e-4, H[l].shadow.normalBias = 0.02, H[l].shadow.radius = 2, H[l].shadow.camera.updateProjectionMatrix();
+    }), j(), Y(), ue;
+  }, y = () => {
+    if (!ue)
       throw new Error("Light camera not initialized.");
-    return ae;
-  }, E = (g) => {
-    g && (Object.values(N).forEach((c) => c == null ? void 0 : c.color.set(g)), Object.values(ie).forEach((c) => {
-      var v;
-      return (v = c == null ? void 0 : c.material) == null ? void 0 : v.color.set(g);
+    return ue;
+  }, x = (S) => {
+    S && (Object.values(H).forEach((l) => l == null ? void 0 : l.color.set(S)), Object.values(ce).forEach((l) => {
+      var f;
+      return (f = l == null ? void 0 : l.material) == null ? void 0 : f.color.set(S);
     }));
-  }, y = () => {
-    const g = w(), c = new I.AmbientLight(16777215, 0.2);
-    return g.add(c), c;
-  }, T = () => {
-    const g = w(), c = new I.PerspectiveCamera(
+  }, b = () => {
+    const S = w(), l = new k.AmbientLight(16777215, 0.2);
+    return S.add(l), l;
+  }, D = () => {
+    const S = w(), l = new k.PerspectiveCamera(
       75,
-      r.value / n.value,
+      n.value / i.value,
       0.1,
       100
     );
-    return c.position.set(0, 0, 1.5), g.add(c), c;
+    return l.position.set(0, 0, 1.5), S.add(l), l;
   };
-  function P(g, c = null) {
-    const v = w(), L = new I.Group(), M = new I.SpotLight(
-      h(g, "color"),
-      h(g, "intensity")
+  function L(S, l = null) {
+    const f = w(), M = new k.Group(), I = new k.SpotLight(
+      m(S, "color"),
+      m(S, "intensity")
     );
-    M.position.set(0, 0, 0), H(), M.target.position.set(0, 1, 0), M.target.updateMatrixWorld(), v.add(M.target), L.add(M);
-    const x = Ks(
-      M,
-      h(g, "visualizationColor")
-    ), U = t.isVisible(g);
-    return x.visible = U, L.add(x), c.add(L), { group: L, light: M, visualization: x };
+    I.position.set(0, 0, 0), N(), I.target.position.set(0, 1, 0), I.target.updateMatrixWorld(), f.add(I.target), M.add(I);
+    const E = Qs(
+      I,
+      m(S, "visualizationColor")
+    ), U = t.isVisible(S);
+    return E.visible = U, M.add(E), l.add(M), { group: M, light: I, visualization: E };
   }
-  const G = () => {
-    H(), Z(), b();
-  }, H = () => {
-    if (!t.lights[l.value]) return;
-    const c = t.seeds[o.value], v = t.ambientScale, L = t.userScale;
-    if (Me && (c != null && c.ambient) && (Me.intensity = c.ambient.intensity * v), c != null && c.env) {
-      const M = w();
-      M && (M.environmentIntensity = c.env.intensity * v);
-    }
-    u.value.forEach((M) => {
-      const x = N[M];
-      if (!x) return;
-      const U = h(M, "color"), he = h(M, "visible"), K = h(M, "shadow") || !1;
-      if (U && x.color.set(U), x.visible = he, c != null && c[M] && (x.intensity = c[M].intensity * L), x.castShadow = K, K) {
-        const re = h(M, "shadowSettings", {});
-        x.shadow.mapSize.set(
-          re.width || 1024,
-          re.height || 1024
-        ), x.shadow.camera.near = re.near || 0.5, x.shadow.camera.far = re.far || 50, x.shadow.needsUpdate = !0;
+  const F = () => {
+    N(), K(), v();
+  }, N = () => {
+    if (!t.lights[c.value]) return;
+    const l = t.seeds[r.value], f = t.ambientScale, M = t.userScale;
+    if (De && (l != null && l.ambient) && (De.intensity = l.ambient.intensity * f), l != null && l.env) {
+      const I = w();
+      I && (I.environmentIntensity = l.env.intensity * f);
+    }
+    u.value.forEach((I) => {
+      const E = H[I];
+      if (!E) return;
+      const U = m(I, "color"), be = m(I, "visible"), J = m(I, "shadow") || !1;
+      if (U && E.color.set(U), E.visible = be, l != null && l[I] && (E.intensity = l[I].intensity * M), E.castShadow = J, J) {
+        const le = m(I, "shadowSettings", {});
+        E.shadow.mapSize.set(
+          le.width || 1024,
+          le.height || 1024
+        ), E.shadow.camera.near = le.near || 0.5, E.shadow.camera.far = le.far || 50, E.shadow.needsUpdate = !0;
       }
     });
-  }, Z = () => {
-    t.lights[l.value] && u.value.forEach((c) => {
-      if (!ie[c]) return console.warn(`${c} does not exist`);
-      const v = t.isVisible(c);
-      ie[c].visible = v, ie[c].material.color.set(h(c, "color"));
+  }, K = () => {
+    t.lights[c.value] && u.value.forEach((l) => {
+      if (!ce[l]) return console.warn(`${l} does not exist`);
+      const f = t.isVisible(l);
+      ce[l].visible = f, ce[l].material.color.set(m(l, "color"));
     });
-  }, b = () => {
-    t.lights[l.value] && u.value.forEach((c) => {
-      const v = h(c, "debug") || a.value;
-      !ne[c] && v && (ne[c] = m(c, N[c]), N[c].add(ne[c])), ne[c] && !v && (ne[c] = B(ne[c]));
+  }, v = () => {
+    t.lights[c.value] && u.value.forEach((l) => {
+      const f = m(l, "debug") || a.value;
+      !re[l] && f && (re[l] = h(l, H[l]), H[l].add(re[l])), re[l] && !f && (re[l] = A(re[l]));
     });
-  }, m = (g, c) => {
-    const v = w(), L = new I.SpotLightHelper(
-      c,
-      h(g, "visualizationColor")
+  }, h = (S, l) => {
+    const f = w(), M = new k.SpotLightHelper(
+      l,
+      m(S, "visualizationColor")
     );
-    return v.add(L), L;
-  }, B = (g) => {
-    const c = w();
-    if (!(!c || !g))
-      return c.remove(g), g.dispose(), g = null, g;
-  }, F = () => {
-    const g = S();
+    return f.add(M), M;
+  }, A = (S) => {
+    const l = w();
+    if (!(!l || !S))
+      return l.remove(S), S.dispose(), S = null, S;
+  }, j = () => {
+    const S = y();
     if (!s.bounds) return;
-    const v = t.target, L = new I.Vector3(v.x, v.y, v.z), M = new I.Vector3().subVectors(L, g.position).normalize(), x = new I.Vector3(
-      M.x,
+    const f = t.target, M = new k.Vector3(f.x, f.y, f.z), I = new k.Vector3().subVectors(M, S.position).normalize(), E = new k.Vector3(
+      I.x,
       0,
-      M.z
-    ).normalize(), U = new I.Vector3(
-      -x.z,
+      I.z
+    ).normalize(), U = new k.Vector3(
+      -E.z,
       0,
-      x.x
-    ), K = 2 * g.position.distanceTo(L) / Math.sqrt(3), re = 1, Re = L.clone().add(U.clone().multiplyScalar(-K / re)).add(M.clone().multiplyScalar(Math.sqrt(3) * K / 2)), os = L.clone().add(U.clone().multiplyScalar(K / re)).add(M.clone().multiplyScalar(Math.sqrt(3) * K / 2));
-    ot.fill.position.copy(Re), ot.back.position.copy(os), u.value.forEach((dt) => {
-      var kt, Je, At;
-      const pt = N[dt];
-      pt.shadow.needsUpdate = !0, pt.target.position.copy(L), pt.target.updateMatrixWorld(), (kt = ie[dt]) == null || kt.lookAt(L), (At = (Je = ne[dt]) == null ? void 0 : Je.update) == null || At.call(Je);
+      E.x
+    ), J = 2 * S.position.distanceTo(M) / Math.sqrt(3), le = 1, _e = M.clone().add(U.clone().multiplyScalar(-J / le)).add(I.clone().multiplyScalar(Math.sqrt(3) * J / 2)), ls = M.clone().add(U.clone().multiplyScalar(J / le)).add(I.clone().multiplyScalar(Math.sqrt(3) * J / 2));
+    it.fill.position.copy(_e), it.back.position.copy(ls), u.value.forEach((ht) => {
+      var Pt, st, Lt;
+      const gt = H[ht];
+      gt.shadow.needsUpdate = !0, gt.target.position.copy(M), gt.target.updateMatrixWorld(), (Pt = ce[ht]) == null || Pt.lookAt(M), (Lt = (st = re[ht]) == null ? void 0 : st.update) == null || Lt.call(st);
     });
-  }, z = (g) => {
-    const c = `watcher-${g}`;
-    if (Te.has(c)) return;
-    const v = O(
-      () => [t.lights[g], t.options[g]],
-      G,
+  }, z = (S) => {
+    const l = `watcher-${S}`;
+    if (Be.has(l)) return;
+    const f = G(
+      () => [t.lights[S], t.options[S]],
+      F,
       { deep: !0 }
     );
-    Te.set(c, v);
-  }, j = (g) => {
-    const c = `watcher-${g}`, v = Te.get(c);
-    v && (v(), Te.delete(c));
+    Be.set(l, f);
+  }, $ = (S) => {
+    const l = `watcher-${S}`, f = Be.get(l);
+    f && (f(), Be.delete(l));
   }, Y = () => {
-    De.push(
-      O(
-        () => [p.value, o.value, D.value],
-        () => G()
+    Me.push(
+      G(
+        () => [p.value, r.value, P.value],
+        () => F()
       )
-    ), De.push(
-      O(
+    ), Me.push(
+      G(
         () => [t.ambientScale, t.userScale],
-        () => G()
+        () => F()
       )
-    ), De.push(
-      O(
-        () => i.value,
-        (g) => {
-          g === !0 && F();
+    ), Me.push(
+      G(
+        () => o.value,
+        (S) => {
+          S === !0 && j();
         }
       )
-    ), De.push(
-      O(
-        () => l.value,
-        (g, c) => {
-          c && j(c), g != null && (z(g), ns(G));
+    ), Me.push(
+      G(
+        () => c.value,
+        (S, l) => {
+          l && $(l), S != null && (z(S), cs(F));
         },
         { immediate: !0 }
       )
     );
   };
   return {
-    init: f,
-    updatePosition: F,
-    getCamera: S,
+    init: g,
+    updatePosition: j,
+    getCamera: y,
     dispose: () => {
-      const g = w();
-      g && (De.forEach((c) => c()), De = [], Te.forEach((c) => c()), Te.clear(), Object.values(N).forEach((c) => g.remove(c)), Object.values(ne).forEach((c) => g.remove(c)), Object.values(ie).forEach((c) => {
-        var v, L, M, x;
-        g.remove(c), (L = (v = c.geometry) == null ? void 0 : v.dispose) == null || L.call(v), (x = (M = c.material) == null ? void 0 : M.dispose) == null || x.call(M);
-      }), Me && g.remove(Me), ot = {}, ne = {}, N = {}, ie = {}, Me = null, ae = null);
-    },
-    applyColorPreview: E,
-    applyFromStore: G
+      const S = w();
+      S && (Me.forEach((l) => l()), Me = [], Be.forEach((l) => l()), Be.clear(), Object.values(H).forEach((l) => S.remove(l)), Object.values(re).forEach((l) => S.remove(l)), Object.values(ce).forEach((l) => {
+        var f, M, I, E;
+        S.remove(l), (M = (f = l.geometry) == null ? void 0 : f.dispose) == null || M.call(f), (E = (I = l.material) == null ? void 0 : I.dispose) == null || E.call(I);
+      }), De && S.remove(De), it = {}, re = {}, H = {}, ce = {}, De = null, ue = null);
+    },
+    applyColorPreview: x,
+    applyFromStore: F
   };
-}, Ws = 0.4, Xs = 0.25, Dt = () => {
-  const e = fe(), t = rt(), { getCamera: s } = it();
+}, eo = 0.4, to = 0.25, At = () => {
+  const e = ge(), t = ct(), { getCamera: s } = ut();
   return {
     activate: () => {
       t.setMode({
@@ -1257,80 +1385,45 @@ const it = () => {
         }
       });
     },
-    frameToBounds: (n, o = 1.75) => {
-      if (!n) return;
-      const l = t.get(), a = s(), u = new I.Vector3(
-        n.center.x,
-        n.center.y + n.size.y * Ws,
-        n.center.z
-      ), p = Math.max(n.size.x, n.size.y, n.size.z), D = I.MathUtils.degToRad(a.fov), w = p / 2 / Math.tan(D / 2) * o;
-      l.target.copy(u), a.position.set(u.x, u.y + n.size.y * Xs, u.z + w), a.near = w / 100, a.far = w * 100, a.updateProjectionMatrix(), l.update();
+    frameToBounds: (i, r = 1.75) => {
+      if (!i) return;
+      const c = t.get(), a = s(), u = new k.Vector3(
+        i.center.x,
+        i.center.y + i.size.y * eo,
+        i.center.z
+      ), p = Math.max(i.size.x, i.size.y, i.size.z), P = k.MathUtils.degToRad(a.fov), w = p / 2 / Math.tan(P / 2) * r;
+      c.target.copy(u), a.position.set(u.x, u.y + i.size.y * to, u.z + w), a.near = w / 100, a.far = w * 100, a.updateProjectionMatrix(), c.update();
     },
     syncToStore: t.syncToStore,
     applyFromStore: t.applyFromStore
   };
 };
-let le = null;
-const Zs = () => {
+let de = null;
+const so = () => {
   const e = () => {
-    const s = A();
-    return le = new I.LoadingManager(), le.onStart = function(i) {
-      s.loading.active = !0, s.loading.url = i, s.loading.percent = 0;
-    }, le.onError = () => {
+    const s = T();
+    return de = new k.LoadingManager(), de.onStart = function(o) {
+      s.loading.active = !0, s.loading.url = o, s.loading.percent = 0;
+    }, de.onError = () => {
       s.loading.active = !1, s.loading.url = null;
-    }, le.onLoad = function() {
+    }, de.onLoad = function() {
       s.loading.active = !1, s.loading.url = null, s.loading.percent = 100;
-    }, le.onProgress = function(i, r, n) {
-      s.loading.percent = Math.round(r / n * 100);
-    }, le;
-  };
-  return { get: () => (le || e(), le) };
-};
-let _ = null, Oe = null, $e = null;
-const at = () => {
-  const e = A(), { get: t } = we(), { getCamera: s } = Le(), { width: i, height: r, subjectLoaded: n } = $(e);
-  function o(D) {
-    return console.debug("useRenderer init"), _ ? (console.debug("renderer already inited"), _) : (_ = new I.WebGLRenderer({ antialias: !0, alpha: !0 }), _.setSize(i.value, r.value), _.toneMapping = I.ACESFilmicToneMapping, _.toneMappingExposure = 0.8, _.shadowMap.enabled = !0, _.shadowMap.type = I.PCFSoftShadowMap, _.outputColorSpace = I.SRGBColorSpace, D && D.appendChild(_.domElement), e.loaded.renderer = !0, _);
-  }
-  const l = () => {
-    if (!_) throw new Error("Renderer has not been initialized");
-    return _;
-  }, a = (D) => {
-    _ && (_.toneMappingExposure = D);
-  }, u = () => {
-    const D = t(), w = s();
-    !D || !w || _.render(D, w);
-  };
-  Oe = O(
-    () => [i.value, r.value],
-    ([D, w]) => {
-      !D || !w || !_ || _.setSize(D, w);
-    }
-  ), $e = O(
-    () => n.value,
-    () => u()
-  );
-  function p() {
-    console.debug("renderer disposed"), e.loaded.renderer = !1, Oe == null || Oe(), $e == null || $e(), Oe = null, $e = null, _ && (_.domElement.parentElement && _.domElement.parentElement.removeChild(_.domElement), _.dispose(), _ = null);
-  }
-  return {
-    init: o,
-    get: l,
-    dispose: p,
-    render: u,
-    setExposure: a
+    }, de.onProgress = function(o, n, i) {
+      s.loading.percent = Math.round(n / i * 100);
+    }, de;
   };
-}, Ys = /hair|lash|brow|eye|cornea|sclera|iris|pupil|tear|teeth|tongue|mouth|gum|lip|nail/i, Qs = (e, t, s = {}) => {
-  const { removeSpecular: i = !1, removeShininess: r = !1 } = s;
-  e && e.traverse((n) => {
-    if (!n.isMesh) return;
-    (Array.isArray(n.material) ? n.material : [n.material]).forEach((l) => {
-      if (!l) return;
-      const a = `${n.name} ${l.name || ""}`;
-      Ys.test(a) || (l.color && l.color.set(t), i && l.specular && l.specular.set(0), r && typeof l.shininess == "number" && (l.shininess = 0), l.needsUpdate = !0);
+  return { get: () => (de || e(), de) };
+}, oo = /hair|lash|brow|eye|cornea|sclera|iris|pupil|tear|teeth|tongue|mouth|gum|lip|nail/i, no = (e, t, s = {}) => {
+  const { removeSpecular: o = !1, removeShininess: n = !1 } = s;
+  e && e.traverse((i) => {
+    if (!i.isMesh) return;
+    (Array.isArray(i.material) ? i.material : [i.material]).forEach((c) => {
+      if (!c) return;
+      const a = `${i.name} ${c.name || ""}`;
+      oo.test(a) || (c.color && c.color.set(t), o && c.specular && c.specular.set(0), n && typeof c.shininess == "number" && (c.shininess = 0), c.needsUpdate = !0);
     });
   });
-}, Js = 1, eo = "https://www.gstatic.com/draco/v1/decoders/", lt = {
+}, ro = 1, io = "https://www.gstatic.com/draco/v1/decoders/", dt = {
   roughnessFloor: 0.85,
   metalness: null,
   envMapIntensity: null,
@@ -1339,8 +1432,8 @@ const at = () => {
   ambientIntensity: 0.2,
   spotIntensity: 1,
   envIntensity: 1
-}, to = {
-  nude: { ...lt },
+}, ao = {
+  nude: { ...dt },
   // Smooth ships with no texture maps — pure-white sculpting reference.
   // All "detail" has to come from form-revealing shading on the
   // geometry, not from albedo. Same metalness=1 Diffeomorphic bug as
@@ -1349,7 +1442,7 @@ const at = () => {
   // exposure so lit surfaces don't saturate to white. The contrast
   // between lit and unlit faces is what makes form readable.
   smooth: {
-    ...lt,
+    ...dt,
     roughnessFloor: 0.3,
     metalness: 0,
     envMapIntensity: 0.02,
@@ -1367,194 +1460,194 @@ const at = () => {
     envIntensity: 1
   }
 };
-let ve = null, ce = null, ke, Vt = 0, ee = lt;
-const Rt = () => {
-  const { get: e } = Zs(), t = me(), s = A(), i = Ve(), r = It(), { selected: n } = $(s), { url: o } = $(t), { subjectHex: l } = $(r), { offset: a } = $(i), { getCamera: u } = Le(), { get: p } = we(), { render: D } = at(), w = (y) => {
-    const { setExposure: T } = at(), P = fe(), G = ++Vt;
-    s.subjectLoaded = !1, h();
-    const H = e();
-    ce || (ce = new Is(H), ce.setDecoderPath(eo));
-    const Z = new Es(H);
-    Z.setDRACOLoader(ce), Z.setWithCredentials(!0), Z.manager.setURLModifier((b) => b), Z.load(y, (b) => {
-      var g;
-      const m = b == null ? void 0 : b.scene;
-      if (G !== Vt) {
-        m == null || m.traverse((c) => {
-          var L;
-          if (!c.isMesh) return;
-          (L = c.geometry) == null || L.dispose();
-          const v = c.material;
-          Array.isArray(v) ? v.forEach((M) => M == null ? void 0 : M.dispose()) : v == null || v.dispose();
+let we = null, pe = null, Ae, jt = 0, se = dt;
+const Gt = () => {
+  const { get: e } = so(), t = ae(), s = T(), o = Fe(), n = Mt(), { selected: i } = O(s), { url: r } = O(t), { subjectHex: c } = O(n), { offset: a } = O(o), { getCamera: u } = Re(), { get: p } = Ie(), { render: P } = Xe(), w = (b) => {
+    const { setExposure: D } = Xe(), L = ge(), F = ++jt;
+    s.subjectLoaded = !1, m();
+    const N = e();
+    pe || (pe = new As(N), pe.setDecoderPath(io));
+    const K = new Bs(N);
+    K.setDRACOLoader(pe), K.setWithCredentials(!0), K.manager.setURLModifier((v) => v), K.load(b, (v) => {
+      var S;
+      const h = v == null ? void 0 : v.scene;
+      if (F !== jt) {
+        h == null || h.traverse((l) => {
+          var M;
+          if (!l.isMesh) return;
+          (M = l.geometry) == null || M.dispose();
+          const f = l.material;
+          Array.isArray(f) ? f.forEach((I) => I == null ? void 0 : I.dispose()) : f == null || f.dispose();
         });
         return;
       }
-      if (!m)
+      if (!h)
         return;
-      ve = m, ee = to[(g = t.model) == null ? void 0 : g.slug] || lt, T(ee.exposure), P.seedFromRecipe(s.selected, ee);
-      const B = p(), F = u(), z = new I.Group();
-      z.name = "GLBSubject", z.add(m);
-      const j = /brow|lash/i;
-      m.traverse((c) => {
-        if (!c.isMesh) return;
-        c.castShadow = !0, c.receiveShadow = !0;
-        const v = Array.isArray(c.material) ? c.material : [c.material], L = `${c.name} ${v.map((x) => x == null ? void 0 : x.name).join(" ")}`, M = j.test(L);
-        v.forEach((x) => {
-          x && (ee.roughnessFloor !== null && typeof x.roughness == "number" && (x.roughness = Math.max(
-            x.roughness,
-            ee.roughnessFloor
-          )), ee.metalness !== null && typeof x.metalness == "number" && (x.metalness = ee.metalness), ee.envMapIntensity !== null && typeof x.envMapIntensity == "number" && (x.envMapIntensity = ee.envMapIntensity), x.transparent && M && (x.alphaTest = 0.2, x.depthWrite = !0), x.needsUpdate = !0);
+      we = h, se = ao[(S = t.model) == null ? void 0 : S.slug] || dt, D(se.exposure), L.seedFromRecipe(s.selected, se);
+      const A = p(), j = u(), z = new k.Group();
+      z.name = "GLBSubject", z.add(h);
+      const $ = /brow|lash/i;
+      h.traverse((l) => {
+        if (!l.isMesh) return;
+        l.castShadow = !0, l.receiveShadow = !0;
+        const f = Array.isArray(l.material) ? l.material : [l.material], M = `${l.name} ${f.map((E) => E == null ? void 0 : E.name).join(" ")}`, I = $.test(M);
+        f.forEach((E) => {
+          E && (se.roughnessFloor !== null && typeof E.roughness == "number" && (E.roughness = Math.max(
+            E.roughness,
+            se.roughnessFloor
+          )), se.metalness !== null && typeof E.metalness == "number" && (E.metalness = se.metalness), se.envMapIntensity !== null && typeof E.envMapIntensity == "number" && (E.envMapIntensity = se.envMapIntensity), E.transparent && I && (E.alphaTest = 0.2, E.depthWrite = !0), E.needsUpdate = !0);
         });
-      }), ee.applyTint && Qs(m, l.value), m.scale.setScalar(Js), m.updateMatrixWorld(!0);
-      const Y = zt(m);
-      z.position.y -= Y.bottom, z.updateMatrixWorld(!0), B.add(z), ve = z;
-      const q = zt(z);
-      t.setBounds(q), D(B, F), s.subjectLoaded = !0;
+      }), se.applyTint && no(h, c.value), h.scale.setScalar(ro), h.updateMatrixWorld(!0);
+      const Y = Vt(h);
+      z.position.y -= Y.bottom, z.updateMatrixWorld(!0), A.add(z), we = z;
+      const Z = Vt(z);
+      t.setBounds(Z), P(A, j), s.subjectLoaded = !0;
     });
-  }, h = () => {
-    if (!ve) return;
-    p().remove(ve), ve.traverse((T) => {
-      var G;
-      if (!T.isMesh) return;
-      (G = T.geometry) == null || G.dispose();
-      const P = T.material;
-      Array.isArray(P) ? P.forEach((H) => H == null ? void 0 : H.dispose()) : P == null || P.dispose();
-    }), ve = null, s.subjectLoaded = !1;
-  }, f = () => ve, S = () => {
-    if (ke) {
+  }, m = () => {
+    if (!we) return;
+    p().remove(we), we.traverse((D) => {
+      var F;
+      if (!D.isMesh) return;
+      (F = D.geometry) == null || F.dispose();
+      const L = D.material;
+      Array.isArray(L) ? L.forEach((N) => N == null ? void 0 : N.dispose()) : L == null || L.dispose();
+    }), we = null, s.subjectLoaded = !1;
+  }, g = () => we, y = () => {
+    if (Ae) {
       console.warn("useGLB.init() called more than once");
       return;
     }
-    ke = O(
-      () => n.value,
-      (y, T) => {
-        !y || y === T || o.value && w(o.value);
+    Ae = G(
+      () => i.value,
+      (b, D) => {
+        !b || b === D || r.value && w(r.value);
       },
       { immediate: !0 }
     );
-  }, E = () => {
-    ke == null || ke(), ke = null, h(), ce == null || ce.dispose(), ce = null;
+  }, x = () => {
+    Ae == null || Ae(), Ae = null, m(), pe == null || pe.dispose(), pe = null;
   };
-  return _t(() => {
-    E();
-  }), { init: S, get: f, dispose: E };
-}, so = (e, t, s = 500) => {
-  const i = e.material;
-  i.transparent = !0;
-  const r = i.opacity, n = performance.now(), o = (l) => {
-    const a = l - n, u = Math.min(a / s, 1), p = r + (t - r) * u;
-    i.opacity = p, u < 1 && requestAnimationFrame(o);
+  return Ut(() => {
+    x();
+  }), { init: y, get: g, dispose: x };
+}, lo = (e, t, s = 500) => {
+  const o = e.material;
+  o.transparent = !0;
+  const n = o.opacity, i = performance.now(), r = (c) => {
+    const a = c - i, u = Math.min(a / s, 1), p = n + (t - n) * u;
+    o.opacity = p, u < 1 && requestAnimationFrame(r);
   };
-  requestAnimationFrame(o);
-}, oo = 34815;
-let V = null, Ne = null, He = null, qe = null;
-const Gt = () => {
-  const e = Ee(), t = Ve(), s = me(), { show: i, divisions: r, size: n, opacity: o } = $(e), { offset: l } = $(t), { bounds: a } = $(s), { get: u } = we(), p = () => {
-    const b = T(oo), m = b, { positions: B, colors: F } = D({
-      size: n.value,
-      divisions: r.value,
-      color: b,
-      centerColor: m
-    }), z = w(B, F), j = h(o.value);
-    return new I.LineSegments(z, j);
-  }, D = ({ size: b, divisions: m, color: B, centerColor: F }) => {
-    const z = b / 2, j = b / m, Y = [], q = [], g = Math.floor(m / 2), c = (v, L, M, x) => {
-      Y.push(v, L, M);
-      const U = x ? F : B;
-      q.push(U.r, U.g, U.b);
+  requestAnimationFrame(r);
+}, co = 34815;
+let _ = null, He = null, Je = null, Ke = null;
+const Ot = () => {
+  const e = ve(), t = Fe(), s = ae(), { show: o, divisions: n, size: i, opacity: r } = O(e), { offset: c } = O(t), { bounds: a } = O(s), { get: u } = Ie(), p = () => {
+    const v = D(co), h = v, { positions: A, colors: j } = P({
+      size: i.value,
+      divisions: n.value,
+      color: v,
+      centerColor: h
+    }), z = w(A, j), $ = m(r.value);
+    return new k.LineSegments(z, $);
+  }, P = ({ size: v, divisions: h, color: A, centerColor: j }) => {
+    const z = v / 2, $ = v / h, Y = [], Z = [], S = Math.floor(h / 2), l = (f, M, I, E) => {
+      Y.push(f, M, I);
+      const U = E ? j : A;
+      Z.push(U.r, U.g, U.b);
     };
-    for (let v = 0; v <= m; v++) {
-      const L = -z + v * j, M = v === g;
-      for (let x = 0; x <= m; x++) {
-        const U = -z + x * j, K = M || x === g;
-        c(-z, L, U, K), c(+z, L, U, K);
+    for (let f = 0; f <= h; f++) {
+      const M = -z + f * $, I = f === S;
+      for (let E = 0; E <= h; E++) {
+        const U = -z + E * $, J = I || E === S;
+        l(-z, M, U, J), l(+z, M, U, J);
       }
     }
-    for (let v = 0; v <= m; v++) {
-      const L = -z + v * j, M = v === g;
-      for (let x = 0; x <= m; x++) {
-        const U = -z + x * j, K = M || x === g;
-        c(L, -z, U, K), c(L, +z, U, K);
+    for (let f = 0; f <= h; f++) {
+      const M = -z + f * $, I = f === S;
+      for (let E = 0; E <= h; E++) {
+        const U = -z + E * $, J = I || E === S;
+        l(M, -z, U, J), l(M, +z, U, J);
       }
     }
-    for (let v = 0; v <= m; v++) {
-      const L = -z + v * j, M = v === g;
-      for (let x = 0; x <= m; x++) {
-        const U = -z + x * j, K = M || x === g;
-        c(L, U, -z, K), c(L, U, +z, K);
+    for (let f = 0; f <= h; f++) {
+      const M = -z + f * $, I = f === S;
+      for (let E = 0; E <= h; E++) {
+        const U = -z + E * $, J = I || E === S;
+        l(M, U, -z, J), l(M, U, +z, J);
       }
     }
-    return { positions: Y, colors: q };
-  }, w = (b, m) => {
-    const B = new I.BufferGeometry();
-    return B.setAttribute(
+    return { positions: Y, colors: Z };
+  }, w = (v, h) => {
+    const A = new k.BufferGeometry();
+    return A.setAttribute(
       "position",
-      new I.Float32BufferAttribute(b, 3)
-    ), B.setAttribute("color", new I.Float32BufferAttribute(m, 3)), B;
-  }, h = (b) => new I.LineBasicMaterial({
+      new k.Float32BufferAttribute(v, 3)
+    ), A.setAttribute("color", new k.Float32BufferAttribute(h, 3)), A;
+  }, m = (v) => new k.LineBasicMaterial({
     transparent: !0,
-    opacity: b,
+    opacity: v,
     depthWrite: !1,
-    blending: I.NormalBlending,
+    blending: k.NormalBlending,
     vertexColors: !0
-  }), f = () => {
-    V && y(i.value);
-  }, S = () => {
-    const b = u();
-    V = p(), H(), b.add(V), E(0);
-  }, E = (b) => {
-    V && (V.material.transparent = !0, b = i.value ? b : 0, V.material.opacity = b);
-  }, y = (b) => {
-    const m = b ? o.value : 0;
-    so(V, m, 500);
-  }, T = (b) => ({
-    r: (b >> 16 & 255) / 255,
-    g: (b >> 8 & 255) / 255,
-    b: (b & 255) / 255
-  }), P = (b, m) => {
-    if (!V) return;
-    const B = T(b), F = T(m), z = V.geometry.attributes.color, j = V.geometry.attributes.position, Y = j.count, q = n.value / 2, g = n.value / r.value, c = Math.floor(r.value / 2);
-    for (let v = 0; v < Y; v++) {
-      const L = j.getX(v), M = j.getY(v), x = j.getZ(v), U = Math.round((L + q) / g), he = Math.round((M + q) / g), K = Math.round((x + q) / g), Re = U === c || he === c || K === c ? B : F;
-      z.setXYZ(v, Re.r, Re.g, Re.b);
+  }), g = () => {
+    _ && b(o.value);
+  }, y = () => {
+    const v = u();
+    _ = p(), N(), v.add(_), x(0);
+  }, x = (v) => {
+    _ && (_.material.transparent = !0, v = o.value ? v : 0, _.material.opacity = v);
+  }, b = (v) => {
+    const h = v ? r.value : 0;
+    lo(_, h, 500);
+  }, D = (v) => ({
+    r: (v >> 16 & 255) / 255,
+    g: (v >> 8 & 255) / 255,
+    b: (v & 255) / 255
+  }), L = (v, h) => {
+    if (!_) return;
+    const A = D(v), j = D(h), z = _.geometry.attributes.color, $ = _.geometry.attributes.position, Y = $.count, Z = i.value / 2, S = i.value / n.value, l = Math.floor(n.value / 2);
+    for (let f = 0; f < Y; f++) {
+      const M = $.getX(f), I = $.getY(f), E = $.getZ(f), U = Math.round((M + Z) / S), be = Math.round((I + Z) / S), J = Math.round((E + Z) / S), _e = U === l || be === l || J === l ? A : j;
+      z.setXYZ(f, _e.r, _e.g, _e.b);
     }
     z.needsUpdate = !0;
-  }, G = () => {
-    const b = u();
-    V && (b.remove(V), V.geometry.dispose(), V.material.dispose(), V = null), V = p(), H(), b.add(V);
-  }, H = () => {
-    var m;
-    const b = ((m = a.value) == null ? void 0 : m.bottom) || 0;
-    V.position.set(0, b + n.value / 2 + 7e-3, 0);
+  }, F = () => {
+    const v = u();
+    _ && (v.remove(_), _.geometry.dispose(), _.material.dispose(), _ = null), _ = p(), N(), v.add(_);
+  }, N = () => {
+    var h;
+    const v = ((h = a.value) == null ? void 0 : h.bottom) || 0;
+    _.position.set(0, v + i.value / 2 + 7e-3, 0);
   };
-  return Ne = O(
-    () => [n.value, r.value],
-    ([b, m], [B, F]) => {
-      b === B && m === F || (G(), f());
+  return He = G(
+    () => [i.value, n.value],
+    ([v, h], [A, j]) => {
+      v === A && h === j || (F(), g());
     },
     { flush: "post" }
-  ), He = O(
-    () => i.value,
+  ), Je = G(
+    () => o.value,
     () => {
-      f();
+      g();
     },
     { flush: "post" }
-  ), qe = O(
-    () => o.value,
-    (b) => {
-      E(b);
+  ), Ke = G(
+    () => r.value,
+    (v) => {
+      x(v);
     },
     { flush: "post" }
   ), {
-    init: S,
-    showHideGrid: y,
-    updateGridColors: P,
+    init: y,
+    showHideGrid: b,
+    updateGridColors: L,
     dispose: () => {
-      var m, B;
-      const b = u();
-      Ne == null || Ne(), He == null || He(), qe == null || qe(), Ne = null, He = null, qe = null, V && (b.remove(V), (m = V.geometry) == null || m.dispose(), Array.isArray(V.material) ? V.material.forEach((F) => F == null ? void 0 : F.dispose()) : (B = V.material) == null || B.dispose(), V = null);
+      var h, A;
+      const v = u();
+      He == null || He(), Je == null || Je(), Ke == null || Ke(), He = null, Je = null, Ke = null, _ && (v.remove(_), (h = _.geometry) == null || h.dispose(), Array.isArray(_.material) ? _.material.forEach((j) => j == null ? void 0 : j.dispose()) : (A = _.material) == null || A.dispose(), _ = null);
     }
   };
-}, no = { class: "three-dimension-tool" }, ro = ["data-id"], io = /* @__PURE__ */ Object.assign({
+}, uo = { class: "three-dimension-tool" }, po = ["data-id"], mo = /* @__PURE__ */ Object.assign({
   name: "ThreeDimensionTool",
   slug: "three-dimension-tool",
   inheritAttrs: !1
@@ -1566,82 +1659,95 @@ const Gt = () => {
   setup(e) {
     const t = e;
     let s = null;
-    const i = C(() => Number(t.id)), r = A(), n = ct(), o = fe(), l = me(), { move: a } = $(o), u = pe(null), p = pe(!1);
-    let D, w, h;
-    const f = rt(), S = Mt(), E = Dt(), { init: y, setEnvironment: T } = we(), { init: P } = at(), { init: G } = Le(), { init: H, updateVisibility: Z } = Pt(), { init: b, updatePosition: m } = it(), { init: B } = Rt(), { init: F } = Gt(), z = () => {
-      if (!u.value || p.value) {
+    const o = C(() => Number(t.id)), n = T(), i = pt(), r = ge(), c = ae(), { move: a } = O(r), { isFrozen: u } = O(n), p = he(null), P = he(!1);
+    let w, m, g;
+    const y = ct(), x = Bt(), b = At(), { init: D, setEnvironment: L } = Ie(), { init: F } = Xe(), { init: N } = Re(), { init: K, updateVisibility: v } = _t(), { init: h, updatePosition: A } = ut(), { init: j } = Gt(), { init: z } = Ot(), $ = () => {
+      if (!p.value || P.value) {
         console.warn("Canvas element not found");
         return;
       }
-      p.value = !0, h = y(), w = P(u.value), T(w), B(), D = G(), b(), F(), H(), f.init(w), j();
-    }, j = () => {
-      p.value && (a.value !== s && (s = a.value, a.value ? E.activate() : S.activate()), f.update(), a.value ? (m(), E.syncToStore()) : S.syncToStore(), Z(), w.render(h, D), requestAnimationFrame(j));
+      P.value = !0, g = D(), m = F(p.value), L(m), j(), w = N(), h(), z(), K(), y.init(m), Y();
     }, Y = () => {
-      if (u.value) {
-        const q = window.innerWidth, g = window.innerHeight;
-        r.$patch({ width: q, height: g }), u.value.style.height = g + "px";
+      P.value && (a.value !== s && (s = a.value, a.value ? b.activate() : x.activate()), y.update(), a.value ? (A(), b.syncToStore()) : x.syncToStore(), v(), m.render(g, w), requestAnimationFrame(Y));
+    }, Z = () => {
+      if (p.value) {
+        const l = window.innerWidth, f = window.innerHeight;
+        n.$patch({ width: l, height: f }), p.value.style.height = f + "px";
       }
+    }, S = () => {
+      u.value && n.pokeFreeze();
     };
-    return jt(() => {
-      console.log("onMounted", u.value), z(), window.addEventListener("resize", Y), Y();
-    }), O(
-      () => l.bounds,
-      (q) => {
-        q && (E.activate(), o.hasRig || (E.frameToBounds(q), E.syncToStore(), o.markFramed()), S.activate(), n.hasRig || (S.frameToBounds(q), S.syncToStore(), n.markFramed()));
+    return G(u, (l) => {
+      var M;
+      const f = (M = y.get) == null ? void 0 : M.call(y);
+      f && (f.enabled = !l);
+    }), G(
+      () => [i.applyRevision, r.applyRevision],
+      () => {
+        P.value && (b.activate(), A(), x.activate());
+      }
+    ), $t(() => {
+      var l;
+      console.log("onMounted", p.value), $(), window.addEventListener("resize", Z), Z(), (l = p.value) == null || l.addEventListener("pointerdown", S, !0);
+    }), G(
+      () => c.bounds,
+      (l) => {
+        l && (b.activate(), r.hasRig || (b.frameToBounds(l), b.syncToStore(), r.markFramed()), x.activate(), i.hasRig || (x.frameToBounds(l), x.syncToStore(), i.markFramed()));
       }
-    ), O(
-      () => r.subjectLoaded,
-      (q) => {
-        if (!q) return;
-        const g = l.bounds;
-        if (!g) return;
-        n.hasRig || (f.frameToBounds(g), n.markFramed());
-        const c = f.get();
-        c.update(), c.saveState();
+    ), G(
+      () => n.subjectLoaded,
+      (l) => {
+        if (!l) return;
+        const f = c.bounds;
+        if (!f) return;
+        i.hasRig || (y.frameToBounds(f), i.markFramed());
+        const M = y.get();
+        M.update(), M.saveState();
       }
-    ), _t(() => {
-      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), p.value = !1, Rt().dispose(), Gt().dispose(), Pt().dispose(), it().dispose(), rt().dispose(), Le().dispose(), we().dispose(), at().dispose();
-    }), (q, g) => (nt(), rs("div", no, [
-      vt("", !0),
-      is("div", {
+    ), Ut(() => {
+      var l;
+      console.debug("ThreeDimensionTool unMounted"), window.removeEventListener("resize", this), (l = p.value) == null || l.removeEventListener("pointerdown", S, !0), P.value = !1, Gt().dispose(), Ot().dispose(), _t().dispose(), ut().dispose(), ct().dispose(), Re().dispose(), Ie().dispose(), Xe().dispose();
+    }), (l, f) => (at(), us("div", uo, [
+      wt("", !0),
+      ds("div", {
         class: "tres",
         ref_key: "tres",
-        ref: u,
-        "data-id": i.value
-      }, null, 8, ro)
+        ref: p,
+        "data-id": o.value
+      }, null, 8, po)
     ]));
   }
-}), Ft = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CwHAnjEe.js") }), W = (e = "../i18n") => {
-  const t = ps(), s = pe({}), i = C(() => t.lang.isoName || "en-US"), r = async () => {
-    const n = `${e}/${i.value}/index.js`;
-    if (Ft[n])
+}), Nt = /* @__PURE__ */ Object.assign({ "../i18n/en-US/index.js": () => import("./index-CwHAnjEe.js") }), q = (e = "../i18n") => {
+  const t = ys(), s = he({}), o = C(() => t.lang.isoName || "en-US"), n = async () => {
+    const i = `${e}/${o.value}/index.js`;
+    if (Nt[i])
       try {
-        const o = await Ft[n]();
-        o.default && Object.assign(s.value, o.default);
-      } catch (o) {
-        console.error(`Error loading i18n for ${i.value}`, o);
+        const r = await Nt[i]();
+        r.default && Object.assign(s.value, r.default);
+      } catch (r) {
+        console.error(`Error loading i18n for ${o.value}`, r);
       }
     else
-      console.error(`Module not found: ${n}`);
+      console.error(`Module not found: ${i}`);
   };
-  return O(
-    () => i.value,
+  return G(
+    () => o.value,
     () => {
-      r();
+      n();
     },
     { immediate: !0 }
-  ), as(() => {
-    r();
+  ), ps(() => {
+    n();
   }), { lang: s };
-}, oe = ({ tab: e = se, store: t, options: s = [] }) => {
-  const i = bs(), r = A(i), n = C({
-    get: () => r.isExpanded(s),
+}, ke = 26, X = ({ tab: e = ne, store: t, options: s = [] }) => {
+  const o = Cs(), n = T(o), i = C({
+    get: () => n.isExpanded(s),
     set: (a) => {
-      a && r.setActive(e);
+      a && n.setActive(e);
     }
-  }), o = C(() => t && t.changed);
-  return { click: () => r.setActive(e), expanded: n, selected: o };
-}, Tt = R({
+  }), r = C(() => t && t.changed);
+  return { click: () => n.setActive(e), expanded: i, selected: r };
+}, zt = V({
   name: "ToolResetButton",
   props: {
     label: { type: String, required: !1, default: "Reset" },
@@ -1649,33 +1755,45 @@ const Gt = () => {
   },
   emits: ["click"],
   setup(e, { slots: t, emit: s }) {
-    function i() {
+    function o() {
       s("click");
     }
-    function r() {
-      const n = {
+    function n() {
+      const i = {
         label: e.label,
         class: "full-width",
         flat: !0,
-        onClick: i,
+        onClick: o,
         disable: e.disable
       };
-      return d("div", { class: "tool-reset-button q-pa-md" }, d(Ut, n));
+      return d("div", { class: "tool-reset-button q-pa-md" }, d(qt, i));
+    }
+    return () => n();
+  }
+}), ft = V({
+  name: "FrozenOverlay",
+  setup() {
+    const e = T(), { isFrozen: t } = O(e);
+    function s() {
+      return ms(d("div", {
+        class: "frozen-overlay",
+        onClick: () => e.pokeFreeze()
+      }, []), [[fs, t.value]]);
     }
-    return () => r();
+    return () => s();
   }
-}), Yt = R({
+}), es = V({
   name: "TdColorsSection",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = A(), n = ut(), o = Ve(), { active: l } = $(r), a = pe(!1), u = pe(!1), p = C(
+    const { lang: o } = q(), n = T(), i = mt(), r = Fe(), { active: c } = O(n), a = he(!1), u = he(!1), p = C(
       () => {
-        var b;
-        return (b = i.value.td) == null ? void 0 : b.components.colors.items.background;
+        var v;
+        return (v = o.value.td) == null ? void 0 : v.components.colors.items.background;
       }
-    ), D = C(
+    ), P = C(
       () => {
-        var b;
-        return (b = i.value.td) == null ? void 0 : b.components.colors.items.ground;
+        var v;
+        return (v = o.value.td) == null ? void 0 : v.components.colors.items.ground;
       }
     ), w = C(() => ({
       key: p.value,
@@ -1683,63 +1801,64 @@ const Gt = () => {
       type: "none",
       icon: "f_scene",
       size: "sm",
-      color: n.colorHex,
+      color: i.colorHex,
       onClick: () => a.value = !0
-    })), h = C(() => ({
-      key: D.value,
-      label: D.value,
+    })), m = C(() => ({
+      key: P.value,
+      label: P.value,
       type: "none",
       icon: "f_ground",
       size: "sm",
-      color: o.colorHex,
+      color: r.colorHex,
       onClick: () => u.value = !0
-    })), f = C({
+    })), g = C({
       get: () => u.value || a.value,
-      set: (b) => u.value = a.value = !1
-    }), S = C({
-      get: () => u.value ? o.colorHex : n.colorHex,
-      set: (b) => {
+      set: (v) => u.value = a.value = !1
+    }), y = C({
+      get: () => u.value ? r.colorHex : i.colorHex,
+      set: (v) => {
         if (u.value) {
-          o.setColorHex(b);
+          r.setColorHex(v);
           return;
         }
-        n.setColorHex(b);
+        i.setColorHex(v);
       }
-    }), E = C(() => ({
+    }), x = C(() => ({
       class: "td-colors-tool q-pa-xs row justify-center items-center q-gutter-md",
-      style: f.value ? "display: none" : ""
-    })), y = C(() => ({
-      modelValue: S.value,
-      "onUpdate:modelValue": (b) => S.value = b,
-      show: f.value,
-      "onUpdate:show": (b) => f.value = b,
-      label: T.value
-    })), T = C(() => u.value ? D.value : p.value), P = () => {
-      n.reset(), o.reset();
-    }, G = C(() => o.changed || n.changed), H = C(() => ({
+      style: g.value ? "display: none" : ""
+    })), b = C(() => ({
+      modelValue: y.value,
+      "onUpdate:modelValue": (v) => y.value = v,
+      show: g.value,
+      "onUpdate:show": (v) => g.value = v,
+      label: D.value
+    })), D = C(() => u.value ? P.value : p.value), L = () => {
+      i.reset(), r.reset();
+    }, F = C(() => r.changed || i.changed), N = C(() => ({
       label: "Reset Colors",
-      onClick: P,
-      style: f.value ? "display: none" : "",
-      disable: !G.value
+      onClick: L,
+      style: g.value ? "display: none" : "",
+      disable: !F.value
     }));
-    O(l, (b) => {
-      b !== se && (f.value = !1);
+    G(c, (v) => {
+      v !== ne && (g.value = !1);
     });
-    function Z() {
+    function K() {
       return d("div", {
         class: "full-width"
       }, [
-        d("div", E.value, [
-          d(Ce, w.value),
-          d(Ce, h.value)
+        d(ft),
+        d("div", x.value, [
+          d(ie, w.value),
+          d(ie, m.value)
         ]),
-        d(Tt, H.value),
-        d(fs, y.value)
+        d(zt, N.value),
+        d(Ss, b.value)
       ]);
     }
-    return () => Z();
+    return () => K();
   }
-}), ao = R({
+}), fo = V({
   name: "TdColorsExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1748,13 +1867,13 @@ const Gt = () => {
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = It(), { expanded: n, selected: o } = oe({
-      store: r,
-      options: se,
-      tab: se
-    }), l = C(() => {
+    const { lang: o } = q(), n = Mt(), { expanded: i, selected: r } = X({
+      store: n,
+      options: ne,
+      tab: ne
+    }), c = C(() => {
       var u;
-      return (u = i.value.td) == null ? void 0 : u.components.colors.title;
+      return (u = o.value.td) == null ? void 0 : u.components.colors.title;
     });
     C({
       get: () => e.modelValue,
@@ -1764,71 +1883,71 @@ const Gt = () => {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (p) => n.value = p,
-        label: l.value,
-        selected: o.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: r.value,
         icon: "f_palette"
       };
-      return d(We, u, () => d(Yt));
+      return d(Ve, u, () => d(es));
     }
     return () => a();
   }
-}), Qt = R({
+}), ts = V({
   name: "TdGridSection",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = Ee(), n = C(
+    const { lang: o } = q(), n = ve(), i = C(
       () => {
-        var w, h;
-        return o.value ? ((w = i.value.td) == null ? void 0 : w.components.grid.toggle.off) || "" : ((h = i.value.td) == null ? void 0 : h.components.grid.toggle.on) || "";
+        var w, m;
+        return r.value ? ((w = o.value.td) == null ? void 0 : w.components.grid.toggle.off) || "" : ((m = o.value.td) == null ? void 0 : m.components.grid.toggle.on) || "";
       }
-    ), o = C({
-      get: () => r.show,
-      set: (w) => r.setProperty("show", w)
-    }), l = C({
-      get: () => r.opacity,
-      set: (w) => r.setProperty("opacity", w)
+    ), r = C({
+      get: () => n.show,
+      set: (w) => n.setProperty("show", w)
+    }), c = C({
+      get: () => n.opacity,
+      set: (w) => n.setProperty("opacity", w)
     }), a = C({
-      get: () => r.size,
-      set: (w) => r.setProperty("size", w)
+      get: () => n.size,
+      set: (w) => n.setProperty("size", w)
     }), u = C({
-      get: () => r.divisions,
-      set: (w) => r.setProperty("divisions", w)
+      get: () => n.divisions,
+      set: (w) => n.setProperty("divisions", w)
     }), p = C(() => ({
       label: "Reset Grid",
-      disable: !r.changed,
-      onClick: r.reset
+      disable: !n.changed,
+      onClick: n.reset
     }));
-    function D() {
+    function P() {
       const w = {
         class: "td-grid-tool"
-      }, h = {
+      }, m = {
         access: "grd",
         // drawer: !props.noIcons,
-        modelValue: o.value,
-        "onUpdate:modelValue": (T) => o.value = T,
-        label: n.value
+        modelValue: r.value,
+        "onUpdate:modelValue": (D) => r.value = D,
+        label: i.value
         // dark: props.dark,
         // disable: props.disable,
         // hasAccess: props.hasAccess,
         // onBlockAccess: emitBlockAccess,
-      }, f = {
+      }, g = {
         title: "Opacity",
         icon: "f_opacity",
         min: 1,
         max: 100,
         initial: 50,
-        modelValue: l.value * 100,
-        "onUpdate:modelValue": (T) => l.value = T / 100
-      }, S = {
+        modelValue: c.value * 100,
+        "onUpdate:modelValue": (D) => c.value = D / 100
+      }, y = {
         title: "Size",
         icon: "f_size",
         min: 100,
         max: 300,
         initial: 200,
         modelValue: a.value * 100,
-        "onUpdate:modelValue": (T) => a.value = T / 100
-      }, E = {
+        "onUpdate:modelValue": (D) => a.value = D / 100
+      }, x = {
         title: "Number of lines",
         icon: "f_grid",
         min: 2,
@@ -1837,13 +1956,13 @@ const Gt = () => {
         step: 2,
         initial: 6,
         modelValue: u.value,
-        "onUpdate:modelValue": (T) => u.value = T
-      }, y = [d(Ot, h)];
-      return o.value && (y.push(d(Ke, S)), y.push(d(Ke, E)), y.push(d(Ke, f)), y.push(d(Tt, p.value))), d("div", w, y);
+        "onUpdate:modelValue": (D) => u.value = D
+      }, b = [d(ft), d(Ht, m)];
+      return r.value && (b.push(d(We, y)), b.push(d(We, x)), b.push(d(We, g)), b.push(d(zt, p.value))), d("div", w, b);
     }
-    return () => D();
+    return () => P();
   }
-}), lo = R({
+}), ho = V({
   name: "TdGridExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1852,13 +1971,13 @@ const Gt = () => {
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = Ee(), { expanded: n, selected: o } = oe({
-      store: r,
-      options: Se,
-      tab: Se
-    }), l = C(() => {
+    const { lang: o } = q(), n = ve(), { expanded: i, selected: r } = X({
+      store: n,
+      options: Ce,
+      tab: Ce
+    }), c = C(() => {
       var u;
-      return (u = i.value.td) == null ? void 0 : u.components.grid.title;
+      return (u = o.value.td) == null ? void 0 : u.components.grid.title;
     });
     C({
       get: () => e.modelValue,
@@ -1868,17 +1987,17 @@ const Gt = () => {
       const u = {
         class: "td-colors-expansion",
         "data-cy": "td-colors-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (p) => n.value = p,
-        label: l.value,
-        selected: o.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: r.value,
         icon: "f_grid"
       };
-      return d(We, u, () => d(Qt));
+      return d(Ve, u, () => d(ts));
     }
     return () => a();
   }
-}), Jt = R({
+}), ss = V({
   name: "TdLightsSection",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1887,89 +2006,90 @@ const Gt = () => {
   },
   emits: ["click", "update:modelValue"],
   setup() {
-    const { lang: e } = W(), t = fe(), s = A(), i = me(), r = it(), n = Dt(), o = Mt(), { active: l } = $(s), a = C({
+    const { lang: e } = q(), t = ge(), s = T(), o = ae(), n = ut(), i = At(), r = Bt(), { active: c } = O(s), a = C({
       get: () => t.move,
-      set: (m) => t.setMove(m)
+      set: (h) => t.setMove(h)
     }), u = C(
       () => {
-        var m, B;
-        return t.move ? ((m = e.value.td) == null ? void 0 : m.components.lights.toggles.position.off) || "" : ((B = e.value.td) == null ? void 0 : B.components.lights.toggles.position.on) || "";
+        var h, A;
+        return t.move ? ((h = e.value.td) == null ? void 0 : h.components.lights.toggles.position.off) || "" : ((A = e.value.td) == null ? void 0 : A.components.lights.toggles.position.on) || "";
       }
     ), p = C(() => ({
       modelValue: a.value,
-      "onUpdate:modelValue": (m) => a.value = m,
+      "onUpdate:modelValue": (h) => a.value = h,
       label: u.value
-    })), D = C(
+    })), P = C(
       () => {
-        var m;
-        return ((m = e.value.td) == null ? void 0 : m.components.lights.ambientIntensity) || "";
+        var h;
+        return ((h = e.value.td) == null ? void 0 : h.components.lights.ambientIntensity) || "";
       }
     ), w = C(
       () => {
-        var m;
-        return ((m = e.value.td) == null ? void 0 : m.components.lights.userIntensity) || "";
+        var h;
+        return ((h = e.value.td) == null ? void 0 : h.components.lights.userIntensity) || "";
       }
-    ), h = 0, f = 50, S = 100, E = (m, B, F) => ({
-      toSlider: (z) => z <= B ? h + (z - m) / (B - m) * (f - h) : f + (z - B) / (F - B) * (S - f),
-      fromSlider: (z) => z <= f ? m + (z - h) / (f - h) * (B - m) : B + (z - f) / (S - f) * (F - B)
-    }), y = E(
-      Be,
-      te,
-      yt
-    ), T = E(
-      Be,
-      te,
-      St
-    ), P = (m, B, F, z) => ({
-      title: m,
+    ), m = 0, g = 50, y = 100, x = (h, A, j) => ({
+      toSlider: (z) => z <= A ? m + (z - h) / (A - h) * (g - m) : g + (z - A) / (j - A) * (y - g),
+      fromSlider: (z) => z <= g ? h + (z - m) / (g - m) * (A - h) : A + (z - g) / (y - g) * (j - A)
+    }), b = x(
+      Pe,
+      oe,
+      Et
+    ), D = x(
+      Pe,
+      oe,
+      kt
+    ), L = (h, A, j, z) => ({
+      title: h,
       icon: "f_brightness",
-      min: h,
-      max: S,
-      modelValue: B.toSlider(F),
-      "onUpdate:modelValue": (j) => {
-        z(B.fromSlider(j));
+      min: m,
+      max: y,
+      modelValue: A.toSlider(j),
+      "onUpdate:modelValue": ($) => {
+        z(A.fromSlider($));
       }
-    }), G = C(
-      () => P(
-        D.value,
-        y,
+    }), F = C(
+      () => L(
+        P.value,
+        b,
         t.ambientScale,
-        (m) => t.setAmbientScale(m)
+        (h) => t.setAmbientScale(h)
       )
-    ), H = C(
-      () => P(
+    ), N = C(
+      () => L(
         w.value,
-        T,
+        D,
         t.userScale,
-        (m) => t.setUserScale(m)
+        (h) => t.setUserScale(h)
       )
-    ), Z = C(() => ({
+    ), K = C(() => ({
       label: "Reset Lights",
       disable: !t.changed,
       onClick: () => {
-        var B;
+        var A;
         t.reset();
-        const m = i.bounds;
-        m && (n.activate(), n.frameToBounds(m), n.syncToStore(), o.activate()), (B = r.applyFromStore) == null || B.call(r);
+        const h = o.bounds;
+        h && (i.activate(), i.frameToBounds(h), i.syncToStore(), r.activate()), (A = n.applyFromStore) == null || A.call(n);
       }
     }));
-    O(l, (m) => {
-      m !== de && (a.value = !1);
+    G(c, (h) => {
+      h !== fe && (a.value = !1);
     });
-    function b() {
-      const m = {
+    function v() {
+      const h = {
         class: "td-lights-tool"
-      }, B = [
-        d(Ot, p.value),
-        d(Ke, G.value),
-        d(Ke, H.value),
-        d(Tt, Z.value)
+      }, A = [
+        d(ft),
+        d(Ht, p.value),
+        d(We, F.value),
+        d(We, N.value),
+        d(zt, K.value)
       ];
-      return d("div", m, B);
+      return d("div", h, A);
     }
-    return () => b();
+    return () => v();
   }
-}), co = R({
+}), go = V({
   name: "TdLightExpansion",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -1978,13 +2098,13 @@ const Gt = () => {
   },
   emits: ["click", "update:modelValue"],
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = fe(), { expanded: n, selected: o } = oe({
-      store: r,
-      options: de,
-      tab: de
-    }), l = C(() => {
+    const { lang: o } = q(), n = ge(), { expanded: i, selected: r } = X({
+      store: n,
+      options: fe,
+      tab: fe
+    }), c = C(() => {
       var u;
-      return (u = i.value.td) == null ? void 0 : u.components.lights.title;
+      return (u = o.value.td) == null ? void 0 : u.components.lights.title;
     });
     C({
       get: () => e.modelValue,
@@ -1994,75 +2114,105 @@ const Gt = () => {
       const u = {
         class: "td-lights-expansion",
         "data-cy": "td-lights-expansion",
-        modelValue: n.value,
-        "onUpdate:modelValue": (p) => n.value = p,
-        label: l.value,
-        selected: o.value,
+        modelValue: i.value,
+        "onUpdate:modelValue": (p) => i.value = p,
+        label: c.value,
+        selected: r.value,
         icon: "f_bulb_light"
       };
-      return d(We, u, () => d(Jt));
+      return d(Ve, u, () => d(ss));
     }
     return () => a();
   }
-}), es = R({
+}), os = V({
   name: "TdRelatedSection",
   setup() {
-    const e = Symbol.for("RelatedSection"), t = xt(e);
+    const e = Symbol.for("RelatedSection"), t = Ze(e);
     function s() {
-      const i = {
+      const o = {
         class: "td-related-section q-mx-lg q-my-sm"
-      }, r = [];
-      return t && r.push(d(t)), d("div", i, r);
+      }, n = [];
+      return t && n.push(d(t)), d("div", o, n);
     }
     return () => s();
   }
-}), uo = R({
+}), vo = V({
   name: "TdRelatedExpansion",
   setup(e, { slots: t, emit: s }) {
-    const { expanded: i } = oe({
-      options: xe,
-      tab: xe
-    }), r = C(() => "Related");
-    function n() {
-      const o = {
+    const { expanded: o } = X({
+      options: Ee,
+      tab: Ee
+    }), n = C(() => "Related");
+    function i() {
+      const r = {
         class: "td-related-expansion",
-        modelValue: i.value,
-        "onUpdate:modelValue": (l) => i.value = l,
-        label: r.value,
+        modelValue: o.value,
+        "onUpdate:modelValue": (c) => o.value = c,
+        label: n.value,
         icon: "f_related"
       };
-      return d(We, o, () => d(es));
+      return d(Ve, r, () => d(os));
     }
-    return () => n();
+    return () => i();
+  }
+}), ns = V({
+  name: "TdSavedSection",
+  setup() {
+    const e = Symbol.for("SavedSection"), t = Ze(e);
+    function s() {
+      return t ? d("div", {
+        class: "td-saved-section q-mx-lg q-my-sm"
+      }, [d(t)]) : null;
+    }
+    return () => s();
+  }
+}), bo = V({
+  name: "TdSavedExpansion",
+  setup() {
+    const { expanded: e } = X({
+      options: ke,
+      tab: ke
+    }), t = C(() => "Saved");
+    function s() {
+      const o = {
+        class: "td-saved-expansion",
+        modelValue: e.value,
+        "onUpdate:modelValue": (n) => e.value = n,
+        label: t.value,
+        icon: "f_save"
+      };
+      return d(Ve, o, () => d(ns));
+    }
+    return () => s();
   }
 });
-function po() {
-  const { freeServer: e, paidServer: t } = vs();
-  return ys({ freeServer: e, paidServer: t });
+function yo() {
+  const { freeServer: e, paidServer: t } = Es();
+  return ks({ freeServer: e, paidServer: t });
 }
-const mo = Symbol.for("activity-tracking"), fo = ["nude", "muscle", "smooth"];
-function ho() {
-  const e = A(), t = me(), s = xt(mo, null), { getThumbnail: i } = po();
+const So = Symbol.for("activity-tracking"), xo = ["nude", "muscle", "smooth"];
+function wo() {
+  const e = T(), t = ae(), s = Ze(So, null), { getThumbnail: o } = yo();
   return { skins: C(() => {
-    const n = e.setUuid, o = e.selected, l = {};
+    const i = e.setUuid, r = e.selected, c = {};
     return Object.values(t.models).forEach((a) => {
-      !(a != null && a.slug) || l[a.slug] || (l[a.slug] = a);
-    }), fo.filter((a) => l[a]).map((a) => {
-      const u = l[a];
+      !(a != null && a.slug) || c[a.slug] || (c[a.slug] = a);
+    }), xo.filter((a) => c[a]).map((a) => {
+      const u = c[a];
       return {
         id: u.id,
         slug: a,
         name: a,
-        imageUrl: n ? i({ type: "sets", uuid: n, image: a }) : null,
-        selected: u.id === o,
+        imageUrl: i ? o({ type: "sets", uuid: i, image: a }) : null,
+        selected: u.id === r,
         click: () => {
-          e.selected = u.id, s == null || s.trackEvent(Ts, { value: a });
+          e.selected = u.id, s == null || s.trackEvent(Ls, { value: a });
         }
       };
     });
   }) };
 }
-const go = R({
+const Co = V({
   name: "TdSkinButton",
   props: {
     id: { type: Number, required: !0 },
@@ -2078,8 +2228,8 @@ const go = R({
       margin: "3px",
       marginBottom: e.size === "sm" ? "40px" : "30px"
     }));
-    function i() {
-      const r = {
+    function o() {
+      const n = {
         class: `td-${e.slug}-button td-skin-button`,
         key: e.id,
         label: e.label,
@@ -2091,63 +2241,63 @@ const go = R({
         selected: e.selected,
         onClick: () => t("click")
       };
-      return d(Ce, r);
+      return d(ie, n);
     }
-    return () => i();
+    return () => o();
   }
-}), ts = R({
+}), rs = V({
   name: "TdSkinsSection",
   props: { size: { type: String, default: "sm" } },
   setup(e) {
-    const { skins: t } = ho(), { lang: s } = W();
-    function i() {
-      const r = t.value.map(
-        (n) => {
-          var o, l;
-          return d(go, {
-            id: n.id,
-            slug: n.slug,
-            label: ((l = (o = s.value.td) == null ? void 0 : o.components.skins.items) == null ? void 0 : l[n.slug]) ?? n.slug,
-            image: n.imageUrl,
-            selected: n.selected,
+    const { skins: t } = wo(), { lang: s } = q();
+    function o() {
+      const n = [d(ft)];
+      return t.value.forEach((i) => {
+        var r, c;
+        n.push(
+          d(Co, {
+            id: i.id,
+            slug: i.slug,
+            label: ((c = (r = s.value.td) == null ? void 0 : r.components.skins.items) == null ? void 0 : c[i.slug]) ?? i.slug,
+            image: i.imageUrl,
+            selected: i.selected,
             size: e.size,
-            onClick: n.click
-          });
-        }
-      );
-      return d($t, {}, () => r);
+            onClick: i.click
+          })
+        );
+      }), d(Jt, {}, () => n);
     }
-    return () => i();
+    return () => o();
   }
-}), bo = R({
+}), Eo = V({
   name: "TdSkinsExpansion",
   setup() {
-    const { lang: e } = W(), t = me(), { expanded: s } = oe({
-      options: ye,
-      tab: ye
-    }), i = C(() => {
-      var l;
-      const o = (l = t.model) == null ? void 0 : l.slug;
-      return !!o && o !== qt;
-    }), r = C(() => {
-      var o;
-      return (o = e.value.td) == null ? void 0 : o.components.skins.title;
+    const { lang: e } = q(), t = ae(), { expanded: s } = X({
+      options: ee,
+      tab: ee
+    }), o = C(() => {
+      var c;
+      const r = (c = t.model) == null ? void 0 : c.slug;
+      return !!r && r !== Wt;
+    }), n = C(() => {
+      var r;
+      return (r = e.value.td) == null ? void 0 : r.components.skins.title;
     });
-    function n() {
-      const o = {
+    function i() {
+      const r = {
         class: "td-skins-expansion",
         "data-cy": "td-skins-expansion",
         modelValue: s.value,
-        "onUpdate:modelValue": (l) => s.value = l,
-        label: r.value,
-        selected: i.value,
+        "onUpdate:modelValue": (c) => s.value = c,
+        label: n.value,
+        selected: o.value,
         icon: "f_shirt"
       };
-      return d(We, o, () => d(ts, { size: "sm", class: "q-py-sm" }));
+      return d(Ve, r, () => d(rs, { size: "sm", class: "q-py-sm" }));
     }
-    return () => n();
+    return () => i();
   }
-}), ss = R({
+}), is = V({
   name: "TdButtons",
   props: {
     modelValue: { type: Number, default: 0 },
@@ -2159,334 +2309,434 @@ const go = R({
     }
   },
   emits: ["click", "update:modelValue"],
-  setup(e, { slots: t, emit: s }) {
-    const i = Mt(), r = Dt(), n = ct(), o = Ve(), l = fe(), a = ut(), { changed: u } = $(n), { changed: p } = $(o), { changed: D } = $(l), { changed: w } = $(a), h = C(() => !(u.value || p.value || D.value || w.value));
-    function f() {
-      n.reset(), o.reset(), l.reset(), a.reset(), i.applyFromStore(), r.applyFromStore();
-    }
-    const S = (y) => y.preventDefault();
-    function E() {
-      const T = {
-        style: C(() => e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : ""),
-        class: "row justify-center items-center q-pa-md"
-      }, P = {
+  setup(e, { emit: t }) {
+    const s = Bt(), o = At(), n = pt(), i = ae(), r = ve(), c = Fe(), a = ge(), u = mt(), { changed: p } = O(n), { changed: P } = O(r), { changed: w } = O(c), { changed: m } = O(a), { changed: g } = O(u), y = C(() => !(p.value || P.value || w.value || m.value || g.value));
+    function x() {
+      n.reset(), r.reset(), c.reset(), a.reset(), u.reset();
+      const L = i.bounds;
+      L ? (o.activate(), o.frameToBounds(L), o.syncToStore(), s.activate(), s.frameToBounds(L), s.syncToStore()) : (s.applyFromStore(), o.applyFromStore());
+    }
+    const b = (L) => L.preventDefault();
+    function D() {
+      const F = {
+        style: e.fixed ? "position: fixed;bottom: 0; left: 0; right: 0;border-top: 1px solid var(--grey-300)" : "",
+        class: e.fixed ? "row justify-center items-center q-pa-md glass-background" : "row justify-center items-center q-pa-md"
+      }, N = {
         class: "td-reset-button",
         label: "Reset All",
-        onClick: f,
-        onKeyup: S,
+        onClick: x,
+        onKeyup: b,
         rounded: !0,
         unelevated: !0,
         outline: !0,
-        disable: h.value
+        disable: y.value
       };
-      return d("div", T, [d(Ut, P)]);
+      return d("div", F, [d(qt, N)]);
+    }
+    return () => D();
+  }
+}), as = V({
+  name: "TdPoseButtonsSection",
+  setup() {
+    const e = Symbol.for("PoseButtonsSection"), t = Ze(e, null);
+    function s() {
+      const o = {
+        class: "td-pose-buttons-section"
+      }, n = [];
+      return t && n.push(d(t)), d("div", o, n);
     }
-    return () => E();
+    return () => s();
   }
-}), vo = R({
+}), ko = V({
   name: "TdExpansions",
   setup(e, { slots: t, emit: s }) {
-    function i() {
+    function o() {
       return d("div", {
         class: "td-expansions",
-        onClick: (n) => n.stopPropagation(),
+        onClick: (i) => i.stopPropagation(),
         style: "padding-bottom: 60px; position: relative "
       }, [
-        // h(TsPoseButtonsSection),
-        d(Ie),
-        d(bo),
-        d(Ie),
-        d(ao),
-        d(Ie),
-        d(lo),
-        d(Ie),
-        d(co),
-        d(Ie),
+        d(as),
+        d(ye),
+        d(Eo),
+        d(ye),
+        d(fo),
+        d(ye),
+        d(ho),
+        d(ye),
+        d(go),
+        d(ye),
         // h(TsGridExpansion),
         // h(QSeparator),
         // h(TsAdjustmentExpansion),
-        d(uo),
-        d(Ie),
+        d(vo),
+        d(ye),
+        d(bo),
+        d(ye),
         // h('div', {}, store.loading.percent),
-        d(ss)
+        d(is)
       ]);
     }
-    return () => i();
+    return () => o();
   }
-}), yo = R({
+}), Io = V({
   name: "TdColorsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+    const t = ve(), s = T(), o = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: n } = q(), i = C(() => {
       var p;
-      return (p = r.value.td) == null ? void 0 : p.controls.colors.iconTitle;
-    }), { click: o, selected: l } = oe({
+      return (p = n.value.td) == null ? void 0 : p.controls.colors.iconTitle;
+    }), { click: r, selected: c } = X({
       store: t,
-      options: se,
-      tab: se
+      options: ne,
+      tab: ne
     });
     function a(p) {
       return s.block(p);
     }
     function u() {
       const p = {
-        hasAccess: i.value,
-        selected: l.value,
-        onClick: o,
+        hasAccess: o.value,
+        selected: c.value,
+        onClick: r,
         onBlockAccess: a,
         size: e.size,
-        "data-id": se,
+        "data-id": ne,
         name: "colors",
         type: "none",
         icon: "f_palette",
-        label: n.value
+        label: i.value
       };
-      return d(Ce, p, () => []);
+      return d(ie, p, () => []);
     }
     return () => u();
   }
-}), So = R({
+}), To = V({
   name: "TdGridButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+    const t = ve(), s = T(), o = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: n } = q(), i = C(() => {
       var p;
-      return (p = r.value.td) == null ? void 0 : p.controls.grid.iconTitle;
-    }), { click: o, selected: l } = oe({
+      return (p = n.value.td) == null ? void 0 : p.controls.grid.iconTitle;
+    }), { click: r, selected: c } = X({
       store: t,
-      options: Se,
-      tab: Se
+      options: Ce,
+      tab: Ce
     });
     function a(p) {
       return s.block(p);
     }
     function u() {
       const p = {
-        hasAccess: i.value,
-        selected: l.value,
-        onClick: o,
+        hasAccess: o.value,
+        selected: c.value,
+        onClick: r,
         onBlockAccess: a,
         size: e.size,
-        "data-id": Se,
+        "data-id": Ce,
         name: "grid",
         type: "none",
         icon: "f_grid",
-        label: n.value
+        label: i.value
       };
-      return d(Ce, p, () => []);
+      return d(ie, p, () => []);
     }
     return () => u();
   }
-}), xo = R({
+}), Do = V({
   name: "TdLightsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = Ee(), s = A(), i = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: r } = W(), n = C(() => {
+    const t = ve(), s = T(), o = C(() => (s == null ? void 0 : s.hasAccess("grd")) || !1), { lang: n } = q(), i = C(() => {
       var p;
-      return (p = r.value.td) == null ? void 0 : p.controls.lights.iconTitle;
-    }), { click: o, selected: l } = oe({
+      return (p = n.value.td) == null ? void 0 : p.controls.lights.iconTitle;
+    }), { click: r, selected: c } = X({
       store: t,
-      options: de,
-      tab: de
+      options: fe,
+      tab: fe
     });
     function a(p) {
       return s.block(p);
     }
     function u() {
       const p = {
-        hasAccess: i.value,
-        selected: l.value,
-        onClick: o,
+        hasAccess: o.value,
+        selected: c.value,
+        onClick: r,
         onBlockAccess: a,
         size: e.size,
-        "data-id": de,
+        "data-id": fe,
         name: "lights",
         type: "none",
         icon: "f_bulb_light",
-        label: n.value
+        label: i.value
       };
-      return d(Ce, p, () => []);
+      return d(ie, p, () => []);
     }
     return () => u();
   }
-}), Co = R({
+}), Mo = V({
   name: "TsAdjustmentsButton",
   props: { size: String },
   setup(e, {}) {
-    const t = A(), { lang: s } = W(), i = C(() => {
+    const t = T(), { lang: s } = q(), o = C(() => {
       var a;
       return (a = s.value.td) == null ? void 0 : a.controls.related.iconTitle;
-    }), { click: r, selected: n } = oe({
-      options: xe,
-      tab: xe
+    }), { click: n, selected: i } = X({
+      options: Ee,
+      tab: Ee
     });
-    function o(a) {
+    function r(a) {
       return t.block(a);
     }
-    function l() {
+    function c() {
       const a = {
         hasAccess: !0,
-        selected: n.value,
-        onClick: r,
-        onBlockAccess: o,
-        "data-id": xe,
+        selected: i.value,
+        onClick: n,
+        onBlockAccess: r,
+        "data-id": Ee,
         size: e.size,
         name: "related",
         icon: "f_related",
         type: "none",
-        label: i.value
+        label: o.value
+      };
+      return d(ie, a, () => []);
+    }
+    return () => c();
+  }
+}), Bo = V({
+  name: "TdSavedButton",
+  props: { size: String },
+  setup(e) {
+    const t = T(), { lang: s } = q(), o = C(
+      () => {
+        var a, u;
+        return ((u = (a = s.value.td) == null ? void 0 : a.controls.saved) == null ? void 0 : u.iconTitle) || "Saved";
+      }
+    ), { click: n, selected: i } = X({
+      options: ke,
+      tab: ke
+    });
+    function r(a) {
+      return t.block(a);
+    }
+    function c() {
+      const a = {
+        hasAccess: !0,
+        selected: i.value,
+        onClick: n,
+        onBlockAccess: r,
+        "data-id": ke,
+        size: e.size,
+        name: "saved",
+        icon: "f_save",
+        type: "none",
+        label: o.value
       };
-      return d(Ce, a, () => []);
+      return d(ie, a, () => []);
     }
-    return () => l();
+    return () => c();
   }
-}), wo = R({
-  name: "TsDefaultDrawer",
+}), Ao = V({
+  name: "TdSkinsButton",
+  props: { size: String },
+  setup(e) {
+    const t = T(), { lang: s } = q(), o = C(() => {
+      var a;
+      return (a = s.value.td) == null ? void 0 : a.controls.skins.iconTitle;
+    }), { click: n, selected: i } = X({
+      options: ee,
+      tab: ee
+    });
+    function r(a) {
+      return t.block(a);
+    }
+    function c() {
+      const a = {
+        hasAccess: !0,
+        selected: i.value,
+        onClick: n,
+        onBlockAccess: r,
+        "data-id": ee,
+        size: e.size,
+        name: "skins",
+        icon: "f_shirt",
+        type: "none",
+        label: o.value
+      };
+      return d(ie, a, () => []);
+    }
+    return () => c();
+  }
+}), zo = V({
+  name: "TdDefaultDrawer",
   props: {},
   emits: ["click"],
-  setup(e, { slots: t, emit: s }) {
-    const i = A(), r = "q-ma-xs";
-    function n(o) {
+  setup() {
+    const e = T(), t = "q-ma-xs";
+    function s(o) {
       return {
-        class: r,
-        size: "sm",
-        onClick: () => i.setActive(o)
+        class: t,
+        size: "xs",
+        onClick: () => e.setActive(o)
       };
     }
     return () => d(
-      Pe,
-      { name: Nt },
+      Te,
+      { name: lt },
       {
-        default: () => d($t, {}, () => [
-          d(yo, n(se)),
-          d(So, n(Se)),
-          d(xo, n(de)),
-          d(Co, n(xe))
+        default: () => d(Jt, {}, () => [
+          d(Ao, s(ee)),
+          d(Io, s(ne)),
+          d(To, s(Ce)),
+          d(Do, s(fe)),
+          d(Mo, s(Ee)),
+          d(Bo, s(ke))
         ]),
-        secondary: () => d(ss, { fixed: !1 })
+        secondary: () => [d(as), d(is, { fixed: !1 })]
       }
     );
   }
-}), Eo = R({
+}), Po = V({
   name: "TdGridDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = C(() => {
-      var o;
-      return (o = i.value.td) == null ? void 0 : o.controls.grid.title;
+    const { lang: o } = q(), n = C(() => {
+      var r;
+      return (r = o.value.td) == null ? void 0 : r.controls.grid.title;
     });
-    function n() {
-      const o = {
+    function i() {
+      const r = {
         class: "td-grid-drawer",
-        name: Se,
-        label: r.value
+        name: Ce,
+        label: n.value
       };
-      return d(Pe, o, () => d(Qt));
+      return d(Te, r, () => d(ts));
     }
-    return () => n();
+    return () => i();
   }
-}), Io = R({
+}), Lo = V({
   name: "TdRelatedDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = C(() => {
-      var o;
-      return (o = i.value.td) == null ? void 0 : o.controls.related.title;
+    const { lang: o } = q(), n = C(() => {
+      var r;
+      return (r = o.value.td) == null ? void 0 : r.controls.related.title;
     });
-    function n() {
-      const o = {
+    function i() {
+      const r = {
         class: "td-related-drawer",
-        name: xe,
-        label: r.value
+        name: Ee,
+        label: n.value
       };
-      return d(Pe, o, () => d(es));
+      return d(Te, r, () => d(os));
     }
-    return () => n();
+    return () => i();
   }
-}), Mo = R({
+}), Ro = V({
+  name: "TdSavedDrawer",
+  setup() {
+    const { lang: e } = q(), t = C(() => {
+      var o, n;
+      return ((n = (o = e.value.td) == null ? void 0 : o.controls.saved) == null ? void 0 : n.title) || "Saved";
+    });
+    function s() {
+      const o = {
+        class: "td-saved-drawer",
+        name: ke,
+        label: t.value
+      };
+      return d(Te, o, () => d(ns));
+    }
+    return () => s();
+  }
+}), Vo = V({
   name: "TdLightsDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = C(() => {
-      var o;
-      return (o = i.value.td) == null ? void 0 : o.controls.lights.title;
+    const { lang: o } = q(), n = C(() => {
+      var r;
+      return (r = o.value.td) == null ? void 0 : r.controls.lights.title;
     });
-    function n() {
-      const o = {
+    function i() {
+      const r = {
         class: "td-lights-drawer",
-        name: de,
-        label: r.value
+        name: fe,
+        label: n.value
       };
-      return d(Pe, o, () => d(Jt));
+      return d(Te, r, () => d(ss));
     }
-    return () => n();
+    return () => i();
   }
-}), Do = R({
+}), Fo = V({
   name: "TdLightsDrawer",
   setup(e, { slots: t, emit: s }) {
-    const { lang: i } = W(), r = C(() => {
-      var o;
-      return (o = i.value.td) == null ? void 0 : o.controls.colors.title;
+    const { lang: o } = q(), n = C(() => {
+      var r;
+      return (r = o.value.td) == null ? void 0 : r.controls.colors.title;
     });
-    function n() {
-      const o = {
+    function i() {
+      const r = {
         class: "td-colors-drawer",
-        name: se,
-        label: r.value
+        name: ne,
+        label: n.value
       };
-      return d(Pe, o, () => d(Yt));
+      return d(Te, r, () => d(es));
     }
-    return () => n();
+    return () => i();
   }
-}), To = R({
+}), _o = V({
   name: "TdSkinsDrawer",
   setup() {
-    const { lang: e } = W(), { expanded: t } = oe({
-      options: ye,
-      tab: ye
+    const { lang: e } = q(), { expanded: t } = X({
+      options: ee,
+      tab: ee
     }), s = C(() => {
-      var r;
-      return (r = e.value.td) == null ? void 0 : r.controls.skins.title;
+      var n;
+      return (n = e.value.td) == null ? void 0 : n.controls.skins.title;
     });
-    function i() {
-      const r = {
+    function o() {
+      const n = {
         class: "td-skins-drawer",
-        name: ye,
+        name: ee,
         label: s.value,
         modelValue: t.value,
-        "onUpdate:modelValue": (n) => t.value = n
+        "onUpdate:modelValue": (i) => t.value = i
       };
-      return d(Pe, r, () => d(ts));
+      return d(Te, n, () => d(rs));
     }
-    return () => i();
+    return () => o();
   }
-}), ko = R({
+}), jo = V({
   name: "TsDrawers",
   setup(e, { slots: t, emit: s }) {
-    const i = A(), r = C({
-      get: () => i.active,
-      set: (o) => i.setActive(o)
+    const o = T(), n = C({
+      get: () => o.active,
+      set: (r) => o.setActive(r)
     });
-    function n() {
-      const o = {
-        modelValue: r.value,
-        "onUpdate:modelValue": (l) => r.value = l
+    function i() {
+      const r = {
+        modelValue: n.value,
+        "onUpdate:modelValue": (c) => n.value = c
       };
-      return d(hs, o, () => [
-        d(wo),
-        d(To),
-        d(Mo),
-        d(Do),
-        d(Eo),
-        d(Io)
+      return d(xs, r, () => [
+        d(zo),
+        d(_o),
+        d(Vo),
+        d(Fo),
+        d(Po),
+        d(Lo),
+        d(Ro)
       ]);
     }
-    return () => n();
+    return () => i();
   }
-}), No = /* @__PURE__ */ Object.assign({
+}), en = /* @__PURE__ */ Object.assign({
   name: "TdPage",
   slug: "td-page",
   inheritAttrs: !1
 }, {
   __name: "TdPage",
-  props: /* @__PURE__ */ ds({
+  props: /* @__PURE__ */ bs({
     id: Number
   }, {
     miniState: { type: Boolean },
@@ -2494,41 +2744,41 @@ const go = R({
   }),
   emits: ["update:miniState"],
   setup(e) {
-    const t = e, s = Symbol.for("activity-tracking"), i = A(), r = xt(s, null), n = C(() => Number(t.id)), o = ls(e, "miniState"), l = (a) => {
-      a && (r == null || r.trackEvent(Ds, {
-        glb_id: i.selected || null,
+    const t = e, s = Symbol.for("activity-tracking"), o = T(), n = Ze(s, null), i = C(() => Number(t.id)), r = hs(e, "miniState"), c = (a) => {
+      a && (n == null || n.trackEvent(Ps, {
+        glb_id: o.selected || null,
         base_pose_id: a
       }));
     };
-    return jt(async () => {
-      r && (await r.beginExplore(), r.trackEvent(Ms, { from: null, to: "3d" }), i.basePoseId && (r.beginSegment(String(i.basePoseId)), l(i.basePoseId)));
-    }), O(
-      () => i.basePoseId,
+    return $t(async () => {
+      n && (await n.beginExplore(), n.trackEvent(zs, { from: null, to: "3d" }), o.basePoseId && (n.beginSegment(String(o.basePoseId)), c(o.basePoseId)));
+    }), G(
+      () => o.basePoseId,
       (a, u) => {
-        !a || a === u || (r == null || r.beginSegment(String(a)), l(a));
+        !a || a === u || (n == null || n.beginSegment(String(a)), c(a));
       }
-    ), cs(() => {
-      i.setActive(ms.is.mobile ? Nt : se), r == null || r.end();
-    }), (a, u) => (nt(), mt(ft(gs), {
+    ), gs(() => {
+      o.setActive(Ct.is.mobile ? lt : ne), n == null || n.end();
+    }), (a, u) => (at(), vt(bt(ws), {
       class: "three-dimension-page",
-      miniState: o.value,
-      "onUpdate:miniState": u[0] || (u[0] = (p) => o.value = p),
+      miniState: r.value,
+      "onUpdate:miniState": u[0] || (u[0] = (p) => r.value = p),
       "no-drawer-padding": !0,
       title: "3D Viewer"
     }, {
-      toolDrawer: ht(() => [
-        a.$q.platform.is.mobile ? vt("", !0) : (nt(), mt(ft(vo), { key: 0 }))
+      toolDrawer: yt(() => [
+        a.$q.platform.is.mobile ? wt("", !0) : (at(), vt(bt(ko), { key: 0 }))
       ]),
-      bottomDrawer: ht(() => [
-        a.$q.platform.is.mobile ? (nt(), mt(ft(ko), { key: 0 })) : vt("", !0)
+      bottomDrawer: yt(() => [
+        a.$q.platform.is.mobile ? (at(), vt(bt(jo), { key: 0 })) : wt("", !0)
       ]),
-      default: ht(() => [
-        us(io, { id: n.value }, null, 8, ["id"])
+      default: yt(() => [
+        vs(mo, { id: i.value }, null, 8, ["id"])
       ]),
       _: 1
     }, 8, ["miniState"]));
   }
-}), Ao = [
+}), Go = [
   "#141111",
   "#3E251E",
   "#633C30",
@@ -2569,28 +2819,28 @@ const go = R({
   "#BDACA8",
   "#DACDC9",
   "#E5E4E3"
-], Ho = Xe("3d-fbxs", {
+], tn = Ye("3d-fbxs", {
   state: () => ({
     models: {},
     loadingUrl: null,
-    palette: Ao
+    palette: Go
   }),
   getters: {
     changed(e) {
-      var i, r, n, o, l;
-      const s = A().selected;
-      return console.log("fbx model", (i = e.models) == null ? void 0 : i[s]), (n = (r = e.models) == null ? void 0 : r[s]) != null && n.color ? ((l = (o = e.models) == null ? void 0 : o[s]) == null ? void 0 : l.color) !== 16777215 : !1;
+      var o, n, i, r, c;
+      const s = T().selected;
+      return console.log("fbx model", (o = e.models) == null ? void 0 : o[s]), (i = (n = e.models) == null ? void 0 : n[s]) != null && i.color ? ((c = (r = e.models) == null ? void 0 : r[s]) == null ? void 0 : c.color) !== 16777215 : !1;
     },
     selectedId() {
-      return A().selected;
+      return T().selected;
     },
     poseId(e) {
-      var i, r;
-      const s = A().selected;
-      return (r = (i = e.models) == null ? void 0 : i[s]) == null ? void 0 : r.poseId;
+      var o, n;
+      const s = T().selected;
+      return (n = (o = e.models) == null ? void 0 : o[s]) == null ? void 0 : n.poseId;
     },
     model(e) {
-      const s = A().selected;
+      const s = T().selected;
       return s && e.models[s] ? e.models[s] : null;
     },
     url() {
@@ -2607,37 +2857,37 @@ const go = R({
     },
     colorHex() {
       var e;
-      return (e = this.model) != null && e.color ? ue(this.model.color) : "#fefefe";
+      return (e = this.model) != null && e.color ? me(this.model.color) : "#fefefe";
     }
   },
   actions: {
     resetColor() {
-      const t = A().selected;
+      const t = T().selected;
       this.models[t].color = 16777215;
     },
     setBounds(e) {
-      const s = A().selected;
-      this.models[s].bounds = Ht(e);
+      const s = T().selected;
+      this.models[s].bounds = Kt(e);
     },
     setSubjectsFromResponse(e) {
       const t = e.entities.fbx;
       this.models = { ...this.models, ...t };
     },
     setColorHex(e) {
-      const s = A().selected;
-      this.models[s].color = Ye(e);
+      const s = T().selected;
+      this.models[s].color = et(e);
     }
   }
 });
 export {
-  No as TdPage,
-  A as use3dStore,
-  It as useColorsStore,
-  ct as useControlsStore,
-  Ho as useFBXStore,
-  me as useGLBStore,
-  Ee as useGridStore,
-  Ve as useGroundStore,
-  fe as useLightsStore,
-  ut as useSceneStore
+  en as TdPage,
+  T as use3dStore,
+  Mt as useColorsStore,
+  pt as useControlsStore,
+  tn as useFBXStore,
+  ae as useGLBStore,
+  ve as useGridStore,
+  Fe as useGroundStore,
+  ge as useLightsStore,
+  mt as useSceneStore
 };